diff --git a/README.md b/README.md index 8fe6ffe..e7364a4 100644 Binary files a/README.md and b/README.md differ diff --git a/client/public/components/basket.mjs b/client/public/components/basket.mjs index 75066cd..f106921 100644 --- a/client/public/components/basket.mjs +++ b/client/public/components/basket.mjs @@ -20,7 +20,7 @@ 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) { +export function AddProductToBasket(product, type, amount) { if (localStorage.getItem('basket') === null || !localStorage.getItem('basket')) { localStorage.setItem('basket', JSON.stringify({ items: {}, @@ -30,10 +30,13 @@ export function AddProductToBasket(product, amount) { const basket = JSON.parse(localStorage.getItem('basket')); - if (basket.items.product) { - basket.items.product += amount; + if (basket.items[product]) { + basket.items[product].quantity += amount; } else { - basket.items.product = amount; + basket.items[product] = { + quantity: amount, + type, + }; } basket.total += amount; @@ -45,16 +48,16 @@ export function AddProductToBasket(product, amount) { } } -export function RemoveProductFromBasket(item, amount) { +export function RemoveProductFromBasket(product, amount) { if (localStorage.getItem('basket') === null || !localStorage.getItem('basket')) { return; } const basket = JSON.parse(localStorage.getItem('basket')); - if (basket.items.item > amount) { - basket.items.item -= amount; + if (basket.items[product] > amount) { + basket.items[product] -= amount; } else { - delete basket.items.item; + delete basket.items[product]; } basket.total -= amount; diff --git a/client/public/components/compact-listing.mjs b/client/public/components/compact-listing.mjs index 656ef53..873e3e5 100644 --- a/client/public/components/compact-listing.mjs +++ b/client/public/components/compact-listing.mjs @@ -21,8 +21,8 @@ class CompactProductListing extends Component {
{this.state.name} {this.state.id}
${this.state.discount - ? '£{this.state.price}£{this.state.discount}' - : '£{this.state.price}'} + ? `£${parseFloat(this.state.price).toFixed(2)}£${parseFloat(this.state.discount).toFixed(2)}` + : `£${parseFloat(this.state.price).toFixed(2)}`} `, diff --git a/client/public/components/css/product-listing.css b/client/public/components/css/product-listing.css index 4d13fe7..32cce28 100644 --- a/client/public/components/css/product-listing.css +++ b/client/public/components/css/product-listing.css @@ -233,7 +233,7 @@ input[type=number] { height: 400px; } -.set-piece-container { +.set-brick-container { width: 100%; display: flex; flex-direction: row; @@ -249,7 +249,7 @@ input[type=number] { min-width: 0; } -.set-piece-amount { +.set-brick-amount { flex-grow: 1; font-size: 2.3em; font-weight: bold; diff --git a/client/public/components/product-listing.mjs b/client/public/components/product-listing.mjs index c08e77e..848f588 100644 --- a/client/public/components/product-listing.mjs +++ b/client/public/components/product-listing.mjs @@ -16,25 +16,32 @@ class ProductListing extends Component { const getProductURL = new URL(`/api/${type}/${id}`, document.baseURI); const productData = await fetch(getProductURL).then(response => response.json()); - let setContents = []; - if (productData.data.type === 'set') { - const allPieces = []; - Object.keys(productData.data.includedPieces).forEach(key => { - allPieces.push(key); - }); + this.state.image = `/api/cdn/${productData.data.id}.png`; - const bulkSets = await fetch('/api/bulk/brick', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - ids: allPieces, - }), - }).then(response => response.json()); - setContents = bulkSets.data; + if (productData.data.type !== 'set') { + this.setState({ + ...this.getState, + ...productData.data, + }, false); + return; } + let setContents = []; + const allBricks = []; + Object.keys(productData.data.includedBricks).forEach(key => { + allBricks.push(key); + }); + + const bulkSets = await fetch('/api/bulk/brick', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + ids: allBricks, + }), + }).then(response => response.json()); + setContents = bulkSets.data; this.setState({ ...this.getState, ...productData.data, @@ -44,7 +51,6 @@ class ProductListing extends Component { Render() { let setContents = ''; - console.log(this.state) if (this.state.type === 'set') { setContents = /* html */`
@@ -53,14 +59,14 @@ class ProductListing extends Component { down-arrow