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

implemented check tick selected seat

Browse Source
This commit is contained in:
zino
2021-03-24 21:37:06 +01:00
parent c7a6267975
commit 04cf55e4fe
10 changed files with 252 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
client/src/seatmap.ts
View File

@@ -1,14 +1,18 @@
import jQuery = require("jquery");
import * as XMLHelper from "./modules/xml";
import * as XMLHelper from "./modules/xmlhelper";
import * as Communication from "./modules/communication";
import * as I from "./types/types";
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";
let inputsWithValue: I.InputsWithValue;
let seatmap: any;
let panzoom: PanzoomObject | undefined;
let venueXML: I.VenueXML;
let seatmapXML: any;
function messagesHandler(inE: any) {
if (typeof (inE.data) !== 'string')
@@ -19,75 +23,81 @@ function messagesHandler(inE: any) {
console.log(data);
switch (data.event) {
case "RefreshDropdown": {
const venueXML: I.VenueXML = data.message.map_response;
const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(venueXML);
UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
break;
}
case "addDropdown": {
console.log("adding to dropdown now...");
var min = 12,
max = 100,
select = document.getElementById('dropdownSeatmap');
for (var i = min; i <= max; i++) {
var opt = document.createElement('option');
opt.value = i.toString();
opt.innerHTML = i.toString();
select!.appendChild(opt);
}
break;
}
case "parent_init_venue": {
UI.controlLoftloader("show");
Communication.sendEventToParent("child_init_needInputsWithValue");
break;
}
case "parent_init_sendVenueXML": {
const XML: I.VenueXML = data.message.map_response;
venueXML = data.message.map_response;
// generate pricescale css classes
const css = generatePricescaleCSS(venueXML);
Utils.inject(css, "cssCustom", "body");
console.log(css);
// fill event info
const eventInfo = XMLHelper.getEventInfo(XML);
const eventInfo = XMLHelper.getEventInfo(venueXML);
UI.setEventInfo(eventInfo, inputsWithValue);
// fill select dropdown
const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(XML);
const seatmapListing: I.Seatmap[] = XMLHelper.getSeatmapListing(venueXML);
console.log(seatmapListing);
UI.setOptionSelect(seatmapListing, "dropdownSeatmap");
// display first seatmapXML
const id: string = seatmapListing[0].id[0];
jQuery("#dropdownSeatmap").val(id);
Communication.needSeatmapXML(id);
Communication.needSeatmapXML(id);
break;
}
case "parent_init_sendInputsWithValue": {
inputsWithValue = data.message;
UI.changeVenueImage(inputsWithValue);
Communication.sendEventToParent("child_init_needVenueXML");
break;
}
case "parent_sendSeatmapXML": {
const XML: any = data.message.map_response;
const seatmapInitMap: string[] = JSC.generateMap(XML);
const seatmapInitRows: number[] = JSC.getRows(XML);
const seatmapInitSeats: I.JSCSeats = JSC.getSeats(XML);
console.log(seatmapInitSeats);
seatmapXML = data.message.map_response;
const map: string[] = JSC.generateMap(seatmapXML);
const rows: number[] = JSC.getRows(seatmapXML);
const seats: I.JSCSeats = JSC.getSeats(seatmapXML);
const legend: I.JSCLegend = JSC.generateLegend(seatmapXML, "#JSCLegendInner");
addSeatmap("#containerSeatmapInner", seatmapInitMap, seatmapInitRows, seatmapInitSeats);
UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
addSeatmap("#containerSeatmapInner", map, rows, seats, legend);
JSC.setUnavailableSeats(seatmapXML, seatmap);
UI.convertLegendToDropdown("dropdownLegend");
dropdownLegendOnChange("#dropdownLegend");
panzoom = UI.addPanzoom("#containerSeatmapInner", ".panzoomZoomIn", ".panzoomZoomOut", "#panzoomResetZoom");
UI.controlLoftloader("hide");
break;
}
default:
break;
}
}
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];
// todo: check if "" is correct when no color is set
let color: string = `#${element.color[0]} !important`;
if (color === "")
color = Utils.generateRandomColor();
cssArr.push(`._${ID} { background-color: ${color}; }`);
});
return (cssArr.join("\r\n"));
}
window.addEventListener('load', function () {
Utils.inject(config.urlJSCStaging, "js", "head");
Utils.inject(config.urlCSSJSCStaging, "css", "body");
@@ -100,13 +110,55 @@ window.addEventListener('load', function () {
dropdownSeatmap.addEventListener("change", function (this: HTMLSelectElement) {
UI.controlLoftloader("show");
const value: string = this.value;
UI.destroyCurrentSeatmap();
UI.destroyCurrentSeatmap("#containerSeatmapInner", panzoom);
Communication.needSeatmapXML(value);
});
}
// Utils.waitForElement("#dropdownLegend", dropdownLegendOnChange);
});
function addSeatmap(inSelector: string, inSeatmapInitMap: string[], inSeatmapInitRows: number[], inSeats: I.JSCSeats): void {
function dropdownLegendOnChange(inSelector: string) {
const dropdownLegend = jQuery(inSelector).get(0);
dropdownLegend.addEventListener("change", function (this: HTMLSelectElement) {
const value: string = this.value;
const className: string = `._${value}`;
changeDropdownLegendBGColor(inSelector, value, className);
if (value === "all") {
seatmap.find('unavailable').status('available');
JSC.setUnavailableSeats(seatmapXML, seatmap);
}
else {
seatmap.find('available').status('unavailable');
JSC.activateSeatsBySectionID(seatmapXML, seatmap, value);
JSC.setUnavailableSeats(seatmapXML, seatmap);
}
});
}
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);
}
function addSeatmap(inSelector: string, inMap: string[], inRows: number[], inSeats: I.JSCSeats, inLegend: I.JSCLegend): void {
// console.log(inSeatmapInitMap);
// console.log(inSeats);
// console.log(inLegend);
const containerSeatmap: any = (<any>window).jQuery(inSelector);
@@ -114,9 +166,9 @@ function addSeatmap(inSelector: string, inSeatmapInitMap: string[], inSeatmapIni
naming: {
top: false,
left: true,
rows: inSeatmapInitRows,
rows: inRows,
},
map: inSeatmapInitMap,
map: inMap,
// map: [
// 'aaaaaa__DDDDD',
// 'aaaaaa__aaaaa',
@@ -134,6 +186,7 @@ function addSeatmap(inSelector: string, inSeatmapInitMap: string[], inSeatmapIni
// }
// },
legend: inLegend,
click: function () {
if (this.status() == 'available') {
console.log("available");