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

fixed splitting

Browse Source
This commit is contained in:
zino
2021-03-17 14:02:34 +01:00
parent 65cb9bff60
commit c7a6267975
6 changed files with 318 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

393
client/src/seatmap.ts
View File

@@ -3,74 +3,109 @@ 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 * as JSC from "./modules/jsc";
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;
// import axios from 'axios';
// import Utils from './utils';
// let checkoutParams: string[];
// let posturl: string;
let inputsWithValue: I.InputsWithValue;
let seatmap: any;
function messagesHandler(inE: any) {
if (typeof (inE.data) !== 'string')
return;
const data: I.Message = JSON.parse(inE.data);
console.log(`child: received from ${data.from}`);
console.log(data);
switch (data.event) {
case "RefreshDropdown": {
const venueXML: I.VenueXML = data.message.map_response;
const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(venueXML);
UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
break;
}
case "addDropdown": {
console.log("adding to dropdown now...");
var min = 12,
max = 100,
select = document.getElementById('dropdownSeatmap');
for (var i = min; i <= max; i++) {
var opt = document.createElement('option');
opt.value = i.toString();
opt.innerHTML = i.toString();
select!.appendChild(opt);
}
break;
}
case "parent_init_venue": {
UI.controlLoftloader("show");
Communication.sendEventToParent("child_init_needInputsWithValue");
break;
}
case "parent_init_sendVenueXML": {
const XML: I.VenueXML = data.message.map_response;
// fill event info
const eventInfo = XMLHelper.getEventInfo(XML);
UI.setEventInfo(eventInfo, inputsWithValue);
// fill select dropdown
const seatmapListing: I.Seatmap[] = XMLHelper.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": {
inputsWithValue = data.message;
Communication.sendEventToParent("child_init_needVenueXML");
break;
}
case "parent_sendSeatmapXML": {
const XML: any = data.message.map_response;
const seatmapInitMap: string[] = JSC.generateMap(XML);
const seatmapInitRows: number[] = JSC.getRows(XML);
const seatmapInitSeats: I.JSCSeats = JSC.getSeats(XML);
console.log(seatmapInitSeats);
addSeatmap("#containerSeatmapInner", seatmapInitMap, seatmapInitRows, seatmapInitSeats);
UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
UI.controlLoftloader("hide");
break;
}
default:
break;
}
}
window.addEventListener('load', function () {
jQuery("#foobar").on("click", () => {
Communication.sendMessage(<I.Message>{
message: "Hello from child",
from: "child",
event: "foobar",
date: Date.now(),
}, "parent");
});
Utils.inject(config.urlJSCStaging, "js", "head");
Utils.inject(config.urlCSSJSCStaging, "css", "body");
Utils.inject(config.urlCSSChildStaging, "css", "body");
Communication.listenToMessages(messagesHandler);
Utils.waitForSeatmap(showBookingBtnParent);
Utils.waitForSeatmap(Communication.showBookingBtnParent);
const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");
if (dropdownSeatmap) {
dropdownSeatmap.addEventListener("change", function (this: HTMLSelectElement) {
controlLoftloader("show");
UI.controlLoftloader("show");
const value: string = this.value;
destroyCurrentSeatmap();
UI.destroyCurrentSeatmap();
Communication.needSeatmapXML(value);
});
}
});
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);
@@ -137,266 +172,4 @@ function addSeatmap(inSelector: string, inSeatmapInitMap: string[], inSeatmapIni
// 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(inE.data);
console.log(`child: received from ${data.from}`);
console.log(data);
switch (data.event) {
case "RefreshDropdown": {
const venueXML: I.VenueXML = data.message.map_response;
const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(venueXML);
UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
break;
}
case "addDropdown": {
console.log("adding to dropdown now...");
var min = 12,
max = 100,
select = document.getElementById('dropdownSeatmap');
for (var i = min; i <= max; i++) {
var opt = document.createElement('option');
opt.value = i.toString();
opt.innerHTML = i.toString();
select!.appendChild(opt);
}
break;
}
case "parent_init_venue": {
controlLoftloader("show");
Communication.sendEventToParent("child_init_needInputsWithValue");
break;
}
case "parent_init_sendVenueXML": {
const XML: I.VenueXML = data.message.map_response;
// fill event info
const eventInfo = XMLHelper.getEventInfo(XML);
UI.setEventInfo(eventInfo, inputsWithValue);
// fill select dropdown
const seatmapListing: I.Seatmap[] = XMLHelper.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": {
inputsWithValue = data.message;
Communication.sendEventToParent("child_init_needVenueXML");
break;
}
case "parent_sendSeatmapXML": {
const XML: any = data.message.map_response;
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");
controlLoftloader("hide");
break;
}
default:
break;
}
}
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);
}
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) {
// console.log("Child: Received");
// const data = JSON.parse(e.data);
// console.log(data);
// });
// jQuery(($) => {
// parseQueryString();
// console.log(checkoutParams);
// console.log(posturl);
// axios.get(posturl)
// .then(function (response) {
// // handle success
// console.log(response);
// })
// .catch(function (error) {
// // handle error
// console.log(error);
// });
// .then(function () {
// // always executed
// });
// });
// function parseQueryString() {
// const urlParams: URLSearchParams = new URLSearchParams(window.location.search);
// checkoutParams = JSON.parse(<string>urlParams.get('checkoutParams'));
// posturl = <string>urlParams.get('posturl');
// }
}