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

seats

Browse Source
This commit is contained in:
zino
2021-03-16 00:33:40 +01:00
parent 3190075057
commit 99c765bde0
6 changed files with 395 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
client/package-lock.json generated
View File

@@ -8,6 +8,7 @@
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"@panzoom/panzoom": "^4.3.2",
"axios": "^0.21.1",
"xml2js": "^0.4.23"
},
@@ -23,6 +24,11 @@
"uglify-js": "^3.13.0"
}
},
"node_modules/@panzoom/panzoom": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/@panzoom/panzoom/-/panzoom-4.3.2.tgz",
"integrity": "sha512-6D4UDsYXowzMJ/1XSbylRj9BGhCR7mQQ5m/s6MiKx11ThLcEiU4kgq59vhS8+RnOGA789FcdmGvK1/hIxyRD+w=="
},
"node_modules/@types/axios": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz",
@@ -2065,6 +2071,11 @@
}
},
"dependencies": {
"@panzoom/panzoom": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/@panzoom/panzoom/-/panzoom-4.3.2.tgz",
"integrity": "sha512-6D4UDsYXowzMJ/1XSbylRj9BGhCR7mQQ5m/s6MiKx11ThLcEiU4kgq59vhS8+RnOGA789FcdmGvK1/hIxyRD+w=="
},
"@types/axios": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz",

1
client/package.json
View File

@@ -22,6 +22,7 @@
"uglify-js": "^3.13.0"
},
"dependencies": {
"@panzoom/panzoom": "^4.3.2",
"axios": "^0.21.1",
"xml2js": "^0.4.23"
}

15
client/src/inject.ts
View File

@@ -2,7 +2,7 @@
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;
@@ -14,13 +14,17 @@ import * as communication from "./communication";
// const util = require('util');
// var xml2jsParser = require('xml2js').parseString;
const config: I.Config = {
export 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",
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"
}
let inputsWithValue: I.InputsWithValue;
@@ -41,7 +45,8 @@ window.addEventListener('load', function () {
if (inputsWithValue["trxstate"] !== "20" || /posturl:"(.+?)"/.test(content) === false)
return;
Utils.inject(config.cssSeatmapStaging, "css", "body");
// Utils.inject(config.urlCSSSeatChartsStaging, "css", "body");
// Utils.inject(config.urlCSSSeatmapStaging, "css", "body");
communication.listenToMessages(messagesHandler);
getAdditionalInputs(content);
console.log(inputsWithValue);

279
client/src/seatmap.ts
View File

@@ -3,15 +3,22 @@ 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 Panzoom from '@panzoom/panzoom';
// var sc = require("../libs/jQuery-Seat-Charts/jquery.seat-charts.js");
// var parseString = require('xml2js').parseString;
// import axios from 'axios';
// import Utils from './utils';
// let checkoutParams: string[];
// let posturl: string;
let inputsWithValue: I.InputsWithValue;
let seatmap: any;
window.addEventListener('load', function () {
jQuery("#foobar").on("click", () => {
communication.sendMessage(<I.Message>{
message: "Hello from child",
@@ -21,14 +28,11 @@ window.addEventListener('load', function () {
}, "parent");
});
Utils.inject(config.urlSeatChartsStaging, "js", "head");
Utils.inject(config.urlCSSSeatChartsStaging, "css", "body");
Utils.inject(config.urlCSSSeatmapStaging, "css", "body");
communication.listenToMessages(messagesHandler);
// jQuery("#dropdownSeatmap").on("change", (e: HTMLSelectElement) => {
// const value = (<HTMLSelectElement>e).value;
// console.log(e);
// // console.log(e);
// });
// Utils.waitForSeatmap(addSeatmap);
const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");
if (dropdownSeatmap) {
@@ -45,21 +49,98 @@ window.addEventListener('load', function () {
}
});
// // dropdownSeatmap change
// jQuery('#dropdownSeatmap').on('change', function () {
// console.log("hi1");
// // callback(this);
// 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 messagesHandler(e: any) {
if (typeof (e.data) !== 'string')
});
function addSeatmap(inSelector: string, inSeatmapInitMap: string[], inSeatmapInitRows: number[], inSeats: I.JSCSeats): void {
const containerSeatmap: any = (<any>window).jQuery(inSelector);
seatmap = containerSeatmap.seatCharts({
naming: {
top: false,
left: true,
rows: inSeatmapInitRows,
},
map: inSeatmapInitMap,
// map: [
// 'aaaaaa__DDDDD',
// 'aaaaaa__aaaaa',
// 'aaaaaa__aaaaa',
// 'bbbbbb__bbbbb',
// 'bbbbbb__bbbbb',
// 'bbbbbb__bbbbb',
// 'ccccccccccccc'
// ],
seats: inSeats,
// seats: {
// A: {
// price: 99.99,
// classes: 'front-seat' //your custom CSS class
// }
// },
click: function () {
if (this.status() == 'available') {
console.log("available");
console.log(this);
//do some stuff, i.e. add to the cart
return 'selected';
}
else if (this.status() == 'selected') {
console.log("selected");
//seat has been vacated
return 'available';
}
else if (this.status() == 'unavailable') {
console.log("unavailable");
//seat has been already booked
return 'unavailable';
}
else {
return this.style();
}
}
});
console.log(seatmap);
// //Make all available 'c' seats unavailable
// sc.find('c.available').status('unavailable');
// /*
// // Get seats with ids 2_6, 1_7 (more on ids later on)
// put them in a jQuery set and change some css
// */
// sc.get(['2_6', '1_7']).node().css({
// color: '#ffcfcf'
// });
// console.log('Seat 1_2 costs ' + sc.get('1_2').data().price + ' and is currently ' + sc.status('1_2'));
}
function messagesHandler(inE: any) {
if (typeof (inE.data) !== 'string')
return;
const data: I.Message = JSON.parse(e.data);
const data: I.Message = JSON.parse(inE.data);
console.log(`child: received from ${data.from}`);
console.log(data);
@@ -108,7 +189,13 @@ function messagesHandler(e: any) {
}
case "parent_sendSeatmapXML": {
const XML: any = data.message.map_response;
console.log(XML);
const seatmapInitMap: string[] = generateMap(XML);
const seatmapInitRows: number[] = getRows(XML);
const seatmapInitSeats: I.JSCSeats = getSeats(XML);
console.log(seatmapInitSeats);
addSeatmap("#containerSeatmapInner", seatmapInitMap, seatmapInitRows, seatmapInitSeats);
addPanzoom("#containerSeatmapInner", "#panzoomZoomIn", "#panzoomZoomOut", "#panzoomResetZoom");
break;
}
@@ -118,6 +205,165 @@ function messagesHandler(e: any) {
}
}
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) {
const seatsObj: I.JSCSeats2 = {
"classes": "foobar",
"seatsObj": pricescaleArr[key]
}
const seatsKey: string = String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase();
object[seatsKey] = seatsObj;
}
const seatmapInitSeats: I.JSCSeats = object;
return seatmapInitSeats;
}
function addPanzoom(inSelector: string, inBtnZoomIn: string | null = null, inBtnZoomOut: string | null = null, inBtnResetZoom: string | null = null) {
const container: HTMLElement = jQuery(inSelector).get(0);
if (container) {
const panzoom = Panzoom(container, {
maxScale: 5,
animate: false,
overflow: "hidden",
});
container.parentElement!.addEventListener('wheel', panzoom.zoomWithWheel);
if (inBtnZoomIn) {
const btnZoomIn: HTMLElement | undefined = jQuery(inBtnZoomIn).get(0);
if (btnZoomIn)
btnZoomIn.addEventListener('click', panzoom.zoomIn);
}
if (inBtnZoomOut) {
const btnZoomOut: HTMLElement | undefined = jQuery(inBtnZoomOut).get(0);
if (btnZoomOut)
btnZoomOut.addEventListener('click', panzoom.zoomOut);
}
if (inBtnResetZoom) {
const btnResetZoom: HTMLElement | undefined = jQuery(inBtnResetZoom).get(0);
if (btnResetZoom)
btnResetZoom.addEventListener('click', panzoom.reset);
}
}
}
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;
}
function generateMap(inXML: any): string[] {
const layout: I.SeatmapLayout = inXML.seatmap[0].layouts[0].layout[0];
console.log(layout);
const rows: I.LayoutRow2[] = layout.rows[0].row;
const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale;
// Form: arrMatrix[Y][X]
let arrMatrix: string[][] = createArrMatrix(parseInt(layout.height[0]), parseInt(layout.width[0]), "_");
arrMatrix = enterSeatsInMatrix(rows, arrMatrix, pricescaleArr);
const stringArrMatrix = generateStringArrMatrix(arrMatrix);
return stringArrMatrix;
}
function generateStringArrMatrix(inArrMatrix: string[][]): string[] {
const stringArrMatrix: string[] = [];
inArrMatrix.forEach(element => {
stringArrMatrix.push(element.join(""));
});
return stringArrMatrix;
}
function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inPricescaleArr: I.SeatmapPricescale[]): string[][] {
inRows.forEach(element => {
const row: I.LayoutRow2 = element;
const Y: number = parseInt(row.y_cell_coord[0]);
const seatsArr: string[] = row.seats[0].split("|");
seatsArr.forEach(element => {
const seatStr: string = element;
// Form:
// "568420,568420,15,7024,13 ,1"
const seatArr: string[] = splitSeatStr(seatStr);
// Form:
// 0: "568528"
// 1: "568528"
// 2: "21"
// 3: "7024"
// 4: "13"
// 5: "4"
const X: number = parseInt(seatArr[5]);
const seatsKey = getSeatsKey(seatArr[0], inPricescaleArr);
if (seatsKey)
inArrMatrix[Y][X] = generateSeatStr(seatsKey, seatArr);
});
});
return inArrMatrix;
}
function getSeatsKey(inSeatID: string, inPricescaleArr: I.SeatmapPricescale[]): string | undefined {
for (let key in inPricescaleArr) {
if (inPricescaleArr[key].mask[0].includes(inSeatID))
return String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase();
}
return undefined;
}
function generateSeatStr(seatLetter: string, seatArr: string[]): string {
return `${seatLetter}[${seatArr[0]}, ]`;
}
function splitSeatStr(inSeatStr: string): string[] {
const seatArr: string[] = inSeatStr.split(",").map(function (item) {
return item.trim();
});
return seatArr;
}
function createArrMatrix(inNumrows: number, inNumcols: number, inInitial: string) {
var arr: string[][] = [];
for (let i: number = 0; i < inNumrows; ++i) {
let columns: string[] = [];
for (let j: number = 0; j < inNumcols; ++j) {
columns[j] = inInitial;
}
arr[i] = columns;
}
return arr;
}
// window.addEventListener('message', function(e) {
@@ -152,3 +398,4 @@ function messagesHandler(e: any) {
// checkoutParams = JSON.parse(<string>urlParams.get('checkoutParams'));
// posturl = <string>urlParams.get('posturl');
// }

56
client/src/types.ts
View File

@@ -82,8 +82,12 @@ export interface Config {
branch: string,
urlSeatmapStaging: string,
urlSeatmapMaster: string
cssSeatmapStaging: string,
cssSeatmapMaster: string
urlCSSSeatmapStaging: string,
urlCSSSeatmapMaster: string
urlSeatChartsStaging: string,
urlSeatChartsMaster: string,
urlCSSSeatChartsStaging: string,
urlCSSSeatChartsMaster: string,
}
export interface Message {
@@ -304,3 +308,51 @@ export interface SeatmapConfig3 {
timestamp: string[];
seatmap: Seatmap[];
}
// layout
export interface LayoutRow2 {
seats: string[];
y_cell_coord: string[];
}
export interface LayoutRow {
row: LayoutRow2[];
}
export interface SeatmapLayout {
cell_coord: string[];
code: string[];
desc: string[];
height: string[];
id: string[];
type: string[];
width: string[];
rows: LayoutRow[];
}
// pricescale
export interface SeatmapPricescale {
currency: string[];
display_order: string[];
id: string[];
mask: string[];
ref_price: string[];
}
// seats object
export interface SeatsObj {
currency: string[];
display_order: string[];
id: string[];
mask: string[];
ref_price: string[];
}
export interface JSCSeats2 {
classes: string;
seatsObj: SeatsObj;
}
export interface JSCSeats {
[key: string]: JSCSeats2;
}

54
client/src/utils.ts
View File

@@ -1,15 +1,25 @@
export default class Utils {
static waitForElement(selector: string, callback: Function, checkFrequencyInMs: number = 100, timeoutInMs: number = 10000) {
static waitForElement(selector: any, callback: Function, type: string = "selector", checkFrequencyInMs: number = 1000, timeoutInMs: number = 10000) {
let startTimeInMs: number = Date.now();
(function loopSearch(): void {
if (document.querySelector(selector) != null) {
console.log("executing");
let value: boolean;
console.log(selector);
if (type === "selector")
value = Utils.querySelector(selector);
else if (type === "function")
value = Utils.isFunction(selector);
else
value = false;
if (value) {
console.log("defined");
callback();
return;
}
else {
console.log("repeating");
setTimeout(function (): void {
console.log("repeating");
if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
return;
loopSearch();
@@ -18,7 +28,39 @@ export default class Utils {
})();
}
static delay(ms: number) {
static waitForSeatmap(callback: Function, checkFrequencyInMs: number = 100, timeoutInMs: number = 10000) {
const seatCharts: any = (<any>window).jQuery("#containerSeatmap").seatCharts;
let startTimeInMs: number = Date.now();
if (Utils.isFunction(seatCharts)) {
console.log("defined");
callback();
}
else {
setTimeout(function (): void {
console.log("repeating");
if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
return;
Utils.waitForSeatmap(callback);
}, checkFrequencyInMs);
}
}
static querySelector(selector: string): boolean {
if (document.querySelector(selector) != null)
return true;
else
return false;
}
static isFunction(selector: string): boolean {
if (typeof selector === "function")
return true;
else
return false;
}
static async delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}