diff --git a/client/src/modules/jsc.ts b/client/src/modules/jsc.ts index c9c46a7..9d980aa 100644 --- a/client/src/modules/jsc.ts +++ b/client/src/modules/jsc.ts @@ -176,7 +176,7 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP inRows.forEach(element => { const row: I.LayoutRow2 = element; - const Y: number = parseInt(row.y_cell_coord[0]); + const Y: number = parseInt(row.y_cell_coord[0]) - 1; const seatsArr: string[] = row.seats[0].split("|"); seatsArr.forEach(element => { @@ -198,7 +198,7 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP return; // const X: number = parseInt(seatArr[5]); - const X: number = parseInt(seatArr[2]); + const X: number = parseInt(seatArr[2]) - 1; const seatsKey = getSeatsKey(seatArr[0], inPricescaleArr); if (seatsKey) diff --git a/client/src/modules/ui.ts b/client/src/modules/ui.ts index 2d1b521..a27f670 100644 --- a/client/src/modules/ui.ts +++ b/client/src/modules/ui.ts @@ -18,9 +18,9 @@ export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string) { export function setEventInfo(inEventInfo: I.EventInfo, inInputswithValue: I.InputsWithValue): void { jQuery("#eventInfoDesc span.fl-heading-text")[0].childNodes[0].textContent = inEventInfo.desc[0]; - jQuery("#eventInfoDate p")[0].childNodes[0].textContent = inEventInfo.start[0]; - jQuery("#eventInfoCapacity p")[0].childNodes[0].textContent = inEventInfo.venue_config_capacity[0]; + jQuery("#eventInfoDate p")[0].childNodes[0].textContent = inEventInfo.start[0]; jQuery("#eventInfoLocation p")[0].childNodes[0].textContent = inInputswithValue.venueLocation; + jQuery("#eventInfoCapacity p")[0].childNodes[0].textContent = `Verfügbare Plätze: ${inEventInfo.seats_available} von ${inEventInfo.venue_config_capacity[0]}`; } export function createDialog(): void { diff --git a/client/src/modules/xmlhelper.ts b/client/src/modules/xmlhelper.ts index bbdb87d..4c9ecad 100644 --- a/client/src/modules/xmlhelper.ts +++ b/client/src/modules/xmlhelper.ts @@ -31,12 +31,15 @@ export function getSeatmapListing(inVenueXML: I.VenueXML): I.Seatmap[] { } export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo { + const sectionArr = inVenueXML.master_config[0].section_inventory[0].section; const eventObj: I.Event = inVenueXML.event[0]; const event = inVenueXML.event[0]; const venue_config = inVenueXML.venue_config[0]; const dateObj: Date = new Date(parseInt(event.year[0]), parseInt(event.month[0])-1, parseInt(event.hour[0]), parseInt(event.minute[0])); const start: string[] = [ dateObj.toLocaleString(["de-DE"], { weekday: "long", day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", timeZoneName: "short" }) ]; const weekday = [ Utils.getDayName(dateObj, "de-DE") ]; + const seats_available = sectionArr.map(item => parseInt(item.available[0])).reduce((prev, curr) => prev + curr); + const eventExtend: I.EventExtend = { venue_config_capacity: venue_config.capacity, @@ -48,6 +51,7 @@ export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo { venue_config_nav_image_width: venue_config.nav_image_width, start: start, weekday: weekday, + seats_available: seats_available, }; let eventInfo: I.EventInfo = { ...eventObj, ...eventExtend }; diff --git a/client/src/seatmap.ts b/client/src/seatmap.ts index 2d37231..a73d3e4 100644 --- a/client/src/seatmap.ts +++ b/client/src/seatmap.ts @@ -20,15 +20,8 @@ export let state: I.State = { cartChanged: false, selectedSeatsArr: [], selectedSeatsObj: {}, - layoutRows: {} -} - -function getTrimCoord(arr: I.Trim) { - let [xTrim, yTrim] = arr.coord[0].split(",").map(Number); - xTrim -= 20; - yTrim -= 21; - - return [xTrim, yTrim]; + layoutRows: {}, + isValidSeatSelection: false } function messagesHandler(inE: any) { @@ -79,7 +72,6 @@ function messagesHandler(inE: any) { seatmapXML = data.message.map_response; const map: string[] = JSC.generateMap(seatmapXML); const rowsNaming: string[] = JSC.getRowsNaming(seatmapXML); - // const columnNaming: string[] = JSC.getColumnNaming(seatmapXML); const seats: I.JSCSeats = JSC.getSeats(seatmapXML); const legend: I.JSCLegend = JSC.generateLegend(inVenueXML, seatmapXML, "#JSCLegendInner"); @@ -92,7 +84,7 @@ function messagesHandler(inE: any) { // jQuery("#containerSeatmapInner").append('
foobar
'); - processTrims(); + addTrims(); panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom"); UI.controlLoftloader("hide"); @@ -112,17 +104,19 @@ function messagesHandler(inE: any) { } case "parent_sendCheckoutResponse": { console.log(data.message); - const inIsValidSeatSelection: boolean = data.message.isValidSeatSelection; + state.isValidSeatSelection = data.message.isValidSeatSelection; - if (!inIsValidSeatSelection) + if (!state.isValidSeatSelection) { showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`); + showHideBtnCartLoading("hide"); + } else { removeCartItems(); generateCartItems(); const url = generateCheckoutUrl(); setCheckoutBtn(url); showModalCart(); - console.log(state); + showHideBtnCartLoading("hide"); } state.cartChanged = false; @@ -135,103 +129,39 @@ function messagesHandler(inE: any) { } } -function processTrims() { - // Create sum of the height of every .seatCharts-row to get total height of seatmap - const heightTotal = calcHeightTotal(); - - // Height of a single .seatCharts-row - const heightPerRow = heightTotal / jQuery(".seatCharts-row").length; - - // Maximum width of one seatCharts-row is the width we need - // Attention: Maximum width of #containerSeatmapInner is bigger than seatCharts-row, therefore use width of seatCharts-row - const totalWidth = jQuery(".seatCharts-row")[0].getBoundingClientRect().width; - const widthPerSeat = totalWidth / jQuery(".seatCharts-row")[0].childElementCount; - - // const containerSeatmapInnerRect: DOMRect = jQuery("#containerSeatmapInner")[0].getBoundingClientRect(); - // console.log(containerSeatmapInnerRect); - - // const viewWidthQuotient = 100 / containerSeatmapInnerRect.width; - - // Width: Calculate quotient to convert pixel (px) to viewwidth (vw) later - // 1px = (100vw / [document.documentElement.clientWidth] px) - // e.g. — If your viewport was 500px wide (equals by definition to 100vw) then - // 1px = (100vw / 500px) = 0.2vw - const viewWidthQuotient = 100 / totalWidth; - - // const widthQuotient = widthTotal/1580; - // const widthQuotient = containerSeatmapInnerRect.width / 1580; - - // Width: Quotient is later used to convert PVO trim x coord to absolute x-coord in browser - // Max-width of trim coord system is 1600 with offset of 20 - // 1600 - 20 = 1580 - const widthQuotient = totalWidth / 1580; - - // Height: Quotient is later used to convert PVO trim y coord to absolute y-coord in browser - // Max-height of trim coord system is 425 with offset of 21 - // 425 - 20 = 405 - const heightQuotient = heightTotal / 405; - - console.log(`heightTotal: ${heightTotal} heightPerRow: ${heightPerRow} heightQuotient: ${heightQuotient} totalWidth: ${totalWidth} widthPerSeat: ${widthPerSeat} widthQuotient: ${widthQuotient}`); - +function addTrims() { const trimArr: I.Trim[] = seatmapXML.seatmap[0].trims[0].trim; - trimArr.forEach(arr => { - const text: string = getTrimText(arr); - const [xTrim, yTrim] = getTrimCoord(arr); - const [leftVw, topPx] = calcTrimPos(xTrim, yTrim, heightPerRow, widthQuotient, heightQuotient, viewWidthQuotient, widthPerSeat); + trimArr.forEach(arr => { + const [xTrim, yTrim] = arr.coord[0].split(",").map(Number); + const textArr: string[] = arr.text[0].split(";").filter(Boolean); + const x = xTrim / 20; + const y = Math.round(yTrim / 21.25); - console.log(`${text} -> x: ${xTrim} y: ${yTrim} -> x: ${leftVw} y: ${topPx}px`); + console.log(`xTrim: ${xTrim} yTrim: ${yTrim} -> x: ${x} y: ${y}`); - createTrim(leftVw, topPx, text); + decodeAddTrims(textArr, x, y); }); } -function calcHeightTotal(): number { - let heightTotal = 0; - jQuery(".seatCharts-row").each(function () { - const domRect: DOMRect = this.getBoundingClientRect(); - console.log(domRect); - heightTotal += domRect.height; - }); +function decodeAddTrims(textArr: string[], x: number, y: number) { + let i = 0; - return heightTotal; -} - -function createTrim(inLeft: number, inTop: number, inText: string) { - jQuery("#containerSeatmapInner").append(` -
- ${inText} -
`); -} - -function calcTrimPos(xTrim: number, yTrim: number, heightPerRow: number, widthQuotient: number, heightQuotient: number, viewWidthQuotient: number, widthPerSeat: number) { - let leftPx = Math.round(xTrim * widthQuotient); - // const leftVw = parseInt((leftPx * viewWidthQuotient).toFixed(3)); - console.log(viewWidthQuotient); - - let topPx = Math.round(yTrim * heightQuotient); - - // if (topPx > heightPerRow) - // topPx -= heightPerRow; - console.log(heightPerRow); - - // if (leftPx > widthPerSeat) - // leftPx -= widthPerSeat; - console.log(widthPerSeat); - - - // return [leftVw, topPx]; - return [leftPx, topPx]; -} - -function getTrimText(arr: I.Trim): string { - const textArr: string[] = arr.text[0].split(";").filter(Boolean); - - return textArr.map(element => { + textArr.forEach(element => { const charCode = element.replace(/^\&\#/, "0"); - return String.fromCharCode(parseInt(charCode, 16)); - }).join(""); + const character = String.fromCharCode(parseInt(charCode, 16)); + + if(!/[^a-zA-Z0-9äöüÄÖÜß$]/.test(character)) { + const _x = (x - 1) + i; + const _y = y - 1; + console.log(`${character} -> ${_x} ${_y}`); + jQuery(".seatCharts-row")[_y].children[_x].innerHTML = `${character}` + } + + i++; + }); } + function showSeatTooltip(jBox: any): void { const seatID: string = jBox.source[0].id; const seat = state.layoutRows[seatID][5]; @@ -301,17 +231,6 @@ function addCartItem(inSeatObj: I.JSCSelectedSeat) { const cartId = `cartItem-${inSeatObj.id}`; const dropdownBuyerTypesSelector = `#${cartId} .dropdownBuyerTypes`; - // const dropdownCrossSelector = `#${cartId} .cartItemCross`; - - // jQuery("#cartItemHTML .fl-html").append(` - //
- //
X
- //
- //
${category}
- //
${seat}
- // - //
`); - jQuery("#cartItemHTML .fl-html").append(`
@@ -326,13 +245,6 @@ function addCartItem(inSeatObj: I.JSCSelectedSeat) { jQuery(dropdownBuyerTypesSelector).on('change', function (this: HTMLSelectElement) { changedDropdownBuyerType(this, inSeatObj); }); - - // jQuery(dropdownCrossSelector).on("click", function () { - // console.log("cross clicked"); - // removeSeatFromState(inSeatObj); - // calcOverallPrice(inVenueXML); - // setBtnCartText(); - // }); } function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat) { @@ -506,13 +418,14 @@ window.addEventListener('load', function () { const btnCart = jQuery("#modalCart .uabb-button").get(0); if (btnCart) { btnCart.addEventListener("click", function () { - console.log(state.selectedSeatsArr.length); - - if (!state.selectedSeatsArr.length) { + if (!state.selectedSeatsArr.length) showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`); - return; - } - state.cartChanged ? isValidSeatSelection() : showModalCart(); + else if (state.cartChanged) + isValidSeatSelection(); + else if (!state.cartChanged && state.isValidSeatSelection) + showModalCart(); + else if (!state.cartChanged && !state.isValidSeatSelection) + showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`); }); } @@ -597,12 +510,31 @@ function getBuyerTypeCodeByBuyerTypeID(inVenueXML: I.VenueXML, inBuyerTypeID: st })?.code[0]; } +function showHideBtnCartLoading(inSwitch: string) { + if (inSwitch === "show") { + jQuery("#modalCart .uabb-button").css("pointer-events", "none"); + jQuery("#modalCart i").hide(); + jQuery("#modalCart .uabb-button-text").addClass("dot-pulse"); + } + else if (inSwitch === "hide") { + jQuery("#modalCart i").show(); + jQuery("#modalCart .uabb-button-text").removeClass("dot-pulse"); + jQuery("#modalCart .uabb-button").css("pointer-events", "all"); + } + +} + function isValidSeatSelection() { jQuery("#modalCart-overlay").hide(); if (!state.selectedSeatsArr.length) return; + showHideBtnCartLoading("show"); + + jQuery("#modalCart i").hide(); + jQuery("#modalCart .uabb-button-text").addClass("dot-pulse"); + const url = generateCheckoutUrl(); // const selectedSeatIndexes: string = generateSelectedSeatIndexes(); diff --git a/client/src/types/types.d.ts b/client/src/types/types.d.ts index eedbc36..d9e7bdc 100644 --- a/client/src/types/types.d.ts +++ b/client/src/types/types.d.ts @@ -15,6 +15,7 @@ export interface State { selectedSeatsArr: string[][]; selectedSeatsObj: StateJSCSelectedSeats; layoutRows: layoutRows; + isValidSeatSelection: boolean; } interface layoutRows { @@ -111,6 +112,7 @@ export interface EventExtend { venue_config_nav_image_width: string[]; start: string[]; weekday: string[]; + seats_available: number; } // venueXML