admin/parts_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. Refactoring form objects and database objects to use inheritance and abstract base class for consistency and reduced redundancy.\n2. Contact us page button links updated to resolve error of missing link causing page refresh instead of expected functionality.

Browse Source
This commit is contained in:
teddy
2024-09-10 12:09:50 +01:00
parent b3e801e1ec
commit 2d55fe6239
709 changed files with 5158 additions and 1512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

518
static/js/pages/store/base.js Normal file
View File

@@ -0,0 +1,518 @@
// import { BasePage } from "../base.js";
import { DOM } from "../../dom.js";
import { isEmpty } from "../../lib/utils.js";
export class StoreMixinPage { // extends BasePage {
constructor() {
super();
}
initialize(thisPage) {
console.log('hookup store start for ', DOM.getHashPageCurrent());
this.hookupFiltersStore();
this.hookupLocalStorageStore();
this.hookupBasket();
this.hookupButtonsAdd2Basket();
}
hookupFiltersStore() {
hookupFilterCurrency();
hookupFilterDeliveryRegion();
hookupFilterIsIncludedVAT();
}
hookupFilterCurrency() {
/*
let elForm = document.querySelectorAll(idFormCurrency);
let elSelector = document.querySelectorAll(elForm.querySelector('select')[0]);
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.attr(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.attr(attrTextExpanded, textOption);
option.attr(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
option.classList.add(flagCollapsed);
}
handleSelectCollapse(dropdownCurrency);
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 = getLocalStorage(keyBasket);
basket[keyIdCurrency] = selectedCurrency;
// setLocalStorage(keyIdCurrency, selectedCurrency);
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]);
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.attr(attrTextExpanded, textOption);
option.attr(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
option.classList.add(flagCollapsed);
}
handleSelectCollapse(dropdownRegion);
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 = getLocalStorage(keyBasket);
basket[keyIdRegionDelivery] = selectedRegion;
// setLocalStorage(keyIdRegionDelivery, selectedRegion);
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]);
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")
});
}
hookupLocalStorageStore() {
// setupPageLocalStorage(hashPageCurrent);
// let lsPage = getPageLocalStorage(hashPageCurrent);
// let d = {}
// d[keyBasket] = getLocalStorage(keyBasket); // (keyBasket in lsPage) ? lsPage[keyBasket] : {'items': []};
// console.log('d:'); console.log(d);
let basket;
let createNewBasket = true;
if (true) { // !isUserLoggedIn) {
try {
basket = getLocalStorage(keyBasket);
console.log('basket found: '); console.log(basket);
createNewBasket = isEmpty(basket);
}
catch {
}
// lsPage[keyBasket] = ajaxJSONData(keyBasket, hashStoreBasketLoad, d, loadBasket, false);
}
else {
// store basket from server in localStorage
}
if (createNewBasket) {
basket = {};
basket[keyItems] = [];
basket[keyIsIncludedVAT] = true;
basket[keyIdCurrency] = 1;
basket[keyIdRegionDelivery] = 1;
setLocalStorage(keyBasket, basket);
console.log("new local basket created");
}
let ajaxData = {}
ajaxData[keyBasket] = basket;
// console.log("hookupLocalStorageStore\nhashStoreBasketLoad: " + hashStoreBasketLoad + "\n");
// ajaxData[keyIsIncludedVAT] = getLocalStorage(keyIsIncludedVAT);
console.log('ajax:' + ajaxData);
ajaxJSONData(keyBasket, mapHashToController(hashStoreBasketLoad), ajaxData, loadBasket, false);
}
hookupBasket() {
// const containerBasket = document.querySelectorAll(idContainerBasket);
this.toggleShowButtonCheckout(); // containerBasket
this.hookupButtonCheckout();
this.hookupBasketItemPlusAndMinusButtons();
this.hookupBasketAddInputs();
this.hookupBasketEditInputs();
this.hookupDeleteBasketItemButtons();
}
toggleShowButtonCheckout() { // containerBasket
console.log("toggling checkout button");
const btnCheckout = document.querySelectorAll(idButtonCheckout);
const labelBasketEmpty = document.querySelectorAll(idLabelBasketEmpty);
// let lsPage = getPageLocalStorage(hashPageCurrent);
// let basket = lsPage[keyBasket]['items'];
// let products = containerBasket.filter('');
let basket = getLocalStorage(keyBasket);
if (basket['items'].length == 0) {
btnCheckout.style.display = "none";
labelBasketEmpty.style.display = "";
} else {
btnCheckout.style.display = "";
labelBasketEmpty.style.display = "none";
}
}
hookupButtonCheckout() {
console.log("hooking up checkout button");
const btnCheckout = document.querySelectorAll(idButtonCheckout);
// let lsPage = getPageLocalStorage(hashPageCurrent);
initialiseEventHandler(btnCheckout, flagInitialised, function() {
btnCheckout.addEventListener("click", function() {
/*
//setupPageLocalStorageNext(hashPageStoreBasket);
let basket = getLocalStorage(keyBasket);
// goToPage(hashPageStoreBasket);
let ajaxData = {};
ajaxData[keyBasket] = basket;
ajaxJSONData('checkout', mapHashToController(hashPageStoreBasket), ajaxData, null, false);
*/
goToPage(hashPageStoreBasket);
});
});
}
hookupBasketItemPlusAndMinusButtons() {
const minVal = 1;
// Basket Add
// Increment
document.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
let elButton = this;
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.attr(attrFormType) + '][' + attrIdProduct + '=' + elButton.attr(attrIdProduct) + ']');
let newVal = parseInt(getElementCurrentValue(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal += 1;
elInput.val(newVal);
});
});
});
// Decrement
document.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
let elButton = this;
initialiseEventHandler(elButton, flagInitialised, function(){
elButton.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
// let product = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elButton.attr(attrIdProduct) + ']');
let elInput= document.querySelectorAll(getFormProductSelector(typeFormBasketAdd, elButton)).querySelector('input[type="number"]');
let newVal = parseInt(getElementCurrentValue(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal = Math.max(minVal, newVal - 1);
elInput.val(newVal);
});
});
});
// Basket Edit
// Increment
document.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
let elButton = this;
initialiseEventHandler(elButton, flagInitialised, function(){
elButton.addEventListener("click", function(event) {
event.stopPropagation();
// basketItem = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elButton.attr(attrIdProduct) + ']');
let elInput = document.querySelectorAll(getFormProductSelector(typeFormBasketEdit, elButton)).querySelector('input[type="number"]');
// console.log('input selector ='); console.log('form[' + attrFormType + '=' + elButton.attr(attrFormType) + '][' + attrIdProduct + '=' + elButton.attr(attrIdProduct) + ']');
let newVal = parseInt(getElementCurrentValue(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal += 1;
elInput.val(newVal);
elInput.trigger("change");
});
});
});
// Decrement
document.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
let elButton = this;
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(getElementCurrentValue(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal = Math.max(minVal, newVal - 1);
elInput.val(newVal);
elInput.trigger("change");
});
});
});
}
hookupBasketAddInputs() {
document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
let elForm = this;
let elInput = elForm.querySelector('input[type="number"]');
initialiseEventHandler(elInput, flagInitialised, function(){
elInput.addEventListener("change", function(event) {
event.preventDefault();
event.stopPropagation();
});
elInput.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
});
});
});
}
hookupBasketEditInputs() {
// let elButton, elInput, newVal, product;
const minVal = 1;
// Basket Edit
// Increment
document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
let elForm = this;
let elInput = elForm.querySelector('input[type="number"]');
initialiseEventHandler(elInput, flagInitialised, function(){
elInput.addEventListener("change", function(event) {
event.preventDefault();
event.stopPropagation();
// let lsPage = getPageLocalStorageCurrent();
d = {};
d[keyBasket]= getLocalStorage(keyBasket); // lsPage[keyBasket]; // JSON.parse(lsPage[keyBasket]);
d[keyIdProduct] = elForm.attr(attrIdProduct); // lsPage[keyIdProduct];
d[keyIdPermutation] = elForm.attr(attrIdPermutation);
// d[keyQuantity] = lsPage[keyQuantity];
d[keyForm] = convertForm2JSON(elForm);
d[keyForm][keyQuantity] = elInput.val();
console.log('sending data to basket edit controller: '); console.log(d);
ajaxJSONData('basket update', mapHashToController(hashStoreBasketEdit), d, loadBasket, false);
});
});
});
}
hookupDeleteBasketItemButtons() {
console.log('hooking up basket item delete buttons');
// let elForm, elDelete;
// const minVal = 1;
// Basket Add
// Increment
document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
let elForm = this;
let elDelete = elForm.querySelector('a.' + flagBasketItemDelete);
initialiseEventHandler(elDelete, flagInitialised, function(){
elDelete.addEventListener("click", function(event) {
event.stopPropagation();
ajaxData = {};
ajaxData[keyBasket]= getLocalStorage(keyBasket);
ajaxData[keyIdProduct] = elForm.attr(attrIdProduct);
ajaxData[keyIdPermutation] = elForm.attr(attrIdPermutation);
console.log('sending data to basket delete controller: '); console.log(ajaxData);
ajaxJSONData('basket update', mapHashToController(hashStoreBasketDelete), ajaxData, loadBasket, false);
});
});
});
}
/*
getBasket() {
lsShared = getPageLocalStorage(keyShared);
return lsShared[keyBasket];
}
*/
hookupButtonsAdd2Basket() {
// let product, btn, lsPage;
// [' + attrIdProduct + '=' + elButton.attr(attrIdProduct) + ']
document.querySelectorAll('form[' + attrFormType + '="' + typeFormBasketAdd +'"]').each(function() {
var form = this;
initialiseEventHandler(form, flagInitialised, function() {
// form = document.querySelectorAll(form);
form.submit(function(event) {
event.preventDefault();
// lsShared = getPageLocalStorage(keyShared);
console.log("adding to basket for product ID: ", form.attr(attrIdProduct));
ajaxData = {};
ajaxData[keyIdProduct] = form.attr(attrIdProduct);
ajaxData[keyIdPermutation] = form.attr(attrIdPermutation);
basket = getLocalStorage(keyBasket);
ajaxData[keyBasket] = basket; // lsShared[keyBasket];
console.log("basket before add: ", basket);
ajaxData[keyForm] = convertForm2JSON(form); // formData; // form.serialize();
console.log("ajax data:"); console.log(ajaxData);
ajaxJSONData('add2Basket', mapHashToController(hashStoreBasketAdd), ajaxData, loadBasket, false); // { product_id: form.attr(attrIdProduct), basket_local: lsPage[keyBasket] , }
});
console.log("basket add method added for product ID: ", form.attr(attrIdProduct));
});
});
}
loadBasket(response) {
let basketContainer = document.querySelectorAll(idBasketContainer);
// let lsPage = getPageLocalStorage(hashPageCurrent);
// let lsShared = getPageLocalStorage(keyShared);
console.log('ajax:'); console.log(response.data);
let basket = response.data[keyBasket]; // JSON.parse(response.data[keyBasket]);
// setPageLocalStorage(keyShared, lsShared);
setLocalStorage(keyBasket, basket);
items = basket['items'];
// console.log('old basket:'); console.log(basketContainer.innerHTML);
// console.log('setting basket:'); console.log(response.data['html_block']);
basketContainer.innerHTML = response.data['html_block'];
/*
if (items.length > 0) {
let basketItem;
for (let indexItemBasket = 0; indexItemBasket < items.length; indexItemBasket++) {
basketItem = items[indexItemBasket];
if (basketItem[keyQuantity] > 1) {
elInput = basketContainer.querySelector('form[' + attrFormType + '=' + typeFormBasketEdit + ']').querySelector('input[type="number"]');
// todo : what is missing?
elInput.val(basketItem[keyQuantity]);
}
}
}
*/
hookupBasket();
}
getFormProductSelector(typeForm, elementInForm) {
idPermutation = elementInForm.attr(attrIdPermutation);
console.log('idPermutation: ', idPermutation);
hasPermutation = !isEmpty(idPermutation);
console.log('has permutation: ', hasPermutation);
selectorIdPermutation = hasPermutation ? '[' + attrIdPermutation + '=' + idPermutation + ']' : '';
return 'form[' + attrFormType + '="' + typeForm + '"][' + attrIdProduct + '=' + elementInForm.attr(attrIdProduct) + ']' + selectorIdPermutation;
}
getCurrencySelected() {
let elementSelectorCurrency = document.querySelectorAll(idSelectorCurrency);
let selectedCurrency = elementSelectorCurrency.val();
console.log("selected currency: ", selectedCurrency);
return selectedCurrency;
}
addMetadataBasketToJSON(jsonData) {
jsonData[keyIdCurrency] = getLocalStorage(keyIdCurrency);
jsonData[keyIdRegionDelivery] = getLocalStorage(keyIdRegionDelivery);
jsonData[keyIsIncludedVAT] = getLocalStorage(keyIsIncludedVAT);
return jsonData;
}
hookupStoreCardsProduct() {
let d; // , lsShared;
let selectorCardProduct = '.card.subcard';
initialiseEventHandler(selectorCardProduct, flagInitialised, function(cardProduct) {
console.log("initialising product card: ", cardProduct);
cardProduct.addEventListener("click", function(event) {
// d = { keyIdProduct: product.attr(attrIdProduct) }
var elemClicked = event.target;
if (elemClicked.id != 'submit') { // disable for submit buttons
console.log("product click: " + cardProduct.attr(attrIdProduct));
console.log("permutation click: " + cardProduct.attr(attrIdPermutation));
var d = {}
d[keyIdProduct] = cardProduct.attr(attrIdProduct)
d[keyIdPermutation] = cardProduct.attr(attrIdPermutation)
// send quantity requested
goToPage(hashPageStoreProduct, d);
}
});
console.log("click method added for product ID: " + cardProduct.attr(attrIdProduct) + ', permutation ID: ', cardProduct.attr(attrIdPermutation));
});
}
leave() {
let lsOld = getPageLocalStorage(hashPageCurrent);
hashPageCurrent = pageHashNext;
clearPageLocalStorage(hashPageCurrent);
setupPageLocalStorage(hashPageCurrent);
let lsNew = getPageLocalStorage(hashPageCurrent);
lsNew[keyBasket] = (keyBasket in lsOld) ? lsOld[keyBasket] : {'items': []};
setPageLocalStorage(hashPageCurrent, lsNew);
}
/*
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);
}
*/
}

191
static/js/pages/store/basket.js Normal file
View File

@@ -0,0 +1,191 @@
import { BasePage } from "../base.js";
export class PageStoreBasket extends BasePage {
static hash = hashPageStoreBasket;
constructor() {
super();
}
initialize() {
this.sharedInitialize();
this.hookupStoreCardsInfo();
this.hookupOverlaysStoreBasketInfo();
this.hookupButtonCheckoutSession();
}
hookupStoreCardsInfo() {
document.querySelectorAll(idContainerInfoDelivery).addEventListener("click", function(event) {
console.log("delivery modal display method");
document.querySelectorAll(idOverlayInfoDelivery).css('display', 'block');
});
document.querySelectorAll(idContainerInfoBilling).addEventListener("click", function(event) {
console.log("billing modal display method");
document.querySelectorAll(idOverlayInfoBilling).css('display', 'block');
});
}
hookupOverlaysStoreBasketInfo() {
let elOverlay, elForm;
// Delivery
elOverlay = document.querySelectorAll(idOverlayInfoDelivery);
elForm = elOverlay.querySelector('form');
hookupOverlay(elOverlay);
initialiseEventHandler(elForm, flagInitialised, function() {
elForm.submit(function(event) {
elForm = document.querySelectorAll(elForm);
event.preventDefault();
console.log("delivery submit method");
ajaxData = {};
ajaxData[keyInfoType] = keyInfoDelivery;
ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoDelivery);
ajaxJSONData('info delivery', mapHashToController(hashStoreBasketInfo), ajaxData, loadInfoAddress, false);
// document.querySelectorAll(idOverlayInfoDelivery).css('display', 'none');
});
});
// Billing
elOverlay = document.querySelectorAll(idOverlayInfoBilling);
elForm = elOverlay.querySelector('form');
hookupOverlay(elOverlay);
initialiseEventHandler(elForm, flagInitialised, function() {
elForm.submit(function(event) {
event.preventDefault();
console.log("billing submit method");
ajaxData = {};
ajaxData[keyInfoType] = keyInfoBilling;
ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoBilling); // formData; // form.serialize();
ajaxJSONData('info billing', mapHashToController(hashStoreBasketInfo), ajaxData, loadInfoAddress, false);
// document.querySelectorAll(idOverlayInfoBilling).css('display', 'none');
});
});
let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyCity, keyCounty];
for (var k in keys) {
elForm.querySelector('#' + keys[k]).removeAttr('required');
}
}
loadInfoAddress(response) {
console.log('ajax:'); console.log(response.data);
let infoType = response.data[keyInfoType];
let infoAddress = response.data[infoType];
setLocalStorage(infoType, infoAddress);
// update webpage elements in background
if (infoType == keyInfoBilling) {
let container = document.querySelectorAll(idContainerInfoBilling);
if (infoAddress[keyInfoIdentical]) {
container.querySelector('div').innerHTML = "Same as delivery address";
} else {
container.querySelector('div').innerHTML = "<strong>" + infoAddress[keyNameFull] + '</strong> at <strong>' + infoAddress[keyPostcode] + "</strong>";
}
document.querySelectorAll(idOverlayInfoBilling).css('display', 'none');
document.querySelectorAll(idOverlayInfoBilling).querySelector('form').classList.add(flagSubmitted);
} else {
let container = document.querySelectorAll(idContainerInfoDelivery);
container.querySelector('div').innerHTML = "<strong>" + infoAddress[keyNameFull] + '</strong> at <strong>' + infoAddress[keyPostcode] + "</strong>";
document.querySelectorAll(idOverlayInfoDelivery).css('display', 'none');
document.querySelectorAll(idOverlayInfoDelivery).querySelector('form').classList.add(flagSubmitted);
}
}
convertFormBilling2JSON(ajaxData, idOverlayInfo) {
let elOverlay, elForm, elOverlayDelivery, elFormDelivery;
elOverlay = document.querySelectorAll(idOverlayInfo);
elForm = elOverlay.querySelector('form');
elOverlay = document.querySelectorAll(idOverlayInfoDelivery);
elForm = elOverlay.querySelector('form');
console.log('converting billing form to json\nform ID: ' + elForm.id);
ajaxData[keyForm] = convertForm2JSON(elForm); // formData; // form.serialize();
let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
console.log('ajaxData:');
console.log(ajaxData);
ajaxData[keyForm][keyInfoIdentical] = getElementCurrentValue(elForm.querySelector('#' + keyInfoIdentical));
for (var k in keys) {
if (idOverlayInfo == idOverlayInfoBilling && ajaxData[keyForm][keyInfoIdentical]) {
ajaxData[keyForm][keys[k]] = getElementCurrentValue(elFormDelivery.querySelector('#' + keys[k]));
} else {
ajaxData[keyForm][keys[k]] = getElementCurrentValue(elForm.querySelector('#' + keys[k]));
}
}
console.log('ajaxData:');
console.log(ajaxData);
return ajaxData;
}
hookupButtonCheckoutSession() {
let btnCheckout = document.querySelectorAll(idButtonCheckout);
btnCheckout.classList.remove(flagInitialised);
initialiseEventHandler(idButtonCheckout, flagInitialised, function() {
btnCheckout.removeEventListener("click");
btnCheckout.addEventListener("click", function(event) {
//setupPageLocalStorageNext(hashPageStoreBasket);
let basket = getLocalStorage(keyBasket);
// goToPage(hashPageStoreBasket);
let ajaxData = {};
ajaxData[keyBasket] = basket;
ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoDelivery);
ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoBilling);
ajaxData[key_code_currency] = getCurrencySelected();
// ajaxData[keyIsSubscription] = false; // only checkout one-time payment items for now
ajaxJSONData('checkout session', mapHashToController(hashPageStoreCheckout), ajaxData, handleResponseCheckout, false);
});
});
}
handleResponseCheckout(response) {
// let tmpData = {};
// tmpData[keyIdCheckout] = response.data[keyIdCheckout]
// goToPage(hashPageStoreCheckoutSession, tmpData);
window.location.href = response.data[keyUrlCheckout]
}
hookupButtonFormBillingCopy() {
// let elButton = document.querySelectorAll(idButtonFormBillingCopy);
initialiseEventHandler(idButtonFormBillingCopy, flagInitialised, function() {
document.querySelectorAll(idButtonFormBillingCopy).addEventListener("click", function (event) {
let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
let elFormBilling = document.querySelectorAll(idOverlayInfoBilling).querySelector('form');
let elFormDelivery = document.querySelectorAll(idOverlayInfoDelivery).querySelector('form');
for (var k in keys) {
elFormBilling.querySelector('#' + keys[k]).value = getElementCurrentValue(elFormDelivery.querySelector('#' + keys[k]));
}
});
});
}
leave() {
super.leave();
}
}

20
static/js/pages/store/home.js Normal file
View File

@@ -0,0 +1,20 @@
import { BasePage } from "../base.js";
export class PageStoreHome extends BasePage {
static hash = hashPageStoreHome;
constructor() {
super();
}
initialize() {
this.sharedInitialize();
this.hookupFiltersStore();
this.hookupStoreHome();
}
leave() {
super.leave();
}
}

129
static/js/pages/store/product_categories.js Normal file
View File

@@ -0,0 +1,129 @@
import { TableBasePage } from "../base_table.js";
import API from "../../api.js";
import DOM from "../../dom.js";
export class PageStoreProductCategories extends TableBasePage {
static hash = hashPageStoreProductCategories;
callFilterTableContent = API.getCategoriesByFilters;
callSaveTableContent = API.saveCategories;
constructor() {
super();
}
initialize() {
super.initialize();
}
hookupFilters() {
super.hookupFilters();
this.hookupFilterIsNotEmpty();
this.hookupFilterActive();
}
hookupFilterIsNotEmpty() {
initialiseEventHandler('.' + flagIsNotEmpty, flagInitialised, (filter) => {
filter.addEventListener("change", (event) => {
PageStoreProductCategories.isDirtyFilter(filter);
});
});
}
loadRowTable(rowJson) {
if (rowJson == null) return;
let row = _rowBlank.cloneNode(true);
row.classList.remove(flagRowNew);
row.classList.remove(flagInitialised);
row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
element.classList.remove(flagInitialised);
});
console.log("applying data row: ", rowJson);
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
let textareaCode = row.querySelector('td.' + flagCode + ' textarea');
let textareaName = row.querySelector('td.' + flagName + ' textarea');
let textareaDescription = row.querySelector('td.' + flagDescription + ' textarea');
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
let divAccessLevel = tdAccessLevel.querySelector('div.' + flagAccessLevel);
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
sliderDisplayOrder.setAttribute(attrValueCurrent, rowJson[flagDisplayOrder]);
DOM.setElementValuePrevious(sliderDisplayOrder, rowJson[flagDisplayOrder]);
DOM.setElementValueCurrent(textareaCode, rowJson[flagCode]);
DOM.setElementValuePrevious(textareaCode, rowJson[flagCode]);
DOM.setElementValueCurrent(textareaName, rowJson[flagName]);
DOM.setElementValuePrevious(textareaName, rowJson[flagName]);
DOM.setElementValueCurrent(textareaDescription, rowJson[flagDescription]);
DOM.setElementValuePrevious(textareaDescription, rowJson[flagDescription]);
tdAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
tdAccessLevel.setAttribute(flagAccessLevelRequired, rowJson[flagAccessLevelRequired]);
divAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
DOM.setElementValueCurrent(divAccessLevel, rowJson[attrIdAccessLevel]);
DOM.setElementValuePrevious(divAccessLevel, rowJson[attrIdAccessLevel]);
divAccessLevel.textContent = rowJson[flagAccessLevelRequired];
DOM.setElementValueCurrent(inputActive, rowJson[flagActive]);
DOM.setElementValuePrevious(inputActive, rowJson[flagActive]);
row.setAttribute(rowJson[flagKeyPrimary], rowJson[rowJson[flagKeyPrimary]]);
let table = this.getTableMain();
let bodyTable = table.querySelector('tbody');
bodyTable.appendChild(row);
}
getJsonRow(row) {
if (row == null) return;
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
let textareaCode = row.querySelector('td.' + flagCode + ' textarea');
let textareaName = row.querySelector('td.' + flagName + ' textarea');
let textareaDescription = row.querySelector('td.' + flagDescription + ' textarea');
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
let jsonCategory = {};
jsonCategory[attrIdCategory] = row.getAttribute(attrIdCategory);
jsonCategory[flagCode] = DOM.getElementValueCurrent(textareaCode);
jsonCategory[flagName] = DOM.getElementValueCurrent(textareaName);
jsonCategory[flagDescription] = DOM.getElementValueCurrent(textareaDescription);
jsonCategory[flagAccessLevelRequired] = tdAccessLevel.getAttribute(flagAccessLevelRequired);
jsonCategory[attrIdAccessLevel] = tdAccessLevel.getAttribute(attrIdAccessLevel);
jsonCategory[flagActive] = DOM.getElementValueCurrent(inputActive);
jsonCategory[flagDisplayOrder] = sliderDisplayOrder.getAttribute(attrValueCurrent);
return jsonCategory;
}
hookupTableMain() {
super.hookupTableMain();
this.hookupSlidersDisplayOrderTable();
this.hookupTextareasCodeTable();
this.hookupTextareasNameTable();
this.hookupTextareasDescriptionTable();
this.hookupTdsAccessLevel();
this.hookupInputsActiveTable();
}
isDirtyRow(row) {
if (row == null) return false;
console.log("Product Category isDirtyRow");
console.log("row: ", row);
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder);
let inputCode = row.querySelector('td.' + flagCode + ' textarea');
let inputName = row.querySelector('td.' + flagName + ' textarea');
let inputDescription = row.querySelector('td.' + flagDescription + ' textarea');
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
let isDirty = sliderDisplayOrder.classList.contains(flagDirty) || inputCode.classList.contains(flagDirty) || inputName.classList.contains(flagDirty) ||
inputDescription.classList.contains(flagDirty) || tdAccessLevel.classList.contains(flagDirty) || inputActive.classList.contains(flagDirty);
DOM.handleDirtyElement(row, isDirty);
return isDirty;
}
leave() {
super.leave();
}
getFiltersDefaults() {
filters = {};
filters.flagIsNotEmpty = true;
filters.flagActive = true;
return filters;
}
}

473
static/js/pages/store/product_permutations.js Normal file
View File

@@ -0,0 +1,473 @@
import { BasePage } from "../base.js";
export class PageStoreProductPermutations extends BasePage {
static hash = hashPageStoreProductPermutations;
constructor() {
super();
}
initialize() {
this.sharedInitialize();
hookupFilters();
hookupButtonsSaveCancel();
hookupTableMain();
hookupOverlayConfirm(savePermutations);
}
hookupFilters() {
initialiseEventHandler(idFilterCategory, flagInitialised, function(filterCategory) {
console.log("hooking up filter category");
/*
listCategories.forEach(function(category) {
console.log('adding category: ', category.value, category.text);
/*
let option = document.createElement('option');
option.value = category.value;
option.text = category.text;
*
filterCategory.appendChild(document.createElement('<option>', category));
});
console.log(listCategories);
*/
filterCategory.addEventListener("change", function(event) {
loadPermutations();
});
console.log("hooked up filter category");
});
initialiseEventHandler(idFilterProduct, flagInitialised, function(filterProduct) {
listProducts.forEach(function(product) {
if (product[attrIdCategory] != getElementCurrentValue(document.querySelectorAll(idFilterCategory))) return;
/*
let option = document.createElement('option');
option.value = product.value;
option.text = product.text;
*/
filterProduct.appendChild(document.createElement('<option>', product));
});
filterProduct.addEventListener("change", function(event) {
loadPermutations();
});
});
initialiseEventHandler(idFilterIsOutOfStock, flagInitialised, function(filterIsOutOfStock) {
filterIsOutOfStock.addEventListener("change", function(event) {
loadPermutations();
});
});
initialiseEventHandler(idFilterQuantityMin, flagInitialised, function(filterQuantityMin) {
filterQuantityMin.addEventListener("change", function(event) {
loadPermutations();
});
});
initialiseEventHandler(idFilterQuantityMax, flagInitialised, function(filterQuantityMax) {
filterQuantityMax.addEventListener("change", function(event) {
loadPermutations();
});
});
}
loadPermutations() {
let elForm = document.querySelectorAll(idFormFiltersPermutations);
let ajaxData = {};
ajaxData[keyForm] = convertForm2JSON(elForm);
ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
/*
ajaxData[attrIdCategory] = getElementCurrentValue(document.querySelectorAll(idFilterCategory));
ajaxData[attrIdProduct] = getElementCurrentValue(document.querySelectorAll(idFilterProduct));
ajaxData[flagIsOutOfStock] = getElementCurrentValue(document.querySelectorAll(idFilterIsOutOfStock));
ajaxData[flagQuantityMin] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMin));
ajaxData[flagQuantityMax] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMax));
*/
console.log('ajaxData:'); console.log(ajaxData);
ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {"X-CSRFToken": ajaxData.csrf_token});
}
callbackLoadPermutations(response) {
console.log('ajax:'); console.log(response.data);
let table = document.querySelectorAll(idTableMain);
let bodyTable, row, dllCategory, ddlProduct;
// table.querySelector('tr').remove(); // :not(.' + flagRowNew + ')
bodyTable = table.querySelector('tbody');
bodyTable.querySelector('tr').remove();
response.data.forEach(function(dataRow) {
row = _rowBlank.cloneNode(true);
row = document.querySelectorAll(row);
row.classList.remove(flagRowNew);
console.log("applying data row: ", dataRow);
dllCategory = row.querySelector('td.' + flagCategory + ' select');
dllCategory.value = dataRow[attrIdCategory];
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
listProducts.forEach(function(product) {
if (product[attrIdCategory] != dataRow[attrIdCategory]) return;
ddlProduct.appendChild(document.createElement('<option>', product));
});
ddlProduct.value = dataRow[attrIdProduct];
row.querySelector('td.' + flagVariations + ' textarea').value = dataRow[flagVariations];
row.querySelector('td.' + flagQuantityStock + ' input').value = dataRow[flagQuantityStock];
row.querySelector('td.' + flagQuantityMin + ' input').value = dataRow[flagQuantityMin];
row.querySelector('td.' + flagQuantityMax + ' input').value = dataRow[flagQuantityMax];
row.querySelector('td.' + flagCostLocalVATIncl).innerHTML = dataRow[flagCostLocalVATIncl];
row.attr(attrIdCategory, dataRow[flagCategory]);
row.attr(attrIdProduct, dataRow[flagProduct]);
row.attr(attrIdPermutation, dataRow[attrIdPermutation]);
bodyTable.appendChild(row);
});
}
hookupButtonsSaveCancel() {
initialiseEventHandler(idButtonSave, flagInitialised, function(button) {
button.addEventListener("click", function(event) {
event.stopPropagation();
showOverlayConfirm();
});
});
// let parentSave = btnSave.closest('div.' + flagColumn);
// parentSave.classList.add(flagCollapsed);
initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
button.addEventListener("click", function(event) {
event.stopPropagation();
loadPermutations();
});
});
// let parentCancel = btnCancel.closest('div.' + flagColumn);
// parentCancel.classList.add(flagCollapsed);
initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
button.addEventListener("click", function(event) {
event.stopPropagation();
let table = document.querySelectorAll(idTableMain);
let row = _rowBlank.cloneNode(true);
row = document.querySelectorAll(row);
row.classList.remove(flagRowNew);
let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
let idCategory = getElementCurrentValue(document.querySelectorAll(idFilterCategory));
idCategory = (idCategory == 0) ? idCategoryDefault : idCategory;
let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
let products = productsByCategory[idCategory];
products.forEach(function(product) {
ddlProduct.appendChild(document.createElement('<option>', product));
});
table.querySelector('tbody').appendChild(row);
});
});
}
savePermutations() {
let permutations = getPermutations(true);
if (permutations.length == 0) {
showOverlayError('No permutations to save');
return;
}
let ajaxData = {};
ajaxData[keyPermutations] = permutations;
ajaxData[keyForm] = convertForm2JSON(elForm);
ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
ajaxData.comment = document.querySelectorAll(idTextareaConfirm).value;
console.log('ajaxData:'); console.log(ajaxData);
ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {});
}
getPermutations(dirtyOnly) {
let table = document.querySelectorAll(idTableMain);
let permutations = [];
let row, permutation, ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal;
table.querySelector('tbody tr').each(function(index, row) {
row = document.querySelectorAll(row);
if (dirtyOnly && !row.classList.contains(flagDirty)) return;
ddlCategory = row.querySelector('td.' + flagCategory + ' select');
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
variations = row.querySelector('td.' + flagVariations + ' textarea');
quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
permutation = {};
permutation[attrIdCategory] = ddlCategory.attr(attrValueCurrent);
permutation[attrIdProduct] = ddlProduct.attr(attrValueCurrent);
permutation[attrIdPermutation] = row.attr(attrIdPermutation)
permutation[flagVariations] = variations.attr(attrValueCurrent);
permutation[flagQuantityStock] = quantityStock.attr(attrValueCurrent);
permutation[flagQuantityMin] = quantityMin.attr(attrValueCurrent);
permutation[flagQuantityMax] = quantityMax.attr(attrValueCurrent);
permutations.push(permutation);
});
return permutations;
}
hookupTableMain() {
initialiseEventHandler(idTableMain, flagInitialised, function(table) {
table.querySelectorAll('td.' + flagCategory + ' select').addEventListener("change", function(event) {
handleChangeInputPermutations(this);
ddlCategory = this;
row = getRowFromElement(ddlCategory);
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
ddlProduct.querySelector('option').remove();
ddlProduct.appendChild(document.createElement('<option>', {value: '', text: 'Select Product'}));
listProducts.forEach(function(product) {
if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
ddlProduct.appendChild(document.createElement('<option>', product));
});
handleChangeInputPermutations(ddlProduct);
});
table.querySelectorAll("change", 'td.' + flagProduct + ' select' + ',' + 'td.' + flagQuantityStock + ' input' + ',' + 'td.' + flagQuantityMin + ' input' + ',' + 'td.' + flagQuantityMax + ' input').addEventListener("change", function(event) {
handleChangeInputPermutations(this);
});
table.querySelectorAll("click", 'td.' + flagVariations + ' textarea').addEventListener("change", function(event) {
event.stopPropagation();
handleClickPermutationsInputVariations(this);
});
table.querySelectorAll("click", 'td.' + flagDetail + ' button').addEventListener("change", function(event) {
event.stopPropagation();
console.log("not implemented error: detail clicked");
});
table.querySelectorAll("click", 'td.' + flagVariations + ' button.' + flagAdd).addEventListener("change", function(event) {
event.stopPropagation();
handleClickPermutationsVariationsButtonAdd(this);
});
});
// cache new row for cloning
let rowBlankTemp = table.querySelector('tr.' + flagRowNew);
console.log("row blank temp: ", rowBlankTemp);
_rowBlank = rowBlankTemp.cloneNode(true);
table.querySelectorAll('tr.' + flagRowNew).forEach(function(row) {
row.remove();
});
}
handleChangeInputPermutations(element) {
console.log("handleChangeInputPermutations");
console.log("element value:", element.value);
let row = getRowFromElement(element);
let formFilters = document.querySelector(idFormFiltersPermutations);
let buttonCancel = formFilters.querySelector(idButtonCancel);
let buttonSave = formFilters.querySelector(idButtonSave);
let wasDirty = isElementDirty(element);
if (objJQuery.classList.contains(flagVariations)) {
element.setAttribute(attrValueCurrent, getProductVariationsText(element));
} else {
element.setAttribute(attrValueCurrent, getElementCurrentValue(element));
}
let isDirty = isElementDirty(element);
if (wasDirty != isDirty) {
isRowDirty(row);
let permutationsDirty = getPermutations(true);
if (isEmpty(permutationsDirty)) {
buttonCancel.classList.add(flagCollapsed);
buttonSave.classList.add(flagCollapsed);
} else {
buttonCancel.classList.remove(flagCollapsed);
buttonSave.classList.remove(flagCollapsed);
}
}
}
isElementDirty(element) {
let isDirty = element.attr(attrValuePrevious) != element.attr(attrValueCurrent);
let cell = getCellFromElement(element);
if (isDirty) {
element.classList.add(flagDirty);
cell.classList.add(flagDirty);
} else {
element.classList.remove(flagDirty);
cell.classList.remove(flagDirty);
}
return isDirty;
}
isRowDirty(row) {
let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
let variations = row.querySelector('td.' + flagVariations + ' textarea');
let quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
let quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
let quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
// return isElementDirty(ddlCategory) || isElementDirty(ddlProduct) || isElementDirty(variations) || isElementDirty(quantityStock) || isElementDirty(quantityMin) || isElementDirty(quantityMax);
let isDirty = ddlCategory.classList.contains(flagDirty) || ddlProduct.classList.contains(flagDirty) || variations.classList.contains(flagDirty) ||
quantityStock.classList.contains(flagDirty) || quantityMin.classList.contains(flagDirty) || quantityMax.classList.contains(flagDirty);
if (isDirty) {
row.classList.add(flagDirty);
} else {
row.classList.remove(flagDirty);
}
return isDirty;
}
getProductVariationsText(element) {
element = document.querySelectorAll(element);
/*
let value = element.value;
let variations = value.split('\n');
variations = variations.map(function(variation) {
return variation.trim();
});
variations = variations.filter(function(variation) {
return variation.length > 0;
});
*/
let variations = dictVariations[element.attr(attrIdVariation)].map((variation, index) => {
return variation[keyNameVariationType] + ': ' + variation[keyNameVariation];
});
return variations.join(',\n');
}
getElementProductVariations(element) {
element = document.querySelectorAll(element);
let variations = element.attr(attrValueCurrent);
let objVariations = [];
if (!isEmpty(variations)) {
variations = variations.split(',');
variations.forEach((variation) => {
let parts = variation.split(':');
if (parts.length == 2) {
objVariations.push({
[attrIdVariationType]: parts[0].trim(),
[attrIdVariation]: parts[1].trim(),
});
}
});
}
return objVariations;
}
handleClickPermutationsInputVariations(element) {
element = document.querySelectorAll(element);
let jsonVariation, jsonVariationType, tr, tdVariationType, variationType, attributesVariationType, tdNameVariation, nameVariation, attributesNameVariation, tdDelete, buttonDelete, tmpJsonVariation, tmpJsonVariationType;
let variations = getElementProductVariations(element);
let tblVariations = document.createElement("<table>");
let thead = document.createElement("<thead>");
tr = document.createElement("<tr>");
let thVariationType = document.createElement("<th>", {
text: 'Type',
});
let thNameVariation = document.createElement("<th>", {
text: 'Name',
});
let buttonAdd = document.createElement("<button>", {
class: flagAdd,
text: '+',
});
let thAddDelete = document.createElement("<th>");
thAddDelete.appendChild(buttonAdd);
tr.appendChild(thVariationType);
tr.appendChild(thNameVariation);
tr.appendChild(thAddDelete);
thead.appendChild(tr);
tblVariations.appendChild(thead);
let tbody = document.createElement("<tbody>");
console.log('variations:', variations);
/*
if (isEmpty(variations)) {
return;
}
*/
variations.forEach((variation, index) => {
jsonVariationType = dictVariations[variation[attrIdVariationType]];
jsonVariation = dictVariations[variation[attrIdVariation]];
tdVariationType = document.createElement("<td>", {
class: attrIdVariationType,
});
attributesVariationType = {
class: attrIdVariationType,
value: variation[attrIdVariationType],
};
attributesVariationType[attrValueCurrent] = jsonVariation[attrIdVariationType];
attributesVariationType[attrValuePrevious] = jsonVariation[attrIdVariationType];
variationType = document.createElement("<select>", attributesVariationType);
listVariationTypes.forEach((idVariationType) => {
tmpJsonVariationType = dictVariationTypes[idVariationType];
variationType.appendChild(document.createElement('<option>', {
value: jsonVariationType[attrIdVariationType],
text: jsonVariationType[keyNameVariationType],
selected: (idVariationType == jsonVariationType[attrIdVariationType]),
}));
});
tdNameVariation = document.createElement("<td>", {
class: attrIdVariation,
});
attributesNameVariation = {
class: attrIdVariation,
value: variation[attrIdVariation],
};
attributesNameVariation[attrValueCurrent] = jsonVariation[attrIdVariation];
attributesNameVariation[attrValuePrevious] = jsonVariation[attrIdVariation];
nameVariation = document.createElement("<select>", attributesNameVariation);
listVariations.forEach((idVariation) => {
tmpJsonVariation = dictVariations[idVariation];
console.log("id_variation: ", idVariation);
console.log("tmpJsonVariation: ", tmpJsonVariation);
nameVariation.appendChild(document.createElement('<option>', {
value: tmpJsonVariation[attrIdVariation],
text: tmpJsonVariation[keyNameVariation],
selected: (idVariation == jsonVariation[attrIdVariation]),
}));
});
tdDelete = document.createElement("<td>", {
class: flagDelete,
});
buttonDelete = document.createElement("<button>", {
class: flagDelete,
text: 'x',
});
tr = document.createElement("<tr>");
tdVariationType.appendChild(variationType);
tr.appendChild(tdVariationType);
tdNameVariation.appendChild(nameVariation);
tr.appendChild(tdNameVariation);
tdDelete.appendChild(buttonDelete);
tr.appendChild(tdDelete);
tbody.appendChild(tr);
});
tblVariations.appendChild(tbody);
let parent = element.parentElement;
parent.innerHTML = '';
parent.appendChild(tblVariations);
console.log("tblVariations: ", tblVariations);
}
handleClickPermutationsVariationsButtonAdd(element) {
element = document.querySelectorAll(element);
let row = getRowFromElement(element);
let variations = row.querySelector('td.' + flagVariations + ' textarea');
let value = variations.value;
value = (isEmpty(value)) ? '' : value + '\n';
value += 'Type: Variation\n';
variations.value = value;
handleChangeInputPermutations(variations);
console.log("error: not implemented");
}
leave() {
super.leave();
}
}

507
static/js/pages/store/stock_items.js Normal file
View File

@@ -0,0 +1,507 @@
import { BasePage } from "../base.js";
export class PageStoreStockItems extends BasePage {
static hash = hashPageStoreStockItems;
constructor() {
super();
}
initialize() {
this.sharedInitialize();
this.hookupFilters();
this.hookupButtonsSaveCancel();
hookupTableMain();
hookupOverlayConfirm(savePermutations);
}
hookupFilters() {
let filterCategory = document.querySelectorAll(idFilterCategory);
initialiseEventHandler(filterCategory, flagInitialised, function() {
console.log("hooking up filter category");
filterCategory = document.querySelectorAll(filterCategory);
/*
listCategories.forEach(function(category) {
console.log('adding category: ', category.value, category.text);
/*
let option = document.createElement('option');
option.value = category.value;
option.text = category.text;
*
filterCategory.appendChild(document.createElement('<option>', category));
});
console.log(listCategories);
*/
filterCategory.addEventListener("change", function(event) {
loadPermutations();
});
console.log("hooked up filter category");
});
let filterProduct = document.querySelectorAll(idFilterProduct);
initialiseEventHandler(filterProduct, flagInitialised, function() {
listProducts.forEach(function(product) {
if (product[attrIdCategory] != getElementCurrentValue(document.querySelectorAll(idFilterCategory))) return;
/*
let option = document.createElement('option');
option.value = product.value;
option.text = product.text;
*/
filterProduct.appendChild(document.createElement('<option>', product));
});
filterProduct.addEventListener("change", function(event) {
loadPermutations();
});
});
let filterIsOutOfStock = document.querySelectorAll(idFilterIsOutOfStock);
initialiseEventHandler(filterIsOutOfStock, flagInitialised, function() {
filterIsOutOfStock.addEventListener("change", function(event) {
loadPermutations();
});
});
let filterQuantityMin = document.querySelectorAll(idFilterQuantityMin);
initialiseEventHandler(filterQuantityMin, flagInitialised, function() {
filterQuantityMin.addEventListener("change", function(event) {
loadPermutations();
});
});
let filterQuantityMax = document.querySelectorAll(idFilterQuantityMax);
initialiseEventHandler(filterQuantityMax, flagInitialised, function() {
filterQuantityMax.addEventListener("change", function(event) {
loadPermutations();
});
});
}
loadPermutations() {
let elForm = document.querySelectorAll(idFormFiltersPermutations);
let ajaxData = {};
ajaxData[keyForm] = convertForm2JSON(elForm);
ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
/*
ajaxData[attrIdCategory] = getElementCurrentValue(document.querySelectorAll(idFilterCategory));
ajaxData[attrIdProduct] = getElementCurrentValue(document.querySelectorAll(idFilterProduct));
ajaxData[flagIsOutOfStock] = getElementCurrentValue(document.querySelectorAll(idFilterIsOutOfStock));
ajaxData[flagQuantityMin] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMin));
ajaxData[flagQuantityMax] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMax));
*/
console.log('ajaxData:'); console.log(ajaxData);
ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {"X-CSRFToken": ajaxData.csrf_token});
}
callbackLoadPermutations(response) {
console.log('ajax:'); console.log(response.data);
let table = document.querySelectorAll(idTableMain);
let bodyTable, row, dllCategory, ddlProduct;
// table.querySelector('tr').remove(); // :not(.' + flagRowNew + ')
bodyTable = table.querySelector('tbody');
bodyTable.querySelector('tr').remove();
$.each(response.data, function(_, dataRow) {
row = _rowBlank.cloneNode(true);
row = document.querySelectorAll(row);
row.classList.remove(flagRowNew);
console.log("applying data row: ", dataRow);
dllCategory = row.querySelector('td.' + flagCategory + ' select');
dllCategory.val(dataRow[attrIdCategory]);
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
listProducts.forEach(function(product) {
if (product[attrIdCategory] != dataRow[attrIdCategory]) return;
ddlProduct.appendChild(document.createElement('<option>', product));
});
ddlProduct.val(dataRow[attrIdProduct]);
row.querySelector('td.' + flagVariations + ' textarea').value = dataRow[flagVariations];
row.querySelector('td.' + flagQuantityStock + ' input').value = dataRow[flagQuantityStock];
row.querySelector('td.' + flagQuantityMin + ' input').value = dataRow[flagQuantityMin];
row.querySelector('td.' + flagQuantityMax + ' input').value = dataRow[flagQuantityMax];
row.querySelector('td.' + flagCostLocal).innerHTML = dataRow[flagCostLocal];
row.attr(attrIdCategory, dataRow[flagCategory]);
row.attr(attrIdProduct, dataRow[flagProduct]);
row.attr(attrIdPermutation, dataRow[attrIdPermutation]);
bodyTable.appendChild(row);
});
}
hookupButtonsSaveCancel() {
let btnSave = document.querySelectorAll(idButtonSave);
let btnCancel = document.querySelectorAll(idButtonCancel);
let btnAdd = document.querySelectorAll(idButtonAdd);
btnSave.addEventListener("click", function(event) {
event.stopPropagation();
showOverlayConfirm();
});
btnSave.classList.add(flagCollapsed);
btnCancel.addEventListener("click", function(event) {
event.stopPropagation();
loadPermutations();
});
btnCancel.classList.add(flagCollapsed);
btnAdd.addEventListener("click", function(event) {
event.stopPropagation();
let table = document.querySelectorAll(idTableMain);
let row = _rowBlank.cloneNode(true);
row = document.querySelectorAll(row);
row.classList.remove(flagRowNew);
table.querySelector('tbody').appendChild(row);
});
}
savePermutations() {
let permutations = getPermutations(true);
if (permutations.length == 0) {
showOverlayError('No permutations to save');
return;
}
let ajaxData = {};
ajaxData[keyPermutations] = permutations;
ajaxData[keyForm] = convertForm2JSON(elForm);
ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
ajaxData.comment = document.querySelector(idTextareaConfirm).value;
console.log('ajaxData:'); console.log(ajaxData);
ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {});
}
getPermutations(dirtyOnly) {
let table = document.querySelectorAll(idTableMain);
let permutations = [];
let row, permutation, ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal;
table.querySelector('tbody tr').each(function(index, row) {
row = document.querySelectorAll(row);
if (dirtyOnly && !row.classList.contains(flagDirty)) return;
ddlCategory = row.querySelector('td.' + flagCategory + ' select');
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
variations = row.querySelector('td.' + flagVariations + ' textarea');
quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
permutation = {};
permutation[attrIdCategory] = ddlCategory.attr(attrValueCurrent);
permutation[attrIdProduct] = ddlProduct.attr(attrValueCurrent);
permutation[attrIdPermutation] = row.attr(attrIdPermutation)
permutation[flagVariations] = variations.attr(attrValueCurrent);
permutation[flagQuantityStock] = quantityStock.attr(attrValueCurrent);
permutation[flagQuantityMin] = quantityMin.attr(attrValueCurrent);
permutation[flagQuantityMax] = quantityMax.attr(attrValueCurrent);
permutations.push(permutation);
});
return permutations;
}
hookupTableMain() {
let table = document.querySelectorAll(idTableMain);
let rowBlankTemp = table.querySelector('tr.' + flagRowNew);
console.log("row blank temp: ", rowBlankTemp);
_rowBlank = rowBlankTemp.cloneNode(true);
table.querySelector('tr.' + flagRowNew).remove();
/*
let ddlCategory, ddlProduct;
let optionsCategory = document.querySelectorAll(idFilterCategory + ' option');
optionsCategory.
console.log('optionsCategory:', optionsCategory);
table.querySelector('tbody tr').each(function(index, row) {
console.log("hooking up row ", index);
row = document.querySelectorAll(row);
ddlCategory = row.querySelector('td.' + flagCategory + ' select');
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
optionsCategory.clone().appendTo(ddlCategory);
/*
listProducts.forEach(function(product) {
if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
ddlProduct.appendChild(document.createElement('<option>', product));
});
*
});
*/
let ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal;
table.querySelector('tbody tr').each(function(index, row) {
console.log("hooking up row ", index);
row = document.querySelectorAll(row);
ddlCategory = row.querySelector('td.' + flagCategory + ' select');
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
variations = row.querySelector('td.' + flagVariations + ' textarea');
quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
initialiseEventHandler(ddlCategory, flagInitialised, function() {
// ddlCategory = document.querySelectorAll(ddlCategory);
ddlCategory.addEventListener('change', function() {
/*
ddlCategory.attr(attrValuePrevious, ddlCategory.attr(attrValueCurrent));
ddlCategory.attr(attrValueCurrent, ddlCategory.val());
*/
handleChangeInputPermutations(this);
ddlCategory = this;
row = getRowFromElement(ddlCategory);
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
// ddlProduct = document.querySelectorAll(ddlProduct);
ddlProduct.querySelector('option').remove();
ddlProduct.appendChild(document.createElement('<option>', {value: '', text: 'Select Product'}));
listProducts.forEach(function(product) {
if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
ddlProduct.appendChild(document.createElement('<option>', product));
});
handleChangeInputPermutations(ddlProduct);
});
});
initialiseEventHandler(ddlProduct, flagInitialised, function() {
// ddlProduct = document.querySelectorAll(ddlProduct);
ddlProduct.addEventListener('change', function() {
handleChangeInputPermutations(this);
});
});
initialiseEventHandler(variations, flagInitialised, function() {
// variations = document.querySelectorAll(variations);
variations.addEventListener('change', function() {
handleChangeInputPermutations(this);
});
});
initialiseEventHandler(quantityStock, flagInitialised, function() {
// quantityStock = document.querySelectorAll(quantityStock);
quantityStock.addEventListener('change', function() {
// console.log(this.value);
// quantityStock.value = this.value;
handleChangeInputPermutations(this);
});
});
initialiseEventHandler(quantityMin, flagInitialised, function() {
// quantityMin = document.querySelectorAll(quantityMin);
quantityMin.addEventListener('change', function() {
handleChangeInputPermutations(this);
});
});
initialiseEventHandler(quantityMax, flagInitialised, function() {
// quantityMax = document.querySelectorAll(quantityMax);
quantityMax.addEventListener('change', function() {
handleChangeInputPermutations(this);
});
});
});
}
handleChangeInputPermutations(element) {
console.log(element.value);
let objJQuery = document.querySelectorAll(element);
objJQuery.value = element.value;
let row = getRowFromElement(objJQuery);
let buttonCancel = document.querySelectorAll(idButtonCancel);
let buttonSave = document.querySelectorAll(idButtonSave);
let wasDirty = isElementDirty(objJQuery);
if (objJQuery.classList.contains(flagVariations)) {
objJQuery.attr(attrValueCurrent, getVariationsCurrentValue(objJQuery));
} else {
objJQuery.attr(attrValueCurrent, getElementCurrentValue(objJQuery));
}
let isDirty = isElementDirty(objJQuery);
if (wasDirty != isDirty) {
isRowDirty(row);
let permutationsDirty = getPermutations(true);
if (isEmpty(permutationsDirty)) {
buttonCancel.classList.add(flagCollapsed);
buttonSave.classList.add(flagCollapsed);
} else {
buttonCancel.classList.remove(flagCollapsed);
buttonSave.classList.remove(flagCollapsed);
}
}
}
isRowDirty(row) {
let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
let variations = row.querySelector('td.' + flagVariations + ' textarea');
let quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
let quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
let quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
// return isElementDirty(ddlCategory) || isElementDirty(ddlProduct) || isElementDirty(variations) || isElementDirty(quantityStock) || isElementDirty(quantityMin) || isElementDirty(quantityMax);
let isDirty = ddlCategory.classList.contains(flagDirty) || ddlProduct.classList.contains(flagDirty) || variations.classList.contains(flagDirty) ||
quantityStock.classList.contains(flagDirty) || quantityMin.classList.contains(flagDirty) || quantityMax.classList.contains(flagDirty);
if (isDirty) {
row.classList.add(flagDirty);
} else {
row.classList.remove(flagDirty);
}
return isDirty;
}
getVariationsCurrentValue(element) {
let value = element.value || null;
let variations = value.split('\n');
variations = variations.map(function(variation) {
return variation.trim();
});
variations = variations.filter(function(variation) {
return variation.length > 0;
});
return variations.join(',');
}
}
import { TableBasePage } from "../base_table.js";
import API from "../../api.js";
import DOM from "../../dom.js";
export class PageStoreProductCategories extends TableBasePage {
static hash = hashPageStoreProductCategories;
callFilterTableContent = API.getCategoriesByFilters;
constructor() {
super();
}
initialize() {
super.initialize();
}
hookupFilters() {
super.hookupFilters();
this.hookupFilterIsNotEmpty();
this.hookupFilterActive();
}
hookupFilterIsNotEmpty() {
initialiseEventHandler('.' + flagIsNotEmpty, flagInitialised, (filter) => {
filter.addEventListener("change", (event) => {
PageStoreProductCategories.isDirtyFilter(filter);
});
});
}
loadRowTable(rowJson) {
if (rowJson == null) return;
let row = _rowBlank.cloneNode(true);
row.classList.remove(flagRowNew);
row.classList.remove(flagInitialised);
row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
element.classList.remove(flagInitialised);
});
console.log("applying data row: ", rowJson);
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
let textareaCode = row.querySelector('td.' + flagCode + ' textarea');
let textareaName = row.querySelector('td.' + flagName + ' textarea');
let textareaDescription = row.querySelector('td.' + flagDescription + ' textarea');
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
let divAccessLevel = tdAccessLevel.querySelector('div.' + flagAccessLevel);
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
sliderDisplayOrder.setAttribute(attrValueCurrent, rowJson[flagDisplayOrder]);
DOM.setElementValuePrevious(sliderDisplayOrder, rowJson[flagDisplayOrder]);
DOM.setElementValueCurrent(textareaCode, rowJson[flagCode]);
DOM.setElementValuePrevious(textareaCode, rowJson[flagCode]);
DOM.setElementValueCurrent(textareaName, rowJson[flagName]);
DOM.setElementValuePrevious(textareaName, rowJson[flagName]);
DOM.setElementValueCurrent(textareaDescription, rowJson[flagDescription]);
DOM.setElementValuePrevious(textareaDescription, rowJson[flagDescription]);
tdAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
tdAccessLevel.setAttribute(flagAccessLevelRequired, rowJson[flagAccessLevelRequired]);
divAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
DOM.setElementValueCurrent(divAccessLevel, rowJson[attrIdAccessLevel]);
DOM.setElementValuePrevious(divAccessLevel, rowJson[attrIdAccessLevel]);
divAccessLevel.textContent = rowJson[flagAccessLevelRequired];
DOM.setElementValueCurrent(inputActive, rowJson[flagActive]);
DOM.setElementValuePrevious(inputActive, rowJson[flagActive]);
row.setAttribute(rowJson[flagKeyPrimary], rowJson[rowJson[flagKeyPrimary]]);
let table = this.getTableMain();
let bodyTable = table.querySelector('tbody');
bodyTable.appendChild(row);
}
getJsonRow(row) {
if (row == null) return;
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
let textareaCode = row.querySelector('td.' + flagCode + ' textarea');
let textareaName = row.querySelector('td.' + flagName + ' textarea');
let textareaDescription = row.querySelector('td.' + flagDescription + ' textarea');
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
let jsonCategory = {};
jsonCategory[attrIdCategory] = row.getAttribute(attrIdCategory);
jsonCategory[flagCode] = DOM.getElementValueCurrent(textareaCode);
jsonCategory[flagName] = DOM.getElementValueCurrent(textareaName);
jsonCategory[flagDescription] = DOM.getElementValueCurrent(textareaDescription);
jsonCategory[flagAccessLevelRequired] = tdAccessLevel.getAttribute(flagAccessLevelRequired);
jsonCategory[attrIdAccessLevel] = tdAccessLevel.getAttribute(attrIdAccessLevel);
jsonCategory[flagActive] = DOM.getElementValueCurrent(inputActive);
jsonCategory[flagDisplayOrder] = sliderDisplayOrder.getAttribute(attrValueCurrent);
return jsonCategory;
}
hookupTableMain() {
super.hookupTableMain();
this.hookupSlidersDisplayOrderTable();
this.hookupTextareasCodeTable();
this.hookupTextareasNameTable();
this.hookupTextareasDescriptionTable();
this.hookupTdsAccessLevel();
this.hookupInputsActiveTable();
}
isRowDirty(row) {
if (row == null) return;
let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
let variations = row.querySelector('td.' + flagVariations + ' textarea');
let quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
let quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
let quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
// return isElementDirty(ddlCategory) || isElementDirty(ddlProduct) || isElementDirty(variations) || isElementDirty(quantityStock) || isElementDirty(quantityMin) || isElementDirty(quantityMax);
let isDirty = ddlCategory.classList.contains(flagDirty) || ddlProduct.classList.contains(flagDirty) || variations.classList.contains(flagDirty) ||
quantityStock.classList.contains(flagDirty) || quantityMin.classList.contains(flagDirty) || quantityMax.classList.contains(flagDirty);
if (isDirty) {
row.classList.add(flagDirty);
} else {
row.classList.remove(flagDirty);
}
return isDirty;
}
leave() {
super.leave();
}
getFiltersDefaults() {
filters = {};
filters.flagIsNotEmpty = true;
filters.flagActive = true;
return filters;
}
}