seatmapv2/client/src/seatmap.ts

import jQuery = require("jquery");
import * as XMLHelper from "./modules/xmlhelper";
import * as Communication from "./modules/communication";
import * as I from "./types/types";
import * as UI from "./modules/ui";
import * as JSC from "./modules/jsc";
import { config } from "./modules/config";
import Utils from "./modules/utils";
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";
import * as jBoxHelper from "./modules/jBoxHelper";

window.addEventListener('load', () => {
    // Inject JSC (jQuery Seat Charts)
    // Inject CSS for JSC, child and jQuery dialog
    Utils.inject(config.urlJSCStaging, "js", "head");
    Utils.inject(config.urlCSSJSCStaging, "css", "body");
    Utils.inject(config.urlCSSChildStaging, "css", "body");
    Utils.inject(config.urlCSSjQueryUI, "css", "body");

    // Start message handler to be able to receive messages from parent
    Communication.listenToMessages(messageHandler);

    // Div with ID "containerSeatmap" is not yet ready, wait for it, then display seatmap button on trxstate 20
    Utils.waitForSeatmap(BookingBtn.showSeatmapBtnParent);

    // Modal overlay for cart is not yet ready, wait for it, then initialize
    Utils.waitForElement("#modalCart-overlay", Cart.initModalCart);

    // Add event listeners
    Events.addCloseModal();
    Events.addModalCart();
    Events.addDropdownSeatmap();

});

// Hide header when height of window is smaller than ...
// Note: Cannot determine width of inner iframe, therefore need to use window.innerHeight
window.onresize = function () {
    const panzoom = config.state.panzoom;
    const innerHeight = window.innerHeight;

    if (innerHeight < 576) {
        console.log("small");
        jQuery("#containerEventInfoRow").hide();
        panzoom?.reset();
    }
    else if (innerHeight >= 576) {
        jQuery("#containerEventInfoRow").show();
        panzoom?.reset();
    }
}

function messageHandler(inE: any) {
    if (typeof (inE.data) !== 'string')
        return;

    const data: I.Message = JSON.parse(inE.data);

    console.log(`child: received from ${data.from}`);
    console.log(data);

    switch (data.event) {

        case "parent_init_venue": {
            UI.controlLoftloader("show");
            Communication.sendEventToParent("child_init_needInputsWithValue");
            break;
        }

        case "parent_init_sendVenueXML": {
            config.state.inVenueXML = data.message.map_response;
            const venueXML = config.state.inVenueXML!;

            // Generate pricescale css classes
            const css = XMLHelper.generatePricescaleCSS();
            Utils.inject(css, "cssCustom", "body");

            // Fill event info
            const eventInfo = XMLHelper.getEventInfo();
            UI.setEventInfo(eventInfo);

            // Fill select dropdown
            const seatmapListing: I.Seatmap[] = venueXML.seatmap_config[0].seatmap;        
            UI.setOptionSelect(seatmapListing, "dropdownSeatmap");

            // Display first seatmapXML
            const id: string = seatmapListing[0].id[0];
            jQuery("#dropdownSeatmap").val(id);
            Communication.needSeatmapXML(id);

            console.log(css);
            console.log(seatmapListing);

            break;
        }

        case "parent_init_sendInputsWithValue": {
            config.state.inputsWithValue = data.message;
            UI.changeVenueImage();
            Communication.sendEventToParent("child_init_needVenueXML");
            break;
        }

        case "parent_sendSeatmapXML": {
            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");

            JSC.addSeatmap("#containerSeatmapInner", map, rowsNaming, seats, legend);
            JSC.setUnavailableSeats();
            JSC.selectSeatsInCart();
            Legend.convertLegendToDropdown("dropdownLegend");
            Events.dropdownLegendOnChange("#dropdownLegend");
            Trims.addTrims();
            XMLHelper.processSMAP();
            config.state.panzoom = Panzoom.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
            UI.controlLoftloader("hide");
            jBoxHelper.createSeatTooltips();

            break;
        }

        case "parent_sendCheckoutResponse": {            
            config.state.isValidSeatSelection = data.message.isValidSeatSelection;

            console.log(data.message);

            if (!config.state.isValidSeatSelection) {
                jBoxHelper.showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
                CartButtons.showHideBtnCartLoading("hide");
            }
            else {
                Cart.removeCartItems();
                Cart.generateCartItems();
                const url = XMLHelper.generateCheckoutUrl();
                Events.addRedirectCheckout(url);
                UI.fadeInCartModal();
                CartButtons.showHideBtnCartLoading("hide");
            }

            config.state.cartChanged = false;
            break;
        }

        default:
            break;
    }
}