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

better basket popout style

Browse Source 
Former-commit-id: df308d067665154cce5c09a7d256f29404587005
This commit is contained in:
Benjamin Kyd
2022-04-21 02:55:24 +01:00
parent 8b01a63d9a
commit d8a838f261
3 changed files with 67 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
client/public/components/basket-popout.mjs
View File

@@ -127,28 +127,24 @@ class BasketPopout extends Component {
<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>
${Object.keys(this.state.items).map((key) => {
const item = this.state.items[key];
return /* html */`
<div class="popup-content-item">
<span class="popup-content-item-title">X${item.quantity}</span>
<span class="popup-content-item-value">
<super-compact-listing-component class="sc-listing"
id="${key.split('~')[0]}"
type="${item.type}"
quantity="${item.quantity}">
</super-compact-listing-component>
</span>
</div>
`;
}).join('')}
<div class="popup-content-header">
Total {this.state.total}
</div>
<span class="popup-content-item-title">Items</span>
${Object.keys(this.state.items).map((key) => {
const item = this.state.items[key];
return /* html */`
<div class="popup-content-item">
<span class="popup-content-item-quantity">X${item.quantity}</span>
<super-compact-listing-component class="sc-listing"
id="${key.split('~')[0]}"
type="${item.type}"
quantity="${item.quantity}">
</super-compact-listing-component>
<span class="popup-content-item-value">modifier</span>
</div>
`;
}).join('')}
</div>
<div class="popup-footer">
<a href="/basket"><button class="popup-footer-button">View Basket</button></a>
@@ -195,13 +191,13 @@ class BasketPopout extends Component {
font-size: 0.5em;
position: absolute;
background-color: #AB8FFF;
border: 1px solid #222;
right: 0;
width: 60%;
padding-top: 20px;
padding-bottom: 20px;
height: auto;
overflow-y: scroll;
overflow-x: hidden;
max-height: 550px;
max-width: 500px;
padding-top: 10px;
padding-bottom: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
@@ -216,6 +212,39 @@ class BasketPopout extends Component {
}
}
.popup-content {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: left;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
justify-content: space-between;
}
.popup-content-item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.popup-content-item-quantity {
font-size: 2em;
flex-grow: 1;
}
.sc-listing {
flex-grow: 3;
}
.popup-content-item-value {
text-align: right;
flex-grow: 1;
}
`,
};
}

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

@@ -76,8 +76,6 @@ class ProductListing extends Component {
`;
}
console.log(this.state)
// brick colour availability for bricks
let brickColourAvailability = '';
let brickColourSelector = '';
@@ -105,7 +103,7 @@ class ProductListing extends Component {
Select Brick Colour&nbsp;
<select class="brick-colour-selector-select">
${this.state.colours.map(colour => /* html */`
<option value="${colour.name}">
<option value="${colour.id}">
${colour.type} ${colour.name}
</option>
`).join('')}
@@ -230,7 +228,12 @@ class ProductListing extends Component {
const addToBasket = this.root.querySelector('.add-to-basket-button');
addToBasket.addEventListener('click', () => {
AddProductToBasket(this.state.id, this.state.type, Math.abs(parseInt(quantityInput.value)));
// if it is a brick, get potential modifier from the drop down menu
const brick = this.state.type === 'brick';
const modifier = brick ? this.root.querySelector('.brick-colour-selector-select').value : undefined;
console.log(modifier);
AddProductToBasket(this.state.id, this.state.type, Math.abs(parseInt(quantityInput.value)), modifier);
quantityInput.value = 1;
});
}

6
src/controllers/controller-master.js
View File

@@ -54,7 +54,11 @@ function LevenshteinDistance(s, t) {
// TODO: get this working properly
function SanatiseQuery(query) {
return escape(query).toLowerCase().replace(/[()*]/g, '');
query = query.trim();
query = query.replace(/[^a-zA-Z0-9\s]/g, '');
query = escape(query);
query = query.toLowerCase();
return query;
}
module.exports = {