postmessage

client/package.json

@@ -4,18 +4,25 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "browserifyf": "func() { browserify --debug -p [ tsify ] $1 > $2; }; func",
+    "watchifyf": "func() { watchify --debug --verbose -p [ tsify ] $1 -o $2; }; func"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "dependencies": {
+  "devDependencies": {
+    "@types/axios": "^0.14.0",
+    "@types/jquery": "^3.5.5",
+    "@types/jqueryui": "^1.12.14",
+    "@types/xml2js": "^0.4.8",
     "browserify": "^17.0.0",
     "jquery": "^3.6.0",
+    "jquery-ui": "^1.12.1",
     "tsify": "^5.0.2",
     "uglify-js": "^3.13.0"
   },
-  "devDependencies": {
+  "dependencies": {
-    "@types/jquery": "^3.5.5"
+    "axios": "^0.21.1",
+    "xml2js": "^0.4.23"
   }
 }

client/src/helloWorld.ts

@@ -0,0 +1 @@
+console.log("Hello World 133782222dddddddddaawwwwd");

client/src/inject.ts

@@ -1,78 +1,195 @@
-import jQuery = require("jquery");
+import $ from 'jquery';
+import 'jquery-ui';
+import * as I from "./types";
+import Utils from './utils';
+var parseString = require('xml2js').parseString;
+import axios from 'axios';
 
-interface IinputsWithValue {
+const config: I.config = {
-    [HTMLInputElement: string]: string;
-}
-
-interface IConfig {
-    debug: boolean,
-    branch: string
-}
-
-const config: IConfig = {
     debug: true,
-    branch: "staging"
+    branch: "staging",
+    urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
+    urlSeatmapMaster: "https://tickets.zinomedia.de",
+    cssSeatmapMaster: "https://tickets.zinomedia.de/dist/style.css",
+    cssSeatmapStaging: "https://staging.tickets.zinomedia.de/dist/style.css",
 }
 
 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'
 ];
 
-jQuery(document).ready(() => {
+const checkoutParamSerialized = encodeURIComponent(JSON.stringify(checkoutParams))
+let inputsWithValue: I.inputsWithValue;
+
+window.addEventListener('load', function () {
     const content: string = new XMLSerializer().serializeToString(document);
+    inputsWithValue = getInputs(content);
 
-    const inputsWithValue: IinputsWithValue = getInputs(content);
+    console.log(inputsWithValue["trxstate"]);
+    console.log(/posturl:"(.+?)"/.test(content));
+
+    if (inputsWithValue["trxstate"] !== "20" || /posturl:"(.+?)"/.test(content) === false)
+        return;
+
+    Utils.inject(config.cssSeatmapStaging, "css", "body");
+    generateSeatmapUrl(content);
     console.log(inputsWithValue);
+    checkTrxState();
 
-    checkTrxState(inputsWithValue, content);
+
+    jQuery("#getVenueXML").on("click", () => {
+        getVenueXML();
     });
 
-function getInputs(inContent: string): IinputsWithValue {
+    jQuery("#foobarParent").on("click", () => {
-    let inputsWithValue: IinputsWithValue = {};
+        Utils.sendMessage({ message: "Hello from parent", date: Date.now() }, "iframeSeatmap");
-    const parsedHTML: Node[] = jQuery.parseHTML(inContent);
+    });
+});
 
-    jQuery(parsedHTML).find('input').each(function() {
+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;
     });
 
-    inputsWithValue["posturl"] = inContent.match(/posturl:"(.+?)"/)![1];  
-    inputsWithValue["event"] = inContent.match(/event:"(.+?)"/)![1];
-    inputsWithValue["holdcode"] = inContent.match(/holdcode:"(.+?)"/)![1];
-    
     return inputsWithValue;
 }
 
-function checkTrxState(inInputsWithValue: IinputsWithValue, content: string): void {
+function generateSeatmapUrl(inContent: string): void {
-    if (!jQuery.isEmptyObject(inInputsWithValue)) {
+    inputsWithValue["event"] = inContent.match(/event:"(.+?)"/)![1];
-        if (inInputsWithValue.hasOwnProperty("trxstate") && inInputsWithValue["trxstate"] === "20") {
+    inputsWithValue["holdcode"] = inContent.match(/holdcode:"(.+?)"/)![1];
-            getImportantNote(inInputsWithValue);            
+    inputsWithValue["posturl"] = inContent.match(/posturl:"(.+?)"/)![1];
-            showSeatmapButton();
+    inputsWithValue["posturl"] = decodeURIComponent(`${inputsWithValue["posturl"]}&event=${inputsWithValue["event"]}&holdcode=${inputsWithValue["holdcode"]}&nocache=0&inclpkg=Y&incloffer=Y&inclcartdetails=Y&inclCart=Y&inclvenue=Y`);
-            injectSeatmap(inInputsWithValue, content);
+    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();
         }
-        else if (inInputsWithValue.hasOwnProperty("prevtrxstate") && inInputsWithValue["prevtrxstate"] === "30")
-            console.log("prevtrxstate 30 identified");
-        else
-            console.log("No action set: trxstate: " + inInputsWithValue["trxstate"]);           
     }
 }
 
 // todo: check with different venues
-function getImportantNote(inInputsWithValue: IinputsWithValue): void {
+function getImportantNote(): void {
-    const importantNote: string | null = jQuery(".important_note")[0].textContent;    
+    const importantNote: string | null = $(".important_note")[0].textContent;
 
-    if (importantNote !== null && importantNote.trim().length) {
+    if (importantNote?.trim().length) {
         const importantNoteEncoded: string = encodeURIComponent(importantNote);
-        inInputsWithValue["importantNote"] = importantNote;
+        inputsWithValue["importantNote"] = importantNote;
-        inInputsWithValue["importantNoteEncoded"] = importantNoteEncoded;
+        inputsWithValue["importantNoteEncoded"] = importantNoteEncoded;
     }
 }
 
-function showSeatmapButton(): void {
+function createDialog(): void {
-    jQuery('#flash_seat_map_box_id').css('display', 'block');
+    jQuery("#dialogSeatmap").append($("<iframe id='iframeSeatmap' scrolling='no' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen width='100%' height='" + window.outerHeight + "px' />")
-    jQuery('#get_flash').css('display', 'none');
+        .attr("src", "https://staging.tickets.zinomedia.de/"))
+        .dialog({
+            modal: true,
+            autoOpen: false,
+            closeOnEscape: true,
+            draggable: false,
+            hide: true,
+            show: true,
+            resizable: false,
+            title: "Saalplanbuchung",
+            width: "99%",
+            height: "auto",
+        });
+
+    jQuery("#openSeatmap").on("click", () => {
+        jQuery("#dialogSeatmap").dialog('open');
+    });
 }
 
-function injectSeatmap(inInputsWithValue: IinputsWithValue, content: string): 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({
+        "display": "block",
+        "position": "relative",
+        "width": "100%"
+    });
+    $('#get_flash').css('display', 'none');
+    $("#flash_seat_map_box_id").append(`
+        <div style=
+            'margin: 0;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            -ms-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);'
+        >
+        <button type='button' id='openSeatmap'>Saalplanbuchung</button> <br/>
+        <button type='button' id='foobarParent'>foobarParent</button> <br/>
+        <button type='button' id='getVenueXML'>getVenueXML</button>
+        <div id="dialogSeatmap" hidden="hidden"></div>
+        </div>
+        `);
 }

client/src/seatmap.ts

@@ -0,0 +1,47 @@
+import jQuery = require("jquery");
+import Utils from './utils';
+// var parseString = require('xml2js').parseString;
+// import axios from 'axios';
+
+// let checkoutParams: string[];
+// let posturl: string;
+
+
+window.addEventListener('load', function () {
+    jQuery("#foobar").on("click", () => {
+        Utils.sendMessage({ message: "Hello from parent", date: Date.now() }, "parent");
+    });
+});
+
+window.addEventListener('message', function(e) {
+    console.log("Child: Received");
+
+    const data = JSON.parse(e.data);
+    console.log(data);
+});
+
+// jQuery(($) => {
+//     parseQueryString();
+//     console.log(checkoutParams);
+//     console.log(posturl);
+
+//     axios.get(posturl)
+//     .then(function (response) {
+//         // handle success
+//         console.log(response);
+//     })
+//     .catch(function (error) {
+//         // handle error
+//         console.log(error);
+//     });
+    // .then(function () {
+    //     // always executed
+    // });
+
+// });
+
+// function parseQueryString() {
+//     const urlParams: URLSearchParams = new URLSearchParams(window.location.search);
+//     checkoutParams = JSON.parse(<string>urlParams.get('checkoutParams'));
+//     posturl = <string>urlParams.get('posturl');
+// }

client/src/types.ts

@@ -0,0 +1,15 @@
+// inject.ts
+export interface inputsWithValue {
+    [HTMLInputElement: string]: string;
+}
+
+export interface config {
+    debug: boolean,
+    branch: string,
+    urlSeatmapStaging: string,
+    urlSeatmapMaster: string
+    cssSeatmapStaging: string,
+    cssSeatmapMaster: string
+}
+
+// seatmap.ts

client/src/utils.ts

@@ -0,0 +1,68 @@
+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 {
+            if (document.querySelector(selector) != null) {
+                console.log("executing");
+                callback();
+                return;
+            }
+            else {
+                console.log("repeating");
+                setTimeout(function (): void {
+                    if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
+                        return;
+                    loopSearch();
+                }, checkFrequencyInMs);
+            }
+        })();
+    }
+
+    static delay(ms: number) {
+        return new Promise( resolve => setTimeout(resolve, ms) );
+    }
+
+    static inject(content: string, type: string = "js", loc: string = "head") {
+        var script: HTMLLinkElement | HTMLScriptElement;
+
+        if (type === "js") {
+            script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = content;
+        }
+        else if (type === "css") {
+            script = document.createElement('link');
+            script.type = 'text/css';
+            script.rel = "stylesheet"
+            script.href = content;
+        }
+        else if (type === "script") {
+            script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.innerHTML = content;
+        }
+        else
+            return;
+    
+
+        if (loc === "body")
+            document.body.appendChild(script);
+        else if (loc === "head")
+            document.head.appendChild(script);      
+    }
+
+    static sendMessage(message: object, selector: string): void {
+        if (selector === "parent")
+            window.parent.postMessage(JSON.stringify(message), '*');
+        else {
+            const receiver: any = document.getElementById(selector);
+            if (receiver.contentWindow !== null)
+                receiver.contentWindow.postMessage(JSON.stringify(message), "*")
+        }            
+    }
+
+}

client/tsconfig.json

@@ -8,8 +8,7 @@
     "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     "lib": [
       "es2016",
-      "dom",
+      "dom"
-      "es5"
     ],                                   /* Specify library files to be included in the compilation. */
     "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
@@ -31,20 +30,20 @@
     /* Strict Type-Checking Options */
     "strict": true,                              /* Enable all strict type-checking options. */
     "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,                    /* Enable strict null checks. */
+    "strictNullChecks": true,                    /* Enable strict null checks. */
-    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
+    "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
-    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-    // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
+    "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
     "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
+    "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
 
     /* Additional Checks */
-    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
+    "noUnusedLocals": true,                      /* Report errors on unused locals. */
-    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
+    "noUnusedParameters": true,                  /* Report errors on unused parameters. */
     "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
     "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
     // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
-    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
+    "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
 
     /* Module Resolution Options */
     "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */

seatmapv2.code-workspace

@@ -1,8 +0,0 @@
-{
-	"folders": [
-		{
-			"path": "."
-		}
-	],
-	"settings": {}
-}