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

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