seats
This commit is contained in:
zino
@@ -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,18 +28,15 @@ 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);
|
||||
// Utils.waitForSeatmap(addSeatmap);
|
||||
|
||||
// jQuery("#dropdownSeatmap").on("change", (e: HTMLSelectElement) => {
|
||||
// const value = (<HTMLSelectElement>e).value;
|
||||
// console.log(e);
|
||||
// // console.log(e);
|
||||
// });
|
||||
|
||||
|
||||
const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");
|
||||
const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");
|
||||
if (dropdownSeatmap) {
|
||||
dropdownSeatmap.addEventListener("change", function(this: HTMLSelectElement) {
|
||||
dropdownSeatmap.addEventListener("change", function (this: HTMLSelectElement) {
|
||||
const value: string = this.value;
|
||||
const message: I.Message = {
|
||||
message: value,
|
||||
@@ -44,22 +48,99 @@ window.addEventListener('load', function () {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 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)
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
// // dropdownSeatmap change
|
||||
// jQuery('#dropdownSeatmap').on('change', function () {
|
||||
// console.log("hi1");
|
||||
// // callback(this);
|
||||
// });
|
||||
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(e: any) {
|
||||
if (typeof (e.data) !== 'string')
|
||||
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) {
|
||||
@@ -151,4 +397,5 @@ function messagesHandler(e: any) {
|
||||
// const urlParams: URLSearchParams = new URLSearchParams(window.location.search);
|
||||
// checkoutParams = JSON.parse(<string>urlParams.get('checkoutParams'));
|
||||
// posturl = <string>urlParams.get('posturl');
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user