Merge branches 'master' and 'master' of ssh://gitea/zino/seatmapv2

client/package-lock.json

@@ -21,6 +21,7 @@
         "browserify": "^17.0.0",
         "browserify-css": "^0.15.0",
         "envify": "^4.1.0",
+        "iconv-lite": "^0.6.3",
         "jquery": "^3.6.0",
         "jquery-ui": "^1.12.1",
         "tsify": "^5.0.2",
@@ -1184,6 +1185,18 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -3562,6 +3575,15 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
+    "iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      }
+    },
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",

client/package.json

@@ -27,6 +27,7 @@
     "browserify": "^17.0.0",
     "browserify-css": "^0.15.0",
     "envify": "^4.1.0",
+    "iconv-lite": "^0.6.3",
     "jquery": "^3.6.0",
     "jquery-ui": "^1.12.1",
     "tsify": "^5.0.2",

client/src/css/inject.css

@@ -1,6 +1,7 @@
  #containerBookingBtn {
     display: none;
     margin: 0;
+    text-align: center;
 }
 
 #get_flash {
@@ -28,15 +29,16 @@
 }
 
 #openSeatmap {
-    padding: 1rem;
+    padding: 1rem !important;
-    font-weight: bold;
+    /* font-weight: bold; */
-    color: #ffb201;
+    /* color: #ffb201; */
-    font-size: 1rem;
+    /* font-size: 1rem; */
     cursor: pointer;
+    border-radius: 5px;
 }
 
 #openSeatmap span {
-    font-size: .8rem;
+    font-size: 1.2rem;
     /* color: #5c5c5c; */
 }
 

client/src/css/seatmap.css

@@ -142,7 +142,6 @@ select#dropdownLegend, select#dropdownSeatmap, .dropdownBuyerTypes {
 }
 
 #modalCartRow {
-  /* max-height: 40vw; */
   overflow: auto;
 }
 
@@ -291,3 +290,17 @@ span.trimChar {
 #bottomHTML h6, #bottomHTML a {
   color: #999;
 }
+
+#modalCartImportantNote {
+  margin: 0 0 20px 0;
+  display: none;
+}
+
+#modalCart-overlay .uabb-modal {
+  pointer-events: auto;
+  width: 100% !important;
+  height: 100%;
+  overflow-y: scroll;
+  top: 0 !important;
+  transform: none !important;
+}

client/src/modules/cart.ts

@@ -3,19 +3,23 @@ import { config } from "./config";
 import * as I from "../types/types";
 import * as Events from "./events";
 import * as CartButtons from "./cartButtons";
+import Utils from "./utils";
 
 export function addItem(inSeatObj: I.JSCSelectedSeat): void { 
     const color: string = `#${XMLHelper.getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0])}`;
-    const category: string | undefined = XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0]);
+    const category: string | undefined = Utils.encodeCP850DecodeUTF8( XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0])! );
     const seat: string = config.state.layoutRows[inSeatObj.id][5];
     const row: string = config.state.layoutRows[inSeatObj.id][4];
     const sectionID: string = config.state.layoutRows[inSeatObj.id][3];
     const sectionDesc: string | undefined = XMLHelper.getSectionDescBySectionID(sectionID);
-    const seatStr: string | undefined = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
+    const seatStr: string | undefined = Utils.encodeCP850DecodeUTF8( `${sectionDesc}<br/>Reihe ${row} Platz ${seat}` );
     const buyerTypes: I.TypeBuyerType = XMLHelper.getBuyerTypesByPricescaleID(inSeatObj.data.seatsObj.id[0]);
     const cartID: string = `cartItem-${inSeatObj.id}`;
     const dropdownBuyerTypesSelector: string = `#${cartID} .dropdownBuyerTypes`;
 
+    console.log(category);
+    console.log(seatStr);
+
     appendHTML(cartID, color, category, seatStr);
     addDropdownBuyerTypeOptions(buyerTypes, dropdownBuyerTypesSelector);
     Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj);
@@ -44,16 +48,14 @@ export function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj:
     Events.addRedirectCheckout(url);
 }
 
-export function calcOverallPrice(): string | undefined {
+export function calcOverallPrice(): void{
-    if (!config.state.selectedSeatsArr.length) {
+    if (!config.state.selectedSeatsArr.length)
         config.state.priceOverall = "0";
-        return "0";
+    else
-    }
-
         config.state.priceOverall = sumSeatPrices();
-    return config.state.priceOverall;
-}
 
+    config.state.priceOverallEur = getPriceInEur(config.state.priceOverall);
+}
 
 export function generateCartItems(): void {
     if (!config.state.selectedSeatsArr.length)
@@ -82,6 +84,20 @@ export function generateCheckoutUrl(): string | undefined {
     return `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue.user_context}&pid=${inputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`;
 }
 
+export function getPriceInEur(inPrice: string): string {
+    const price: number = parseInt(inPrice);
+    return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(price);
+}
+
+export function setImportantNote(): void {
+    if (!config.state.inputsWithValue?.importantNote)
+        return;
+
+    const importantNoteSelector: JQuery<HTMLElement> = jQuery("#modalCartImportantNote")
+    importantNoteSelector[0].innerText = config.state.inputsWithValue?.importantNote
+    importantNoteSelector.show();
+}
+
 function appendHTML(inCartID: string, inColor: string, inCategory: string | undefined, inSeatStr: string): void {
     jQuery("#cartItemHTML .fl-html").append(`
     <div class="cartItem" id="${inCartID}">
@@ -104,10 +120,16 @@ function addDropdownBuyerTypeOptions(inBuyerTypes: I.TypeBuyerType, inSelector:
 }
 
 function appendOption(inSelector: string, inArr: I.TypeBuyerTypeArr): void {
+    const desc: string = Utils.encodeCP850DecodeUTF8( <string>inArr[2] );
+    const id: string = <string>inArr[0];
+    const price: string = getPriceInEur(<string>inArr[1]);
     const dropdownBuyerTypes: HTMLElement = jQuery(inSelector).get(0);
+
+    console.log(price);
+    
     let opt: HTMLOptionElement = document.createElement('option');
-    opt.value = <string>inArr[0];
+    opt.value = id;
-    opt.innerHTML = `${inArr[2]} €${inArr[1]}`;
+    opt.innerHTML = `${desc} ${price}`;
     dropdownBuyerTypes.appendChild(opt);
 }
 

client/src/modules/cartButtons.ts

@@ -7,20 +7,18 @@ export function setBtnCartText(): void {
 
 function createCartBtnText(): string {
     const numTickets: number = config.state.selectedSeatsArr.length;
-
+    return numTickets === 1 ? `${numTickets} Ticket für ${config.state.priceOverallEur}` : `${numTickets} Tickets für ${config.state.priceOverallEur}`;
-    if (config.state.priceOverall !== "")
-        return numTickets === 1 ? `${numTickets} Ticket für €${config.state.priceOverall}` : `${numTickets} Tickets für €${config.state.priceOverall}`;
-    else 
-        return "0 Tickets für €0.00";    
 }
 
 function createModalCartBtnText(): string {
     const numTickets: number = config.state.selectedSeatsArr.length;
 
-    if (config.state.priceOverall !== "")
+    return `Summe (${numTickets} Plätze) ${config.state.priceOverallEur}`;
-        return `Summe (${numTickets} Plätze) €${config.state.priceOverall}`;
+
-    else
+    // if (config.state.priceOverall !== "")
-        return `Summe (0 Plätze) €0,00`;
+    //     return `Summe (${numTickets} Plätze) €${config.state.priceOverall}`;
+    // else
+    //     return `Summe (0 Plätze) €0,00`;
 }
 
 export function showHideBtnCartLoading(inSwitch: string): void {

client/src/modules/child.ts

@@ -52,23 +52,23 @@ export function initSendInputsWithValue(inE: any) {
     Communication.sendEventToParent("child_init_needVenueXML");
 }
 
-
 export function sendSeatmapXML(inE: any) {
     const data: I.Message = JSON.parse(inE.data);
     config.state.seatmapXML = data.message.map_response;
     const map: string[] = JSC.generateMap();
     const rowsNaming: string[] = JSC.getRowsNaming();
     const seats: I.JSCSeats = JSC.getSeats();
-    const legend: I.JSCLegend = JSC.generateLegend("#JSCLegendInner");
+    const legend: I.JSCLegend = Legend.generateLegend("#JSCLegendInner");
 
     JSC.addSeatmap("#containerSeatmapInner", map, rowsNaming, seats, legend);
-    JSC.setUnavailableSeats();
+    JSC.setBookedSeatsUnavailable();
     JSC.selectSeatsInCart();
     Legend.convertLegendToDropdown("dropdownLegend");
     Events.dropdownLegendOnChange("#dropdownLegend");
     Trims.addTrims();
     XMLHelper.processSMAP();
     config.state.panzoom = Panzoom.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
+    Cart.setImportantNote();
     UI.controlLoftloader("hide");
     jBoxHelper.createSeatTooltips();
 }
@@ -80,7 +80,7 @@ export function sendCheckoutResponse(inE: any) {
     Utils.consoleLog(data.message);
 
     if (!config.state.isValidSeatSelection) {
-        jBoxHelper.showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
+        jBoxHelper.showJBoxNotice(`Auswahl nicht möglich: Einzelplatz freigelassen oder max. Ticketsanzahl überschritten.`);
         CartButtons.showHideBtnCartLoading("hide");
     }
     else {

client/src/modules/config.ts

@@ -28,6 +28,7 @@ export const config: I.Config = {
     },
     state: {
         priceOverall: "",
+        priceOverallEur: "",
         cartChanged: false,
         selectedSeatsArr: [],
         selectedSeatsObj: {},

client/src/modules/events.ts

@@ -2,7 +2,6 @@ import * as Communication from "./communication";
 import * as UI from "./ui";
 import { config } from "./config";
 import * as I from "../types/types";
-import * as JSC from "./jsc";
 import * as Cart from "./cart";
 import * as Legend from "./legend";
 import * as jBoxHelper from "./jBoxHelper";
@@ -37,7 +36,7 @@ export function addModalCart(): void {
             else if (!config.state.cartChanged && config.state.isValidSeatSelection)
                 UI.fadeInCartModal();
             else if (!config.state.cartChanged && !config.state.isValidSeatSelection)
-                jBoxHelper.showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
+                jBoxHelper.showJBoxNotice(`Auswahl nicht möglich: Einzelplatz freigelassen oder max. Ticketsanzahl überschritten.`); // todo: outsource error messages
         });
     }
 }
@@ -75,29 +74,15 @@ export function addCartBack(): void {
 }
 
 export function dropdownLegendOnChange(inSelector: string): void {
-    const seatmap: any = config.state.seatmap;
     const dropdownLegend: HTMLElement = jQuery(inSelector).get(0);
 
     dropdownLegend.addEventListener("change", function (this: HTMLSelectElement) {
-        const value: string = this.value;
+        Legend.dropdownLegendOnChange(this, inSelector);
-        const className: string = `._${value}`;
-
-        Legend.changeDropdownLegendBGColor(inSelector, value, className);
-
-        if (value === "all") {
-            seatmap.find('unavailable').status('available');
-            JSC.setUnavailableSeats();
-        }
-        else {
-            seatmap.find('available').status('unavailable');
-            JSC.activateSeatsBySectionID(value);
-            JSC.setUnavailableSeats();
-        }
     });
 }
 
 export function addCartDropdownBuyerTypes(inSelector: string, inSeatObj: I.JSCSelectedSeat): void {
-    // todo: which variant is not deprecated?
+    // todo: which jquery variant is not deprecated?
     jQuery(inSelector).on('change', function (this: HTMLSelectElement) {
         Cart.changedDropdownBuyerType(this, inSeatObj);
     });

client/src/modules/jBoxHelper.ts

@@ -1,6 +1,7 @@
 import jBox from "jbox";
 import { config } from "./config";
 import * as XMLHelper from "./xmlhelper";
+import Utils from "./utils";
 
 export function showJBoxNotice(inContent: string, inAutoClose: number | boolean | undefined = 5000): void {
     new jBox<"Notice"> ('Notice', {
@@ -37,7 +38,7 @@ function showSeatTooltip(jBox: any): void {
     const seat: string = config.state.layoutRows[seatID][5];
     const row: string = config.state.layoutRows[seatID][4];
     const sectionID: string = config.state.layoutRows[seatID][3];
-    const sectionDesc: string | undefined = XMLHelper.getSectionDescBySectionID(sectionID);
+    const sectionDesc: string | undefined = Utils.encodeCP850DecodeUTF8( XMLHelper.getSectionDescBySectionID(sectionID)! );
     const tooltipContent: string = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
 
     jBox.setContent(tooltipContent);

client/src/modules/jsc.ts

@@ -22,16 +22,41 @@ export function getSeats(): I.JSCSeats {
     return seatmapInitSeats;
 }
 
-export function activateSeatsBySectionID(inValue: string): void {
+function getSeatAvailability(): I.SeatAvailability {
+    const seatmapXML: any = config.state.seatmapXML;
+    const availabilityArray: I.JSCAvailability = seatmapXML.seatmap[0].view_modes[0].view_mode[0].availability[0];
+    const availableArray: string[] = availabilityArray.available_selectable_mask[0].split(",");
+    const unavailableArray: string[] = availabilityArray.unavailable_unselectable_mask[0].split(",");
+
+    return <I.SeatAvailability> {
+        available: availableArray,
+        unavailable: unavailableArray
+    }
+}
+
+export function activateSeatsBySectionID(inSectionID: string): void {
     const seatmapXML: any = config.state.seatmapXML;
-    const seatmap: any = config.state.seatmap;
     const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
 
-    const seatsArr: string[] | undefined = pricescaleArr.find(arr => {
+    const seatsArray: string[] | undefined = pricescaleArr.find(arr => {
-        return arr.id[0] === inValue;
+        return arr.id[0] === inSectionID;
     })?.mask[0].split(",");
 
-    seatmap.status(seatsArr, "available");
+    if (seatsArray)
+        setSeatsAvailable(seatsArray)
+}
+
+function setSeatsAvailable(inSeatsArray: string[]) {
+    const seatmap: any = config.state.seatmap;
+    const seatAvailability: I.SeatAvailability = getSeatAvailability();
+
+    inSeatsArray.forEach(seatID => {
+        // skip blacked out seats
+        if (!seatAvailability.available.includes(seatID) && !seatAvailability.unavailable.includes(seatID))
+            return;
+
+        seatmap.status(seatID, "available");
+    });
 }
 
 export function getRowsNaming(): string[] {
@@ -57,7 +82,6 @@ export function generateMap(): string[] {
     const layout: I.SeatmapLayout = seatmapXML.seatmap[0].layouts[0].layout[0];
     const rows: I.LayoutRow2[] = layout.rows[0].row;
     const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
-    const availabilityArr: I.JSCAvailability = seatmapXML.seatmap[0].view_modes[0].view_mode[0].availability[0];
 
     // Form: arrMatrix[Y][X]
     let arrMatrix: string[][] = createArrMatrix(
@@ -66,25 +90,11 @@ export function generateMap(): string[] {
         "_"
     );
 
-    arrMatrix = enterSeatsInMatrix(rows, arrMatrix, pricescaleArr, availabilityArr);
+    arrMatrix = enterSeatsInMatrix(rows, arrMatrix, pricescaleArr);
     return arrMatrix.map(element => element.join(""));
 }
 
-export function generateLegend(inNode: string): I.JSCLegend {
+export function setBookedSeatsUnavailable(): void {
-    const seatmapXML: any = config.state.seatmapXML;
-    const venueXML: I.VenueXML = config.state.inVenueXML!;
-    const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
-    const venuePricescaleArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale;
-
-    return <I.JSCLegend>{
-        node: jQuery(inNode),
-        items: createLegendItems(pricescaleArr, venuePricescaleArr)
-    }
-}
-
-
-
-export function setUnavailableSeats(): void {
     const seatmapXML: any = config.state.seatmapXML;
     const seatmap: any = config.state.seatmap;
     const availabilityArr: I.JSCAvailability = seatmapXML.seatmap[0].view_modes[0].view_mode[0].availability[0];
@@ -140,19 +150,8 @@ export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: st
     });
 }
 
-function createLegendItems(pricescaleArr: I.SeatmapPricescale[], venuePricescaleArr: I.Pricescale2[]): string[][] {
+function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inPricescaleArr: I.SeatmapPricescale[]): string[][] {
-    return pricescaleArr.map((arr, index: number) => {
+    const seatAvailability: I.SeatAvailability = getSeatAvailability();
-        const id: string = arr.id[0];
-        const seatsKey: string = String.fromCharCode(97 + index).toLocaleUpperCase();
-        const desc: string | undefined = venuePricescaleArr.find(obj => obj.id[0] === id)?.desc[0];
-        const description: string = `${desc} €${pricescaleArr[index].ref_price[0]}`;
-        return [seatsKey, "available", description];
-    });
-}
-
-function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inPricescaleArr: I.SeatmapPricescale[], inAvailabilityArr: I.JSCAvailability): string[][] {
-    const availableArr: string[] = inAvailabilityArr.available_selectable_mask[0].split(",");
-    const unavailableArr: string[] = inAvailabilityArr.unavailable_unselectable_mask[0].split(",");
 
     inRows.forEach(element => {
         const row: I.LayoutRow2 = element;
@@ -173,18 +172,19 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP
             // 4: "13" -> Reihenbezeichnung
             // 5: "4" -> Platznummer
 
+            const seatID: string = seatArr[0];
+            const seatXCoord: string = seatArr[2];
+
             // skip blacked out seats  
-            if (!availableArr.includes(seatArr[0]) && !unavailableArr.includes(seatArr[0]))
+            if (!seatAvailability.available.includes(seatID) && !seatAvailability.unavailable.includes(seatID))          
                 return;
 
-            // const X: number = parseInt(seatArr[5]);
+            const X: number = parseInt(seatXCoord) - 1;
-            const X: number = parseInt(seatArr[2]) - 1;
+            const seatsKey: string | undefined = getSeatsKey(seatID, inPricescaleArr);
-            const seatsKey: string | undefined = getSeatsKey(seatArr[0], inPricescaleArr);
 
             if (seatsKey)
                 inArrMatrix[Y][X] = `${seatsKey}[${seatArr[0]}, ]`;
 
-
             // save seatArr in state with seatID as key
             config.state.layoutRows[seatArr[0]] = seatArr;
         });

client/src/modules/legend.ts

@@ -1,3 +1,9 @@
+import { config } from "./config";
+import * as I from "../types/types";
+import Utils from "./utils";
+import * as Cart from "./cart";
+import * as JSC from "./jsc";
+
 export function convertLegendToDropdown(inID: string): void {
     jQuery('ul.seatCharts-legendList').each(function () {
         let select: JQuery<HTMLSelectElement> = jQuery(document.createElement('select'))
@@ -11,30 +17,41 @@ export function convertLegendToDropdown(inID: string): void {
     });
 }
 
-function appendLegendOptions(element: HTMLElement, inSelect: JQuery<HTMLSelectElement>) {
+export function generateLegend(inNode: string): I.JSCLegend {
-    jQuery('>li', element).each(function () {
+    const seatmapXML: any = config.state.seatmapXML;
-        const className: string = jQuery(this)[0].children[0].classList[3];
+    const venueXML: I.VenueXML = config.state.inVenueXML!;
-        const val: string = className.substring(1);
+    const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
-        const text: string = (<HTMLElement>jQuery(this)[0].children[1]).innerText;
+    const venuePricescaleArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale;
 
-        appendLegendOption(inSelect, className, val, text);
+    return <I.JSCLegend>{
-    });
+        node: jQuery(inNode),
+        items: createLegendItems(pricescaleArr, venuePricescaleArr)
+    }
 }
 
-function appendLegendOption(inSelect: JQuery<HTMLSelectElement>, className: string, val: string, text: string): void {
+export function dropdownLegendOnChange(inHTMLSelectElement: HTMLSelectElement, inSelector: string) {
-    let option: JQuery<HTMLOptionElement> = jQuery('<option/>');
+    const seatmap: any = config.state.seatmap;
-    option.attr({ 'value': val, 'class': className }).text(text);
+    const sectionID: string = inHTMLSelectElement.value;
-    inSelect.append(option);
+    const className: string = `._${sectionID}`;
+
+    changeDropdownLegendBGColor(inSelector, sectionID, className);
+
+    console.log(sectionID);
+
+    if (sectionID === "all") {
+        seatmap.find('unavailable').status('available');
+    }
+    else {
+        seatmap.find('available').status('unavailable');
+        JSC.activateSeatsBySectionID(sectionID);
     }
 
-function appendFirstLegendOption(inSelect: JQuery<HTMLSelectElement>): void {
+    JSC.setBookedSeatsUnavailable();
-    let option: JQuery<HTMLOptionElement> = jQuery('<option/>');
+    JSC.selectSeatsInCart();
-    option.attr({ 'value': 'all' }).text('Alle Preiskategorien');
-    option.css("color", "#5c5c5c");
-    inSelect.append(option);
 }
 
-export function changeDropdownLegendBGColor(inSelector: string, inValue: string, inClassName: string): void {
+function changeDropdownLegendBGColor(inSelector: string, inValue: string, inClassName: string): void {
+    return;
     let bgColor: string = "#fafafa";
     let color: string = "#5c5c5c";
 
@@ -47,3 +64,37 @@ export function changeDropdownLegendBGColor(inSelector: string, inValue: string,
     jQuery(inSelector).css("background-color", bgColor);
     jQuery(`${inSelector} option[value="all"]`).css("color", color);
 }
+
+function appendLegendOptions(inElement: HTMLElement, inSelect: JQuery<HTMLSelectElement>): void {
+    jQuery('>li', inElement).each(function () {
+        const className: string = jQuery(this)[0].children[0].classList[3];
+        const val: string = className.substring(1);
+        const text: string = (<HTMLElement>jQuery(this)[0].children[1]).innerText;
+
+        appendLegendOption(inSelect, className, val, text);
+    });
+}
+
+function appendLegendOption(inSelect: JQuery<HTMLSelectElement>, inClassName: string, inVal: string, inText: string): void {
+    let option: JQuery<HTMLOptionElement> = jQuery('<option/>');
+    option.attr({ 'value': inVal, 'class': inClassName }).text(inText);
+    inSelect.append(option);
+}
+
+function appendFirstLegendOption(inSelect: JQuery<HTMLSelectElement>): void {
+    let option: JQuery<HTMLOptionElement> = jQuery('<option/>');
+    option.attr({ 'value': 'all' }).text('Alle Preiskategorien');
+    option.css("color", "#5c5c5c");
+    inSelect.append(option);
+}
+
+function createLegendItems(pricescaleArr: I.SeatmapPricescale[], venuePricescaleArr: I.Pricescale2[]): string[][] {
+    return pricescaleArr.map((arr, index: number) => {
+        const id: string = arr.id[0];
+        const seatsKey: string = String.fromCharCode(97 + index).toLocaleUpperCase();
+        const desc: string | undefined = Utils.encodeCP850DecodeUTF8(venuePricescaleArr.find(obj => obj.id[0] === id)?.desc[0]!);
+        const price: string = Cart.getPriceInEur(pricescaleArr[index].ref_price[0]);
+        const description: string = `${desc} ${price}`;
+        return [seatsKey, "available", description];
+    });
+}

client/src/modules/ui.ts

@@ -11,9 +11,12 @@ export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string): vo
 
     if (seatmapDropdown) {
         for (let seatmapObj of inSeatmapListing) {
+            const id: string = seatmapObj.id[0];
+            const desc: string = Utils.encodeCP850DecodeUTF8(seatmapObj.desc[0]);
+
             var opt: HTMLOptionElement = document.createElement('option');
-            opt.value = seatmapObj.id[0];
+            opt.value = id;
-            opt.innerHTML = seatmapObj.desc[0];
+            opt.innerHTML = desc;
             seatmapDropdown.appendChild(opt);
         }
     }
@@ -31,6 +34,7 @@ export function setEventInfo(inEventInfo: I.EventInfo): void {
 export function createDialog(): void {
     const iframeHTML: string = "<iframe id='iframeSeatmap' scrolling='no' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen width='100%' />";
     const src: string = Utils.getConfigValue("seatmap");
+    Utils.consoleLog(src);
 
     jQuery("#dialogSeatmap").append(
         jQuery(iframeHTML)

client/src/modules/utils.ts

@@ -1,5 +1,6 @@
 import * as I from "../types/types";
 import { config } from "./config";
+var iconv = require('iconv-lite');
 
 export default class Utils {
 
@@ -105,4 +106,8 @@ export default class Utils {
         const resources = config.resources[branch];
         return resources[inProperty];
     }
+
+    static encodeCP850DecodeUTF8(inString: string): string {
+        return <string> iconv.decode( iconv.encode(inString, "cp850"), "utf8");
+    }
 }

client/src/types/types.d.ts

@@ -1,5 +1,10 @@
 import { PanzoomObject } from "@panzoom/panzoom";
 
+export interface SeatAvailability {
+    available: string[];
+    unavailable: string[];
+}
+
 export interface Trim {
     coord: string[];
     enabled: string[];
@@ -12,6 +17,7 @@ export interface Trim {
 }
 
 export interface State {
+    priceOverallEur: string;
     priceOverall: string;
     cartChanged: boolean;
     selectedSeatsArr: string[][];