before state inputswithvalue

client/src/modules/ui.ts

@@ -3,7 +3,8 @@ 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 XMLHelper from "./xmlhelper";
 
 export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string) {
     const seatmapDropdown: HTMLElement | null = document.getElementById(inId);
@@ -171,4 +172,84 @@ export function showHideBtnCartLoading(inSwitch: string) {
 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(inVenueXML: I.VenueXML) {
+    new jBox("Tooltip", {
+        attach: jQuery(".seatCharts-seat"),
+        onOpen: function (this: any) {
+            showSeatTooltip(this, inVenueXML);
+        },
+    });
+}
+
+function showSeatTooltip(jBox: any, inVenueXML: I.VenueXML): 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(inVenueXML, 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);
 }