o

Former-commit-id: 58868c7402f04fcd5daebd9ab51c5f8fe4407c3e

client/public/components/basket.mjs

@@ -17,6 +17,7 @@ import { RegisterComponent, Component } from './components.mjs';
 
 let basketCallback = null;
 
+
 // TODO: Does the localstorage have a problem with mutual exclusion?
 // TODO: Should the basket be persisted to the server?
 export function AddProductToBasket(product, amount) {
@@ -28,19 +29,15 @@ export function AddProductToBasket(product, amount) {
     }
 
     const basket = JSON.parse(localStorage.getItem('basket'));
-    console.log(basket);
 
     if (basket.items.product) {
         basket.items.product += amount;
     } else {
         basket.items.product = amount;
     }
-    console.log(basket);
 
     basket.total += amount;
-    console.log(basket);
 
-    console.log(JSON.stringify(basket, null, 4));
     localStorage.setItem('basket', JSON.stringify(basket));
 
     if (basketCallback) {
@@ -168,7 +165,8 @@ class Basket extends Component {
 
                 #basket-popup {
                     position: absolute;
-                    background-color: #EC914B;
+                    background-color: #AB8FFF;
+                    right: 0;
                     width: 200px;
                     height: 200px;
                     flex-direction: column;
@@ -176,7 +174,6 @@ class Basket extends Component {
                     align-items: center;
                     z-index: 100;
                 }
-
             `,
         };
     }
@@ -188,6 +185,19 @@ class Basket extends Component {
         basketToggler.addEventListener('click', () => {
             const popup = this.root.querySelector('.popup');
             popup.classList.toggle('show');
+
+            popup.addEventListener('click', (e) => {
+                if (e.target.classList.contains('popup-close')) {
+                    popup.classList.remove('show');
+                }
+            });
+
+            // allow "click off to close"
+            // document.addEventListener('click', (e) => {
+            //     if (!popup.contains(e.target)) {
+            //         popup.classList.remove('show');
+            //     }
+            // });
         });
     }
 }

client/public/components/css/navbar.css

@@ -7,7 +7,7 @@
     margin-top:-10px!important;
     margin-bottom:0px!important;
     width: 100%;
-    background-color: #EFAE4F;
+    background-color: #D7C2FF;
     box-shadow: #222 0px 0px 5px;
     background-size: 100% 100%;
     z-index: 1;
@@ -148,8 +148,10 @@
 .sub-nav {
     display: none;
     position: absolute;
-    background-color: #EC914B;
-    padding: 5px 5px;
+    background-color: #AB8FFF;
+    font-size: 0.8em;
+    text-align: center;
+    padding: 10px 10px;
     list-style: none;
     left: parent;
     max-width: 300px;
@@ -168,7 +170,7 @@
 
     .nav-menu {
         position: fixed;
-        background: #efaf4fbb;
+        background: #d7c2ffe0;
         flex-direction: column;
         justify-content: center;
         opacity: 50;

client/public/components/navbar.mjs

@@ -22,6 +22,9 @@ class NavBar extends Component {
             menuToggler.classList.toggle('menu-active');
             navMenu.classList.toggle('menu-active');
         });
+
+        // set up basket
+        const basketToggler = document.querySelector('#basket-count');
     }
 }
 

client/public/components/product-listing.mjs

@@ -1,5 +1,5 @@
 import { RegisterComponent, Component, SideLoad } from './components.mjs';
-import * as Helpers from '../helpers.mjs';
+import { AddProductToBasket } from './basket.mjs';
 
 class ProductListing extends Component {
     static __IDENTIFY() { return 'product-listing'; }
@@ -19,7 +19,6 @@ class ProductListing extends Component {
             ...this.getState,
             ...data.data[0],
         });
-        console.log(this.getState);
     }
 
     Render() {
@@ -35,6 +34,15 @@ class ProductListing extends Component {
         backButton.addEventListener('click', () => {
             window.history.back();
         });
+
+        // add quantity to basket and then update the basket count
+        const addToBasket = this.root.querySelector('.add-to-cart-button');
+        const basketCount = this.root.querySelector('.quantity-input');
+
+        addToBasket.addEventListener('click', () => {
+            AddProductToBasket(this.state.id, Math.abs(parseInt(basketCount.value)));
+            basketCount.value = 1;
+        });
     }
 }
 

client/public/components/templates/product-listing.html

@@ -17,7 +17,7 @@
                 <span class="quantity-label">Quantity:</span>
                 <input class="quantity-input" type="number" value="1" min="1" step="1"/>
             </div>
-            <div class="product-add-to-cart">
+            <div class="product-add-to-basket">
                 <button class="add-to-cart-button">Add to Basket</button>
             </div>
         </div>

client/public/index.html

@@ -23,11 +23,8 @@
 </head>
 <body>
 	<notificationbar-component></notificationbar-component>
-	
 	<navbar-component></navbar-component>
-	
 	<limited-margin>
-		
 		<storefront-component id="store"></storefront-component>
 		
 		<!-- <canvas id="webglviewer" width="300" height="300"></canvas> -->

src/routes/helpers.js

@@ -1,5 +1,5 @@
 // 15 days from now
-const EndDate = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
+const EndDate = new Date(1651269600 * 1000);
 
 function Special(req, res, next) {
     res.send({