From d08ca9f1e4d6c917cd9532c6178541efe2b53be7 Mon Sep 17 00:00:00 2001 From: zino Date: Mon, 17 May 2021 01:34:18 +0200 Subject: [PATCH] reworking jsc still in progress --- client/src/modules/events.ts | 4 +- client/src/modules/jsc.ts | 169 +++++++++++++++++------------------ client/src/modules/ui.ts | 10 +-- client/src/seatmap.ts | 2 +- 4 files changed, 88 insertions(+), 97 deletions(-) diff --git a/client/src/modules/events.ts b/client/src/modules/events.ts index 73022e0..f2ec458 100644 --- a/client/src/modules/events.ts +++ b/client/src/modules/events.ts @@ -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); }); } diff --git a/client/src/modules/jsc.ts b/client/src/modules/jsc.ts index 57a4f35..44cc957 100644 --- a/client/src/modules/jsc.ts +++ b/client/src/modules/jsc.ts @@ -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 { 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() { diff --git a/client/src/modules/ui.ts b/client/src/modules/ui.ts index 17582d5..9a6ebd9 100644 --- a/client/src/modules/ui.ts +++ b/client/src/modules/ui.ts @@ -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 { diff --git a/client/src/seatmap.ts b/client/src/seatmap.ts index 137399d..9f8551a 100644 --- a/client/src/seatmap.ts +++ b/client/src/seatmap.ts @@ -36,7 +36,7 @@ window.addEventListener('load', () => { // Add event listeners Events.addCloseModal(); Events.addModalCart(); - Events.addDropdownSeatmap(config.state.panzoom); + Events.addDropdownSeatmap(); });