restructured inject.js

client/src/inject.ts

@@ -1,30 +1,18 @@
-// import $, { Callbacks } from 'jquery';
+var jQuery = require("jquery");
-var $ = require("jquery");
 import 'jquery-ui';
-import * as I from "./types";
+import * as I from "./types/types";
-import Utils from './utils';
+import Utils from './modules/utils';
-import * as communication from "./communication";
+import * as Communication from "./modules/communication";
+import * as Parser from './modules/parser';
+import * as UI from "./modules/ui";
+import { config } from "./modules/config";
 
-export const config: I.Config = {
-    debug: true,
-    branch: "staging",
-    urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
-    urlSeatmapMaster: "https://tickets.zinomedia.de",
-    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;
 let childHasVenueXML: boolean = false;
 
 window.addEventListener('load', function () {
     const content: string = new XMLSerializer().serializeToString(document);
-    getInputs(content);
+    Parser.getInputs(content, inputsWithValue)
 
     console.log(inputsWithValue["trxstate"]);
     console.log(/posturl:"(.+?)"/.test(content));
@@ -34,16 +22,17 @@ window.addEventListener('load', function () {
         return;
 
     Utils.inject(config.urlCSSParentStaging, "css", "body");
-    communication.listenToMessages(messagesHandler);
+    Communication.listenToMessages(messagesHandler);
-    getAdditionalInputs(content);
+    Parser.getAdditionalInputs(content, inputsWithValue);    
-    console.log(inputsWithValue);
+    Parser.getImportantNote(inputsWithValue);
-    getImportantNote();
     jQuery(".flash_seat_map_box").remove();
-    injectBookingBtn();
+    UI.injectBookingBtn();
-    createDialog();
+    UI.createDialog(childHasVenueXML);
+
+    console.log(inputsWithValue);
 
     jQuery("#foobarParent").on("click", () => {
-        communication.sendEventToChild("parent_init_venue");
+        Communication.sendEventToChild("parent_init_venue");
     });
 });
 
@@ -55,7 +44,6 @@ function messagesHandler(e: any) {
     console.log(`parent: received from ${data.from}`);
     console.log(data);
 
-
     switch (data.event) {
         case "child_init_needInputsWithValue": {
             const message: I.Message = {
@@ -64,17 +52,17 @@ function messagesHandler(e: any) {
                 event: "parent_init_sendInputsWithValue",
                 date: Date.now()
             };
-            communication.sendMessage(message, "iframeSeatmap")
+            Communication.sendMessage(message, "iframeSeatmap")
             break;
         }
         case "child_init_needVenueXML": {
-            communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "parent_init_sendVenueXML", "parent");
+            Communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "parent_init_sendVenueXML", "parent");
             childHasVenueXML = true;
             break;
         }
         case "child_needSeatmapXML": {
-            const seatmapUrl: string = generateSeatmapUrl(data.message);
+            const seatmapUrl: string = `${inputsWithValue["posturlRawDecoded"]}&inclseatmap=Y&seatmap=${data.message}`
-            communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent");
+            Communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent");
             break;
         }
         case "child_seatmap_ready": {
@@ -85,127 +73,4 @@ function messagesHandler(e: any) {
         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;
-
-    if (importantNote?.trim().length) {
-        const importantNoteEncoded: string = encodeURIComponent(importantNote);
-        inputsWithValue["importantNote"] = importantNote;
-        inputsWithValue["importantNoteEncoded"] = importantNoteEncoded;
-    }
-}
-
-function createDialog(): void {
-    jQuery("#dialogSeatmap").append($("<iframe id='iframeSeatmap' scrolling='no' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen width='100%' height='" + window.outerHeight + "px' />")
-        .attr("src", "https://staging.tickets.zinomedia.de/"))
-        .dialog({
-            modal: true,
-            autoOpen: false,
-            closeOnEscape: true,
-            draggable: false,
-            hide: true,
-            show: true,
-            resizable: false,
-            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 injectBookingBtn(): void {
-    jQuery('#flash_seat_map_box_id').css({
-        "display": "block",
-        "position": "relative",
-        "width": "100%"
-    });
-    jQuery("#flash_seat_map_box_id").append(`
-    <div id="containerBookingBtn">
-        <button type="button" id="openSeatmap">
-        <div>
-            <img src="https://staging.tickets.zinomedia.de/dist/stadium.png">
-        </div>
-        Saalplanbuchung <br/><br/>
-        <span>Suchen Sie Ihren Platz selbst aus</span>
-        </button> <br/>
-        <button type="button" id="foobarParent">foobarParent</button> <br/>
-        <div id="dialogSeatmap" hidden="hidden"></div>
-    </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/modules/communication.ts

@@ -1,4 +1,4 @@
-import * as I from "./types";
+import * as I from "../types/types";
 import * as xml from "./xml";
 
 // rework try/catch ?

client/src/modules/config.ts

@@ -0,0 +1,16 @@
+import * as I from "../types/types";
+
+export const config: I.Config = {
+    debug: true,
+    branch: "staging",
+    urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
+    urlSeatmapMaster: "https://tickets.zinomedia.de",
+    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"
+}

client/src/modules/parser.ts

@@ -0,0 +1,44 @@
+import * as I from "../types/types";
+
+export function getVenueLocation(): string {
+    let span: string[] = [];
+    jQuery(".venue span").each(function () {
+        span.push(jQuery(this).text());
+    });
+
+    return span.join(", ");
+}
+
+export function getInputs(inContent: string, inInputsWithValue: I.InputsWithValue): void  {
+    const parsedHTML: Node[] = $.parseHTML(inContent);
+    let inputs: I.Inputs = {};
+
+    jQuery(parsedHTML).find('input').each(function (this: any) {
+        const name: string = this.name;
+        const value: string = this.value;
+        if (value !== '')
+            inputs[name] = value;
+    });
+
+    inInputsWithValue = { ...inInputsWithValue, ...inputs };
+}
+
+// todo: check with different venues
+export function getImportantNote(inInputsWithValue: I.InputsWithValue): void  {
+    const importantNote: string | null = $(".important_note")[0].textContent;
+
+    if (importantNote?.trim().length) {
+        const importantNoteEncoded: string = encodeURIComponent(importantNote);
+        inInputsWithValue["importantNote"] = importantNote;
+        inInputsWithValue["importantNoteEncoded"] = importantNoteEncoded;
+    }
+}
+
+export function getAdditionalInputs(inContent: string, inInputsWithValue: I.InputsWithValue): void {
+    inInputsWithValue["event"] = inContent.match(/event:"(.+?)"/)![1];
+    inInputsWithValue["holdcode"] = inContent.match(/holdcode:"(.+?)"/)![1];
+    inInputsWithValue["posturlRaw"] = inContent.match(/posturl:"(.+?)"/)![1];
+    inInputsWithValue["posturlRawDecoded"] = decodeURIComponent(inInputsWithValue["posturlRaw"]);
+    inInputsWithValue["posturl"] = decodeURIComponent(`${inInputsWithValue["posturlRaw"]}&event=${inInputsWithValue["event"]}&holdcode=${inInputsWithValue["holdcode"]}&nocache=0&inclpkg=Y&incloffer=Y&inclcartdetails=Y&inclCart=Y&inclvenue=Y`);
+    inInputsWithValue["venueLocation"] = getVenueLocation();
+}

client/src/modules/ui.ts

@@ -0,0 +1,71 @@
+import * as I from "../types/types";
+import * as Communication from "./communication";
+
+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;
+}
+
+export function createDialog(inChildHasVenueXML: boolean): void {
+    jQuery("#dialogSeatmap").append($("<iframe id='iframeSeatmap' scrolling='no' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen width='100%' height='" + window.outerHeight + "px' />")
+        .attr("src", "https://staging.tickets.zinomedia.de/"))
+        .dialog({
+            modal: true,
+            autoOpen: false,
+            closeOnEscape: true,
+            draggable: false,
+            hide: true,
+            show: true,
+            resizable: false,
+            title: "",
+            width: "99%",
+            height: "auto",
+            close: () => {
+                jQuery('html, body').css('overflow', 'auto');
+            }
+        });
+
+    jQuery("#openSeatmap").on("click", () => {
+        if (!inChildHasVenueXML)
+            Communication.sendEventToChild("parent_init_venue");
+
+        jQuery('html, body').css('overflow', 'hidden');
+        jQuery("#dialogSeatmap").dialog('open');
+    });
+}
+
+export function injectBookingBtn(): void {
+    jQuery('#flash_seat_map_box_id').css({
+        "display": "block",
+        "position": "relative",
+        "width": "100%"
+    });
+    jQuery("#flash_seat_map_box_id").append(`
+    <div id="containerBookingBtn">
+        <button type="button" id="openSeatmap">
+        <div>
+            <img src="https://staging.tickets.zinomedia.de/dist/stadium.png">
+        </div>
+        Saalplanbuchung <br/><br/>
+        <span>Suchen Sie Ihren Platz selbst aus</span>
+        </button> <br/>
+        <button type="button" id="foobarParent">foobarParent</button> <br/>
+        <div id="dialogSeatmap" hidden="hidden"></div>
+    </div>
+    `);
+}

client/src/modules/xml.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosResponse } from 'axios';
 var xml2jsParser = require('xml2js').parseString;
-import * as I from "./types";
+import * as I from "../types/types";
 import Utils from './utils';
 
 export function getXMLPromise(url: string): Promise<unknown> {
@@ -53,5 +53,4 @@ export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo {
     let eventInfo: I.EventInfo = { ...eventObj, ...eventExtend };
 
     return eventInfo;
-}
+}
-

client/src/seatmap.ts

@@ -1,10 +1,10 @@
 import jQuery = require("jquery");
-import * as xml from "./xml";
+import * as XMLHelper from "./modules/xml";
-import * as communication from "./communication";
+import * as Communication from "./modules/communication";
-import * as I from "./types";
+import * as I from "./types/types";
-import * as ui from "./ui";
+import * as UI from "./modules/ui";
-import { config } from "./inject";
+import { config } from "./modules/config";
-import Utils from './utils';
+import Utils from './modules/utils';
 import Panzoom from '@panzoom/panzoom';
 // var sc = require("../libs/jQuery-Seat-Charts/jquery.seat-charts.js");
 // var parseString = require('xml2js').parseString;
@@ -20,7 +20,7 @@ let seatmap: any;
 window.addEventListener('load', function () {
 
     jQuery("#foobar").on("click", () => {
-        communication.sendMessage(<I.Message>{
+        Communication.sendMessage(<I.Message>{
             message: "Hello from child",
             from: "child",
             event: "foobar",
@@ -31,7 +31,7 @@ window.addEventListener('load', function () {
     Utils.inject(config.urlJSCStaging, "js", "head");
     Utils.inject(config.urlCSSJSCStaging, "css", "body");
     Utils.inject(config.urlCSSChildStaging, "css", "body");
-    communication.listenToMessages(messagesHandler);
+    Communication.listenToMessages(messagesHandler);
     Utils.waitForSeatmap(showBookingBtnParent);
 
     const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");
@@ -40,7 +40,7 @@ window.addEventListener('load', function () {
             controlLoftloader("show");
             const value: string = this.value;
             destroyCurrentSeatmap();
-            communication.needSeatmapXML(value);
+            Communication.needSeatmapXML(value);
         });
     }
 
@@ -67,7 +67,7 @@ function showBookingBtnParent(): void {
         event: "child_seatmap_ready",
         date: Date.now()
     };
-    communication.sendMessage(message, "parent");
+    Communication.sendMessage(message, "parent");
 }
 
 
@@ -151,8 +151,8 @@ function messagesHandler(inE: any) {
     switch (data.event) {
         case "RefreshDropdown": {
             const venueXML: I.VenueXML = data.message.map_response;
-            const seatmapListing: I.Seatmap[] = xml.getSeatmapListing(venueXML);
+            const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(venueXML);
-            ui.setOptionSelect(seatmapListing, "dropdownSeatmap");
+            UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
             break;
         }
         case "addDropdown": {
@@ -171,31 +171,31 @@ function messagesHandler(inE: any) {
         }
         case "parent_init_venue": {
             controlLoftloader("show");
-            communication.sendEventToParent("child_init_needInputsWithValue");
+            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);
+            const eventInfo = XMLHelper.getEventInfo(XML);
-            ui.setEventInfo(eventInfo, inputsWithValue);
+            UI.setEventInfo(eventInfo, inputsWithValue);
 
             // fill select dropdown
-            const seatmapListing: I.Seatmap[] = xml.getSeatmapListing(XML);
+            const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(XML);
             console.log(seatmapListing);
-            ui.setOptionSelect(seatmapListing, "dropdownSeatmap");
+            UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
 
             // display first seatmapXML
             const id: string = seatmapListing[0].id[0];
             jQuery("#dropdownSeatmap").val(id);
-            communication.needSeatmapXML(id);            
+            Communication.needSeatmapXML(id);            
 
             break;
         }
         case "parent_init_sendInputsWithValue": {
             inputsWithValue = data.message;
-            communication.sendEventToParent("child_init_needVenueXML");
+            Communication.sendEventToParent("child_init_needVenueXML");
             break;
         }
         case "parent_sendSeatmapXML": {

client/src/types/types.d.ts

@@ -1,3 +1,7 @@
+export interface Inputs {
+    [key: string]: string;
+}
+
 export interface InputsWithValue {
     param1: number[];
     param2: string;
@@ -38,45 +42,6 @@ export interface InputsWithValue {
 
 }
 
-// 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;
@@ -101,7 +66,7 @@ export interface Message {
 }
 
 // export interface EventInfo = Event & EventExtend;
-export interface EventInfo extends Event, EventExtend { }
+export interface EventInfo extends Event, EventExtend {}
 
 export interface EventExtend {
     venue_config_capacity: string[];

client/src/ui.ts

@@ -1,21 +0,0 @@
-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/tsconfig.json

@@ -72,7 +72,7 @@
     "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
   ],
   "exclude": [
     "node_modules"