zino/seatmapv2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

postmessage

Browse Source
This commit is contained in:
zino
2021-03-05 23:59:13 +01:00
parent a566040f3f
commit e52ebec64c
9 changed files with 989 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

819
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
client/package.json
View File

@@ -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": {
"@types/jquery": "^3.5.5"
"dependencies": {
"axios": "^0.21.1",
"xml2js": "^0.4.23"
}
}

1
client/src/helloWorld.ts Normal file
View File

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

211
client/src/inject.ts
View File

@@ -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 {
[HTMLInputElement: string]: string;
}
interface IConfig {
debug: boolean,
branch: string
}
const config: IConfig = {
const config: I.config = {
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);
});
function getInputs(inContent: string): IinputsWithValue {
let inputsWithValue: IinputsWithValue = {};
const parsedHTML: Node[] = jQuery.parseHTML(inContent);
jQuery(parsedHTML).find('input').each(function() {
if (this.value !== '' && checkoutParams.includes(this.name))
inputsWithValue[this.name] = this.value;
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;
});
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 {
if (!jQuery.isEmptyObject(inInputsWithValue)) {
if (inInputsWithValue.hasOwnProperty("trxstate") && inInputsWithValue["trxstate"] === "20") {
getImportantNote(inInputsWithValue);
showSeatmapButton();
injectSeatmap(inInputsWithValue, content);
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();
}
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 {
const importantNote: string | null = jQuery(".important_note")[0].textContent;
function getImportantNote(): void {
const importantNote: string | null = $(".important_note")[0].textContent;
if (importantNote !== null && importantNote.trim().length) {
const importantNoteEncoded: string = encodeURIComponent(importantNote);
inInputsWithValue["importantNote"] = importantNote;
inInputsWithValue["importantNoteEncoded"] = importantNoteEncoded;
if (importantNote?.trim().length) {
const importantNoteEncoded: string = encodeURIComponent(importantNote);
inputsWithValue["importantNote"] = importantNote;
inputsWithValue["importantNoteEncoded"] = importantNoteEncoded;
}
}
function showSeatmapButton(): void {
jQuery('#flash_seat_map_box_id').css('display', 'block');
jQuery('#get_flash').css('display', 'none');
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: "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>
`);
}

47
client/src/seatmap.ts Normal file
View File

@@ -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');
// }

15
client/src/types.ts Normal file
View File

@@ -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

68
client/src/utils.ts Normal file
View File

@@ -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), "*")
}
}
}

21
client/tsconfig.json
View File

@@ -8,8 +8,7 @@
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"lib": [
"es2016",
"dom",
"es5"
"dom"
], /* Specify library files to be included in the compilation. */
"allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
@@ -29,22 +28,22 @@
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true, /* Enable all 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. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
"strictNullChecks": true, /* Enable strict null checks. */
"strictFunctionTypes": true, /* Enable strict checking of function types. */
"strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
"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. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
"noUnusedLocals": true, /* Report errors on unused locals. */
"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). */

8
seatmapv2.code-workspace
View File

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