1.started removal of CDNs.\n 2. Improved modular structure for all parts of project including database.
This commit is contained in:
17
static/js/pages/page_accessibility_statement.js
Normal file
17
static/js/pages/page_accessibility_statement.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageAccessibilityStatement extends PageBase {
|
||||
static hash = hashPageAccessibilityStatement;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
46
static/js/pages/page_admin_home.js
Normal file
46
static/js/pages/page_admin_home.js
Normal file
@@ -0,0 +1,46 @@
|
||||
|
||||
import { PageBase } from "./page_base.js";
|
||||
import { router } from "../router.js";
|
||||
|
||||
export class PageAdminHome extends PageBase {
|
||||
static hash = hashPageAdminHome;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
this.hookupAdminStore();
|
||||
}
|
||||
|
||||
hookupAdminStore() {
|
||||
this.hookupButtonNavStoreProductCategories();
|
||||
this.hookupButtonNavStoreProducts();
|
||||
this.hookupButtonNavStoreProductPermutations();
|
||||
this.hookupButtonNavStoreProductPrices();
|
||||
this.hookupButtonNavStoreStockItems();
|
||||
this.hookupButtonNavStoreProductVariations();
|
||||
|
||||
this.hookupButtonNavAdminStoreStripeProducts();
|
||||
this.hookupButtonNavAdminStoreStripePrices();
|
||||
}
|
||||
hookupButtonNavAdminStoreStripeProducts() {
|
||||
initialiseEventHandler('.' + flagNavAdminStoreStripeProducts, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
router.navigateToHash(hashPageAdminStoreStripeProducts);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavAdminStoreStripePrices() {
|
||||
initialiseEventHandler('.' + flagNavAdminStoreStripePrices, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
router.navigateToHash(hashPageAdminStoreStripePrices);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
244
static/js/pages/page_base.js
Normal file
244
static/js/pages/page_base.js
Normal file
@@ -0,0 +1,244 @@
|
||||
import API from "../api.js";
|
||||
import { router } from "../router.js";
|
||||
|
||||
export class PageBase {
|
||||
constructor() {
|
||||
this.title = titlePageCurrent;
|
||||
// this.hash = hashPageCurrent;
|
||||
if (this.constructor === PageBase) {
|
||||
throw new Error("Cannot instantiate abstract class");
|
||||
}
|
||||
|
||||
if (!this.constructor.hash) {
|
||||
throw new Error(`Class ${this.constructor.name} must have a static hash attribute.`);
|
||||
}
|
||||
}
|
||||
|
||||
initialize() {
|
||||
throw new Error("Method 'init()' must be implemented.");
|
||||
}
|
||||
|
||||
sharedInitialize() {
|
||||
this.logInitialisation();
|
||||
this.hookupCommonElements();
|
||||
}
|
||||
|
||||
logInitialisation() {
|
||||
console.log('Initializing ' + this.title + ' page');
|
||||
}
|
||||
|
||||
hookupCommonElements() {
|
||||
// hookupVideos();
|
||||
this.hookupNavigation();
|
||||
this.hookupImagesLogo();
|
||||
}
|
||||
|
||||
hookupNavigation() {
|
||||
/* Can be removed: */
|
||||
console.log("hooking up navigation");
|
||||
let overlayHamburger = document.querySelector(idOverlayHamburger);
|
||||
let hamburgerOptions = overlayHamburger.querySelectorAll('div.' + flagRow);
|
||||
let countOptions = hamburgerOptions.length;
|
||||
console.log('count nav options: ', countOptions);
|
||||
// overlayHamburger.css('height', (countOptions * 27) + 'px');
|
||||
/* end of can be removed */
|
||||
|
||||
initialiseEventHandler(idButtonHamburger, flagInitialised, function(buttonToggleOverlayNavigation) {
|
||||
buttonToggleOverlayNavigation.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
let overlayHamburger = document.querySelector(idOverlayHamburger);
|
||||
if (overlayHamburger.classList.contains(flagCollapsed)) {
|
||||
overlayHamburger.classList.remove(flagCollapsed);
|
||||
overlayHamburger.classList.add(flagExpanded);
|
||||
} else {
|
||||
overlayHamburger.classList.remove(flagExpanded);
|
||||
overlayHamburger.classList.add(flagCollapsed);
|
||||
}
|
||||
// overlayHamburger.classList.add(flagInitialised);
|
||||
});
|
||||
});
|
||||
|
||||
this.hookupButtonNavHome();
|
||||
this.hookupButtonNavServices();
|
||||
this.hookupButtonNavContact();
|
||||
this.hookupButtonNavUserAccount();
|
||||
this.hookupButtonNavUserLogout();
|
||||
this.hookupButtonNavUserLogin();
|
||||
this.hookupButtonNavStoreHome();
|
||||
this.hookupButtonNavStoreProductPermutations();
|
||||
this.hookupButtonNavStoreStockItems();
|
||||
this.hookupButtonNavAdminHome();
|
||||
}
|
||||
hookupButtonNavHome() {
|
||||
initialiseEventHandler('.' + flagNavHome, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageHome);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavServices() {
|
||||
initialiseEventHandler('.' + flagNavServices, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
console.log('going to services page');
|
||||
router.navigateToHash(hashPageServices);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavContact() {
|
||||
initialiseEventHandler('.' + flagNavContact, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageContact);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavUserAccount() {
|
||||
initialiseEventHandler('.' + flagNavUserAccount, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageUserAccount);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavUserLogout() {
|
||||
initialiseEventHandler('.' + flagNavUserLogout, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageUserLogout);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavUserLogin() {
|
||||
initialiseEventHandler('.' + flagNavUserLogin, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
// router.navigateToHash(hashPageUserLogin);
|
||||
/*
|
||||
let dataRequest = {};
|
||||
dataRequest[keyCallback] = hashPageCurrent;
|
||||
console.log('sending data to user login controller: ');
|
||||
console.log(dataRequest);
|
||||
*/
|
||||
API.loginUser()
|
||||
.then(function(response) {
|
||||
if (response.Success) {
|
||||
window.app.router.navigateToUrl(response[keyCallback], null, false);
|
||||
} else {
|
||||
alertError("Error", response.Message);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavStoreHome() {
|
||||
initialiseEventHandler('.' + flagNavStoreHome, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageStoreHome);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavStoreProductCategories() {
|
||||
initialiseEventHandler('.' + flagNavStoreProductCategories, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageStoreProductCategories);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavStoreProducts() {
|
||||
initialiseEventHandler('.' + flagNavStoreProducts, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageStoreProducts);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavStoreProductPermutations() {
|
||||
initialiseEventHandler('.' + flagNavStoreProductPermutations, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageStoreProductPermutations);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavStoreProductPrices() {
|
||||
initialiseEventHandler('.' + flagNavStoreProductPrices, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageStoreProductPrices);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavStoreProductVariations() {
|
||||
initialiseEventHandler('.' + flagNavStoreProductVariations, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageStoreProductVariations);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavStoreStockItems() {
|
||||
initialiseEventHandler('.' + flagNavStoreStockItems, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageStoreStockItems);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonNavAdminHome() {
|
||||
initialiseEventHandler('.' + flagNavAdminHome, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageAdminHome);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
hookupImagesLogo() {
|
||||
let selectorImagesLogo = "img." + flagImageLogo;
|
||||
initialiseEventHandler(selectorImagesLogo, flagInitialised, function(imageLogo) {
|
||||
imageLogo.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageHome);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
hookupOverlayFromId(idOverlay) {
|
||||
initialiseEventHandler(idOverlay, flagInitialised, function(overlay) {
|
||||
overlay.querySelector('button.' + flagClose).addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
overlay.css('display', 'none');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
hookupButtonsContactUs() {
|
||||
let selectorButtonsContactUs = "." + flagNavContact;
|
||||
initialiseEventHandler(selectorButtonsContactUs, flagInitialised, function(buttonContactUs) {
|
||||
buttonContactUs.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
router.navigateToHash(hashPageContact);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
hookupVideos() {
|
||||
initialiseEventHandler('video', flagInitialised, function(video) {
|
||||
video.addEventListener("mouseover", videoPlay(video));
|
||||
video.addEventListener("mouseout", videoPause(video));
|
||||
});
|
||||
}
|
||||
|
||||
leave() {
|
||||
console.log('Leaving ' + this.title + ' page');
|
||||
_pageCurrent = null;
|
||||
if (this.constructor === PageBase) {
|
||||
throw new Error("Must implement leave() method.");
|
||||
}
|
||||
}
|
||||
}
|
||||
14
static/js/pages/page_contact.js
Normal file
14
static/js/pages/page_contact.js
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageContact extends PageBase {
|
||||
static hash = hashPageContact;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
}
|
||||
19
static/js/pages/page_home.js
Normal file
19
static/js/pages/page_home.js
Normal file
@@ -0,0 +1,19 @@
|
||||
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageHome extends PageBase {
|
||||
static hash = hashPageHome;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
this.hookupButtonsContactUs();
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
18
static/js/pages/page_license.js
Normal file
18
static/js/pages/page_license.js
Normal file
@@ -0,0 +1,18 @@
|
||||
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageLicense extends PageBase {
|
||||
static hash = hashPageLicense;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
19
static/js/pages/page_services.js
Normal file
19
static/js/pages/page_services.js
Normal file
@@ -0,0 +1,19 @@
|
||||
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageServices extends PageBase {
|
||||
static hash = hashPageServices;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
|
||||
382
static/js/pages/page_store_base.js
Normal file
382
static/js/pages/page_store_base.js
Normal file
@@ -0,0 +1,382 @@
|
||||
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageStoreHome extends PageBase {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
sharedInitialize() {
|
||||
super.sharedInitialize();
|
||||
this.hookupFiltersStore();
|
||||
this.hookupStoreHome();
|
||||
}
|
||||
|
||||
|
||||
hookupStore() {
|
||||
console.log('hookup store start');
|
||||
console.log(_pathHost);
|
||||
hookupLocalStorageStore();
|
||||
hookupBasket();
|
||||
hookupBtnsAdd2Basket();
|
||||
}
|
||||
|
||||
hookupBasket() {
|
||||
|
||||
// const containerBasket = document.querySelectorAll(idContainerBasket);
|
||||
toggleShowBtnCheckout(); // containerBasket
|
||||
hookupBtnCheckout();
|
||||
hookupBtnsPlusMinus();
|
||||
hookupBasketAddInputs();
|
||||
hookupBasketEditInputs();
|
||||
hookupBtnsDelete();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
/*
|
||||
setupPageLocalStorageNextStore(pageHashNext) {
|
||||
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);
|
||||
}
|
||||
|
||||
goToPageStore(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);
|
||||
}
|
||||
*/
|
||||
|
||||
toggleShowBtnCheckout() { // containerBasket
|
||||
|
||||
console.log("toggling checkout button");
|
||||
|
||||
const btnCheckout = document.querySelectorAll(idBtnCheckout);
|
||||
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";
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
getBasket() {
|
||||
|
||||
lsShared = getPageLocalStorage(keyShared);
|
||||
|
||||
return lsShared[keyBasket];
|
||||
}
|
||||
*/
|
||||
|
||||
hookupBtnsAdd2Basket() {
|
||||
|
||||
// let product, btn, lsPage;
|
||||
// [' + attrIdProduct + '=' + elBtn.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));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
hookupBtnCheckout() {
|
||||
|
||||
console.log("hooking up checkout button");
|
||||
|
||||
const btnCheckout = document.querySelectorAll(idBtnCheckout);
|
||||
// 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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
hookupBtnsPlusMinus() {
|
||||
|
||||
// let elBtn, elInput, newVal, product;
|
||||
const minVal = 1;
|
||||
// Basket Add
|
||||
// Increment
|
||||
document.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
|
||||
let elBtn = this;
|
||||
initialiseEventHandler(elBtn, flagInitialised, function(){
|
||||
elBtn.addEventListener("click", function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
let elInput = document.querySelectorAll(getFormProductSelector(typeFormBasketAdd, elBtn)).querySelector('input[type="number"]');
|
||||
// console.log('input selector ='); console.log('form[' + attrFormType + '=' + elBtn.attr(attrFormType) + '][' + attrIdProduct + '=' + elBtn.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 elBtn = this;
|
||||
initialiseEventHandler(elBtn, flagInitialised, function(){
|
||||
elBtn.addEventListener("click", function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// let product = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elBtn.attr(attrIdProduct) + ']');
|
||||
let elInput= document.querySelectorAll(getFormProductSelector(typeFormBasketAdd, elBtn)).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 elBtn = this;
|
||||
initialiseEventHandler(elBtn, flagInitialised, function(){
|
||||
elBtn.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
// basketItem = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elBtn.attr(attrIdProduct) + ']');
|
||||
let elInput = document.querySelectorAll(getFormProductSelector(typeFormBasketEdit, elBtn)).querySelector('input[type="number"]');
|
||||
// console.log('input selector ='); console.log('form[' + attrFormType + '=' + elBtn.attr(attrFormType) + '][' + attrIdProduct + '=' + elBtn.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 elBtn = this;
|
||||
initialiseEventHandler(elBtn, flagInitialised, function(){
|
||||
elBtn.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
let elInput= document.querySelectorAll(getFormProductSelector(typeFormBasketEdit, elBtn)).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 elBtn, 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);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
hookupBtnsDelete() {
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
191
static/js/pages/page_store_basket.js
Normal file
191
static/js/pages/page_store_basket.js
Normal file
@@ -0,0 +1,191 @@
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageStoreBasket extends PageBase {
|
||||
static hash = hashPageStoreBasket;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
this.hookupStoreCardsInfo();
|
||||
this.hookupOverlaysStoreBasketInfo();
|
||||
this.hookupBtnCheckoutSession();
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
hookupBtnCheckoutSession() {
|
||||
let btnCheckout = document.querySelectorAll(idBtnCheckout);
|
||||
btnCheckout.classList.remove(flagInitialised);
|
||||
initialiseEventHandler(idBtnCheckout, 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]
|
||||
}
|
||||
|
||||
hookupBtnFormBillingCopy() {
|
||||
|
||||
// let elBtn = document.querySelectorAll(idBtnFormBillingCopy);
|
||||
|
||||
initialiseEventHandler(idBtnFormBillingCopy, flagInitialised, function() {
|
||||
document.querySelectorAll(idBtnFormBillingCopy).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();
|
||||
}
|
||||
}
|
||||
174
static/js/pages/page_store_home.js
Normal file
174
static/js/pages/page_store_home.js
Normal file
@@ -0,0 +1,174 @@
|
||||
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageStoreHome extends PageBase {
|
||||
static hash = hashPageStoreHome;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
this.hookupFiltersStore();
|
||||
this.hookupStoreHome();
|
||||
}
|
||||
|
||||
|
||||
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")
|
||||
});
|
||||
}
|
||||
|
||||
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() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
474
static/js/pages/page_store_product_categories.js
Normal file
474
static/js/pages/page_store_product_categories.js
Normal file
@@ -0,0 +1,474 @@
|
||||
var _rowBlank = null;
|
||||
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageStoreProductCategories extends PageBase {
|
||||
static hash = hashPageStoreProductCategories;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
hookupFilters();
|
||||
hookupButtonsSaveCancel();
|
||||
hookupTableMain();
|
||||
hookupOverlayConfirm(saveCategories);
|
||||
}
|
||||
|
||||
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) {
|
||||
loadCategories();
|
||||
});
|
||||
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) {
|
||||
loadCategories();
|
||||
});
|
||||
});
|
||||
|
||||
initialiseEventHandler(idFilterIsOutOfStock, flagInitialised, function(filterIsOutOfStock) {
|
||||
filterIsOutOfStock.addEventListener("change", function(event) {
|
||||
loadCategories();
|
||||
});
|
||||
});
|
||||
|
||||
initialiseEventHandler(idFilterQuantityMin, flagInitialised, function(filterQuantityMin) {
|
||||
filterQuantityMin.addEventListener("change", function(event) {
|
||||
loadCategories();
|
||||
});
|
||||
});
|
||||
|
||||
initialiseEventHandler(idFilterQuantityMax, flagInitialised, function(filterQuantityMax) {
|
||||
filterQuantityMax.addEventListener("change", function(event) {
|
||||
loadCategories();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
loadCategories() {
|
||||
|
||||
let elForm = document.querySelectorAll(idFormFiltersCategories);
|
||||
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(hashPageStoreCategoriesPost), ajaxData, callbackLoadCategories, false, {"X-CSRFToken": ajaxData.csrf_token});
|
||||
}
|
||||
|
||||
callbackLoadCategories(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();
|
||||
loadCategories();
|
||||
});
|
||||
});
|
||||
// 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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
saveCategories() {
|
||||
|
||||
let permutations = getCategories(true);
|
||||
|
||||
if (permutations.length == 0) {
|
||||
showOverlayError('No permutations to save');
|
||||
return;
|
||||
}
|
||||
|
||||
let ajaxData = {};
|
||||
ajaxData[keyCategories] = 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(hashPageStoreCategoriesPost), ajaxData, callbackLoadCategories, false, {});
|
||||
}
|
||||
|
||||
getCategories(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) {
|
||||
handleChangeInputCategories(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));
|
||||
});
|
||||
handleChangeInputCategories(ddlProduct);
|
||||
});
|
||||
|
||||
table.querySelectorAll("change", 'td.' + flagProduct + ' select' + ',' + 'td.' + flagQuantityStock + ' input' + ',' + 'td.' + flagQuantityMin + ' input' + ',' + 'td.' + flagQuantityMax + ' input').addEventListener("change", function(event) {
|
||||
handleChangeInputCategories(this);
|
||||
});
|
||||
|
||||
table.querySelectorAll("click", 'td.' + flagVariations + ' textarea').addEventListener("change", function(event) {
|
||||
event.stopPropagation();
|
||||
handleClickCategoriesInputVariations(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();
|
||||
handleClickCategoriesVariationsButtonAdd(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();
|
||||
});
|
||||
}
|
||||
|
||||
handleChangeInputCategories(element) {
|
||||
console.log("handleChangeInputCategories");
|
||||
console.log("element value:", element.value);
|
||||
let row = getRowFromElement(element);
|
||||
let formFilters = document.querySelector(idFormFiltersCategories);
|
||||
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 = getCategories(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;
|
||||
}
|
||||
|
||||
handleClickCategoriesInputVariations(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);
|
||||
}
|
||||
|
||||
handleClickCategoriesVariationsButtonAdd(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;
|
||||
handleChangeInputCategories(variations);
|
||||
console.log("error: not implemented");
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
|
||||
474
static/js/pages/page_store_product_permutations.js
Normal file
474
static/js/pages/page_store_product_permutations.js
Normal file
@@ -0,0 +1,474 @@
|
||||
var _rowBlank = null;
|
||||
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageStoreProductPermutations extends PageBase {
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
377
static/js/pages/page_store_stock_items.js
Normal file
377
static/js/pages/page_store_stock_items.js
Normal file
@@ -0,0 +1,377 @@
|
||||
|
||||
var _rowBlank = null;
|
||||
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageStoreStockItems extends PageBase {
|
||||
static hash = hashPageStoreStockItems;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
hookupFilters();
|
||||
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[0].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(',');
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
19
static/js/pages/page_user.js
Normal file
19
static/js/pages/page_user.js
Normal file
@@ -0,0 +1,19 @@
|
||||
|
||||
import { PageBase } from "./page_base.js";
|
||||
|
||||
export class PageUser extends PageBase {
|
||||
static hash = hashPageUser;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
hookupButtonsContactUs();
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user