before seatmapXML

client/src/communication.ts

@@ -0,0 +1,59 @@
+import * as I from "./types";
+import * as xml from "./xml";
+
+// rework try/catch ?
+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(`Element with ID ${to} does not exist`);
+            return;
+        }
+
+        const receiver: any = document.getElementById(to);
+        if (receiver.contentWindow !== null)
+            receiver.contentWindow.postMessage(JSON.stringify(data), "*")
+    }
+}
+
+export function listenToMessages(inHandler?: CallableFunction): void {
+    window.addEventListener('message', (e: any): void => {
+        if (inHandler)
+            inHandler(e);
+    });
+}
+
+export function sendXML(inUrl: string, inTo: string, inEvent: string, inFrom: string, inDate: number = Date.now()) {
+    xml.getXMLPromise(inUrl).then((result: unknown): void => {
+        const message: I.Message = {
+            date: inDate,
+            from: inFrom,
+            message: result,
+            event: inEvent
+        }
+        sendMessage(message, inTo);
+    }).catch(function (err) {
+        console.error(err);
+    });
+}
+
+export function sendEventToChild(inEvent: string) {
+    const message: I.Message = {
+        message: null,
+        from: "parent",
+        event: inEvent,
+        date: Date.now()
+    };
+    sendMessage(message, "iframeSeatmap");
+}
+
+export function sendEventToParent(inEvent: string) {
+    const message: I.Message = {
+        message: null,
+        from: "child",
+        event: inEvent,
+        date: Date.now()
+    };
+    sendMessage(message, "parent");
+}

client/src/inject.ts

@@ -1,11 +1,20 @@
-import $ from 'jquery';
+// import $, { Callbacks } from 'jquery';
+var $ = require("jquery");
 import 'jquery-ui';
 import * as I from "./types";
 import Utils from './utils';
-var parseString = require('xml2js').parseString;
+import * as communication from "./communication";
-import axios from 'axios';
+// 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;
 
-const config: I.config = {
+const config: I.Config = {
     debug: true,
     branch: "staging",
     urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
@@ -13,100 +22,112 @@ const config: I.config = {
     cssSeatmapMaster: "https://tickets.zinomedia.de/dist/style.css",
     cssSeatmapStaging: "https://staging.tickets.zinomedia.de/dist/style.css",
 }
+let inputsWithValue: I.InputsWithValue;
 
-const checkoutParams: string[] = [
+// 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'
+//     '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))
 
-const checkoutParamSerialized = encodeURIComponent(JSON.stringify(checkoutParams))
-let inputsWithValue: I.inputsWithValue;
 
 window.addEventListener('load', function () {
     const content: string = new XMLSerializer().serializeToString(document);
-    inputsWithValue = getInputs(content);
+    getInputs(content);
 
     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.cssSeatmapStaging, "css", "body");
-    generateSeatmapUrl(content);
+    communication.listenToMessages(messagesHandler);
+    getAdditionalInputs(content);
     console.log(inputsWithValue);
-    checkTrxState();
-
-
-    jQuery("#getVenueXML").on("click", () => {
-        getVenueXML();
-    });
-
-    jQuery("#foobarParent").on("click", () => {
-        Utils.sendMessage({ message: "Hello from parent", date: Date.now() }, "iframeSeatmap");
-    });
-});
-
-function getVenueXML() {
-    axios.get(inputsWithValue["posturl"])
-        .then(function (response) {
-            // handle success
-            console.log(response);
-
-            if (response.status === 200 && response.headers["content-type"] === "text/xml;charset=utf-8") {
-                console.log("looks good");
-
-                parseString(response.data,
-                    { normalizeTags: true, normalize: true, mergeAttrs: true },
-                    function (err: any, result: any) {
-                        if (err)
-                            console.log(err);
-                        else {
-                            // console.log(result)
-                            Utils.sendMessage(result, "iframeSeatmap");
-                        }
-
-                    });
-            }
-
-        })
-        .catch(function (error) {
-            // handle error
-            console.log(error);
-        });
-}
-
-function getInputs(inContent: string): I.inputsWithValue {
-    let inputsWithValue: I.inputsWithValue = {};
-    const parsedHTML: Node[] = $.parseHTML(inContent);
-
-    $(parsedHTML).find('input').each(function () {
-        if (this.value !== '' && checkoutParams.includes(this.name))
-            inputsWithValue[this.name] = this.value;
-    });
-
-    return inputsWithValue;
-}
-
-function generateSeatmapUrl(inContent: string): void {
-    inputsWithValue["event"] = inContent.match(/event:"(.+?)"/)![1];
-    inputsWithValue["holdcode"] = inContent.match(/holdcode:"(.+?)"/)![1];
-    inputsWithValue["posturl"] = inContent.match(/posturl:"(.+?)"/)![1];
-    inputsWithValue["posturl"] = decodeURIComponent(`${inputsWithValue["posturl"]}&event=${inputsWithValue["event"]}&holdcode=${inputsWithValue["holdcode"]}&nocache=0&inclpkg=Y&incloffer=Y&inclcartdetails=Y&inclCart=Y&inclvenue=Y`);
-    inputsWithValue["seatmapUrl"] = (config.branch == "staging" ? config.urlSeatmapStaging : config.urlSeatmapMaster) + `?posturl=${encodeURIComponent(inputsWithValue["posturl"])}&checkoutParams=${checkoutParamSerialized}`;
-    console.log(inputsWithValue["seatmapUrl"]);
-}
-
-function checkTrxState(): void {
-    if (!$.isEmptyObject(inputsWithValue)) {
-        if (inputsWithValue.hasOwnProperty("trxstate") && inputsWithValue["trxstate"] === "20") {
-            console.log(inputsWithValue["posturl"]);
     getImportantNote();
     modifySeatmapButton();
     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");
+    });
+});
+
+function messagesHandler(e: any) {
+    if (typeof (e.data) !== 'string')
+        return;
+
+    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,
+                from: "parent",
+                event: "parent_init_sendInputsWithValue",
+                date: Date.now()
+            };
+            communication.sendMessage(message, "iframeSeatmap")
+            break;
         }
+        case "child_init_needVenueXML": {
+            communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "parent_init_sendVenueXML", "parent");
+            break;
+        }
+        case "child_needSeatmapXML": {
+            const seatmapUrl: string = generateSeatmapUrl(data.message);
+            communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent");
+            break;
+        }
+
+        default:
+            break;
     }
 }
 
+function generateSeatmapUrl(seatmapId : string): string {
+    return `${inputsWithValue["posturlRawDecoded"]}&inclseatmap=Y&seatmap=${seatmapId}`;
+}
+
+
+function getVenueLocation(): string {
+    let span: string[] = [];
+    jQuery(".venue span").each(function () {
+        span.push(jQuery(this).text());
+    });
+
+    return span.join(", ");
+}
+
+function getInputs(inContent: string): void {
+    const parsedHTML: Node[] = $.parseHTML(inContent);
+    let inputs: { [key: string]: string } = {};
+
+    $(parsedHTML).find('input').each(function (this: any) {
+        const name: string = this.name;
+        const value: string = this.value;
+        if (value !== '')
+            inputs[name] = value;
+    });
+
+    inputsWithValue = { ...inputsWithValue, ...inputs };
+}
+
+
 // todo: check with different venues
 function getImportantNote(): void {
     const importantNote: string | null = $(".important_note")[0].textContent;
@@ -139,36 +160,6 @@ function createDialog(): void {
     });
 }
 
-// $(window).on('resize', function(): void{
-//     console.log("resizing");
-//     var win = $(this); //this = window
-
-//     let dlg = $("#dialogSeatmap"); // Get the dialog container.
-//     var width: number = <number>win.width();
-//     var height: number = <number>win.height();
-
-//     // Provide some space between the window edges.
-//     width = width - 50;
-//     height = height - 100; // iframe height will need to be even less to account for space taken up by dialog title bar, buttons, etc.
-
-//     // Set the iframe height.
-//     $(dlg.children("iframe").get(0)).css({"height": `${height}px`, "width": `${width}px`});  
-
-// });
-
-window.addEventListener('message', function (e) {
-    console.log("Parent: Received");
-
-    // Get the sent data
-    const data = e.data;
-    console.log(data);
-
-    // If you encode the message in JSON before sending them, 
-    // then decode here
-    // const decoded = JSON.parse(data);
-});
-
-
 function modifySeatmapButton(): void {
     $(".flash_seat_map_box").remove();
     $('#flash_seat_map_box_id').css({
@@ -193,3 +184,38 @@ function modifySeatmapButton(): void {
         </div>
         `);
 }
+
+// $(window).on('resize', function(): void{
+//     console.log("resizing");
+//     var win = $(this); //this = window
+
+//     let dlg = $("#dialogSeatmap"); // Get the dialog container.
+//     var width: number = <number>win.width();
+//     var height: number = <number>win.height();
+
+//     // Provide some space between the window edges.
+//     width = width - 50;
+//     height = height - 100; // iframe height will need to be even less to account for space taken up by dialog title bar, buttons, etc.
+
+//     // Set the iframe height.
+//     $(dlg.children("iframe").get(0)).css({"height": `${height}px`, "width": `${width}px`});  
+
+// });
+
+// window.addEventListener('message', (e: any): void => {
+//     console.log(e);
+//     if (typeof (e.data) === 'string') {
+//         const data: I.message = JSON.parse(e.data);
+//         if (data.callback)
+//             data.callback(data);
+//     }
+// });
+
+function getAdditionalInputs(inContent: string): void {
+    inputsWithValue["event"] = inContent.match(/event:"(.+?)"/)![1];
+    inputsWithValue["holdcode"] = inContent.match(/holdcode:"(.+?)"/)![1];
+    inputsWithValue["posturlRaw"] = inContent.match(/posturl:"(.+?)"/)![1];
+    inputsWithValue["posturlRawDecoded"] = decodeURIComponent(inputsWithValue["posturlRaw"]);
+    inputsWithValue["posturl"] = decodeURIComponent(`${inputsWithValue["posturlRaw"]}&event=${inputsWithValue["event"]}&holdcode=${inputsWithValue["holdcode"]}&nocache=0&inclpkg=Y&incloffer=Y&inclcartdetails=Y&inclCart=Y&inclvenue=Y`);
+    inputsWithValue["venueLocation"] = getVenueLocation();
+}

client/src/seatmap.ts

@@ -1,24 +1,131 @@
 import jQuery = require("jquery");
-import Utils from './utils';
+import * as xml from "./xml";
+import * as communication from "./communication";
+import * as I from "./types";
+import * as ui from "./ui";
 // var parseString = require('xml2js').parseString;
 // import axios from 'axios';
-
+// import Utils from './utils';
 // let checkoutParams: string[];
 // let posturl: string;
 
+let inputsWithValue: I.InputsWithValue;
 
 window.addEventListener('load', function () {
     jQuery("#foobar").on("click", () => {
-        Utils.sendMessage({ message: "Hello from parent", date: Date.now() }, "parent");
+        communication.sendMessage(<I.Message>{
+            message: "Hello from child",
+            from: "child",
+            event: "foobar",
+            date: Date.now(),
+        }, "parent");
     });
+
+    communication.listenToMessages(messagesHandler);
+
+    // jQuery("#dropdownSeatmap").on("change", (e: HTMLSelectElement) => {
+    //     const value = (<HTMLSelectElement>e).value;
+    //     console.log(e);
+    //     // console.log(e);
+    // });
+
+
+    const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");    
+    if (dropdownSeatmap) {
+        dropdownSeatmap.addEventListener("change", function(this: HTMLSelectElement) {
+            const value: string = this.value;
+            const message: I.Message = {
+                message: value,
+                from: "child",
+                event: "child_needSeatmapXML",
+                date: Date.now()
+            };
+            communication.sendMessage(message, "parent");
+        });
+    }
+
+   
 });
 
-window.addEventListener('message', function(e) {
+// // dropdownSeatmap change
-    console.log("Child: Received");
+// jQuery('#dropdownSeatmap').on('change', function () {
+//     console.log("hi1");
+//     // callback(this);
+// });
 
-    const data = JSON.parse(e.data);
+
+
+function messagesHandler(e: any) {
+    if (typeof (e.data) !== 'string')
+        return;
+
+    const data: I.Message = JSON.parse(e.data);
+    console.log(`child: received from ${data.from}`);
     console.log(data);
-});
+
+    switch (data.event) {
+        case "RefreshDropdown": {
+            const venueXML: I.VenueXML = data.message.map_response;
+            const seatmapListing: I.Seatmap[] = xml.getSeatmapListing(venueXML);
+            ui.setOptionSelect(seatmapListing, "dropdownSeatmap");
+            break;
+        }
+        case "addDropdown": {
+            console.log("adding to dropdown now...");
+            var min = 12,
+                max = 100,
+                select = document.getElementById('dropdownSeatmap');
+
+            for (var i = min; i <= max; i++) {
+                var opt = document.createElement('option');
+                opt.value = i.toString();
+                opt.innerHTML = i.toString();
+                select!.appendChild(opt);
+            }
+            break;
+        }
+        case "parent_init_venue": {
+            communication.sendEventToParent("child_init_needInputsWithValue");
+            break;
+        }
+        case "parent_init_sendVenueXML": {
+            const XML: I.VenueXML = data.message.map_response;
+
+            // fill event info
+            const eventInfo = xml.getEventInfo(XML);
+            ui.setEventInfo(eventInfo, inputsWithValue);
+
+            // fill select dropdown
+            const seatmapListing: I.Seatmap[] = xml.getSeatmapListing(XML);
+            ui.setOptionSelect(seatmapListing, "dropdownSeatmap");
+
+            break;
+        }
+        case "parent_init_sendInputsWithValue": {
+            inputsWithValue = data.message;
+            communication.sendEventToParent("child_init_needVenueXML");
+            break;
+        }
+        case "parent_sendSeatmapXML": {
+            const XML: any = data.message.map_response;
+            console.log(XML);
+            break;
+        }
+
+
+        default:
+            break;
+    }
+}
+
+
+
+// window.addEventListener('message', function(e) {
+//     console.log("Child: Received");
+
+//     const data = JSON.parse(e.data);
+//     console.log(data);
+// });
 
 // jQuery(($) => {
 //     parseQueryString();

client/src/types.ts

@@ -1,9 +1,83 @@
-// inject.ts
+export interface InputsWithValue {
-export interface inputsWithValue {
+    param1: number[];
-    [HTMLInputElement: string]: string;
+    param2: string;
+    param3: string;
+    trxstate: string;
+    etpgcode: string;
+    is_ticket_exchange_request: string;
+    prevtrxstate: string;
+    user_context: string;
+    target_trxstate: string;
+    orgid: string;
+    p_orgid: string;
+    pid: string;
+    supplier_code: string;
+    inventory_filtering_action: string;
+    inventory_month: string;
+    inventory_year: string;
+    upsell_selected: string;
+    listing_type: string;
+    invalid_seats: string;
+    package_pids: string;
+    mlbamsp: string;
+    pay_pal_token: string;
+    APPTE: string;
+    schedule: string;
+    secure_trxn_enabled: string;
+    isCapEnabled: string;
+    supplierCode: string;
+    venueLocation: string;
+    event: string;
+    holdcode: string;
+    posturl: string;
+    posturlRaw: string;
+    posturlRawDecoded: string;
+    seatmapUrl: string;
+    importantNote?: string;
+    importantNoteEncoded?: string;
+
 }
 
-export interface config {
+// export interface InputsWithValue {
+//     [key: string]: string | {
+//         param1: number[];
+//         param2: string; 
+//         param3: string;
+//         trxstate: string;
+//         etpgcode: string;
+//         is_ticket_exchange_request: string;
+//         prevtrxstate: string;
+//         user_context: string;
+//         target_trxstate: string;
+//         orgid: string;
+//         p_orgid: string;
+//         pid: string;
+//         supplier_code: string;
+//         inventory_filtering_action: string;
+//         inventory_month: string;
+//         inventory_year: string;
+//         upsell_selected: string;
+//         listing_type: string;
+//         invalid_seats: string;
+//         package_pids: string;
+//         mlbamsp: string;
+//         pay_pal_token: string;
+//         APPTE: string;
+//         schedule: string;
+//         secure_trxn_enabled: string;
+//         isCapEnabled: string;
+//         supplierCode: string;
+//         venueLocation: string;
+//         event: string;
+//         holdcode: string;
+//         posturl: string;
+//         seatmapUrl: string;
+//         importantNote?: string;
+//         importantNoteEncoded?: string;
+//     }
+// }
+
+export interface Config {
     debug: boolean,
     branch: string,
     urlSeatmapStaging: string,
@@ -12,4 +86,221 @@ export interface config {
     cssSeatmapMaster: string
 }
 
-// seatmap.ts
+export interface Message {
+    message: any | VenueXML,
+    event: string,
+    date: number,
+    from: string,
+    callback?: CallableFunction,
+}
+
+// export interface EventInfo = Event & EventExtend;
+export interface EventInfo extends Event, EventExtend { }
+
+export interface EventExtend {
+    venue_config_capacity: string[];
+    venue_config_code: string[];
+    venue_config_desc: string[];
+    venue_config_id: string[];
+    venue_config_nav_image: string[];
+    venue_config_nav_image_height: string[];
+    venue_config_nav_image_width: string[];
+    start: string[];
+    weekday: string[];
+}
+
+// venueXML
+
+export interface VenueXML {
+    offer: Offer[];
+    event: Event[];
+    venue: Venue[];
+    master_config: MasterConfig[];
+    venue_config: VenueConfig[];
+    pricescale_config: PricescaleConfig[];
+    price_structure: PriceStructure[];
+    seatmap_config: SeatmapConfig3[];
+}
+export interface Offer {
+    id: string[];
+    timestamp: string[];
+}
+
+export interface Event {
+    id: string[];
+    code: string[];
+    desc: string[];
+    public_desc: string[];
+    year: string[];
+    month: string[];
+    day: string[];
+    hour: string[];
+    minute: string[];
+    event_run_code: string[];
+    event_run_desc: string[];
+    event_run_public_desc: string[];
+    timestamp: string[];
+}
+
+export interface Pricescale2 {
+    code: string[];
+    color: string[];
+    desc: string[];
+    id: string[];
+    pricescale_group_id: string[];
+    text_color: string[];
+}
+
+export interface Pricescale {
+    pricescale: Pricescale2[];
+}
+
+export interface BuyerType2 {
+    buyer_type_group_id: string[];
+    code: string[];
+    desc: string[];
+    display_indicator: string[];
+    id: string[];
+}
+
+export interface BuyerType {
+    buyer_type: BuyerType2[];
+}
+
+export interface Venue {
+    code: string[];
+    desc: string[];
+    id: string[];
+    name: string[];
+    timestamp: string[];
+    pricescales: Pricescale[];
+    extended_defs: string[];
+    buyer_types: BuyerType[];
+}
+
+export interface Section {
+    code: string[];
+    desc: string[];
+    type: string[];
+    hover_coords: string[];
+    id: string[];
+}
+
+export interface SectionConfig {
+    section: Section[];
+}
+
+export interface Pricescale3 {
+    id: string[];
+    available: string[];
+}
+
+export interface Section2 {
+    available: string[];
+    capacity: string[];
+    id: string[];
+    max_contiguous: string[];
+    pricescale: Pricescale3[];
+}
+
+export interface SectionInventory {
+    as_of_date: string[];
+    event_id: string[];
+    holdcode_id: string[];
+    section: Section2[];
+}
+
+export interface MasterConfig {
+    capacity: string[];
+    code: string[];
+    desc: string[];
+    id: string[];
+    metadata: string[];
+    nav_image: string[];
+    nav_image_height: string[];
+    nav_image_width: string[];
+    orientation: string[];
+    stage_desc: string[];
+    timestamp: string[];
+    section_config: SectionConfig[];
+    section_inventory: SectionInventory[];
+}
+
+export interface SeatMapConfig {
+    hidden_seat_map_ids: string[];
+    id: string[];
+}
+
+export interface SectionConfig2 {
+    hidden_section_ids: string[];
+}
+
+export interface VenueConfig {
+    capacity: string[];
+    code: string[];
+    desc: string[];
+    id: string[];
+    nav_image: string[];
+    nav_image_height: string[];
+    nav_image_width: string[];
+    timestamp: string[];
+    seat_map_config: SeatMapConfig[];
+    section_config: SectionConfig2[];
+}
+
+export interface Pricescale4 {
+    id: string[];
+}
+
+export interface PricescaleConfig {
+    code: string[];
+    desc: string[];
+    id: string[];
+    nav_image: string[];
+    nav_image_height: string[];
+    nav_image_width: string[];
+    timestamp: string[];
+    pricescale: Pricescale4[];
+}
+
+export interface BuyerType3 {
+    currency: string[];
+    display_order: string[];
+    id: string[];
+    price: string[];
+    all_in_price: string[];
+}
+
+export interface Pricescale5 {
+    currency: string[];
+    display_order: string[];
+    id: string[];
+    ref_price: string[];
+    all_in_ref_price: string[];
+    buyer_type: BuyerType3[];
+}
+
+export interface PriceStructure {
+    code: string[];
+    desc: string[];
+    event_id: string[];
+    id: string[];
+    sales_type: string[];
+    timestamp: string[];
+    pricescale: Pricescale5[];
+}
+
+export interface Seatmap {
+    code: string[];
+    desc: string[];
+    hotspot_coords: string[];
+    id: string[];
+}
+
+export interface SeatmapConfig3 {
+    code: string[];
+    desc: string[];
+    id: string[];
+    timestamp: string[];
+    seatmap: Seatmap[];
+}

client/src/ui.ts

@@ -0,0 +1,21 @@
+import * as I from "./types";
+
+export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string) {
+    const seatmapDropdown: HTMLElement | null = document.getElementById(inId);
+    if (seatmapDropdown) {
+        for (let seatmapObj of inSeatmapListing) {
+            var opt = document.createElement('option');
+            opt.value = seatmapObj.id[0];
+            opt.innerHTML = seatmapObj.desc[0];
+            seatmapDropdown.appendChild(opt);
+        }
+    }
+}
+
+export function setEventInfo(inEventInfo: I.EventInfo, inInputswithValue: I.InputsWithValue): void {
+    // console.log(inEventInfo);
+    jQuery("#eventInfoDesc span.fl-heading-text")[0].childNodes[0].textContent = inEventInfo.desc[0];
+    jQuery("#eventInfoDate p")[0].childNodes[0].textContent = inEventInfo.start[0];
+    jQuery("#eventInfoCapacity p")[0].childNodes[0].textContent = inEventInfo.venue_config_capacity[0];
+    jQuery("#eventInfoLocation p")[0].childNodes[0].textContent = inInputswithValue.venueLocation;
+}

client/src/utils.ts

@@ -1,8 +1,4 @@
 export default class Utils {
-    static foobar(): void {
-        console.log("foobar");
-    }
-
     static waitForElement(selector: string, callback: Function, checkFrequencyInMs: number = 100, timeoutInMs: number = 10000) {
         let startTimeInMs: number = Date.now();
         (function loopSearch(): void {
@@ -23,7 +19,7 @@ export default class Utils {
     }
 
     static delay(ms: number) {
-        return new Promise( resolve => setTimeout(resolve, ms) );
+        return new Promise(resolve => setTimeout(resolve, ms));
     }
 
     static inject(content: string, type: string = "js", loc: string = "head") {
@@ -55,14 +51,8 @@ export default class Utils {
             document.head.appendChild(script);
     }
 
-    static sendMessage(message: object, selector: string): void {
+    static getDayName(date: Date, locale: string) {
-        if (selector === "parent")
+        return date.toLocaleDateString(locale, { weekday: 'long' });        
-            window.parent.postMessage(JSON.stringify(message), '*');
-        else {
-            const receiver: any = document.getElementById(selector);
-            if (receiver.contentWindow !== null)
-                receiver.contentWindow.postMessage(JSON.stringify(message), "*")
     }
-    }
-
 }
+

client/src/xml.ts

@@ -0,0 +1,57 @@
+import axios, { AxiosResponse } from 'axios';
+var xml2jsParser = require('xml2js').parseString;
+import * as I from "./types";
+import Utils from './utils';
+
+export function getXMLPromise(url: string): Promise<unknown> {
+    return axios.get(url)
+        .then(function (response: void | AxiosResponse<any>) {
+
+            return new Promise(function (resolve: any, reject: any) {
+                const AxiosResponse = <AxiosResponse>response;
+                if (AxiosResponse.status === 200 && AxiosResponse.headers["content-type"] === "text/xml;charset=utf-8") {
+                    xml2jsParser(AxiosResponse.data, { normalizeTags: true, normalize: true, mergeAttrs: true }, function (err: any, result: any) {
+                        if (err)
+                            reject(err);
+                        else {
+                            resolve(result);
+                        }
+                    });
+                }
+            });
+
+        })
+        .catch(function (error) {
+            console.log(error);
+        })
+}
+
+export function getSeatmapListing(inVenueXML: I.VenueXML): I.Seatmap[] {
+    return inVenueXML.seatmap_config[0].seatmap;
+}
+
+export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo {
+    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.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") ];
+
+    const eventExtend: I.EventExtend = {
+        venue_config_capacity: venue_config.capacity,
+        venue_config_code: venue_config.code,
+        venue_config_desc: venue_config.desc,
+        venue_config_id: venue_config.id,
+        venue_config_nav_image: venue_config.nav_image,
+        venue_config_nav_image_height: venue_config.nav_image_height,
+        venue_config_nav_image_width: venue_config.nav_image_width,
+        start: start,
+        weekday: weekday,
+    };
+
+    let eventInfo: I.EventInfo = { ...eventObj, ...eventExtend };
+
+    return eventInfo;
+}
+