1. View, filter, and save Product Permutation. \n 2. Synchronised with Product Category page and all common functionality moved into base and base table css, js, and python files.

This commit is contained in:
2024-09-24 23:25:52 +01:00
parent 2954b2050c
commit 45ac0405b4
243 changed files with 6596 additions and 4460 deletions

View File

@@ -0,0 +1,447 @@
import Events from "../../lib/events.js";
import LocalStorage from "../../lib/local_storage.js";
import Validation from "../../lib/validation.js";
// import BasePage from "../base.js";
import DOM from "../../dom.js";
import { isEmpty } from "../../lib/utils.js";
export default class StoreMixinPage {
constructor(pageCurrent) {
this.page = pageCurrent;
}
initialize() {
console.log('hookup store start for ', this.page.hash);
this.hookupFilters();
this.hookupLocalStorageStore();
this.hookupBasket();
this.hookupButtonsAddToBasket();
}
hookupFilters() {
this.hookupFilterCurrency();
this.hookupFilterDeliveryRegion();
this.hookupFilterIsIncludedVAT();
}
hookupFilterCurrency() {
/*
let elForm = document.querySelectorAll(idFormCurrency);
let elSelector = document.querySelectorAll(elForm.querySelector('select')[0]);
Events.initialiseEventHandler(elSelector, flagInitialised, function(){
elForm = document.querySelectorAll(idFormCurrency);
elSelector.addEventListener("change", function(event) {
ajaxData = {};
ajaxData[keyForm] = convertForm2JSON(elForm);
console.log('sending data to currency selector controller: '); console.log(ajaxData);
ajaxJSONData('select currency', mapHashToController(hashStoreSelectCurrency), ajaxData, function() { window.location.reload() }, false);
let optionSelected = elSelector.options[elSelector.selectedIndex]
let textSelected = optionSelected.getAttribute(attrDataShort)
});
});
console.log("form currency initialised")
*/
let dropdownCurrency = document.querySelectorAll(idCurrency)[0];
// dropdownCurrency.options.map(function(option) {
let option, indexHyphen, textOption;
for (let indexOption = 0; indexOption < dropdownCurrency.options.length; indexOption++) {
option = document.querySelectorAll(dropdownCurrency.options[indexOption]);
textOption = option.text();
indexHyphen = textOption.indexOf('-');
option.setAttribute(attrTextExpanded, textOption);
option.setAttribute(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
option.classList.add(flagCollapsed);
}
handleSelectCollapse(dropdownCurrency);
Events.initialiseEventHandler(dropdownCurrency, flagInitialised, function() {
dropdownCurrency = document.querySelectorAll(dropdownCurrency);
dropdownCurrency.addEventListener("focus", function() {
handleSelectExpand(dropdownCurrency);
});
dropdownCurrency.addEventListener("blur", function() {
handleSelectCollapse(dropdownCurrency);
});
dropdownCurrency.addEventListener("change", function() {
let selectedCurrency = dropdownCurrency.val();
console.log("selected currency: ", selectedCurrency);
let basket = LocalStorage.getLocalStorage(keyBasket);
basket[keyIdCurrency] = selectedCurrency;
// LocalStorage.setLocalStorage(keyIdCurrency, selectedCurrency);
LocalStorage.setLocalStorage(keyBasket, basket);
let ajaxData = {};
ajaxData[keyBasket] = basket;
ajaxJSONData('update currency', mapHashToController(hashPageCurrent), ajaxData, loadPageBody, false);
});
});
}
hookupFilterDeliveryRegion() {
/*
let elForm = document.querySelectorAll(idFormDeliveryRegion);
let elSelector = document.querySelectorAll(elForm.querySelector('select')[0]);
Events.initialiseEventHandler(elSelector, flagInitialised, function(){
elForm = document.querySelectorAll(idFormDeliveryRegion);
elSelector.addEventListener("change", function(event) {
ajaxData = {};
ajaxData[keyForm] = convertForm2JSON(elForm);
console.log('sending data to delivery region selector controller: '); console.log(ajaxData);
ajaxJSONData('select delivery region', mapHashToController(hashStoreSelectDeliveryRegion), ajaxData, function() { window.location.reload() }, false);
});
console.log("form delivery region initialised")
});
*/
let dropdownRegion = document.querySelectorAll(idRegionDelivery)[0];
let option, indexHyphen, textOption;
for (let indexOption = 0; indexOption < dropdownRegion.options.length; indexOption++) {
option = document.querySelectorAll(dropdownRegion.options[indexOption]);
textOption = option.text();
indexHyphen = textOption.indexOf('-');
option.setAttribute(attrTextExpanded, textOption);
option.setAttribute(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
option.classList.add(flagCollapsed);
}
handleSelectCollapse(dropdownRegion);
Events.initialiseEventHandler(dropdownRegion, flagInitialised, function() {
dropdownRegion = document.querySelectorAll(dropdownRegion);
dropdownRegion.addEventListener("focus", function() {
console.log("dropdown region focused");
handleSelectExpand(dropdownRegion);
});
dropdownRegion.addEventListener("blur", function() {
console.log("dropdown region blurred");
handleSelectCollapse(dropdownRegion);
});
dropdownRegion.addEventListener("change", function() {
handleSelectCollapse(dropdownRegion);
let selectedRegion = dropdownRegion.val();
console.log("selected region: ", selectedRegion);
let basket = LocalStorage.getLocalStorage(keyBasket);
basket[keyIdRegionDelivery] = selectedRegion;
// LocalStorage.setLocalStorage(keyIdRegionDelivery, selectedRegion);
LocalStorage.setLocalStorage(keyBasket, basket);
let ajaxData = {};
ajaxData[keyIdRegionDelivery] = selectedRegion;
ajaxJSONData('update region', mapHashToController(hashStoreSetRegion), ajaxData, null, false);
});
});
}
hookupFilterIsIncludedVAT() {
let elForm = document.querySelectorAll(idFormIsIncludedVAT);
let elSelector = document.querySelectorAll(elForm.querySelector('input[type="checkbox"]')[0]);
Events.initialiseEventHandler(elSelector, flagInitialised, function(){
elForm = document.querySelectorAll(idFormIsIncludedVAT);
elSelector.addEventListener("change", function(event) {
ajaxData = {};
ajaxData[keyForm] = convertForm2JSON(elForm);
console.log('sending data to include VAT controller: '); console.log(ajaxData);
ajaxJSONData('set include VAT', mapHashToController(hashStoreSetIsIncludedVAT), ajaxData, function() { window.location.reload() }, false);
});
console.log("form is included VAT initialised")
});
}
hookupLocalStorage() {
// setupPageLocalStorage(hashPageCurrent);
// let lsPage = getPageLocalStorage(hashPageCurrent);
// let d = {}
// d[keyBasket] = LocalStorage.getLocalStorage(keyBasket); // (keyBasket in lsPage) ? lsPage[keyBasket] : {'items': []};
// console.log('d:'); console.log(d);
let basketLocalStorage = LocalStorage.getLocalStorage(keyBasket);
if (!StoreMixinPage.validateBasket(basketLocalStorage)) {
console.log('locally-stored basket not valid');
basketLocalStorage = StoreMixinPage.makeNewBasket();
}
let basketServer = StoreMixinPage.validateBasket(userBasket) ? userBasket : basketLocalStorage;
let basket = StoreMixinPage.areEqualBaskets(basketLocalStorage, basketServer) ? basketServer : StoreMixinPage.mergeBaskets(basketLocalStorage, basketServer);
if (!StoreMixinPage.areEqualBaskets(basketLocalStorage, basket)) {
LocalStorage.setLocalStorage(keyBasket, basket);
}
if (!StoreMixinPage.areEqualBaskets(basketServer, basket)) {
/*
let ajaxData = {}
ajaxData[keyBasket] = basket;
// console.log("hookupLocalStorageStore\nhashStoreBasketLoad: " + hashStoreBasketLoad + "\n");
// ajaxData[keyIsIncludedVAT] = LocalStorage.getLocalStorage(keyIsIncludedVAT);
console.log('ajax:' + ajaxData);
ajaxJSONData(keyBasket, mapHashToController(hashStoreBasketLoad), ajaxData, loadBasket, false);
*/
API.saveStoreBasket(basket);
}
userBasket = basket;
}
static validateBasket(basket) {
return (
Validation.isEmpty(basket) &&
Validation.dictHasKey(basket, keyItems) &&
Validation.dictHasKey(basket, keyIsIncludedVAT) &&
Validation.dictHasKey(basket, keyIdCurrency) &&
Validation.dictHasKey(basket, keyIdRegionDelivery)
);
}
static makeNewBasket() {
return {
[keyItems]: [],
[keyIsIncludedVAT]: true,
[keyIdCurrency]: 1,
[keyIdRegionDelivery]: 1
};
}
static areEqualBaskets(basket1, basket2) {
return JSON.stringify(basket1) === JSON.stringify(basket2);
}
static mergeBaskets(basketPrimary, basketSecondary) {
let basket = {...basketSecondary, ...basketPrimary};
let items = {};
for (let item of basketSecondary[keyItems]) {
items[item[keyIdPermutation]] = item.Quantity;
}
for (let item of basketPrimary[keyItems]) {
items[item[keyIdPermutation]] = items[item[keyIdPermutation]] ? items[item[keyIdPermutation]] + item.Quantity : item.Quantity;
}
basket[keyItems] = Object.values(items);
return basket;
}
hookupBasket() {
// const containerBasket = document.querySelectorAll(idContainerBasket);
this.toggleShowButtonCheckout(); // containerBasket
this.hookupButtonCheckout();
this.hookupBasketItemPlusAndMinusButtons();
this.hookupBasketAddInputs();
this.hookupBasketEditInputs();
this.hookupDeleteBasketItemButtons();
}
toggleShowButtonCheckout() {
console.log("toggling checkout button");
const buttonCheckout = document.querySelectorAll(idButtonCheckout);
const labelBasketEmpty = document.querySelectorAll(idLabelBasketEmpty);
if (userBasket['items'].length == 0) {
buttonCheckout.style.display = "none";
labelBasketEmpty.style.display = "";
} else {
buttonCheckout.style.display = "";
labelBasketEmpty.style.display = "none";
}
}
hookupButtonCheckout() {
console.log("hooking up checkout button");
const buttonCheckout = document.querySelectorAll(idButtonCheckout);
// let lsPage = getPageLocalStorage(hashPageCurrent);
Events.initialiseEventHandler(buttonCheckout, flagInitialised, function() {
buttonCheckout.addEventListener("click", function() {
/*
//setupPageLocalStorageNext(hashPageStoreBasket);
let basket = LocalStorage.getLocalStorage(keyBasket);
// goToPage(hashPageStoreBasket);
let ajaxData = {};
ajaxData[keyBasket] = basket;
ajaxJSONData('checkout', mapHashToController(hashPageStoreBasket), ajaxData, null, false);
*/
this.router.navigateToHash(hashPageStoreBasket);
});
});
}
hookupBasketItemPlusAndMinusButtons() {
const minVal = 1;
const basket = document.querySelector(idFormBasket);
// Basket Add
// Increment
basket.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
let elButton = this;
Events.initialiseEventHandler(elButton, flagInitialised, function(){
elButton.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
let elInput = document.querySelectorAll(getFormProductSelector(typeFormBasketAdd, elButton)).querySelector('input[type="number"]');
// console.log('input selector ='); console.log('form[' + attrFormType + '=' + elButton.getAttribute(attrFormType) + '][' + attrIdProduct + '=' + elButton.getAttribute(attrIdProduct) + ']');
let newVal = parseInt(DOM.getElementValueCurrent(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal += 1;
elInput.val(newVal);
});
});
});
// Decrement
basket.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
let elButton = this;
Events.initialiseEventHandler(elButton, flagInitialised, function(){
elButton.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
// let product = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elButton.getAttribute(attrIdProduct) + ']');
let elInput= document.querySelectorAll(getFormProductSelector(typeFormBasketAdd, elButton)).querySelector('input[type="number"]');
let newVal = parseInt(DOM.getElementValueCurrent(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal = Math.max(minVal, newVal - 1);
elInput.val(newVal);
});
});
});
// Basket Edit
// Increment
basket.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
let elButton = this;
Events.initialiseEventHandler(elButton, flagInitialised, function(){
elButton.addEventListener("click", function(event) {
event.stopPropagation();
// basketItem = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elButton.getAttribute(attrIdProduct) + ']');
let elInput = document.querySelectorAll(getFormProductSelector(typeFormBasketEdit, elButton)).querySelector('input[type="number"]');
// console.log('input selector ='); console.log('form[' + attrFormType + '=' + elButton.getAttribute(attrFormType) + '][' + attrIdProduct + '=' + elButton.getAttribute(attrIdProduct) + ']');
let newVal = parseInt(DOM.getElementValueCurrent(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal += 1;
elInput.val(newVal);
elInput.trigger("change");
});
});
});
// Decrement
basket.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
let elButton = this;
Events.initialiseEventHandler(elButton, flagInitialised, function(){
elButton.addEventListener("click", function(event) {
event.stopPropagation();
let elInput= document.querySelectorAll(getFormProductSelector(typeFormBasketEdit, elButton)).querySelector('input[type="number"]');
let newVal = parseInt(DOM.getElementValueCurrent(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal = Math.max(minVal, newVal - 1);
elInput.val(newVal);
elInput.trigger("change");
});
});
});
}
hookupBasketAddForms() {
let basketAddFormSelector = 'form[' + attrFormType + '=' + typeFormBasketAdd + ']';
Events.initialiseEventHandler(basketAddFormSelector, flagInitialised, (basketAddForm) => {
let quantityInput = basketAddForm.querySelector('input[type="number"]');
quantityInput.addEventListener("change", function(event) {
let newVal = parseInt(quantityInput.value);
if (isNaN(newVal) || newVal < 0) {
quantityInput.value = 0;
}
});
let buttonSubmit = basketAddForm.querySelector('button'); // [type="submit"]
buttonSubmit.addEventListener("click", (event) => {
event.preventDefault();
event.stopPropagation();
let newBasketItem = {};
newBasketItem[keyIdProductPermutation] = basketAddForm.getAttribute(attrIdPermutation);
newBasketItem[keyQuantity] = quantityInput.value;
API.storeAddToBasket(newBasketItem);
});
});
}
hookupBasketEditForms() {
let basketEditFormSelector = 'form[' + attrFormType + '=' + typeFormBasketEdit + ']';
Events.initialiseEventHandler(basketEditFormSelector, flagInitialised, (basketEditForm) => {
let quantityInput = basketEditForm.querySelector('input[type="number"]');
quantityInput.addEventListener("change", function(event) {
let newVal = parseInt(quantityInput.value);
if (isNaN(newVal) || newVal < 0) {
quantityInput.value = 0;
}
if (quantityInput.value != basketEditForm.getAttribute(attrQuantity)) {
let newBasketItem = {};
newBasketItem[keyIdProductPermutation] = basketEditForm.getAttribute(attrIdPermutation);
newBasketItem[keyQuantity] = quantityInput.value;
API.storeSaveBasket(newBasketItem);
}
});
let deleteButton = basketEditForm.querySelector('button'); // [type="button"]
deleteButton.addEventListener("click", (event) => {
event.preventDefault();
event.stopPropagation();
API.storeDeleteBasketItem(basketEditForm.getAttribute(attrIdPermutation));
});
});
}
loadBasket(response) {
userBasket = response.data[keyBasket];
let basketForm = document.querySelectorAll(idFormBasket);
/*
basketForm.replaceChildren();
let items = userBasket[keyItems];
let basketItem;
items.forEach(item => {
basketItem = document.createElement('div');
basketForm.appendChild(basketItem);
});
*/
let htmlBlock = response.data[keyHtmlBlock];
basketForm.innerHTML = htmlBlock;
this.hookupBasket();
}
getCurrencySelected() {
let elementSelectorCurrency = document.querySelectorAll(idSelectorCurrency);
let selectedCurrency = elementSelectorCurrency.val();
console.log("selected currency: ", selectedCurrency);
return selectedCurrency;
}
hookupStoreCardsProduct() {
let d; // , lsShared;
let selectorCardProduct = '.card.subcard';
Events.initialiseEventHandler(selectorCardProduct, flagInitialised, function(cardProduct) {
console.log("initialising product card: ", cardProduct);
cardProduct.addEventListener("click", function(event) {
// d = { keyIdProduct: product.getAttribute(attrIdProduct) }
var elemClicked = event.target;
if (elemClicked.id != 'submit') { // disable for submit buttons
console.log("product click: " + cardProduct.getAttribute(attrIdProduct));
console.log("permutation click: " + cardProduct.getAttribute(attrIdPermutation));
var d = {}
d[keyIdProduct] = cardProduct.getAttribute(attrIdProduct)
d[keyIdPermutation] = cardProduct.getAttribute(attrIdPermutation)
// send quantity requested
goToPage(hashPageStoreProduct, d);
}
});
console.log("click method added for product ID: " + cardProduct.getAttribute(attrIdProduct) + ', permutation ID: ', cardProduct.getAttribute(attrIdPermutation));
});
}
leave() {}
/*
getFormProductSelector(typeForm, elementInForm) {
idPermutation = elementInForm.getAttribute(attrIdPermutation);
console.log('idPermutation: ', idPermutation);
hasPermutation = !Validation.isEmpty(idPermutation);
console.log('has permutation: ', hasPermutation);
selectorIdPermutation = hasPermutation ? '[' + attrIdPermutation + '=' + idPermutation + ']' : '';
return 'form[' + attrFormType + '="' + typeForm + '"][' + attrIdProduct + '=' + elementInForm.getAttribute(attrIdProduct) + ']' + selectorIdPermutation;
}
addMetadataBasketToJSON(jsonData) {
jsonData[keyIdCurrency] = LocalStorage.getLocalStorage(keyIdCurrency);
jsonData[keyIdRegionDelivery] = LocalStorage.getLocalStorage(keyIdRegionDelivery);
jsonData[keyIsIncludedVAT] = LocalStorage.getLocalStorage(keyIsIncludedVAT);
return jsonData;
}
*/
/*
loadFiltersFromLocalStorage(pageHash, parameters_dict) {
let lsOld = getPageLocalStorage(pageHashCurrent);
pageHashCurrent = pageHash;
clearPageLocalStorage(pageHashCurrent);
setupPageLocalStorage(pageHashCurrent);
let lsNew = getPageLocalStorage(pageHashCurrent);
lsNew[keyBasket] = (keyBasket in lsOld) ? lsOld[keyBasket] : {'items': []};
setPageLocalStorage(pageHashCurrent, lsNew);
goToPage(pageHash, parameters_dict);
}
*/
}