Feat(SQL, UI): Logic for Get-Many SQL Stored Procedures refactored to use Calc Stored Procedures and Dog Command Links page styling improved.
This commit is contained in:
198
static/js/pages/dog/basket.js
Normal file
198
static/js/pages/dog/basket.js
Normal file
@@ -0,0 +1,198 @@
|
||||
|
||||
import Events from "../../lib/events.js";
|
||||
import LocalStorage from "../../lib/local_storage.js";
|
||||
import BasePage from "../base.js";
|
||||
|
||||
export default class PageDogBasket extends BasePage {
|
||||
static hash = hashPageDogBasket;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
this.hookupDogCardsInfo();
|
||||
this.hookupOverlaysDogBasketInfo();
|
||||
this.hookupButtonCheckoutSession();
|
||||
}
|
||||
|
||||
|
||||
hookupDogCardsInfo() {
|
||||
|
||||
document.querySelectorAll(idContainerInfoDelivery).addEventListener("click", function(event) {
|
||||
if (_verbose) { console.log("delivery modal display method"); }
|
||||
document.querySelectorAll(idOverlayInfoDelivery).css('display', 'block');
|
||||
});
|
||||
|
||||
document.querySelectorAll(idContainerInfoBilling).addEventListener("click", function(event) {
|
||||
if (_verbose) { console.log("billing modal display method"); }
|
||||
document.querySelectorAll(idOverlayInfoBilling).css('display', 'block');
|
||||
});
|
||||
}
|
||||
|
||||
hookupOverlaysDogBasketInfo() {
|
||||
|
||||
let elOverlay, elForm;
|
||||
|
||||
// Delivery
|
||||
elOverlay = document.querySelectorAll(idOverlayInfoDelivery);
|
||||
elForm = elOverlay.querySelector('form');
|
||||
|
||||
hookupOverlay(elOverlay);
|
||||
Events.initialiseEventHandler(elForm, flagInitialised, function() {
|
||||
elForm.submit(function(event) {
|
||||
elForm = document.querySelectorAll(elForm);
|
||||
event.preventDefault();
|
||||
if (_verbose) { console.log("delivery submit method"); }
|
||||
|
||||
ajaxData = {};
|
||||
ajaxData[keyInfoType] = keyInfoDelivery;
|
||||
ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoDelivery);
|
||||
|
||||
ajaxJSONData('info delivery', mapHashToController(hashDogBasketInfo), ajaxData, loadInfoAddress, false);
|
||||
// document.querySelectorAll(idOverlayInfoDelivery).css('display', 'none');
|
||||
});
|
||||
});
|
||||
|
||||
// Billing
|
||||
elOverlay = document.querySelectorAll(idOverlayInfoBilling);
|
||||
elForm = elOverlay.querySelector('form');
|
||||
|
||||
hookupOverlay(elOverlay);
|
||||
Events.initialiseEventHandler(elForm, flagInitialised, function() {
|
||||
elForm.submit(function(event) {
|
||||
event.preventDefault();
|
||||
if (_verbose) { console.log("billing submit method"); }
|
||||
|
||||
ajaxData = {};
|
||||
ajaxData[keyInfoType] = keyInfoBilling;
|
||||
ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoBilling); // formData; // form.serialize();
|
||||
|
||||
ajaxJSONData('info billing', mapHashToController(hashDogBasketInfo), 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) {
|
||||
|
||||
if (_verbose) { console.log('response:'); console.log(response.data); }
|
||||
let infoType = response.data[keyInfoType];
|
||||
let infoAddress = response.data[infoType];
|
||||
LocalStorage.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');
|
||||
|
||||
ajaxData[flagForm] = convertForm2JSON(elForm); // formData; // form.serialize();
|
||||
let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
|
||||
if (_verbose) {
|
||||
console.log('converting billing form to json\nform ID: ' + elForm.id);
|
||||
console.log('ajaxData:');
|
||||
console.log(ajaxData);
|
||||
}
|
||||
ajaxData[flagForm][keyInfoIdentical] = getElementValueCurrent(elForm.querySelector('#' + keyInfoIdentical));
|
||||
for (var k in keys) {
|
||||
if (idOverlayInfo == idOverlayInfoBilling && ajaxData[flagForm][keyInfoIdentical]) {
|
||||
ajaxData[flagForm][keys[k]] = getElementValueCurrent(elFormDelivery.querySelector('#' + keys[k]));
|
||||
} else {
|
||||
ajaxData[flagForm][keys[k]] = getElementValueCurrent(elForm.querySelector('#' + keys[k]));
|
||||
}
|
||||
}
|
||||
if (_verbose) {
|
||||
console.log('ajaxData:');
|
||||
console.log(ajaxData);
|
||||
}
|
||||
return ajaxData;
|
||||
}
|
||||
|
||||
hookupButtonCheckoutSession() {
|
||||
let btnCheckout = document.querySelectorAll(idButtonCheckout);
|
||||
btnCheckout.classList.remove(flagInitialised);
|
||||
Events.initialiseEventHandler(idButtonCheckout, flagInitialised, function() {
|
||||
|
||||
btnCheckout.removeEventListener("click");
|
||||
btnCheckout.addEventListener("click", function(event) {
|
||||
|
||||
|
||||
//setupPageLocalStorageNext(hashPageDogBasket);
|
||||
let basket = LocalStorage.getLocalStorage(keyBasket);
|
||||
// goToPage(hashPageDogBasket);
|
||||
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(hashPageDogCheckout), ajaxData, handleResponseCheckout, false);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
handleResponseCheckout(response) {
|
||||
// let tmpData = {};
|
||||
// tmpData[keyIdCheckout] = response.data[keyIdCheckout]
|
||||
// goToPage(hashPageDogCheckoutSession, tmpData);
|
||||
window.location.href = response.data[keyUrlCheckout]
|
||||
}
|
||||
|
||||
hookupButtonFormBillingCopy() {
|
||||
|
||||
// let elButton = document.querySelectorAll(idButtonFormBillingCopy);
|
||||
|
||||
Events.initialiseEventHandler(idButtonFormBillingCopy, flagInitialised, function() {
|
||||
document.querySelectorAll(idButtonFormBillingCopy).addEventListener("click", function (event) {
|
||||
|
||||
let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
|
||||
|
||||
let elFormBilling = document.querySelectorAll(idOverlayInfoBilling).querySelector('form');
|
||||
let elFormDelivery = document.querySelectorAll(idOverlayInfoDelivery).querySelector('form');
|
||||
|
||||
for (var k in keys) {
|
||||
elFormBilling.querySelector('#' + keys[k]).value = getElementValueCurrent(elFormDelivery.querySelector('#' + keys[k]));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user