before state inputswithvalue

client/src/inject.ts

@@ -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}`);

client/src/modules/cart.ts

@@ -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();
+}

client/src/modules/events.ts

@@ -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);
+    });
+}

client/src/modules/jsc.ts

@@ -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;
         });
     });
 
@@ -245,3 +248,115 @@ 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();
+            }
+        }
+    });
+}

client/src/modules/state.ts

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

client/src/modules/ui.ts

@@ -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);
@@ -172,3 +173,83 @@ 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);
+}

client/src/modules/xmlhelper.ts

@@ -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"));
+}

client/src/seatmap.ts

@@ -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.addModalCart(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.`);
-        });
-    }
-
 });
 
-function showJBoxNotice(inContent: string, inAutoClose: number | boolean | undefined = 5000) {
+// Hide header when height of window is smaller than ...
-    new jBox('Notice', {
+// Note: Cannot determine width of inner iframe, therefore need to use window.innerHeight
-        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");
-        });
-    }
-}
-
 window.onresize = function () {
     const innerHeight = window.innerHeight;
     if (innerHeight < 576) {
@@ -527,242 +56,103 @@ window.onresize = function () {
     }
 }
 
-
+function messageHandler(inE: any) {
-
+    if (typeof (inE.data) !== 'string')
-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}`);
         return;
-    }
 
-    // get id and code of first buyer type
+    const data: I.Message = JSON.parse(inE.data);
-    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);
 
-    if (buyerTypeCode) {
+    console.log(`child: received from ${data.from}`);
-        state.selectedSeatsArr.push([seatID, firstBuyerTypeID, buyerTypeCode]);
+    console.log(data);
-        state.cartChanged = true;
-    }
-}
 
-function getBuyerTypeCodeByBuyerTypeID(inVenueXML: I.VenueXML, inBuyerTypeID: string): string | undefined {
+    switch (data.event) {
-    const venueBuyerTypeArr = inVenueXML.venue[0].buyer_types[0].buyer_type;
-    return venueBuyerTypeArr.find(arr => {
-        return inBuyerTypeID === arr.id[0];
-    })?.code[0];
-}
 
-function getVenuePriceStructurePropertyByPricescaleID(inVenueXML: I.VenueXML, inID: string): I.Pricescale5 | undefined {
+        case "parent_init_venue": {
-    const venuePricescaleArr: I.Pricescale5[] = inVenueXML.price_structure[0].pricescale;
+            UI.controlLoftloader("show");
-    return venuePricescaleArr.find(obj => {
+            Communication.sendEventToParent("child_init_needInputsWithValue");
-        return obj.id[0] === inID;
+            break;
-    });
+        }
-}
 
-function removeSeatFromState(inSelectedSeat: I.JSCSelectedSeat) {
+        case "parent_init_sendVenueXML": {
-    const seatID: string = inSelectedSeat.id;
+            inVenueXML = data.message.map_response;
-    delete state.selectedSeatsObj[seatID];
-    const index = state.selectedSeatsArr.findIndex(arr => {
-        return arr[0] === inSelectedSeat.id;
-    });
-    state.selectedSeatsArr.splice(index, 1);
-    state.cartChanged = true;
 
-    if (!state.selectedSeatsArr.length)
+            // Generate pricescale css classes
-        jQuery("#modalCart-overlay").hide();
+            const css = XMLHelper.generatePricescaleCSS(inVenueXML);
-}
+            Utils.inject(css, "cssCustom", "body");
 
-function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined {
+            // Fill event info
-    if (!state.selectedSeatsArr.length) {
+            const eventInfo = XMLHelper.getEventInfo(inVenueXML);
-        state.priceOverall = "0";
+            UI.setEventInfo(eventInfo, inputsWithValue);
-        return "0";
-    }
 
-    let overallPrice: number = 0;
+            // Fill select dropdown
+            const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(inVenueXML);            
+            UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
 
-    state.selectedSeatsArr.forEach(arr => {
+            // Display first seatmapXML
-        const seatID: string = arr[0];
+            const id: string = seatmapListing[0].id[0];
-        const buyertypeID: string = arr[1];
+            jQuery("#dropdownSeatmap").val(id);
-        const selectedSeat: I.JSCSelectedSeat = state.selectedSeatsObj[seatID];
+            Communication.needSeatmapXML(id);
-        const pricescaleID: string = selectedSeat.data.seatsObj.id[0];
-        const pricescaleObj: I.Pricescale5 | undefined = getVenuePriceStructurePropertyByPricescaleID(inVenueXML, pricescaleID);
 
-        if (!pricescaleObj)
+            console.log(css);
-            return;
+            console.log(seatmapListing);
 
-        const seatPrice: number | undefined = getPriceByBuyertypeID(buyertypeID, pricescaleObj);
+            break;
+        }
 
-        if (!seatPrice)
+        case "parent_init_sendInputsWithValue": {
-            return;
+            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) {
+        case "parent_sendCheckoutResponse": {            
-    const price = inPricescaleObj?.buyer_type.find(arr => {
+            config.state.isValidSeatSelection = data.message.isValidSeatSelection;
-        return arr.id[0] === inBuyertypeID;
-    })?.price[0];
 
-    if (price)
+            console.log(data.message);
-        return parseFloat(price);
 
-    return undefined;
+            if (!config.state.isValidSeatSelection) {
-}
+                UI.showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
-
+                UI.showHideBtnCartLoading("hide");
-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";
             }
             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;
+    }
 }

client/src/types/types.d.ts

@@ -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,