diff --git a/client/src/communication.ts b/client/src/communication.ts index e0ba5c8..4dc7fd1 100644 --- a/client/src/communication.ts +++ b/client/src/communication.ts @@ -56,4 +56,14 @@ export function sendEventToParent(inEvent: string) { date: Date.now() }; sendMessage(message, "parent"); +} + +export function needSeatmapXML(inID: string) { + const message: I.Message = { + message: inID, + from: "child", + event: "child_needSeatmapXML", + date: Date.now() + }; + sendMessage(message, "parent"); } \ No newline at end of file diff --git a/client/src/helloWorld.ts b/client/src/helloWorld.ts deleted file mode 100644 index 37dcda5..0000000 --- a/client/src/helloWorld.ts +++ /dev/null @@ -1 +0,0 @@ -console.log("Hello World 133782222dddddddddaawwwwd"); \ No newline at end of file diff --git a/client/src/inject.ts b/client/src/inject.ts index 3d59c8c..f444494 100644 --- a/client/src/inject.ts +++ b/client/src/inject.ts @@ -2,37 +2,25 @@ var $ = require("jquery"); import 'jquery-ui'; import * as I from "./types"; -// import Utils from './utils'; +import Utils from './utils'; import * as communication from "./communication"; -// import { getEventInfo } from './xml'; -// var parseString = require('xml2js').parseString; -// import axios, { AxiosPromise, AxiosResponse, Method } from 'axios'; -// import axios, { AxiosResponse } from 'axios'; -// import * as xml from "./xml"; -// import { parseStringPromise } from 'xml2js'; -// const xml2js = require('xml2js'); -// const util = require('util'); -// var xml2jsParser = require('xml2js').parseString; export const config: I.Config = { debug: true, branch: "staging", urlSeatmapStaging: "https://staging.tickets.zinomedia.de", urlSeatmapMaster: "https://tickets.zinomedia.de", - urlCSSSeatmapMaster: "https://tickets.zinomedia.de/dist/style.css", - urlCSSSeatmapStaging: "https://staging.tickets.zinomedia.de/dist/style.css", - urlSeatChartsStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js", - urlSeatChartsMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js", - urlCSSSeatChartsStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css", - urlCSSSeatChartsMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css" + urlCSSChildMaster: "https://tickets.zinomedia.de/dist/styleChild.css", + urlCSSChildStaging: "https://staging.tickets.zinomedia.de/dist/styleChild.css", + urlCSSParentMaster: "https://tickets.zinomedia.de/dist/styleParent.css", + urlCSSParentStaging: "https://staging.tickets.zinomedia.de/dist/styleParent.css", + urlJSCStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js", + urlJSCMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js", + urlCSSJSCStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css", + urlCSSJSCMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css" } let inputsWithValue: I.InputsWithValue; - -// const checkoutParams: string[] = [ -// 'APPTE', 'age_consent_is_checked', 'agency', 'cancelAndRedirectTrxState', 'cogid', 'coids', 'discount=A=IE', 'discount=A=IV', 'discountdesc=A=IE', 'discountdesc=A=IV', 'discountfees=A=IE', 'discountfees=A=IV', 'discountprice=A=IE', 'discountprice=A=IV', 'dpa_selection', 'etpgcode', 'flashDetected', 'gid', 'hbx_discount_prices', 'hbx_discounts', 'hbx_offered_pg', 'hbx_perf_codes', 'hbx_perf_sub_codes', 'hbx_pids', 'hbx_requested_pg', 'hbx_selected_tixx', 'hbx_upsell_flag', 'request_type', 'invalid_seats', 'inventory_filtering_action', 'inventory_month', 'inventory_year', 'isCapEnabled', 'is_availability_switch_from_map', 'is_ticket_exchange_request', 'ism_map_current_state_json_data', 'jcarousel_auto_off_val', 'listing_type', 'mainEventPID', 'map_coupon_code', 'mlbamsp', 'oid', 'ooids', 'orderkey', 'orgid', 'p_orgid', 'package_pids', 'parent_offer_id', 'pay_pal_token', 'pid', 'prevtrxstate', 'recapToken', 'redeem_voucher_data_event_mapping', 'replay_request', 'request_action', 's_mem_tkt_ren_retrieval', 'schedule', 'secure_trxn_enabled', 'selected_seat_indexes', 'selected_upsell_option', 'supplierCode', 'supplier_code', 'target_name_value', 'target_prev_trxstate', 'target_trxstate', 'target_url', 'timeout_seconds', 'trxstate', 'upsell_selected', 'user_context', 'valid_coupon_code_message' -// ]; -// const checkoutParamSerialized = encodeURIComponent(JSON.stringify(checkoutParams)) - +let childHasVenueXML: boolean = false; window.addEventListener('load', function () { const content: string = new XMLSerializer().serializeToString(document); @@ -45,25 +33,15 @@ window.addEventListener('load', function () { if (inputsWithValue["trxstate"] !== "20" || /posturl:"(.+?)"/.test(content) === false) return; - // Utils.inject(config.urlCSSSeatChartsStaging, "css", "body"); - // Utils.inject(config.urlCSSSeatmapStaging, "css", "body"); + Utils.inject(config.urlCSSParentStaging, "css", "body"); communication.listenToMessages(messagesHandler); getAdditionalInputs(content); console.log(inputsWithValue); getImportantNote(); - modifySeatmapButton(); + jQuery(".flash_seat_map_box").remove(); + injectBookingBtn(); createDialog(); - jQuery("#getVenueXML").on("click", () => { - // const message: I.Message = { - // message: inputsWithValue, - // from: "parent", - // event: "sendInputsWithValue", - // date: Date.now() - // }; - // communication.sendMessage(message, "iframeSeatmap") - // communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "getEventInfo", "child"); - }); jQuery("#foobarParent").on("click", () => { communication.sendEventToChild("parent_init_venue"); }); @@ -91,6 +69,7 @@ function messagesHandler(e: any) { } case "child_init_needVenueXML": { communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "parent_init_sendVenueXML", "parent"); + childHasVenueXML = true; break; } case "child_needSeatmapXML": { @@ -98,17 +77,20 @@ function messagesHandler(e: any) { communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent"); break; } + case "child_seatmap_ready": { + jQuery("#containerBookingBtn").show(); + break; + } default: break; } } -function generateSeatmapUrl(seatmapId : string): string { +function generateSeatmapUrl(seatmapId: string): string { return `${inputsWithValue["posturlRawDecoded"]}&inclseatmap=Y&seatmap=${seatmapId}`; } - function getVenueLocation(): string { let span: string[] = []; jQuery(".venue span").each(function () { @@ -155,39 +137,42 @@ function createDialog(): void { hide: true, show: true, resizable: false, - title: "Saalplanbuchung", + title: "", width: "99%", height: "auto", + close: () => { + jQuery('html, body').css('overflow', 'auto'); + } }); jQuery("#openSeatmap").on("click", () => { + if (!childHasVenueXML) + communication.sendEventToChild("parent_init_venue"); + + jQuery('html, body').css('overflow', 'hidden'); jQuery("#dialogSeatmap").dialog('open'); }); } -function modifySeatmapButton(): void { - $(".flash_seat_map_box").remove(); - $('#flash_seat_map_box_id').css({ +function injectBookingBtn(): void { + jQuery('#flash_seat_map_box_id').css({ "display": "block", "position": "relative", "width": "100%" }); - $('#get_flash').css('display', 'none'); - $("#flash_seat_map_box_id").append(` -
-
-
- - + jQuery("#flash_seat_map_box_id").append(` +
+
+
+ +
+ `); } // $(window).on('resize', function(): void{ diff --git a/client/src/seatmap.ts b/client/src/seatmap.ts index a396f85..a900fee 100644 --- a/client/src/seatmap.ts +++ b/client/src/seatmap.ts @@ -28,45 +28,49 @@ window.addEventListener('load', function () { }, "parent"); }); - Utils.inject(config.urlSeatChartsStaging, "js", "head"); - Utils.inject(config.urlCSSSeatChartsStaging, "css", "body"); - Utils.inject(config.urlCSSSeatmapStaging, "css", "body"); + Utils.inject(config.urlJSCStaging, "js", "head"); + Utils.inject(config.urlCSSJSCStaging, "css", "body"); + Utils.inject(config.urlCSSChildStaging, "css", "body"); communication.listenToMessages(messagesHandler); - // Utils.waitForSeatmap(addSeatmap); + Utils.waitForSeatmap(showBookingBtnParent); const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap"); if (dropdownSeatmap) { dropdownSeatmap.addEventListener("change", function (this: HTMLSelectElement) { + controlLoftloader("show"); const value: string = this.value; - const message: I.Message = { - message: value, - from: "child", - event: "child_needSeatmapXML", - date: Date.now() - }; - communication.sendMessage(message, "parent"); + destroyCurrentSeatmap(); + communication.needSeatmapXML(value); }); } - - - // const containerSeatmap: HTMLElement | null = document.getElementById("containerSeatmap"); - // if (containerSeatmap) { - - // const panzoom = Panzoom(containerSeatmap, { - // maxScale: 5 - // }); - - // const btnZoomIn: HTMLElement | null = document.getElementById("panmzoomZoomIn"); - // if (btnZoomIn) - // btnZoomIn.addEventListener('click', panzoom.zoomIn) - - // } - - - }); +function destroyCurrentSeatmap(): void { + jQuery("#containerSeatmapInner").remove(); + jQuery("#htmlSeatmapInner .fl-html").removeAttr("style"); + jQuery("#htmlSeatmapInner .fl-html").append('
'); +} + +function controlLoftloader(inSwitch: string) { + if (inSwitch === "show") + jQuery("body").removeClass("loaded loftloader-loaded"); + else if (inSwitch === "hide") + jQuery("body").addClass("loaded loftloader-loaded"); +} + +function showBookingBtnParent(): void { + console.log("child completely ready"); + const message: I.Message = { + message: null, + from: "child", + event: "child_seatmap_ready", + date: Date.now() + }; + communication.sendMessage(message, "parent"); +} + + function addSeatmap(inSelector: string, inSeatmapInitMap: string[], inSeatmapInitRows: number[], inSeats: I.JSCSeats): void { const containerSeatmap: any = (window).jQuery(inSelector); @@ -166,6 +170,7 @@ function messagesHandler(inE: any) { break; } case "parent_init_venue": { + controlLoftloader("show"); communication.sendEventToParent("child_init_needInputsWithValue"); break; } @@ -178,8 +183,14 @@ function messagesHandler(inE: any) { // fill select dropdown const seatmapListing: I.Seatmap[] = xml.getSeatmapListing(XML); + console.log(seatmapListing); ui.setOptionSelect(seatmapListing, "dropdownSeatmap"); + // display first seatmapXML + const id: string = seatmapListing[0].id[0]; + jQuery("#dropdownSeatmap").val(id); + communication.needSeatmapXML(id); + break; } case "parent_init_sendInputsWithValue": { @@ -191,11 +202,13 @@ function messagesHandler(inE: any) { const XML: any = data.message.map_response; const seatmapInitMap: string[] = generateMap(XML); const seatmapInitRows: number[] = getRows(XML); - const seatmapInitSeats: I.JSCSeats = getSeats(XML); + const seatmapInitSeats: I.JSCSeats = getSeats(XML); console.log(seatmapInitSeats); addSeatmap("#containerSeatmapInner", seatmapInitMap, seatmapInitRows, seatmapInitSeats); - addPanzoom("#containerSeatmapInner", "#panzoomZoomIn", "#panzoomZoomOut", "#panzoomResetZoom"); + addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom"); + + controlLoftloader("hide"); break; } @@ -209,7 +222,7 @@ function getSeats(inXML: any): I.JSCSeats { const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale; let object: any = {}; - for (let key in pricescaleArr) { + for (let key in pricescaleArr) { const seatsObj: I.JSCSeats2 = { "classes": "foobar", "seatsObj": pricescaleArr[key] @@ -259,19 +272,7 @@ function getRows(inXML: any): number[] { const layout: I.SeatmapLayout = inXML.seatmap[0].layouts[0].layout[0]; const height: number = parseInt(layout.height[0]); - return Array.from({ length: height }, (_, i: number) => i + 1) - - // const rows: I.LayoutRow2[] = XML.seatmap[0].layouts[0].layout[0].rows[0].row; - // console.log(rows); - // let seatmapInitRows: number[] = []; - - // rows.forEach(element => { - // const row: I.LayoutRow2 = element; - // const Y: number = parseInt(row.y_cell_coord[0]); - // seatmapInitRows.push(Y); - // }); - - // return seatmapInitRows; + return Array.from({ length: height }, (_, i: number) => i + 1); } function generateMap(inXML: any): string[] { @@ -332,9 +333,9 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP } function getSeatsKey(inSeatID: string, inPricescaleArr: I.SeatmapPricescale[]): string | undefined { - for (let key in inPricescaleArr) { + for (let key in inPricescaleArr) { if (inPricescaleArr[key].mask[0].includes(inSeatID)) - return String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase(); + return String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase(); } return undefined; diff --git a/client/src/types.ts b/client/src/types.ts index 43b827b..c3b4472 100644 --- a/client/src/types.ts +++ b/client/src/types.ts @@ -78,16 +78,18 @@ export interface InputsWithValue { // } export interface Config { - debug: boolean, - branch: string, - urlSeatmapStaging: string, - urlSeatmapMaster: string - urlCSSSeatmapStaging: string, - urlCSSSeatmapMaster: string - urlSeatChartsStaging: string, - urlSeatChartsMaster: string, - urlCSSSeatChartsStaging: string, - urlCSSSeatChartsMaster: string, + debug: boolean; + branch: string; + urlSeatmapStaging: string; + urlSeatmapMaster: string; + urlCSSChildStaging: string; + urlCSSChildMaster: string; + urlJSCStaging: string; + urlJSCMaster: string; + urlCSSJSCStaging: string; + urlCSSJSCMaster: string; + urlCSSParentStaging: string; + urlCSSParentMaster: string; } export interface Message {