hide advanced sort options until logged in

TLI-Group-1 · Dec 12, 2021 · 6caa78f · 6caa78f
1 parent b725b7b
commit 6caa78f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/css/main.css b/css/main.css
@@ -315,8 +315,9 @@ footer div.footer-spacer {
 }
 
 .error-message {
+    color: #d81b43;
+    text-align: center;
     font-size: 1.1rem;
     word-wrap: break-word;
     word-break: normal;
-    color: #d81b43;
 }
diff --git a/index.html b/index.html
@@ -92,10 +92,7 @@ <h3>Your loan offers</h3>
                     </button>
                     <select name="sortBy" id="sortBy" onchange="setSortByFromElement();">
                         <option value="price" selected>Retail price</option>
-                        <option value="interest_rate">Interest rate</option>
-                        <option value="payment_mo">Monthly payment</option>
-                        <option value="total_sum">Total cost</option>
-                        <option value="term_mo">Loan term length</option>
+
                     </select>
                 </span>
             </nav>
@@ -146,6 +143,14 @@ <h3>Powered by:</h3>
     </footer>
 
     <!-- Mustache templates below; rendered in JavaScript -->
+
+    <script type="text/html" id="tmpl_SortOptions">
+        <option value="interest_rate">Interest rate</option>
+        <option value="payment_mo">Monthly payment</option>
+        <option value="total_sum">Total cost</option>
+        <option value="term_mo">Loan term length</option>
+    </script>
+
     <script type="text/html" id="tmpl_CarOffer">
         <div class="car-offer card border-thin">
             <img src="assets/img/car-1.jpg" alt="Car Picture">
@@ -156,6 +161,7 @@ <h3>Powered by:</h3>
             {{&button}}
         </div>
     </script>
+
     <script type="text/html" id="tmpl_CarOfferCarInfo">
         <div class="car-info-pair">
             <h5>Make:</h5>
@@ -179,6 +185,7 @@ <h5>Retail price:</h5>
         </div>
         <div class="car-info-pair" style="visibility: hidden;"></div>
     </script>
+
     <script type="text/html" id="tmpl_CarOfferLoanInfo">
         <div class="car-info-pair">
             <h5>Interest rate:</h5>
@@ -197,17 +204,20 @@ <h5>Total cost:</h5>
             <span class="green-text">&#36;{{total_sum}}</span>
         </div>
     </script>
+
     <script type="text/html" id="tmpl_CarOfferBtnUnavailable">
         <button type="button" class="region-gray rounded-bottom claim-unavailable">
             Agree to view offers
         </button>
     </script>
+
     <script type="text/html" id="tmpl_CarOfferBtnAvailable">
         <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>
     </script>
+
     <script type="text/html" id="tmpl_LoanOffer">
         <li class="loan-offer-entry">
             <a href="./details.html?user_id={{user_id}}&offerSelected={{offer_id}}">

diff --git a/js/discover.js b/js/discover.js
@@ -120,6 +120,10 @@ async function displayLoggedInView() {
     const financialParams = document.getElementById('side-params');
     financialParams.style.display = 'block';
 
+    // show more sort options
+    const sortByContainer = document.getElementById('sortBy');
+    sortByContainer.innerHTML += document.getElementById('tmpl_SortOptions').innerHTML;
+
     // add cars with loan offer info
     await submitSearch();