revised ui

client/src/inject.ts

@@ -7,7 +7,7 @@ import * as Parser from './modules/parser';
 import * as UI from "./modules/ui";
 import { config } from "./modules/config";
 import axios from 'axios';
-//require("jbox/dist/jBox.all.css");
+import * as BookingBtn from "./modules/bookingButton";
 
 let inputsWithValue: I.InputsWithValue;
 
@@ -43,7 +43,7 @@ window.addEventListener('load', () => {
     inputsWithValue["smap"] = Parser.getSMAP();
 
     // Inject and point seatmap button to new location
-    UI.injectBookingBtn();
+    BookingBtn.injectBookingBtn();
 
     // Create an jQuery dialog into an iframe which is opened on clicking seatmap button
     // https://api.jqueryui.com/dialog/

client/src/modules/bookingButton.ts

@@ -0,0 +1,33 @@
+import * as Communication from "./communication";
+
+export function injectBookingBtn(): void {
+    jQuery(".flash_seat_map_box").remove();
+    changeBookingBtnCSS();
+    appendBookingBtnHTML();
+}
+
+export function showSeatmapBtnParent(): void {
+    console.log("child completely ready");
+    Communication.sendEventToParent("child_seatmap_ready");
+}
+
+function appendBookingBtnHTML(): void {
+    jQuery("#flash_seat_map_box_id").append(`
+    <div class="row_space"></div>
+    <div class="row_space"></div>
+    <div id="containerBookingBtn">
+        <a class="continue" id="openSeatmap">
+            <span>Saalplanbuchung</span>
+        </a>
+        <div id="dialogSeatmap" hidden="hidden"></div>
+    </div>
+    `);
+}
+
+function changeBookingBtnCSS(): void {
+    jQuery('#flash_seat_map_box_id').css({
+        "display": "block",
+        "position": "relative",
+        "width": "100%"
+    });
+}

client/src/modules/cartButtons.ts

@@ -0,0 +1,37 @@
+import { config } from "./config";
+
+export function setBtnCartText(): void {
+    jQuery("#modalCart .uabb-button-text")[0].innerText = createCartBtnText();
+    jQuery("#modalCartSum .uabb-heading-text")[0].textContent = createModalCartBtnText();
+}
+
+function createCartBtnText(): string {
+    const numTickets: number = config.state.selectedSeatsArr.length;
+
+    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.priceOverall}`;
+    else
+        return `Summe (0 Plätze) €0,00`;
+}
+
+export function showHideBtnCartLoading(inSwitch: string): void {
+    if (inSwitch === "show") {
+        jQuery("#modalCart .uabb-button").css("pointer-events", "none");
+        jQuery("#modalCart i").hide();
+        jQuery("#modalCart .uabb-button-text").addClass("dot-pulse");
+    }
+    else if (inSwitch === "hide") {
+        jQuery("#modalCart i").show();
+        jQuery("#modalCart .uabb-button-text").removeClass("dot-pulse");
+        jQuery("#modalCart .uabb-button").css("pointer-events", "all");
+    }
+}

client/src/modules/events.ts

@@ -5,6 +5,8 @@ import * as XMLHelper from "./xmlhelper";
 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";
 
 export function addCloseModal(): void {
     const btnCloseModal: HTMLElement | undefined = jQuery("#btnCloseModal").get(0);
@@ -30,13 +32,13 @@ export function addModalCart(): void {
     if (btnCart) {
         btnCart.addEventListener("click", () => {
             if (!config.state.selectedSeatsArr.length)
-                UI.showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`);
+                jBoxHelper.showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`);
             else if (config.state.cartChanged)
                 XMLHelper.isValidSeatSelection();
             else if (!config.state.cartChanged && config.state.isValidSeatSelection)
-                UI.showModalCart();
+                UI.fadeInCartModal();
             else if (!config.state.cartChanged && !config.state.isValidSeatSelection)
-                UI.showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
+                jBoxHelper.showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
         });
     }
 }
@@ -81,7 +83,7 @@ export function dropdownLegendOnChange(inSelector: string): void {
         const value: string = this.value;
         const className: string = `._${value}`;
 
-        UI.changeDropdownLegendBGColor(inSelector, value, className);
+        Legend.changeDropdownLegendBGColor(inSelector, value, className);
 
         if (value === "all") {
             seatmap.find('unavailable').status('available');
@@ -100,4 +102,14 @@ export function addCartDropdownBuyerTypes(inSelector: string, inSeatObj: I.JSCSe
     jQuery(inSelector).on('change', function (this: HTMLSelectElement) {
         Cart.changedDropdownBuyerType(this, inSeatObj);
     });
+}
+
+export function addOpenSeatmap() {
+    jQuery("#openSeatmap").on("click", () => {
+        if (!config.childHasVenueXML)
+            Communication.sendEventToChild("parent_init_venue");
+
+        jQuery('html, body').css('overflow', 'hidden');
+        jQuery("#dialogSeatmap").dialog('open');
+    });
 }

client/src/modules/jBoxHelper.ts

@@ -0,0 +1,44 @@
+import jBox from "jbox";
+import { config } from "./config";
+import * as XMLHelper from "./xmlhelper";
+
+export function showJBoxNotice(inContent: string, inAutoClose: number | boolean | undefined = 5000): void {
+    new jBox<"Notice"> ('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 createSeatTooltips(): void {
+    new jBox<"Tooltip"> ("Tooltip", {
+        attach: jQuery(".seatCharts-seat"),
+        onOpen: function (this: any) {
+            showSeatTooltip(this);
+        },
+    });
+}
+
+function showSeatTooltip(jBox: any): void {
+    const seatID: string = jBox.source[0].id;
+    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 tooltipContent: string = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
+
+    jBox.setContent(tooltipContent);
+}

client/src/modules/jsc.ts

@@ -2,7 +2,7 @@ import * as I from "../types/types";
 import { config } from "./config";
 import * as State from "./state";
 import * as Cart from "./cart";
-import * as UI from "./ui";
+import * as CartButtons from "./cartButtons";
 
 export function getSeats(): I.JSCSeats {
     const seatmapXML: any = config.state.seatmapXML;
@@ -242,7 +242,7 @@ function clickAvailableSeat(inSeatmap: any) {
 
     State.addSeatToState(selectedSeat);
     Cart.calcOverallPrice();
-    UI.setBtnCartText();
+    CartButtons.setBtnCartText();
 
     return "selected";
 }
@@ -251,7 +251,7 @@ function clickedSelectedSeat(inSeatmap: any) {
     const selectedSeat: I.JSCSelectedSeat = inSeatmap.settings;
     State.removeSeatFromState(selectedSeat);
     Cart.calcOverallPrice();
-    UI.setBtnCartText();
+    CartButtons.setBtnCartText();
 
     return "available";
 }

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

client/src/modules/panzoom.ts

@@ -0,0 +1,47 @@
+import Panzoom from '@panzoom/panzoom';
+import { PanzoomObject } from "@panzoom/panzoom/dist/src/types";
+import { config } from "./config";
+
+export function addPanzoom(inSelector: string, inBtnZoomIn: string | undefined = undefined, inBtnZoomOut: string | undefined = undefined, inBtnResetZoom: string | undefined = undefined): PanzoomObject | undefined {
+    const container: HTMLElement = jQuery(inSelector).get(0);
+
+    if (container) {
+        const panzoom: PanzoomObject = Panzoom(container, {
+            maxScale: 5,
+            animate: false,
+            overflow: "hidden",
+            startScale: "0.66"
+        });
+
+        addPanzoomEvents(inBtnZoomIn, inBtnZoomOut, inBtnResetZoom, container.parentElement!, panzoom);
+        return panzoom;
+    }
+
+    return undefined;
+}
+
+function addPanzoomEvents(inBtnZoomIn: string | undefined, inBtnZoomOut: string | undefined, inBtnResetZoom: string | undefined, containerParent: HTMLElement, panzoom: PanzoomObject): void {
+    const eventMapping = [
+        { Selector: inBtnZoomIn, PanzoomFunction: panzoom.zoomIn, Type: "Click" },
+        { Selector: inBtnZoomOut, PanzoomFunction: panzoom.zoomOut, Type: "Click" },
+        { Selector: inBtnResetZoom, PanzoomFunction: panzoom.reset, Type: "Click" },
+        { HTMLElement: containerParent, PanzoomFunction: panzoom.zoomWithWheel, Type: "wheel" }
+    ];
+
+    eventMapping.map(event => {
+        if (event.Selector) {
+            const btn: HTMLElement | undefined = jQuery(event.Selector).get(0);
+            if (btn)
+                btn.addEventListener(event.Type, event.PanzoomFunction);
+        }
+        else if (event.HTMLElement) {
+            if (event.Type === "wheel")
+                event.HTMLElement.addEventListener(event.Type, event.PanzoomFunction);
+        }
+    })
+}
+
+export function unbindPanzoomEvents(inSelector: string): void {
+    const container: HTMLElement = jQuery(inSelector).get(0);
+    container.parentElement?.removeEventListener('wheel', config.state.panzoom!.zoomWithWheel);
+}

client/src/modules/state.ts

@@ -2,6 +2,7 @@ import { config } from "./config";
 import * as I from "../types/types";
 import * as XMLHelper from "./xmlhelper";
 import * as UI from "./ui";
+import * as jBoxHelper from "./jBoxHelper";
 
 export function addSeatToState(inSelectedSeat: I.JSCSelectedSeat): void {
     addSeatObjToState(inSelectedSeat);
@@ -34,7 +35,7 @@ export function maximumSelectedSeatsReached(inSeatObj: I.JSCSelectedSeat): boole
     const seatmap: any = config.state.seatmap;
 
     if (config.state.selectedSeatsArr.length >= config.maxSelectedSeats) {
-        UI.showJBoxNotice(`Sie können maximal ${config.maxSelectedSeats} Plätze auswählen.`);
+        jBoxHelper.showJBoxNotice(`Sie können maximal ${config.maxSelectedSeats} Plätze auswählen.`);
         seatmap.status(inSeatObj.id, "available");
         return true;
     }

client/src/modules/ui.ts

@@ -1,16 +1,15 @@
 import * as I from "../types/types";
 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 Events from "./events";
-import * as XMLHelper from "./xmlhelper";
+import * as Panzoom from "./panzoom";
 
-export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string) {
+export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string): void {
     const seatmapDropdown: HTMLElement | null = document.getElementById(inId);
+
     if (seatmapDropdown) {
         for (let seatmapObj of inSeatmapListing) {
-            var opt = document.createElement('option');
+            var opt: HTMLOptionElement = document.createElement('option');
             opt.value = seatmapObj.id[0];
             opt.innerHTML = seatmapObj.desc[0];
             seatmapDropdown.appendChild(opt);
@@ -20,15 +19,20 @@ export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string) {
 
 export function setEventInfo(inEventInfo: I.EventInfo): void {
     const inputsWithValue = config.state.inputsWithValue!;
+
     jQuery("#eventInfoDesc span.fl-heading-text")[0].childNodes[0].textContent = inEventInfo.desc[0];
-    jQuery("#eventInfoDate p")[0].childNodes[0].textContent = inEventInfo.start[0];    
+    jQuery("#eventInfoDate p")[0].childNodes[0].textContent = inEventInfo.start[0];
     jQuery("#eventInfoLocation p")[0].childNodes[0].textContent = inputsWithValue.venueLocation;
     jQuery("#eventInfoCapacity p")[0].childNodes[0].textContent = `Verfügbare Plätze: ${inEventInfo.seats_available} von ${inEventInfo.venue_config_capacity[0]}`;
 }
 
 export function createDialog(): void {
-    jQuery("#dialogSeatmap").append($("<iframe id='iframeSeatmap' scrolling='no' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen width='100%' />")
+    const iframeHTML: string = "<iframe id='iframeSeatmap' scrolling='no' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen width='100%' />";
-        .attr("src", "https://staging.tickets.zinomedia.de/"))
+    const src: string = config.branch === "staging" ? config.urlSeatmapStaging : config.urlSeatmapMaster;
+
+    jQuery("#dialogSeatmap").append(
+        jQuery(iframeHTML)
+            .attr("src", src))
         .dialog({
             modal: true,
             autoOpen: false,
@@ -40,60 +44,15 @@ export function createDialog(): void {
             title: "",
             width: "100%",
             height: "auto",
-            close: () => jQuery("html, body").css("overflow", "auto"),  
+            close: () => jQuery("html, body").css("overflow", "auto"),
         });
 
-    jQuery("#openSeatmap").on("click", () => {
+    Events.addOpenSeatmap();
-        if (!config.childHasVenueXML)
-            Communication.sendEventToChild("parent_init_venue");
-
-        jQuery('html, body').css('overflow', 'hidden');
-        jQuery("#dialogSeatmap").dialog('open');
-    });
-}
-
-export function injectBookingBtn(): void {
-    jQuery(".flash_seat_map_box").remove();
-    jQuery('#flash_seat_map_box_id').css({
-        "display": "block",
-        "position": "relative",
-        "width": "100%"
-    });
-    jQuery("#flash_seat_map_box_id").append(`
-    <div class="row_space"></div>
-    <div class="row_space"></div>
-    <div id="containerBookingBtn">
-        <a class="continue" id="openSeatmap">
-            <span>Saalplanbuchung</span>
-        </a>
-        <div id="dialogSeatmap" hidden="hidden"></div>
-    </div>
-    `);
-}
-
-export function convertLegendToDropdown(inID: string) {
-    jQuery('ul.seatCharts-legendList').each(function() {
-        let select = jQuery(document.createElement('select')).insertBefore(jQuery(this).hide());
-        select.attr({ id: inID});
-        let option = jQuery('<option/>');            
-        option.attr({ 'value': 'all' }).text('Alle Preiskategorien');
-        option.css("color", "#5c5c5c");
-        select.append(option);
-        jQuery('>li', this).each(function() {
-            const className = jQuery(this)[0].children[0].classList[3];
-            const val = className.substring(1);
-            const text = (<HTMLElement>jQuery(this)[0].children[1]).innerText;
-            let option = jQuery('<option/>');
-            
-            option.attr({ 'value': val, 'class': className }).text(text);
-            select.append(option);             
-        });
-    });
 }
 
 export function destroyCurrentSeatmap(inSelector: string): void {
     if (config.state.panzoom)
-        unbindPanzoomEvents(inSelector);
+        Panzoom.unbindPanzoomEvents(inSelector);
 
     jQuery("#containerSeatmapInner").remove();
     jQuery("#htmlSeatmapInner .fl-html").removeAttr("style");
@@ -109,149 +68,14 @@ export function controlLoftloader(inSwitch: string) {
         jQuery("body").addClass("loaded loftloader-loaded");
 }
 
-function unbindPanzoomEvents(inSelector: string): void {
+export function changeVenueImage(): void {
-    console.log("unbinding now");
+    const inputsWithValue: I.InputsWithValue = config.state.inputsWithValue!;
-    const container: HTMLElement = jQuery(inSelector).get(0);    
-    container.parentElement?.removeEventListener('wheel', config.state.panzoom!.zoomWithWheel);
-}
 
-export function addPanzoom(inSelector: string, inBtnZoomIn: string | null = null, inBtnZoomOut: string | null = null, inBtnResetZoom: string | null = null): PanzoomObject | undefined {
-    const container: HTMLElement = jQuery(inSelector).get(0);
-    if (container) {
-        const panzoom: PanzoomObject = Panzoom(container, {
-            maxScale: 5,
-            animate: false,
-            overflow: "hidden",
-            startScale: "0.66"
-        });
-
-        container.parentElement!.addEventListener('wheel', panzoom.zoomWithWheel);
-
-        if (inBtnZoomIn) {
-            const btnZoomIn: HTMLElement | undefined = jQuery(inBtnZoomIn).get(0);
-            if (btnZoomIn)
-                btnZoomIn.addEventListener('click', panzoom.zoomIn);
-        }
-
-        if (inBtnZoomOut) {
-            const btnZoomOut: HTMLElement | undefined = jQuery(inBtnZoomOut).get(0);
-            if (btnZoomOut)
-                btnZoomOut.addEventListener('click', panzoom.zoomOut);
-        }
-
-        if (inBtnResetZoom) {
-            const btnResetZoom: HTMLElement | undefined = jQuery(inBtnResetZoom).get(0);
-            if (btnResetZoom)
-                btnResetZoom.addEventListener('click', panzoom.reset);
-        }
-
-        return panzoom;
-    }
-
-    return undefined;
-}
-
-export function changeVenueImage() {
-    const inputsWithValue = config.state.inputsWithValue!;
     if (inputsWithValue.venueImageSrc !== undefined)
         jQuery("#venueImage img").attr("src", inputsWithValue.venueImageSrc);
 }
 
-export function showHideBtnCartLoading(inSwitch: string) {
+export function fadeInCartModal(): void {
-    if (inSwitch === "show") {
-        jQuery("#modalCart .uabb-button").css("pointer-events", "none");
-        jQuery("#modalCart i").hide();
-        jQuery("#modalCart .uabb-button-text").addClass("dot-pulse");
-    }
-    else if (inSwitch === "hide") {
-        jQuery("#modalCart i").show();
-        jQuery("#modalCart .uabb-button-text").removeClass("dot-pulse");
-        jQuery("#modalCart .uabb-button").css("pointer-events", "all");
-    }
-    
-}
-
-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() {
-    new jBox("Tooltip", {
-        attach: jQuery(".seatCharts-seat"),
-        onOpen: function (this: any) {
-            showSeatTooltip(this);
-        },
-    });
-}
-
-function showSeatTooltip(jBox: any): 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(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/seatmap.ts

@@ -10,6 +10,10 @@ import * as Events from "./modules/events";
 require("jbox/dist/jBox.all.css");
 import * as Cart from "./modules/cart";
 import * as Trims from "./modules/trims";
+import * as Legend from "./modules/legend";
+import * as BookingBtn from "./modules/bookingButton";
+import * as Panzoom from "./modules/panzoom";
+import * as CartButtons from "./modules/cartButtons";
 
 // let inputsWithValue: I.InputsWithValue;
 // let seatmap: any;
@@ -29,7 +33,7 @@ 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(UI.showSeatmapBtnParent);
+    Utils.waitForSeatmap(BookingBtn.showSeatmapBtnParent);
 
     // Modal overlay for cart is not yet ready, wait for it, then initialize
     Utils.waitForElement("#modalCart-overlay", Cart.initModalCart);
@@ -119,11 +123,11 @@ function messageHandler(inE: any) {
             JSC.addSeatmap("#containerSeatmapInner", map, rowsNaming, seats, legend);
             JSC.setUnavailableSeats();
             JSC.selectSeatsInCart();
-            UI.convertLegendToDropdown("dropdownLegend");
+            Legend.convertLegendToDropdown("dropdownLegend");
             Events.dropdownLegendOnChange("#dropdownLegend");
             Trims.addTrims();
             XMLHelper.processSMAP();
-            config.state.panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
+            config.state.panzoom = Panzoom.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
             UI.controlLoftloader("hide");
             UI.createSeatTooltips();
 
@@ -137,15 +141,15 @@ function messageHandler(inE: any) {
 
             if (!config.state.isValidSeatSelection) {
                 UI.showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
-                UI.showHideBtnCartLoading("hide");
+                CartButtons.showHideBtnCartLoading("hide");
             }
             else {
                 Cart.removeCartItems();
                 Cart.generateCartItems();
                 const url = XMLHelper.generateCheckoutUrl();
                 Events.addRedirectCheckout(url);
-                UI.showModalCart();
+                UI.fadeInCartModal();
-                UI.showHideBtnCartLoading("hide");
+                CartButtons.showHideBtnCartLoading("hide");
             }
 
             config.state.cartChanged = false;