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

before remove getcolumnsnaming

Browse Source
This commit is contained in:
zino
2021-05-15 22:57:15 +02:00
parent 51e78042b5
commit 39aa73b034
10 changed files with 138 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,21 +4,21 @@ 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";
export function addItem(inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) { export function addItem(inSeatObj: I.JSCSelectedSeat) {
const color = `#${XMLHelper.getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0], inVenueXML)}`; const color = `#${XMLHelper.getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0])}`;
const category = XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0], inVenueXML); const category = XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0]);
const seat = config.state.layoutRows[inSeatObj.id][5]; const seat = config.state.layoutRows[inSeatObj.id][5];
const row = config.state.layoutRows[inSeatObj.id][4]; const row = config.state.layoutRows[inSeatObj.id][4];
const sectionID = config.state.layoutRows[inSeatObj.id][3]; const sectionID = config.state.layoutRows[inSeatObj.id][3];
const sectionDesc = XMLHelper.getSectionDescBySectionID(inVenueXML, sectionID); const sectionDesc = XMLHelper.getSectionDescBySectionID(sectionID);
const seatStr = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`; const seatStr = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
const buyerTypes: (string | undefined)[][] | undefined = getBuyerTypesByPricescaleID(inSeatObj.data.seatsObj.id[0], inVenueXML); const buyerTypes: (string | undefined)[][] | undefined = getBuyerTypesByPricescaleID(inSeatObj.data.seatsObj.id[0]);
const cartId = `cartItem-${inSeatObj.id}`; const cartId = `cartItem-${inSeatObj.id}`;
const dropdownBuyerTypesSelector = `#${cartId} .dropdownBuyerTypes`; const dropdownBuyerTypesSelector = `#${cartId} .dropdownBuyerTypes`;
appendHTML(cartId, color, category, seatStr); appendHTML(cartId, color, category, seatStr);
addDropdownBuyerTypesOptions(buyerTypes, dropdownBuyerTypesSelector); addDropdownBuyerTypesOptions(buyerTypes, dropdownBuyerTypesSelector);
Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj, inVenueXML, inInputsWithValue); Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj);
} }
function appendHTML(inCartId: string, inColor: string, inCategory: string | undefined, inSeatStr: string) { function appendHTML(inCartId: string, inColor: string, inCategory: string | undefined, inSeatStr: string) {
@@ -49,15 +49,9 @@ function addDropdownBuyerTypesOptions(inBuyerTypes: (string | undefined)[][] | u
}); });
} }
// function appendOptionDropdownBuyerTypesOptions() { function getBuyerTypesByPricescaleID(inPricescaleID: string) {
// let opt = document.createElement('option'); const venueXML = config.state.inVenueXML!;
// opt.value = arr[0]; const venuePricescaleArr = venueXML.price_structure[0].pricescale;
// opt.innerHTML = `${arr[2]} €${arr[1]}`;
// dropdownBuyerTypes.appendChild(opt);
// }
function getBuyerTypesByPricescaleID(inPricescaleID: string, inVenueXML: I.VenueXML) {
const venuePricescaleArr = inVenueXML.price_structure[0].pricescale;
const buyerTypesArr = venuePricescaleArr.find(obj => { const buyerTypesArr = venuePricescaleArr.find(obj => {
return obj.id[0] === inPricescaleID; return obj.id[0] === inPricescaleID;
})?.buyer_type; })?.buyer_type;
@@ -66,7 +60,7 @@ function getBuyerTypesByPricescaleID(inPricescaleID: string, inVenueXML: I.Venue
return; return;
const buyerTypes: (string | undefined)[][] = buyerTypesArr.map(arr => { const buyerTypes: (string | undefined)[][] = buyerTypesArr.map(arr => {
const buyerTypeDesc = inVenueXML.venue[0].buyer_types[0].buyer_type.find(obj => { const buyerTypeDesc = venueXML.venue[0].buyer_types[0].buyer_type.find(obj => {
return obj.id[0] === arr.id[0] ? obj.desc[0] : undefined; return obj.id[0] === arr.id[0] ? obj.desc[0] : undefined;
})?.desc[0]; })?.desc[0];
@@ -82,29 +76,29 @@ export function removeCartItems() {
}); });
} }
export function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) { export function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat) {
const index = config.state.selectedSeatsArr.findIndex(arr => { const index = config.state.selectedSeatsArr.findIndex(arr => {
return arr[0] === inSeatObj.id; return arr[0] === inSeatObj.id;
}); });
config.state.selectedSeatsArr[index][1] = inSelect.value; config.state.selectedSeatsArr[index][1] = inSelect.value;
const buyerTypeCode = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inVenueXML, inSelect.value); const buyerTypeCode = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inSelect.value);
if (buyerTypeCode) if (buyerTypeCode)
config.state.selectedSeatsArr[index][2] = buyerTypeCode; config.state.selectedSeatsArr[index][2] = buyerTypeCode;
calcOverallPrice(inVenueXML); calcOverallPrice();
UI.setBtnCartText(); UI.setBtnCartText();
const url = XMLHelper.generateCheckoutUrl(inInputsWithValue); const url = XMLHelper.generateCheckoutUrl();
console.log(url); console.log(url);
Events.addRedirectCheckout(url); Events.addRedirectCheckout(url);
console.log(config.state); console.log(config.state);
} }
export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined { export function calcOverallPrice(): string | undefined {
if (!config.state.selectedSeatsArr.length) { if (!config.state.selectedSeatsArr.length) {
config.state.priceOverall = "0"; config.state.priceOverall = "0";
return "0"; return "0";
@@ -117,7 +111,7 @@ export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined {
const buyertypeID: string = arr[1]; const buyertypeID: string = arr[1];
const selectedSeat: I.JSCSelectedSeat = config.state.selectedSeatsObj[seatID]; const selectedSeat: I.JSCSelectedSeat = config.state.selectedSeatsObj[seatID];
const pricescaleID: string = selectedSeat.data.seatsObj.id[0]; const pricescaleID: string = selectedSeat.data.seatsObj.id[0];
const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(inVenueXML, pricescaleID); const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(pricescaleID);
if (!pricescaleObj) if (!pricescaleObj)
return; return;
@@ -135,14 +129,14 @@ export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined {
return config.state.priceOverall; return config.state.priceOverall;
} }
export function generateCartItems(inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) { export function generateCartItems() {
if (!config.state.selectedSeatsArr.length) if (!config.state.selectedSeatsArr.length)
return; return;
for (const key in config.state.selectedSeatsObj) { for (const key in config.state.selectedSeatsObj) {
if (Object.prototype.hasOwnProperty.call(config.state.selectedSeatsObj, key)) { if (Object.prototype.hasOwnProperty.call(config.state.selectedSeatsObj, key)) {
const element = config.state.selectedSeatsObj[key]; const element = config.state.selectedSeatsObj[key];
addItem(element, inVenueXML, inInputsWithValue); addItem(element);
} }
} }
} }

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

@@ -68,17 +68,6 @@ export function needSeatmapXML(inID: string) {
sendMessage(message, "parent"); sendMessage(message, "parent");
} }
// export function showSeatmapBtnParent(): void {
// console.log("child completely ready");
// const message: I.Message = {
// message: null,
// from: "child",
// event: "child_seatmap_ready",
// date: Date.now()
// };
// sendMessage(message, "parent");
// }
export function cancelCheckout(inUrl: string) { export function cancelCheckout(inUrl: string) {
// use fetch instead of axios because of 302 redirect // use fetch instead of axios because of 302 redirect
// see https://github.com/axios/axios/issues/932 // see https://github.com/axios/axios/issues/932

7
client/src/modules/config.ts
View File

@@ -22,6 +22,11 @@ export const config: I.Config = {
selectedSeatsArr: [], selectedSeatsArr: [],
selectedSeatsObj: {}, selectedSeatsObj: {},
layoutRows: {}, layoutRows: {},
isValidSeatSelection: false isValidSeatSelection: false,
inputsWithValue: undefined,
seatmap: undefined,
panzoom: undefined,
inVenueXML: undefined,
seatmapXML: undefined,
} }
} }

22
client/src/modules/events.ts
View File

@@ -23,14 +23,14 @@ export function addDropdownSeatmap(inPanzoom: any) {
} }
} }
export function addModalCart(inInputsWithValue: I.InputsWithValue) { export function addModalCart() {
const btnCart: HTMLElement | undefined = jQuery("#modalCart .uabb-button").get(0); const btnCart: HTMLElement | undefined = jQuery("#modalCart .uabb-button").get(0);
if (btnCart) { if (btnCart) {
btnCart.addEventListener("click", () => { btnCart.addEventListener("click", () => {
if (!config.state.selectedSeatsArr.length) if (!config.state.selectedSeatsArr.length)
UI.showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`); UI.showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`);
else if (config.state.cartChanged) else if (config.state.cartChanged)
XMLHelper.isValidSeatSelection(inInputsWithValue); XMLHelper.isValidSeatSelection();
else if (!config.state.cartChanged && config.state.isValidSeatSelection) else if (!config.state.cartChanged && config.state.isValidSeatSelection)
UI.showModalCart(); UI.showModalCart();
else if (!config.state.cartChanged && !config.state.isValidSeatSelection) else if (!config.state.cartChanged && !config.state.isValidSeatSelection)
@@ -77,7 +77,9 @@ export function addCartBack() {
} }
} }
export function dropdownLegendOnChange(inSelector: string, inSeatmap: any, inSeatmapXML: any) { export function dropdownLegendOnChange(inSelector: string) {
const seatmap = config.state.seatmap;
const seatmapXML = config.state.seatmapXML;
const dropdownLegend = jQuery(inSelector).get(0); const dropdownLegend = jQuery(inSelector).get(0);
dropdownLegend.addEventListener("change", function (this: HTMLSelectElement) { dropdownLegend.addEventListener("change", function (this: HTMLSelectElement) {
const value: string = this.value; const value: string = this.value;
@@ -86,20 +88,20 @@ export function dropdownLegendOnChange(inSelector: string, inSeatmap: any, inSea
UI.changeDropdownLegendBGColor(inSelector, value, className); UI.changeDropdownLegendBGColor(inSelector, value, className);
if (value === "all") { if (value === "all") {
inSeatmap.find('unavailable').status('available'); seatmap.find('unavailable').status('available');
JSC.setUnavailableSeats(inSeatmapXML, inSeatmap); JSC.setUnavailableSeats(seatmapXML, seatmap);
} }
else { else {
inSeatmap.find('available').status('unavailable'); seatmap.find('available').status('unavailable');
JSC.activateSeatsBySectionID(inSeatmapXML, inSeatmap, value); JSC.activateSeatsBySectionID(value);
JSC.setUnavailableSeats(inSeatmapXML, inSeatmap); JSC.setUnavailableSeats(seatmapXML, seatmap);
} }
}); });
} }
export function addCartDropdownBuyerTypes(inSelector: string, inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) { export function addCartDropdownBuyerTypes(inSelector: string, inSeatObj: I.JSCSelectedSeat) {
jQuery(inSelector).on('change', function (this: HTMLSelectElement) { jQuery(inSelector).on('change', function (this: HTMLSelectElement) {
Cart.changedDropdownBuyerType(this, inSeatObj, inVenueXML, inInputsWithValue); Cart.changedDropdownBuyerType(this, inSeatObj);
}); });
} }

33
client/src/modules/jsc.ts
View File

@@ -4,8 +4,9 @@ import * as State from "./state";
import * as Cart from "./cart"; import * as Cart from "./cart";
import * as UI from "./ui"; import * as UI from "./ui";
export function getSeats(inXML: any): I.JSCSeats { export function getSeats(): I.JSCSeats {
const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale; const seatmapXML = config.state.seatmapXML;
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
let object: any = {}; let object: any = {};
for (let key in pricescaleArr) { for (let key in pricescaleArr) {
@@ -22,8 +23,10 @@ export function getSeats(inXML: any): I.JSCSeats {
return seatmapInitSeats; return seatmapInitSeats;
} }
export function activateSeatsBySectionID(inXML: any, seatmap: any, inValue: string,) { export function activateSeatsBySectionID(inValue: string) {
const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale; const seatmapXML = config.state.seatmapXML;
const seatmap = config.state.seatmap;
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
pricescaleArr.forEach(element => { pricescaleArr.forEach(element => {
if (element.id[0] === inValue) { if (element.id[0] === inValue) {
@@ -33,8 +36,9 @@ export function activateSeatsBySectionID(inXML: any, seatmap: any, inValue: stri
}); });
} }
export function getRowsNaming(inXML: any): string[] { export function getRowsNaming(): string[] {
const layout: I.SeatmapLayout = inXML.seatmap[0].layouts[0].layout[0]; const seatmapXML = config.state.seatmapXML;
const layout: I.SeatmapLayout = seatmapXML.seatmap[0].layouts[0].layout[0];
const height: number = parseInt(layout.height[0]); const height: number = parseInt(layout.height[0]);
// return Array.from({ length: height }, (_, i: number) => i + 1); // return Array.from({ length: height }, (_, i: number) => i + 1);
const namingArr = Array.from({ length: height }, (_) => ""); const namingArr = Array.from({ length: height }, (_) => "");
@@ -111,11 +115,12 @@ export function getRowsNaming(inXML: any): string[] {
// return namingArr; // return namingArr;
// } // }
export function generateMap(inXML: any): string[] { export function generateMap(): string[] {
const layout: I.SeatmapLayout = inXML.seatmap[0].layouts[0].layout[0]; const seatmapXML = config.state.seatmapXML;
const layout: I.SeatmapLayout = seatmapXML.seatmap[0].layouts[0].layout[0];
const rows: I.LayoutRow2[] = layout.rows[0].row; const rows: I.LayoutRow2[] = layout.rows[0].row;
const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale; const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
const availabilityArr: I.JSCAvailability = inXML.seatmap[0].view_modes[0].view_mode[0].availability[0]; const availabilityArr: I.JSCAvailability = seatmapXML.seatmap[0].view_modes[0].view_mode[0].availability[0];
// Form: arrMatrix[Y][X] // Form: arrMatrix[Y][X]
let arrMatrix: string[][] = createArrMatrix(parseInt(layout.height[0]), parseInt(layout.width[0]), "_"); let arrMatrix: string[][] = createArrMatrix(parseInt(layout.height[0]), parseInt(layout.width[0]), "_");
@@ -310,7 +315,7 @@ export function selectSeatsInCart(inSeatmap: any) {
}); });
} }
export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: string[], inSeats: I.JSCSeats, inLegend: I.JSCLegend, inSeatmap: any, inVenueXML: I.VenueXML): void { export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: string[], inSeats: I.JSCSeats, inLegend: I.JSCLegend, inSeatmap: any): void {
const containerSeatmap: any = (<any>window).jQuery(inSelector); const containerSeatmap: any = (<any>window).jQuery(inSelector);
// console.log(inSeatmapInitMap); // console.log(inSeatmapInitMap);
@@ -335,8 +340,8 @@ export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: st
if (State.maximumSelectedSeatsReached(selectedSeat, inSeatmap)) if (State.maximumSelectedSeatsReached(selectedSeat, inSeatmap))
return "available"; return "available";
State.addSeatToState(inVenueXML, selectedSeat); State.addSeatToState(selectedSeat);
Cart.calcOverallPrice(inVenueXML); Cart.calcOverallPrice();
UI.setBtnCartText(); UI.setBtnCartText();
return "selected"; return "selected";
@@ -345,7 +350,7 @@ export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: st
const selectedSeat: I.JSCSelectedSeat = this.settings; const selectedSeat: I.JSCSelectedSeat = this.settings;
State.removeSeatFromState(selectedSeat); State.removeSeatFromState(selectedSeat);
Cart.calcOverallPrice(inVenueXML); Cart.calcOverallPrice();
UI.setBtnCartText(); UI.setBtnCartText();
console.log(config.state.selectedSeatsArr); console.log(config.state.selectedSeatsArr);

6
client/src/modules/state.ts
View File

@@ -3,7 +3,7 @@ import * as I from "../types/types";
import * as XMLHelper from "./xmlhelper"; import * as XMLHelper from "./xmlhelper";
import * as UI from "./ui"; import * as UI from "./ui";
export function addSeatToState(inVenueXML: I.VenueXML, inSelectedSeat: I.JSCSelectedSeat) { export function addSeatToState(inSelectedSeat: I.JSCSelectedSeat) {
const seatID: string = inSelectedSeat.id; const seatID: string = inSelectedSeat.id;
const seatObj: I.StateJSCSelectedSeats = { const seatObj: I.StateJSCSelectedSeats = {
[seatID]: inSelectedSeat [seatID]: inSelectedSeat
@@ -12,7 +12,7 @@ export function addSeatToState(inVenueXML: I.VenueXML, inSelectedSeat: I.JSCSele
config.state.selectedSeatsObj = { ...config.state.selectedSeatsObj, ...seatObj }; config.state.selectedSeatsObj = { ...config.state.selectedSeatsObj, ...seatObj };
const pricescaleID: string = config.state.selectedSeatsObj[seatID].data.seatsObj.id[0]; const pricescaleID: string = config.state.selectedSeatsObj[seatID].data.seatsObj.id[0];
const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(inVenueXML, pricescaleID); const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(pricescaleID);
console.log(pricescaleObj); console.log(pricescaleObj);
if (!pricescaleObj) { if (!pricescaleObj) {
@@ -23,7 +23,7 @@ export function addSeatToState(inVenueXML: I.VenueXML, inSelectedSeat: I.JSCSele
// get id and code of first buyer type // get id and code of first buyer type
const firstBuyerTypeID: string = pricescaleObj.buyer_type[0].id[0]; const firstBuyerTypeID: string = pricescaleObj.buyer_type[0].id[0];
// const firstPriceStructureCode: string = inVenueXML.price_structure[0].code[0]; // todo: code of first price_structure always correct? what about multiple schablonen? // const firstPriceStructureCode: string = inVenueXML.price_structure[0].code[0]; // todo: code of first price_structure always correct? what about multiple schablonen?
const buyerTypeCode: string | undefined = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inVenueXML, firstBuyerTypeID); const buyerTypeCode: string | undefined = XMLHelper.getBuyerTypeCodeByBuyerTypeID(firstBuyerTypeID);
if (buyerTypeCode) { if (buyerTypeCode) {
config.state.selectedSeatsArr.push([seatID, firstBuyerTypeID, buyerTypeCode]); config.state.selectedSeatsArr.push([seatID, firstBuyerTypeID, buyerTypeCode]);

8
client/src/modules/ui.ts
View File

@@ -200,21 +200,21 @@ export function showSeatmapBtnParent(): void {
Communication.sendEventToParent("child_seatmap_ready"); Communication.sendEventToParent("child_seatmap_ready");
} }
export function createSeatTooltips(inVenueXML: I.VenueXML) { export function createSeatTooltips() {
new jBox("Tooltip", { new jBox("Tooltip", {
attach: jQuery(".seatCharts-seat"), attach: jQuery(".seatCharts-seat"),
onOpen: function (this: any) { onOpen: function (this: any) {
showSeatTooltip(this, inVenueXML); showSeatTooltip(this);
}, },
}); });
} }
function showSeatTooltip(jBox: any, inVenueXML: I.VenueXML): void { function showSeatTooltip(jBox: any): void {
const seatID: string = jBox.source[0].id; const seatID: string = jBox.source[0].id;
const seat = config.state.layoutRows[seatID][5]; const seat = config.state.layoutRows[seatID][5];
const row = config.state.layoutRows[seatID][4]; const row = config.state.layoutRows[seatID][4];
const sectionID = config.state.layoutRows[seatID][3]; const sectionID = config.state.layoutRows[seatID][3];
const sectionDesc = XMLHelper.getSectionDescBySectionID(inVenueXML, sectionID); const sectionDesc = XMLHelper.getSectionDescBySectionID(sectionID);
const tooltipContent = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`; const tooltipContent = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
jBox.setContent(tooltipContent); jBox.setContent(tooltipContent);

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

@@ -30,15 +30,12 @@ export function getXMLPromise(url: string): Promise<unknown> {
}) })
} }
export function getSeatmapListing(inVenueXML: I.VenueXML): I.Seatmap[] { export function getEventInfo(): I.EventInfo {
return inVenueXML.seatmap_config[0].seatmap; const venueXML = config.state.inVenueXML!;
} const sectionArr = venueXML.master_config[0].section_inventory[0].section;
const eventObj: I.Event = venueXML.event[0];
export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo { const event = venueXML.event[0];
const sectionArr = inVenueXML.master_config[0].section_inventory[0].section; const venue_config = venueXML.venue_config[0];
const eventObj: I.Event = inVenueXML.event[0];
const event = inVenueXML.event[0];
const venue_config = inVenueXML.venue_config[0];
const dateObj: Date = new Date(parseInt(event.year[0]), parseInt(event.month[0])-1, parseInt(event.day[0]), parseInt(event.hour[0]), parseInt(event.minute[0])); const dateObj: Date = new Date(parseInt(event.year[0]), parseInt(event.month[0])-1, parseInt(event.day[0]), parseInt(event.hour[0]), parseInt(event.minute[0]));
const start: string[] = [ dateObj.toLocaleString(["de-DE"], { weekday: "long", day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", timeZoneName: "short" }) ]; const start: string[] = [ dateObj.toLocaleString(["de-DE"], { weekday: "long", day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", timeZoneName: "short" }) ];
const weekday = [ Utils.getDayName(dateObj, "de-DE") ]; const weekday = [ Utils.getDayName(dateObj, "de-DE") ];
@@ -63,9 +60,10 @@ export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo {
return eventInfo; return eventInfo;
} }
export function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) { export function isValidSeatSelection() {
const inputsWithValue = config.state.inputsWithValue!;
console.log("checking seat selection"); console.log("checking seat selection");
console.log(inInputsWithValue); console.log(inputsWithValue);
jQuery("#modalCart-overlay").hide(); jQuery("#modalCart-overlay").hide();
if (!config.state.selectedSeatsArr.length) if (!config.state.selectedSeatsArr.length)
@@ -76,7 +74,7 @@ export function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) {
jQuery("#modalCart i").hide(); jQuery("#modalCart i").hide();
jQuery("#modalCart .uabb-button-text").addClass("dot-pulse"); jQuery("#modalCart .uabb-button-text").addClass("dot-pulse");
const url = generateCheckoutUrl(inInputsWithValue); const url = generateCheckoutUrl();
// const selectedSeatIndexes: string = generateSelectedSeatIndexes(); // const selectedSeatIndexes: string = generateSelectedSeatIndexes();
// const url: string = `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue.user_context}&pid=${inputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`; // const url: string = `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue.user_context}&pid=${inputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`;
@@ -92,13 +90,15 @@ export function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) {
Communication.sendMessage(message, "parent"); Communication.sendMessage(message, "parent");
} }
export function generateCheckoutUrl(inInputsWithValue: I.InputsWithValue): string | undefined { export function generateCheckoutUrl(): string | undefined {
console.log(inInputsWithValue); const inputsWithValue = config.state.inputsWithValue!;
console.log(inputsWithValue);
if (!config.state.selectedSeatsArr.length) if (!config.state.selectedSeatsArr.length)
return; return;
else { else {
const selectedSeatIndexes: string = generateSelectedSeatIndexes(); const selectedSeatIndexes: string = generateSelectedSeatIndexes();
return `${inInputsWithValue["ticketPurchaseUrl"]}?user_context=${inInputsWithValue.user_context}&pid=${inInputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`; return `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue.user_context}&pid=${inputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`;
} }
} }
@@ -108,8 +108,9 @@ function generateSelectedSeatIndexes(): string {
})).join("|"); })).join("|");
} }
export function getSectionDescBySectionID(inVenueXML: I.VenueXML, sectionID: string): string | undefined { export function getSectionDescBySectionID(sectionID: string): string | undefined {
const sectionArr = inVenueXML.master_config[0].section_config[0].section; const venueXML = config.state.inVenueXML!;
const sectionArr = venueXML.master_config[0].section_config[0].section;
const sectionDesc = sectionArr.find(arr => { const sectionDesc = sectionArr.find(arr => {
return sectionID === arr.id[0]; return sectionID === arr.id[0];
@@ -118,18 +119,20 @@ export function getSectionDescBySectionID(inVenueXML: I.VenueXML, sectionID: str
return sectionDesc; return sectionDesc;
} }
export function processSMAP(inInputsWithValue: I.InputsWithValue) { export function processSMAP() {
if (!inInputsWithValue.smap) const inputsWithValue = config.state.inputsWithValue!;
if (!inputsWithValue.smap)
return; return;
const smapArr = inInputsWithValue.smap.split("").map(Number); const smapArr = inputsWithValue.smap.split("").map(Number);
if (!smapArr[0]) if (!smapArr[0])
jQuery("#eventInfoCapacity").hide(); jQuery("#eventInfoCapacity").hide();
} }
export function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2Properties, pricescaleID: string, inVenueXML: I.VenueXML) { export function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2Properties, pricescaleID: string) {
const venuePricescaleArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale; const venueXML = config.state.inVenueXML!;
const venuePricescaleArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale;
return venuePricescaleArr.find(obj => { return venuePricescaleArr.find(obj => {
if (obj.id[0] === pricescaleID) if (obj.id[0] === pricescaleID)
@@ -139,8 +142,9 @@ export function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2
})?.[property][0]; })?.[property][0];
} }
export function getBuyerTypeCodeByBuyerTypeID(inVenueXML: I.VenueXML, inBuyerTypeID: string): string | undefined { export function getBuyerTypeCodeByBuyerTypeID(inBuyerTypeID: string): string | undefined {
const venueBuyerTypeArr = inVenueXML.venue[0].buyer_types[0].buyer_type; const venueXML = config.state.inVenueXML!;
const venueBuyerTypeArr = venueXML.venue[0].buyer_types[0].buyer_type;
return venueBuyerTypeArr.find(arr => { return venueBuyerTypeArr.find(arr => {
return inBuyerTypeID === arr.id[0]; return inBuyerTypeID === arr.id[0];
})?.code[0]; })?.code[0];
@@ -157,15 +161,17 @@ export function getPriceByBuyertypeID(inBuyertypeID: string, inPricescaleObj: I.
return undefined; return undefined;
} }
export function getVenuePriceStructurePropertyByPricescaleID(inVenueXML: I.VenueXML, inID: string): I.Pricescale5 | undefined { export function getVenuePriceStructurePropertyByPricescaleID(inID: string): I.Pricescale5 | undefined {
const venuePricescaleArr: I.Pricescale5[] = inVenueXML.price_structure[0].pricescale; const venueXML = config.state.inVenueXML!;
const venuePricescaleArr: I.Pricescale5[] = venueXML.price_structure[0].pricescale;
return venuePricescaleArr.find(obj => { return venuePricescaleArr.find(obj => {
return obj.id[0] === inID; return obj.id[0] === inID;
}); });
} }
export function generatePricescaleCSS(inVenueXML: I.VenueXML): string { export function generatePricescaleCSS(): string {
const venuePricescalesArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale; const venueXML = config.state.inVenueXML!;
const venuePricescalesArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale;
let cssArr: string[] = []; let cssArr: string[] = [];
venuePricescalesArr.forEach(element => { venuePricescalesArr.forEach(element => {

63
client/src/seatmap.ts
View File

@@ -6,16 +6,15 @@ import * as UI from "./modules/ui";
import * as JSC from "./modules/jsc"; import * as JSC from "./modules/jsc";
import { config } from "./modules/config"; import { config } from "./modules/config";
import Utils from "./modules/utils"; import Utils from "./modules/utils";
import { PanzoomObject } from "@panzoom/panzoom";
import * as Events from "./modules/events"; import * as Events from "./modules/events";
require("jbox/dist/jBox.all.css"); require("jbox/dist/jBox.all.css");
import * as Cart from "./modules/cart"; import * as Cart from "./modules/cart";
let inputsWithValue: I.InputsWithValue; // let inputsWithValue: I.InputsWithValue;
let seatmap: any; // let seatmap: any;
let panzoom: PanzoomObject | undefined; // let panzoom: PanzoomObject | undefined;
let inVenueXML: I.VenueXML; // let inVenueXML: I.VenueXML;
let seatmapXML: any; // let seatmapXML: any;
window.addEventListener('load', () => { window.addEventListener('load', () => {
// Inject JSC (jQuery Seat Charts) // Inject JSC (jQuery Seat Charts)
@@ -36,15 +35,17 @@ window.addEventListener('load', () => {
// Add event listeners // Add event listeners
Events.addCloseModal(); Events.addCloseModal();
Events.addModalCart(inputsWithValue); Events.addModalCart();
Events.addDropdownSeatmap(panzoom); Events.addDropdownSeatmap(config.state.panzoom);
}); });
// Hide header when height of window is smaller than ... // Hide header when height of window is smaller than ...
// Note: Cannot determine width of inner iframe, therefore need to use window.innerHeight // Note: Cannot determine width of inner iframe, therefore need to use window.innerHeight
window.onresize = function () { window.onresize = function () {
const panzoom = config.state.panzoom;
const innerHeight = window.innerHeight; const innerHeight = window.innerHeight;
if (innerHeight < 576) { if (innerHeight < 576) {
console.log("small"); console.log("small");
jQuery("#containerEventInfoRow").hide(); jQuery("#containerEventInfoRow").hide();
@@ -74,18 +75,20 @@ function messageHandler(inE: any) {
} }
case "parent_init_sendVenueXML": { case "parent_init_sendVenueXML": {
inVenueXML = data.message.map_response; config.state.inVenueXML = data.message.map_response;
const venueXML = config.state.inVenueXML!;
const inputsWithValue = config.state.inputsWithValue!;
// Generate pricescale css classes // Generate pricescale css classes
const css = XMLHelper.generatePricescaleCSS(inVenueXML); const css = XMLHelper.generatePricescaleCSS();
Utils.inject(css, "cssCustom", "body"); Utils.inject(css, "cssCustom", "body");
// Fill event info // Fill event info
const eventInfo = XMLHelper.getEventInfo(inVenueXML); const eventInfo = XMLHelper.getEventInfo();
UI.setEventInfo(eventInfo, inputsWithValue); UI.setEventInfo(eventInfo, inputsWithValue);
// Fill select dropdown // Fill select dropdown
const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(inVenueXML); const seatmapListing: I.Seatmap[] = venueXML.seatmap_config[0].seatmap;
UI.setOptionSelect(seatmapListing, "dropdownSeatmap"); UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
// Display first seatmapXML // Display first seatmapXML
@@ -100,29 +103,34 @@ function messageHandler(inE: any) {
} }
case "parent_init_sendInputsWithValue": { case "parent_init_sendInputsWithValue": {
inputsWithValue = data.message; config.state.inputsWithValue = data.message;
UI.changeVenueImage(inputsWithValue); const inputsWithValue = config.state.inputsWithValue!;
UI.changeVenueImage(inputsWithValue!);
Communication.sendEventToParent("child_init_needVenueXML"); Communication.sendEventToParent("child_init_needVenueXML");
break; break;
} }
case "parent_sendSeatmapXML": { case "parent_sendSeatmapXML": {
seatmapXML = data.message.map_response; config.state.seatmapXML = data.message.map_response;
const map: string[] = JSC.generateMap(seatmapXML); const seatmapXML = config.state.seatmapXML;
const rowsNaming: string[] = JSC.getRowsNaming(seatmapXML); const venueXML = config.state.inVenueXML!;
const seats: I.JSCSeats = JSC.getSeats(seatmapXML); const seatmap = config.state.seatmap;
const legend: I.JSCLegend = JSC.generateLegend(inVenueXML, seatmapXML, "#JSCLegendInner"); const map: string[] = JSC.generateMap();
const rowsNaming: string[] = JSC.getRowsNaming();
const seats: I.JSCSeats = JSC.getSeats();
const legend: I.JSCLegend = JSC.generateLegend(venueXML, seatmapXML, "#JSCLegendInner");
JSC.addSeatmap("#containerSeatmapInner", map, rowsNaming, seats, legend, seatmap, inVenueXML); JSC.addSeatmap("#containerSeatmapInner", map, rowsNaming, seats, legend, seatmap);
JSC.setUnavailableSeats(seatmapXML, seatmap); JSC.setUnavailableSeats(seatmapXML, seatmap);
JSC.selectSeatsInCart(seatmap); JSC.selectSeatsInCart(seatmap);
UI.convertLegendToDropdown("dropdownLegend"); UI.convertLegendToDropdown("dropdownLegend");
Events.dropdownLegendOnChange("#dropdownLegend", seatmap, seatmapXML); Events.dropdownLegendOnChange("#dropdownLegend");
JSC.addTrims(seatmapXML); JSC.addTrims(seatmapXML);
XMLHelper.processSMAP(inputsWithValue); XMLHelper.processSMAP();
panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom"); config.state.panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
UI.controlLoftloader("hide"); UI.controlLoftloader("hide");
UI.createSeatTooltips(inVenueXML); UI.createSeatTooltips();
break; break;
} }
@@ -138,12 +146,9 @@ function messageHandler(inE: any) {
} }
else { else {
Cart.removeCartItems(); Cart.removeCartItems();
Cart.generateCartItems(inVenueXML, inputsWithValue); Cart.generateCartItems();
const url = XMLHelper.generateCheckoutUrl();
console.log(inputsWithValue);
const url = XMLHelper.generateCheckoutUrl(inputsWithValue);
Events.addRedirectCheckout(url); Events.addRedirectCheckout(url);
UI.showModalCart(); UI.showModalCart();
UI.showHideBtnCartLoading("hide"); UI.showHideBtnCartLoading("hide");
} }

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

@@ -1,3 +1,5 @@
import { PanzoomObject } from "@panzoom/panzoom";
export interface Trim { export interface Trim {
coord: string[]; coord: string[];
enabled: string[]; enabled: string[];
@@ -16,6 +18,11 @@ export interface State {
selectedSeatsObj: StateJSCSelectedSeats; selectedSeatsObj: StateJSCSelectedSeats;
layoutRows: layoutRows; layoutRows: layoutRows;
isValidSeatSelection: boolean; isValidSeatSelection: boolean;
seatmap: any;
seatmapXML: any;
panzoom: PanzoomObject | undefined;
inVenueXML: VenueXML | undefined;
inputsWithValue: InputsWithValue | undefined;
} }
interface layoutRows { interface layoutRows {