fixed legend filtering option and adjusted saalplanbuchung button styles

client/dist/inject.css

@@ -1 +1 @@
-#containerBookingBtn{display:none;margin:0}#get_flash{display:none}.ui-dialog-title{text-align:center;display:none}.ui-widget-overlay{background:#fff;opacity:1;width:100vw;height:100vh}#openSeatmap img{width:64px}#openSeatmap{padding:1rem;font-weight:700;color:#ffb201;font-size:1rem;cursor:pointer}#openSeatmap span{font-size:.8rem}#foobarParent{display:none}div#dialogSeatmap{padding-top:0}.ui-widget-header{background:#fff;border:1px solid #c6c6c6;border-bottom-right-radius:0;border-bottom-left-radius:0}.ui-dialog{background:#fff;left:0!important;padding:0;top:0!important;right:0!important}.ui-dialog .ui-dialog-content{padding:0}.ui-dialog-titlebar{margin-left:0;margin-right:0;padding:0!important;display:none}#iframeSeatmap{height:100vh;background:#fff;width:100%}.ui-corner-all{border-radius:0}.ui-widget{border:none!important}
+#containerBookingBtn{display:none;margin:0;text-align:center}#get_flash{display:none}.ui-dialog-title{text-align:center;display:none}.ui-widget-overlay{background:#fff;opacity:1;width:100vw;height:100vh}#openSeatmap img{width:64px}#openSeatmap{padding:1rem!important;cursor:pointer;border-radius:5px}#openSeatmap span{font-size:1.2rem}#foobarParent{display:none}div#dialogSeatmap{padding-top:0}.ui-widget-header{background:#fff;border:1px solid #c6c6c6;border-bottom-right-radius:0;border-bottom-left-radius:0}.ui-dialog{background:#fff;left:0!important;padding:0;top:0!important;right:0!important}.ui-dialog .ui-dialog-content{padding:0}.ui-dialog-titlebar{margin-left:0;margin-right:0;padding:0!important;display:none}#iframeSeatmap{height:100vh;background:#fff;width:100%}.ui-corner-all{border-radius:0}.ui-widget{border:none!important}

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;
-    font-weight: bold;
-    color: #ffb201;
-    font-size: 1rem;
+    padding: 1rem !important;
+    /* font-weight: bold; */
+    /* color: #ffb201; */
+    /* font-size: 1rem; */
     cursor: pointer;
+    border-radius: 5px;
 }
 
 #openSeatmap span {
-    font-size: .8rem;
+    font-size: 1.2rem;
     /* color: #5c5c5c; */
 }
 

client/src/modules/child.ts

@@ -52,7 +52,6 @@ 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;
@@ -62,7 +61,7 @@ export function sendSeatmapXML(inE: any) {
     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");

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";
@@ -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;
-        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();
-        }
+        Legend.dropdownLegendOnChange(this, inSelector);
     });
 }
 
 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/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 => {
-        return arr.id[0] === inValue;
+    const seatsArray: string[] | undefined = pricescaleArr.find(arr => {
+        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,11 +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 setUnavailableSeats(): void {
+export function setBookedSeatsUnavailable(): 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];
@@ -126,9 +150,8 @@ export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: st
     });
 }
 
-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(",");
+function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inPricescaleArr: I.SeatmapPricescale[]): string[][] {
+    const seatAvailability: I.SeatAvailability = getSeatAvailability();
 
     inRows.forEach(element => {
         const row: I.LayoutRow2 = element;
@@ -149,18 +172,19 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP
             // 4: "13" -> Reihenbezeichnung
             // 5: "4" -> Platznummer
 
-            // skip blacked out seats            
-            if (!availableArr.includes(seatArr[0]) && !unavailableArr.includes(seatArr[0]))
+            const seatID: string = seatArr[0];
+            const seatXCoord: string = seatArr[2];
+
+            // skip blacked out seats  
+            if (!seatAvailability.available.includes(seatID) && !seatAvailability.unavailable.includes(seatID))          
                 return;
 
-            // const X: number = parseInt(seatArr[5]);
-            const X: number = parseInt(seatArr[2]) - 1;
-            const seatsKey: string | undefined = getSeatsKey(seatArr[0], inPricescaleArr);
+            const X: number = parseInt(seatXCoord) - 1;
+            const seatsKey: string | undefined = getSeatsKey(seatID, 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

@@ -2,6 +2,7 @@ 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 () {
@@ -12,24 +13,10 @@ export function convertLegendToDropdown(inID: string): void {
 
         select.attr({ id: inID });
         appendFirstLegendOption(select);
-        appendLegendOptions(this, select);        
+        appendLegendOptions(this, select);
     });
 }
 
-export function changeDropdownLegendBGColor(inSelector: string, inValue: string, inClassName: string): void {
-    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);
-}
-
 export function generateLegend(inNode: string): I.JSCLegend {
     const seatmapXML: any = config.state.seatmapXML;
     const venueXML: I.VenueXML = config.state.inVenueXML!;
@@ -42,6 +29,42 @@ export function generateLegend(inNode: string): I.JSCLegend {
     }
 }
 
+export function dropdownLegendOnChange(inHTMLSelectElement: HTMLSelectElement, inSelector: string) {
+    const seatmap: any = config.state.seatmap;
+    const sectionID: string = inHTMLSelectElement.value;
+    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);
+    }
+
+    JSC.setBookedSeatsUnavailable();
+    JSC.selectSeatsInCart();
+}
+
+function changeDropdownLegendBGColor(inSelector: string, inValue: string, inClassName: string): void {
+    return;
+    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 appendLegendOptions(inElement: HTMLElement, inSelect: JQuery<HTMLSelectElement>): void {
     jQuery('>li', inElement).each(function () {
         const className: string = jQuery(this)[0].children[0].classList[3];
@@ -69,7 +92,7 @@ function createLegendItems(pricescaleArr: I.SeatmapPricescale[], venuePricescale
     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 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/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[];