replaced console.log, installed envify, added appendVersion

client/package-lock.json

@@ -20,6 +20,7 @@
         "@types/xml2js": "^0.4.8",
         "browserify": "^17.0.0",
         "browserify-css": "^0.15.0",
+        "envify": "^4.1.0",
         "jquery": "^3.6.0",
         "jquery-ui": "^1.12.1",
         "tsify": "^5.0.2",
@@ -815,6 +816,19 @@
       "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
       "dev": true
     },
+    "node_modules/envify": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/envify/-/envify-4.1.0.tgz",
+      "integrity": "sha512-IKRVVoAYr4pIx4yIWNsz9mOsboxlNXiu7TNBnem/K/uTHdkyzXWDzHCK7UTolqBbgaBz0tQHsD3YNls0uIIjiw==",
+      "dev": true,
+      "dependencies": {
+        "esprima": "^4.0.0",
+        "through": "~2.3.4"
+      },
+      "bin": {
+        "envify": "bin/envify"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -869,6 +883,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -3185,6 +3212,16 @@
         }
       }
     },
+    "envify": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/envify/-/envify-4.1.0.tgz",
+      "integrity": "sha512-IKRVVoAYr4pIx4yIWNsz9mOsboxlNXiu7TNBnem/K/uTHdkyzXWDzHCK7UTolqBbgaBz0tQHsD3YNls0uIIjiw==",
+      "dev": true,
+      "requires": {
+        "esprima": "^4.0.0",
+        "through": "~2.3.4"
+      }
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -3227,6 +3264,12 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
     "events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",

client/package.json

@@ -5,8 +5,10 @@
   "main": "index.js",
   "scripts": {
     "browserifyf": "func() { browserify --debug -p [ tsify ] $1 > $2; }; func",
-    "watchifyf": "func() { watchify --debug --verbose -p [ tsify ] $1 -o $2; }; func",
+    "watchifyfdev": "func() { watchify -t [ envify --NODE_ENV development ] --debug --verbose -p [ tsify ] $1 -o $2; }; func",
-    "watchifyfcss": "func() { watchify -g browserify-css --debug --verbose -p [ tsify ] $1 -o $2; }; func"
+    "watchifyfprod": "func() { watchify -t [ envify --NODE_ENV production ] --debug --verbose -p [ tsify ] $1 -o $2; }; func",
+    "watchifyfcssdev": "func() { watchify -t [ envify --NODE_ENV development ] -g browserify-css --debug --verbose -p [ tsify ] $1 -o $2; }; func",
+    "watchifyfcssprod": "func() { watchify -t [ envify --NODE_ENV production ] -g browserify-css --debug --verbose -p [ tsify ] $1 -o $2; }; func"
   },
   "keywords": [],
   "author": "",
@@ -18,6 +20,7 @@
     "@types/xml2js": "^0.4.8",
     "browserify": "^17.0.0",
     "browserify-css": "^0.15.0",
+    "envify": "^4.1.0",
     "jquery": "^3.6.0",
     "jquery-ui": "^1.12.1",
     "tsify": "^5.0.2",

client/src/inject.ts

@@ -16,14 +16,14 @@ window.addEventListener('load', () => {
     const content: string = new XMLSerializer().serializeToString(document);
     inputsWithValue = { ...inputsWithValue, ...Parser.getInputs(content) };
 
-    console.log(inputsWithValue);
+    Utils.consoleLog(inputsWithValue);
-    console.log(`trxstate: ${inputsWithValue["trxstate"]}`);
+    Utils.consoleLog(`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}`);
+    Utils.consoleLog(`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)
@@ -49,7 +49,7 @@ window.addEventListener('load', () => {
     // https://api.jqueryui.com/dialog/
     UI.createDialog();
 
-    console.log(inputsWithValue);
+    Utils.consoleLog(inputsWithValue);
 });
 
 function messageHandler(e: any) {
@@ -58,8 +58,8 @@ function messageHandler(e: any) {
 
     const data: I.Message = JSON.parse(e.data);
 
-    console.log(`parent: received from ${data.from}`);
+    Utils.consoleLog(`parent: received from ${data.from}`);
-    console.log(data);
+    Utils.consoleLog(data);
 
     switch (data.event) {
         case "child_init_needInputsWithValue": {
@@ -75,6 +75,7 @@ function messageHandler(e: any) {
             break;
         }
         case "child_seatmap_ready": {
+            Utils.consoleLog("child completely ready");
             jQuery("#containerBookingBtn").show();
             break;
         }

client/src/modules/bookingButton.ts

@@ -7,7 +7,6 @@ export function injectBookingBtn(): void {
 }
 
 export function showSeatmapBtnParent(): void {
-    console.log("child completely ready");
     Communication.sendEventToParent("child_seatmap_ready");
 }
 

client/src/modules/child.ts

@@ -41,9 +41,8 @@ export function initSendVenueXML(inE: any) {
     jQuery("#dropdownSeatmap").val(id);
     Communication.needSeatmapXML(id);
 
-    console.log(css);
+    Utils.consoleLog(css);
-    console.log(seatmapListing);
+    Utils.consoleLog(seatmapListing);
-
 }
 
 export function initSendInputsWithValue(inE: any) {
@@ -78,7 +77,7 @@ export function sendCheckoutResponse(inE: any) {
     const data: I.Message = JSON.parse(inE.data);
     config.state.isValidSeatSelection = data.message.isValidSeatSelection;
 
-    console.log(data.message);
+    Utils.consoleLog(data.message);
 
     if (!config.state.isValidSeatSelection) {
         jBoxHelper.showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);

client/src/modules/communication.ts

@@ -4,6 +4,7 @@ const xml2jsParser = require('xml2js').parseString;
 import * as UI from "./ui";
 import { config } from "./config";
 import * as Cart from "./cart";
+import Utils from './utils'
 
 // rework try/catch ?
 export function sendMessage(inData: I.Message, inTo: string): void {
@@ -14,8 +15,6 @@ export function sendMessage(inData: I.Message, inTo: string): void {
 
         if (child !== null && child.contentWindow !== null)
             child.contentWindow.postMessage(JSON.stringify(inData), "*");
-        else
-            console.log(`Element with ID ${inTo} does not exist`);
     }
 }
 
@@ -76,11 +75,8 @@ export function cancelCheckout(inUrl: string): void {
     fetch(inUrl, {
         redirect: "manual"
     })
-        .then(() => console.log(`${inUrl} canceled`))
+        .then(() => Utils.consoleLog(`${inUrl} canceled`))
-        .catch(function (error) {
+        .catch((error) => Utils.consoleLog(error));
-            console.log("error");
-            console.log(error);
-        });
 }
 
 export function isValidSeatSelection(): void {
@@ -121,7 +117,5 @@ function getXMLPromise(inUrl: string): Promise<unknown> {
                 }
             });
         })
-        .catch((error) => {
+        .catch((error) => Utils.consoleLog(error));
-            console.log(error);
-        });
 }

client/src/modules/config.ts

@@ -3,6 +3,7 @@ import * as I from "../types/types";
 export const config: I.Config = {
     debug: true,
     branch: "staging",
+    version: "0.0.1",
     urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
     urlSeatmapMaster: "https://tickets.zinomedia.de",
     urlCSSChildMaster: "https://tickets.zinomedia.de/dist/styleChild.css",

client/src/modules/jsc.ts

@@ -3,6 +3,7 @@ import { config } from "./config";
 import * as State from "./state";
 import * as Cart from "./cart";
 import * as CartButtons from "./cartButtons";
+import Utils from './utils'
 
 export function getSeats(): I.JSCSeats {
     const seatmapXML: any = config.state.seatmapXML;
@@ -124,10 +125,6 @@ export function selectSeatsInCart(): void {
 export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: string[], inSeats: I.JSCSeats, inLegend: I.JSCLegend): void {
     const containerSeatmap: any = (<any>window).jQuery(inSelector);
 
-    // console.log(inSeatmapInitMap);
-    // console.log(inSeats);
-    // console.log(inLegend);
-
     config.state.seatmap = containerSeatmap.seatCharts({
         naming: {
             top: false,
@@ -213,7 +210,8 @@ function clickedSeat(inSeatmap: any) {
 
 function clickAvailableSeat(inSeatmap: any) {
     const selectedSeat: I.JSCSelectedSeat = inSeatmap.settings;
-    console.log(selectedSeat);
+
+    Utils.consoleLog(selectedSeat);
 
     if (State.maximumSelectedSeatsReached(selectedSeat))
         return "available";

client/src/modules/parent.ts

@@ -2,6 +2,7 @@ import { config } from "./config";
 import axios from 'axios';
 import * as Communication from "./communication";
 import * as I from "../types/types";
+import Utils from './utils'
 
 export function needCheckoutResponse(inE: any, inInputsWithValue: I.InputsWithValue) {
     const data: I.Message = JSON.parse(inE.data);
@@ -17,7 +18,7 @@ export function needCheckoutResponse(inE: any, inInputsWithValue: I.InputsWithVa
             const parsedHTML: Node[] = jQuery.parseHTML(content);
             const orderkey: orderkey = jQuery(parsedHTML).find("#orderkey").val();
 
-            console.log(`orderkey: ${orderkey}`);
+            Utils.consoleLog(`orderkey: ${orderkey}`);
 
             if (orderkey) {
                 isValidSeatSelection = true;
@@ -38,8 +39,8 @@ export function needCheckoutResponse(inE: any, inInputsWithValue: I.InputsWithVa
             Communication.sendMessage(message, "iframeSeatmap");
         })
         .catch(function (error) {
-            console.log("error in child_needCheckoutResponse");
+            Utils.consoleLog("error in child_needCheckoutResponse");
-            console.log(error);
+            Utils.consoleLog(error);
         });
 }
 

client/src/modules/trims.ts

@@ -44,11 +44,9 @@ function decodeNormalTrim(element: string): string {
 function applyTrim(inCharacter: string, inTrimPos: I.TrimPos): void {
     const regex: RegExp = /[^a-zA-Z0-9äöüÄÖÜß$]/;
     
-    if (!regex.test(inCharacter)) {
+    if (!regex.test(inCharacter))
-        console.log(`${inCharacter} -> ${inTrimPos.xJSC} ${inTrimPos.yJSC}`);
         jQuery(".seatCharts-row")[inTrimPos.yJSC].children[inTrimPos.xJSC].innerHTML = `<span class="trimChar">${inCharacter}</span>`
 }
-}
 
 function getJSCTrimPos(inX: number, inY: number, index: number): I.TrimPos {
     return <I.TrimPos> {

client/src/modules/ui.ts

@@ -97,3 +97,8 @@ export function adjustUIToLoading(): void {
     jQuery("#modalCart i").hide();
     jQuery("#modalCart .uabb-button-text").addClass("dot-pulse");
 }
+
+export function appendVersion(): void {
+    jQuery("#bottomHTMLVersion")[0].innerText = config.version;
+    jQuery("#bottomHTMLBranch")[0].innerText = `(${config.branch})`;
+}

client/src/modules/utils.ts

@@ -9,11 +9,11 @@ export default class Utils {
             const element: boolean | HTMLElement = inSwitch === "selector" ? jQuery(<string>inSelector).get(0) : Utils.getSeatmapElement();
 
             if (element) {
-                console.log("ready");
+                Utils.consoleLog("ready");
                 inCallback();
             }
             else {
-                console.log(`Repeating for ${inSwitch}`);
+                Utils.consoleLog(`Repeating for ${inSwitch}`);
                 setTimeout(() => {
                     if (inTimeoutInMs && Date.now() - startTimeInMs > inTimeoutInMs)
                         return;
@@ -93,4 +93,9 @@ export default class Utils {
     static getDayName(inDate: Date, inLocale: string): string {
         return inDate.toLocaleDateString(inLocale, { weekday: 'long' });
     }
+
+    static consoleLog(inMessage: any) {
+        if (process.env["NODE_ENV"] === "development")
+            console.log(inMessage);
+    }
 }

client/src/seatmap.ts

@@ -8,6 +8,7 @@ require("jbox/dist/jBox.all.css");
 import * as Cart from "./modules/cart";
 import * as BookingBtn from "./modules/bookingButton";
 import * as Child from './modules/child';
+import * as UI from "./modules/ui";
 
 window.addEventListener('load', () => {
     // Inject JSC (jQuery Seat Charts)
@@ -31,6 +32,8 @@ window.addEventListener('load', () => {
     Events.addModalCart();
     Events.addDropdownSeatmap();
 
+    // Change version configured in config
+    UI.appendVersion();
 });
 
 // Hide header when height of window is smaller than ...
@@ -40,7 +43,6 @@ window.onresize = function () {
     const innerHeight = window.innerHeight;
 
     if (innerHeight < 576) {
-        console.log("small");
         jQuery("#containerEventInfoRow").hide();
         panzoom?.reset();
     }
@@ -56,8 +58,8 @@ function messageHandler(inE: any) {
 
     const data: I.Message = JSON.parse(inE.data);
 
-    console.log(`child: received from ${data.from}`);
+    Utils.consoleLog(`child: received from ${data.from}`);
-    console.log(data);
+    Utils.consoleLog(data);
 
     switch (data.event) {
         case "parent_init_venue": {

client/src/types/types.d.ts

@@ -84,6 +84,7 @@ export interface InputsWithValue {
 export interface Config {
     debug: boolean;
     branch: string;
+    version: string;
     urlSeatmapStaging: string;
     urlSeatmapMaster: string;
     urlCSSChildStaging: string;