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

before splitting in modules

Browse Source
This commit is contained in:
zino
2021-03-17 12:12:08 +01:00
parent 99c765bde0
commit 674f16bed7
5 changed files with 110 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/communication.ts
View File

@@ -56,4 +56,14 @@ export function sendEventToParent(inEvent: string) {
date: Date.now()
};
sendMessage(message, "parent");
}
export function needSeatmapXML(inID: string) {
const message: I.Message = {
message: inID,
from: "child",
event: "child_needSeatmapXML",
date: Date.now()
};
sendMessage(message, "parent");
}

1
client/src/helloWorld.ts
View File

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

97
client/src/inject.ts
View File

@@ -2,37 +2,25 @@
var $ = require("jquery");
import 'jquery-ui';
import * as I from "./types";
// import Utils from './utils';
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;
export const config: I.Config = {
debug: true,
branch: "staging",
urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
urlSeatmapMaster: "https://tickets.zinomedia.de",
urlCSSSeatmapMaster: "https://tickets.zinomedia.de/dist/style.css",
urlCSSSeatmapStaging: "https://staging.tickets.zinomedia.de/dist/style.css",
urlSeatChartsStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js",
urlSeatChartsMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js",
urlCSSSeatChartsStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css",
urlCSSSeatChartsMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css"
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;
// 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))
let childHasVenueXML: boolean = false;
window.addEventListener('load', function () {
const content: string = new XMLSerializer().serializeToString(document);
@@ -45,25 +33,15 @@ window.addEventListener('load', function () {
if (inputsWithValue["trxstate"] !== "20" || /posturl:"(.+?)"/.test(content) === false)
return;
// Utils.inject(config.urlCSSSeatChartsStaging, "css", "body");
// Utils.inject(config.urlCSSSeatmapStaging, "css", "body");
Utils.inject(config.urlCSSParentStaging, "css", "body");
communication.listenToMessages(messagesHandler);
getAdditionalInputs(content);
console.log(inputsWithValue);
getImportantNote();
modifySeatmapButton();
jQuery(".flash_seat_map_box").remove();
injectBookingBtn();
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");
});
@@ -91,6 +69,7 @@ function messagesHandler(e: any) {
}
case "child_init_needVenueXML": {
communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "parent_init_sendVenueXML", "parent");
childHasVenueXML = true;
break;
}
case "child_needSeatmapXML": {
@@ -98,17 +77,20 @@ function messagesHandler(e: any) {
communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent");
break;
}
case "child_seatmap_ready": {
jQuery("#containerBookingBtn").show();
break;
}
default:
break;
}
}
function generateSeatmapUrl(seatmapId : string): string {
function generateSeatmapUrl(seatmapId: string): string {
return `${inputsWithValue["posturlRawDecoded"]}&inclseatmap=Y&seatmap=${seatmapId}`;
}
function getVenueLocation(): string {
let span: string[] = [];
jQuery(".venue span").each(function () {
@@ -155,39 +137,42 @@ function createDialog(): void {
hide: true,
show: true,
resizable: false,
title: "Saalplanbuchung",
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 modifySeatmapButton(): void {
$(".flash_seat_map_box").remove();
$('#flash_seat_map_box_id').css({
function injectBookingBtn(): void {
jQuery('#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>
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{

93
client/src/seatmap.ts
View File

@@ -28,45 +28,49 @@ window.addEventListener('load', function () {
}, "parent");
});
Utils.inject(config.urlSeatChartsStaging, "js", "head");
Utils.inject(config.urlCSSSeatChartsStaging, "css", "body");
Utils.inject(config.urlCSSSeatmapStaging, "css", "body");
Utils.inject(config.urlJSCStaging, "js", "head");
Utils.inject(config.urlCSSJSCStaging, "css", "body");
Utils.inject(config.urlCSSChildStaging, "css", "body");
communication.listenToMessages(messagesHandler);
// Utils.waitForSeatmap(addSeatmap);
Utils.waitForSeatmap(showBookingBtnParent);
const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");
if (dropdownSeatmap) {
dropdownSeatmap.addEventListener("change", function (this: HTMLSelectElement) {
controlLoftloader("show");
const value: string = this.value;
const message: I.Message = {
message: value,
from: "child",
event: "child_needSeatmapXML",
date: Date.now()
};
communication.sendMessage(message, "parent");
destroyCurrentSeatmap();
communication.needSeatmapXML(value);
});
}
// const containerSeatmap: HTMLElement | null = document.getElementById("containerSeatmap");
// if (containerSeatmap) {
// const panzoom = Panzoom(containerSeatmap, {
// maxScale: 5
// });
// const btnZoomIn: HTMLElement | null = document.getElementById("panmzoomZoomIn");
// if (btnZoomIn)
// btnZoomIn.addEventListener('click', panzoom.zoomIn)
// }
});
function destroyCurrentSeatmap(): void {
jQuery("#containerSeatmapInner").remove();
jQuery("#htmlSeatmapInner .fl-html").removeAttr("style");
jQuery("#htmlSeatmapInner .fl-html").append('<div id="containerSeatmapInner"></div>');
}
function controlLoftloader(inSwitch: string) {
if (inSwitch === "show")
jQuery("body").removeClass("loaded loftloader-loaded");
else if (inSwitch === "hide")
jQuery("body").addClass("loaded loftloader-loaded");
}
function showBookingBtnParent(): void {
console.log("child completely ready");
const message: I.Message = {
message: null,
from: "child",
event: "child_seatmap_ready",
date: Date.now()
};
communication.sendMessage(message, "parent");
}
function addSeatmap(inSelector: string, inSeatmapInitMap: string[], inSeatmapInitRows: number[], inSeats: I.JSCSeats): void {
const containerSeatmap: any = (<any>window).jQuery(inSelector);
@@ -166,6 +170,7 @@ function messagesHandler(inE: any) {
break;
}
case "parent_init_venue": {
controlLoftloader("show");
communication.sendEventToParent("child_init_needInputsWithValue");
break;
}
@@ -178,8 +183,14 @@ function messagesHandler(inE: any) {
// fill select dropdown
const seatmapListing: I.Seatmap[] = xml.getSeatmapListing(XML);
console.log(seatmapListing);
ui.setOptionSelect(seatmapListing, "dropdownSeatmap");
// display first seatmapXML
const id: string = seatmapListing[0].id[0];
jQuery("#dropdownSeatmap").val(id);
communication.needSeatmapXML(id);
break;
}
case "parent_init_sendInputsWithValue": {
@@ -191,11 +202,13 @@ function messagesHandler(inE: any) {
const XML: any = data.message.map_response;
const seatmapInitMap: string[] = generateMap(XML);
const seatmapInitRows: number[] = getRows(XML);
const seatmapInitSeats: I.JSCSeats = getSeats(XML);
const seatmapInitSeats: I.JSCSeats = getSeats(XML);
console.log(seatmapInitSeats);
addSeatmap("#containerSeatmapInner", seatmapInitMap, seatmapInitRows, seatmapInitSeats);
addPanzoom("#containerSeatmapInner", "#panzoomZoomIn", "#panzoomZoomOut", "#panzoomResetZoom");
addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
controlLoftloader("hide");
break;
}
@@ -209,7 +222,7 @@ function getSeats(inXML: any): I.JSCSeats {
const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale;
let object: any = {};
for (let key in pricescaleArr) {
for (let key in pricescaleArr) {
const seatsObj: I.JSCSeats2 = {
"classes": "foobar",
"seatsObj": pricescaleArr[key]
@@ -259,19 +272,7 @@ function getRows(inXML: any): number[] {
const layout: I.SeatmapLayout = inXML.seatmap[0].layouts[0].layout[0];
const height: number = parseInt(layout.height[0]);
return Array.from({ length: height }, (_, i: number) => i + 1)
// const rows: I.LayoutRow2[] = XML.seatmap[0].layouts[0].layout[0].rows[0].row;
// console.log(rows);
// let seatmapInitRows: number[] = [];
// rows.forEach(element => {
// const row: I.LayoutRow2 = element;
// const Y: number = parseInt(row.y_cell_coord[0]);
// seatmapInitRows.push(Y);
// });
// return seatmapInitRows;
return Array.from({ length: height }, (_, i: number) => i + 1);
}
function generateMap(inXML: any): string[] {
@@ -332,9 +333,9 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP
}
function getSeatsKey(inSeatID: string, inPricescaleArr: I.SeatmapPricescale[]): string | undefined {
for (let key in inPricescaleArr) {
for (let key in inPricescaleArr) {
if (inPricescaleArr[key].mask[0].includes(inSeatID))
return String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase();
return String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase();
}
return undefined;

22
client/src/types.ts
View File

@@ -78,16 +78,18 @@ export interface InputsWithValue {
// }
export interface Config {
debug: boolean,
branch: string,
urlSeatmapStaging: string,
urlSeatmapMaster: string
urlCSSSeatmapStaging: string,
urlCSSSeatmapMaster: string
urlSeatChartsStaging: string,
urlSeatChartsMaster: string,
urlCSSSeatChartsStaging: string,
urlCSSSeatChartsMaster: string,
debug: boolean;
branch: string;
urlSeatmapStaging: string;
urlSeatmapMaster: string;
urlCSSChildStaging: string;
urlCSSChildMaster: string;
urlJSCStaging: string;
urlJSCMaster: string;
urlCSSJSCStaging: string;
urlCSSJSCMaster: string;
urlCSSParentStaging: string;
urlCSSParentMaster: string;
}
export interface Message {