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

restructured inject.js

Browse Source
This commit is contained in:
zino
2021-03-17 13:18:16 +01:00
parent 674f16bed7
commit 65cb9bff60
11 changed files with 179 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
client/src/inject.ts
View File

@@ -1,30 +1,18 @@
// import $, { Callbacks } from 'jquery';
var $ = require("jquery");
var jQuery = require("jquery");
import 'jquery-ui';
import * as I from "./types";
import Utils from './utils';
import * as communication from "./communication";
import * as I from "./types/types";
import Utils from './modules/utils';
import * as Communication from "./modules/communication";
import * as Parser from './modules/parser';
import * as UI from "./modules/ui";
import { config } from "./modules/config";
export const config: I.Config = {
debug: true,
branch: "staging",
urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
urlSeatmapMaster: "https://tickets.zinomedia.de",
urlCSSChildMaster: "https://tickets.zinomedia.de/dist/styleChild.css",
urlCSSChildStaging: "https://staging.tickets.zinomedia.de/dist/styleChild.css",
urlCSSParentMaster: "https://tickets.zinomedia.de/dist/styleParent.css",
urlCSSParentStaging: "https://staging.tickets.zinomedia.de/dist/styleParent.css",
urlJSCStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js",
urlJSCMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js",
urlCSSJSCStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css",
urlCSSJSCMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css"
}
let inputsWithValue: I.InputsWithValue;
let childHasVenueXML: boolean = false;
window.addEventListener('load', function () {
const content: string = new XMLSerializer().serializeToString(document);
getInputs(content);
Parser.getInputs(content, inputsWithValue)
console.log(inputsWithValue["trxstate"]);
console.log(/posturl:"(.+?)"/.test(content));
@@ -34,16 +22,17 @@ window.addEventListener('load', function () {
return;
Utils.inject(config.urlCSSParentStaging, "css", "body");
communication.listenToMessages(messagesHandler);
getAdditionalInputs(content);
console.log(inputsWithValue);
getImportantNote();
Communication.listenToMessages(messagesHandler);
Parser.getAdditionalInputs(content, inputsWithValue);
Parser.getImportantNote(inputsWithValue);
jQuery(".flash_seat_map_box").remove();
injectBookingBtn();
createDialog();
UI.injectBookingBtn();
UI.createDialog(childHasVenueXML);
console.log(inputsWithValue);
jQuery("#foobarParent").on("click", () => {
communication.sendEventToChild("parent_init_venue");
Communication.sendEventToChild("parent_init_venue");
});
});
@@ -55,7 +44,6 @@ function messagesHandler(e: any) {
console.log(`parent: received from ${data.from}`);
console.log(data);
switch (data.event) {
case "child_init_needInputsWithValue": {
const message: I.Message = {
@@ -64,17 +52,17 @@ function messagesHandler(e: any) {
event: "parent_init_sendInputsWithValue",
date: Date.now()
};
communication.sendMessage(message, "iframeSeatmap")
Communication.sendMessage(message, "iframeSeatmap")
break;
}
case "child_init_needVenueXML": {
communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "parent_init_sendVenueXML", "parent");
Communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "parent_init_sendVenueXML", "parent");
childHasVenueXML = true;
break;
}
case "child_needSeatmapXML": {
const seatmapUrl: string = generateSeatmapUrl(data.message);
communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent");
const seatmapUrl: string = `${inputsWithValue["posturlRawDecoded"]}&inclseatmap=Y&seatmap=${data.message}`
Communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent");
break;
}
case "child_seatmap_ready": {
@@ -86,126 +74,3 @@ function messagesHandler(e: any) {
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: "",
width: "99%",
height: "auto",
close: () => {
jQuery('html, body').css('overflow', 'auto');
}
});
jQuery("#openSeatmap").on("click", () => {
if (!childHasVenueXML)
communication.sendEventToChild("parent_init_venue");
jQuery('html, body').css('overflow', 'hidden');
jQuery("#dialogSeatmap").dialog('open');
});
}
function injectBookingBtn(): void {
jQuery('#flash_seat_map_box_id').css({
"display": "block",
"position": "relative",
"width": "100%"
});
jQuery("#flash_seat_map_box_id").append(`
<div id="containerBookingBtn">
<button type="button" id="openSeatmap">
<div>
<img src="https://staging.tickets.zinomedia.de/dist/stadium.png">
</div>
Saalplanbuchung <br/><br/>
<span>Suchen Sie Ihren Platz selbst aus</span>
</button> <br/>
<button type="button" id="foobarParent">foobarParent</button> <br/>
<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();
}

2
client/src/communication.ts → client/src/modules/communication.ts
View File

@@ -1,4 +1,4 @@
import * as I from "./types";
import * as I from "../types/types";
import * as xml from "./xml";
// rework try/catch ?

16
client/src/modules/config.ts Normal file
View File

@@ -0,0 +1,16 @@
import * as I from "../types/types";
export const config: I.Config = {
debug: true,
branch: "staging",
urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
urlSeatmapMaster: "https://tickets.zinomedia.de",
urlCSSChildMaster: "https://tickets.zinomedia.de/dist/styleChild.css",
urlCSSChildStaging: "https://staging.tickets.zinomedia.de/dist/styleChild.css",
urlCSSParentMaster: "https://tickets.zinomedia.de/dist/styleParent.css",
urlCSSParentStaging: "https://staging.tickets.zinomedia.de/dist/styleParent.css",
urlJSCStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js",
urlJSCMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js",
urlCSSJSCStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css",
urlCSSJSCMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css"
}

44
client/src/modules/parser.ts Normal file
View File

@@ -0,0 +1,44 @@
import * as I from "../types/types";
export function getVenueLocation(): string {
let span: string[] = [];
jQuery(".venue span").each(function () {
span.push(jQuery(this).text());
});
return span.join(", ");
}
export function getInputs(inContent: string, inInputsWithValue: I.InputsWithValue): void {
const parsedHTML: Node[] = $.parseHTML(inContent);
let inputs: I.Inputs = {};
jQuery(parsedHTML).find('input').each(function (this: any) {
const name: string = this.name;
const value: string = this.value;
if (value !== '')
inputs[name] = value;
});
inInputsWithValue = { ...inInputsWithValue, ...inputs };
}
// todo: check with different venues
export function getImportantNote(inInputsWithValue: I.InputsWithValue): void {
const importantNote: string | null = $(".important_note")[0].textContent;
if (importantNote?.trim().length) {
const importantNoteEncoded: string = encodeURIComponent(importantNote);
inInputsWithValue["importantNote"] = importantNote;
inInputsWithValue["importantNoteEncoded"] = importantNoteEncoded;
}
}
export function getAdditionalInputs(inContent: string, inInputsWithValue: I.InputsWithValue): void {
inInputsWithValue["event"] = inContent.match(/event:"(.+?)"/)![1];
inInputsWithValue["holdcode"] = inContent.match(/holdcode:"(.+?)"/)![1];
inInputsWithValue["posturlRaw"] = inContent.match(/posturl:"(.+?)"/)![1];
inInputsWithValue["posturlRawDecoded"] = decodeURIComponent(inInputsWithValue["posturlRaw"]);
inInputsWithValue["posturl"] = decodeURIComponent(`${inInputsWithValue["posturlRaw"]}&event=${inInputsWithValue["event"]}&holdcode=${inInputsWithValue["holdcode"]}&nocache=0&inclpkg=Y&incloffer=Y&inclcartdetails=Y&inclCart=Y&inclvenue=Y`);
inInputsWithValue["venueLocation"] = getVenueLocation();
}

71
client/src/modules/ui.ts Normal file
View File

@@ -0,0 +1,71 @@
import * as I from "../types/types";
import * as Communication from "./communication";
export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string) {
const seatmapDropdown: HTMLElement | null = document.getElementById(inId);
if (seatmapDropdown) {
for (let seatmapObj of inSeatmapListing) {
var opt = document.createElement('option');
opt.value = seatmapObj.id[0];
opt.innerHTML = seatmapObj.desc[0];
seatmapDropdown.appendChild(opt);
}
}
}
export function setEventInfo(inEventInfo: I.EventInfo, inInputswithValue: I.InputsWithValue): void {
// console.log(inEventInfo);
jQuery("#eventInfoDesc span.fl-heading-text")[0].childNodes[0].textContent = inEventInfo.desc[0];
jQuery("#eventInfoDate p")[0].childNodes[0].textContent = inEventInfo.start[0];
jQuery("#eventInfoCapacity p")[0].childNodes[0].textContent = inEventInfo.venue_config_capacity[0];
jQuery("#eventInfoLocation p")[0].childNodes[0].textContent = inInputswithValue.venueLocation;
}
export function createDialog(inChildHasVenueXML: boolean): 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: "",
width: "99%",
height: "auto",
close: () => {
jQuery('html, body').css('overflow', 'auto');
}
});
jQuery("#openSeatmap").on("click", () => {
if (!inChildHasVenueXML)
Communication.sendEventToChild("parent_init_venue");
jQuery('html, body').css('overflow', 'hidden');
jQuery("#dialogSeatmap").dialog('open');
});
}
export function injectBookingBtn(): void {
jQuery('#flash_seat_map_box_id').css({
"display": "block",
"position": "relative",
"width": "100%"
});
jQuery("#flash_seat_map_box_id").append(`
<div id="containerBookingBtn">
<button type="button" id="openSeatmap">
<div>
<img src="https://staging.tickets.zinomedia.de/dist/stadium.png">
</div>
Saalplanbuchung <br/><br/>
<span>Suchen Sie Ihren Platz selbst aus</span>
</button> <br/>
<button type="button" id="foobarParent">foobarParent</button> <br/>
<div id="dialogSeatmap" hidden="hidden"></div>
</div>
`);
}

0
client/src/utils.ts → client/src/modules/utils.ts
View File

3
client/src/xml.ts → client/src/modules/xml.ts
View File

@@ -1,6 +1,6 @@
import axios, { AxiosResponse } from 'axios';
var xml2jsParser = require('xml2js').parseString;
import * as I from "./types";
import * as I from "../types/types";
import Utils from './utils';
export function getXMLPromise(url: string): Promise<unknown> {
@@ -54,4 +54,3 @@ export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo {
return eventInfo;
}

38
client/src/seatmap.ts
View File

@@ -1,10 +1,10 @@
import jQuery = require("jquery");
import * as xml from "./xml";
import * as communication from "./communication";
import * as I from "./types";
import * as ui from "./ui";
import { config } from "./inject";
import Utils from './utils';
import * as XMLHelper from "./modules/xml";
import * as Communication from "./modules/communication";
import * as I from "./types/types";
import * as UI from "./modules/ui";
import { config } from "./modules/config";
import Utils from './modules/utils';
import Panzoom from '@panzoom/panzoom';
// var sc = require("../libs/jQuery-Seat-Charts/jquery.seat-charts.js");
// var parseString = require('xml2js').parseString;
@@ -20,7 +20,7 @@ let seatmap: any;
window.addEventListener('load', function () {
jQuery("#foobar").on("click", () => {
communication.sendMessage(<I.Message>{
Communication.sendMessage(<I.Message>{
message: "Hello from child",
from: "child",
event: "foobar",
@@ -31,7 +31,7 @@ window.addEventListener('load', function () {
Utils.inject(config.urlJSCStaging, "js", "head");
Utils.inject(config.urlCSSJSCStaging, "css", "body");
Utils.inject(config.urlCSSChildStaging, "css", "body");
communication.listenToMessages(messagesHandler);
Communication.listenToMessages(messagesHandler);
Utils.waitForSeatmap(showBookingBtnParent);
const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");
@@ -40,7 +40,7 @@ window.addEventListener('load', function () {
controlLoftloader("show");
const value: string = this.value;
destroyCurrentSeatmap();
communication.needSeatmapXML(value);
Communication.needSeatmapXML(value);
});
}
@@ -67,7 +67,7 @@ function showBookingBtnParent(): void {
event: "child_seatmap_ready",
date: Date.now()
};
communication.sendMessage(message, "parent");
Communication.sendMessage(message, "parent");
}
@@ -151,8 +151,8 @@ function messagesHandler(inE: any) {
switch (data.event) {
case "RefreshDropdown": {
const venueXML: I.VenueXML = data.message.map_response;
const seatmapListing: I.Seatmap[] = xml.getSeatmapListing(venueXML);
ui.setOptionSelect(seatmapListing, "dropdownSeatmap");
const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(venueXML);
UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
break;
}
case "addDropdown": {
@@ -171,31 +171,31 @@ function messagesHandler(inE: any) {
}
case "parent_init_venue": {
controlLoftloader("show");
communication.sendEventToParent("child_init_needInputsWithValue");
Communication.sendEventToParent("child_init_needInputsWithValue");
break;
}
case "parent_init_sendVenueXML": {
const XML: I.VenueXML = data.message.map_response;
// fill event info
const eventInfo = xml.getEventInfo(XML);
ui.setEventInfo(eventInfo, inputsWithValue);
const eventInfo = XMLHelper.getEventInfo(XML);
UI.setEventInfo(eventInfo, inputsWithValue);
// fill select dropdown
const seatmapListing: I.Seatmap[] = xml.getSeatmapListing(XML);
const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(XML);
console.log(seatmapListing);
ui.setOptionSelect(seatmapListing, "dropdownSeatmap");
UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
// display first seatmapXML
const id: string = seatmapListing[0].id[0];
jQuery("#dropdownSeatmap").val(id);
communication.needSeatmapXML(id);
Communication.needSeatmapXML(id);
break;
}
case "parent_init_sendInputsWithValue": {
inputsWithValue = data.message;
communication.sendEventToParent("child_init_needVenueXML");
Communication.sendEventToParent("child_init_needVenueXML");
break;
}
case "parent_sendSeatmapXML": {

45
client/src/types.ts → client/src/types/types.d.ts vendored
View File

@@ -1,3 +1,7 @@
export interface Inputs {
[key: string]: string;
}
export interface InputsWithValue {
param1: number[];
param2: string;
@@ -38,45 +42,6 @@ export interface InputsWithValue {
}
// export interface InputsWithValue {
// [key: string]: string | {
// param1: number[];
// param2: string;
// param3: string;
// trxstate: string;
// etpgcode: string;
// is_ticket_exchange_request: string;
// prevtrxstate: string;
// user_context: string;
// target_trxstate: string;
// orgid: string;
// p_orgid: string;
// pid: string;
// supplier_code: string;
// inventory_filtering_action: string;
// inventory_month: string;
// inventory_year: string;
// upsell_selected: string;
// listing_type: string;
// invalid_seats: string;
// package_pids: string;
// mlbamsp: string;
// pay_pal_token: string;
// APPTE: string;
// schedule: string;
// secure_trxn_enabled: string;
// isCapEnabled: string;
// supplierCode: string;
// venueLocation: string;
// event: string;
// holdcode: string;
// posturl: string;
// seatmapUrl: string;
// importantNote?: string;
// importantNoteEncoded?: string;
// }
// }
export interface Config {
debug: boolean;
branch: string;
@@ -101,7 +66,7 @@ export interface Message {
}
// export interface EventInfo = Event & EventExtend;
export interface EventInfo extends Event, EventExtend { }
export interface EventInfo extends Event, EventExtend {}
export interface EventExtend {
venue_config_capacity: string[];

21
client/src/ui.ts
View File

@@ -1,21 +0,0 @@
import * as I from "./types";
export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string) {
const seatmapDropdown: HTMLElement | null = document.getElementById(inId);
if (seatmapDropdown) {
for (let seatmapObj of inSeatmapListing) {
var opt = document.createElement('option');
opt.value = seatmapObj.id[0];
opt.innerHTML = seatmapObj.desc[0];
seatmapDropdown.appendChild(opt);
}
}
}
export function setEventInfo(inEventInfo: I.EventInfo, inInputswithValue: I.InputsWithValue): void {
// console.log(inEventInfo);
jQuery("#eventInfoDesc span.fl-heading-text")[0].childNodes[0].textContent = inEventInfo.desc[0];
jQuery("#eventInfoDate p")[0].childNodes[0].textContent = inEventInfo.start[0];
jQuery("#eventInfoCapacity p")[0].childNodes[0].textContent = inEventInfo.venue_config_capacity[0];
jQuery("#eventInfoLocation p")[0].childNodes[0].textContent = inInputswithValue.venueLocation;
}

2
client/tsconfig.json
View File

@@ -72,7 +72,7 @@
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
},
"include": [
"src/**/*.ts"
"src/**/*.ts",
],
"exclude": [
"node_modules"