revised ui
This commit is contained in:
@@ -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/
|
||||
|
||||
33
client/src/modules/bookingButton.ts
Normal file
33
client/src/modules/bookingButton.ts
Normal file
@@ -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%"
|
||||
});
|
||||
}
|
||||
37
client/src/modules/cartButtons.ts
Normal file
37
client/src/modules/cartButtons.ts
Normal file
@@ -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");
|
||||
}
|
||||
}
|
||||
@@ -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');
|
||||
});
|
||||
}
|
||||
44
client/src/modules/jBoxHelper.ts
Normal file
44
client/src/modules/jBoxHelper.ts
Normal file
@@ -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);
|
||||
}
|
||||
@@ -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";
|
||||
}
|
||||
49
client/src/modules/legend.ts
Normal file
49
client/src/modules/legend.ts
Normal file
@@ -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);
|
||||
}
|
||||
47
client/src/modules/panzoom.ts
Normal file
47
client/src/modules/panzoom.ts
Normal file
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 XMLHelper from "./xmlhelper";
|
||||
import * as Events from "./events";
|
||||
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%' />")
|
||||
.attr("src", "https://staging.tickets.zinomedia.de/"))
|
||||
const iframeHTML: string = "<iframe id='iframeSeatmap' scrolling='no' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen width='100%' />";
|
||||
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", () => {
|
||||
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);
|
||||
});
|
||||
});
|
||||
Events.addOpenSeatmap();
|
||||
}
|
||||
|
||||
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 {
|
||||
console.log("unbinding now");
|
||||
const container: HTMLElement = jQuery(inSelector).get(0);
|
||||
container.parentElement?.removeEventListener('wheel', config.state.panzoom!.zoomWithWheel);
|
||||
}
|
||||
export function changeVenueImage(): void {
|
||||
const inputsWithValue: I.InputsWithValue = config.state.inputsWithValue!;
|
||||
|
||||
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) {
|
||||
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() {
|
||||
export function fadeInCartModal(): void {
|
||||
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);
|
||||
}
|
||||
@@ -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.showHideBtnCartLoading("hide");
|
||||
UI.fadeInCartModal();
|
||||
CartButtons.showHideBtnCartLoading("hide");
|
||||
}
|
||||
|
||||
config.state.cartChanged = false;
|
||||
|
||||
Reference in New Issue
Block a user