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
client/src/modules/events.ts
+2 -2
View File
@@ -12,13 +12,13 @@ export function addCloseModal(): void {
btnCloseModal.addEventListener("click", () => Communication.sendEventToParent("child_closeDialog")); btnCloseModal.addEventListener("click", () => Communication.sendEventToParent("child_closeDialog"));
} }
export function addDropdownSeatmap(inPanzoom: any): void { export function addDropdownSeatmap(): void {
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) {
UI.controlLoftloader("show"); // todo: rewrite? UI.controlLoftloader("show"); // todo: rewrite?
UI.destroyCurrentSeatmap("#containerSeatmapInner", inPanzoom); UI.destroyCurrentSeatmap("#containerSeatmapInner");
Communication.needSeatmapXML(this.value); Communication.needSeatmapXML(this.value);
}); });
} }
client/src/modules/jsc.ts
+80 -89
View File
@@ -5,9 +5,9 @@ import * as Cart from "./cart";
import * as UI from "./ui"; import * as UI from "./ui";
export function getSeats(): I.JSCSeats { 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; const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
let object: any = {}; let seatmapInitSeats: I.JSCSeats = {};
for (let key in pricescaleArr) { for (let key in pricescaleArr) {
const seatsObj: I.JSCSeats2 = { const seatsObj: I.JSCSeats2 = {
@@ -15,40 +15,43 @@ export function getSeats(): I.JSCSeats {
"seatsObj": pricescaleArr[key] "seatsObj": pricescaleArr[key]
} }
const seatsKey: string = String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase(); const seatsKey: string = String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase();
object[seatsKey] = seatsObj; seatmapInitSeats[seatsKey] = seatsObj;
} }
const seatmapInitSeats: I.JSCSeats = object;
return seatmapInitSeats; return seatmapInitSeats;
} }
export function activateSeatsBySectionID(inValue: string) { export function activateSeatsBySectionID(inValue: string): void {
const seatmapXML = config.state.seatmapXML; const seatmapXML: any = config.state.seatmapXML;
const seatmap = config.state.seatmap; const seatmap: any = config.state.seatmap;
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale; const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
pricescaleArr.forEach(element => { // pricescaleArr.forEach(element => {
if (element.id[0] === inValue) { // if (element.id[0] === inValue) {
const seatsArr = element.mask[0].split(","); // const seatsArr = element.mask[0].split(",");
seatmap.status(seatsArr, "available"); // 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[] { 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 layout: I.SeatmapLayout = seatmapXML.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); const namingArr: string[] = Array.from({ length: height }, (_) => "");
const namingArr = Array.from({ length: height }, (_) => ""); const rowsArr: I.LayoutRow2[] = layout.rows[0].row;
const rowsArr = layout.rows[0].row;
rowsArr.forEach(element => { rowsArr.forEach(element => {
const index: number = parseInt(element.y_cell_coord[0]); const index: number = parseInt(element.y_cell_coord[0]);
const seatsArr: string[] = element.seats[0].split("|"); const seatsArr: string[] = element.seats[0].split("|");
const seatArr: string[] = splitSeatStr(seatsArr[0]); const seatArr: string[] = splitSeatStr(seatsArr[0]);
const row = seatArr[4]; const row: string = seatArr[4];
namingArr[index] = row; namingArr[index] = row;
}); });
@@ -56,72 +59,56 @@ export function getRowsNaming(): string[] {
} }
export function generateMap(): 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 layout: I.SeatmapLayout = seatmapXML.seatmap[0].layouts[0].layout[0];
const rows: I.LayoutRow2[] = layout.rows[0].row; const rows: I.LayoutRow2[] = layout.rows[0].row;
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale; 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]; const availabilityArr: I.JSCAvailability = seatmapXML.seatmap[0].view_modes[0].view_mode[0].availability[0];
// Form: arrMatrix[Y][X] // Form: arrMatrix[Y][X]
let arrMatrix: string[][] = createArrMatrix(parseInt(layout.height[0]), parseInt(layout.width[0]), "_"); let arrMatrix: string[][] = createArrMatrix(
arrMatrix = enterSeatsInMatrix(rows, arrMatrix, pricescaleArr, availabilityArr); parseInt(layout.height[0]),
const stringArrMatrix = generateStringArrMatrix(arrMatrix); 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 { export function generateLegend(inNode: string): I.JSCLegend {
const seatmapXML = config.state.seatmapXML; const seatmapXML: any = config.state.seatmapXML;
const venueXML = config.state.inVenueXML!; const venueXML: I.VenueXML = config.state.inVenueXML!;
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale; const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
const venuePricescaleArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale; const venuePricescaleArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale;
let legend: I.JSCLegend = {
return <I.JSCLegend>{
node: jQuery(inNode), node: jQuery(inNode),
items: [] items: createLegendItems(pricescaleArr, venuePricescaleArr)
} }
}
// todo: dynamic function to get a pricescale property by id function createLegendItems(pricescaleArr: I.SeatmapPricescale[], venuePricescaleArr: I.Pricescale2[]): string[][] {
for (let key in pricescaleArr) { return pricescaleArr.map((arr, index: number) => {
const id: string = pricescaleArr[key].id[0]; const id: string = arr.id[0];
const seatsKey: string = String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase(); const seatsKey: string = String.fromCharCode(97 + index).toLocaleUpperCase();
const desc: string | undefined = venuePricescaleArr.find(obj => obj.id[0] === id)?.desc[0];
// get pricescale desc from venueXML const description: string = `${desc} €${pricescaleArr[index].ref_price[0]}`;
const desc = venuePricescaleArr.find(obj => { return [seatsKey, "available", description];
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;
} }
export function setUnavailableSeats(): void { export function setUnavailableSeats(): void {
const seatmapXML = config.state.seatmapXML; const seatmapXML: any = config.state.seatmapXML;
const seatmap = config.state.seatmap; const seatmap: any = config.state.seatmap;
const availabilityArr: I.JSCAvailability = seatmapXML.seatmap[0].view_modes[0].view_mode[0].availability[0]; const availabilityArr: I.JSCAvailability = seatmapXML.seatmap[0].view_modes[0].view_mode[0].availability[0];
if (availabilityArr.unavailable_unselectable_mask[0] === "") if (availabilityArr.unavailable_unselectable_mask[0] !== "") {
return; const unavailableArr: string[] = availabilityArr.unavailable_unselectable_mask[0].split(",");
seatmap.status(unavailableArr, "unavailable");
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[][] { function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inPricescaleArr: I.SeatmapPricescale[], inAvailabilityArr: I.JSCAvailability): string[][] {
const availableArr: string[] = inAvailabilityArr.available_selectable_mask[0].split(","); const availableArr: string[] = inAvailabilityArr.available_selectable_mask[0].split(",");
const unavailableArr: string[] = inAvailabilityArr.unavailable_unselectable_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[5]);
const X: number = parseInt(seatArr[2]) - 1; const X: number = parseInt(seatArr[2]) - 1;
const seatsKey = getSeatsKey(seatArr[0], inPricescaleArr); const seatsKey: string | undefined = getSeatsKey(seatArr[0], inPricescaleArr);
if (seatsKey) if (seatsKey)
inArrMatrix[Y][X] = generateSeatStr(seatsKey, seatArr); inArrMatrix[Y][X] = `${seatsKey}[${seatArr[0]}, ]`;
// save seatArr in state with seatID as key // save seatArr in state with seatID as key
config.state.layoutRows[seatArr[0]] = seatArr; 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 { export function getSeatsKey(inSeatID: string, inPricescaleArr: I.SeatmapPricescale[]): string | undefined {
for (let key in inPricescaleArr) { // for (let key in inPricescaleArr) {
if (inPricescaleArr[key].mask[0].includes(inSeatID)) // if (inPricescaleArr[key].mask[0].includes(inSeatID))
return String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase(); // return String.fromCharCode(97 + parseInt(key)).toLocaleUpperCase();
} // }
return undefined; return inPricescaleArr.map((arr, index) => {
} if (arr.mask[0].includes(inSeatID))
return String.fromCharCode(97 + index).toLocaleUpperCase();
export function generateSeatStr(seatLetter: string, seatArr: string[]): string { else
return `${seatLetter}[${seatArr[0]}, ]`; return undefined;
})[0];
} }
export function splitSeatStr(inSeatStr: string): string[] { export function splitSeatStr(inSeatStr: string): string[] {
const seatArr: string[] = inSeatStr.split(",").map(function (item) { return inSeatStr.split(",").map((item) => item.trim());
return item.trim();
});
return seatArr;
} }
export function createArrMatrix(inNumrows: number, inNumcols: number, inInitial: string) { export function createArrMatrix(inNumrows: number, inNumcols: number, inCharacter: string): string[][] {
var arr: string[][] = []; // let matrixArr: 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; // 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() { export function addTrims() {
client/src/modules/ui.ts
+5 -5
View File
@@ -91,9 +91,9 @@ export function convertLegendToDropdown(inID: string) {
}); });
} }
export function destroyCurrentSeatmap(inSelector: string, inPanzoom: PanzoomObject | undefined): void { export function destroyCurrentSeatmap(inSelector: string): void {
if (inPanzoom) if (config.state.panzoom)
unbindPanzoomEvents(inSelector, inPanzoom); unbindPanzoomEvents(inSelector);
jQuery("#containerSeatmapInner").remove(); jQuery("#containerSeatmapInner").remove();
jQuery("#htmlSeatmapInner .fl-html").removeAttr("style"); jQuery("#htmlSeatmapInner .fl-html").removeAttr("style");
@@ -109,10 +109,10 @@ export function controlLoftloader(inSwitch: string) {
jQuery("body").addClass("loaded loftloader-loaded"); jQuery("body").addClass("loaded loftloader-loaded");
} }
function unbindPanzoomEvents(inSelector: string, inPanzoom: PanzoomObject): void { function unbindPanzoomEvents(inSelector: string): void {
console.log("unbinding now"); console.log("unbinding now");
const container: HTMLElement = jQuery(inSelector).get(0); 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 { export function addPanzoom(inSelector: string, inBtnZoomIn: string | null = null, inBtnZoomOut: string | null = null, inBtnResetZoom: string | null = null): PanzoomObject | undefined {
client/src/seatmap.ts
+1 -1
View File
@@ -36,7 +36,7 @@ window.addEventListener('load', () => {
// Add event listeners // Add event listeners
Events.addCloseModal(); Events.addCloseModal();
Events.addModalCart(); Events.addModalCart();
Events.addDropdownSeatmap(config.state.panzoom); Events.addDropdownSeatmap();
}); });