From e7242594b4a1b92ea4827a0a32297f640f0be337 Mon Sep 17 00:00:00 2001 From: zino Date: Fri, 14 May 2021 13:48:13 +0200 Subject: [PATCH] before config state --- client/src/inject.ts | 170 +++++++++--------- client/src/modules/communication.ts | 47 +++-- client/src/modules/config.ts | 10 +- client/src/modules/events.ts | 19 ++ client/src/modules/parser.ts | 14 ++ client/src/modules/ui.ts | 20 +++ client/src/modules/xmlhelper.ts | 4 +- client/src/seatmap.ts | 265 +++++++++++++--------------- client/src/types/types.d.ts | 1 + 9 files changed, 299 insertions(+), 251 deletions(-) create mode 100644 client/src/modules/events.ts diff --git a/client/src/inject.ts b/client/src/inject.ts index 7a81756..df35752 100644 --- a/client/src/inject.ts +++ b/client/src/inject.ts @@ -7,18 +7,63 @@ import * as Parser from './modules/parser'; import * as UI from "./modules/ui"; import { config } from "./modules/config"; import axios from 'axios'; +//require("jbox/dist/jBox.all.css"); let inputsWithValue: I.InputsWithValue; -function messagesHandler(e: any) { +window.addEventListener('load', () => { + // Parse (hidden) inputs and their values + const content: string = new XMLSerializer().serializeToString(document); + inputsWithValue = { ...inputsWithValue, ...Parser.getInputs(content) }; + + console.log(inputsWithValue); + console.log(`trxstate: ${inputsWithValue["trxstate"]}`); + + // "posturl" in function showMap() only available if "pvmapse" PVO code is true. + // "pvmapse" false disables seatmap + const posturlAvail: boolean = /posturl:"(.+?)"/.test(content); + + console.log(`posturl available: ${posturlAvail}`); + + // Only inject on page with trxstate 20 and if seatmap is enabled with PVO code "pvmapse" + if (inputsWithValue["trxstate"] !== "20" || posturlAvail === false) + return; + + // Inject parent CSS + // Parent = trxstate 20 + Utils.inject(config.urlCSSParentStaging, "css", "body"); + + // Start message handler to be able to receive messages from child + Communication.listenToMessages(messageHandler); + + // We are on trxstate 20 page so get more needed inputs + inputsWithValue = { ...inputsWithValue, ...Parser.getAdditionalInputs(content) }; + inputsWithValue = { ...inputsWithValue, ...Parser.getVenueImage() }; + inputsWithValue = { ...inputsWithValue, ...Parser.getImportantNote() }; + inputsWithValue["smap"] = Parser.getSMAP(); + + // Inject and point seatmap button to new location + UI.injectBookingBtn(); + + // Create an jQuery dialog into an iframe which is opened on clicking seatmap button + // https://api.jqueryui.com/dialog/ + UI.createDialog(); + + console.log(inputsWithValue); +}); + +function messageHandler(e: any) { if (typeof (e.data) !== 'string') return; + // Decode JSON postMessage data const data: I.Message = JSON.parse(e.data); + console.log(`parent: received from ${data.from}`); console.log(data); switch (data.event) { + case "child_init_needInputsWithValue": { const message: I.Message = { message: inputsWithValue, @@ -29,70 +74,79 @@ function messagesHandler(e: any) { Communication.sendMessage(message, "iframeSeatmap"); break; } + case "child_init_needVenueXML": { Communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "parent_init_sendVenueXML", "parent"); config.childHasVenueXML = true; break; } + case "child_needSeatmapXML": { const seatmapUrl: string = `${inputsWithValue["posturlRawDecoded"]}&inclseatmap=Y&seatmap=${data.message}`; Communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent"); break; } + case "child_seatmap_ready": { jQuery("#containerBookingBtn").show(); break; } + case "child_needCheckoutResponse": { const inUrl: string = data.message.url; axios.get(inUrl, { maxRedirects: 0 - }).then(function (response) { - let isValidSeatSelection: boolean = false; - const content: string = response.data; - const parsedHTML: Node[] = jQuery.parseHTML(content); - const orderkey: string | undefined = jQuery(parsedHTML).find("#orderkey").val(); - console.log(`orderkey: ${orderkey}`); - - if (orderkey) { - isValidSeatSelection = true; - const cancelUrl = generateCheckoutCancelUrl(orderkey); - cancelCheckout(cancelUrl); - } - - const message: I.Message = { - message: { - "isValidSeatSelection": isValidSeatSelection, - "parsedHTML": parsedHTML, - "url": inUrl, - // "selectedSeat": inSelectedSeat - }, - from: "parent", - event: "parent_sendCheckoutResponse", - date: Date.now() - }; - Communication.sendMessage(message, "iframeSeatmap"); }) + .then((inE) => { + let isValidSeatSelection: boolean = false; + const content: string = inE.data; + const parsedHTML: Node[] = jQuery.parseHTML(content); + const orderkey: string | undefined = jQuery(parsedHTML).find("#orderkey").val(); + + console.log(`orderkey: ${orderkey}`); + + if (orderkey) { + isValidSeatSelection = true; + const cancelUrl = `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue["user_context"]}&pid=${inputsWithValue["pid"]}&orderkey=${orderkey}&trxstate=92`; + Communication.cancelCheckout(cancelUrl); + } + + const message: I.Message = { + message: { + "isValidSeatSelection": isValidSeatSelection, + "parsedHTML": parsedHTML, + "url": inUrl, + }, + from: "parent", + event: "parent_sendCheckoutResponse", + date: Date.now() + }; + Communication.sendMessage(message, "iframeSeatmap"); + }) .catch(function (error) { - console.log("error"); + console.log("error in child_needCheckoutResponse"); console.log(error); }); break; } + case "child_hide_dialog_titlebar": { jQuery(".ui-dialog-titlebar").hide(); break; } + case "child_show_dialog_titlebar": { jQuery(".ui-dialog-titlebar").show(); break; } + case "child_click_checkout": { const inUrl: string = data.message.url; window.location.href = inUrl; break; } + case "child_closeDialog": { jQuery(".ui-dialog-titlebar-close").click(); break; @@ -101,66 +155,4 @@ function messagesHandler(e: any) { default: break; } -} - -function cancelCheckout(inUrl: string) { - // use fetch instead of axios because of 302 redirect - // https://github.com/axios/axios/issues/932 - fetch(inUrl, { - redirect: "manual" - }).then(() => { - console.log(`${inUrl} canceled`); - }).catch(function (error) { - console.log("error"); - console.log(error); - }); -} - -function generateCheckoutCancelUrl(inOrderkey: string) { - return `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue["user_context"]}&pid=${inputsWithValue["pid"]}&orderkey=${inOrderkey}&trxstate=92`; -} - -window.addEventListener('load', function () { - const content: string = new XMLSerializer().serializeToString(document); - inputsWithValue = { ...inputsWithValue, ...Parser.getInputs(content) }; - console.log(inputsWithValue); - - console.log(inputsWithValue["trxstate"]); - console.log(/posturl:"(.+?)"/.test(content)); - - // posturl absent if pvmapse === false - if (inputsWithValue["trxstate"] !== "20" || /posturl:"(.+?)"/.test(content) === false) - return; - - Utils.inject(config.urlCSSParentStaging, "css", "body"); - Communication.listenToMessages(messagesHandler); - inputsWithValue = { ...inputsWithValue, ...Parser.getAdditionalInputs(content) }; - inputsWithValue = { ...inputsWithValue, ...Parser.getVenueImage() }; - - // const importantNote = Parser.getImportantNote(); - // if (importantNote) - // inputsWithValue = { ...inputsWithValue, ...importantNote }; - - inputsWithValue = { ...inputsWithValue, ...Parser.getImportantNote() }; - inputsWithValue["smap"] = getSMAP(); - - - UI.injectBookingBtn(); - UI.createDialog(); - - console.log(inputsWithValue); -}); - -function getSMAP(): string | undefined { - if (jQuery("#seating_map_url").length === 0) - return undefined; - - const str: string = jQuery("#seating_map_url a").attr("onclick"); - const re = /openNewWindow\(\'(\d+)\'/; - const found: RegExpMatchArray | null = str.match(re); - - if (found) - return found[1]; - else - return undefined; } \ No newline at end of file diff --git a/client/src/modules/communication.ts b/client/src/modules/communication.ts index 9e73efc..98ba204 100644 --- a/client/src/modules/communication.ts +++ b/client/src/modules/communication.ts @@ -6,21 +6,21 @@ export function sendMessage(data: I.Message, to: string): void { if (to === "parent") window.parent.postMessage(JSON.stringify(data), '*'); else { - if (document.getElementById(to) === null) { + console.log("trying to send to child"); + const child: any = document.getElementById(to); + if (child === null) { console.log(`Element with ID ${to} does not exist`); return; } - - const receiver: any = document.getElementById(to); - if (receiver.contentWindow !== null) - receiver.contentWindow.postMessage(JSON.stringify(data), "*") + + if (child.contentWindow !== null) + child.contentWindow.postMessage(JSON.stringify(data), "*") } } -export function listenToMessages(inHandler?: CallableFunction): void { +export function listenToMessages(inHandler: CallableFunction): void { window.addEventListener('message', (e: any): void => { - if (inHandler) - inHandler(e); + inHandler(e); }); } @@ -68,13 +68,26 @@ export function needSeatmapXML(inID: string) { sendMessage(message, "parent"); } -export function showBookingBtnParent(): 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 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 + fetch(inUrl, { + redirect: "manual" + }).then(() => { + console.log(`${inUrl} canceled`); + }).catch(function (error) { + console.log("error"); + console.log(error); + }); } \ No newline at end of file diff --git a/client/src/modules/config.ts b/client/src/modules/config.ts index e292b09..04923f0 100644 --- a/client/src/modules/config.ts +++ b/client/src/modules/config.ts @@ -15,5 +15,13 @@ export const config: I.Config = { urlCSSJSCMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css", urlCSSjQueryUI: "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css", childHasVenueXML: false, - maxSelectedSeats: 10 + maxSelectedSeats: 10, + state: { + priceOverall: "", + cartChanged: false, + selectedSeatsArr: [], + selectedSeatsObj: {}, + layoutRows: {}, + isValidSeatSelection: false + } } \ No newline at end of file diff --git a/client/src/modules/events.ts b/client/src/modules/events.ts new file mode 100644 index 0000000..d22fc04 --- /dev/null +++ b/client/src/modules/events.ts @@ -0,0 +1,19 @@ +import * as Communication from "./communication"; +import * as UI from "./ui"; + +export function addCloseModal() { + const btnCloseModal: HTMLElement | undefined = jQuery("#btnCloseModal").get(0); + if (btnCloseModal) + btnCloseModal.addEventListener("click", () => Communication.sendEventToParent("child_closeDialog")); +} + +export function addDropdownSeatmap(inPanzoom: any) { + const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap"); + if (dropdownSeatmap) { + dropdownSeatmap.addEventListener("change", function (this: HTMLSelectElement) { + UI.controlLoftloader("show"); + UI.destroyCurrentSeatmap("#containerSeatmapInner", inPanzoom); + Communication.needSeatmapXML(this.value); + }); + } +} diff --git a/client/src/modules/parser.ts b/client/src/modules/parser.ts index 8d76cca..b7d075f 100644 --- a/client/src/modules/parser.ts +++ b/client/src/modules/parser.ts @@ -73,4 +73,18 @@ export function getVenueImage(): { venueImageSrc: string, venueImageHeight: numb } return undefined; +} + +export function getSMAP(): string | undefined { + if (jQuery("#seating_map_url").length === 0) + return undefined; + + const str: string = jQuery("#seating_map_url a").attr("onclick"); + const re = /openNewWindow\(\'(\d+)\'/; + const found: RegExpMatchArray | null = str.match(re); + + if (found) + return found[1]; + else + return undefined; } \ No newline at end of file diff --git a/client/src/modules/ui.ts b/client/src/modules/ui.ts index 72b86a3..253da46 100644 --- a/client/src/modules/ui.ts +++ b/client/src/modules/ui.ts @@ -4,6 +4,7 @@ import Panzoom from '@panzoom/panzoom'; import { PanzoomObject } from "@panzoom/panzoom/dist/src/types"; import { config } from "./config"; + export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string) { const seatmapDropdown: HTMLElement | null = document.getElementById(inId); if (seatmapDropdown) { @@ -151,4 +152,23 @@ export function addPanzoom(inSelector: string, inBtnZoomIn: string | null = null export function changeVenueImage(inInputsWithValue: I.InputsWithValue) { if (inInputsWithValue.venueImageSrc !== undefined) jQuery("#venueImage img").attr("src", inInputsWithValue.venueImageSrc); +} + +export function showHideBtnCartLoading(inSwitch: string) { + if (inSwitch === "show") { + jQuery("#modalCart .uabb-button").css("pointer-events", "none"); + jQuery("#modalCart i").hide(); + jQuery("#modalCart .uabb-button-text").addClass("dot-pulse"); + } + else if (inSwitch === "hide") { + jQuery("#modalCart i").show(); + jQuery("#modalCart .uabb-button-text").removeClass("dot-pulse"); + jQuery("#modalCart .uabb-button").css("pointer-events", "all"); + } + +} + +export function showModalCart() { + jQuery("#modalCart-overlay").fadeIn(300); + Communication.sendEventToParent("child_hide_dialog_titlebar"); } \ No newline at end of file diff --git a/client/src/modules/xmlhelper.ts b/client/src/modules/xmlhelper.ts index e767914..a3dd700 100644 --- a/client/src/modules/xmlhelper.ts +++ b/client/src/modules/xmlhelper.ts @@ -2,6 +2,7 @@ import axios, { AxiosResponse } from 'axios'; var xml2jsParser = require('xml2js').parseString; import * as I from "../types/types"; import Utils from './utils'; +//import { state } from "../seatmap"; export function getXMLPromise(url: string): Promise { return axios.get(url) @@ -57,4 +58,5 @@ export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo { let eventInfo: I.EventInfo = { ...eventObj, ...eventExtend }; return eventInfo; -} \ No newline at end of file +} + diff --git a/client/src/seatmap.ts b/client/src/seatmap.ts index d04d6a2..23d0f85 100644 --- a/client/src/seatmap.ts +++ b/client/src/seatmap.ts @@ -5,10 +5,11 @@ import * as I from "./types/types"; import * as UI from "./modules/ui"; import * as JSC from "./modules/jsc"; import { config } from "./modules/config"; -import Utils from './modules/utils'; +import Utils from "./modules/utils"; import { PanzoomObject } from "@panzoom/panzoom"; -import jBox from 'jbox'; -require('jbox/dist/jBox.all.css'); +import jBox from "jbox"; +import * as Events from "./modules/events"; +require("jbox/dist/jBox.all.css"); let inputsWithValue: I.InputsWithValue; let seatmap: any; @@ -24,8 +25,111 @@ export let state: I.State = { isValidSeatSelection: false } +window.addEventListener('load', () => { + // Inject JSC (jQuery Seat Charts) and inject CSS for JSC, child and jQuery dialog + Utils.inject(config.urlJSCStaging, "js", "head"); + Utils.inject(config.urlCSSJSCStaging, "css", "body"); + Utils.inject(config.urlCSSChildStaging, "css", "body"); + Utils.inject(config.urlCSSjQueryUI, "css", "body"); -function messagesHandler(inE: any) { + // Start message handler to be able to receive messages from parent + Communication.listenToMessages(messageHandler); + + // Div with ID "containerSeatmap" is not yet ready, wait for it, then display seatmap button on trxstate 20 + Utils.waitForSeatmap(showSeatmapBtnParent); + + // Modal overlay for cart is not yet ready, wait for it, then initialize + Utils.waitForElement("#modalCart-overlay", initModalCart); + + Events.addCloseModal(); + //Events.addCart(inputsWithValue); + Events.addDropdownSeatmap(panzoom); + + const btnCart: HTMLElement | undefined = jQuery("#modalCart .uabb-button").get(0); + if (btnCart) { + btnCart.addEventListener("click", () => { + if (!state.selectedSeatsArr.length) + showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`); + else if (state.cartChanged) + isValidSeatSelection(inputsWithValue); + else if (!state.cartChanged && state.isValidSeatSelection) + UI.showModalCart(); + else if (!state.cartChanged && !state.isValidSeatSelection) + showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`); + }); + } + +}); + +function showJBoxNotice(inContent: string, inAutoClose: number | boolean | undefined = 5000) { + new jBox('Notice', { + position: { x: 'center', y: 'top' }, + offset: { x: 0, y: 320 }, + content: inContent, + autoClose: inAutoClose, + animation: { open: "zoomIn", close: "zoomOut" }, + closeOnEsc: false, + closeButton: true, + closeOnMouseleave: false, + closeOnClick: false, + draggable: false, + color: "red", + stack: true, + showCountdown: true, + reposition: true, + responsiveWidth: true, + responsiveHeight: true, + }); +} + +function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) { + jQuery("#modalCart-overlay").hide(); + + if (!state.selectedSeatsArr.length) + return; + + UI.showHideBtnCartLoading("show"); + + jQuery("#modalCart i").hide(); + jQuery("#modalCart .uabb-button-text").addClass("dot-pulse"); + + const url = generateCheckoutUrl(inInputsWithValue); + + // const selectedSeatIndexes: string = generateSelectedSeatIndexes(); + // const url: string = `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue.user_context}&pid=${inputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`; + + const message: I.Message = { + message: { + url: url, + }, + from: "child", + event: "child_needCheckoutResponse", + date: Date.now() + }; + Communication.sendMessage(message, "parent"); +} + +function generateCheckoutUrl(inInputsWithValue: I.InputsWithValue): string | undefined { + if (!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`; + } +} + +function generateSelectedSeatIndexes(): string { + return (state.selectedSeatsArr.map(function (arr) { + return arr.join(","); + })).join("|"); +} + +function showSeatmapBtnParent(): void { + console.log("child completely ready"); + Communication.sendEventToParent("child_seatmap_ready"); +} + +function messageHandler(inE: any) { if (typeof (inE.data) !== 'string') return; @@ -94,6 +198,7 @@ function messagesHandler(inE: any) { new jBox("Tooltip", { + attach: jQuery(".seatCharts-seat"), onOpen: function (this: any) { showSeatTooltip(this); }, @@ -108,15 +213,15 @@ function messagesHandler(inE: any) { if (!state.isValidSeatSelection) { showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`); - showHideBtnCartLoading("hide"); - } + UI.showHideBtnCartLoading("hide"); + } else { removeCartItems(); generateCartItems(); - const url = generateCheckoutUrl(); + const url = generateCheckoutUrl(inputsWithValue); setCheckoutBtn(url); - showModalCart(); - showHideBtnCartLoading("hide"); + UI.showModalCart(); + UI.showHideBtnCartLoading("hide"); } state.cartChanged = false; @@ -141,7 +246,7 @@ function processSMAP() { function addTrims() { const trimArr: I.Trim[] = seatmapXML.seatmap[0].trims[0].trim; - trimArr.forEach(arr => { + trimArr.forEach(arr => { const [xTrim, yTrim] = arr.coord[0].split(",").map(Number); const textArr: string[] = arr.text[0].split(";").filter(Boolean); const x = xTrim / 20; @@ -174,7 +279,7 @@ function decodeAddTrims(textArr: string[], x: number, y: number) { const charCode = element.replace(/^\&\#/, "0"); character = String.fromCharCode(parseInt(charCode, 16)); } - + if (character) applyTrim(x, y, i, character); @@ -183,10 +288,10 @@ function decodeAddTrims(textArr: string[], x: number, y: number) { } function applyTrim(x: number, y: number, i: number, character: string) { - if(!/[^a-zA-Z0-9äöüÄÖÜß$]/.test(character)) { + if (!/[^a-zA-Z0-9äöüÄÖÜß$]/.test(character)) { const _x = (x - 1) + i; - const _y = y - 1; - console.log(`${character} -> ${_x} ${_y}`); + const _y = y - 1; + console.log(`${character} -> ${_x} ${_y}`); jQuery(".seatCharts-row")[_y].children[_x].innerHTML = `${character}` } } @@ -233,10 +338,7 @@ function setCheckoutBtn(inUrl: string | undefined) { } } -function showModalCart() { - jQuery("#modalCart-overlay").fadeIn(300); - Communication.sendEventToParent("child_hide_dialog_titlebar"); -} + function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2Properties, pricescaleID: string, inVenueXML: I.VenueXML) { const venuePricescaleArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale; @@ -294,7 +396,7 @@ function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCS calcOverallPrice(inVenueXML); setBtnCartText(); - const url = generateCheckoutUrl(); + const url = generateCheckoutUrl(inputsWithValue); console.log(url); setCheckoutBtn(url); @@ -370,27 +472,6 @@ function selectSeatsInCart() { }); } -function showJBoxNotice(inContent: string, inAutoClose: number | boolean | undefined = 5000) { - new jBox('Notice', { - position: { x: 'center', y: 'top' }, - offset: { x: 0, y: 320 }, - content: inContent, - autoClose: inAutoClose, - animation: { open: "zoomIn", close: "zoomOut" }, - closeOnEsc: false, - closeButton: true, - closeOnMouseleave: false, - closeOnClick: false, - draggable: false, - color: "red", - stack: true, - showCountdown: true, - reposition: true, - responsiveWidth: true, - responsiveHeight: true, - }); -} - function generatePricescaleCSS(inVenueXML: I.VenueXML): string { const venuePricescalesArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale; let cssArr: string[] = []; @@ -433,7 +514,7 @@ function initModalCart() { } } -window.onresize = function() { +window.onresize = function () { const innerHeight = window.innerHeight; if (innerHeight < 576) { console.log("small"); @@ -446,53 +527,7 @@ window.onresize = function() { } } -window.addEventListener('load', function () { - Utils.inject(config.urlJSCStaging, "js", "head"); - Utils.inject(config.urlCSSJSCStaging, "css", "body"); - Utils.inject(config.urlCSSChildStaging, "css", "body"); - Utils.inject(config.urlCSSjQueryUI, "css", "body"); - Communication.listenToMessages(messagesHandler); - Utils.waitForSeatmap(Communication.showBookingBtnParent); - Utils.waitForElement("#modalCart-overlay", initModalCart); - // Utils.waitForElement("#modalCart-overlay", () => jQuery("#modalCart-overlay").hide()); - - - - - - const btnCloseModal = jQuery("#btnCloseModal").get(0); - - if (btnCloseModal) { - btnCloseModal.addEventListener("click", function () { - Communication.sendEventToParent("child_closeDialog"); - }); - } - - const btnCart = jQuery("#modalCart .uabb-button").get(0); - if (btnCart) { - btnCart.addEventListener("click", function () { - if (!state.selectedSeatsArr.length) - showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`); - else if (state.cartChanged) - isValidSeatSelection(); - else if (!state.cartChanged && state.isValidSeatSelection) - showModalCart(); - else if (!state.cartChanged && !state.isValidSeatSelection) - showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`); - }); - } - - const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap"); - if (dropdownSeatmap) { - dropdownSeatmap.addEventListener("change", function (this: HTMLSelectElement) { - UI.controlLoftloader("show"); - const value: string = this.value; - UI.destroyCurrentSeatmap("#containerSeatmapInner", panzoom); - Communication.needSeatmapXML(value); - }); - } -}); function dropdownLegendOnChange(inSelector: string) { const dropdownLegend = jQuery(inSelector).get(0); @@ -564,62 +599,6 @@ function getBuyerTypeCodeByBuyerTypeID(inVenueXML: I.VenueXML, inBuyerTypeID: st })?.code[0]; } -function showHideBtnCartLoading(inSwitch: string) { - if (inSwitch === "show") { - jQuery("#modalCart .uabb-button").css("pointer-events", "none"); - jQuery("#modalCart i").hide(); - jQuery("#modalCart .uabb-button-text").addClass("dot-pulse"); - } - else if (inSwitch === "hide") { - jQuery("#modalCart i").show(); - jQuery("#modalCart .uabb-button-text").removeClass("dot-pulse"); - jQuery("#modalCart .uabb-button").css("pointer-events", "all"); - } - -} - -function isValidSeatSelection() { - jQuery("#modalCart-overlay").hide(); - - if (!state.selectedSeatsArr.length) - return; - - showHideBtnCartLoading("show"); - - jQuery("#modalCart i").hide(); - jQuery("#modalCart .uabb-button-text").addClass("dot-pulse"); - - 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`; - - const message: I.Message = { - message: { - url: url, - }, - from: "child", - event: "child_needCheckoutResponse", - date: Date.now() - }; - Communication.sendMessage(message, "parent"); -} - -function generateCheckoutUrl(): string | undefined { - if (!state.selectedSeatsArr.length) - return; - else { - const selectedSeatIndexes: string = generateSelectedSeatIndexes(); - return `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue.user_context}&pid=${inputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`; - } -} - -function generateSelectedSeatIndexes(): string { - return (state.selectedSeatsArr.map(function (arr) { - return arr.join(","); - })).join("|"); -} - function getVenuePriceStructurePropertyByPricescaleID(inVenueXML: I.VenueXML, inID: string): I.Pricescale5 | undefined { const venuePricescaleArr: I.Pricescale5[] = inVenueXML.price_structure[0].pricescale; return venuePricescaleArr.find(obj => { diff --git a/client/src/types/types.d.ts b/client/src/types/types.d.ts index 7af08d2..4dea3c3 100644 --- a/client/src/types/types.d.ts +++ b/client/src/types/types.d.ts @@ -90,6 +90,7 @@ export interface Config { childHasVenueXML: boolean; urlCSSjQueryUI: string; maxSelectedSeats: number; + state: I.State; } export interface Message {