before seatmapXML
This commit is contained in:
zino
59
client/src/communication.ts
Normal file
59
client/src/communication.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import * as I from "./types";
|
||||
import * as xml from "./xml";
|
||||
|
||||
// rework try/catch ?
|
||||
export function sendMessage(data: I.Message, to: string): void {
|
||||
if (to === "parent")
|
||||
window.parent.postMessage(JSON.stringify(data), '*');
|
||||
else {
|
||||
if (document.getElementById(to) === null) {
|
||||
console.log(`Element with ID ${to} does not exist`);
|
||||
return;
|
||||
}
|
||||
|
||||
const receiver: any = document.getElementById(to);
|
||||
if (receiver.contentWindow !== null)
|
||||
receiver.contentWindow.postMessage(JSON.stringify(data), "*")
|
||||
}
|
||||
}
|
||||
|
||||
export function listenToMessages(inHandler?: CallableFunction): void {
|
||||
window.addEventListener('message', (e: any): void => {
|
||||
if (inHandler)
|
||||
inHandler(e);
|
||||
});
|
||||
}
|
||||
|
||||
export function sendXML(inUrl: string, inTo: string, inEvent: string, inFrom: string, inDate: number = Date.now()) {
|
||||
xml.getXMLPromise(inUrl).then((result: unknown): void => {
|
||||
const message: I.Message = {
|
||||
date: inDate,
|
||||
from: inFrom,
|
||||
message: result,
|
||||
event: inEvent
|
||||
}
|
||||
sendMessage(message, inTo);
|
||||
}).catch(function (err) {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
export function sendEventToChild(inEvent: string) {
|
||||
const message: I.Message = {
|
||||
message: null,
|
||||
from: "parent",
|
||||
event: inEvent,
|
||||
date: Date.now()
|
||||
};
|
||||
sendMessage(message, "iframeSeatmap");
|
||||
}
|
||||
|
||||
export function sendEventToParent(inEvent: string) {
|
||||
const message: I.Message = {
|
||||
message: null,
|
||||
from: "child",
|
||||
event: inEvent,
|
||||
date: Date.now()
|
||||
};
|
||||
sendMessage(message, "parent");
|
||||
}
|
||||
@@ -1,11 +1,20 @@
|
||||
import $ from 'jquery';
|
||||
// import $, { Callbacks } from 'jquery';
|
||||
var $ = require("jquery");
|
||||
import 'jquery-ui';
|
||||
import * as I from "./types";
|
||||
import Utils from './utils';
|
||||
var parseString = require('xml2js').parseString;
|
||||
import axios from 'axios';
|
||||
import * as communication from "./communication";
|
||||
// import { getEventInfo } from './xml';
|
||||
// var parseString = require('xml2js').parseString;
|
||||
// import axios, { AxiosPromise, AxiosResponse, Method } from 'axios';
|
||||
// import axios, { AxiosResponse } from 'axios';
|
||||
// import * as xml from "./xml";
|
||||
// import { parseStringPromise } from 'xml2js';
|
||||
// const xml2js = require('xml2js');
|
||||
// const util = require('util');
|
||||
// var xml2jsParser = require('xml2js').parseString;
|
||||
|
||||
const config: I.config = {
|
||||
const config: I.Config = {
|
||||
debug: true,
|
||||
branch: "staging",
|
||||
urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
|
||||
@@ -13,100 +22,112 @@ const config: I.config = {
|
||||
cssSeatmapMaster: "https://tickets.zinomedia.de/dist/style.css",
|
||||
cssSeatmapStaging: "https://staging.tickets.zinomedia.de/dist/style.css",
|
||||
}
|
||||
let inputsWithValue: I.InputsWithValue;
|
||||
|
||||
const checkoutParams: string[] = [
|
||||
'APPTE', 'age_consent_is_checked', 'agency', 'cancelAndRedirectTrxState', 'cogid', 'coids', 'discount=A=IE', 'discount=A=IV', 'discountdesc=A=IE', 'discountdesc=A=IV', 'discountfees=A=IE', 'discountfees=A=IV', 'discountprice=A=IE', 'discountprice=A=IV', 'dpa_selection', 'etpgcode', 'flashDetected', 'gid', 'hbx_discount_prices', 'hbx_discounts', 'hbx_offered_pg', 'hbx_perf_codes', 'hbx_perf_sub_codes', 'hbx_pids', 'hbx_requested_pg', 'hbx_selected_tixx', 'hbx_upsell_flag', 'request_type', 'invalid_seats', 'inventory_filtering_action', 'inventory_month', 'inventory_year', 'isCapEnabled', 'is_availability_switch_from_map', 'is_ticket_exchange_request', 'ism_map_current_state_json_data', 'jcarousel_auto_off_val', 'listing_type', 'mainEventPID', 'map_coupon_code', 'mlbamsp', 'oid', 'ooids', 'orderkey', 'orgid', 'p_orgid', 'package_pids', 'parent_offer_id', 'pay_pal_token', 'pid', 'prevtrxstate', 'recapToken', 'redeem_voucher_data_event_mapping', 'replay_request', 'request_action', 's_mem_tkt_ren_retrieval', 'schedule', 'secure_trxn_enabled', 'selected_seat_indexes', 'selected_upsell_option', 'supplierCode', 'supplier_code', 'target_name_value', 'target_prev_trxstate', 'target_trxstate', 'target_url', 'timeout_seconds', 'trxstate', 'upsell_selected', 'user_context', 'valid_coupon_code_message'
|
||||
];
|
||||
// const checkoutParams: string[] = [
|
||||
// 'APPTE', 'age_consent_is_checked', 'agency', 'cancelAndRedirectTrxState', 'cogid', 'coids', 'discount=A=IE', 'discount=A=IV', 'discountdesc=A=IE', 'discountdesc=A=IV', 'discountfees=A=IE', 'discountfees=A=IV', 'discountprice=A=IE', 'discountprice=A=IV', 'dpa_selection', 'etpgcode', 'flashDetected', 'gid', 'hbx_discount_prices', 'hbx_discounts', 'hbx_offered_pg', 'hbx_perf_codes', 'hbx_perf_sub_codes', 'hbx_pids', 'hbx_requested_pg', 'hbx_selected_tixx', 'hbx_upsell_flag', 'request_type', 'invalid_seats', 'inventory_filtering_action', 'inventory_month', 'inventory_year', 'isCapEnabled', 'is_availability_switch_from_map', 'is_ticket_exchange_request', 'ism_map_current_state_json_data', 'jcarousel_auto_off_val', 'listing_type', 'mainEventPID', 'map_coupon_code', 'mlbamsp', 'oid', 'ooids', 'orderkey', 'orgid', 'p_orgid', 'package_pids', 'parent_offer_id', 'pay_pal_token', 'pid', 'prevtrxstate', 'recapToken', 'redeem_voucher_data_event_mapping', 'replay_request', 'request_action', 's_mem_tkt_ren_retrieval', 'schedule', 'secure_trxn_enabled', 'selected_seat_indexes', 'selected_upsell_option', 'supplierCode', 'supplier_code', 'target_name_value', 'target_prev_trxstate', 'target_trxstate', 'target_url', 'timeout_seconds', 'trxstate', 'upsell_selected', 'user_context', 'valid_coupon_code_message'
|
||||
// ];
|
||||
// const checkoutParamSerialized = encodeURIComponent(JSON.stringify(checkoutParams))
|
||||
|
||||
const checkoutParamSerialized = encodeURIComponent(JSON.stringify(checkoutParams))
|
||||
let inputsWithValue: I.inputsWithValue;
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
const content: string = new XMLSerializer().serializeToString(document);
|
||||
inputsWithValue = getInputs(content);
|
||||
getInputs(content);
|
||||
|
||||
console.log(inputsWithValue["trxstate"]);
|
||||
console.log(/posturl:"(.+?)"/.test(content));
|
||||
|
||||
// posturl absent if pvmapse === false
|
||||
if (inputsWithValue["trxstate"] !== "20" || /posturl:"(.+?)"/.test(content) === false)
|
||||
return;
|
||||
|
||||
Utils.inject(config.cssSeatmapStaging, "css", "body");
|
||||
generateSeatmapUrl(content);
|
||||
communication.listenToMessages(messagesHandler);
|
||||
getAdditionalInputs(content);
|
||||
console.log(inputsWithValue);
|
||||
checkTrxState();
|
||||
getImportantNote();
|
||||
modifySeatmapButton();
|
||||
createDialog();
|
||||
|
||||
|
||||
jQuery("#getVenueXML").on("click", () => {
|
||||
getVenueXML();
|
||||
jQuery("#getVenueXML").on("click", () => {
|
||||
// const message: I.Message = {
|
||||
// message: inputsWithValue,
|
||||
// from: "parent",
|
||||
// event: "sendInputsWithValue",
|
||||
// date: Date.now()
|
||||
// };
|
||||
// communication.sendMessage(message, "iframeSeatmap")
|
||||
// communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "getEventInfo", "child");
|
||||
});
|
||||
|
||||
jQuery("#foobarParent").on("click", () => {
|
||||
Utils.sendMessage({ message: "Hello from parent", date: Date.now() }, "iframeSeatmap");
|
||||
communication.sendEventToChild("parent_init_venue");
|
||||
});
|
||||
});
|
||||
|
||||
function getVenueXML() {
|
||||
axios.get(inputsWithValue["posturl"])
|
||||
.then(function (response) {
|
||||
// handle success
|
||||
console.log(response);
|
||||
function messagesHandler(e: any) {
|
||||
if (typeof (e.data) !== 'string')
|
||||
return;
|
||||
|
||||
if (response.status === 200 && response.headers["content-type"] === "text/xml;charset=utf-8") {
|
||||
console.log("looks good");
|
||||
const data: I.Message = JSON.parse(e.data);
|
||||
console.log(`parent: received from ${data.from}`);
|
||||
console.log(data);
|
||||
|
||||
parseString(response.data,
|
||||
{ normalizeTags: true, normalize: true, mergeAttrs: true },
|
||||
function (err: any, result: any) {
|
||||
if (err)
|
||||
console.log(err);
|
||||
else {
|
||||
// console.log(result)
|
||||
Utils.sendMessage(result, "iframeSeatmap");
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
.catch(function (error) {
|
||||
// handle error
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
function getInputs(inContent: string): I.inputsWithValue {
|
||||
let inputsWithValue: I.inputsWithValue = {};
|
||||
const parsedHTML: Node[] = $.parseHTML(inContent);
|
||||
|
||||
$(parsedHTML).find('input').each(function () {
|
||||
if (this.value !== '' && checkoutParams.includes(this.name))
|
||||
inputsWithValue[this.name] = this.value;
|
||||
});
|
||||
|
||||
return inputsWithValue;
|
||||
}
|
||||
|
||||
function generateSeatmapUrl(inContent: string): void {
|
||||
inputsWithValue["event"] = inContent.match(/event:"(.+?)"/)![1];
|
||||
inputsWithValue["holdcode"] = inContent.match(/holdcode:"(.+?)"/)![1];
|
||||
inputsWithValue["posturl"] = inContent.match(/posturl:"(.+?)"/)![1];
|
||||
inputsWithValue["posturl"] = decodeURIComponent(`${inputsWithValue["posturl"]}&event=${inputsWithValue["event"]}&holdcode=${inputsWithValue["holdcode"]}&nocache=0&inclpkg=Y&incloffer=Y&inclcartdetails=Y&inclCart=Y&inclvenue=Y`);
|
||||
inputsWithValue["seatmapUrl"] = (config.branch == "staging" ? config.urlSeatmapStaging : config.urlSeatmapMaster) + `?posturl=${encodeURIComponent(inputsWithValue["posturl"])}&checkoutParams=${checkoutParamSerialized}`;
|
||||
console.log(inputsWithValue["seatmapUrl"]);
|
||||
}
|
||||
|
||||
function checkTrxState(): void {
|
||||
if (!$.isEmptyObject(inputsWithValue)) {
|
||||
if (inputsWithValue.hasOwnProperty("trxstate") && inputsWithValue["trxstate"] === "20") {
|
||||
console.log(inputsWithValue["posturl"]);
|
||||
getImportantNote();
|
||||
modifySeatmapButton();
|
||||
createDialog();
|
||||
switch (data.event) {
|
||||
case "child_init_needInputsWithValue": {
|
||||
const message: I.Message = {
|
||||
message: inputsWithValue,
|
||||
from: "parent",
|
||||
event: "parent_init_sendInputsWithValue",
|
||||
date: Date.now()
|
||||
};
|
||||
communication.sendMessage(message, "iframeSeatmap")
|
||||
break;
|
||||
}
|
||||
case "child_init_needVenueXML": {
|
||||
communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "parent_init_sendVenueXML", "parent");
|
||||
break;
|
||||
}
|
||||
case "child_needSeatmapXML": {
|
||||
const seatmapUrl: string = generateSeatmapUrl(data.message);
|
||||
communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent");
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function generateSeatmapUrl(seatmapId : string): string {
|
||||
return `${inputsWithValue["posturlRawDecoded"]}&inclseatmap=Y&seatmap=${seatmapId}`;
|
||||
}
|
||||
|
||||
|
||||
function getVenueLocation(): string {
|
||||
let span: string[] = [];
|
||||
jQuery(".venue span").each(function () {
|
||||
span.push(jQuery(this).text());
|
||||
});
|
||||
|
||||
return span.join(", ");
|
||||
}
|
||||
|
||||
function getInputs(inContent: string): void {
|
||||
const parsedHTML: Node[] = $.parseHTML(inContent);
|
||||
let inputs: { [key: string]: string } = {};
|
||||
|
||||
$(parsedHTML).find('input').each(function (this: any) {
|
||||
const name: string = this.name;
|
||||
const value: string = this.value;
|
||||
if (value !== '')
|
||||
inputs[name] = value;
|
||||
});
|
||||
|
||||
inputsWithValue = { ...inputsWithValue, ...inputs };
|
||||
}
|
||||
|
||||
|
||||
// todo: check with different venues
|
||||
function getImportantNote(): void {
|
||||
const importantNote: string | null = $(".important_note")[0].textContent;
|
||||
@@ -139,36 +160,6 @@ function createDialog(): void {
|
||||
});
|
||||
}
|
||||
|
||||
// $(window).on('resize', function(): void{
|
||||
// console.log("resizing");
|
||||
// var win = $(this); //this = window
|
||||
|
||||
// let dlg = $("#dialogSeatmap"); // Get the dialog container.
|
||||
// var width: number = <number>win.width();
|
||||
// var height: number = <number>win.height();
|
||||
|
||||
// // Provide some space between the window edges.
|
||||
// width = width - 50;
|
||||
// height = height - 100; // iframe height will need to be even less to account for space taken up by dialog title bar, buttons, etc.
|
||||
|
||||
// // Set the iframe height.
|
||||
// $(dlg.children("iframe").get(0)).css({"height": `${height}px`, "width": `${width}px`});
|
||||
|
||||
// });
|
||||
|
||||
window.addEventListener('message', function (e) {
|
||||
console.log("Parent: Received");
|
||||
|
||||
// Get the sent data
|
||||
const data = e.data;
|
||||
console.log(data);
|
||||
|
||||
// If you encode the message in JSON before sending them,
|
||||
// then decode here
|
||||
// const decoded = JSON.parse(data);
|
||||
});
|
||||
|
||||
|
||||
function modifySeatmapButton(): void {
|
||||
$(".flash_seat_map_box").remove();
|
||||
$('#flash_seat_map_box_id').css({
|
||||
@@ -192,4 +183,39 @@ function modifySeatmapButton(): void {
|
||||
<div id="dialogSeatmap" hidden="hidden"></div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// $(window).on('resize', function(): void{
|
||||
// console.log("resizing");
|
||||
// var win = $(this); //this = window
|
||||
|
||||
// let dlg = $("#dialogSeatmap"); // Get the dialog container.
|
||||
// var width: number = <number>win.width();
|
||||
// var height: number = <number>win.height();
|
||||
|
||||
// // Provide some space between the window edges.
|
||||
// width = width - 50;
|
||||
// height = height - 100; // iframe height will need to be even less to account for space taken up by dialog title bar, buttons, etc.
|
||||
|
||||
// // Set the iframe height.
|
||||
// $(dlg.children("iframe").get(0)).css({"height": `${height}px`, "width": `${width}px`});
|
||||
|
||||
// });
|
||||
|
||||
// window.addEventListener('message', (e: any): void => {
|
||||
// console.log(e);
|
||||
// if (typeof (e.data) === 'string') {
|
||||
// const data: I.message = JSON.parse(e.data);
|
||||
// if (data.callback)
|
||||
// data.callback(data);
|
||||
// }
|
||||
// });
|
||||
|
||||
function getAdditionalInputs(inContent: string): void {
|
||||
inputsWithValue["event"] = inContent.match(/event:"(.+?)"/)![1];
|
||||
inputsWithValue["holdcode"] = inContent.match(/holdcode:"(.+?)"/)![1];
|
||||
inputsWithValue["posturlRaw"] = inContent.match(/posturl:"(.+?)"/)![1];
|
||||
inputsWithValue["posturlRawDecoded"] = decodeURIComponent(inputsWithValue["posturlRaw"]);
|
||||
inputsWithValue["posturl"] = decodeURIComponent(`${inputsWithValue["posturlRaw"]}&event=${inputsWithValue["event"]}&holdcode=${inputsWithValue["holdcode"]}&nocache=0&inclpkg=Y&incloffer=Y&inclcartdetails=Y&inclCart=Y&inclvenue=Y`);
|
||||
inputsWithValue["venueLocation"] = getVenueLocation();
|
||||
}
|
||||
@@ -1,24 +1,131 @@
|
||||
import jQuery = require("jquery");
|
||||
import Utils from './utils';
|
||||
import * as xml from "./xml";
|
||||
import * as communication from "./communication";
|
||||
import * as I from "./types";
|
||||
import * as ui from "./ui";
|
||||
// var parseString = require('xml2js').parseString;
|
||||
// import axios from 'axios';
|
||||
|
||||
// import Utils from './utils';
|
||||
// let checkoutParams: string[];
|
||||
// let posturl: string;
|
||||
|
||||
let inputsWithValue: I.InputsWithValue;
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
jQuery("#foobar").on("click", () => {
|
||||
Utils.sendMessage({ message: "Hello from parent", date: Date.now() }, "parent");
|
||||
communication.sendMessage(<I.Message>{
|
||||
message: "Hello from child",
|
||||
from: "child",
|
||||
event: "foobar",
|
||||
date: Date.now(),
|
||||
}, "parent");
|
||||
});
|
||||
|
||||
communication.listenToMessages(messagesHandler);
|
||||
|
||||
// jQuery("#dropdownSeatmap").on("change", (e: HTMLSelectElement) => {
|
||||
// const value = (<HTMLSelectElement>e).value;
|
||||
// console.log(e);
|
||||
// // console.log(e);
|
||||
// });
|
||||
|
||||
|
||||
const dropdownSeatmap: HTMLElement | null = document.getElementById("dropdownSeatmap");
|
||||
if (dropdownSeatmap) {
|
||||
dropdownSeatmap.addEventListener("change", function(this: HTMLSelectElement) {
|
||||
const value: string = this.value;
|
||||
const message: I.Message = {
|
||||
message: value,
|
||||
from: "child",
|
||||
event: "child_needSeatmapXML",
|
||||
date: Date.now()
|
||||
};
|
||||
communication.sendMessage(message, "parent");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
window.addEventListener('message', function(e) {
|
||||
console.log("Child: Received");
|
||||
// // dropdownSeatmap change
|
||||
// jQuery('#dropdownSeatmap').on('change', function () {
|
||||
// console.log("hi1");
|
||||
// // callback(this);
|
||||
// });
|
||||
|
||||
const data = JSON.parse(e.data);
|
||||
|
||||
|
||||
function messagesHandler(e: any) {
|
||||
if (typeof (e.data) !== 'string')
|
||||
return;
|
||||
|
||||
const data: I.Message = JSON.parse(e.data);
|
||||
console.log(`child: received from ${data.from}`);
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
switch (data.event) {
|
||||
case "RefreshDropdown": {
|
||||
const venueXML: I.VenueXML = data.message.map_response;
|
||||
const seatmapListing: I.Seatmap[] = xml.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": {
|
||||
communication.sendEventToParent("child_init_needInputsWithValue");
|
||||
break;
|
||||
}
|
||||
case "parent_init_sendVenueXML": {
|
||||
const XML: I.VenueXML = data.message.map_response;
|
||||
|
||||
// fill event info
|
||||
const eventInfo = xml.getEventInfo(XML);
|
||||
ui.setEventInfo(eventInfo, inputsWithValue);
|
||||
|
||||
// fill select dropdown
|
||||
const seatmapListing: I.Seatmap[] = xml.getSeatmapListing(XML);
|
||||
ui.setOptionSelect(seatmapListing, "dropdownSeatmap");
|
||||
|
||||
break;
|
||||
}
|
||||
case "parent_init_sendInputsWithValue": {
|
||||
inputsWithValue = data.message;
|
||||
communication.sendEventToParent("child_init_needVenueXML");
|
||||
break;
|
||||
}
|
||||
case "parent_sendSeatmapXML": {
|
||||
const XML: any = data.message.map_response;
|
||||
console.log(XML);
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// window.addEventListener('message', function(e) {
|
||||
// console.log("Child: Received");
|
||||
|
||||
// const data = JSON.parse(e.data);
|
||||
// console.log(data);
|
||||
// });
|
||||
|
||||
// jQuery(($) => {
|
||||
// parseQueryString();
|
||||
|
||||
@@ -1,9 +1,83 @@
|
||||
// inject.ts
|
||||
export interface inputsWithValue {
|
||||
[HTMLInputElement: string]: string;
|
||||
export interface InputsWithValue {
|
||||
param1: number[];
|
||||
param2: string;
|
||||
param3: string;
|
||||
trxstate: string;
|
||||
etpgcode: string;
|
||||
is_ticket_exchange_request: string;
|
||||
prevtrxstate: string;
|
||||
user_context: string;
|
||||
target_trxstate: string;
|
||||
orgid: string;
|
||||
p_orgid: string;
|
||||
pid: string;
|
||||
supplier_code: string;
|
||||
inventory_filtering_action: string;
|
||||
inventory_month: string;
|
||||
inventory_year: string;
|
||||
upsell_selected: string;
|
||||
listing_type: string;
|
||||
invalid_seats: string;
|
||||
package_pids: string;
|
||||
mlbamsp: string;
|
||||
pay_pal_token: string;
|
||||
APPTE: string;
|
||||
schedule: string;
|
||||
secure_trxn_enabled: string;
|
||||
isCapEnabled: string;
|
||||
supplierCode: string;
|
||||
venueLocation: string;
|
||||
event: string;
|
||||
holdcode: string;
|
||||
posturl: string;
|
||||
posturlRaw: string;
|
||||
posturlRawDecoded: string;
|
||||
seatmapUrl: string;
|
||||
importantNote?: string;
|
||||
importantNoteEncoded?: string;
|
||||
|
||||
}
|
||||
|
||||
export interface config {
|
||||
// export interface InputsWithValue {
|
||||
// [key: string]: string | {
|
||||
// param1: number[];
|
||||
// param2: string;
|
||||
// param3: string;
|
||||
// trxstate: string;
|
||||
// etpgcode: string;
|
||||
// is_ticket_exchange_request: string;
|
||||
// prevtrxstate: string;
|
||||
// user_context: string;
|
||||
// target_trxstate: string;
|
||||
// orgid: string;
|
||||
// p_orgid: string;
|
||||
// pid: string;
|
||||
// supplier_code: string;
|
||||
// inventory_filtering_action: string;
|
||||
// inventory_month: string;
|
||||
// inventory_year: string;
|
||||
// upsell_selected: string;
|
||||
// listing_type: string;
|
||||
// invalid_seats: string;
|
||||
// package_pids: string;
|
||||
// mlbamsp: string;
|
||||
// pay_pal_token: string;
|
||||
// APPTE: string;
|
||||
// schedule: string;
|
||||
// secure_trxn_enabled: string;
|
||||
// isCapEnabled: string;
|
||||
// supplierCode: string;
|
||||
// venueLocation: string;
|
||||
// event: string;
|
||||
// holdcode: string;
|
||||
// posturl: string;
|
||||
// seatmapUrl: string;
|
||||
// importantNote?: string;
|
||||
// importantNoteEncoded?: string;
|
||||
// }
|
||||
// }
|
||||
|
||||
export interface Config {
|
||||
debug: boolean,
|
||||
branch: string,
|
||||
urlSeatmapStaging: string,
|
||||
@@ -12,4 +86,221 @@ export interface config {
|
||||
cssSeatmapMaster: string
|
||||
}
|
||||
|
||||
// seatmap.ts
|
||||
export interface Message {
|
||||
message: any | VenueXML,
|
||||
event: string,
|
||||
date: number,
|
||||
from: string,
|
||||
callback?: CallableFunction,
|
||||
}
|
||||
|
||||
// export interface EventInfo = Event & EventExtend;
|
||||
export interface EventInfo extends Event, EventExtend { }
|
||||
|
||||
export interface EventExtend {
|
||||
venue_config_capacity: string[];
|
||||
venue_config_code: string[];
|
||||
venue_config_desc: string[];
|
||||
venue_config_id: string[];
|
||||
venue_config_nav_image: string[];
|
||||
venue_config_nav_image_height: string[];
|
||||
venue_config_nav_image_width: string[];
|
||||
start: string[];
|
||||
weekday: string[];
|
||||
}
|
||||
|
||||
// venueXML
|
||||
|
||||
export interface VenueXML {
|
||||
offer: Offer[];
|
||||
event: Event[];
|
||||
venue: Venue[];
|
||||
master_config: MasterConfig[];
|
||||
venue_config: VenueConfig[];
|
||||
pricescale_config: PricescaleConfig[];
|
||||
price_structure: PriceStructure[];
|
||||
seatmap_config: SeatmapConfig3[];
|
||||
}
|
||||
export interface Offer {
|
||||
id: string[];
|
||||
timestamp: string[];
|
||||
}
|
||||
|
||||
export interface Event {
|
||||
id: string[];
|
||||
code: string[];
|
||||
desc: string[];
|
||||
public_desc: string[];
|
||||
year: string[];
|
||||
month: string[];
|
||||
day: string[];
|
||||
hour: string[];
|
||||
minute: string[];
|
||||
event_run_code: string[];
|
||||
event_run_desc: string[];
|
||||
event_run_public_desc: string[];
|
||||
timestamp: string[];
|
||||
}
|
||||
|
||||
export interface Pricescale2 {
|
||||
code: string[];
|
||||
color: string[];
|
||||
desc: string[];
|
||||
id: string[];
|
||||
pricescale_group_id: string[];
|
||||
text_color: string[];
|
||||
}
|
||||
|
||||
export interface Pricescale {
|
||||
pricescale: Pricescale2[];
|
||||
}
|
||||
|
||||
export interface BuyerType2 {
|
||||
buyer_type_group_id: string[];
|
||||
code: string[];
|
||||
desc: string[];
|
||||
display_indicator: string[];
|
||||
id: string[];
|
||||
}
|
||||
|
||||
export interface BuyerType {
|
||||
buyer_type: BuyerType2[];
|
||||
}
|
||||
|
||||
export interface Venue {
|
||||
code: string[];
|
||||
desc: string[];
|
||||
id: string[];
|
||||
name: string[];
|
||||
timestamp: string[];
|
||||
pricescales: Pricescale[];
|
||||
extended_defs: string[];
|
||||
buyer_types: BuyerType[];
|
||||
}
|
||||
|
||||
export interface Section {
|
||||
code: string[];
|
||||
desc: string[];
|
||||
type: string[];
|
||||
hover_coords: string[];
|
||||
id: string[];
|
||||
}
|
||||
|
||||
export interface SectionConfig {
|
||||
section: Section[];
|
||||
}
|
||||
|
||||
export interface Pricescale3 {
|
||||
id: string[];
|
||||
available: string[];
|
||||
}
|
||||
|
||||
export interface Section2 {
|
||||
available: string[];
|
||||
capacity: string[];
|
||||
id: string[];
|
||||
max_contiguous: string[];
|
||||
pricescale: Pricescale3[];
|
||||
}
|
||||
|
||||
export interface SectionInventory {
|
||||
as_of_date: string[];
|
||||
event_id: string[];
|
||||
holdcode_id: string[];
|
||||
section: Section2[];
|
||||
}
|
||||
|
||||
export interface MasterConfig {
|
||||
capacity: string[];
|
||||
code: string[];
|
||||
desc: string[];
|
||||
id: string[];
|
||||
metadata: string[];
|
||||
nav_image: string[];
|
||||
nav_image_height: string[];
|
||||
nav_image_width: string[];
|
||||
orientation: string[];
|
||||
stage_desc: string[];
|
||||
timestamp: string[];
|
||||
section_config: SectionConfig[];
|
||||
section_inventory: SectionInventory[];
|
||||
}
|
||||
|
||||
export interface SeatMapConfig {
|
||||
hidden_seat_map_ids: string[];
|
||||
id: string[];
|
||||
}
|
||||
|
||||
export interface SectionConfig2 {
|
||||
hidden_section_ids: string[];
|
||||
}
|
||||
|
||||
export interface VenueConfig {
|
||||
capacity: string[];
|
||||
code: string[];
|
||||
desc: string[];
|
||||
id: string[];
|
||||
nav_image: string[];
|
||||
nav_image_height: string[];
|
||||
nav_image_width: string[];
|
||||
timestamp: string[];
|
||||
seat_map_config: SeatMapConfig[];
|
||||
section_config: SectionConfig2[];
|
||||
}
|
||||
|
||||
export interface Pricescale4 {
|
||||
id: string[];
|
||||
}
|
||||
|
||||
export interface PricescaleConfig {
|
||||
code: string[];
|
||||
desc: string[];
|
||||
id: string[];
|
||||
nav_image: string[];
|
||||
nav_image_height: string[];
|
||||
nav_image_width: string[];
|
||||
timestamp: string[];
|
||||
pricescale: Pricescale4[];
|
||||
}
|
||||
|
||||
export interface BuyerType3 {
|
||||
currency: string[];
|
||||
display_order: string[];
|
||||
id: string[];
|
||||
price: string[];
|
||||
all_in_price: string[];
|
||||
}
|
||||
|
||||
export interface Pricescale5 {
|
||||
currency: string[];
|
||||
display_order: string[];
|
||||
id: string[];
|
||||
ref_price: string[];
|
||||
all_in_ref_price: string[];
|
||||
buyer_type: BuyerType3[];
|
||||
}
|
||||
|
||||
export interface PriceStructure {
|
||||
code: string[];
|
||||
desc: string[];
|
||||
event_id: string[];
|
||||
id: string[];
|
||||
sales_type: string[];
|
||||
timestamp: string[];
|
||||
pricescale: Pricescale5[];
|
||||
}
|
||||
|
||||
export interface Seatmap {
|
||||
code: string[];
|
||||
desc: string[];
|
||||
hotspot_coords: string[];
|
||||
id: string[];
|
||||
}
|
||||
|
||||
export interface SeatmapConfig3 {
|
||||
code: string[];
|
||||
desc: string[];
|
||||
id: string[];
|
||||
timestamp: string[];
|
||||
seatmap: Seatmap[];
|
||||
}
|
||||
21
client/src/ui.ts
Normal file
21
client/src/ui.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import * as I from "./types";
|
||||
|
||||
export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string) {
|
||||
const seatmapDropdown: HTMLElement | null = document.getElementById(inId);
|
||||
if (seatmapDropdown) {
|
||||
for (let seatmapObj of inSeatmapListing) {
|
||||
var opt = document.createElement('option');
|
||||
opt.value = seatmapObj.id[0];
|
||||
opt.innerHTML = seatmapObj.desc[0];
|
||||
seatmapDropdown.appendChild(opt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function setEventInfo(inEventInfo: I.EventInfo, inInputswithValue: I.InputsWithValue): void {
|
||||
// console.log(inEventInfo);
|
||||
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("#eventInfoLocation p")[0].childNodes[0].textContent = inInputswithValue.venueLocation;
|
||||
}
|
||||
@@ -1,8 +1,4 @@
|
||||
export default class Utils {
|
||||
static foobar(): void {
|
||||
console.log("foobar");
|
||||
}
|
||||
|
||||
static waitForElement(selector: string, callback: Function, checkFrequencyInMs: number = 100, timeoutInMs: number = 10000) {
|
||||
let startTimeInMs: number = Date.now();
|
||||
(function loopSearch(): void {
|
||||
@@ -23,7 +19,7 @@ export default class Utils {
|
||||
}
|
||||
|
||||
static delay(ms: number) {
|
||||
return new Promise( resolve => setTimeout(resolve, ms) );
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
static inject(content: string, type: string = "js", loc: string = "head") {
|
||||
@@ -47,22 +43,16 @@ export default class Utils {
|
||||
}
|
||||
else
|
||||
return;
|
||||
|
||||
|
||||
|
||||
if (loc === "body")
|
||||
document.body.appendChild(script);
|
||||
else if (loc === "head")
|
||||
document.head.appendChild(script);
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
static sendMessage(message: object, selector: string): void {
|
||||
if (selector === "parent")
|
||||
window.parent.postMessage(JSON.stringify(message), '*');
|
||||
else {
|
||||
const receiver: any = document.getElementById(selector);
|
||||
if (receiver.contentWindow !== null)
|
||||
receiver.contentWindow.postMessage(JSON.stringify(message), "*")
|
||||
}
|
||||
static getDayName(date: Date, locale: string) {
|
||||
return date.toLocaleDateString(locale, { weekday: 'long' });
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
57
client/src/xml.ts
Normal file
57
client/src/xml.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
var xml2jsParser = require('xml2js').parseString;
|
||||
import * as I from "./types";
|
||||
import Utils from './utils';
|
||||
|
||||
export function getXMLPromise(url: string): Promise<unknown> {
|
||||
return axios.get(url)
|
||||
.then(function (response: void | AxiosResponse<any>) {
|
||||
|
||||
return new Promise(function (resolve: any, reject: any) {
|
||||
const AxiosResponse = <AxiosResponse>response;
|
||||
if (AxiosResponse.status === 200 && AxiosResponse.headers["content-type"] === "text/xml;charset=utf-8") {
|
||||
xml2jsParser(AxiosResponse.data, { normalizeTags: true, normalize: true, mergeAttrs: true }, function (err: any, result: any) {
|
||||
if (err)
|
||||
reject(err);
|
||||
else {
|
||||
resolve(result);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
export function getSeatmapListing(inVenueXML: I.VenueXML): I.Seatmap[] {
|
||||
return inVenueXML.seatmap_config[0].seatmap;
|
||||
}
|
||||
|
||||
export function getEventInfo(inVenueXML: I.VenueXML): I.EventInfo {
|
||||
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 eventExtend: I.EventExtend = {
|
||||
venue_config_capacity: venue_config.capacity,
|
||||
venue_config_code: venue_config.code,
|
||||
venue_config_desc: venue_config.desc,
|
||||
venue_config_id: venue_config.id,
|
||||
venue_config_nav_image: venue_config.nav_image,
|
||||
venue_config_nav_image_height: venue_config.nav_image_height,
|
||||
venue_config_nav_image_width: venue_config.nav_image_width,
|
||||
start: start,
|
||||
weekday: weekday,
|
||||
};
|
||||
|
||||
let eventInfo: I.EventInfo = { ...eventObj, ...eventExtend };
|
||||
|
||||
return eventInfo;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user