Merge pull request #15 from TLI-Group-1/feature/discovery-page-additions

Feature/discovery page additions
TLI-Group-1 · Dec 9, 2021 · a0633fc · a0633fc
2 parents 01f0afe + 451cedb
commit a0633fc
Show file tree

Hide file tree

Showing 9 changed files with 212 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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
@@ -36,7 +36,7 @@
 <body>
     <main class="card border-thin">
         <header>
-            <div class="region-dark go-back" onclick="window.history.go(-1);">
+            <div class="region-dark go-back" onclick="goBack();">
                 <img src="./assets/icons/arrow-back-min.svg" alt="Back">
                 <h3>Return to your search</h3>
             </div>

diff --git a/index.html b/index.html
@@ -79,7 +79,9 @@ <h3>Your loan offers</h3>
                 </header>
                 <ul class="loan-offers" id="loanOffersContainer">
                 </ul>
-                <a id="offersDetailsLink" class="round-empty-pill" href="./details.html">See all offer details</a>
+                <a id="offersDetailsLink" class="round-empty-pill" href="./details.html" style="visibility: hidden;">
+                    See all offer details
+                </a>
             </section>
         </aside>
         <section>
@@ -207,7 +209,7 @@ <h5>Total cost:</h5>
         </button>
     </script>
     <script type="text/html" id="tmpl_CarOfferBtnAvailable">
-        <button type="button" class="claim-btn rounded-bottom" name="{{id}}" onclick="claimOffer(this.name);">
+        <button type="button" class="claim-btn rounded-bottom" name="{{id}}" onclick="toggleClaimOffer(this.name);">
             <span class="btn-dark-blue claim-text">Claim this offer</span>
             <span class="btn-red bg-heart-empty claim-heart"></span>
         </button>

diff --git a/js/api.js b/js/api.js
@@ -85,5 +85,35 @@ 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;
+        }
+    },
+
+    unclaimOffer: async function(userID, OfferID) {
+        // send the search query to the backend API
+        const response = await fetch(
+            this.API_URL + '/unclaimOffer?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
@@ -22,47 +22,30 @@ async function onPageLoad() {
     // fetch the user_id from the URL
     let userID = fetchQueryParamByKey('user_id');
     // fetch all claimed offers for this user
-    await fetchClaimedOffers(userID);
+    const firstOfferID = await fetchClaimedOffers(userID);
 
     // find the selected offer for this user
     let offerSelected = fetchQueryParamByKey('offerSelected');
+    // select the first offer if none are specified
+    if (offerSelected === null || offerSelected === '') {
+        offerSelected = firstOfferID;
+        setPairInQuery('offerSelected', offerSelected);
+    }
     // show details for the specified offer
     await getOfferDetails(userID, offerSelected);
 }
 
 /*
-    Claimed offers list operations
-*/
-
-/*
-    Get the list of offers for a specific user
+    Function that takes the user back to the discovery page
 */
-async function fetchClaimedOffers(userID) {
-    try {
-        // call the API to get the user's claimed offers
-        const userClaimedOffers = await api.getClaimedOffers(userID);
-
-        // populate the sidebar with user's claimed offers
-        displayClaimedOffers(userClaimedOffers, userID);
-    }
-    catch (e) {
-        console.log(e);
-        console.log(window.location.search);
-    }
+function goBack() {
+    let userID = fetchQueryParamByKey('user_id');
+    window.location.href = '/?user_id=' + userID;
 }
 
 /*
-    Display the given list of claimed offers
+    Claimed offers list operations
 */
-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']
-        );
-    }
-}
 
 /*
     Highlight an offer (purely cosmetically)
@@ -95,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);
     }
 }