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

@@ -57,3 +57,13 @@ export function sendEventToParent(inEvent: string) {
}; };
sendMessage(message, "parent"); 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"); var $ = require("jquery");
import 'jquery-ui'; import 'jquery-ui';
import * as I from "./types"; import * as I from "./types";
// import Utils from './utils'; import Utils from './utils';
import * as communication from "./communication"; 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 = { export const config: I.Config = {
debug: true, debug: true,
branch: "staging", branch: "staging",
urlSeatmapStaging: "https://staging.tickets.zinomedia.de", urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
urlSeatmapMaster: "https://tickets.zinomedia.de", urlSeatmapMaster: "https://tickets.zinomedia.de",
urlCSSSeatmapMaster: "https://tickets.zinomedia.de/dist/style.css", urlCSSChildMaster: "https://tickets.zinomedia.de/dist/styleChild.css",
urlCSSSeatmapStaging: "https://staging.tickets.zinomedia.de/dist/style.css", urlCSSChildStaging: "https://staging.tickets.zinomedia.de/dist/styleChild.css",
urlSeatChartsStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js", urlCSSParentMaster: "https://tickets.zinomedia.de/dist/styleParent.css",
urlSeatChartsMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js", urlCSSParentStaging: "https://staging.tickets.zinomedia.de/dist/styleParent.css",
urlCSSSeatChartsStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css", urlJSCStaging: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js",
urlCSSSeatChartsMaster: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css" 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 inputsWithValue: I.InputsWithValue;
let childHasVenueXML: boolean = false;
// 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 () { window.addEventListener('load', function () {
const content: string = new XMLSerializer().serializeToString(document); const content: string = new XMLSerializer().serializeToString(document);
@@ -45,25 +33,15 @@ window.addEventListener('load', function () {
if (inputsWithValue["trxstate"] !== "20" || /posturl:"(.+?)"/.test(content) === false) if (inputsWithValue["trxstate"] !== "20" || /posturl:"(.+?)"/.test(content) === false)
return; return;
// Utils.inject(config.urlCSSSeatChartsStaging, "css", "body"); Utils.inject(config.urlCSSParentStaging, "css", "body");
// Utils.inject(config.urlCSSSeatmapStaging, "css", "body");
communication.listenToMessages(messagesHandler); communication.listenToMessages(messagesHandler);
getAdditionalInputs(content); getAdditionalInputs(content);
console.log(inputsWithValue); console.log(inputsWithValue);
getImportantNote(); getImportantNote();
modifySeatmapButton(); jQuery(".flash_seat_map_box").remove();
injectBookingBtn();
createDialog(); 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", () => { jQuery("#foobarParent").on("click", () => {
communication.sendEventToChild("parent_init_venue"); communication.sendEventToChild("parent_init_venue");
}); });
@@ -91,6 +69,7 @@ function messagesHandler(e: any) {
} }
case "child_init_needVenueXML": { 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; break;
} }
case "child_needSeatmapXML": { case "child_needSeatmapXML": {
@@ -98,17 +77,20 @@ function messagesHandler(e: any) {
communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent"); communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent");
break; break;
} }
case "child_seatmap_ready": {
jQuery("#containerBookingBtn").show();
break;
}
default: default:
break; break;
} }
} }
function generateSeatmapUrl(seatmapId : string): string { function generateSeatmapUrl(seatmapId: string): string {
return `${inputsWithValue["posturlRawDecoded"]}&inclseatmap=Y&seatmap=${seatmapId}`; return `${inputsWithValue["posturlRawDecoded"]}&inclseatmap=Y&seatmap=${seatmapId}`;
} }
function getVenueLocation(): string { function getVenueLocation(): string {
let span: string[] = []; let span: string[] = [];
jQuery(".venue span").each(function () { jQuery(".venue span").each(function () {
@@ -155,39 +137,42 @@ function createDialog(): void {
hide: true, hide: true,
show: true, show: true,
resizable: false, resizable: false,
title: "Saalplanbuchung", title: "",
width: "99%", width: "99%",
height: "auto", height: "auto",
close: () => {
jQuery('html, body').css('overflow', 'auto');
}
}); });
jQuery("#openSeatmap").on("click", () => { jQuery("#openSeatmap").on("click", () => {
if (!childHasVenueXML)
communication.sendEventToChild("parent_init_venue");
jQuery('html, body').css('overflow', 'hidden');
jQuery("#dialogSeatmap").dialog('open'); jQuery("#dialogSeatmap").dialog('open');
}); });
} }
function modifySeatmapButton(): void { function injectBookingBtn(): void {
$(".flash_seat_map_box").remove(); jQuery('#flash_seat_map_box_id').css({
$('#flash_seat_map_box_id').css({
"display": "block", "display": "block",
"position": "relative", "position": "relative",
"width": "100%" "width": "100%"
}); });
$('#get_flash').css('display', 'none'); jQuery("#flash_seat_map_box_id").append(`
$("#flash_seat_map_box_id").append(` <div id="containerBookingBtn">
<div style= <button type="button" id="openSeatmap">
'margin: 0; <div>
position: absolute; <img src="https://staging.tickets.zinomedia.de/dist/stadium.png">
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> </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{ // $(window).on('resize', function(): void{

85
client/src/seatmap.ts
View File

@@ -28,45 +28,49 @@ window.addEventListener('load', function () {
}, "parent"); }, "parent");
}); });
Utils.inject(config.urlSeatChartsStaging, "js", "head"); Utils.inject(config.urlJSCStaging, "js", "head");
Utils.inject(config.urlCSSSeatChartsStaging, "css", "body"); Utils.inject(config.urlCSSJSCStaging, "css", "body");
Utils.inject(config.urlCSSSeatmapStaging, "css", "body"); Utils.inject(config.urlCSSChildStaging, "css", "body");
communication.listenToMessages(messagesHandler); communication.listenToMessages(messagesHandler);
// Utils.waitForSeatmap(addSeatmap); Utils.waitForSeatmap(showBookingBtnParent);
const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap"); const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");
if (dropdownSeatmap) { if (dropdownSeatmap) {
dropdownSeatmap.addEventListener("change", function (this: HTMLSelectElement) { dropdownSeatmap.addEventListener("change", function (this: HTMLSelectElement) {
controlLoftloader("show");
const value: string = this.value; const value: string = this.value;
const message: I.Message = { destroyCurrentSeatmap();
message: value, communication.needSeatmapXML(value);
from: "child",
event: "child_needSeatmapXML",
date: Date.now()
};
communication.sendMessage(message, "parent");
}); });
} }
// 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 { function addSeatmap(inSelector: string, inSeatmapInitMap: string[], inSeatmapInitRows: number[], inSeats: I.JSCSeats): void {
const containerSeatmap: any = (<any>window).jQuery(inSelector); const containerSeatmap: any = (<any>window).jQuery(inSelector);
@@ -166,6 +170,7 @@ function messagesHandler(inE: any) {
break; break;
} }
case "parent_init_venue": { case "parent_init_venue": {
controlLoftloader("show");
communication.sendEventToParent("child_init_needInputsWithValue"); communication.sendEventToParent("child_init_needInputsWithValue");
break; break;
} }
@@ -178,8 +183,14 @@ function messagesHandler(inE: any) {
// fill select dropdown // fill select dropdown
const seatmapListing: I.Seatmap[] = xml.getSeatmapListing(XML); const seatmapListing: I.Seatmap[] = xml.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);
break; break;
} }
case "parent_init_sendInputsWithValue": { case "parent_init_sendInputsWithValue": {
@@ -195,7 +206,9 @@ function messagesHandler(inE: any) {
console.log(seatmapInitSeats); console.log(seatmapInitSeats);
addSeatmap("#containerSeatmapInner", seatmapInitMap, seatmapInitRows, seatmapInitSeats); addSeatmap("#containerSeatmapInner", seatmapInitMap, seatmapInitRows, seatmapInitSeats);
addPanzoom("#containerSeatmapInner", "#panzoomZoomIn", "#panzoomZoomOut", "#panzoomResetZoom"); addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
controlLoftloader("hide");
break; break;
} }
@@ -259,19 +272,7 @@ function getRows(inXML: any): number[] {
const layout: I.SeatmapLayout = inXML.seatmap[0].layouts[0].layout[0]; const layout: I.SeatmapLayout = inXML.seatmap[0].layouts[0].layout[0];
const height: number = parseInt(layout.height[0]); const height: number = parseInt(layout.height[0]);
return Array.from({ length: height }, (_, i: number) => i + 1) 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;
} }
function generateMap(inXML: any): string[] { function generateMap(inXML: any): string[] {

22
client/src/types.ts
View File

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