revised ui

client/src/modules/legend.ts

@@ -0,0 +1,49 @@
+export function convertLegendToDropdown(inID: string): void {
+    jQuery('ul.seatCharts-legendList').each(function () {
+        let select: JQuery<HTMLSelectElement> = jQuery(document.createElement('select'))
+            .insertBefore(
+                jQuery(this).hide()
+            );
+
+        select.attr({ id: inID });
+        appendFirstLegendOption(select);
+        appendLegendOptions(this, select);        
+    });
+}
+
+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";
+
+    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);
+}