benkyd/legolog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

search box and also search bar and also basket

Browse Source 
Former-commit-id: d63b7aa5fe3ff0ac16d8f8eab2bb67724cf2ff56
This commit is contained in:
Ben
2022-03-31 18:22:52 +01:00
parent 8c230db9b5
commit 3f88e4435a
15 changed files with 375 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
client/public/components/basket.mjs Normal file
View File

@@ -0,0 +1,195 @@
import { RegisterComponent, Component } from './components.mjs';
// Basket is stored locally only and is not persisted to the server.
// It is used to store the current basket and is used to calculate the total price of the basket.
// It is also used to store the current user's basket.
// The structure of the basket is in local storage and is as follows:
// {
// "basket": {
// "items": {
// "item1": amount,
// "item2": amount,
// ...
// },
// "total": total
// },
// }
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) {
if (localStorage.getItem('basket') === null || !localStorage.getItem('basket')) {
localStorage.setItem('basket', JSON.stringify({
items: {},
total: 0,
}));
}
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) {
basketCallback();
}
}
export function RemoveProductFromBasket(item, 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;
} else {
delete basket.items.item;
}
basket.total -= amount;
localStorage.setItem('basket', JSON.stringify(basket));
if (basketCallback) {
basketCallback();
}
}
class Basket extends Component {
static __IDENTIFY() { return 'basket'; }
constructor() {
super(Basket);
}
OnLocalBasketUpdate() {
const basket = localStorage.getItem('basket');
if (basket) {
try {
const basketJSON = JSON.parse(basket);
this.setState({
items: basketJSON.items,
total: basketJSON.total,
});
} catch (e) {
console.log(e);
}
} else {
this.setState({
items: {},
total: 0,
});
}
}
OnMount() {
this.OnLocalBasketUpdate(Object.bind(this));
basketCallback = this.OnLocalBasketUpdate.bind(this);
}
Render() {
return {
template: `
<span id="basket-wrapper">
<div class="basket">
<img id="basket-icon" class="menu-item" src="https://www.svgrepo.com/show/343743/cart.svg" width="50px" stroke="#222" stroke-width="2px" alt="">
<span id="basket-count" class="menu-item">{this.state.total}</span>
</div>
<div id="basket-popup" class="popup">
<div class="popup-header">
<span class="popup-title">Basket</span>
<span class="popup-close">&times;</span>
</div>
<div class="popup-content">
<div class="popup-content-item">
<span class="popup-content-item-title">Total</span>
<span class="popup-content-item-value">{this.state.total}</span>
</div>
<div class="popup-content-item">
<span class="popup-content-item-title">Items</span>
<span class="popup-content-item-value">{this.state.items}</span>
</div>
</div>
</div>
</span>
`,
style: `
#basket-wrapper {
flex-basis: 4%;
}
.basket {
display: flex;
justify-content: space-between;
padding-bottom: 2px;
}
.basket:hover {
opacity: 0.5;
}
#basket-icon {
padding-top: 2px;
cursor: pointer;
}
#basket-count {
padding-top: 9px;
font-size: 1em;
font-weight: 100;
cursor: pointer;
}
.popup {
display: none;
}
.show {
display: flex;
}
#basket-popup {
position: absolute;
background-color: #EC914B;
width: 200px;
height: 200px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 100;
}
`,
};
}
OnRender() {
// set up basket
const basketToggler = this.root.querySelector('.basket');
basketToggler.addEventListener('click', () => {
const popup = this.root.querySelector('.popup');
popup.classList.toggle('show');
});
}
}
RegisterComponent(Basket);

10
client/public/components/compact-listing.mjs
View File

@@ -97,15 +97,7 @@ class CompactProductListing extends Component {
}
OpenProductListing() {
const location = document.querySelector('#current-open-listing');
// Open the product listing
const productListing = document.createElement('product-listing-component');
productListing.setAttribute('id', this.state.id);
productListing.setAttribute('type', this.state.type);
location.appendChild(productListing);
Helpers.SwapActivePage('store', 'current-open-listing');
window.location.href = `/product/?type=${this.state.type}&id=${this.state.id}&name=${encodeURIComponent(this.state.name)}`;
}
OnRender() {

2
client/public/components/components.mjs
View File

@@ -31,7 +31,7 @@ export class Component extends HTMLElement {
OnMount() { }
Update() { }
Render() { Component.__WARN('Render'); }
OnRender() { Component.__WARN('Render'); }
OnRender() { }
static __IDENTIFY() { Component.__WARN('identify'); }
async connectedCallback() {

81
client/public/components/css/navbar.css
View File

@@ -7,7 +7,7 @@
margin-top:-10px!important;
margin-bottom:0px!important;
width: 100%;
background-color: #D7C2FF;
background-color: #EFAE4F;
box-shadow: #222 0px 0px 5px;
background-size: 100% 100%;
z-index: 1;
@@ -85,10 +85,6 @@
width: 100%;
}
.hamburger:hover .hamburger-line {
background: #555;
}
.hamburger-line-top {
top: 3px;
}
@@ -150,13 +146,13 @@
}
.sub-nav {
border: 1px solid #ccc;
display: none;
position: absolute;
background-color: #E4D6FF;
background-color: #EC914B;
padding: 5px 5px;
list-style: none;
width: 230px;
left: parent;
max-width: 300px;
z-index: 5;
}
@@ -172,7 +168,7 @@
.nav-menu {
position: fixed;
background: #e4d6ffde;
background: #efaf4fbb;
flex-direction: column;
justify-content: center;
opacity: 50;
@@ -198,6 +194,7 @@
.sub-nav {
position: relative;
width: 100%;
max-width: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.20);
box-sizing: border-box;
@@ -236,76 +233,10 @@
z-index: 3;
}
/* Modified version of https://codepen.io/mihaeltomic/pen/vmwMdm */
#search-bar {
width: 100%;
padding: 12px 14px;
background-color: transparent;
transition: transform 250ms ease-in-out;
font-family: 'Josefin Sans', sans-serif;
font-size: 0.5em;
color: #222;
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 27px 27px;
background-position: 97.5% center;
border-radius: 10px;
border: 4px solid #222;
transition: all 250ms ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.search__input::placeholder {
color: rgba(87, 87, 86, 0.8);
text-transform: uppercase;
letter-spacing: 1.5px;
}
#search-bar:hover, #search-bar:focus {
padding: 12px 0;
outline: 0;
border: 2px solid transparent;
border-bottom: 4px solid #222;
border-radius: 0;
background-position: 100% center;
}
/* #search-bar:hover, #search-bar:focus {
border: 1.5px solid #009688;
background-color: white;
} */
#cart-wrapper {
display: flex;
flex-basis: 4%;
justify-content: space-between;
padding-bottom: 2px;
}
#cart-icon {
padding-top: 2px;
}
#cart-number {
padding-top: 9px;
font-size: 1em;
font-weight: 100;
}
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.search-wrapper {
flex-basis: 80%;
}
#search-bar {
width: 100%;
margin: 0;
height: 2em;
}
}
/*switch, from https://www.w3schools.com/howto/howto_css_switch.asp*/

30
client/public/components/css/product-listing.css
View File

@@ -19,24 +19,38 @@
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-items: flex-start;
margin-left: auto;
margin-right: auto;
}
.product-image-container {
aspect-ratio: 1;
flex-grow: 1;
}
.active-image {
display: block;
width: 100%;
height: 100%;
}
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.product-page, .product-display {
flex-direction: column;
height: 80%
}
}
.product-image-container {
flex-grow: 2;
}
.product-display {
align-items: center;
justify-content: flex-start;
}
.active-image {
width: 100%;
height: 100%;
.product-image-container {
aspect-ratio: 1;
flex-grow: 2;
width: 90%;
}
}
.product-info {

4
client/public/components/navbar.mjs
View File

@@ -9,8 +9,8 @@ class NavBar extends Component {
Render() {
return {
template: SideLoad('./components/templates/navbar.html'),
style: SideLoad('./components/css/navbar.css'),
template: SideLoad('/components/templates/navbar.html'),
style: SideLoad('/components/css/navbar.css'),
};
}

4
client/public/components/notificationbar.mjs
View File

@@ -47,8 +47,8 @@ class NotificationBar extends Component {
Render() {
return {
template: SideLoad('./components/templates/notificationbar.html'),
style: SideLoad('./components/css/notificationbar.css'),
template: SideLoad('/components/templates/notificationbar.html'),
style: SideLoad('/components/css/notificationbar.css'),
};
}

17
client/public/components/product-listing.mjs
View File

@@ -9,7 +9,11 @@ class ProductListing extends Component {
}
async OnMount() {
const getURL = new URL(`/api/${this.state.type}/${this.state.id}`, document.baseURI);
const urlParams = new URLSearchParams(window.location.search);
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());
this.setState({
...this.getState,
@@ -20,19 +24,16 @@ class ProductListing extends Component {
Render() {
return {
template: SideLoad('./components/templates/product-listing.html'),
style: SideLoad('./components/css/product-listing.css'),
template: SideLoad('/components/templates/product-listing.html'),
style: SideLoad('/components/css/product-listing.css'),
};
}
OnRender() {
const backButton = this.root.querySelector('.back-button-svg');
backButton.addEventListener('click', async () => {
await Helpers.SwapActivePage('current-open-listing', 'store');
// clean up
const location = document.querySelector('#current-open-listing');
location.removeChild(location.lastChild);
backButton.addEventListener('click', () => {
window.history.back();
});
}
}

64
client/public/components/search.mjs Normal file
View File

@@ -0,0 +1,64 @@
import { RegisterComponent, Component } from './components.mjs';
class Search extends Component {
static __IDENTIFY() { return 'search'; }
constructor() {
super(Search);
}
Render() {
return {
template: `
<input id="search-bar" class="menu-item" type="text" placeholder="search..."/>
`,
style: `
/* Modified version of https://codepen.io/mihaeltomic/pen/vmwMdm */
#search-bar {
width: 100%;
height: 100%;
padding: 12px 14px;
background-color: transparent;
transition: transform 250ms ease-in-out;
font-family: 'Josefin Sans', sans-serif;
font-size: 0.5em;
color: #222;
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 27px 27px;
background-position: 97.5% center;
border-radius: 10px;
border: 4px solid #222;
transition: all 250ms ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.search__input::placeholder {
color: rgba(87, 87, 86, 0.8);
text-transform: uppercase;
letter-spacing: 1.5px;
}
#search-bar:hover, #search-bar:focus {
padding: 12px 0;
outline: 0;
border: 2px solid transparent;
border-bottom: 4px solid #222;
border-radius: 0;
background-position: 100% center;
}
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
#search-bar {
width: 100%;
margin: 0;
}
}
`,
};
}
}
RegisterComponent(Search);

23
client/public/components/templates/navbar.html
View File

@@ -1,6 +1,6 @@
<div class="navbar-container">
<nav class="navbar">
<div class="logo"><a href="/"><img src="res/logo.svg" height="80em" alt="logo"></a></div>
<div class="logo"><a href="/"><img src="/res/logo.svg" height="80em" alt="logo"></a></div>
<div class="push-right">
<!-- https://jonsuh.com/hamburgers/ -->
@@ -15,16 +15,18 @@
<li class="menu-item dropdown"><a class="nav-link" href="#">Sets▾</a>
<!-- TODO: Going to need to dynamically generate this -->
<ul class = "sub-nav">
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
<li><a class="sub-nav-link" href="#">Trending now</a></li>
<li><a class="sub-nav-link" href="#">For you</a></li>
<li><a class="sub-nav-link" href="#">Sets by theme</a></li>
<li><a class="sub-nav-link" href="#">Sets by ages</a></li>
<li><a class="sub-nav-link" href="#">Sets by price</a></li>
</ul>
</li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Bricks▾</a>
<ul class="sub-nav" >
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
<li><a class="sub-nav-link" href="#">For you</a></li>
<li><a class="sub-nav-link" href="#">Bricks by catagory</a></li>
<li><a class="sub-nav-link" href="#">Bricks by price</a></li>
</ul>
</li>
<li class="menu-item"><a class="nav-link" href="#">My Account</a>
@@ -39,15 +41,12 @@
</div>
<ul class="secondary-menu push-down">
<span class="search-wrapper">
<input id="search-bar" class="menu-item" type="text" placeholder="search..."/>
<search-component style="width: 100%;"></search-component>
</span>
<img id="fave-icon" class="menu-item" src="https://www.svgrepo.com/show/25921/heart.svg" width="45px" stroke="#222" stroke-width="2px" alt="">
<span id="cart-wrapper">
<img id="cart-icon" class="menu-item" src="https://www.svgrepo.com/show/343743/cart.svg" width="50px" stroke="#222" stroke-width="2px" alt="">
<span id="cart-number" class="menu-item">5</span>
</span>
<basket-component></basket-component>
</ul>
</nav>
</div>

6
client/public/components/templates/product-listing.html
View File

@@ -1,17 +1,17 @@
<div class="product-page">
<div class="back-button">
<img class="back-button-svg" src="res/back-arrow.svg" height="60em" alt="back-arrow">
<img class="back-button-svg" src="/res/back-arrow.svg" height="60em" alt="back-arrow">
</div>
<div class="product-display">
<div class="product-image-container">
<img class="active-image" src="{this.state.image}" alt="product-image">
<img class="active-image" src="{this.state.image}" alt="Image of ${this.state.name}" title="Image of {this.state.name}">
</div>
<div class="product-info">
<div class="product-name">{this.state.name}</div>
<div class="product-price">${this.state.price}</div>
<div class="product-price">£{this.state.price}</div>
<div class="product-description">{this.state.description}</div>
<div class="product-quantity">
<span class="quantity-label">Quantity:</span>

8
client/public/helpers.mjs
View File

@@ -10,13 +10,13 @@ export function SwapActivePage(current, target) {
currentPage.classList.add('slide-out-left');
targetPage.classList.add('slide-in-left');
currentPage.classList.remove('slide-out-left');
targetPage.classList.remove('slide-in-left');
currentPage.style.display = 'none';
targetPage.style.display = 'block';
// wait for transition to finish
return new Promise((resolve) => {
setTimeout(() => {
currentPage.classList.remove('slide-out-left');
targetPage.classList.remove('slide-in-left');
currentPage.style.display = 'none';
targetPage.style.display = 'block';
resolve();
}, 500);
});

18
client/public/index.html
View File

@@ -6,17 +6,18 @@
<link rel="stylesheet" type="text/css" href="global.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- ask rich about loading fonts elsewhere -->
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<script type="module" src="components/components.mjs"></script>
<script type="module" src="components/navbar.mjs"></script>
<script type="module" src="components/notificationbar.mjs"></script>
<script type="module" src="components/storefront.mjs"></script>
<script type="module" src="components/product-list.mjs"></script>
<script type="module" src="components/compact-listing.mjs"></script>
<script type="module" src="components/product-listing.mjs"></script>
<script type="module" src="/components/components.mjs"></script>
<script type="module" src="/components/navbar.mjs"></script>
<script type="module" src="/components/search.mjs"></script>
<script type="module" src="/components/basket.mjs"></script>
<script type="module" src="/components/notificationbar.mjs"></script>
<script type="module" src="/components/storefront.mjs"></script>
<script type="module" src="/components/product-list.mjs"></script>
<script type="module" src="/components/compact-listing.mjs"></script>
<script type="module" src="/components/product-listing.mjs"></script>
<script type="module" src="index.mjs"></script>
</head>
@@ -27,7 +28,6 @@
<limited-margin>
<span id="current-open-listing" style="display: none;"></span>
<storefront-component id="store"></storefront-component>
<!-- <canvas id="webglviewer" width="300" height="300"></canvas> -->

4
client/public/index.mjs
View File

@@ -1,13 +1,13 @@
// import { RendererPreInit, BrickRenderer } from './brick-renderer/index.mjs';
import { AddProductToBasket, RemoveProductFromBasket } from '/components/basket.mjs';
async function main() {
function main() {
// await RendererPreInit();
// const canvas = document.querySelectorAll('#webglviewer');
// for (let i = 0; i < canvas.length; i++) {
// const Renderer = new BrickRenderer(canvas[i]);
// }
}
window.onload = main;

44
client/public/product/index.html Normal file
View File

@@ -0,0 +1,44 @@
<html>
<head>
<title>LegoLog Home!</title>
<meta name="viewport">
<link rel="icon" type="image/svg+xml" href="/res/favicon.svg">
<link rel="stylesheet" type="text/css" href="/global.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<script type="module" src="/components/components.mjs"></script>
<script type="module" src="/components/navbar.mjs"></script>
<script type="module" src="/components/search.mjs"></script>
<script type="module" src="/components/basket.mjs"></script>
<script type="module" src="/components/notificationbar.mjs"></script>
<script type="module" src="/components/storefront.mjs"></script>
<script type="module" src="/components/product-list.mjs"></script>
<script type="module" src="/components/compact-listing.mjs"></script>
<script type="module" src="/components/product-listing.mjs"></script>
<script type="module" src="/index.mjs"></script>
</head>
<body>
<notificationbar-component></notificationbar-component>
<navbar-component></navbar-component>
<limited-margin>
<product-listing-component></product-listing-component>
<!-- <canvas id="webglviewer" width="300" height="300"></canvas> -->
<!-- <canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas> -->
</limited-margin>
</body>