before seatmapXML

client/src/seatmap.ts

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