zino/seatmapv2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

before remove getcolumnsnaming

Browse Source
This commit is contained in:
zino
2021-05-15 22:57:15 +02:00
parent 51e78042b5
commit 39aa73b034
10 changed files with 138 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
client/src/modules/cart.ts
View File

@@ -4,21 +4,21 @@ 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);
export function addItem(inSeatObj: I.JSCSelectedSeat) {
const color = `#${XMLHelper.getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0])}`;
const category = XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0]);
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 sectionDesc = XMLHelper.getSectionDescBySectionID(sectionID);
const seatStr = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
const buyerTypes: (string | undefined)[][] | undefined = getBuyerTypesByPricescaleID(inSeatObj.data.seatsObj.id[0], inVenueXML);
const buyerTypes: (string | undefined)[][] | undefined = getBuyerTypesByPricescaleID(inSeatObj.data.seatsObj.id[0]);
const cartId = `cartItem-${inSeatObj.id}`;
const dropdownBuyerTypesSelector = `#${cartId} .dropdownBuyerTypes`;
appendHTML(cartId, color, category, seatStr);
addDropdownBuyerTypesOptions(buyerTypes, dropdownBuyerTypesSelector);
Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj, inVenueXML, inInputsWithValue);
Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj);
}
function appendHTML(inCartId: string, inColor: string, inCategory: string | undefined, inSeatStr: string) {
@@ -49,15 +49,9 @@ function addDropdownBuyerTypesOptions(inBuyerTypes: (string | undefined)[][] | u
});
}
// 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;
function getBuyerTypesByPricescaleID(inPricescaleID: string) {
const venueXML = config.state.inVenueXML!;
const venuePricescaleArr = venueXML.price_structure[0].pricescale;
const buyerTypesArr = venuePricescaleArr.find(obj => {
return obj.id[0] === inPricescaleID;
})?.buyer_type;
@@ -66,7 +60,7 @@ function getBuyerTypesByPricescaleID(inPricescaleID: string, inVenueXML: I.Venue
return;
const buyerTypes: (string | undefined)[][] = buyerTypesArr.map(arr => {
const buyerTypeDesc = inVenueXML.venue[0].buyer_types[0].buyer_type.find(obj => {
const buyerTypeDesc = venueXML.venue[0].buyer_types[0].buyer_type.find(obj => {
return obj.id[0] === arr.id[0] ? obj.desc[0] : undefined;
})?.desc[0];
@@ -82,29 +76,29 @@ export function removeCartItems() {
});
}
export function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
export function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat) {
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);
const buyerTypeCode = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inSelect.value);
if (buyerTypeCode)
config.state.selectedSeatsArr[index][2] = buyerTypeCode;
calcOverallPrice(inVenueXML);
calcOverallPrice();
UI.setBtnCartText();
const url = XMLHelper.generateCheckoutUrl(inInputsWithValue);
const url = XMLHelper.generateCheckoutUrl();
console.log(url);
Events.addRedirectCheckout(url);
console.log(config.state);
}
export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined {
export function calcOverallPrice(): string | undefined {
if (!config.state.selectedSeatsArr.length) {
config.state.priceOverall = "0";
return "0";
@@ -117,7 +111,7 @@ export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined {
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);
const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(pricescaleID);
if (!pricescaleObj)
return;
@@ -135,14 +129,14 @@ export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined {
return config.state.priceOverall;
}
export function generateCartItems(inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
export function generateCartItems() {
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);
addItem(element);
}
}
}

11
client/src/modules/communication.ts
View File

@@ -68,17 +68,6 @@ export function needSeatmapXML(inID: string) {
sendMessage(message, "parent");
}
// export function showSeatmapBtnParent(): void {
// console.log("child completely ready");
// const message: I.Message = {
// message: null,
// from: "child",
// event: "child_seatmap_ready",
// date: Date.now()
// };
// sendMessage(message, "parent");
// }
export function cancelCheckout(inUrl: string) {
// use fetch instead of axios because of 302 redirect
// see https://github.com/axios/axios/issues/932

7
client/src/modules/config.ts
View File

@@ -22,6 +22,11 @@ export const config: I.Config = {
selectedSeatsArr: [],
selectedSeatsObj: {},
layoutRows: {},
isValidSeatSelection: false
isValidSeatSelection: false,
inputsWithValue: undefined,
seatmap: undefined,
panzoom: undefined,
inVenueXML: undefined,
seatmapXML: undefined,
}
}

22
client/src/modules/events.ts
View File

@@ -23,14 +23,14 @@ export function addDropdownSeatmap(inPanzoom: any) {
}
}
export function addModalCart(inInputsWithValue: I.InputsWithValue) {
export function addModalCart() {
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);
XMLHelper.isValidSeatSelection();
else if (!config.state.cartChanged && config.state.isValidSeatSelection)
UI.showModalCart();
else if (!config.state.cartChanged && !config.state.isValidSeatSelection)
@@ -77,7 +77,9 @@ export function addCartBack() {
}
}
export function dropdownLegendOnChange(inSelector: string, inSeatmap: any, inSeatmapXML: any) {
export function dropdownLegendOnChange(inSelector: string) {
const seatmap = config.state.seatmap;
const seatmapXML = config.state.seatmapXML;
const dropdownLegend = jQuery(inSelector).get(0);
dropdownLegend.addEventListener("change", function (this: HTMLSelectElement) {
const value: string = this.value;
@@ -86,20 +88,20 @@ export function dropdownLegendOnChange(inSelector: string, inSeatmap: any, inSea
UI.changeDropdownLegendBGColor(inSelector, value, className);
if (value === "all") {
inSeatmap.find('unavailable').status('available');
JSC.setUnavailableSeats(inSeatmapXML, inSeatmap);
seatmap.find('unavailable').status('available');
JSC.setUnavailableSeats(seatmapXML, seatmap);
}
else {
inSeatmap.find('available').status('unavailable');
JSC.activateSeatsBySectionID(inSeatmapXML, inSeatmap, value);
JSC.setUnavailableSeats(inSeatmapXML, inSeatmap);
seatmap.find('available').status('unavailable');
JSC.activateSeatsBySectionID(value);
JSC.setUnavailableSeats(seatmapXML, seatmap);
}
});
}
export function addCartDropdownBuyerTypes(inSelector: string, inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
export function addCartDropdownBuyerTypes(inSelector: string, inSeatObj: I.JSCSelectedSeat) {
jQuery(inSelector).on('change', function (this: HTMLSelectElement) {
Cart.changedDropdownBuyerType(this, inSeatObj, inVenueXML, inInputsWithValue);
Cart.changedDropdownBuyerType(this, inSeatObj);
});
}

33
client/src/modules/jsc.ts
View File

@@ -4,8 +4,9 @@ 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;
export function getSeats(): I.JSCSeats {
const seatmapXML = config.state.seatmapXML;
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
let object: any = {};
for (let key in pricescaleArr) {
@@ -22,8 +23,10 @@ export function getSeats(inXML: any): I.JSCSeats {
return seatmapInitSeats;
}
export function activateSeatsBySectionID(inXML: any, seatmap: any, inValue: string,) {
const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale;
export function activateSeatsBySectionID(inValue: string) {
const seatmapXML = config.state.seatmapXML;
const seatmap = config.state.seatmap;
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
pricescaleArr.forEach(element => {
if (element.id[0] === inValue) {
@@ -33,8 +36,9 @@ export function activateSeatsBySectionID(inXML: any, seatmap: any, inValue: stri
});
}
export function getRowsNaming(inXML: any): string[] {
const layout: I.SeatmapLayout = inXML.seatmap[0].layouts[0].layout[0];
export function getRowsNaming(): string[] {
const seatmapXML = config.state.seatmapXML;
const layout: I.SeatmapLayout = seatmapXML.seatmap[0].layouts[0].layout[0];
const height: number = parseInt(layout.height[0]);
// return Array.from({ length: height }, (_, i: number) => i + 1);
const namingArr = Array.from({ length: height }, (_) => "");
@@ -111,11 +115,12 @@ export function getRowsNaming(inXML: any): string[] {
// return namingArr;
// }
export function generateMap(inXML: any): string[] {
const layout: I.SeatmapLayout = inXML.seatmap[0].layouts[0].layout[0];
export function generateMap(): string[] {
const seatmapXML = config.state.seatmapXML;
const layout: I.SeatmapLayout = seatmapXML.seatmap[0].layouts[0].layout[0];
const rows: I.LayoutRow2[] = layout.rows[0].row;
const pricescaleArr: I.SeatmapPricescale[] = inXML.seatmap[0].pricescale_config[0].pricescale;
const availabilityArr: I.JSCAvailability = inXML.seatmap[0].view_modes[0].view_mode[0].availability[0];
const pricescaleArr: I.SeatmapPricescale[] = seatmapXML.seatmap[0].pricescale_config[0].pricescale;
const availabilityArr: I.JSCAvailability = seatmapXML.seatmap[0].view_modes[0].view_mode[0].availability[0];
// Form: arrMatrix[Y][X]
let arrMatrix: string[][] = createArrMatrix(parseInt(layout.height[0]), parseInt(layout.width[0]), "_");
@@ -310,7 +315,7 @@ export function selectSeatsInCart(inSeatmap: any) {
});
}
export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: string[], inSeats: I.JSCSeats, inLegend: I.JSCLegend, inSeatmap: any, inVenueXML: I.VenueXML): void {
export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: string[], inSeats: I.JSCSeats, inLegend: I.JSCLegend, inSeatmap: any): void {
const containerSeatmap: any = (<any>window).jQuery(inSelector);
// console.log(inSeatmapInitMap);
@@ -335,8 +340,8 @@ export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: st
if (State.maximumSelectedSeatsReached(selectedSeat, inSeatmap))
return "available";
State.addSeatToState(inVenueXML, selectedSeat);
Cart.calcOverallPrice(inVenueXML);
State.addSeatToState(selectedSeat);
Cart.calcOverallPrice();
UI.setBtnCartText();
return "selected";
@@ -345,7 +350,7 @@ export function addSeatmap(inSelector: string, inMap: string[], inRowsNaming: st
const selectedSeat: I.JSCSelectedSeat = this.settings;
State.removeSeatFromState(selectedSeat);
Cart.calcOverallPrice(inVenueXML);
Cart.calcOverallPrice();
UI.setBtnCartText();
console.log(config.state.selectedSeatsArr);

6
client/src/modules/state.ts
View File

@@ -3,7 +3,7 @@ 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) {
export function addSeatToState(inSelectedSeat: I.JSCSelectedSeat) {
const seatID: string = inSelectedSeat.id;
const seatObj: I.StateJSCSelectedSeats = {
[seatID]: inSelectedSeat
@@ -12,7 +12,7 @@ export function addSeatToState(inVenueXML: I.VenueXML, inSelectedSeat: I.JSCSele
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);
const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(pricescaleID);
console.log(pricescaleObj);
if (!pricescaleObj) {
@@ -23,7 +23,7 @@ export function addSeatToState(inVenueXML: I.VenueXML, inSelectedSeat: I.JSCSele
// 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);
const buyerTypeCode: string | undefined = XMLHelper.getBuyerTypeCodeByBuyerTypeID(firstBuyerTypeID);
if (buyerTypeCode) {
config.state.selectedSeatsArr.push([seatID, firstBuyerTypeID, buyerTypeCode]);

8
client/src/modules/ui.ts
View File

@@ -200,21 +200,21 @@ export function showSeatmapBtnParent(): void {
Communication.sendEventToParent("child_seatmap_ready");
}
export function createSeatTooltips(inVenueXML: I.VenueXML) {
export function createSeatTooltips() {
new jBox("Tooltip", {
attach: jQuery(".seatCharts-seat"),
onOpen: function (this: any) {
showSeatTooltip(this, inVenueXML);
showSeatTooltip(this);
},
});
}
function showSeatTooltip(jBox: any, inVenueXML: I.VenueXML): void {
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(inVenueXML, sectionID);
const sectionDesc = XMLHelper.getSectionDescBySectionID(sectionID);
const tooltipContent = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
jBox.setContent(tooltipContent);

62
client/src/modules/xmlhelper.ts
View File

@@ -30,15 +30,12 @@ export function getXMLPromise(url: string): Promise<unknown> {
})
}
export function getSeatmapListing(inVenueXML: I.VenueXML): I.Seatmap[] {
return inVenueXML.seatmap_config[0].seatmap;
}
export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo {
const sectionArr = inVenueXML.master_config[0].section_inventory[0].section;
const eventObj: I.Event = inVenueXML.event[0];
const event = inVenueXML.event[0];
const venue_config = inVenueXML.venue_config[0];
export function getEventInfo(): I.EventInfo {
const venueXML = config.state.inVenueXML!;
const sectionArr = venueXML.master_config[0].section_inventory[0].section;
const eventObj: I.Event = venueXML.event[0];
const event = venueXML.event[0];
const venue_config = venueXML.venue_config[0];
const dateObj: Date = new Date(parseInt(event.year[0]), parseInt(event.month[0])-1, parseInt(event.day[0]), parseInt(event.hour[0]), parseInt(event.minute[0]));
const start: string[] = [ dateObj.toLocaleString(["de-DE"], { weekday: "long", day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", timeZoneName: "short" }) ];
const weekday = [ Utils.getDayName(dateObj, "de-DE") ];
@@ -63,9 +60,10 @@ export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo {
return eventInfo;
}
export function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) {
export function isValidSeatSelection() {
const inputsWithValue = config.state.inputsWithValue!;
console.log("checking seat selection");
console.log(inInputsWithValue);
console.log(inputsWithValue);
jQuery("#modalCart-overlay").hide();
if (!config.state.selectedSeatsArr.length)
@@ -76,7 +74,7 @@ export function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) {
jQuery("#modalCart i").hide();
jQuery("#modalCart .uabb-button-text").addClass("dot-pulse");
const url = generateCheckoutUrl(inInputsWithValue);
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`;
@@ -92,13 +90,15 @@ export function isValidSeatSelection(inInputsWithValue: I.InputsWithValue) {
Communication.sendMessage(message, "parent");
}
export function generateCheckoutUrl(inInputsWithValue: I.InputsWithValue): string | undefined {
console.log(inInputsWithValue);
export function generateCheckoutUrl(): string | undefined {
const inputsWithValue = config.state.inputsWithValue!;
console.log(inputsWithValue);
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`;
return `${inputsWithValue["ticketPurchaseUrl"]}?user_context=${inputsWithValue.user_context}&pid=${inputsWithValue["pid"]}&selected_seat_indexes=${selectedSeatIndexes}&trxstate=148`;
}
}
@@ -108,8 +108,9 @@ function generateSelectedSeatIndexes(): string {
})).join("|");
}
export function getSectionDescBySectionID(inVenueXML: I.VenueXML, sectionID: string): string | undefined {
const sectionArr = inVenueXML.master_config[0].section_config[0].section;
export function getSectionDescBySectionID(sectionID: string): string | undefined {
const venueXML = config.state.inVenueXML!;
const sectionArr = venueXML.master_config[0].section_config[0].section;
const sectionDesc = sectionArr.find(arr => {
return sectionID === arr.id[0];
@@ -118,18 +119,20 @@ export function getSectionDescBySectionID(inVenueXML: I.VenueXML, sectionID: str
return sectionDesc;
}
export function processSMAP(inInputsWithValue: I.InputsWithValue) {
if (!inInputsWithValue.smap)
export function processSMAP() {
const inputsWithValue = config.state.inputsWithValue!;
if (!inputsWithValue.smap)
return;
const smapArr = inInputsWithValue.smap.split("").map(Number);
const smapArr = inputsWithValue.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;
export function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2Properties, pricescaleID: string) {
const venueXML = config.state.inVenueXML!;
const venuePricescaleArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale;
return venuePricescaleArr.find(obj => {
if (obj.id[0] === pricescaleID)
@@ -139,8 +142,9 @@ export function getVenuePricescalePropertyByPricescaleID(property: I.Pricescale2
})?.[property][0];
}
export function getBuyerTypeCodeByBuyerTypeID(inVenueXML: I.VenueXML, inBuyerTypeID: string): string | undefined {
const venueBuyerTypeArr = inVenueXML.venue[0].buyer_types[0].buyer_type;
export function getBuyerTypeCodeByBuyerTypeID(inBuyerTypeID: string): string | undefined {
const venueXML = config.state.inVenueXML!;
const venueBuyerTypeArr = venueXML.venue[0].buyer_types[0].buyer_type;
return venueBuyerTypeArr.find(arr => {
return inBuyerTypeID === arr.id[0];
})?.code[0];
@@ -157,15 +161,17 @@ export function getPriceByBuyertypeID(inBuyertypeID: string, inPricescaleObj: I.
return undefined;
}
export function getVenuePriceStructurePropertyByPricescaleID(inVenueXML: I.VenueXML, inID: string): I.Pricescale5 | undefined {
const venuePricescaleArr: I.Pricescale5[] = inVenueXML.price_structure[0].pricescale;
export function getVenuePriceStructurePropertyByPricescaleID(inID: string): I.Pricescale5 | undefined {
const venueXML = config.state.inVenueXML!;
const venuePricescaleArr: I.Pricescale5[] = venueXML.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;
export function generatePricescaleCSS(): string {
const venueXML = config.state.inVenueXML!;
const venuePricescalesArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale;
let cssArr: string[] = [];
venuePricescalesArr.forEach(element => {

63
client/src/seatmap.ts
View File

@@ -6,16 +6,15 @@ import * as UI from "./modules/ui";
import * as JSC from "./modules/jsc";
import { config } from "./modules/config";
import Utils from "./modules/utils";
import { PanzoomObject } from "@panzoom/panzoom";
import * as Events from "./modules/events";
require("jbox/dist/jBox.all.css");
import * as Cart from "./modules/cart";
let inputsWithValue: I.InputsWithValue;
let seatmap: any;
let panzoom: PanzoomObject | undefined;
let inVenueXML: I.VenueXML;
let seatmapXML: any;
// let inputsWithValue: I.InputsWithValue;
// let seatmap: any;
// let panzoom: PanzoomObject | undefined;
// let inVenueXML: I.VenueXML;
// let seatmapXML: any;
window.addEventListener('load', () => {
// Inject JSC (jQuery Seat Charts)
@@ -36,15 +35,17 @@ window.addEventListener('load', () => {
// Add event listeners
Events.addCloseModal();
Events.addModalCart(inputsWithValue);
Events.addDropdownSeatmap(panzoom);
Events.addModalCart();
Events.addDropdownSeatmap(config.state.panzoom);
});
// Hide header when height of window is smaller than ...
// Note: Cannot determine width of inner iframe, therefore need to use window.innerHeight
window.onresize = function () {
const panzoom = config.state.panzoom;
const innerHeight = window.innerHeight;
if (innerHeight < 576) {
console.log("small");
jQuery("#containerEventInfoRow").hide();
@@ -74,18 +75,20 @@ function messageHandler(inE: any) {
}
case "parent_init_sendVenueXML": {
inVenueXML = data.message.map_response;
config.state.inVenueXML = data.message.map_response;
const venueXML = config.state.inVenueXML!;
const inputsWithValue = config.state.inputsWithValue!;
// Generate pricescale css classes
const css = XMLHelper.generatePricescaleCSS(inVenueXML);
const css = XMLHelper.generatePricescaleCSS();
Utils.inject(css, "cssCustom", "body");
// Fill event info
const eventInfo = XMLHelper.getEventInfo(inVenueXML);
const eventInfo = XMLHelper.getEventInfo();
UI.setEventInfo(eventInfo, inputsWithValue);
// Fill select dropdown
const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(inVenueXML);
const seatmapListing: I.Seatmap[] = venueXML.seatmap_config[0].seatmap;
UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
// Display first seatmapXML
@@ -100,29 +103,34 @@ function messageHandler(inE: any) {
}
case "parent_init_sendInputsWithValue": {
inputsWithValue = data.message;
UI.changeVenueImage(inputsWithValue);
config.state.inputsWithValue = data.message;
const inputsWithValue = config.state.inputsWithValue!;
UI.changeVenueImage(inputsWithValue!);
Communication.sendEventToParent("child_init_needVenueXML");
break;
}
case "parent_sendSeatmapXML": {
seatmapXML = data.message.map_response;
const map: string[] = JSC.generateMap(seatmapXML);
const rowsNaming: string[] = JSC.getRowsNaming(seatmapXML);
const seats: I.JSCSeats = JSC.getSeats(seatmapXML);
const legend: I.JSCLegend = JSC.generateLegend(inVenueXML, seatmapXML, "#JSCLegendInner");
config.state.seatmapXML = data.message.map_response;
const seatmapXML = config.state.seatmapXML;
const venueXML = config.state.inVenueXML!;
const seatmap = config.state.seatmap;
const map: string[] = JSC.generateMap();
const rowsNaming: string[] = JSC.getRowsNaming();
const seats: I.JSCSeats = JSC.getSeats();
const legend: I.JSCLegend = JSC.generateLegend(venueXML, seatmapXML, "#JSCLegendInner");
JSC.addSeatmap("#containerSeatmapInner", map, rowsNaming, seats, legend, seatmap, inVenueXML);
JSC.addSeatmap("#containerSeatmapInner", map, rowsNaming, seats, legend, seatmap);
JSC.setUnavailableSeats(seatmapXML, seatmap);
JSC.selectSeatsInCart(seatmap);
UI.convertLegendToDropdown("dropdownLegend");
Events.dropdownLegendOnChange("#dropdownLegend", seatmap, seatmapXML);
Events.dropdownLegendOnChange("#dropdownLegend");
JSC.addTrims(seatmapXML);
XMLHelper.processSMAP(inputsWithValue);
panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
XMLHelper.processSMAP();
config.state.panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
UI.controlLoftloader("hide");
UI.createSeatTooltips(inVenueXML);
UI.createSeatTooltips();
break;
}
@@ -138,12 +146,9 @@ function messageHandler(inE: any) {
}
else {
Cart.removeCartItems();
Cart.generateCartItems(inVenueXML, inputsWithValue);
console.log(inputsWithValue);
const url = XMLHelper.generateCheckoutUrl(inputsWithValue);
Cart.generateCartItems();
const url = XMLHelper.generateCheckoutUrl();
Events.addRedirectCheckout(url);
UI.showModalCart();
UI.showHideBtnCartLoading("hide");
}

9
client/src/types/types.d.ts vendored
View File

@@ -1,3 +1,5 @@
import { PanzoomObject } from "@panzoom/panzoom";
export interface Trim {
coord: string[];
enabled: string[];
@@ -15,7 +17,12 @@ export interface State {
selectedSeatsArr: string[][];
selectedSeatsObj: StateJSCSelectedSeats;
layoutRows: layoutRows;
isValidSeatSelection: boolean;
isValidSeatSelection: boolean;
seatmap: any;
seatmapXML: any;
panzoom: PanzoomObject | undefined;
inVenueXML: VenueXML | undefined;
inputsWithValue: InputsWithValue | undefined;
}
interface layoutRows {