Files
seatmapv2/client/src/inject.ts
2021-03-10 11:57:12 +01:00

221 lines
8.8 KiB
TypeScript

// import $, { Callbacks } from 'jquery';
var $ = require("jquery");
import 'jquery-ui';
import * as I from "./types";
import Utils from './utils';
import * as communication from "./communication";
// 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 = {
debug: true,
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",
}
let inputsWithValue: I.InputsWithValue;
// 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'
// ];
// const checkoutParamSerialized = encodeURIComponent(JSON.stringify(checkoutParams))
window.addEventListener('load', function () {
const content: string = new XMLSerializer().serializeToString(document);
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");
communication.listenToMessages(messagesHandler);
getAdditionalInputs(content);
console.log(inputsWithValue);
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;
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: "Saalplanbuchung",
width: "99%",
height: "auto",
});
jQuery("#openSeatmap").on("click", () => {
jQuery("#dialogSeatmap").dialog('open');
});
}
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>
`);
}
// $(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();
}