From 86e6981df31770124c6bd7ced1c4150c05dcbd66 Mon Sep 17 00:00:00 2001 From: Samm Du Date: Thu, 9 Dec 2021 06:06:35 -0500 Subject: [PATCH] able to claim a given offer --- css/details.css | 6 ++++- css/index.css | 2 +- css/main.css | 1 + details.html | 2 +- js/api.js | 15 +++++++++++++ js/details.js | 13 ++++++++--- js/discover.js | 59 ++++++++++++++++++++++++++++++++++++++++++++----- js/main.js | 4 ++-- 8 files changed, 89 insertions(+), 13 deletions(-) diff --git a/css/details.css b/css/details.css index 4af7b39..e9e6b14 100644 --- a/css/details.css +++ b/css/details.css @@ -115,6 +115,7 @@ main > nav { main > div { height: 42rem; + border-radius: 0 0 1.1rem 1.1rem; display: flex; flex-direction: row; flex-wrap: nowrap; @@ -141,6 +142,7 @@ main > div aside { border-radius: 0 0 0 1.1rem; overflow-y: auto; overscroll-behavior-y: contain; + scrollbar-color: #ffffff #1d2345; } @media (max-width: 670px) { @@ -178,9 +180,10 @@ main > div section { section div.loan-offer-details { padding: 2rem; - border-radius: 0 0 1.1rem 0; overflow-y: auto; overscroll-behavior-y: contain; + scrollbar-color: #36cf9b #1d2345; + border-radius: 0 0 1.1rem 0; display: flex; flex-direction: column; row-gap: 2rem; @@ -219,6 +222,7 @@ div.loan-offer-details ul { div.loan-offer-details ul li span { font-weight: 500; font-size: 1.2rem; + text-transform: capitalize; } main > div section div.loan-offer-details input { diff --git a/css/index.css b/css/index.css index 47b9b7f..81c7b8c 100644 --- a/css/index.css +++ b/css/index.css @@ -334,7 +334,7 @@ div.cars-container { width: 100%; border-radius: 0 0 0 1.1rem; padding: 1rem; - font-weight: 500; + font-weight: 600; } .car-offer button.claim-btn span.claim-text:hover { width: 80%; diff --git a/css/main.css b/css/main.css index 4d7fa28..b329d56 100644 --- a/css/main.css +++ b/css/main.css @@ -308,6 +308,7 @@ footer div.footer-spacer { } .loan-offer-entry span.offer-car-info { font-weight: 600; + text-transform: capitalize; } .loan-offer-entry span.offer-loan-info { color: #333333; diff --git a/details.html b/details.html index dfc8317..8b563bf 100644 --- a/details.html +++ b/details.html @@ -36,7 +36,7 @@
-
+
Back

Return to your search

diff --git a/js/api.js b/js/api.js index e793648..3e365d5 100644 --- a/js/api.js +++ b/js/api.js @@ -85,5 +85,20 @@ var api = { console.log(response); throw "HTTP status: " + response.status; } + }, + + claimOffer: async function(userID, OfferID) { + // send the search query to the backend API + const response = await fetch( + this.API_URL + '/claimOffer?user_id=' + userID + '&offer_id=' + OfferID + ); + + if (response.status == 200) { + return; + } + else { + console.log(response); + throw "HTTP status: " + response.status; + } } }; diff --git a/js/details.js b/js/details.js index 1e2a321..abdb0a2 100644 --- a/js/details.js +++ b/js/details.js @@ -35,6 +35,14 @@ async function onPageLoad() { await getOfferDetails(userID, offerSelected); } +/* + Function that takes the user back to the discovery page +*/ +function goBack() { + let userID = fetchQueryParamByKey('user_id'); + window.location.href = '/?user_id=' + userID; +} + /* Claimed offers list operations */ @@ -70,13 +78,12 @@ async function getOfferDetails(userID, offerID) { // display the offer details renderOfferDetails( details['brand'], details['model'], details['year'], details['kms'], - details['price'], details['loanAmount'], details['interestRate'], details['termMo'], - details['totalSum'] + details['price'], details['loan_amount'], details['interest_rate'], + details['term_mo'], details['total_sum'] ) } catch (e) { console.log(e); - console.log(window.location.search); } } diff --git a/js/discover.js b/js/discover.js index aec3429..bbd1957 100644 --- a/js/discover.js +++ b/js/discover.js @@ -203,13 +203,14 @@ async function submitSearch() { on each item. */ function displayCarsOrOffers(listings) { + // clear out the cars/offers container removeAllCarsOffers(); // add all car/loan offer listings to the container for (const item of listings) { addCarToContainer( item['offer_id'], item['brand'], item['model'], item['year'], item['kms'], - item['price'], item['apr'], item['payment_mo'], item['term_length'], + item['price'], item['interest_rate'], item['payment_mo'], item['term_mo'], item['total_sum'] ) } @@ -301,15 +302,63 @@ function setCarsOffersLoading() { */ /* - + Visually toggle the specified claim button between claimed and unclaimed */ - +function toggleButtonClaimed(id) { + let claimButton = document.querySelector('button.claim-btn[name="' + id +'"]'); + for (let part of claimButton.children) { + // modify the text component + 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.textContent = 'Offer claimed'; + } + // claimed state + else { + part.className = part.className.replace('btn-red', 'btn-dark-blue'); + part.textContent = 'Claim this offer'; + } + } + // modify the heart component + 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'); + } + // claimed state + else { + part.className = part.className.replace('bg-heart-filled', 'bg-heart-empty'); + part.className = part.className.replace('btn-dark-blue', 'btn-red'); + } + } + } +} /* - TODO: claim a given loan offer + Claim a given loan offer */ async function claimOffer(id) { - console.log('Claiming ' + id); + const userID = fetchQueryParamByKey('user_id'); + // attempt to claim the specified offer at the backend API + try { + // make the API call + await api.claimOffer(userID, id); + + // display the offer details + toggleButtonClaimed(id); + + // update the claimed offers widget, fetch and display the user's claimed offers + const userOffer = await fetchClaimedOffers(userID); + if (userOffer !== null) { + const offersDetailsLink = document.getElementById('offersDetailsLink'); + offersDetailsLink.style.visibility = 'visible'; + } + } + catch (e) { + console.log(e); + } } diff --git a/js/main.js b/js/main.js index e35b92b..ee309fc 100644 --- a/js/main.js +++ b/js/main.js @@ -76,8 +76,8 @@ function displayClaimedOffers(offers, userID) { removeAllLoanOffers(); for (const offer of offers) { addOfferToContainer( - userID, offer['offerId'], offer['brand'], offer['model'], offer['year'], - offer['interestRate'], offer['termMo'], offer['totalSum'] + userID, offer['offer_id'], offer['brand'], offer['model'], offer['year'], + offer['interest_rate'], offer['term_mo'], offer['total_sum'] ); } }