From 45bcad5f2c994db8afa16de6b0c22ce0859981bc Mon Sep 17 00:00:00 2001
From: Ben <36240171+benkyd@users.noreply.github.com>
Date: Wed, 6 Apr 2022 21:12:03 +0100
Subject: [PATCH] o
Former-commit-id: 58868c7402f04fcd5daebd9ab51c5f8fe4407c3e
---
client/public/components/basket.mjs | 22 ++++++++++++++-----
client/public/components/css/navbar.css | 10 +++++----
client/public/components/navbar.mjs | 3 +++
client/public/components/product-listing.mjs | 12 ++++++++--
.../components/templates/product-listing.html | 2 +-
client/public/index.html | 3 ---
src/routes/helpers.js | 2 +-
7 files changed, 37 insertions(+), 17 deletions(-)
diff --git a/client/public/components/basket.mjs b/client/public/components/basket.mjs
index e51842a..06e33c8 100644
--- a/client/public/components/basket.mjs
+++ b/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');
+ // }
+ // });
});
}
}
diff --git a/client/public/components/css/navbar.css b/client/public/components/css/navbar.css
index ef1dbe9..d6a8ceb 100644
--- a/client/public/components/css/navbar.css
+++ b/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;
diff --git a/client/public/components/navbar.mjs b/client/public/components/navbar.mjs
index f339b96..9bd9487 100644
--- a/client/public/components/navbar.mjs
+++ b/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');
}
}
diff --git a/client/public/components/product-listing.mjs b/client/public/components/product-listing.mjs
index 8272e56..cc4ad55 100644
--- a/client/public/components/product-listing.mjs
+++ b/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;
+ });
}
}
diff --git a/client/public/components/templates/product-listing.html b/client/public/components/templates/product-listing.html
index 3dcd944..fb74c9f 100644
--- a/client/public/components/templates/product-listing.html
+++ b/client/public/components/templates/product-listing.html
@@ -17,7 +17,7 @@
Quantity:
-
diff --git a/client/public/index.html b/client/public/index.html
index d0bf0ef..a386839 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -23,11 +23,8 @@
-
-
-
diff --git a/src/routes/helpers.js b/src/routes/helpers.js
index 7299bdb..6fe3a8a 100644
--- a/src/routes/helpers.js
+++ b/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({