From ebf27b1ac0e6bbf0755cc417312415c87d217ee6 Mon Sep 17 00:00:00 2001 From: Ben <36240171+benkyd@users.noreply.github.com> Date: Fri, 15 Apr 2022 02:13:25 +0100 Subject: [PATCH] set page Former-commit-id: e9cbcd159172587181e412bf22ead2260976aca9 --- client/public/components/basket.mjs | 2 +- client/public/components/compact-listing.mjs | 5 +- client/public/components/components.mjs | 10 +- .../public/components/css/product-listing.css | 85 +- client/public/components/product-list.mjs | 3 +- client/public/components/product-listing.mjs | 112 +- client/public/components/search.mjs | 2 +- client/public/components/storefront.mjs | 2 +- .../components/super-compact-listing.mjs | 87 ++ client/public/components/tag.mjs | 38 + client/public/index.html | 2 + client/public/product/index.html | 2 + docs/API.md | 7 +- docs/CLIENT-FRAMEWORK.md | 2 +- package-lock.json | 1264 ++++++++++++++++- package.json | 5 +- src/controllers/brick-controller.js | 40 + src/controllers/set-controller.js | 19 +- src/database/database.js | 2 +- src/routes/api.js | 1 + src/routes/bricks-router.js | 40 +- src/routes/cdn.js | 52 +- src/routes/server.js | 4 + 23 files changed, 1612 insertions(+), 174 deletions(-) create mode 100644 client/public/components/super-compact-listing.mjs create mode 100644 client/public/components/tag.mjs diff --git a/client/public/components/basket.mjs b/client/public/components/basket.mjs index a470011..75066cd 100644 --- a/client/public/components/basket.mjs +++ b/client/public/components/basket.mjs @@ -103,7 +103,7 @@ class Basket extends Component { Render() { return { - template: ` + template: /* html */`
diff --git a/client/public/components/compact-listing.mjs b/client/public/components/compact-listing.mjs index ef28477..656ef53 100644 --- a/client/public/components/compact-listing.mjs +++ b/client/public/components/compact-listing.mjs @@ -1,5 +1,4 @@ import { RegisterComponent, Component } from './components.mjs'; -import * as Helpers from '../helpers.mjs'; class CompactProductListing extends Component { static __IDENTIFY() { return 'compact-listing'; } @@ -10,13 +9,13 @@ class CompactProductListing extends Component { Render() { return { - template: ` + template: /* html */`
Image of {this.state.name} + src="/api/cdn/${this.state.id}.png">
{this.state.name} {this.state.id}
diff --git a/client/public/components/components.mjs b/client/public/components/components.mjs index 396aa32..a0baf63 100644 --- a/client/public/components/components.mjs +++ b/client/public/components/components.mjs @@ -54,11 +54,8 @@ export class Component extends HTMLElement { this.Update(Object.bind(this)); - this.setState(this.state); - - if (this.attributes.length === 0) { - this.__INVOKE_RENDER(Object.bind(this)); - } + this.setState(this.state, false); + this.__INVOKE_RENDER(Object.bind(this)); } disconnectedCallback() { @@ -88,8 +85,9 @@ export class Component extends HTMLElement { return this.state; } - setState(newState) { + setState(newState, doRender = true) { this.state = newState; + if (!doRender) return; this.__INVOKE_RENDER(Object.bind(this)); } diff --git a/client/public/components/css/product-listing.css b/client/public/components/css/product-listing.css index 57ce530..4d13fe7 100644 --- a/client/public/components/css/product-listing.css +++ b/client/public/components/css/product-listing.css @@ -25,8 +25,9 @@ } .product-image-container { - aspect-ratio: 1; flex-grow: 1; + aspect-ratio: 1; + max-width: 600px; } .active-image { @@ -34,6 +35,15 @@ width: 100%; } +.product-info { + flex-grow: 2; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin-left: 1em; +} + @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) { .product-page, .product-display { flex-direction: column; @@ -55,15 +65,6 @@ } } -.product-info { - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - margin-left: 1em; -} - .product-name { font-size: 2em; font-weight: bold; @@ -80,16 +81,6 @@ margin-block-start: 0.83em; } -.tag { - padding: 0.3em 1em; - margin-right: 1em; - line-height: 1.5em; - font-size: 0.8em; - font-weight: bold; - background-color: #F2CA52; - cursor: pointer; -} - .product-listing-price { font-size: 1.5em; } @@ -181,16 +172,16 @@ input[type=number] { transform: translateY(4px); } -.product-details-collapsible { +.collapsible-menu { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; - align-items: center; - margin-block-end: 3em; + margin-block-end: 2em; + min-width: 0; } -.product-details-header { +.menu-header { width: 100%; display: flex; justify-content: space-between; @@ -199,37 +190,67 @@ input[type=number] { font-weight: bold; cursor: pointer; border-bottom: #1A1A1A solid 1px; + min-width: 0; } -.product-details-header-arrow { +.menu-header-arrow { transform: rotate(-180deg); margin-left: 0.5em; transition: transform 0.2s ease-in-out; } /* rotate the arrow down when the details are open */ -.product-details-header-arrow-down { +.menu-header-arrow-down { margin-left: 0.5em; transform: rotate(-90deg); } -.product-details-content { - visibility: hidden; - width: 100%; +.menu-content { + max-width: fit-content; + display: none; flex-direction: column; - justify-content: flex-start; align-items: flex-start; + min-width: 0; } .details-open { - visibility: visible; + display: flex; + position: static; + width: auto; } .product-details-content-item { + padding-top: 0.6em; +} + +.scrollable-container { + width: auto; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + overflow-y: auto; + overflow-x: hidden; + height: 400px; +} + +.set-piece-container { + width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-block-start: 0.83em; - margin-block-end: 0.83em; + min-width: 0; +} + +.sc-listing { + width: 100%; + flex-grow: 5; + min-width: 0; +} + +.set-piece-amount { + flex-grow: 1; + font-size: 2.3em; + font-weight: bold; } diff --git a/client/public/components/product-list.mjs b/client/public/components/product-list.mjs index bca0f6c..f98319d 100644 --- a/client/public/components/product-list.mjs +++ b/client/public/components/product-list.mjs @@ -36,14 +36,13 @@ class ProductList extends Component { } return { - template: ` + template: /* html */`

{this.state.title}

${this.state.products.data.map(product => { return ` diff --git a/client/public/components/product-listing.mjs b/client/public/components/product-listing.mjs index 98746d4..c08e77e 100644 --- a/client/public/components/product-listing.mjs +++ b/client/public/components/product-listing.mjs @@ -13,18 +13,64 @@ class ProductListing extends Component { const type = urlParams.get('type'); const id = urlParams.get('id'); - const getURL = new URL(`/api/${type}/${id}`, document.baseURI); - const data = await fetch(getURL).then(response => response.json()); - console.log(data); + 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); + }); + + 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; + } + this.setState({ ...this.getState, - ...data.data, - }); + ...productData.data, + setContents, + }, false); } Render() { + let setContents = ''; + console.log(this.state) + if (this.state.type === 'set') { + setContents = /* html */` +
+ + +
+ `; + } + return { - template: ` + template: /* html */`
back-arrow @@ -39,11 +85,11 @@ class ProductListing extends Component {
${this.state.tags.map(tag => { - return `${tag}`; + return ``; }).join('')}
-
{this.state.name} [{this.state.date_released}]
+
{this.state.name} {this.state.id}
${this.state.discount ? '£{this.state.price}£{this.state.discount}' : '£{this.state.price}'} @@ -61,34 +107,21 @@ class ProductListing extends Component { Add to Favorites
-
-
- Product Details - down-arrow +
+ -
-
- 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. -
-
- Not for individual resale. -
+
+ + ${setContents}
@@ -136,14 +169,15 @@ class ProductListing extends Component { }); // product details, collapsable - const collapseButton = this.root.querySelector('.product-details-header'); - const collapseContent = this.root.querySelector('.product-details-content'); - const collapseArrow = this.root.querySelector('.product-details-header-arrow'); + const collapseButton = this.root.querySelectorAll('.menu-header'); - collapseButton.addEventListener('click', () => { + collapseButton.forEach(el => el.addEventListener('click', (e) => { + const parent = e.path[2].querySelector('.collapsible-menu') ? e.path[1] : e.path[2]; + const collapseContent = parent.querySelector('.menu-content'); + const collapseArrow = parent.querySelector('.menu-header-arrow'); collapseContent.classList.toggle('details-open'); - collapseArrow.classList.toggle('product-details-header-arrow-down'); - }); + collapseArrow.classList.toggle('menu-header-arrow-down'); + })); // add quantity to basket and then update the basket count const addToBasket = this.root.querySelector('.add-to-basket-button'); diff --git a/client/public/components/search.mjs b/client/public/components/search.mjs index 8cdf84c..e348064 100644 --- a/client/public/components/search.mjs +++ b/client/public/components/search.mjs @@ -9,7 +9,7 @@ class Search extends Component { Render() { return { - template: ` + template: /* html */` `, style: ` diff --git a/client/public/components/storefront.mjs b/client/public/components/storefront.mjs index 332035e..beef55f 100644 --- a/client/public/components/storefront.mjs +++ b/client/public/components/storefront.mjs @@ -9,7 +9,7 @@ class StoreFront extends Component { Render() { return { - template: ` + template: /* html */`