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

revised ui

Browse Source
This commit is contained in:
zino
2021-05-17 18:50:34 +02:00
parent 6786d5f8f6
commit fe19226a4c
11 changed files with 262 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/modules/bookingButton.ts Normal file
View 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
View 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");
}
}

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

@@ -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
View 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);
}

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

@@ -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
View 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
View 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);
}

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

@@ -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;
}

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

@@ -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);
}