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 d37f632c92
commit cf78e4b3bc
239 changed files with 6371 additions and 4336 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);
}
*/
}