diff --git a/client/src/inject.ts b/client/src/inject.ts index 34b3d97..a6d9e0a 100644 --- a/client/src/inject.ts +++ b/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/ diff --git a/client/src/modules/bookingButton.ts b/client/src/modules/bookingButton.ts new file mode 100644 index 0000000..791835a --- /dev/null +++ b/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(` +
+
+
+ + Saalplanbuchung + + +
+ `); +} + +function changeBookingBtnCSS(): void { + jQuery('#flash_seat_map_box_id').css({ + "display": "block", + "position": "relative", + "width": "100%" + }); +} \ No newline at end of file diff --git a/client/src/modules/cartButtons.ts b/client/src/modules/cartButtons.ts new file mode 100644 index 0000000..fd42188 --- /dev/null +++ b/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"); + } +} \ No newline at end of file diff --git a/client/src/modules/events.ts b/client/src/modules/events.ts index f2ec458..66068b1 100644 --- a/client/src/modules/events.ts +++ b/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'); + }); } \ No newline at end of file diff --git a/client/src/modules/jBoxHelper.ts b/client/src/modules/jBoxHelper.ts new file mode 100644 index 0000000..bcccea2 --- /dev/null +++ b/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}
Reihe ${row} Platz ${seat}`; + + jBox.setContent(tooltipContent); +} \ No newline at end of file diff --git a/client/src/modules/jsc.ts b/client/src/modules/jsc.ts index ee02340..739c9e7 100644 --- a/client/src/modules/jsc.ts +++ b/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"; } \ No newline at end of file diff --git a/client/src/modules/legend.ts b/client/src/modules/legend.ts new file mode 100644 index 0000000..0b1b1d5 --- /dev/null +++ b/client/src/modules/legend.ts @@ -0,0 +1,49 @@ +export function convertLegendToDropdown(inID: string): void { + jQuery('ul.seatCharts-legendList').each(function () { + let select: JQuery = jQuery(document.createElement('select')) + .insertBefore( + jQuery(this).hide() + ); + + select.attr({ id: inID }); + appendFirstLegendOption(select); + appendLegendOptions(this, select); + }); +} + +function appendLegendOptions(element: HTMLElement, inSelect: JQuery) { + jQuery('>li', element).each(function () { + const className: string = jQuery(this)[0].children[0].classList[3]; + const val: string = className.substring(1); + const text: string = (jQuery(this)[0].children[1]).innerText; + + appendLegendOption(inSelect, className, val, text); + }); +} + +function appendLegendOption(inSelect: JQuery, className: string, val: string, text: string): void { + let option: JQuery = jQuery('