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

1
client/src/inject.ts
View File

@@ -56,7 +56,6 @@ function messageHandler(e: any) {
if (typeof (e.data) !== 'string')
return;
// Decode JSON postMessage data
const data: I.Message = JSON.parse(e.data);
console.log(`parent: received from ${data.from}`);

154
client/src/modules/cart.ts Normal file
View File

@@ -0,0 +1,154 @@
import * as XMLHelper from "./xmlhelper";
import { config } from "./config";
import * as I from "../types/types";
import * as UI from "./ui";
import * as Events from "./events";
export function addItem(inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
const color = `#${XMLHelper.getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0], inVenueXML)}`;
const category = XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0], inVenueXML);
const seat = config.state.layoutRows[inSeatObj.id][5];
const row = config.state.layoutRows[inSeatObj.id][4];
const sectionID = config.state.layoutRows[inSeatObj.id][3];
const sectionDesc = XMLHelper.getSectionDescBySectionID(inVenueXML, sectionID);
const seatStr = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
const buyerTypes: (string | undefined)[][] | undefined = getBuyerTypesByPricescaleID(inSeatObj.data.seatsObj.id[0], inVenueXML);
const cartId = `cartItem-${inSeatObj.id}`;
const dropdownBuyerTypesSelector = `#${cartId} .dropdownBuyerTypes`;
appendHTML(cartId, color, category, seatStr);
addDropdownBuyerTypesOptions(buyerTypes, dropdownBuyerTypesSelector);
Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj, inVenueXML, inInputsWithValue);
}
function appendHTML(inCartId: string, inColor: string, inCategory: string | undefined, inSeatStr: string) {
jQuery("#cartItemHTML .fl-html").append(`
<div class="cartItem" id="${inCartId}">
<div class="cartItemColoredSquare" style="background: ${inColor};"></div>
<div class="cartItemCategory">${inCategory}</div>
<h5 class="cartItemSeat">${inSeatStr}</h5>
<select name="dropdownBuyerTypes" class="dropdownBuyerTypes"></select>
</div>`);
}
// todo: generalize dropdown fill options
function addDropdownBuyerTypesOptions(inBuyerTypes: (string | undefined)[][] | undefined, inSelector: string) {
if (!inBuyerTypes)
return;
const dropdownBuyerTypes = jQuery(inSelector).get(0);
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 appendOptionDropdownBuyerTypesOptions() {
// let opt = document.createElement('option');
// opt.value = arr[0];
// opt.innerHTML = `${arr[2]} €${arr[1]}`;
// dropdownBuyerTypes.appendChild(opt);
// }
function getBuyerTypesByPricescaleID(inPricescaleID: string, inVenueXML: I.VenueXML) {
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;
}
export function removeCartItems() {
jQuery("#cartItemHTML .cartItem").each(function () {
this.remove();
});
}
export function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
const index = config.state.selectedSeatsArr.findIndex(arr => {
return arr[0] === inSeatObj.id;
});
config.state.selectedSeatsArr[index][1] = inSelect.value;
const buyerTypeCode = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inVenueXML, inSelect.value);
if (buyerTypeCode)
config.state.selectedSeatsArr[index][2] = buyerTypeCode;
calcOverallPrice(inVenueXML);
UI.setBtnCartText();
const url = XMLHelper.generateCheckoutUrl(inInputsWithValue);
console.log(url);
Events.addRedirectCheckout(url);
console.log(config.state);
}
export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined {
if (!config.state.selectedSeatsArr.length) {
config.state.priceOverall = "0";
return "0";
}
let overallPrice: number = 0;
config.state.selectedSeatsArr.forEach(arr => {
const seatID: string = arr[0];
const buyertypeID: string = arr[1];
const selectedSeat: I.JSCSelectedSeat = config.state.selectedSeatsObj[seatID];
const pricescaleID: string = selectedSeat.data.seatsObj.id[0];
const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(inVenueXML, pricescaleID);
if (!pricescaleObj)
return;
const seatPrice: number | undefined = XMLHelper.getPriceByBuyertypeID(buyertypeID, pricescaleObj);
if (!seatPrice)
return;
overallPrice += seatPrice;
});
config.state.priceOverall = overallPrice.toFixed(2);
return config.state.priceOverall;
}
export function generateCartItems(inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
if (!config.state.selectedSeatsArr.length)
return;
for (const key in config.state.selectedSeatsObj) {
if (Object.prototype.hasOwnProperty.call(config.state.selectedSeatsObj, key)) {
const element = config.state.selectedSeatsObj[key];
addItem(element, inVenueXML, inInputsWithValue);
}
}
}
export function initModalCart() {
jQuery("#modalCart-overlay").hide();
Events.addCartBack();
Events.addCartClose();
}

86
client/src/modules/events.ts
View File

@@ -1,5 +1,10 @@
import * as Communication from "./communication";
import * as UI from "./ui";
import { config } from "./config";
import * as XMLHelper from "./xmlhelper";
import * as I from "../types/types";
import * as JSC from "./jsc";
import * as Cart from "./cart";
export function addCloseModal() {
const btnCloseModal: HTMLElement | undefined = jQuery("#btnCloseModal").get(0);
@@ -17,3 +22,84 @@ export function addDropdownSeatmap(inPanzoom: any) {
});
}
}
export function addModalCart(inInputsWithValue: I.InputsWithValue) {
const btnCart: HTMLElement | undefined = jQuery("#modalCart .uabb-button").get(0);
if (btnCart) {
btnCart.addEventListener("click", () => {
if (!config.state.selectedSeatsArr.length)
UI.showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`);
else if (config.state.cartChanged)
XMLHelper.isValidSeatSelection(inInputsWithValue);
else if (!config.state.cartChanged && config.state.isValidSeatSelection)
UI.showModalCart();
else if (!config.state.cartChanged && !config.state.isValidSeatSelection)
UI.showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
});
}
}
export function addRedirectCheckout(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");
});
}
}
export function addCartClose() {
const btnClose = jQuery("#modalCart-overlay .uabb-close-icon").get(0);
if (btnClose) {
btnClose.addEventListener("click", function () {
Communication.sendEventToParent("child_show_dialog_titlebar");
});
}
}
export function addCartBack() {
const btnBack = jQuery("#modalCart-overlay #goBack .fl-button").get(0);
if (btnBack) {
btnBack.addEventListener("click", function () {
jQuery("#modalCart-overlay .uabb-close-icon").trigger("click");
});
}
}
export function dropdownLegendOnChange(inSelector: string, inSeatmap: any, inSeatmapXML: any) {
const dropdownLegend = jQuery(inSelector).get(0);
dropdownLegend.addEventListener("change", function (this: HTMLSelectElement) {
const value: string = this.value;
const className: string = `._${value}`;
UI.changeDropdownLegendBGColor(inSelector, value, className);
if (value === "all") {
inSeatmap.find('unavailable').status('available');
JSC.setUnavailableSeats(inSeatmapXML, inSeatmap);
}
else {
inSeatmap.find('available').status('unavailable');
JSC.activateSeatsBySectionID(inSeatmapXML, inSeatmap, value);
JSC.setUnavailableSeats(inSeatmapXML, inSeatmap);
}
});
}
export function addCartDropdownBuyerTypes(inSelector: string, inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
jQuery(inSelector).on('change', function (this: HTMLSelectElement) {
Cart.changedDropdownBuyerType(this, inSeatObj, inVenueXML, inInputsWithValue);
});
}

119
client/src/modules/jsc.ts
View File

@@ -1,5 +1,8 @@
import * as I from "../types/types";
import { state } from "../seatmap";
import { config } from "./config";
import * as State from "./state";
import * as Cart from "./cart";
import * as UI from "./ui";
export function getSeats(inXML: any): I.JSCSeats {
const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale;
@@ -205,7 +208,7 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP
inArrMatrix[Y][X] = generateSeatStr(seatsKey, seatArr);
// save seatArr in state with seatID as key
state.layoutRows[seatArr[0]] = seatArr;
config.state.layoutRows[seatArr[0]] = seatArr;
});
});
@@ -244,4 +247,116 @@ export function createArrMatrix(inNumrows: number, inNumcols: number, inInitial:
}
return arr;
}
export function addTrims(inSeatmapXML: any) {
const trimArr: I.Trim[] = inSeatmapXML.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>`
}
}
export function selectSeatsInCart(inSeatmap: any) {
config.state.selectedSeatsArr.forEach(arr => {
const seatID: string = arr[0];
if (inSeatmap.get(seatID))
inSeatmap.status(seatID, "selected");
});
}
export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: string[], inSeats: I.JSCSeats, inLegend: I.JSCLegend, inSeatmap: any, inVenueXML: I.VenueXML): void {
const containerSeatmap: any = (<any>window).jQuery(inSelector);
// console.log(inSeatmapInitMap);
// console.log(inSeats);
// console.log(inLegend);
inSeatmap = containerSeatmap.seatCharts({
naming: {
top: false,
left: false,
rows: inRowsNaming,
},
map: inMap,
seats: inSeats,
legend: inLegend,
click: function () {
if (this.status() == 'available') {
const selectedSeat: I.JSCSelectedSeat = this.settings;
console.log(selectedSeat);
if (State.maximumSelectedSeatsReached(selectedSeat, inSeatmap))
return "available";
State.addSeatToState(inVenueXML, selectedSeat);
Cart.calcOverallPrice(inVenueXML);
UI.setBtnCartText();
return "selected";
}
else if (this.status() === "selected") {
const selectedSeat: I.JSCSelectedSeat = this.settings;
State.removeSeatFromState(selectedSeat);
Cart.calcOverallPrice(inVenueXML);
UI.setBtnCartText();
console.log(config.state.selectedSeatsArr);
return "available";
}
else if (this.status() == 'unavailable') {
return "unavailable";
}
else {
return this.style();
}
}
});
}

55
client/src/modules/state.ts Normal file
View File

@@ -0,0 +1,55 @@
import { config } from "./config";
import * as I from "../types/types";
import * as XMLHelper from "./xmlhelper";
import * as UI from "./ui";
export function addSeatToState(inVenueXML: I.VenueXML, inSelectedSeat: I.JSCSelectedSeat) {
const seatID: string = inSelectedSeat.id;
const seatObj: I.StateJSCSelectedSeats = {
[seatID]: inSelectedSeat
}
config.state.selectedSeatsObj = { ...config.state.selectedSeatsObj, ...seatObj };
const pricescaleID: string = config.state.selectedSeatsObj[seatID].data.seatsObj.id[0];
const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(inVenueXML, pricescaleID);
console.log(pricescaleObj);
if (!pricescaleObj) {
console.warn(`Cannot find corresponding venueXML pricescaleObj for pricescale with ID ${pricescaleID}`);
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 = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inVenueXML, firstBuyerTypeID);
if (buyerTypeCode) {
config.state.selectedSeatsArr.push([seatID, firstBuyerTypeID, buyerTypeCode]);
config.state.cartChanged = true;
}
}
export function removeSeatFromState(inSelectedSeat: I.JSCSelectedSeat) {
const seatID: string = inSelectedSeat.id;
delete config.state.selectedSeatsObj[seatID];
const index = config.state.selectedSeatsArr.findIndex(arr => {
return arr[0] === inSelectedSeat.id;
});
config.state.selectedSeatsArr.splice(index, 1);
config.state.cartChanged = true;
if (!config.state.selectedSeatsArr.length)
jQuery("#modalCart-overlay").hide();
}
export function maximumSelectedSeatsReached(inSeatObj: I.JSCSelectedSeat, inSeatmap: any): boolean {
if (config.state.selectedSeatsArr.length >= config.maxSelectedSeats) {
UI.showJBoxNotice(`Sie können maximal ${config.maxSelectedSeats} Plätze auswählen.`);
inSeatmap.status(inSeatObj.id, "available");
return true;
}
return false;
}

83
client/src/modules/ui.ts
View File

@@ -3,7 +3,8 @@ import * as Communication from "./communication";
import Panzoom from '@panzoom/panzoom';
import { PanzoomObject } from "@panzoom/panzoom/dist/src/types";
import { config } from "./config";
import jBox from "jbox";
import * as XMLHelper from "./xmlhelper";
export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string) {
const seatmapDropdown: HTMLElement | null = document.getElementById(inId);
@@ -171,4 +172,84 @@ export function showHideBtnCartLoading(inSwitch: string) {
export function showModalCart() {
jQuery("#modalCart-overlay").fadeIn(300);
Communication.sendEventToParent("child_hide_dialog_titlebar");
}
export 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,
});
}
export function showSeatmapBtnParent(): void {
console.log("child completely ready");
Communication.sendEventToParent("child_seatmap_ready");
}
export function createSeatTooltips(inVenueXML: I.VenueXML) {
new jBox("Tooltip", {
attach: jQuery(".seatCharts-seat"),
onOpen: function (this: any) {
showSeatTooltip(this, inVenueXML);
},
});
}
function showSeatTooltip(jBox: any, inVenueXML: I.VenueXML): void {
const seatID: string = jBox.source[0].id;
const seat = config.state.layoutRows[seatID][5];
const row = config.state.layoutRows[seatID][4];
const sectionID = config.state.layoutRows[seatID][3];
const sectionDesc = XMLHelper.getSectionDescBySectionID(inVenueXML, sectionID);
const tooltipContent = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
jBox.setContent(tooltipContent);
}
export function setBtnCartText() {
const numTickets = config.state.selectedSeatsArr.length;
let text: string = "";
let textModal: string = "";
console.log(numTickets);
if (config.state.priceOverall !== "") {
numTickets === 1 ? text = `${numTickets} Ticket für €${config.state.priceOverall}` : text = `${numTickets} Tickets für €${config.state.priceOverall}`;
textModal = `Summe (${numTickets} Plätze) €${config.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;
}
export 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);
}

118
client/src/modules/xmlhelper.ts
View File

@@ -2,7 +2,10 @@ import axios, { AxiosResponse } from 'axios';
var xml2jsParser = require('xml2js').parseString;
import * as I from "../types/types";
import Utils from './utils';
//import { state } from "../seatmap";
import * as UI from "./ui";
import { config } from "./config";
import * as Communication from "./communication";
export function getXMLPromise(url: string): Promise<unknown> {
return axios.get(url)
@@ -60,3 +63,116 @@ export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo {
return eventInfo;
}
export function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) {
console.log("checking seat selection");
console.log(inInputsWithValue);
jQuery("#modalCart-overlay").hide();
if (!config.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");
}
export function generateCheckoutUrl(inInputsWithValue: I.InputsWithValue): string | undefined {
console.log(inInputsWithValue);
if (!config.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 (config.state.selectedSeatsArr.map(function (arr) {
return arr.join(",");
})).join("|");
}
export 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;
}
export function processSMAP(inInputsWithValue: I.InputsWithValue) {
if (!inInputsWithValue.smap)
return;
const smapArr = inInputsWithValue.smap.split("").map(Number);
if (!smapArr[0])
jQuery("#eventInfoCapacity").hide();
}
export 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];
}
export 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];
}
export function getPriceByBuyertypeID(inBuyertypeID: string, inPricescaleObj: I.Pricescale5) {
const price = inPricescaleObj?.buyer_type.find(arr => {
return arr.id[0] === inBuyertypeID;
})?.price[0];
if (price)
return parseFloat(price);
return undefined;
}
export 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;
});
}
export 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];
let color: string = `#${element.color[0]} !important`; // Update: Colors are always defined: fallback colors exist in system so every XML provides them
cssArr.push(`._${ID} { background-color: ${color}; }`);
});
return (cssArr.join("\r\n"));
}

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;
}
}

3
client/src/types/types.d.ts vendored
View File

@@ -90,9 +90,10 @@ export interface Config {
childHasVenueXML: boolean;
urlCSSjQueryUI: string;
maxSelectedSeats: number;
state: I.State;
state: State;
}
export interface Message {
message: any | VenueXML,
event: string,