zino/seatmapv2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

revised cart

Browse Source
This commit is contained in:
zino
2021-05-16 00:57:20 +02:00
parent 3f8e19d0b6
commit 6a59421c8a
4 changed files with 119 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
client/src/modules/cart.ts
View File

@@ -4,9 +4,6 @@ import * as I from "../types/types";
import * as UI from "./ui"; import * as UI from "./ui";
import * as Events from "./events"; import * as Events from "./events";
type buyerType = (string | undefined)[][] | undefined;
type buyerTypeArr = (string | undefined)[];
export function addItem(inSeatObj: I.JSCSelectedSeat): void { export function addItem(inSeatObj: I.JSCSelectedSeat): void {
const color: string = `#${XMLHelper.getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0])}`; const color: string = `#${XMLHelper.getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0])}`;
const category: string | undefined = XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0]); const category: string | undefined = XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0]);
@@ -15,7 +12,7 @@ export function addItem(inSeatObj: I.JSCSelectedSeat): void {
const sectionID: string = config.state.layoutRows[inSeatObj.id][3]; const sectionID: string = config.state.layoutRows[inSeatObj.id][3];
const sectionDesc: string | undefined = XMLHelper.getSectionDescBySectionID(sectionID); const sectionDesc: string | undefined = XMLHelper.getSectionDescBySectionID(sectionID);
const seatStr: string | undefined = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`; const seatStr: string | undefined = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
const buyerTypes: buyerType = getBuyerTypesByPricescaleID(inSeatObj.data.seatsObj.id[0]); const buyerTypes: I.TypeBuyerType = XMLHelper.getBuyerTypesByPricescaleID(inSeatObj.data.seatsObj.id[0]);
const cartID: string = `cartItem-${inSeatObj.id}`; const cartID: string = `cartItem-${inSeatObj.id}`;
const dropdownBuyerTypesSelector: string = `#${cartID} .dropdownBuyerTypes`; const dropdownBuyerTypesSelector: string = `#${cartID} .dropdownBuyerTypes`;
@@ -24,6 +21,58 @@ export function addItem(inSeatObj: I.JSCSelectedSeat): void {
Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj); Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj);
} }
export function removeCartItems(): void {
jQuery("#cartItemHTML .cartItem").each(function () {
this.remove();
});
}
export function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat): void {
const index: number = config.state.selectedSeatsArr.findIndex(arr =>
arr[0] === inSeatObj.id);
config.state.selectedSeatsArr[index][1] = inSelect.value;
const buyerTypeCode = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inSelect.value);
if (buyerTypeCode)
config.state.selectedSeatsArr[index][2] = buyerTypeCode;
calcOverallPrice();
UI.setBtnCartText();
const url = XMLHelper.generateCheckoutUrl();
Events.addRedirectCheckout(url);
}
export function calcOverallPrice(): string | undefined {
if (!config.state.selectedSeatsArr.length) {
config.state.priceOverall = "0";
return "0";
}
config.state.priceOverall = sumSeatPrices();
return config.state.priceOverall;
}
export function generateCartItems(): void {
if (!config.state.selectedSeatsArr.length)
return;
for (const key in config.state.selectedSeatsObj) {
if (Object.prototype.hasOwnProperty.call(config.state.selectedSeatsObj, key)) {
const element = config.state.selectedSeatsObj[key];
addItem(element);
}
}
}
export function initModalCart(): void {
jQuery("#modalCart-overlay").hide();
Events.addCartBack();
Events.addCartClose();
}
function appendHTML(inCartID: string, inColor: string, inCategory: string | undefined, inSeatStr: string): void { function appendHTML(inCartID: string, inColor: string, inCategory: string | undefined, inSeatStr: string): void {
jQuery("#cartItemHTML .fl-html").append(` jQuery("#cartItemHTML .fl-html").append(`
<div class="cartItem" id="${inCartID}"> <div class="cartItem" id="${inCartID}">
@@ -35,81 +84,25 @@ function appendHTML(inCartID: string, inColor: string, inCategory: string | unde
} }
// todo: generalize dropdown fill options // todo: generalize dropdown fill options
function addDropdownBuyerTypeOptions(inBuyerTypes: buyerType, inSelector: string) { function addDropdownBuyerTypeOptions(inBuyerTypes: I.TypeBuyerType, inSelector: string) {
if (!inBuyerTypes) if (!inBuyerTypes)
return; return;
const dropdownBuyerTypes: HTMLElement = jQuery(inSelector).get(0);
inBuyerTypes.forEach(arr => { inBuyerTypes.forEach(arr => {
if (arr[0]) if (arr[0])
appendOption(dropdownBuyerTypes, arr) appendOption(inSelector, arr)
}); });
} }
function appendOption(inDropdownBuyerTypes: HTMLElement, inArr: buyerTypeArr) { function appendOption(inSelector: string, inArr: I.TypeBuyerTypeArr): void {
const dropdownBuyerTypes: HTMLElement = jQuery(inSelector).get(0);
let opt: HTMLOptionElement = document.createElement('option'); let opt: HTMLOptionElement = document.createElement('option');
opt.value = <string>inArr[0]; opt.value = <string>inArr[0];
opt.innerHTML = `${inArr[2]} €${inArr[1]}`; opt.innerHTML = `${inArr[2]} €${inArr[1]}`;
inDropdownBuyerTypes.appendChild(opt); dropdownBuyerTypes.appendChild(opt);
} }
function getBuyerTypesByPricescaleID(inPricescaleID: string) { function sumSeatPrices(): string {
const venueXML: I.VenueXML = config.state.inVenueXML!;
const venuePricescaleArr: I.Pricescale5[] = venueXML.price_structure[0].pricescale;
const buyerTypesArr = venuePricescaleArr.find(obj => {
return obj.id[0] === inPricescaleID;
})?.buyer_type;
if (!buyerTypesArr)
return;
const buyerTypes: buyerType = buyerTypesArr.map(arr => {
const buyerTypeDesc = venueXML.venue[0].buyer_types[0].buyer_type.find(obj => {
return obj.id[0] === arr.id[0] ? obj.desc[0] : undefined;
})?.desc[0];
return [arr.id[0], arr.price[0], buyerTypeDesc];
});
return buyerTypes;
}
export function removeCartItems() {
jQuery("#cartItemHTML .cartItem").each(function () {
this.remove();
});
}
export function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat) {
const index = config.state.selectedSeatsArr.findIndex(arr => {
return arr[0] === inSeatObj.id;
});
config.state.selectedSeatsArr[index][1] = inSelect.value;
const buyerTypeCode = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inSelect.value);
if (buyerTypeCode)
config.state.selectedSeatsArr[index][2] = buyerTypeCode;
calcOverallPrice();
UI.setBtnCartText();
const url = XMLHelper.generateCheckoutUrl();
console.log(url);
Events.addRedirectCheckout(url);
console.log(config.state);
}
export function calcOverallPrice(): string | undefined {
if (!config.state.selectedSeatsArr.length) {
config.state.priceOverall = "0";
return "0";
}
let overallPrice: number = 0; let overallPrice: number = 0;
config.state.selectedSeatsArr.forEach(arr => { config.state.selectedSeatsArr.forEach(arr => {
@@ -119,36 +112,13 @@ export function calcOverallPrice(): string | undefined {
const pricescaleID: string = selectedSeat.data.seatsObj.id[0]; const pricescaleID: string = selectedSeat.data.seatsObj.id[0];
const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(pricescaleID); const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(pricescaleID);
if (!pricescaleObj) if (pricescaleObj) {
return; const seatPrice: number | undefined = XMLHelper.getPriceByBuyerTypeID(buyertypeID, pricescaleObj);
const seatPrice: number | undefined = XMLHelper.getPriceByBuyertypeID(buyertypeID, pricescaleObj); if (seatPrice)
overallPrice += seatPrice;
if (!seatPrice) }
return;
overallPrice += seatPrice;
}); });
config.state.priceOverall = overallPrice.toFixed(2); return overallPrice.toFixed(2);
return config.state.priceOverall;
} }
export function generateCartItems() {
if (!config.state.selectedSeatsArr.length)
return;
for (const key in config.state.selectedSeatsObj) {
if (Object.prototype.hasOwnProperty.call(config.state.selectedSeatsObj, key)) {
const element = config.state.selectedSeatsObj[key];
addItem(element);
}
}
}
export function initModalCart() {
jQuery("#modalCart-overlay").hide();
Events.addCartBack();
Events.addCartClose();
}

27
client/src/modules/communication.ts
View File

@@ -2,19 +2,24 @@ import * as I from "../types/types";
import * as xml from "./xmlhelper"; import * as xml from "./xmlhelper";
// rework try/catch ? // rework try/catch ?
export function sendMessage(data: I.Message, to: string): void { export function sendMessage(inData: I.Message, inTo: string): void {
if (to === "parent") if (inTo === "parent")
window.parent.postMessage(JSON.stringify(data), '*'); window.parent.postMessage(JSON.stringify(inData), '*');
else { else {
console.log("trying to send to child"); const child: any = document.getElementById(inTo);
const child: any = document.getElementById(to);
if (child === null) { if (child !== null && child.contentWindow !== null)
console.log(`Element with ID ${to} does not exist`); child.contentWindow.postMessage(JSON.stringify(inData), "*");
return; else
} console.log(`Element with ID ${inTo} does not exist`);
// if (child === null) {
// console.log(`Element with ID ${inTo} does not exist`);
// return;
// }
if (child.contentWindow !== null) // if (child.contentWindow !== null)
child.contentWindow.postMessage(JSON.stringify(data), "*") // child.contentWindow.postMessage(JSON.stringify(inData), "*")
} }
} }

36
client/src/modules/xmlhelper.ts
View File

@@ -6,7 +6,6 @@ import * as UI from "./ui";
import { config } from "./config"; import { config } from "./config";
import * as Communication from "./communication"; import * as Communication from "./communication";
export function getXMLPromise(url: string): Promise<unknown> { export function getXMLPromise(url: string): Promise<unknown> {
return axios.get(url) return axios.get(url)
.then(function (response: void | AxiosResponse<any>) { .then(function (response: void | AxiosResponse<any>) {
@@ -150,7 +149,7 @@ export function getBuyerTypeCodeByBuyerTypeID(inBuyerTypeID: string): string | u
})?.code[0]; })?.code[0];
} }
export function getPriceByBuyertypeID(inBuyertypeID: string, inPricescaleObj: I.Pricescale5) { export function getPriceByBuyerTypeID(inBuyertypeID: string, inPricescaleObj: I.Pricescale5) {
const price = inPricescaleObj?.buyer_type.find(arr => { const price = inPricescaleObj?.buyer_type.find(arr => {
return arr.id[0] === inBuyertypeID; return arr.id[0] === inBuyertypeID;
})?.price[0]; })?.price[0];
@@ -181,4 +180,37 @@ export function generatePricescaleCSS(): string {
}); });
return (cssArr.join("\r\n")); return (cssArr.join("\r\n"));
}
export function getBuyerTypesByPricescaleID(inPricescaleID: string): I.TypeBuyerTypeArr[] | undefined {
const buyerTypesArr: I.BuyerType3[] | undefined = findBuyerTypesArrByPricescaleID(inPricescaleID);
if (buyerTypesArr) {
const buyerTypes: I.TypeBuyerType = buyerTypesArr.map(arr => {
const buyerTypeDesc: string | undefined = getBuyerTypeDesc(arr);
return [arr.id[0], arr.price[0], buyerTypeDesc];
});
return buyerTypes;
}
else
return undefined;
}
function findBuyerTypesArrByPricescaleID(inPricescaleID: string): I.BuyerType3[] | undefined {
const venueXML: I.VenueXML = config.state.inVenueXML!;
const venuePricescaleArr: I.Pricescale5[] = venueXML.price_structure[0].pricescale;
return venuePricescaleArr.find(obj =>
obj.id[0] === inPricescaleID)
?.buyer_type;
}
function getBuyerTypeDesc(inArr: I.BuyerType3): string | undefined {
const venueXML: I.VenueXML = config.state.inVenueXML!;
const buyerTypeArr: I.BuyerType2[] = venueXML.venue[0].buyer_types[0].buyer_type;
return buyerTypeArr.find(obj =>
obj.id[0] === inArr.id[0] ? obj.desc[0] : undefined)
?.desc[0];
} }

5
client/src/types/types.d.ts vendored
View File

@@ -404,4 +404,7 @@ export interface JSCSelectedSeat {
column: number; column: number;
character: string; character: string;
$node: Node; $node: Node;
} }
export type TypeBuyerType = (string | undefined)[][] | undefined;
export type TypeBuyerTypeArr = (string | undefined)[];