diff --git a/README.md b/README.md index e274abe..48496e6 100644 Binary files a/README.md and b/README.md differ diff --git a/client/public/basket.mjs b/client/public/basket.mjs index b8dbf5f..cb5c146 100644 --- a/client/public/basket.mjs +++ b/client/public/basket.mjs @@ -25,6 +25,23 @@ export function ClearBasket() { localStorage.removeItem('basket'); } +export function GetItemAmountBasket(product) { + if (localStorage.getItem('basket') === null || !localStorage.getItem('basket')) { + return; + } + const basket = JSON.parse(localStorage.getItem('basket')); + + let accumilator = 0; + + for (const [item, value] of Object.entries(basket.items)) { + if (item.includes(product)) { + accumilator += value.quantity; + } + } + + return accumilator; +} + export function AddProductToBasket(product, type, amount, brickModifier = 'none') { if (localStorage.getItem('basket') === null || !localStorage.getItem('basket')) { localStorage.setItem('basket', JSON.stringify({ diff --git a/client/public/components/compact-listing.mjs b/client/public/components/compact-listing.mjs index 3b24b1b..75131f7 100644 --- a/client/public/components/compact-listing.mjs +++ b/client/public/components/compact-listing.mjs @@ -1,4 +1,5 @@ import { RegisterComponent, Component } from './components.mjs'; +import * as Basket from '../basket.mjs'; class CompactProductListing extends Component { static __IDENTIFY() { return 'compact-listing'; } @@ -32,13 +33,16 @@ class CompactProductListing extends Component { ${this.state.tags - ? this.state.tags.map(tag => ``).join('') + ? this.state.tags.map(tag => ``).join('') : ''} +
+ +
${this.state.discount ? `£${parseFloat(this.state.price).toFixed(2)}£${parseFloat(this.state.discount).toFixed(2)}` : `£${parseFloat(this.state.price).toFixed(2)}`} - + `, style: ` @@ -118,6 +122,35 @@ class CompactProductListing extends Component { max-height: 100%; } } + + .add-to-basket { + width: 100%; + } + + .add-to-basket-button { + width: 100%; + background-color: #F5F6F6; + outline: 2px solid #222; + color: #222; + border: none; + padding: 10px; + fomt-size: 1.2em; + font-weight: bold; + cursor: pointer; + transition: all 250ms ease-in-out; + margin-top: 5px; + margin-bottom: 5px; + } + + .add-to-basket-button:hover { + color: #fff; + background-color: #222; + } + + .button-refresh { + color: #fff; + background-color: #222; + } `, }; } @@ -135,6 +168,28 @@ class CompactProductListing extends Component { name.addEventListener('click', () => { this.OpenProductListing(Object.bind(this)); }); + + const addToBasketButton = this.root.querySelector('.add-to-basket-button'); + + if (parseInt(this.state.stock) - Basket.GetItemAmountBasket(this.state.id) < 1 || parseInt(this.state.stock) === 0) { + addToBasketButton.disabled = true; + addToBasketButton.style.backgroundColor = '#888'; + addToBasketButton.style.color = '#222'; + addToBasketButton.innerText = 'Out of stock'; + } + + addToBasketButton.addEventListener('click', () => { + Basket.AddProductToBasket(this.state.id, this.state.type, 1, 0); + + addToBasketButton.disabled = true; + addToBasketButton.classList.add('button-refresh'); + addToBasketButton.innerText = 'Added to basket'; + setTimeout(() => { + this.setState({ + ...this.getState, + }); + }, 1000); + }); } } diff --git a/client/public/components/product-list.mjs b/client/public/components/product-list.mjs index 489c483..db604fd 100644 --- a/client/public/components/product-list.mjs +++ b/client/public/components/product-list.mjs @@ -86,6 +86,7 @@ class ProductList extends Component { id="${product.id}" listing="${product.listing}" price="${product.price}" + stock="${product.stock}" type="${product.type}" tags="${JSON.stringify(product.tags).replace(/"/g, '"')}" discount="${product.discount || ''}"> diff --git a/client/public/components/templates/navbar.html b/client/public/components/templates/navbar.html index cbd4401..7acbc05 100644 --- a/client/public/components/templates/navbar.html +++ b/client/public/components/templates/navbar.html @@ -11,19 +11,32 @@