From 39aa73b034f6a97335d81319f7c55e2569797f8a Mon Sep 17 00:00:00 2001 From: zino Date: Sat, 15 May 2021 22:57:15 +0200 Subject: [PATCH] before remove getcolumnsnaming --- client/src/modules/cart.ts | 42 +++++++++---------- client/src/modules/communication.ts | 11 ----- client/src/modules/config.ts | 7 +++- client/src/modules/events.ts | 22 +++++----- client/src/modules/jsc.ts | 33 ++++++++------- client/src/modules/state.ts | 6 +-- client/src/modules/ui.ts | 8 ++-- client/src/modules/xmlhelper.ts | 62 +++++++++++++++------------- client/src/seatmap.ts | 63 ++++++++++++++++------------- client/src/types/types.d.ts | 9 ++++- 10 files changed, 138 insertions(+), 125 deletions(-) diff --git a/client/src/modules/cart.ts b/client/src/modules/cart.ts index 4d98918..0f21f83 100644 --- a/client/src/modules/cart.ts +++ b/client/src/modules/cart.ts @@ -4,21 +4,21 @@ import * as I from "../types/types"; import * as UI from "./ui"; import * as Events from "./events"; -export function addItem(inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) { - const color = `#${XMLHelper.getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0], inVenueXML)}`; - const category = XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0], inVenueXML); +export function addItem(inSeatObj: I.JSCSelectedSeat) { + const color = `#${XMLHelper.getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0])}`; + const category = XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0]); const seat = config.state.layoutRows[inSeatObj.id][5]; const row = config.state.layoutRows[inSeatObj.id][4]; const sectionID = config.state.layoutRows[inSeatObj.id][3]; - const sectionDesc = XMLHelper.getSectionDescBySectionID(inVenueXML, sectionID); + const sectionDesc = XMLHelper.getSectionDescBySectionID(sectionID); const seatStr = `${sectionDesc}
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 dropdownBuyerTypesSelector = `#${cartId} .dropdownBuyerTypes`; appendHTML(cartId, color, category, seatStr); addDropdownBuyerTypesOptions(buyerTypes, dropdownBuyerTypesSelector); - Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj, inVenueXML, inInputsWithValue); + Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj); } function appendHTML(inCartId: string, inColor: string, inCategory: string | undefined, inSeatStr: string) { @@ -49,15 +49,9 @@ function addDropdownBuyerTypesOptions(inBuyerTypes: (string | undefined)[][] | u }); } -// function appendOptionDropdownBuyerTypesOptions() { -// let opt = document.createElement('option'); -// opt.value = arr[0]; -// opt.innerHTML = `${arr[2]} €${arr[1]}`; -// dropdownBuyerTypes.appendChild(opt); -// } - -function getBuyerTypesByPricescaleID(inPricescaleID: string, inVenueXML: I.VenueXML) { - const venuePricescaleArr = inVenueXML.price_structure[0].pricescale; +function getBuyerTypesByPricescaleID(inPricescaleID: string) { + const venueXML = config.state.inVenueXML!; + const venuePricescaleArr = venueXML.price_structure[0].pricescale; const buyerTypesArr = venuePricescaleArr.find(obj => { return obj.id[0] === inPricescaleID; })?.buyer_type; @@ -66,7 +60,7 @@ function getBuyerTypesByPricescaleID(inPricescaleID: string, inVenueXML: I.Venue return; 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; })?.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 => { return arr[0] === inSeatObj.id; }); config.state.selectedSeatsArr[index][1] = inSelect.value; - const buyerTypeCode = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inVenueXML, inSelect.value); + const buyerTypeCode = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inSelect.value); if (buyerTypeCode) config.state.selectedSeatsArr[index][2] = buyerTypeCode; - calcOverallPrice(inVenueXML); + calcOverallPrice(); UI.setBtnCartText(); - const url = XMLHelper.generateCheckoutUrl(inInputsWithValue); + const url = XMLHelper.generateCheckoutUrl(); console.log(url); Events.addRedirectCheckout(url); console.log(config.state); } -export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined { +export function calcOverallPrice(): string | undefined { if (!config.state.selectedSeatsArr.length) { config.state.priceOverall = "0"; return "0"; @@ -117,7 +111,7 @@ export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined { const buyertypeID: string = arr[1]; const selectedSeat: I.JSCSelectedSeat = config.state.selectedSeatsObj[seatID]; 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) return; @@ -135,14 +129,14 @@ export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined { return config.state.priceOverall; } -export function generateCartItems(inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) { +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, inVenueXML, inInputsWithValue); + addItem(element); } } } diff --git a/client/src/modules/communication.ts b/client/src/modules/communication.ts index 98ba204..afa9e22 100644 --- a/client/src/modules/communication.ts +++ b/client/src/modules/communication.ts @@ -68,17 +68,6 @@ export function needSeatmapXML(inID: string) { 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) { // use fetch instead of axios because of 302 redirect // see https://github.com/axios/axios/issues/932 diff --git a/client/src/modules/config.ts b/client/src/modules/config.ts index 04923f0..5a0a7f0 100644 --- a/client/src/modules/config.ts +++ b/client/src/modules/config.ts @@ -22,6 +22,11 @@ export const config: I.Config = { selectedSeatsArr: [], selectedSeatsObj: {}, layoutRows: {}, - isValidSeatSelection: false + isValidSeatSelection: false, + inputsWithValue: undefined, + seatmap: undefined, + panzoom: undefined, + inVenueXML: undefined, + seatmapXML: undefined, } } \ No newline at end of file diff --git a/client/src/modules/events.ts b/client/src/modules/events.ts index 7f6df72..a20abcc 100644 --- a/client/src/modules/events.ts +++ b/client/src/modules/events.ts @@ -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); if (btnCart) { btnCart.addEventListener("click", () => { if (!config.state.selectedSeatsArr.length) UI.showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`); else if (config.state.cartChanged) - XMLHelper.isValidSeatSelection(inInputsWithValue); + XMLHelper.isValidSeatSelection(); else if (!config.state.cartChanged && config.state.isValidSeatSelection) UI.showModalCart(); 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); dropdownLegend.addEventListener("change", function (this: HTMLSelectElement) { const value: string = this.value; @@ -86,20 +88,20 @@ export function dropdownLegendOnChange(inSelector: string, inSeatmap: any, inSea UI.changeDropdownLegendBGColor(inSelector, value, className); if (value === "all") { - inSeatmap.find('unavailable').status('available'); - JSC.setUnavailableSeats(inSeatmapXML, inSeatmap); + seatmap.find('unavailable').status('available'); + JSC.setUnavailableSeats(seatmapXML, seatmap); } else { - inSeatmap.find('available').status('unavailable'); - JSC.activateSeatsBySectionID(inSeatmapXML, inSeatmap, value); - JSC.setUnavailableSeats(inSeatmapXML, inSeatmap); + seatmap.find('available').status('unavailable'); + JSC.activateSeatsBySectionID(value); + 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) { - Cart.changedDropdownBuyerType(this, inSeatObj, inVenueXML, inInputsWithValue); + Cart.changedDropdownBuyerType(this, inSeatObj); }); } \ No newline at end of file diff --git a/client/src/modules/jsc.ts b/client/src/modules/jsc.ts index 1f30bef..a0a5fef 100644 --- a/client/src/modules/jsc.ts +++ b/client/src/modules/jsc.ts @@ -4,8 +4,9 @@ import * as State from "./state"; import * as Cart from "./cart"; import * as UI from "./ui"; -export function getSeats(inXML: any): I.JSCSeats { - const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale; +export function getSeats(): I.JSCSeats { + const seatmapXML = config.state.seatmapXML; + const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale; let object: any = {}; for (let key in pricescaleArr) { @@ -22,8 +23,10 @@ export function getSeats(inXML: any): I.JSCSeats { return seatmapInitSeats; } -export function activateSeatsBySectionID(inXML: any, seatmap: any, inValue: string,) { - const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale; +export function activateSeatsBySectionID(inValue: string) { + const seatmapXML = config.state.seatmapXML; + const seatmap = config.state.seatmap; + const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale; pricescaleArr.forEach(element => { if (element.id[0] === inValue) { @@ -33,8 +36,9 @@ export function activateSeatsBySectionID(inXML: any, seatmap: any, inValue: stri }); } -export function getRowsNaming(inXML: any): string[] { - const layout: I.SeatmapLayout = inXML.seatmap[0].layouts[0].layout[0]; +export function getRowsNaming(): string[] { + const seatmapXML = config.state.seatmapXML; + const layout: I.SeatmapLayout = seatmapXML.seatmap[0].layouts[0].layout[0]; const height: number = parseInt(layout.height[0]); // return Array.from({ length: height }, (_, i: number) => i + 1); const namingArr = Array.from({ length: height }, (_) => ""); @@ -111,11 +115,12 @@ export function getRowsNaming(inXML: any): string[] { // return namingArr; // } -export function generateMap(inXML: any): string[] { - const layout: I.SeatmapLayout = inXML.seatmap[0].layouts[0].layout[0]; +export function generateMap(): string[] { + 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 pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale; - const availabilityArr: I.JSCAvailability = inXML.seatmap[0].view_modes[0].view_mode[0].availability[0]; + const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale; + const availabilityArr: I.JSCAvailability = seatmapXML.seatmap[0].view_modes[0].view_mode[0].availability[0]; // Form: arrMatrix[Y][X] 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 = (window).jQuery(inSelector); // console.log(inSeatmapInitMap); @@ -335,8 +340,8 @@ export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: st if (State.maximumSelectedSeatsReached(selectedSeat, inSeatmap)) return "available"; - State.addSeatToState(inVenueXML, selectedSeat); - Cart.calcOverallPrice(inVenueXML); + State.addSeatToState(selectedSeat); + Cart.calcOverallPrice(); UI.setBtnCartText(); return "selected"; @@ -345,7 +350,7 @@ export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: st const selectedSeat: I.JSCSelectedSeat = this.settings; State.removeSeatFromState(selectedSeat); - Cart.calcOverallPrice(inVenueXML); + Cart.calcOverallPrice(); UI.setBtnCartText(); console.log(config.state.selectedSeatsArr); diff --git a/client/src/modules/state.ts b/client/src/modules/state.ts index b77df2f..3b7058c 100644 --- a/client/src/modules/state.ts +++ b/client/src/modules/state.ts @@ -3,7 +3,7 @@ import * as I from "../types/types"; import * as XMLHelper from "./xmlhelper"; 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 seatObj: I.StateJSCSelectedSeats = { [seatID]: inSelectedSeat @@ -12,7 +12,7 @@ export function addSeatToState(inVenueXML: I.VenueXML, inSelectedSeat: I.JSCSele config.state.selectedSeatsObj = { ...config.state.selectedSeatsObj, ...seatObj }; 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); if (!pricescaleObj) { @@ -23,7 +23,7 @@ export function addSeatToState(inVenueXML: I.VenueXML, inSelectedSeat: I.JSCSele // get id and code of first buyer type 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 buyerTypeCode: string | undefined = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inVenueXML, firstBuyerTypeID); + const buyerTypeCode: string | undefined = XMLHelper.getBuyerTypeCodeByBuyerTypeID(firstBuyerTypeID); if (buyerTypeCode) { config.state.selectedSeatsArr.push([seatID, firstBuyerTypeID, buyerTypeCode]); diff --git a/client/src/modules/ui.ts b/client/src/modules/ui.ts index bed4a40..6c7c799 100644 --- a/client/src/modules/ui.ts +++ b/client/src/modules/ui.ts @@ -200,21 +200,21 @@ export function showSeatmapBtnParent(): void { Communication.sendEventToParent("child_seatmap_ready"); } -export function createSeatTooltips(inVenueXML: I.VenueXML) { +export function createSeatTooltips() { new jBox("Tooltip", { attach: jQuery(".seatCharts-seat"), 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 seat = config.state.layoutRows[seatID][5]; const row = config.state.layoutRows[seatID][4]; const sectionID = config.state.layoutRows[seatID][3]; - const sectionDesc = XMLHelper.getSectionDescBySectionID(inVenueXML, sectionID); + const sectionDesc = XMLHelper.getSectionDescBySectionID(sectionID); const tooltipContent = `${sectionDesc}
Reihe ${row} Platz ${seat}`; jBox.setContent(tooltipContent); diff --git a/client/src/modules/xmlhelper.ts b/client/src/modules/xmlhelper.ts index 623e515..3f6b8f3 100644 --- a/client/src/modules/xmlhelper.ts +++ b/client/src/modules/xmlhelper.ts @@ -30,15 +30,12 @@ export function getXMLPromise(url: string): Promise { }) } -export function getSeatmapListing(inVenueXML: I.VenueXML): I.Seatmap[] { - return inVenueXML.seatmap_config[0].seatmap; -} - -export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo { - const sectionArr = inVenueXML.master_config[0].section_inventory[0].section; - const eventObj: I.Event = inVenueXML.event[0]; - const event = inVenueXML.event[0]; - const venue_config = inVenueXML.venue_config[0]; +export function getEventInfo(): I.EventInfo { + const venueXML = config.state.inVenueXML!; + const sectionArr = venueXML.master_config[0].section_inventory[0].section; + const eventObj: I.Event = venueXML.event[0]; + const event = venueXML.event[0]; + const venue_config = venueXML.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 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") ]; @@ -63,9 +60,10 @@ export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo { return eventInfo; } -export function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) { +export function isValidSeatSelection() { + const inputsWithValue = config.state.inputsWithValue!; console.log("checking seat selection"); - console.log(inInputsWithValue); + console.log(inputsWithValue); jQuery("#modalCart-overlay").hide(); if (!config.state.selectedSeatsArr.length) @@ -76,7 +74,7 @@ export function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) { jQuery("#modalCart i").hide(); jQuery("#modalCart .uabb-button-text").addClass("dot-pulse"); - const url = generateCheckoutUrl(inInputsWithValue); + const url = generateCheckoutUrl(); // const selectedSeatIndexes: string = generateSelectedSeatIndexes(); // 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"); } -export function generateCheckoutUrl(inInputsWithValue: I.InputsWithValue): string | undefined { - console.log(inInputsWithValue); +export function generateCheckoutUrl(): string | undefined { + const inputsWithValue = config.state.inputsWithValue!; + console.log(inputsWithValue); + if (!config.state.selectedSeatsArr.length) return; else { 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("|"); } -export function getSectionDescBySectionID(inVenueXML: I.VenueXML, sectionID: string): string | undefined { - const sectionArr = inVenueXML.master_config[0].section_config[0].section; +export function getSectionDescBySectionID(sectionID: string): string | undefined { + const venueXML = config.state.inVenueXML!; + const sectionArr = venueXML.master_config[0].section_config[0].section; const sectionDesc = sectionArr.find(arr => { return sectionID === arr.id[0]; @@ -118,18 +119,20 @@ export function getSectionDescBySectionID(inVenueXML: I.VenueXML, sectionID: str return sectionDesc; } -export function processSMAP(inInputsWithValue: I.InputsWithValue) { - if (!inInputsWithValue.smap) +export function processSMAP() { + const inputsWithValue = config.state.inputsWithValue!; + if (!inputsWithValue.smap) return; - const smapArr = inInputsWithValue.smap.split("").map(Number); + const smapArr = inputsWithValue.smap.split("").map(Number); if (!smapArr[0]) jQuery("#eventInfoCapacity").hide(); } -export function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2Properties, pricescaleID: string, inVenueXML: I.VenueXML) { - const venuePricescaleArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale; +export function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2Properties, pricescaleID: string) { + const venueXML = config.state.inVenueXML!; + const venuePricescaleArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale; return venuePricescaleArr.find(obj => { if (obj.id[0] === pricescaleID) @@ -139,8 +142,9 @@ export function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2 })?.[property][0]; } -export function getBuyerTypeCodeByBuyerTypeID(inVenueXML: I.VenueXML, inBuyerTypeID: string): string | undefined { - const venueBuyerTypeArr = inVenueXML.venue[0].buyer_types[0].buyer_type; +export function getBuyerTypeCodeByBuyerTypeID(inBuyerTypeID: string): string | undefined { + const venueXML = config.state.inVenueXML!; + const venueBuyerTypeArr = venueXML.venue[0].buyer_types[0].buyer_type; return venueBuyerTypeArr.find(arr => { return inBuyerTypeID === arr.id[0]; })?.code[0]; @@ -157,15 +161,17 @@ export function getPriceByBuyertypeID(inBuyertypeID: string, inPricescaleObj: I. return undefined; } -export function getVenuePriceStructurePropertyByPricescaleID(inVenueXML: I.VenueXML, inID: string): I.Pricescale5 | undefined { - const venuePricescaleArr: I.Pricescale5[] = inVenueXML.price_structure[0].pricescale; +export function getVenuePriceStructurePropertyByPricescaleID(inID: string): I.Pricescale5 | undefined { + const venueXML = config.state.inVenueXML!; + const venuePricescaleArr: I.Pricescale5[] = venueXML.price_structure[0].pricescale; return venuePricescaleArr.find(obj => { return obj.id[0] === inID; }); } -export function generatePricescaleCSS(inVenueXML: I.VenueXML): string { - const venuePricescalesArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale; +export function generatePricescaleCSS(): string { + const venueXML = config.state.inVenueXML!; + const venuePricescalesArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale; let cssArr: string[] = []; venuePricescalesArr.forEach(element => { diff --git a/client/src/seatmap.ts b/client/src/seatmap.ts index 3a08c80..ceef108 100644 --- a/client/src/seatmap.ts +++ b/client/src/seatmap.ts @@ -6,16 +6,15 @@ import * as UI from "./modules/ui"; import * as JSC from "./modules/jsc"; import { config } from "./modules/config"; import Utils from "./modules/utils"; -import { PanzoomObject } from "@panzoom/panzoom"; import * as Events from "./modules/events"; require("jbox/dist/jBox.all.css"); import * as Cart from "./modules/cart"; -let inputsWithValue: I.InputsWithValue; -let seatmap: any; -let panzoom: PanzoomObject | undefined; -let inVenueXML: I.VenueXML; -let seatmapXML: any; +// let inputsWithValue: I.InputsWithValue; +// let seatmap: any; +// let panzoom: PanzoomObject | undefined; +// let inVenueXML: I.VenueXML; +// let seatmapXML: any; window.addEventListener('load', () => { // Inject JSC (jQuery Seat Charts) @@ -36,15 +35,17 @@ window.addEventListener('load', () => { // Add event listeners Events.addCloseModal(); - Events.addModalCart(inputsWithValue); - Events.addDropdownSeatmap(panzoom); + Events.addModalCart(); + Events.addDropdownSeatmap(config.state.panzoom); }); // Hide header when height of window is smaller than ... // Note: Cannot determine width of inner iframe, therefore need to use window.innerHeight window.onresize = function () { + const panzoom = config.state.panzoom; const innerHeight = window.innerHeight; + if (innerHeight < 576) { console.log("small"); jQuery("#containerEventInfoRow").hide(); @@ -74,18 +75,20 @@ function messageHandler(inE: any) { } 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 - const css = XMLHelper.generatePricescaleCSS(inVenueXML); + const css = XMLHelper.generatePricescaleCSS(); Utils.inject(css, "cssCustom", "body"); // Fill event info - const eventInfo = XMLHelper.getEventInfo(inVenueXML); + const eventInfo = XMLHelper.getEventInfo(); UI.setEventInfo(eventInfo, inputsWithValue); // Fill select dropdown - const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(inVenueXML); + const seatmapListing: I.Seatmap[] = venueXML.seatmap_config[0].seatmap; UI.setOptionSelect(seatmapListing, "dropdownSeatmap"); // Display first seatmapXML @@ -100,29 +103,34 @@ function messageHandler(inE: any) { } case "parent_init_sendInputsWithValue": { - inputsWithValue = data.message; - UI.changeVenueImage(inputsWithValue); + config.state.inputsWithValue = data.message; + const inputsWithValue = config.state.inputsWithValue!; + + UI.changeVenueImage(inputsWithValue!); Communication.sendEventToParent("child_init_needVenueXML"); break; } case "parent_sendSeatmapXML": { - seatmapXML = data.message.map_response; - const map: string[] = JSC.generateMap(seatmapXML); - const rowsNaming: string[] = JSC.getRowsNaming(seatmapXML); - const seats: I.JSCSeats = JSC.getSeats(seatmapXML); - const legend: I.JSCLegend = JSC.generateLegend(inVenueXML, seatmapXML, "#JSCLegendInner"); + config.state.seatmapXML = data.message.map_response; + const seatmapXML = config.state.seatmapXML; + const venueXML = config.state.inVenueXML!; + const seatmap = config.state.seatmap; + 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.selectSeatsInCart(seatmap); UI.convertLegendToDropdown("dropdownLegend"); - Events.dropdownLegendOnChange("#dropdownLegend", seatmap, seatmapXML); + Events.dropdownLegendOnChange("#dropdownLegend"); JSC.addTrims(seatmapXML); - XMLHelper.processSMAP(inputsWithValue); - panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom"); + XMLHelper.processSMAP(); + config.state.panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom"); UI.controlLoftloader("hide"); - UI.createSeatTooltips(inVenueXML); + UI.createSeatTooltips(); break; } @@ -138,12 +146,9 @@ function messageHandler(inE: any) { } else { Cart.removeCartItems(); - Cart.generateCartItems(inVenueXML, inputsWithValue); - - console.log(inputsWithValue); - const url = XMLHelper.generateCheckoutUrl(inputsWithValue); + Cart.generateCartItems(); + const url = XMLHelper.generateCheckoutUrl(); Events.addRedirectCheckout(url); - UI.showModalCart(); UI.showHideBtnCartLoading("hide"); } diff --git a/client/src/types/types.d.ts b/client/src/types/types.d.ts index 423cbe1..5cad112 100644 --- a/client/src/types/types.d.ts +++ b/client/src/types/types.d.ts @@ -1,3 +1,5 @@ +import { PanzoomObject } from "@panzoom/panzoom"; + export interface Trim { coord: string[]; enabled: string[]; @@ -15,7 +17,12 @@ export interface State { selectedSeatsArr: string[][]; selectedSeatsObj: StateJSCSelectedSeats; layoutRows: layoutRows; - isValidSeatSelection: boolean; + isValidSeatSelection: boolean; + seatmap: any; + seatmapXML: any; + panzoom: PanzoomObject | undefined; + inVenueXML: VenueXML | undefined; + inputsWithValue: InputsWithValue | undefined; } interface layoutRows {