diff --git a/js/api.js b/js/api.js index bdd489e..34760f9 100644 --- a/js/api.js +++ b/js/api.js @@ -19,9 +19,9 @@ limitations under the License. */ var api = { // The URL root of the API backend - API_URL: "https://api.autodirect.tech", + API_URL: 'https://api.autodirect.tech', - login: async function(userID) { + login: async function (userID) { // send the search query to the backend API const response = await fetch(this.API_URL + '/login?user_id=' + userID); @@ -30,14 +30,13 @@ var api = { if (response.status == 200) { return results; - } - else { + } else { console.log(response); - throw "HTTP status: " + response.status; + throw 'HTTP status: ' + response.status; } }, - search: async function(searchQueryStr) { + search: async function (searchQueryStr) { // send the search query to the backend API const response = await fetch(this.API_URL + '/search' + searchQueryStr); @@ -46,33 +45,37 @@ var api = { if (response.status == 200) { return results; - } - else { + } else { console.log(response); - throw "HTTP status: " + response.status; + throw 'HTTP status: ' + response.status; } }, - getClaimedOffers: async function(userID) { + getClaimedOffers: async function (userID) { // send the claimed offers query to the backend API - const response = await fetch(this.API_URL + '/getClaimedOffers?user_id=' + userID); + const response = await fetch( + this.API_URL + '/getClaimedOffers?user_id=' + userID + ); // retrieve the returned cars/offers const results = await response.json(); if (response.status == 200) { return results; - } - else { + } else { console.log(response); - throw "HTTP status: " + response.status; + throw 'HTTP status: ' + response.status; } }, - getOfferDetails: async function(userID, OfferID) { + getOfferDetails: async function (userID, OfferID) { // send the offer details query to the backend API const response = await fetch( - this.API_URL + '/getOfferDetails?user_id=' + userID + '&offer_id=' + OfferID + this.API_URL + + '/getOfferDetails?user_id=' + + userID + + '&offer_id=' + + OfferID ); // retrieve the offer details @@ -80,48 +83,58 @@ var api = { if (response.status == 200) { return results; - } - else { + } else { console.log(response); - throw "HTTP status: " + response.status; + throw 'HTTP status: ' + response.status; } }, - claimOffer: async function(userID, OfferID) { + claimOffer: async function (userID, OfferID) { // send the claim query to the backend API const response = await fetch( - this.API_URL + '/claimOffer?user_id=' + userID + '&offer_id=' + OfferID + this.API_URL + + '/claimOffer?user_id=' + + userID + + '&offer_id=' + + OfferID ); if (response.status == 200) { return; - } - else { + } else { console.log(response); - throw "HTTP status: " + response.status; + throw 'HTTP status: ' + response.status; } }, - unclaimOffer: async function(userID, OfferID) { + unclaimOffer: async function (userID, OfferID) { // send the unclaim query to the backend API const response = await fetch( - this.API_URL + '/unclaimOffer?user_id=' + userID + '&offer_id=' + OfferID + this.API_URL + + '/unclaimOffer?user_id=' + + userID + + '&offer_id=' + + OfferID ); if (response.status == 200) { return; - } - else { + } else { console.log(response); - throw "HTTP status: " + response.status; + throw 'HTTP status: ' + response.status; } }, - updateLoanAmount: async function(userID, OfferID, loanAmount) { + updateLoanAmount: async function (userID, OfferID, loanAmount) { // send the search query to the backend API const response = await fetch( - this.API_URL + '/updateLoanAmount?user_id=' + userID + '&offer_id=' + OfferID + - '&loan_amount=' + loanAmount + this.API_URL + + '/updateLoanAmount?user_id=' + + userID + + '&offer_id=' + + OfferID + + '&loan_amount=' + + loanAmount ); // retrieve the new offer details @@ -129,15 +142,13 @@ var api = { if (response.status == 200) { return results; - } - else if (response.status == 406) { + } else if (response.status == 406) { return { - 'error': 'New loan principal does not result in a loan offer!' + 'error': 'New loan principal does not result in a loan offer!', }; - } - else { + } else { console.log(response); - throw "HTTP status: " + response.status; + throw 'HTTP status: ' + response.status; } - } + }, }; diff --git a/js/details.js b/js/details.js index 0fbf515..58b2704 100644 --- a/js/details.js +++ b/js/details.js @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ - /* Always called when the details page is loaded. */ @@ -52,13 +51,12 @@ function goBack() { */ function highlightOffer(offerID) { // give the offer a "selected" style - const offerEntry = document.querySelector('li[name="' + offerID +'"]'); - offerEntry.className += " offer-selected"; + const offerEntry = document.querySelector('li[name="' + offerID + '"]'); + offerEntry.className += ' offer-selected'; // scroll the offer entry into view (if not already in-view) offerEntry.scrollIntoView(false); } - /* Offer details operations */ @@ -77,12 +75,17 @@ async function getOfferDetails(userID, offerID) { // display the offer details renderOfferDetails( - details['brand'], details['model'], details['year'], details['kms'], - details['price'], details['loan_amount'], details['interest_rate'], - details['term_mo'], details['total_sum'] - ) - } - catch (e) { + details['brand'], + details['model'], + details['year'], + details['kms'], + details['price'], + details['loan_amount'], + details['interest_rate'], + details['term_mo'], + details['total_sum'] + ); + } catch (e) { console.log(e); } } @@ -91,13 +94,24 @@ async function getOfferDetails(userID, offerID) { Present a given offer's details */ function renderOfferDetails( - make, model, year, kms, price, principal, interest_rate, loan_term, total_sum + make, + model, + year, + kms, + price, + principal, + interest_rate, + loan_term, + total_sum ) { // get render target - let offerDetailsContainer = document.getElementById('offerDetailsContainer'); + let offerDetailsContainer = document.getElementById( + 'offerDetailsContainer' + ); // get mustache template - const tmpl_offerDetails = document.getElementById('tmpl_LoanDetails').innerHTML; + const tmpl_offerDetails = + document.getElementById('tmpl_LoanDetails').innerHTML; // render loan offer info const offerDetailsData = { @@ -110,9 +124,12 @@ function renderOfferDetails( interest_rate: Math.round(interest_rate * 100) / 100, payment_mo: Math.round((total_sum / loan_term) * 100) / 100, loan_term: loan_term, - total_sum: total_sum + total_sum: total_sum, }; - const offerDetailsRendered = Mustache.render(tmpl_offerDetails, offerDetailsData); + const offerDetailsRendered = Mustache.render( + tmpl_offerDetails, + offerDetailsData + ); // append loan offer element to offers container offerDetailsContainer.innerHTML = offerDetailsRendered; @@ -124,7 +141,7 @@ function renderOfferDetails( async function submitNewPrincipal() { // retrieve new principal info const formNewPrincipal = document.getElementById('form-update-principal'); - const newPrincipal = (new FormData(formNewPrincipal)).get('loan-principal'); + const newPrincipal = new FormData(formNewPrincipal).get('loan-principal'); // attempt to update the specified offer's loan amount and fetch its details from the // backend API @@ -141,21 +158,24 @@ async function submitNewPrincipal() { // make changes if ('error' in details) { alert(details['error']); - } - else { + } else { // display the offer details renderOfferDetails( - details['brand'], details['model'], details['year'], details['kms'], - details['price'], details['loan_amount'], details['interest_rate'], - details['term_mo'], details['total_sum'] - ) + details['brand'], + details['model'], + details['year'], + details['kms'], + details['price'], + details['loan_amount'], + details['interest_rate'], + details['term_mo'], + details['total_sum'] + ); } - } - catch (e) { + } catch (e) { console.log(e); } } - // always call this function on page load onPageLoad(); diff --git a/js/discover.js b/js/discover.js index 0cc65b0..573a642 100644 --- a/js/discover.js +++ b/js/discover.js @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ - /* Always called when the discovery page is loaded. */ @@ -26,12 +25,11 @@ async function onPageLoad() { let sortByURL = fetchQueryParamByKey('sort_by'); if (sortByURL === null) { setPairInQuery('sort_by', 'price'); - } - else { + } else { // change the input element selected value to reflect URL selection const sortBySelect = document.getElementById('sortBy'); let options = sortBySelect.options; - for (let opt, i = 0; opt = options[i]; i++) { + for (let opt, i = 0; (opt = options[i]); i++) { if (opt.value == sortByURL) { sortBySelect.selectedIndex = i; break; @@ -43,8 +41,7 @@ async function onPageLoad() { let sortAscURL = fetchQueryParamByKey('sort_asc'); if (sortAscURL === null) { setPairInQuery('sort_asc', 'true'); - } - else if (sortAscURL == 'false') { + } else if (sortAscURL == 'false') { document.getElementById('sortIcon').style.transform = 'none'; } @@ -56,8 +53,7 @@ async function onPageLoad() { setPairInQuery('budget_mo', ''); setPairInQuery('user_id', ''); submitSearch(); - } - else { + } else { // log in the user await userLogin(); // fetch and display the user's claimed offers, if there is any @@ -65,7 +61,6 @@ async function onPageLoad() { } } - /* Login/agreement feature */ @@ -89,7 +84,7 @@ async function userLogin() { // update user budget if not given let budgetMo = fetchQueryParamByKey('budget_mo'); if (budgetMo === null || budgetMo === '') { - budgetMo = userParams["budget_mo"]; + budgetMo = userParams['budget_mo']; } setPairInQuery('budget_mo', budgetMo); document.querySelector('input[name="budget_mo"]').value = budgetMo; @@ -97,12 +92,12 @@ async function userLogin() { // update user down payment if not given let downPayment = fetchQueryParamByKey('downpayment'); if (downPayment === null || downPayment === '') { - downPayment = userParams["down_payment"]; + downPayment = userParams['down_payment']; } setPairInQuery('downpayment', downPayment); - document.querySelector('input[name="down_payment"]').value = downPayment; - } - catch (e) { + document.querySelector('input[name="down_payment"]').value = + downPayment; + } catch (e) { console.log(e); } @@ -122,7 +117,8 @@ async function displayLoggedInView() { // show more sort options const sortByContainer = document.getElementById('sortBy'); - sortByContainer.innerHTML += document.getElementById('tmpl_SortOptions').innerHTML; + sortByContainer.innerHTML += + document.getElementById('tmpl_SortOptions').innerHTML; // add cars with loan offer info await submitSearch(); @@ -146,7 +142,6 @@ function genNewUserID() { return 'u' + utc_string + rand_credit_score; } - /* Search features */ @@ -161,8 +156,7 @@ function toggleSortOrder() { sortIcon.style.transform = 'scaleY(-1)'; // configure the search params to set ascending search order to true setPairInQuery('sort_asc', 'true'); - } - else { + } else { // for ascending order, do not flip icon sortIcon.style.transform = 'none'; // configure the search params to set ascending search order to false @@ -207,11 +201,11 @@ async function submitSearch() { removeAllCarsOffers(); // show the user an error let carsContainer = document.getElementById('carsContainer'); - carsContainer.innerHTML += '

' + + carsContainer.innerHTML += + '

' + 'You are not offered a loan! ' + 'Your credit score, monthly budget, or down payment is too low.

'; - } - else { + } else { // display the results if successful displayCarsOrOffers(results); } @@ -221,14 +215,12 @@ async function submitSearch() { if (userID !== '' && userID !== null) { updateClaimedOffers(userID); } - } - catch (e) { + } catch (e) { console.log(e); console.log(window.location.search); } } - /* Cars and loan offers (left side results) operations */ @@ -247,16 +239,24 @@ function displayCarsOrOffers(listings) { item['kms'] = item['mileage']; } addCarToContainer( - item['offer_id'], item['brand'], item['model'], item['year'], item['kms'], - item['price'], item['interest_rate'], item['payment_mo'], item['term_mo'], + item['offer_id'], + item['brand'], + item['model'], + item['year'], + item['kms'], + item['price'], + item['interest_rate'], + item['payment_mo'], + item['term_mo'], item['total_sum'] - ) + ); } // if there is an odd number of cars, add an invisible entry for visual pleasantness if (listings.length % 2 !== 0) { let carsContainer = document.getElementById('carsContainer'); - carsContainer.innerHTML += ''; + carsContainer.innerHTML += + ''; } } @@ -269,15 +269,28 @@ function displayCarsOrOffers(listings) { - this option should be used before agreement/login */ function addCarToContainer( - id, make, model, year, kms, price, interest_rate, payment_mo, loan_term, total_sum + id, + make, + model, + year, + kms, + price, + interest_rate, + payment_mo, + loan_term, + total_sum ) { // get render target let carsContainer = document.getElementById('carsContainer'); // get mustache templates const tmpl_CarOffer = document.getElementById('tmpl_CarOffer').innerHTML; - const tmpl_CarOfferCarInfo = document.getElementById('tmpl_CarOfferCarInfo').innerHTML; - const tmpl_CarOfferLoanInfo = document.getElementById('tmpl_CarOfferLoanInfo').innerHTML; + const tmpl_CarOfferCarInfo = document.getElementById( + 'tmpl_CarOfferCarInfo' + ).innerHTML; + const tmpl_CarOfferLoanInfo = document.getElementById( + 'tmpl_CarOfferLoanInfo' + ).innerHTML; // render car info const carData = { @@ -285,33 +298,41 @@ function addCarToContainer( model: model, year: year, kms: Math.round(kms), - price: Math.round(price * 100) / 100 + price: Math.round(price * 100) / 100, }; const carInfoRendered = Mustache.render(tmpl_CarOfferCarInfo, carData); // if given loan data, render loan info with available button - if ((interest_rate !== '') && (interest_rate !== null) && (interest_rate !== undefined)) { + if ( + interest_rate !== '' && + interest_rate !== null && + interest_rate !== undefined + ) { const loanData = { interest_rate: Math.round(interest_rate * 100) / 100, payment_mo: Math.round(payment_mo * 100) / 100, loan_term: loan_term, - total_sum: total_sum + total_sum: total_sum, }; var loanInfoRendered = Mustache.render(tmpl_CarOfferLoanInfo, loanData); - var carOfferBtn = document.getElementById('tmpl_CarOfferBtnAvailable').innerHTML; + var carOfferBtn = document.getElementById( + 'tmpl_CarOfferBtnAvailable' + ).innerHTML; } // otherwise, provide empty loan info and an unavailable button else { var loanInfoRendered = ''; - var carOfferBtn = document.getElementById('tmpl_CarOfferBtnUnavailable').innerHTML; + var carOfferBtn = document.getElementById( + 'tmpl_CarOfferBtnUnavailable' + ).innerHTML; } // assemble car offer const carOfferData = { car_info: carInfoRendered, loan_info: loanInfoRendered, - button: Mustache.render(carOfferBtn, {id: id}) - } + button: Mustache.render(carOfferBtn, {id: id}), + }; const carOfferRendered = Mustache.render(tmpl_CarOffer, carOfferData); // append car offer element to cars container @@ -331,10 +352,10 @@ function removeAllCarsOffers() { */ function setCarsOffersLoading() { let carsContainer = document.getElementById('carsContainer'); - carsContainer.innerHTML = '
Loading...
'; + carsContainer.innerHTML = + '
Loading...
'; } - /* Claimed loan offers operations */ @@ -347,8 +368,7 @@ async function updateClaimedOffers(userID) { const offersDetailsLink = document.getElementById('offersDetailsLink'); if (userOffer !== null) { offersDetailsLink.style.visibility = 'visible'; - } - else { + } else { removeAllLoanOffers(); offersDetailsLink.style.visibility = 'hidden'; } @@ -363,12 +383,18 @@ function toggleButtonClaimed(claimButton) { if (part.className.includes('claim-text')) { // unclaimed state if (part.className.includes('btn-dark-blue')) { - part.className = part.className.replace('btn-dark-blue', 'btn-red'); + part.className = part.className.replace( + 'btn-dark-blue', + 'btn-red' + ); part.textContent = 'Offer claimed'; } // claimed state else { - part.className = part.className.replace('btn-red', 'btn-dark-blue'); + part.className = part.className.replace( + 'btn-red', + 'btn-dark-blue' + ); part.textContent = 'Claim this offer'; } } @@ -376,13 +402,25 @@ function toggleButtonClaimed(claimButton) { if (part.className.includes('claim-heart')) { // unclaimed state if (part.className.includes('bg-heart-empty')) { - part.className = part.className.replace('bg-heart-empty', 'bg-heart-filled'); - part.className = part.className.replace('btn-red', 'btn-dark-blue'); + part.className = part.className.replace( + 'bg-heart-empty', + 'bg-heart-filled' + ); + part.className = part.className.replace( + 'btn-red', + 'btn-dark-blue' + ); } // claimed state else { - part.className = part.className.replace('bg-heart-filled', 'bg-heart-empty'); - part.className = part.className.replace('btn-dark-blue', 'btn-red'); + part.className = part.className.replace( + 'bg-heart-filled', + 'bg-heart-empty' + ); + part.className = part.className.replace( + 'btn-dark-blue', + 'btn-red' + ); } } } @@ -392,12 +430,14 @@ function toggleButtonClaimed(claimButton) { Claim a given loan offer */ async function toggleClaimOffer(id) { - let claimButton = document.querySelector('button.claim-btn[name="' + id +'"]'); + let claimButton = document.querySelector( + 'button.claim-btn[name="' + id + '"]' + ); const userID = fetchQueryParamByKey('user_id'); // attempt to claim the specified offer at the backend API try { // offer is unclaimed, so claim it - if (claimButton.innerHTML.includes("Claim this offer")) { + if (claimButton.innerHTML.includes('Claim this offer')) { await api.claimOffer(userID, id); } // offer is claimed, so unclaim it @@ -410,12 +450,10 @@ async function toggleClaimOffer(id) { // update the claimed offers widget, fetch and display the user's claimed offers await updateClaimedOffers(userID); - } - catch (e) { + } catch (e) { console.log(e); } } - // always call this function on page load onPageLoad(); diff --git a/js/main.js b/js/main.js index 8a057c5..7af202b 100644 --- a/js/main.js +++ b/js/main.js @@ -38,7 +38,6 @@ function setPairInQuery(key, value) { window.history.replaceState(null, null, new_params); } - /* Claimed offers list operations */ @@ -54,16 +53,14 @@ async function fetchClaimedOffers(userID) { // if no claimed offers, return null if (userClaimedOffers.length === 0) { return null; - } - else { + } else { // populate the sidebar with user's claimed offers displayClaimedOffers(userClaimedOffers, userID); // return the first offer ID as selection default return userClaimedOffers[0]['offer_id']; } - } - catch (e) { + } catch (e) { console.log(e); console.log(window.location.search); } @@ -76,8 +73,14 @@ function displayClaimedOffers(offers, userID) { removeAllLoanOffers(); for (const offer of offers) { addOfferToContainer( - userID, offer['offer_id'], offer['brand'], offer['model'], offer['year'], - offer['interest_rate'], offer['term_mo'], offer['total_sum'] + userID, + offer['offer_id'], + offer['brand'], + offer['model'], + offer['year'], + offer['interest_rate'], + offer['term_mo'], + offer['total_sum'] ); } } @@ -86,7 +89,14 @@ function displayClaimedOffers(offers, userID) { Add a loan offer to the loan offers container */ function addOfferToContainer( - user_id, offer_id, make, model, year, interest_rate, loan_term, total_sum + user_id, + offer_id, + make, + model, + year, + interest_rate, + loan_term, + total_sum ) { // get render target let offersContainer = document.getElementById('loanOffersContainer'); @@ -103,7 +113,7 @@ function addOfferToContainer( year: year, payment_mo: Math.round((total_sum / loan_term) * 100) / 100, loan_term: loan_term, - interest_rate: Math.round(interest_rate * 100) / 100 + interest_rate: Math.round(interest_rate * 100) / 100, }; const loanOfferRendered = Mustache.render(tmpl_LoanOffer, loanOfferData);