display: Support multiple urls

2 files changed, 25 insertions, 1 deletions

diff --git a/src/clicks_display.ts b/src/clicks_display.ts
index 3478a0f..d13d790 100644
--- a/src/clicks_display.ts
+++ b/src/clicks_display.ts
@@ -47,18 +47,26 @@ class Display {
     private status: HTMLElement
     private frame_container: HTMLElement
     private frame: HTMLIFrameElement
+    private url: HTMLSelectElement
     private heatmap: HTMLElement
     private data: PageData[] | undefined
     private map: h337.Heatmap<"value", "x", "y">
+    private current: PageData | undefined
 
     constructor() {
         this.status = document.getElementById("status")!!
         this.frame_container = document.getElementById("frame_container")!!
         this.frame = document.getElementById("frame")!! as HTMLIFrameElement
         this.heatmap = document.getElementById("heatmap")!!
+        this.url = document.getElementById("url")!! as HTMLSelectElement
         this.map = h337.create({
             container: this.heatmap,
         })
+
+        this.url.addEventListener("change", (e) => {
+            if (this.data === undefined) return
+            this.show(this.data[this.url.selectedIndex])
+        })
     }
 
     loadFile(file: File) {
@@ -104,8 +112,21 @@ class Display {
                 this.data.push(new PageData(url, data.width, clicks))
             }
 
+            while (this.url.options.length > 0)
+                this.url.options.remove(0)
+
+            for (let i = 0; i < this.data.length; i++) {
+                const option = document.createElement("option") as HTMLOptionElement
+                option.value = `${i}`
+                option.innerText = this.data[i].url
+                this.url.options.add(option)
+            }
+
             this.setStatus("Loaded")
-            if (this.data.length > 0) this.show(this.data[0])
+            if (this.data.length > 0) {
+                this.url.selectedIndex = 0
+                this.show(this.data[0])
+            }
         })
         reader.readAsText(file)
     }
@@ -115,6 +136,8 @@ class Display {
     }
 
     private show(data: PageData) {
+        if (this.current === data) return
+        this.current = data
         this.frame_container.style.width = `${data.width}px`
         this.frame.src = data.url
         this.heatmap.style.transform = "translateY(0px)"
diff --git a/src/display.html b/src/display.html
index 64df6b7..8dbec8e 100644
--- a/src/display.html
+++ b/src/display.html
@@ -51,6 +51,7 @@
       <div id="banner">   
         <span id="status">No file loaded</span>
         <input type="file" name="file" id="file" accept=".json, application/json">
+        <select id="url"></select>
       </div>
       <div id="frame_container">
         <iframe id="frame"></iframe>