fixed umlauts using iconv-lite

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",
@@ -48,4 +49,4 @@
       "level": 2
     }
   }
-}
+}

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);
@@ -104,10 +108,14 @@ 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 = <string>inArr[1];
     const dropdownBuyerTypes: HTMLElement = jQuery(inSelector).get(0);
+    
     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/child.ts

@@ -59,7 +59,7 @@ export function sendSeatmapXML(inE: any) {
     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();

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

@@ -70,20 +70,6 @@ export function generateMap(): string[] {
     return arrMatrix.map(element => element.join(""));
 }
 
-export function generateLegend(inNode: string): I.JSCLegend {
-    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;
@@ -140,16 +126,6 @@ export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: st
     });
 }
 
-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 = 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(",");

client/src/modules/legend.ts

@@ -1,3 +1,7 @@
+import { config } from "./config";
+import * as I from "../types/types";
+import Utils from "./utils";
+
 export function convertLegendToDropdown(inID: string): void {
     jQuery('ul.seatCharts-legendList').each(function () {
         let select: JQuery<HTMLSelectElement> = jQuery(document.createElement('select'))
@@ -11,29 +15,6 @@ export function convertLegendToDropdown(inID: string): void {
     });
 }
 
-function appendLegendOptions(element: HTMLElement, inSelect: JQuery<HTMLSelectElement>) {
-    jQuery('>li', element).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>, className: string, val: string, text: string): void {
-    let option: JQuery<HTMLOptionElement> = jQuery('<option/>');
-    option.attr({ 'value': val, 'class': className }).text(text);
-    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);
-}
-
 export function changeDropdownLegendBGColor(inSelector: string, inValue: string, inClassName: string): void {
     let bgColor: string = "#fafafa";
     let color: string = "#5c5c5c";
@@ -46,4 +27,50 @@ export function changeDropdownLegendBGColor(inSelector: string, inValue: string,
     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!;
+    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)
+    }
+}
+
+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 = 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");
+    }
 }