before state inputswithvalue
This commit is contained in:
zino
154
client/src/modules/cart.ts
Normal file
154
client/src/modules/cart.ts
Normal file
@@ -0,0 +1,154 @@
|
||||
import * as XMLHelper from "./xmlhelper";
|
||||
import { config } from "./config";
|
||||
import * as I from "../types/types";
|
||||
import * as UI from "./ui";
|
||||
import * as Events from "./events";
|
||||
|
||||
export function addItem(inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
|
||||
const color = `#${XMLHelper.getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0], inVenueXML)}`;
|
||||
const category = XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0], inVenueXML);
|
||||
const seat = config.state.layoutRows[inSeatObj.id][5];
|
||||
const row = config.state.layoutRows[inSeatObj.id][4];
|
||||
const sectionID = config.state.layoutRows[inSeatObj.id][3];
|
||||
const sectionDesc = XMLHelper.getSectionDescBySectionID(inVenueXML, sectionID);
|
||||
const seatStr = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
|
||||
const buyerTypes: (string | undefined)[][] | undefined = getBuyerTypesByPricescaleID(inSeatObj.data.seatsObj.id[0], inVenueXML);
|
||||
const cartId = `cartItem-${inSeatObj.id}`;
|
||||
const dropdownBuyerTypesSelector = `#${cartId} .dropdownBuyerTypes`;
|
||||
|
||||
appendHTML(cartId, color, category, seatStr);
|
||||
addDropdownBuyerTypesOptions(buyerTypes, dropdownBuyerTypesSelector);
|
||||
Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj, inVenueXML, inInputsWithValue);
|
||||
}
|
||||
|
||||
function appendHTML(inCartId: string, inColor: string, inCategory: string | undefined, inSeatStr: string) {
|
||||
jQuery("#cartItemHTML .fl-html").append(`
|
||||
<div class="cartItem" id="${inCartId}">
|
||||
<div class="cartItemColoredSquare" style="background: ${inColor};"></div>
|
||||
<div class="cartItemCategory">${inCategory}</div>
|
||||
<h5 class="cartItemSeat">${inSeatStr}</h5>
|
||||
<select name="dropdownBuyerTypes" class="dropdownBuyerTypes"></select>
|
||||
</div>`);
|
||||
}
|
||||
|
||||
// todo: generalize dropdown fill options
|
||||
function addDropdownBuyerTypesOptions(inBuyerTypes: (string | undefined)[][] | undefined, inSelector: string) {
|
||||
if (!inBuyerTypes)
|
||||
return;
|
||||
|
||||
const dropdownBuyerTypes = jQuery(inSelector).get(0);
|
||||
|
||||
inBuyerTypes.forEach(arr => {
|
||||
if (!arr[0])
|
||||
return;
|
||||
|
||||
let opt = document.createElement('option');
|
||||
opt.value = arr[0];
|
||||
opt.innerHTML = `${arr[2]} €${arr[1]}`;
|
||||
dropdownBuyerTypes.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// function appendOptionDropdownBuyerTypesOptions() {
|
||||
// let opt = document.createElement('option');
|
||||
// opt.value = arr[0];
|
||||
// opt.innerHTML = `${arr[2]} €${arr[1]}`;
|
||||
// dropdownBuyerTypes.appendChild(opt);
|
||||
// }
|
||||
|
||||
function getBuyerTypesByPricescaleID(inPricescaleID: string, inVenueXML: I.VenueXML) {
|
||||
const venuePricescaleArr = inVenueXML.price_structure[0].pricescale;
|
||||
const buyerTypesArr = venuePricescaleArr.find(obj => {
|
||||
return obj.id[0] === inPricescaleID;
|
||||
})?.buyer_type;
|
||||
|
||||
if (!buyerTypesArr)
|
||||
return;
|
||||
|
||||
const buyerTypes: (string | undefined)[][] = buyerTypesArr.map(arr => {
|
||||
const buyerTypeDesc = inVenueXML.venue[0].buyer_types[0].buyer_type.find(obj => {
|
||||
return obj.id[0] === arr.id[0] ? obj.desc[0] : undefined;
|
||||
})?.desc[0];
|
||||
|
||||
return [arr.id[0], arr.price[0], buyerTypeDesc];
|
||||
});
|
||||
|
||||
return buyerTypes;
|
||||
}
|
||||
|
||||
export function removeCartItems() {
|
||||
jQuery("#cartItemHTML .cartItem").each(function () {
|
||||
this.remove();
|
||||
});
|
||||
}
|
||||
|
||||
export function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
|
||||
const index = config.state.selectedSeatsArr.findIndex(arr => {
|
||||
return arr[0] === inSeatObj.id;
|
||||
});
|
||||
|
||||
config.state.selectedSeatsArr[index][1] = inSelect.value;
|
||||
|
||||
const buyerTypeCode = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inVenueXML, inSelect.value);
|
||||
|
||||
if (buyerTypeCode)
|
||||
config.state.selectedSeatsArr[index][2] = buyerTypeCode;
|
||||
|
||||
calcOverallPrice(inVenueXML);
|
||||
UI.setBtnCartText();
|
||||
|
||||
const url = XMLHelper.generateCheckoutUrl(inInputsWithValue);
|
||||
console.log(url);
|
||||
Events.addRedirectCheckout(url);
|
||||
|
||||
console.log(config.state);
|
||||
}
|
||||
|
||||
export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined {
|
||||
if (!config.state.selectedSeatsArr.length) {
|
||||
config.state.priceOverall = "0";
|
||||
return "0";
|
||||
}
|
||||
|
||||
let overallPrice: number = 0;
|
||||
|
||||
config.state.selectedSeatsArr.forEach(arr => {
|
||||
const seatID: string = arr[0];
|
||||
const buyertypeID: string = arr[1];
|
||||
const selectedSeat: I.JSCSelectedSeat = config.state.selectedSeatsObj[seatID];
|
||||
const pricescaleID: string = selectedSeat.data.seatsObj.id[0];
|
||||
const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(inVenueXML, pricescaleID);
|
||||
|
||||
if (!pricescaleObj)
|
||||
return;
|
||||
|
||||
const seatPrice: number | undefined = XMLHelper.getPriceByBuyertypeID(buyertypeID, pricescaleObj);
|
||||
|
||||
if (!seatPrice)
|
||||
return;
|
||||
|
||||
overallPrice += seatPrice;
|
||||
});
|
||||
|
||||
config.state.priceOverall = overallPrice.toFixed(2);
|
||||
|
||||
return config.state.priceOverall;
|
||||
}
|
||||
|
||||
export function generateCartItems(inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
|
||||
if (!config.state.selectedSeatsArr.length)
|
||||
return;
|
||||
|
||||
for (const key in config.state.selectedSeatsObj) {
|
||||
if (Object.prototype.hasOwnProperty.call(config.state.selectedSeatsObj, key)) {
|
||||
const element = config.state.selectedSeatsObj[key];
|
||||
addItem(element, inVenueXML, inInputsWithValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function initModalCart() {
|
||||
jQuery("#modalCart-overlay").hide();
|
||||
Events.addCartBack();
|
||||
Events.addCartClose();
|
||||
}
|
||||
@@ -1,5 +1,10 @@
|
||||
import * as Communication from "./communication";
|
||||
import * as UI from "./ui";
|
||||
import { config } from "./config";
|
||||
import * as XMLHelper from "./xmlhelper";
|
||||
import * as I from "../types/types";
|
||||
import * as JSC from "./jsc";
|
||||
import * as Cart from "./cart";
|
||||
|
||||
export function addCloseModal() {
|
||||
const btnCloseModal: HTMLElement | undefined = jQuery("#btnCloseModal").get(0);
|
||||
@@ -17,3 +22,84 @@ export function addDropdownSeatmap(inPanzoom: any) {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function addModalCart(inInputsWithValue: I.InputsWithValue) {
|
||||
const btnCart: HTMLElement | undefined = jQuery("#modalCart .uabb-button").get(0);
|
||||
if (btnCart) {
|
||||
btnCart.addEventListener("click", () => {
|
||||
if (!config.state.selectedSeatsArr.length)
|
||||
UI.showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`);
|
||||
else if (config.state.cartChanged)
|
||||
XMLHelper.isValidSeatSelection(inInputsWithValue);
|
||||
else if (!config.state.cartChanged && config.state.isValidSeatSelection)
|
||||
UI.showModalCart();
|
||||
else if (!config.state.cartChanged && !config.state.isValidSeatSelection)
|
||||
UI.showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function addRedirectCheckout(inUrl: string | undefined) {
|
||||
if (!inUrl)
|
||||
return;
|
||||
|
||||
const btnCheckout = jQuery("#modalCart-overlay #checkout .fl-button").get(0);
|
||||
if (btnCheckout) {
|
||||
btnCheckout.addEventListener("click", function () {
|
||||
const message: I.Message = {
|
||||
message: {
|
||||
url: inUrl,
|
||||
},
|
||||
from: "child",
|
||||
event: "child_click_checkout",
|
||||
date: Date.now()
|
||||
};
|
||||
Communication.sendMessage(message, "parent");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function addCartClose() {
|
||||
const btnClose = jQuery("#modalCart-overlay .uabb-close-icon").get(0);
|
||||
if (btnClose) {
|
||||
btnClose.addEventListener("click", function () {
|
||||
Communication.sendEventToParent("child_show_dialog_titlebar");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function addCartBack() {
|
||||
const btnBack = jQuery("#modalCart-overlay #goBack .fl-button").get(0);
|
||||
if (btnBack) {
|
||||
btnBack.addEventListener("click", function () {
|
||||
jQuery("#modalCart-overlay .uabb-close-icon").trigger("click");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function dropdownLegendOnChange(inSelector: string, inSeatmap: any, inSeatmapXML: any) {
|
||||
const dropdownLegend = jQuery(inSelector).get(0);
|
||||
dropdownLegend.addEventListener("change", function (this: HTMLSelectElement) {
|
||||
const value: string = this.value;
|
||||
const className: string = `._${value}`;
|
||||
|
||||
UI.changeDropdownLegendBGColor(inSelector, value, className);
|
||||
|
||||
if (value === "all") {
|
||||
inSeatmap.find('unavailable').status('available');
|
||||
JSC.setUnavailableSeats(inSeatmapXML, inSeatmap);
|
||||
}
|
||||
else {
|
||||
inSeatmap.find('available').status('unavailable');
|
||||
JSC.activateSeatsBySectionID(inSeatmapXML, inSeatmap, value);
|
||||
JSC.setUnavailableSeats(inSeatmapXML, inSeatmap);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
export function addCartDropdownBuyerTypes(inSelector: string, inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
|
||||
jQuery(inSelector).on('change', function (this: HTMLSelectElement) {
|
||||
Cart.changedDropdownBuyerType(this, inSeatObj, inVenueXML, inInputsWithValue);
|
||||
});
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
import * as I from "../types/types";
|
||||
import { state } from "../seatmap";
|
||||
import { config } from "./config";
|
||||
import * as State from "./state";
|
||||
import * as Cart from "./cart";
|
||||
import * as UI from "./ui";
|
||||
|
||||
export function getSeats(inXML: any): I.JSCSeats {
|
||||
const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale;
|
||||
@@ -205,7 +208,7 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP
|
||||
inArrMatrix[Y][X] = generateSeatStr(seatsKey, seatArr);
|
||||
|
||||
// save seatArr in state with seatID as key
|
||||
state.layoutRows[seatArr[0]] = seatArr;
|
||||
config.state.layoutRows[seatArr[0]] = seatArr;
|
||||
});
|
||||
});
|
||||
|
||||
@@ -244,4 +247,116 @@ export function createArrMatrix(inNumrows: number, inNumcols: number, inInitial:
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
export function addTrims(inSeatmapXML: any) {
|
||||
const trimArr: I.Trim[] = inSeatmapXML.seatmap[0].trims[0].trim;
|
||||
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;
|
||||
const y = Math.round(yTrim / 21.25);
|
||||
|
||||
console.log(`xTrim: ${xTrim} yTrim: ${yTrim} -> x: ${x} y: ${y}`);
|
||||
|
||||
decodeAddTrims(textArr, x, y);
|
||||
});
|
||||
}
|
||||
|
||||
function decodeAddTrims(textArr: string[], x: number, y: number) {
|
||||
let i = 0;
|
||||
const specialChar = new Map([
|
||||
["Ž", "Ä"],
|
||||
["™", "Ö"],
|
||||
["š", "Ü"],
|
||||
["„", "ä"],
|
||||
["”", "ö"],
|
||||
["", "ü"],
|
||||
["á", "ß"]
|
||||
]);
|
||||
|
||||
textArr.forEach(element => {
|
||||
let character;
|
||||
|
||||
if (specialChar.has(element))
|
||||
character = specialChar.get(element);
|
||||
else {
|
||||
const charCode = element.replace(/^\&\#/, "0");
|
||||
character = String.fromCharCode(parseInt(charCode, 16));
|
||||
}
|
||||
|
||||
if (character)
|
||||
applyTrim(x, y, i, character);
|
||||
|
||||
i++;
|
||||
});
|
||||
}
|
||||
|
||||
function applyTrim(x: number, y: number, i: number, character: string) {
|
||||
if (!/[^a-zA-Z0-9äöüÄÖÜß$]/.test(character)) {
|
||||
const _x = (x - 1) + i;
|
||||
const _y = y - 1;
|
||||
console.log(`${character} -> ${_x} ${_y}`);
|
||||
jQuery(".seatCharts-row")[_y].children[_x].innerHTML = `<span class="trimChar">${character}</span>`
|
||||
}
|
||||
}
|
||||
|
||||
export function selectSeatsInCart(inSeatmap: any) {
|
||||
config.state.selectedSeatsArr.forEach(arr => {
|
||||
const seatID: string = arr[0];
|
||||
|
||||
if (inSeatmap.get(seatID))
|
||||
inSeatmap.status(seatID, "selected");
|
||||
});
|
||||
}
|
||||
|
||||
export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: string[], inSeats: I.JSCSeats, inLegend: I.JSCLegend, inSeatmap: any, inVenueXML: I.VenueXML): void {
|
||||
const containerSeatmap: any = (<any>window).jQuery(inSelector);
|
||||
|
||||
// console.log(inSeatmapInitMap);
|
||||
// console.log(inSeats);
|
||||
// console.log(inLegend);
|
||||
|
||||
inSeatmap = containerSeatmap.seatCharts({
|
||||
naming: {
|
||||
top: false,
|
||||
left: false,
|
||||
rows: inRowsNaming,
|
||||
},
|
||||
map: inMap,
|
||||
seats: inSeats,
|
||||
legend: inLegend,
|
||||
click: function () {
|
||||
if (this.status() == 'available') {
|
||||
const selectedSeat: I.JSCSelectedSeat = this.settings;
|
||||
|
||||
console.log(selectedSeat);
|
||||
|
||||
if (State.maximumSelectedSeatsReached(selectedSeat, inSeatmap))
|
||||
return "available";
|
||||
|
||||
State.addSeatToState(inVenueXML, selectedSeat);
|
||||
Cart.calcOverallPrice(inVenueXML);
|
||||
UI.setBtnCartText();
|
||||
|
||||
return "selected";
|
||||
}
|
||||
else if (this.status() === "selected") {
|
||||
const selectedSeat: I.JSCSelectedSeat = this.settings;
|
||||
|
||||
State.removeSeatFromState(selectedSeat);
|
||||
Cart.calcOverallPrice(inVenueXML);
|
||||
UI.setBtnCartText();
|
||||
console.log(config.state.selectedSeatsArr);
|
||||
|
||||
return "available";
|
||||
}
|
||||
else if (this.status() == 'unavailable') {
|
||||
return "unavailable";
|
||||
}
|
||||
else {
|
||||
return this.style();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
55
client/src/modules/state.ts
Normal file
55
client/src/modules/state.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import { config } from "./config";
|
||||
import * as I from "../types/types";
|
||||
import * as XMLHelper from "./xmlhelper";
|
||||
import * as UI from "./ui";
|
||||
|
||||
export function addSeatToState(inVenueXML: I.VenueXML, inSelectedSeat: I.JSCSelectedSeat) {
|
||||
const seatID: string = inSelectedSeat.id;
|
||||
const seatObj: I.StateJSCSelectedSeats = {
|
||||
[seatID]: inSelectedSeat
|
||||
}
|
||||
|
||||
config.state.selectedSeatsObj = { ...config.state.selectedSeatsObj, ...seatObj };
|
||||
|
||||
const pricescaleID: string = config.state.selectedSeatsObj[seatID].data.seatsObj.id[0];
|
||||
const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(inVenueXML, pricescaleID);
|
||||
console.log(pricescaleObj);
|
||||
|
||||
if (!pricescaleObj) {
|
||||
console.warn(`Cannot find corresponding venueXML pricescaleObj for pricescale with ID ${pricescaleID}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// get id and code of first buyer type
|
||||
const firstBuyerTypeID: string = pricescaleObj.buyer_type[0].id[0];
|
||||
// const firstPriceStructureCode: string = inVenueXML.price_structure[0].code[0]; // todo: code of first price_structure always correct? what about multiple schablonen?
|
||||
const buyerTypeCode: string | undefined = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inVenueXML, firstBuyerTypeID);
|
||||
|
||||
if (buyerTypeCode) {
|
||||
config.state.selectedSeatsArr.push([seatID, firstBuyerTypeID, buyerTypeCode]);
|
||||
config.state.cartChanged = true;
|
||||
}
|
||||
}
|
||||
|
||||
export function removeSeatFromState(inSelectedSeat: I.JSCSelectedSeat) {
|
||||
const seatID: string = inSelectedSeat.id;
|
||||
delete config.state.selectedSeatsObj[seatID];
|
||||
const index = config.state.selectedSeatsArr.findIndex(arr => {
|
||||
return arr[0] === inSelectedSeat.id;
|
||||
});
|
||||
config.state.selectedSeatsArr.splice(index, 1);
|
||||
config.state.cartChanged = true;
|
||||
|
||||
if (!config.state.selectedSeatsArr.length)
|
||||
jQuery("#modalCart-overlay").hide();
|
||||
}
|
||||
|
||||
export function maximumSelectedSeatsReached(inSeatObj: I.JSCSelectedSeat, inSeatmap: any): boolean {
|
||||
if (config.state.selectedSeatsArr.length >= config.maxSelectedSeats) {
|
||||
UI.showJBoxNotice(`Sie können maximal ${config.maxSelectedSeats} Plätze auswählen.`);
|
||||
inSeatmap.status(inSeatObj.id, "available");
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -2,7 +2,10 @@ import axios, { AxiosResponse } from 'axios';
|
||||
var xml2jsParser = require('xml2js').parseString;
|
||||
import * as I from "../types/types";
|
||||
import Utils from './utils';
|
||||
//import { state } from "../seatmap";
|
||||
import * as UI from "./ui";
|
||||
import { config } from "./config";
|
||||
import * as Communication from "./communication";
|
||||
|
||||
|
||||
export function getXMLPromise(url: string): Promise<unknown> {
|
||||
return axios.get(url)
|
||||
@@ -60,3 +63,116 @@ export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo {
|
||||
return eventInfo;
|
||||
}
|
||||
|
||||
export function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) {
|
||||
console.log("checking seat selection");
|
||||
console.log(inInputsWithValue);
|
||||
jQuery("#modalCart-overlay").hide();
|
||||
|
||||
if (!config.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");
|
||||
}
|
||||
|
||||
export function generateCheckoutUrl(inInputsWithValue: I.InputsWithValue): string | undefined {
|
||||
console.log(inInputsWithValue);
|
||||
if (!config.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 (config.state.selectedSeatsArr.map(function (arr) {
|
||||
return arr.join(",");
|
||||
})).join("|");
|
||||
}
|
||||
|
||||
export function getSectionDescBySectionID(inVenueXML: I.VenueXML, sectionID: string): string | undefined {
|
||||
const sectionArr = inVenueXML.master_config[0].section_config[0].section;
|
||||
|
||||
const sectionDesc = sectionArr.find(arr => {
|
||||
return sectionID === arr.id[0];
|
||||
})?.desc[0];
|
||||
|
||||
return sectionDesc;
|
||||
}
|
||||
|
||||
export function processSMAP(inInputsWithValue: I.InputsWithValue) {
|
||||
if (!inInputsWithValue.smap)
|
||||
return;
|
||||
|
||||
const smapArr = inInputsWithValue.smap.split("").map(Number);
|
||||
|
||||
if (!smapArr[0])
|
||||
jQuery("#eventInfoCapacity").hide();
|
||||
}
|
||||
|
||||
export function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2Properties, pricescaleID: string, inVenueXML: I.VenueXML) {
|
||||
const venuePricescaleArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale;
|
||||
|
||||
return venuePricescaleArr.find(obj => {
|
||||
if (obj.id[0] === pricescaleID)
|
||||
return obj;
|
||||
|
||||
return undefined;
|
||||
})?.[property][0];
|
||||
}
|
||||
|
||||
export function getBuyerTypeCodeByBuyerTypeID(inVenueXML: I.VenueXML, inBuyerTypeID: string): string | undefined {
|
||||
const venueBuyerTypeArr = inVenueXML.venue[0].buyer_types[0].buyer_type;
|
||||
return venueBuyerTypeArr.find(arr => {
|
||||
return inBuyerTypeID === arr.id[0];
|
||||
})?.code[0];
|
||||
}
|
||||
|
||||
export function getPriceByBuyertypeID(inBuyertypeID: string, inPricescaleObj: I.Pricescale5) {
|
||||
const price = inPricescaleObj?.buyer_type.find(arr => {
|
||||
return arr.id[0] === inBuyertypeID;
|
||||
})?.price[0];
|
||||
|
||||
if (price)
|
||||
return parseFloat(price);
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export function getVenuePriceStructurePropertyByPricescaleID(inVenueXML: I.VenueXML, inID: string): I.Pricescale5 | undefined {
|
||||
const venuePricescaleArr: I.Pricescale5[] = inVenueXML.price_structure[0].pricescale;
|
||||
return venuePricescaleArr.find(obj => {
|
||||
return obj.id[0] === inID;
|
||||
});
|
||||
}
|
||||
|
||||
export function generatePricescaleCSS(inVenueXML: I.VenueXML): string {
|
||||
const venuePricescalesArr: I.Pricescale2[] = inVenueXML.venue[0].pricescales[0].pricescale;
|
||||
let cssArr: string[] = [];
|
||||
|
||||
venuePricescalesArr.forEach(element => {
|
||||
const ID: string = element.id[0];
|
||||
let color: string = `#${element.color[0]} !important`; // Update: Colors are always defined: fallback colors exist in system so every XML provides them
|
||||
cssArr.push(`._${ID} { background-color: ${color}; }`);
|
||||
});
|
||||
|
||||
return (cssArr.join("\r\n"));
|
||||
}
|
||||
Reference in New Issue
Block a user