From 3ed429f0f4d2ab5cfdfa473cced0c369f977421d Mon Sep 17 00:00:00 2001 From: Ben <36240171+benkyd@users.noreply.github.com> Date: Fri, 15 Apr 2022 17:21:23 +0100 Subject: [PATCH] fixed basket bug and added brick page Former-commit-id: d08446b9bf6d9398ed6762b7688ce493509e4731 --- README.md | Bin 6564 -> 6564 bytes client/public/components/basket.mjs | 19 ++--- client/public/components/compact-listing.mjs | 4 +- .../public/components/css/product-listing.css | 4 +- client/public/components/product-listing.mjs | 66 ++++++++++-------- .../components/super-compact-listing.mjs | 4 +- db/aggregator-stage-2.js | 14 ++-- db/dump.sql | 4 +- db/imagestealer.js | 2 +- db/setstealer.js | 10 +-- src/controllers/brick-controller.js | 33 +++++++++ src/controllers/set-controller.js | 18 +---- src/routes/bricks-router.js | 12 +++- 13 files changed, 114 insertions(+), 76 deletions(-) diff --git a/README.md b/README.md index 8fe6ffee28e389764ea7ba7386a65c749723b02c..e7364a4cfe0df1a261d3bdb6c25494e0ba5fad5f 100644 GIT binary patch delta 22 dcmZ2tyu^5eiV&w0LlHwJLo!45W?i9jb^uFf1^EB~ delta 22 dcmZ2tyu^5eiV$Z2LncEiLo!3^W?i9jb^uFr1@r&_ 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
- ${this.state.setContents.map(piece => /* html */` -
- x${this.state.includedPieces[piece.id]} - + ${this.state.setContents.map(brick => /* html */` +
+ x${this.state.includedBricks[brick.id]} +
`).join('')} @@ -91,9 +97,9 @@ class ProductListing extends Component {
{this.state.name} {this.state.id}
${this.state.discount - ? '£{this.state.price}£{this.state.discount}' - : '£{this.state.price}'} -
{this.state.description}
+ ? `£${parseFloat(this.state.price).toFixed(2)}£${parseFloat(this.state.discount).toFixed(2)}` + : `£${parseFloat(this.state.price).toFixed(2)}`} +
${this.state.description || this.state.name + ' ' + this.state.tag}
@@ -113,7 +119,7 @@ class ProductListing extends Component { down-arrow
-
Released in {this.state.date_released}
+ ${this.state.date_released ? /* html */'
Released in {this.state.date_released}
' : ''}
Dimensions: {this.state.dimensions_x} x {this.state.dimensions_y} x {this.state.dimensions_z}
Weight: {this.state.weight}g
Not suitable for children under the age of 3 years old, small parts are a choking hazard.
@@ -183,7 +189,7 @@ class ProductListing extends Component { const addToBasket = this.root.querySelector('.add-to-basket-button'); addToBasket.addEventListener('click', () => { - AddProductToBasket(this.state.id, Math.abs(parseInt(quantityInput.value))); + AddProductToBasket(this.state.id, this.state.type, Math.abs(parseInt(quantityInput.value))); quantityInput.value = 1; }); } diff --git a/client/public/components/super-compact-listing.mjs b/client/public/components/super-compact-listing.mjs index d4a3da4..bda30f2 100644 --- a/client/public/components/super-compact-listing.mjs +++ b/client/public/components/super-compact-listing.mjs @@ -1,5 +1,7 @@ import { RegisterComponent, Component } from './components.mjs'; +// super compact listing is interoperable through types which makes it exteremeely poggers and also portable + class SuperCompactProductListing extends Component { static __IDENTIFY() { return 'super-compact-listing'; } @@ -22,7 +24,7 @@ class SuperCompactProductListing extends Component { - £{this.state.price} + £${parseFloat(this.state.price).toFixed(2)} `, diff --git a/db/aggregator-stage-2.js b/db/aggregator-stage-2.js index 77a6a9c..1a92136 100644 --- a/db/aggregator-stage-2.js +++ b/db/aggregator-stage-2.js @@ -142,22 +142,22 @@ for (let i = 0; i < setIds.length; i++) { console.log(`NEW set tag ${i} ${setId}`); } -// then pieces in sets -addLine('\n-- pieces in sets\n'); -const newPieceInSet = (setId, brickId, quantity) => `INSERT INTO set_descriptor (set_id, brick_id, amount) VALUES ('${setId}', '${brickId}', '${quantity}');`; +// then bricks in sets +addLine('\n-- bricks in sets\n'); +const newBrickInSet = (setId, brickId, quantity) => `INSERT INTO set_descriptor (set_id, brick_id, amount) VALUES ('${setId}', '${brickId}', '${quantity}');`; const setDescriptors = JSON.parse(fs.readFileSync('db/res/sets.json')); for (const setId of setIds) { const set = setDescriptors[setId]; for (const [brickId, quantity] of Object.entries(set)) { - console.log(`NEW piece in set ${setId} ${brickId}`); - addLine(newPieceInSet(setId, brickId, quantity)); + console.log(`NEW brick in set ${setId} ${brickId}`); + addLine(newBrickInSet(setId, brickId, quantity)); } } // then make up some random data for brick inventory -addLine('\n-- piece inventory\n'); +addLine('\n-- brick inventory\n'); const newBrickInventory = (brickId, stock, price, newPrice) => `INSERT INTO lego_brick_inventory (brick_id, stock, price, new_price, last_updated) VALUES ('${brickId}', '${stock}', '${price}', '${newPrice || ''}', now());`; const newBrickInventoryWNULL = (brickId, stock, price) => `INSERT INTO lego_brick_inventory (brick_id, stock, price, last_updated) VALUES ('${brickId}', '${stock}', '${price}', now());`; @@ -236,5 +236,5 @@ addLine('\n-- bonsai tree\n'); addLine(newSet('1010', 'Lego Bonsai Tree', 100, 'Lego Bonsai Tree by Matthew Dennis, Rich Boakes and Jacek Kopecky', 2022, 100, 100, 100)); addLine(newSetTag('1010', '1201')); addLine(newSetTag('1010', '323')); -addLine(newPieceInSet('1010', '95228', 1000)); +addLine(newBrickInSet('1010', '95228', 1000)); addLine(newSetInventory('1010', 5, 1000.69, 50.00)); diff --git a/db/dump.sql b/db/dump.sql index a79cd26..06a485b 100644 --- a/db/dump.sql +++ b/db/dump.sql @@ -5635,7 +5635,7 @@ INSERT INTO lego_set_tag (set_id, tag) VALUES ('41325-1', '771'); INSERT INTO lego_set_tag (set_id, tag) VALUES ('75969-1', '227'); INSERT INTO lego_set_tag (set_id, tag) VALUES ('42123-1', '36'); --- pieces in sets +-- bricks in sets INSERT INTO set_descriptor (set_id, brick_id, amount) VALUES ('76023-1', '476', '2'); INSERT INTO set_descriptor (set_id, brick_id, amount) VALUES ('76023-1', '2357', '6'); @@ -14320,7 +14320,7 @@ INSERT INTO set_descriptor (set_id, brick_id, amount) VALUES ('42123-1', '32523p INSERT INTO set_descriptor (set_id, brick_id, amount) VALUES ('42123-1', '11946pb057', '1'); INSERT INTO set_descriptor (set_id, brick_id, amount) VALUES ('42123-1', '11947pb057', '1'); --- piece inventory +-- brick inventory INSERT INTO lego_brick_inventory (brick_id, stock, price, last_updated) VALUES ('476', '32985', '0.71', now()); INSERT INTO lego_brick_inventory (brick_id, stock, price, new_price, last_updated) VALUES ('2357', '24825', '5.01', '0.6', now()); diff --git a/db/imagestealer.js b/db/imagestealer.js index 72aae59..ed39dfb 100644 --- a/db/imagestealer.js +++ b/db/imagestealer.js @@ -49,7 +49,7 @@ async function main() { for (let i = 0; i < parts.length; i++) { const part = parts[i]; // for sets use https://img.bricklink.com/ItemImage/SL/${part[2]}.png - // for for pieces use https://img.bricklink.com/ItemImage/PL/${part[2]}.png + // for for bricks use https://img.bricklink.com/ItemImage/PL/${part[2]}.png // https://img.bricklink.com/ItemImage/PL/3962a.png const url = `https://img.bricklink.com/ItemImage/PL/${part[2]}.png`; const filename = `res/image/${part[2]}.png`; diff --git a/db/setstealer.js b/db/setstealer.js index e418c5f..1bcaf0c 100644 --- a/db/setstealer.js +++ b/db/setstealer.js @@ -1,4 +1,4 @@ -// scrapes bricklink for the every piece and amounts in a set of lego +// scrapes bricklink for the every brick and amounts in a set of lego const fs = require('fs'); const axios = require('axios'); @@ -6,7 +6,7 @@ const axios = require('axios'); const sets = fs.readFileSync('res/Sets.txt', 'utf8').toString().split('\n').map((i) => i.split('\t')); // output format: -// setid: { pieceid: amount, pieceid: amount, ... } +// setid: { brickid: amount, brickid: amount, ... } async function post(url) { // axios return HTML from website @@ -32,18 +32,18 @@ async function main() { output[set[2]] = {}; - let pieceCount = 0; + let brickCount = 0; let m; while ((m = regex.exec(data)) !== null) { if (m.index === regex.lastIndex) { regex.lastIndex++; } - pieceCount += parseInt(m[2]); + brickCount += parseInt(m[2]); output[set[2]] = { ...output[set[2]], [m[1]]: parseInt(m[2]) }; } - console.log(`${i}/${sets.length} ${set[2]} has ${pieceCount} pieces`); + console.log(`${i}/${sets.length} ${set[2]} has ${brickCount} bricks`); fs.writeFileSync('res/sets.json', JSON.stringify(output)); } } diff --git a/src/controllers/brick-controller.js b/src/controllers/brick-controller.js index 4e740a8..cd5aca5 100644 --- a/src/controllers/brick-controller.js +++ b/src/controllers/brick-controller.js @@ -31,7 +31,40 @@ async function GetBulkBricks(bricksArr) { } async function GetBrick(brickId) { + await Database.Query('BEGIN TRANSACTION;'); + const dbres = await Database.Query(` + SELECT lego_brick.id, lego_brick.name, tag.name AS "tag", + inv.price, inv.new_price AS "discount", inv.stock, + inv.last_updated AS "last_stock_update", + weight, dimensions_x, dimensions_y, dimensions_z + FROM lego_brick + LEFT JOIN lego_brick_inventory AS inv on inv.brick_id = lego_brick.id + LEFT JOIN lego_brick_tag AS tags ON tags.brick_id = lego_brick.id + LEFT JOIN tag AS tag ON tags.tag = tag.id + WHERE lego_brick.id = $1; + `, [brickId]); + const colDbres = await Database.Query(` + SELECT lego_brick_colour.id, lego_brick_colour.name, lego_brick_colour.hexrgb, + colour_type.name AS "colour_type" + FROM lego_brick_colour + LEFT JOIN colour_type AS colour_type ON lego_brick_colour.col_type = colour_type.id + `, []); + await Database.Query('END TRANSACTION;'); + // validate database response + if (dbres.rows.length === 0) { + return { + error: 'Brick not found', + long: 'The brick you are looking for does not exist', + }; + } + + const brick = dbres.rows[0]; + brick.colours = colDbres.rows; + brick.tags = brick.tag.split(','); + brick.type = 'brick'; + + return brick; } module.exports = { diff --git a/src/controllers/set-controller.js b/src/controllers/set-controller.js index 69012f0..e1c5e75 100644 --- a/src/controllers/set-controller.js +++ b/src/controllers/set-controller.js @@ -1,18 +1,6 @@ const ControllerMaster = require('./controller-master.js'); const Database = require('../database/database.js'); -function ValidateQuery(query) { - const validation = ControllerMaster.ValidateQuery(query); - if (!validation.isValid) { - return { - error: validation.error, - long: validation.longError, - }; - } - - return true; -} - async function GetSet(setId) { await Database.Query('BEGIN TRANSACTION;'); const dbres = await Database.Query(` @@ -42,16 +30,15 @@ async function GetSet(setId) { return acc; }, new Set()); - const pieces = dbres.rows.reduce((acc, cur) => { + const bricks = dbres.rows.reduce((acc, cur) => { acc[cur.brick_id] = cur.amount; return acc; }, {}); const set = dbres.rows[0]; delete set.tag; - set.includedPieces = pieces; + set.includedBricks = bricks; set.tags = Array.from(tags); - set.image = `/api/cdn/${set.id}.png`; set.type = 'set'; return set; @@ -91,7 +78,6 @@ async function GetSets(page, resPerPage) { } module.exports = { - ValidateQuery, GetSet, GetSets, }; diff --git a/src/routes/bricks-router.js b/src/routes/bricks-router.js index 02c8149..7b0a237 100644 --- a/src/routes/bricks-router.js +++ b/src/routes/bricks-router.js @@ -1,8 +1,16 @@ const Controller = require('../controllers/brick-controller.js'); -function Get(req, res) { +async function Get(req, res) { + const id = req.params.id; + const brick = await Controller.GetBrick(id); + + if (brick.error) { + res.send(JSON.stringify(brick)); + return; + } + res.send(JSON.stringify({ - message: 'Hello World!', + data: brick, })); }