before config state
This commit is contained in:
zino
@@ -5,10 +5,11 @@ 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 Utils from "./modules/utils";
|
||||
import { PanzoomObject } from "@panzoom/panzoom";
|
||||
import jBox from 'jbox';
|
||||
require('jbox/dist/jBox.all.css');
|
||||
import jBox from "jbox";
|
||||
import * as Events from "./modules/events";
|
||||
require("jbox/dist/jBox.all.css");
|
||||
|
||||
let inputsWithValue: I.InputsWithValue;
|
||||
let seatmap: any;
|
||||
@@ -24,8 +25,111 @@ export let state: I.State = {
|
||||
isValidSeatSelection: false
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
// Inject JSC (jQuery Seat Charts) and 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");
|
||||
|
||||
function messagesHandler(inE: any) {
|
||||
// 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(showSeatmapBtnParent);
|
||||
|
||||
// Modal overlay for cart is not yet ready, wait for it, then initialize
|
||||
Utils.waitForElement("#modalCart-overlay", initModalCart);
|
||||
|
||||
Events.addCloseModal();
|
||||
//Events.addCart(inputsWithValue);
|
||||
Events.addDropdownSeatmap(panzoom);
|
||||
|
||||
const btnCart: HTMLElement | undefined = jQuery("#modalCart .uabb-button").get(0);
|
||||
if (btnCart) {
|
||||
btnCart.addEventListener("click", () => {
|
||||
if (!state.selectedSeatsArr.length)
|
||||
showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`);
|
||||
else if (state.cartChanged)
|
||||
isValidSeatSelection(inputsWithValue);
|
||||
else if (!state.cartChanged && state.isValidSeatSelection)
|
||||
UI.showModalCart();
|
||||
else if (!state.cartChanged && !state.isValidSeatSelection)
|
||||
showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
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,
|
||||
});
|
||||
}
|
||||
|
||||
function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) {
|
||||
jQuery("#modalCart-overlay").hide();
|
||||
|
||||
if (!state.selectedSeatsArr.length)
|
||||
return;
|
||||
|
||||
UI.showHideBtnCartLoading("show");
|
||||
|
||||
jQuery("#modalCart i").hide();
|
||||
jQuery("#modalCart .uabb-button-text").addClass("dot-pulse");
|
||||
|
||||
const url = generateCheckoutUrl(inInputsWithValue);
|
||||
|
||||
// const selectedSeatIndexes: string = generateSelectedSeatIndexes();
|
||||
// const url: string = `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue.user_context}&pid=${inputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`;
|
||||
|
||||
const message: I.Message = {
|
||||
message: {
|
||||
url: url,
|
||||
},
|
||||
from: "child",
|
||||
event: "child_needCheckoutResponse",
|
||||
date: Date.now()
|
||||
};
|
||||
Communication.sendMessage(message, "parent");
|
||||
}
|
||||
|
||||
function generateCheckoutUrl(inInputsWithValue: I.InputsWithValue): string | undefined {
|
||||
if (!state.selectedSeatsArr.length)
|
||||
return;
|
||||
else {
|
||||
const selectedSeatIndexes: string = generateSelectedSeatIndexes();
|
||||
return `${inInputsWithValue["ticketPurchaseUrl"]}?user_context=${inInputsWithValue.user_context}&pid=${inInputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`;
|
||||
}
|
||||
}
|
||||
|
||||
function generateSelectedSeatIndexes(): string {
|
||||
return (state.selectedSeatsArr.map(function (arr) {
|
||||
return arr.join(",");
|
||||
})).join("|");
|
||||
}
|
||||
|
||||
function showSeatmapBtnParent(): void {
|
||||
console.log("child completely ready");
|
||||
Communication.sendEventToParent("child_seatmap_ready");
|
||||
}
|
||||
|
||||
function messageHandler(inE: any) {
|
||||
if (typeof (inE.data) !== 'string')
|
||||
return;
|
||||
|
||||
@@ -94,6 +198,7 @@ function messagesHandler(inE: any) {
|
||||
|
||||
|
||||
new jBox("Tooltip", {
|
||||
attach: jQuery(".seatCharts-seat"),
|
||||
onOpen: function (this: any) {
|
||||
showSeatTooltip(this);
|
||||
},
|
||||
@@ -108,15 +213,15 @@ function messagesHandler(inE: any) {
|
||||
|
||||
if (!state.isValidSeatSelection) {
|
||||
showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
|
||||
showHideBtnCartLoading("hide");
|
||||
}
|
||||
UI.showHideBtnCartLoading("hide");
|
||||
}
|
||||
else {
|
||||
removeCartItems();
|
||||
generateCartItems();
|
||||
const url = generateCheckoutUrl();
|
||||
const url = generateCheckoutUrl(inputsWithValue);
|
||||
setCheckoutBtn(url);
|
||||
showModalCart();
|
||||
showHideBtnCartLoading("hide");
|
||||
UI.showModalCart();
|
||||
UI.showHideBtnCartLoading("hide");
|
||||
}
|
||||
|
||||
state.cartChanged = false;
|
||||
@@ -141,7 +246,7 @@ function processSMAP() {
|
||||
|
||||
function addTrims() {
|
||||
const trimArr: I.Trim[] = seatmapXML.seatmap[0].trims[0].trim;
|
||||
trimArr.forEach(arr => {
|
||||
trimArr.forEach(arr => {
|
||||
const [xTrim, yTrim] = arr.coord[0].split(",").map(Number);
|
||||
const textArr: string[] = arr.text[0].split(";").filter(Boolean);
|
||||
const x = xTrim / 20;
|
||||
@@ -174,7 +279,7 @@ function decodeAddTrims(textArr: string[], x: number, y: number) {
|
||||
const charCode = element.replace(/^\&\#/, "0");
|
||||
character = String.fromCharCode(parseInt(charCode, 16));
|
||||
}
|
||||
|
||||
|
||||
if (character)
|
||||
applyTrim(x, y, i, character);
|
||||
|
||||
@@ -183,10 +288,10 @@ function decodeAddTrims(textArr: string[], x: number, y: number) {
|
||||
}
|
||||
|
||||
function applyTrim(x: number, y: number, i: number, character: string) {
|
||||
if(!/[^a-zA-Z0-9äöüÄÖÜß$]/.test(character)) {
|
||||
if (!/[^a-zA-Z0-9äöüÄÖÜß$]/.test(character)) {
|
||||
const _x = (x - 1) + i;
|
||||
const _y = y - 1;
|
||||
console.log(`${character} -> ${_x} ${_y}`);
|
||||
const _y = y - 1;
|
||||
console.log(`${character} -> ${_x} ${_y}`);
|
||||
jQuery(".seatCharts-row")[_y].children[_x].innerHTML = `<span class="trimChar">${character}</span>`
|
||||
}
|
||||
}
|
||||
@@ -233,10 +338,7 @@ function setCheckoutBtn(inUrl: string | undefined) {
|
||||
}
|
||||
}
|
||||
|
||||
function showModalCart() {
|
||||
jQuery("#modalCart-overlay").fadeIn(300);
|
||||
Communication.sendEventToParent("child_hide_dialog_titlebar");
|
||||
}
|
||||
|
||||
|
||||
function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2Properties, pricescaleID: string, inVenueXML: I.VenueXML) {
|
||||
const venuePricescaleArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale;
|
||||
@@ -294,7 +396,7 @@ function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCS
|
||||
calcOverallPrice(inVenueXML);
|
||||
setBtnCartText();
|
||||
|
||||
const url = generateCheckoutUrl();
|
||||
const url = generateCheckoutUrl(inputsWithValue);
|
||||
console.log(url);
|
||||
setCheckoutBtn(url);
|
||||
|
||||
@@ -370,27 +472,6 @@ function selectSeatsInCart() {
|
||||
});
|
||||
}
|
||||
|
||||
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,
|
||||
});
|
||||
}
|
||||
|
||||
function generatePricescaleCSS(inVenueXML: I.VenueXML): string {
|
||||
const venuePricescalesArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale;
|
||||
let cssArr: string[] = [];
|
||||
@@ -433,7 +514,7 @@ function initModalCart() {
|
||||
}
|
||||
}
|
||||
|
||||
window.onresize = function() {
|
||||
window.onresize = function () {
|
||||
const innerHeight = window.innerHeight;
|
||||
if (innerHeight < 576) {
|
||||
console.log("small");
|
||||
@@ -446,53 +527,7 @@ window.onresize = function() {
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
Utils.inject(config.urlJSCStaging, "js", "head");
|
||||
Utils.inject(config.urlCSSJSCStaging, "css", "body");
|
||||
Utils.inject(config.urlCSSChildStaging, "css", "body");
|
||||
Utils.inject(config.urlCSSjQueryUI, "css", "body");
|
||||
Communication.listenToMessages(messagesHandler);
|
||||
Utils.waitForSeatmap(Communication.showBookingBtnParent);
|
||||
|
||||
Utils.waitForElement("#modalCart-overlay", initModalCart);
|
||||
// Utils.waitForElement("#modalCart-overlay", () => jQuery("#modalCart-overlay").hide());
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const btnCloseModal = jQuery("#btnCloseModal").get(0);
|
||||
|
||||
if (btnCloseModal) {
|
||||
btnCloseModal.addEventListener("click", function () {
|
||||
Communication.sendEventToParent("child_closeDialog");
|
||||
});
|
||||
}
|
||||
|
||||
const btnCart = jQuery("#modalCart .uabb-button").get(0);
|
||||
if (btnCart) {
|
||||
btnCart.addEventListener("click", function () {
|
||||
if (!state.selectedSeatsArr.length)
|
||||
showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`);
|
||||
else if (state.cartChanged)
|
||||
isValidSeatSelection();
|
||||
else if (!state.cartChanged && state.isValidSeatSelection)
|
||||
showModalCart();
|
||||
else if (!state.cartChanged && !state.isValidSeatSelection)
|
||||
showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
|
||||
});
|
||||
}
|
||||
|
||||
const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");
|
||||
if (dropdownSeatmap) {
|
||||
dropdownSeatmap.addEventListener("change", function (this: HTMLSelectElement) {
|
||||
UI.controlLoftloader("show");
|
||||
const value: string = this.value;
|
||||
UI.destroyCurrentSeatmap("#containerSeatmapInner", panzoom);
|
||||
Communication.needSeatmapXML(value);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function dropdownLegendOnChange(inSelector: string) {
|
||||
const dropdownLegend = jQuery(inSelector).get(0);
|
||||
@@ -564,62 +599,6 @@ function getBuyerTypeCodeByBuyerTypeID(inVenueXML: I.VenueXML, inBuyerTypeID: st
|
||||
})?.code[0];
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function isValidSeatSelection() {
|
||||
jQuery("#modalCart-overlay").hide();
|
||||
|
||||
if (!state.selectedSeatsArr.length)
|
||||
return;
|
||||
|
||||
showHideBtnCartLoading("show");
|
||||
|
||||
jQuery("#modalCart i").hide();
|
||||
jQuery("#modalCart .uabb-button-text").addClass("dot-pulse");
|
||||
|
||||
const url = generateCheckoutUrl();
|
||||
|
||||
// const selectedSeatIndexes: string = generateSelectedSeatIndexes();
|
||||
// const url: string = `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue.user_context}&pid=${inputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`;
|
||||
|
||||
const message: I.Message = {
|
||||
message: {
|
||||
url: url,
|
||||
},
|
||||
from: "child",
|
||||
event: "child_needCheckoutResponse",
|
||||
date: Date.now()
|
||||
};
|
||||
Communication.sendMessage(message, "parent");
|
||||
}
|
||||
|
||||
function generateCheckoutUrl(): string | undefined {
|
||||
if (!state.selectedSeatsArr.length)
|
||||
return;
|
||||
else {
|
||||
const selectedSeatIndexes: string = generateSelectedSeatIndexes();
|
||||
return `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue.user_context}&pid=${inputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`;
|
||||
}
|
||||
}
|
||||
|
||||
function generateSelectedSeatIndexes(): string {
|
||||
return (state.selectedSeatsArr.map(function (arr) {
|
||||
return arr.join(",");
|
||||
})).join("|");
|
||||
}
|
||||
|
||||
function getVenuePriceStructurePropertyByPricescaleID(inVenueXML: I.VenueXML, inID: string): I.Pricescale5 | undefined {
|
||||
const venuePricescaleArr: I.Pricescale5[] = inVenueXML.price_structure[0].pricescale;
|
||||
return venuePricescaleArr.find(obj => {
|
||||
|
||||
Reference in New Issue
Block a user