|
|
|
|
@@ -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('<div id="foobarDiv" style="position: absolute; top: 8vw;">foobar</div>');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
console.log(`${text} -> x: ${xTrim} y: ${yTrim} -> x: ${leftVw} y: ${topPx}px`);
|
|
|
|
|
|
|
|
|
|
createTrim(leftVw, topPx, text);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function calcHeightTotal(): number {
|
|
|
|
|
let heightTotal = 0;
|
|
|
|
|
jQuery(".seatCharts-row").each(function () {
|
|
|
|
|
const domRect: DOMRect = this.getBoundingClientRect();
|
|
|
|
|
console.log(domRect);
|
|
|
|
|
heightTotal += domRect.height;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return heightTotal;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function createTrim(inLeft: number, inTop: number, inText: string) {
|
|
|
|
|
jQuery("#containerSeatmapInner").append(`
|
|
|
|
|
<div class="trimText" style="position: absolute; left: ${inLeft}px; top: ${inTop}px;">
|
|
|
|
|
${inText}
|
|
|
|
|
</div>`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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 [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);
|
|
|
|
|
|
|
|
|
|
return textArr.map(element => {
|
|
|
|
|
const charCode = element.replace(/^\&\#/, "0");
|
|
|
|
|
return String.fromCharCode(parseInt(charCode, 16));
|
|
|
|
|
}).join("");
|
|
|
|
|
console.log(`xTrim: ${xTrim} yTrim: ${yTrim} -> x: ${x} y: ${y}`);
|
|
|
|
|
|
|
|
|
|
decodeAddTrims(textArr, x, y);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function decodeAddTrims(textArr: string[], x: number, y: number) {
|
|
|
|
|
let i = 0;
|
|
|
|
|
|
|
|
|
|
textArr.forEach(element => {
|
|
|
|
|
const charCode = element.replace(/^\&\#/, "0");
|
|
|
|
|
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 = `<span class="trimChar">${character}</span>`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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(`
|
|
|
|
|
// <div class="cartItem" id="${cartId}">
|
|
|
|
|
// <div class="cartItemCross">X</div>
|
|
|
|
|
// <div class="cartItemColoredSquare" style="background: ${color};"></div>
|
|
|
|
|
// <div class="cartItemCategory">${category}</div>
|
|
|
|
|
// <h5 class="cartItemSeat">${seat}</h5>
|
|
|
|
|
// <select name="dropdownBuyerTypes" class="dropdownBuyerTypes"></select>
|
|
|
|
|
// </div>`);
|
|
|
|
|
|
|
|
|
|
jQuery("#cartItemHTML .fl-html").append(`
|
|
|
|
|
<div class="cartItem" id="${cartId}">
|
|
|
|
|
<div class="cartItemColoredSquare" style="background: ${color};"></div>
|
|
|
|
|
@@ -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();
|
|
|
|
|
|
zino