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

before state inputswithvalue

Browse Source
This commit is contained in:
zino
2021-05-14 20:16:39 +02:00
parent e7242594b4
commit 51e78042b5
9 changed files with 700 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

784
client/src/seatmap.ts
View File

@@ -7,26 +7,19 @@ import * as JSC from "./modules/jsc";
import { config } from "./modules/config";
import Utils from "./modules/utils";
import { PanzoomObject } from "@panzoom/panzoom";
import jBox from "jbox";
import * as Events from "./modules/events";
require("jbox/dist/jBox.all.css");
import * as Cart from "./modules/cart";
let inputsWithValue: I.InputsWithValue;
let seatmap: any;
let panzoom: PanzoomObject | undefined;
let inVenueXML: I.VenueXML;
let seatmapXML: any;
export let state: I.State = {
priceOverall: "",
cartChanged: false,
selectedSeatsArr: [],
selectedSeatsObj: {},
layoutRows: {},
isValidSeatSelection: false
}
window.addEventListener('load', () => {
// Inject JSC (jQuery Seat Charts) and inject CSS for JSC, child and jQuery dialog
// Inject JSC (jQuery Seat Charts)
// Inject CSS for JSC, child and jQuery dialog
Utils.inject(config.urlJSCStaging, "js", "head");
Utils.inject(config.urlCSSJSCStaging, "css", "body");
Utils.inject(config.urlCSSChildStaging, "css", "body");
@@ -36,484 +29,20 @@ window.addEventListener('load', () => {
Communication.listenToMessages(messageHandler);
// Div with ID "containerSeatmap" is not yet ready, wait for it, then display seatmap button on trxstate 20
Utils.waitForSeatmap(showSeatmapBtnParent);
Utils.waitForSeatmap(UI.showSeatmapBtnParent);
// Modal overlay for cart is not yet ready, wait for it, then initialize
Utils.waitForElement("#modalCart-overlay", initModalCart);
Utils.waitForElement("#modalCart-overlay", Cart.initModalCart);
// Add event listeners
Events.addCloseModal();
//Events.addCart(inputsWithValue);
Events.addDropdownSeatmap(panzoom);
const btnCart: HTMLElement | undefined = jQuery("#modalCart .uabb-button").get(0);
if (btnCart) {
btnCart.addEventListener("click", () => {
if (!state.selectedSeatsArr.length)
showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`);
else if (state.cartChanged)
isValidSeatSelection(inputsWithValue);
else if (!state.cartChanged && state.isValidSeatSelection)
UI.showModalCart();
else if (!state.cartChanged && !state.isValidSeatSelection)
showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
});
}
Events.addModalCart(inputsWithValue);
Events.addDropdownSeatmap(panzoom);
});
function showJBoxNotice(inContent: string, inAutoClose: number | boolean | undefined = 5000) {
new jBox('Notice', {
position: { x: 'center', y: 'top' },
offset: { x: 0, y: 320 },
content: inContent,
autoClose: inAutoClose,
animation: { open: "zoomIn", close: "zoomOut" },
closeOnEsc: false,
closeButton: true,
closeOnMouseleave: false,
closeOnClick: false,
draggable: false,
color: "red",
stack: true,
showCountdown: true,
reposition: true,
responsiveWidth: true,
responsiveHeight: true,
});
}
function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) {
jQuery("#modalCart-overlay").hide();
if (!state.selectedSeatsArr.length)
return;
UI.showHideBtnCartLoading("show");
jQuery("#modalCart i").hide();
jQuery("#modalCart .uabb-button-text").addClass("dot-pulse");
const url = generateCheckoutUrl(inInputsWithValue);
// const selectedSeatIndexes: string = generateSelectedSeatIndexes();
// const url: string = `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue.user_context}&pid=${inputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`;
const message: I.Message = {
message: {
url: url,
},
from: "child",
event: "child_needCheckoutResponse",
date: Date.now()
};
Communication.sendMessage(message, "parent");
}
function generateCheckoutUrl(inInputsWithValue: I.InputsWithValue): string | undefined {
if (!state.selectedSeatsArr.length)
return;
else {
const selectedSeatIndexes: string = generateSelectedSeatIndexes();
return `${inInputsWithValue["ticketPurchaseUrl"]}?user_context=${inInputsWithValue.user_context}&pid=${inInputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`;
}
}
function generateSelectedSeatIndexes(): string {
return (state.selectedSeatsArr.map(function (arr) {
return arr.join(",");
})).join("|");
}
function showSeatmapBtnParent(): void {
console.log("child completely ready");
Communication.sendEventToParent("child_seatmap_ready");
}
function messageHandler(inE: any) {
if (typeof (inE.data) !== 'string')
return;
const data: I.Message = JSON.parse(inE.data);
console.log(`child: received from ${data.from}`);
console.log(data);
switch (data.event) {
case "parent_init_venue": {
UI.controlLoftloader("show");
Communication.sendEventToParent("child_init_needInputsWithValue");
break;
}
case "parent_init_sendVenueXML": {
inVenueXML = data.message.map_response;
// generate pricescale css classes
const css = generatePricescaleCSS(inVenueXML);
Utils.inject(css, "cssCustom", "body");
console.log(css);
// fill event info
const eventInfo = XMLHelper.getEventInfo(inVenueXML);
UI.setEventInfo(eventInfo, inputsWithValue);
// fill select dropdown
const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(inVenueXML);
console.log(seatmapListing);
UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
// display first seatmapXML
const id: string = seatmapListing[0].id[0];
jQuery("#dropdownSeatmap").val(id);
Communication.needSeatmapXML(id);
break;
}
case "parent_init_sendInputsWithValue": {
inputsWithValue = data.message;
UI.changeVenueImage(inputsWithValue);
Communication.sendEventToParent("child_init_needVenueXML");
break;
}
case "parent_sendSeatmapXML": {
seatmapXML = data.message.map_response;
const map: string[] = JSC.generateMap(seatmapXML);
const rowsNaming: string[] = JSC.getRowsNaming(seatmapXML);
const seats: I.JSCSeats = JSC.getSeats(seatmapXML);
const legend: I.JSCLegend = JSC.generateLegend(inVenueXML, seatmapXML, "#JSCLegendInner");
addSeatmap("#containerSeatmapInner", map, rowsNaming, seats, legend);
JSC.setUnavailableSeats(seatmapXML, seatmap);
selectSeatsInCart();
UI.convertLegendToDropdown("dropdownLegend");
dropdownLegendOnChange("#dropdownLegend");
// jQuery("#containerSeatmapInner").append('<div id="foobarDiv" style="position: absolute; top: 8vw;">foobar</div>');
addTrims();
processSMAP();
panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
UI.controlLoftloader("hide");
new jBox("Tooltip", {
attach: jQuery(".seatCharts-seat"),
onOpen: function (this: any) {
showSeatTooltip(this);
},
});
break;
}
case "parent_sendCheckoutResponse": {
console.log(data.message);
state.isValidSeatSelection = data.message.isValidSeatSelection;
if (!state.isValidSeatSelection) {
showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
UI.showHideBtnCartLoading("hide");
}
else {
removeCartItems();
generateCartItems();
const url = generateCheckoutUrl(inputsWithValue);
setCheckoutBtn(url);
UI.showModalCart();
UI.showHideBtnCartLoading("hide");
}
state.cartChanged = false;
break;
}
default:
break;
}
}
function processSMAP() {
if (!inputsWithValue.smap)
return;
const smapArr = inputsWithValue.smap.split("").map(Number);
if (!smapArr[0])
jQuery("#eventInfoCapacity").hide();
}
function addTrims() {
const trimArr: I.Trim[] = seatmapXML.seatmap[0].trims[0].trim;
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(`xTrim: ${xTrim} yTrim: ${yTrim} -> x: ${x} y: ${y}`);
decodeAddTrims(textArr, x, y);
});
}
function decodeAddTrims(textArr: string[], x: number, y: number) {
let i = 0;
const specialChar = new Map([
["&#x8e", "Ä"],
["&#x99", "Ö"],
["&#x9a", "Ü"],
["&#x84", "ä"],
["&#x94", "ö"],
["&#x81", "ü"],
["&#xe1", "ß"]
]);
textArr.forEach(element => {
let character;
if (specialChar.has(element))
character = specialChar.get(element);
else {
const charCode = element.replace(/^\&\#/, "0");
character = String.fromCharCode(parseInt(charCode, 16));
}
if (character)
applyTrim(x, y, i, character);
i++;
});
}
function applyTrim(x: number, y: number, i: number, character: string) {
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>`
}
}
function showSeatTooltip(jBox: any): void {
const seatID: string = jBox.source[0].id;
const seat = state.layoutRows[seatID][5];
const row = state.layoutRows[seatID][4];
const sectionID = state.layoutRows[seatID][3];
const sectionDesc = getSectionDescBySectionID(inVenueXML, sectionID);
const tooltipContent = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
jBox.setContent(tooltipContent);
}
function getSectionDescBySectionID(inVenueXML: I.VenueXML, sectionID: string): string | undefined {
const sectionArr = inVenueXML.master_config[0].section_config[0].section;
const sectionDesc = sectionArr.find(arr => {
return sectionID === arr.id[0];
})?.desc[0];
return sectionDesc;
}
function setCheckoutBtn(inUrl: string | undefined) {
if (!inUrl)
return;
const btnCheckout = jQuery("#modalCart-overlay #checkout .fl-button").get(0);
if (btnCheckout) {
btnCheckout.addEventListener("click", function () {
const message: I.Message = {
message: {
url: inUrl,
},
from: "child",
event: "child_click_checkout",
date: Date.now()
};
Communication.sendMessage(message, "parent");
});
}
}
function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2Properties, pricescaleID: string, inVenueXML: I.VenueXML) {
const venuePricescaleArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale;
return venuePricescaleArr.find(obj => {
if (obj.id[0] === pricescaleID)
return obj;
return undefined;
})?.[property][0];
}
function addCartItem(inSeatObj: I.JSCSelectedSeat) {
const color = `#${getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0], inVenueXML)}`;
const category = getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0], inVenueXML);
const seat = state.layoutRows[inSeatObj.id][5];
const row = state.layoutRows[inSeatObj.id][4];
const sectionID = state.layoutRows[inSeatObj.id][3];
const sectionDesc = getSectionDescBySectionID(inVenueXML, sectionID);
const seatStr = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
const buyerTypes: (string | undefined)[][] | undefined = getBuyerTypesByPricescaleID(inSeatObj.data.seatsObj.id[0]);
const cartId = `cartItem-${inSeatObj.id}`;
const dropdownBuyerTypesSelector = `#${cartId} .dropdownBuyerTypes`;
jQuery("#cartItemHTML .fl-html").append(`
<div class="cartItem" id="${cartId}">
<div class="cartItemColoredSquare" style="background: ${color};"></div>
<div class="cartItemCategory">${category}</div>
<h5 class="cartItemSeat">${seatStr}</h5>
<select name="dropdownBuyerTypes" class="dropdownBuyerTypes"></select>
</div>`);
fillDropdownBuyerTypes(buyerTypes, dropdownBuyerTypesSelector);
// todo: shorter version?
jQuery(dropdownBuyerTypesSelector).on('change', function (this: HTMLSelectElement) {
changedDropdownBuyerType(this, inSeatObj);
});
}
function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat) {
const index = state.selectedSeatsArr.findIndex(arr => {
return arr[0] === inSeatObj.id;
});
state.selectedSeatsArr[index][1] = inSelect.value;
const buyerTypeCode = getBuyerTypeCodeByBuyerTypeID(inVenueXML, inSelect.value);
if (buyerTypeCode)
state.selectedSeatsArr[index][2] = buyerTypeCode;
calcOverallPrice(inVenueXML);
setBtnCartText();
const url = generateCheckoutUrl(inputsWithValue);
console.log(url);
setCheckoutBtn(url);
console.log(state);
}
// todo: generalize dropdown fill options
function fillDropdownBuyerTypes(inBuyerTypes: (string | undefined)[][] | undefined, inSelector: string) {
if (!inBuyerTypes)
return;
const dropdownBuyerTypes = jQuery(inSelector).get(0);
console.log(dropdownBuyerTypes);
console.log(inBuyerTypes);
inBuyerTypes.forEach(arr => {
if (!arr[0])
return;
let opt = document.createElement('option');
opt.value = arr[0];
opt.innerHTML = `${arr[2]} €${arr[1]}`;
dropdownBuyerTypes.appendChild(opt);
});
}
function getBuyerTypesByPricescaleID(inPricescaleID: string) {
const venuePricescaleArr = inVenueXML.price_structure[0].pricescale;
const buyerTypesArr = venuePricescaleArr.find(obj => {
return obj.id[0] === inPricescaleID;
})?.buyer_type;
if (!buyerTypesArr)
return;
const buyerTypes: (string | undefined)[][] = buyerTypesArr.map(arr => {
const buyerTypeDesc = inVenueXML.venue[0].buyer_types[0].buyer_type.find(obj => {
return obj.id[0] === arr.id[0] ? obj.desc[0] : undefined;
})?.desc[0];
return [arr.id[0], arr.price[0], buyerTypeDesc];
});
return buyerTypes;
}
function removeCartItems() {
jQuery("#cartItemHTML .cartItem").each(function () {
this.remove();
});
}
function generateCartItems() {
if (!state.selectedSeatsArr.length)
return;
for (const key in state.selectedSeatsObj) {
if (Object.prototype.hasOwnProperty.call(state.selectedSeatsObj, key)) {
const element = state.selectedSeatsObj[key];
addCartItem(element);
console.log(element);
}
}
}
function selectSeatsInCart() {
state.selectedSeatsArr.forEach(arr => {
const seatID: string = arr[0];
if (seatmap.get(seatID))
seatmap.status(seatID, "selected");
});
}
function generatePricescaleCSS(inVenueXML: I.VenueXML): string {
const venuePricescalesArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale;
let cssArr: string[] = [];
venuePricescalesArr.forEach(element => {
const ID: string = element.id[0];
// update: color always defined: fallback colors exist in system
let color: string = `#${element.color[0]} !important`;
// if (color === "") {
// console.log("no default color");
// color = Utils.generateRandomColor();
// }
cssArr.push(`._${ID} { background-color: ${color}; }`);
});
return (cssArr.join("\r\n"));
}
function initModalCart() {
jQuery("#modalCart-overlay").hide();
const btnClose = jQuery("#modalCart-overlay .uabb-close-icon").get(0);
const btnBack = jQuery("#modalCart-overlay #goBack .fl-button").get(0);
// const btnClose = jQuery("#modalCart-overlay .uabb-close-icon").get(0);
if (btnClose) {
btnClose.addEventListener("click", function () {
Communication.sendEventToParent("child_show_dialog_titlebar");
});
}
if (btnBack) {
btnBack.addEventListener("click", function () {
jQuery("#modalCart-overlay .uabb-close-icon").trigger("click");
});
}
}
// Hide header when height of window is smaller than ...
// Note: Cannot determine width of inner iframe, therefore need to use window.innerHeight
window.onresize = function () {
const innerHeight = window.innerHeight;
if (innerHeight < 576) {
@@ -527,242 +56,103 @@ window.onresize = function () {
}
}
function dropdownLegendOnChange(inSelector: string) {
const dropdownLegend = jQuery(inSelector).get(0);
dropdownLegend.addEventListener("change", function (this: HTMLSelectElement) {
const value: string = this.value;
const className: string = `._${value}`;
changeDropdownLegendBGColor(inSelector, value, className);
if (value === "all") {
seatmap.find('unavailable').status('available');
JSC.setUnavailableSeats(seatmapXML, seatmap);
}
else {
seatmap.find('available').status('unavailable');
JSC.activateSeatsBySectionID(seatmapXML, seatmap, value);
JSC.setUnavailableSeats(seatmapXML, seatmap);
}
});
}
function changeDropdownLegendBGColor(inSelector: string, inValue: string, inClassName: string) {
let bgColor: string = "#fafafa";
let color: string = "#5c5c5c";
if (inValue !== "all") {
color = "white";
bgColor = jQuery(inClassName).css("background-color");
}
jQuery(inSelector).css("color", color);
jQuery(inSelector).css("background-color", bgColor);
jQuery(`${inSelector} option[value="all"]`).css("color", color);
}
function addSeatToState(inVenueXML: I.VenueXML, inSelectedSeat: I.JSCSelectedSeat) {
const seatID: string = inSelectedSeat.id;
const seatObj: I.StateJSCSelectedSeats = {
[seatID]: inSelectedSeat
}
state.selectedSeatsObj = { ...state.selectedSeatsObj, ...seatObj };
const pricescaleID: string = state.selectedSeatsObj[seatID].data.seatsObj.id[0];
const pricescaleObj: I.Pricescale5 | undefined = getVenuePriceStructurePropertyByPricescaleID(inVenueXML, pricescaleID);
console.log(pricescaleObj);
if (!pricescaleObj) {
console.warn(`Cannot find corresponding venueXML pricescaleObj for pricescale with ID ${pricescaleID}`);
function messageHandler(inE: any) {
if (typeof (inE.data) !== 'string')
return;
}
// get id and code of first buyer type
const firstBuyerTypeID: string = pricescaleObj.buyer_type[0].id[0];
// const firstPriceStructureCode: string = inVenueXML.price_structure[0].code[0]; // todo: code of first price_structure always correct? what about multiple schablonen?
const buyerTypeCode: string | undefined = getBuyerTypeCodeByBuyerTypeID(inVenueXML, firstBuyerTypeID);
const data: I.Message = JSON.parse(inE.data);
if (buyerTypeCode) {
state.selectedSeatsArr.push([seatID, firstBuyerTypeID, buyerTypeCode]);
state.cartChanged = true;
}
}
console.log(`child: received from ${data.from}`);
console.log(data);
function getBuyerTypeCodeByBuyerTypeID(inVenueXML: I.VenueXML, inBuyerTypeID: string): string | undefined {
const venueBuyerTypeArr = inVenueXML.venue[0].buyer_types[0].buyer_type;
return venueBuyerTypeArr.find(arr => {
return inBuyerTypeID === arr.id[0];
})?.code[0];
}
switch (data.event) {
function getVenuePriceStructurePropertyByPricescaleID(inVenueXML: I.VenueXML, inID: string): I.Pricescale5 | undefined {
const venuePricescaleArr: I.Pricescale5[] = inVenueXML.price_structure[0].pricescale;
return venuePricescaleArr.find(obj => {
return obj.id[0] === inID;
});
}
case "parent_init_venue": {
UI.controlLoftloader("show");
Communication.sendEventToParent("child_init_needInputsWithValue");
break;
}
function removeSeatFromState(inSelectedSeat: I.JSCSelectedSeat) {
const seatID: string = inSelectedSeat.id;
delete state.selectedSeatsObj[seatID];
const index = state.selectedSeatsArr.findIndex(arr => {
return arr[0] === inSelectedSeat.id;
});
state.selectedSeatsArr.splice(index, 1);
state.cartChanged = true;
case "parent_init_sendVenueXML": {
inVenueXML = data.message.map_response;
if (!state.selectedSeatsArr.length)
jQuery("#modalCart-overlay").hide();
}
// Generate pricescale css classes
const css = XMLHelper.generatePricescaleCSS(inVenueXML);
Utils.inject(css, "cssCustom", "body");
function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined {
if (!state.selectedSeatsArr.length) {
state.priceOverall = "0";
return "0";
}
// Fill event info
const eventInfo = XMLHelper.getEventInfo(inVenueXML);
UI.setEventInfo(eventInfo, inputsWithValue);
let overallPrice: number = 0;
// Fill select dropdown
const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(inVenueXML);
UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
state.selectedSeatsArr.forEach(arr => {
const seatID: string = arr[0];
const buyertypeID: string = arr[1];
const selectedSeat: I.JSCSelectedSeat = state.selectedSeatsObj[seatID];
const pricescaleID: string = selectedSeat.data.seatsObj.id[0];
const pricescaleObj: I.Pricescale5 | undefined = getVenuePriceStructurePropertyByPricescaleID(inVenueXML, pricescaleID);
// Display first seatmapXML
const id: string = seatmapListing[0].id[0];
jQuery("#dropdownSeatmap").val(id);
Communication.needSeatmapXML(id);
if (!pricescaleObj)
return;
console.log(css);
console.log(seatmapListing);
const seatPrice: number | undefined = getPriceByBuyertypeID(buyertypeID, pricescaleObj);
break;
}
if (!seatPrice)
return;
case "parent_init_sendInputsWithValue": {
inputsWithValue = data.message;
UI.changeVenueImage(inputsWithValue);
Communication.sendEventToParent("child_init_needVenueXML");
break;
}
overallPrice += seatPrice;
});
case "parent_sendSeatmapXML": {
seatmapXML = data.message.map_response;
const map: string[] = JSC.generateMap(seatmapXML);
const rowsNaming: string[] = JSC.getRowsNaming(seatmapXML);
const seats: I.JSCSeats = JSC.getSeats(seatmapXML);
const legend: I.JSCLegend = JSC.generateLegend(inVenueXML, seatmapXML, "#JSCLegendInner");
state.priceOverall = overallPrice.toFixed(2);
JSC.addSeatmap("#containerSeatmapInner", map, rowsNaming, seats, legend, seatmap, inVenueXML);
JSC.setUnavailableSeats(seatmapXML, seatmap);
JSC.selectSeatsInCart(seatmap);
UI.convertLegendToDropdown("dropdownLegend");
Events.dropdownLegendOnChange("#dropdownLegend", seatmap, seatmapXML);
JSC.addTrims(seatmapXML);
XMLHelper.processSMAP(inputsWithValue);
panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
UI.controlLoftloader("hide");
UI.createSeatTooltips(inVenueXML);
return state.priceOverall;
}
break;
}
function getPriceByBuyertypeID(inBuyertypeID: string, inPricescaleObj: I.Pricescale5) {
const price = inPricescaleObj?.buyer_type.find(arr => {
return arr.id[0] === inBuyertypeID;
})?.price[0];
case "parent_sendCheckoutResponse": {
config.state.isValidSeatSelection = data.message.isValidSeatSelection;
if (price)
return parseFloat(price);
console.log(data.message);
return undefined;
}
function setBtnCartText() {
const numTickets = state.selectedSeatsArr.length;
let text: string = "";
let textModal: string = "";
console.log(numTickets);
if (state.priceOverall !== "") {
numTickets === 1 ? text = `${numTickets} Ticket für €${state.priceOverall}` : text = `${numTickets} Tickets für €${state.priceOverall}`;
textModal = `Summe (${numTickets} Plätze) €${state.priceOverall}`;
}
else {
text = "0 Tickets für €0.00";
textModal = `Summe (0 Plätze) €0,00`;
}
jQuery("#modalCart .uabb-button-text")[0].innerText = text;
jQuery("#modalCartSum .uabb-heading-text")[0].textContent = textModal;
}
function maximumSelectedSeatsReached(inSeatObj: I.JSCSelectedSeat): boolean {
if (state.selectedSeatsArr.length >= config.maxSelectedSeats) {
showJBoxNotice(`Sie können maximal ${config.maxSelectedSeats} Plätze auswählen.`);
seatmap.status(inSeatObj.id, "available");
return true;
}
return false;
}
function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: string[], inSeats: I.JSCSeats, inLegend: I.JSCLegend): void {
// console.log(inSeatmapInitMap);
// console.log(inSeats);
// console.log(inLegend);
const containerSeatmap: any = (<any>window).jQuery(inSelector);
seatmap = containerSeatmap.seatCharts({
naming: {
top: false,
left: false,
rows: inRowsNaming,
},
map: inMap,
// map: [
// 'aaaaaa__DDDDD',
// 'aaaaaa__aaaaa',
// 'aaaaaa__aaaaa',
// 'bbbbbb__bbbbb',
// 'bbbbbb__bbbbb',
// 'bbbbbb__bbbbb',
// 'ccccccccccccc'
// ],
seats: inSeats,
// seats: {
// A: {
// price: 99.99,
// classes: 'front-seat' //your custom CSS class
// }
// },
legend: inLegend,
click: function () {
if (this.status() == 'available') {
const selectedSeat: I.JSCSelectedSeat = this.settings;
console.log("seat selected");
console.log(selectedSeat);
if (maximumSelectedSeatsReached(selectedSeat))
return "available";
addSeatToState(inVenueXML, selectedSeat);
calcOverallPrice(inVenueXML);
setBtnCartText();
console.log(state.selectedSeatsArr);
return "selected";
}
else if (this.status() === "selected") {
const selectedSeat: I.JSCSelectedSeat = this.settings;
console.log("seat unselected");
removeSeatFromState(selectedSeat);
calcOverallPrice(inVenueXML);
setBtnCartText();
console.log(state.selectedSeatsArr);
return "available";
}
else if (this.status() == 'unavailable') {
console.log("unavailable");
return "unavailable";
if (!config.state.isValidSeatSelection) {
UI.showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
UI.showHideBtnCartLoading("hide");
}
else {
return this.style();
}
}
});
Cart.removeCartItems();
Cart.generateCartItems(inVenueXML, inputsWithValue);
console.log(seatmap);
console.log(inputsWithValue);
const url = XMLHelper.generateCheckoutUrl(inputsWithValue);
Events.addRedirectCheckout(url);
UI.showModalCart();
UI.showHideBtnCartLoading("hide");
}
config.state.cartChanged = false;
break;
}
default:
break;
}
}