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

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>
`);
}