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

reworking jsc still in progress

Browse Source
This commit is contained in:
zino
2021-05-17 01:34:18 +02:00
parent 8c7d36d2f6
commit d08ca9f1e4
4 changed files with 88 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/modules/events.ts
View File

@@ -12,13 +12,13 @@ export function addCloseModal(): void {
btnCloseModal.addEventListener("click", () => Communication.sendEventToParent("child_closeDialog"));
}
export function addDropdownSeatmap(inPanzoom: any): void {
export function addDropdownSeatmap(): void {
const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");
if (dropdownSeatmap) {
dropdownSeatmap.addEventListener("change", function (this: HTMLSelectElement) {
UI.controlLoftloader("show"); // todo: rewrite?
UI.destroyCurrentSeatmap("#containerSeatmapInner", inPanzoom);
UI.destroyCurrentSeatmap("#containerSeatmapInner");
Communication.needSeatmapXML(this.value);
});
}

169
client/src/modules/jsc.ts
View File

@@ -5,9 +5,9 @@ import * as Cart from "./cart";
import * as UI from "./ui";
export function getSeats(): I.JSCSeats {
const seatmapXML = config.state.seatmapXML;
const seatmapXML: any = config.state.seatmapXML;
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
let object: any = {};
let seatmapInitSeats: I.JSCSeats = {};
for (let key in pricescaleArr) {
const seatsObj: I.JSCSeats2 = {
@@ -15,40 +15,43 @@ export function getSeats(): I.JSCSeats {
"seatsObj": pricescaleArr[key]
}
const seatsKey: string = String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase();
object[seatsKey] = seatsObj;
seatmapInitSeats[seatsKey] = seatsObj;
}
const seatmapInitSeats: I.JSCSeats = object;
return seatmapInitSeats;
}
export function activateSeatsBySectionID(inValue: string) {
const seatmapXML = config.state.seatmapXML;
const seatmap = config.state.seatmap;
export function activateSeatsBySectionID(inValue: string): void {
const seatmapXML: any = config.state.seatmapXML;
const seatmap: any = config.state.seatmap;
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
pricescaleArr.forEach(element => {
if (element.id[0] === inValue) {
const seatsArr = element.mask[0].split(",");
seatmap.status(seatsArr, "available");
}
});
// pricescaleArr.forEach(element => {
// if (element.id[0] === inValue) {
// const seatsArr = element.mask[0].split(",");
// seatmap.status(seatsArr, "available");
// }
// });
const seatsArr: string[] | undefined = pricescaleArr.find(arr => {
return arr.id[0] === inValue;
})?.mask[0].split(",");
seatmap.status(seatsArr, "available");
}
export function getRowsNaming(): string[] {
const seatmapXML = config.state.seatmapXML;
const seatmapXML: any = config.state.seatmapXML;
const layout: I.SeatmapLayout = seatmapXML.seatmap[0].layouts[0].layout[0];
const height: number = parseInt(layout.height[0]);
// return Array.from({ length: height }, (_, i: number) => i + 1);
const namingArr = Array.from({ length: height }, (_) => "");
const rowsArr = layout.rows[0].row;
const namingArr: string[] = Array.from({ length: height }, (_) => "");
const rowsArr: I.LayoutRow2[] = layout.rows[0].row;
rowsArr.forEach(element => {
const index: number = parseInt(element.y_cell_coord[0]);
const seatsArr: string[] = element.seats[0].split("|");
const seatArr: string[] = splitSeatStr(seatsArr[0]);
const row = seatArr[4];
const row: string = seatArr[4];
namingArr[index] = row;
});
@@ -56,72 +59,56 @@ export function getRowsNaming(): string[] {
}
export function generateMap(): string[] {
const seatmapXML = config.state.seatmapXML;
const seatmapXML: any = config.state.seatmapXML;
const layout: I.SeatmapLayout = seatmapXML.seatmap[0].layouts[0].layout[0];
const rows: I.LayoutRow2[] = layout.rows[0].row;
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
const availabilityArr: I.JSCAvailability = seatmapXML.seatmap[0].view_modes[0].view_mode[0].availability[0];
// Form: arrMatrix[Y][X]
let arrMatrix: string[][] = createArrMatrix(parseInt(layout.height[0]), parseInt(layout.width[0]), "_");
arrMatrix = enterSeatsInMatrix(rows, arrMatrix, pricescaleArr, availabilityArr);
const stringArrMatrix = generateStringArrMatrix(arrMatrix);
let arrMatrix: string[][] = createArrMatrix(
parseInt(layout.height[0]),
parseInt(layout.width[0]),
"_"
);
return stringArrMatrix;
arrMatrix = enterSeatsInMatrix(rows, arrMatrix, pricescaleArr, availabilityArr);
return arrMatrix.map(element => element.join(""));
}
export function generateLegend(inNode: string): I.JSCLegend {
const seatmapXML = config.state.seatmapXML;
const venueXML = config.state.inVenueXML!;
const seatmapXML: any = config.state.seatmapXML;
const venueXML: I.VenueXML = config.state.inVenueXML!;
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
const venuePricescaleArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale;
let legend: I.JSCLegend = {
return <I.JSCLegend>{
node: jQuery(inNode),
items: []
items: createLegendItems(pricescaleArr, venuePricescaleArr)
}
}
// todo: dynamic function to get a pricescale property by id
for (let key in pricescaleArr) {
const id: string = pricescaleArr[key].id[0];
const seatsKey: string = String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase();
// get pricescale desc from venueXML
const desc = venuePricescaleArr.find(obj => {
const pricecaleID = obj.id[0];
return pricecaleID === id;
})?.desc[0];
const description: string = `${desc} €${pricescaleArr[key].ref_price[0]}`;
const legendItem = [seatsKey, "available", description];
legend.items.push(legendItem);
}
return legend;
function createLegendItems(pricescaleArr: I.SeatmapPricescale[], venuePricescaleArr: I.Pricescale2[]): string[][] {
return pricescaleArr.map((arr, index: number) => {
const id: string = arr.id[0];
const seatsKey: string = String.fromCharCode(97 + index).toLocaleUpperCase();
const desc: string | undefined = venuePricescaleArr.find(obj => obj.id[0] === id)?.desc[0];
const description: string = `${desc} €${pricescaleArr[index].ref_price[0]}`;
return [seatsKey, "available", description];
});
}
export function setUnavailableSeats(): void {
const seatmapXML = config.state.seatmapXML;
const seatmap = config.state.seatmap;
const seatmapXML: any = config.state.seatmapXML;
const seatmap: any = config.state.seatmap;
const availabilityArr: I.JSCAvailability = seatmapXML.seatmap[0].view_modes[0].view_mode[0].availability[0];
if (availabilityArr.unavailable_unselectable_mask[0] === "")
return;
const unavailableArr: string[] = availabilityArr.unavailable_unselectable_mask[0].split(",");
seatmap.status(unavailableArr, "unavailable");
if (availabilityArr.unavailable_unselectable_mask[0] !== "") {
const unavailableArr: string[] = availabilityArr.unavailable_unselectable_mask[0].split(",");
seatmap.status(unavailableArr, "unavailable");
}
}
export 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[], inAvailabilityArr: I.JSCAvailability): string[][] {
const availableArr: string[] = inAvailabilityArr.available_selectable_mask[0].split(",");
const unavailableArr: string[] = inAvailabilityArr.unavailable_unselectable_mask[0].split(",");
@@ -151,10 +138,11 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP
// const X: number = parseInt(seatArr[5]);
const X: number = parseInt(seatArr[2]) - 1;
const seatsKey = getSeatsKey(seatArr[0], inPricescaleArr);
const seatsKey: string | undefined = getSeatsKey(seatArr[0], inPricescaleArr);
if (seatsKey)
inArrMatrix[Y][X] = generateSeatStr(seatsKey, seatArr);
inArrMatrix[Y][X] = `${seatsKey}[${seatArr[0]}, ]`;
// save seatArr in state with seatID as key
config.state.layoutRows[seatArr[0]] = seatArr;
@@ -165,37 +153,40 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP
}
export 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();
}
// for (let key in inPricescaleArr) {
// if (inPricescaleArr[key].mask[0].includes(inSeatID))
// return String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase();
// }
return undefined;
}
export function generateSeatStr(seatLetter: string, seatArr: string[]): string {
return `${seatLetter}[${seatArr[0]}, ]`;
return inPricescaleArr.map((arr, index) => {
if (arr.mask[0].includes(inSeatID))
return String.fromCharCode(97 + index).toLocaleUpperCase();
else
return undefined;
})[0];
}
export function splitSeatStr(inSeatStr: string): string[] {
const seatArr: string[] = inSeatStr.split(",").map(function (item) {
return item.trim();
});
return seatArr;
return inSeatStr.split(",").map((item) => item.trim());
}
export 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;
}
export function createArrMatrix(inNumrows: number, inNumcols: number, inCharacter: string): string[][] {
// let matrixArr: string[][] = [];
return arr;
// for (let i: number = 0; i < inNumrows; ++i) {
// let columns: string[] = [];
// for (let j: number = 0; j < inNumcols; ++j)
// columns[j] = inCharacter;
// matrixArr[i] = columns;
// }
// return matrixArr;
return Array(inNumrows).fill(null).map(() => Array(inNumcols).fill(inCharacter));
}
export function addTrims() {

10
client/src/modules/ui.ts
View File

@@ -91,9 +91,9 @@ export function convertLegendToDropdown(inID: string) {
});
}
export function destroyCurrentSeatmap(inSelector: string, inPanzoom: PanzoomObject | undefined): void {
if (inPanzoom)
unbindPanzoomEvents(inSelector, inPanzoom);
export function destroyCurrentSeatmap(inSelector: string): void {
if (config.state.panzoom)
unbindPanzoomEvents(inSelector);
jQuery("#containerSeatmapInner").remove();
jQuery("#htmlSeatmapInner .fl-html").removeAttr("style");
@@ -109,10 +109,10 @@ export function controlLoftloader(inSwitch: string) {
jQuery("body").addClass("loaded loftloader-loaded");
}
function unbindPanzoomEvents(inSelector: string, inPanzoom: PanzoomObject): void {
function unbindPanzoomEvents(inSelector: string): void {
console.log("unbinding now");
const container: HTMLElement = jQuery(inSelector).get(0);
container.parentElement?.removeEventListener('wheel', inPanzoom.zoomWithWheel);
container.parentElement?.removeEventListener('wheel', config.state.panzoom!.zoomWithWheel);
}
export function addPanzoom(inSelector: string, inBtnZoomIn: string | null = null, inBtnZoomOut: string | null = null, inBtnResetZoom: string | null = null): PanzoomObject | undefined {

2
client/src/seatmap.ts
View File

@@ -36,7 +36,7 @@ window.addEventListener('load', () => {
// Add event listeners
Events.addCloseModal();
Events.addModalCart();
Events.addDropdownSeatmap(config.state.panzoom);
Events.addDropdownSeatmap();
});