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

new trim system, capacity available added

Browse Source
This commit is contained in:
zino
2021-04-29 19:07:36 +02:00
parent a22728a802
commit 62b7b22f4c
5 changed files with 67 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -176,7 +176,7 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP
inRows.forEach(element => {
const row: I.LayoutRow2 = element;
const Y: number = parseInt(row.y_cell_coord[0]);
const Y: number = parseInt(row.y_cell_coord[0]) - 1;
const seatsArr: string[] = row.seats[0].split("|");
seatsArr.forEach(element => {
@@ -198,7 +198,7 @@ function enterSeatsInMatrix(inRows: I.LayoutRow2[], inArrMatrix: string[][], inP
return;
// const X: number = parseInt(seatArr[5]);
const X: number = parseInt(seatArr[2]);
const X: number = parseInt(seatArr[2]) - 1;
const seatsKey = getSeatsKey(seatArr[0], inPricescaleArr);
if (seatsKey)

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

@@ -18,9 +18,9 @@ export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string) {
export function setEventInfo(inEventInfo: I.EventInfo, inInputswithValue: I.InputsWithValue): void {
jQuery("#eventInfoDesc span.fl-heading-text")[0].childNodes[0].textContent = inEventInfo.desc[0];
jQuery("#eventInfoDate p")[0].childNodes[0].textContent = inEventInfo.start[0];
jQuery("#eventInfoCapacity p")[0].childNodes[0].textContent = inEventInfo.venue_config_capacity[0];
jQuery("#eventInfoDate p")[0].childNodes[0].textContent = inEventInfo.start[0];
jQuery("#eventInfoLocation p")[0].childNodes[0].textContent = inInputswithValue.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 {

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

@@ -31,12 +31,15 @@ export function getSeatmapListing(inVenueXML: I.VenueXML): I.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];
const dateObj: Date = new Date(parseInt(event.year[0]), parseInt(event.month[0])-1, 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") ];
const seats_available = sectionArr.map(item => parseInt(item.available[0])).reduce((prev, curr) => prev + curr);
const eventExtend: I.EventExtend = {
venue_config_capacity: venue_config.capacity,
@@ -48,6 +51,7 @@ export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo {
venue_config_nav_image_width: venue_config.nav_image_width,
start: start,
weekday: weekday,
seats_available: seats_available,
};
let eventInfo: I.EventInfo = { ...eventObj, ...eventExtend };

182
client/src/seatmap.ts
View File

@@ -20,15 +20,8 @@ export let state: I.State = {
cartChanged: false,
selectedSeatsArr: [],
selectedSeatsObj: {},
layoutRows: {}
}
function getTrimCoord(arr: I.Trim) {
let [xTrim, yTrim] = arr.coord[0].split(",").map(Number);
xTrim -= 20;
yTrim -= 21;
return [xTrim, yTrim];
layoutRows: {},
isValidSeatSelection: false
}
function messagesHandler(inE: any) {
@@ -79,7 +72,6 @@ function messagesHandler(inE: any) {
seatmapXML = data.message.map_response;
const map: string[] = JSC.generateMap(seatmapXML);
const rowsNaming: string[] = JSC.getRowsNaming(seatmapXML);
// const columnNaming: string[] = JSC.getColumnNaming(seatmapXML);
const seats: I.JSCSeats = JSC.getSeats(seatmapXML);
const legend: I.JSCLegend = JSC.generateLegend(inVenueXML, seatmapXML, "#JSCLegendInner");
@@ -92,7 +84,7 @@ function messagesHandler(inE: any) {
// jQuery("#containerSeatmapInner").append('<div id="foobarDiv" style="position: absolute; top: 8vw;">foobar</div>');
processTrims();
addTrims();
panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
UI.controlLoftloader("hide");
@@ -112,17 +104,19 @@ function messagesHandler(inE: any) {
}
case "parent_sendCheckoutResponse": {
console.log(data.message);
const inIsValidSeatSelection: boolean = data.message.isValidSeatSelection;
state.isValidSeatSelection = data.message.isValidSeatSelection;
if (!inIsValidSeatSelection)
if (!state.isValidSeatSelection) {
showJBoxNotice(`Auswahl nicht möglich: Bitte lassen Sie keinen einzelnen Platz frei.`);
showHideBtnCartLoading("hide");
}
else {
removeCartItems();
generateCartItems();
const url = generateCheckoutUrl();
setCheckoutBtn(url);
showModalCart();
console.log(state);
showHideBtnCartLoading("hide");
}
state.cartChanged = false;
@@ -135,103 +129,39 @@ function messagesHandler(inE: any) {
}
}
function processTrims() {
// Create sum of the height of every .seatCharts-row to get total height of seatmap
const heightTotal = calcHeightTotal();
// Height of a single .seatCharts-row
const heightPerRow = heightTotal / jQuery(".seatCharts-row").length;
// Maximum width of one seatCharts-row is the width we need
// Attention: Maximum width of #containerSeatmapInner is bigger than seatCharts-row, therefore use width of seatCharts-row
const totalWidth = jQuery(".seatCharts-row")[0].getBoundingClientRect().width;
const widthPerSeat = totalWidth / jQuery(".seatCharts-row")[0].childElementCount;
// const containerSeatmapInnerRect: DOMRect = jQuery("#containerSeatmapInner")[0].getBoundingClientRect();
// console.log(containerSeatmapInnerRect);
// const viewWidthQuotient = 100 / containerSeatmapInnerRect.width;
// Width: Calculate quotient to convert pixel (px) to viewwidth (vw) later
// 1px = (100vw / [document.documentElement.clientWidth] px)
// e.g. — If your viewport was 500px wide (equals by definition to 100vw) then
// 1px = (100vw / 500px) = 0.2vw
const viewWidthQuotient = 100 / totalWidth;
// const widthQuotient = widthTotal/1580;
// const widthQuotient = containerSeatmapInnerRect.width / 1580;
// Width: Quotient is later used to convert PVO trim x coord to absolute x-coord in browser
// Max-width of trim coord system is 1600 with offset of 20
// 1600 - 20 = 1580
const widthQuotient = totalWidth / 1580;
// Height: Quotient is later used to convert PVO trim y coord to absolute y-coord in browser
// Max-height of trim coord system is 425 with offset of 21
// 425 - 20 = 405
const heightQuotient = heightTotal / 405;
console.log(`heightTotal: ${heightTotal} heightPerRow: ${heightPerRow} heightQuotient: ${heightQuotient} totalWidth: ${totalWidth} widthPerSeat: ${widthPerSeat} widthQuotient: ${widthQuotient}`);
function addTrims() {
const trimArr: I.Trim[] = seatmapXML.seatmap[0].trims[0].trim;
trimArr.forEach(arr => {
const text: string = getTrimText(arr);
const [xTrim, yTrim] = getTrimCoord(arr);
const [leftVw, topPx] = calcTrimPos(xTrim, yTrim, heightPerRow, widthQuotient, heightQuotient, viewWidthQuotient, widthPerSeat);
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(`${text} -> x: ${xTrim} y: ${yTrim} -> x: ${leftVw} y: ${topPx}px`);
console.log(`xTrim: ${xTrim} yTrim: ${yTrim} -> x: ${x} y: ${y}`);
createTrim(leftVw, topPx, text);
decodeAddTrims(textArr, x, y);
});
}
function calcHeightTotal(): number {
let heightTotal = 0;
jQuery(".seatCharts-row").each(function () {
const domRect: DOMRect = this.getBoundingClientRect();
console.log(domRect);
heightTotal += domRect.height;
});
function decodeAddTrims(textArr: string[], x: number, y: number) {
let i = 0;
return heightTotal;
}
function createTrim(inLeft: number, inTop: number, inText: string) {
jQuery("#containerSeatmapInner").append(`
<div class="trimText" style="position: absolute; left: ${inLeft}px; top: ${inTop}px;">
${inText}
</div>`);
}
function calcTrimPos(xTrim: number, yTrim: number, heightPerRow: number, widthQuotient: number, heightQuotient: number, viewWidthQuotient: number, widthPerSeat: number) {
let leftPx = Math.round(xTrim * widthQuotient);
// const leftVw = parseInt((leftPx * viewWidthQuotient).toFixed(3));
console.log(viewWidthQuotient);
let topPx = Math.round(yTrim * heightQuotient);
// if (topPx > heightPerRow)
// topPx -= heightPerRow;
console.log(heightPerRow);
// if (leftPx > widthPerSeat)
// leftPx -= widthPerSeat;
console.log(widthPerSeat);
// return [leftVw, topPx];
return [leftPx, topPx];
}
function getTrimText(arr: I.Trim): string {
const textArr: string[] = arr.text[0].split(";").filter(Boolean);
return textArr.map(element => {
textArr.forEach(element => {
const charCode = element.replace(/^\&\#/, "0");
return String.fromCharCode(parseInt(charCode, 16));
}).join("");
const character = String.fromCharCode(parseInt(charCode, 16));
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>`
}
i++;
});
}
function showSeatTooltip(jBox: any): void {
const seatID: string = jBox.source[0].id;
const seat = state.layoutRows[seatID][5];
@@ -301,17 +231,6 @@ function addCartItem(inSeatObj: I.JSCSelectedSeat) {
const cartId = `cartItem-${inSeatObj.id}`;
const dropdownBuyerTypesSelector = `#${cartId} .dropdownBuyerTypes`;
// const dropdownCrossSelector = `#${cartId} .cartItemCross`;
// jQuery("#cartItemHTML .fl-html").append(`
// <div class="cartItem" id="${cartId}">
// <div class="cartItemCross">X</div>
// <div class="cartItemColoredSquare" style="background: ${color};"></div>
// <div class="cartItemCategory">${category}</div>
// <h5 class="cartItemSeat">${seat}</h5>
// <select name="dropdownBuyerTypes" class="dropdownBuyerTypes"></select>
// </div>`);
jQuery("#cartItemHTML .fl-html").append(`
<div class="cartItem" id="${cartId}">
<div class="cartItemColoredSquare" style="background: ${color};"></div>
@@ -326,13 +245,6 @@ function addCartItem(inSeatObj: I.JSCSelectedSeat) {
jQuery(dropdownBuyerTypesSelector).on('change', function (this: HTMLSelectElement) {
changedDropdownBuyerType(this, inSeatObj);
});
// jQuery(dropdownCrossSelector).on("click", function () {
// console.log("cross clicked");
// removeSeatFromState(inSeatObj);
// calcOverallPrice(inVenueXML);
// setBtnCartText();
// });
}
function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat) {
@@ -506,13 +418,14 @@ window.addEventListener('load', function () {
const btnCart = jQuery("#modalCart .uabb-button").get(0);
if (btnCart) {
btnCart.addEventListener("click", function () {
console.log(state.selectedSeatsArr.length);
if (!state.selectedSeatsArr.length) {
if (!state.selectedSeatsArr.length)
showJBoxNotice(`Sie haben bislang keinen Platz ausgewählt.`);
return;
}
state.cartChanged ? isValidSeatSelection() : showModalCart();
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.`);
});
}
@@ -597,12 +510,31 @@ 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();

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

@@ -15,6 +15,7 @@ export interface State {
selectedSeatsArr: string[][];
selectedSeatsObj: StateJSCSelectedSeats;
layoutRows: layoutRows;
isValidSeatSelection: boolean;
}
interface layoutRows {
@@ -111,6 +112,7 @@ export interface EventExtend {
venue_config_nav_image_width: string[];
start: string[];
weekday: string[];
seats_available: number;
}
// venueXML