From 5059efb3c9ad5b4ca9617755f714b96f120568be Mon Sep 17 00:00:00 2001
From: BroodjeAap <davidzessen@gmail.com>
Date: Thu, 6 Aug 2020 18:15:11 +0000
Subject: [PATCH] working interface for selecting different moments

---
 static/js/moments.js   | 35 +++++++++++++++++++++++++++++------
 templates/moments.html | 20 ++++++++++++++++++++
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/static/js/moments.js b/static/js/moments.js
index 0bf4026..3994afd 100755
--- a/static/js/moments.js
+++ b/static/js/moments.js
@@ -1,15 +1,38 @@
 let current_moment = null;
+let moment_current_image = null;
+let moment_slider = null;
 
 document.addEventListener("DOMContentLoaded", function(){
     current_moment = moments[0];
 
-    let moment_current_image = document.getElementById("moment_current_image");
+    moment_current_image = document.getElementById("moment_current_image");
+    moment_slider = document.getElementById("moment_slider");
+
+    moment_slider.addEventListener("input", e => {
+        update_moment_image();
+    });
+
+    set_current_moment(0);
+});
+
+function update_moment_image(){
+    moment_current_image.src = "/streams/" + streamName + "/" + watchAreaName + "/" + current_moment[moment_slider.value];
+}
+
+function set_current_moment(i){
+    current_moment = moments[i];
     moment_current_image.src = "/streams/" + streamName + "/" + watchAreaName + "/" + current_moment[0];
-    let moment_slider = document.getElementById("moment_slider");
+
     moment_slider.max = current_moment.length - 1;
     moment_slider.value = 0;
+}
 
-    moment_slider.addEventListener("change", e => {
-        moment_current_image.src = "/streams/" + streamName + "/" + watchAreaName + "/" + current_moment[moment_slider.value];
-    });
-});
\ No newline at end of file
+function next_moment(){
+    console.log(moment_slider.value)
+    moment_slider.value++;
+    console.log(moment_slider.value)
+    if (moment_slider.value >= moment_slider.max){
+        moment_slider.value = "0";
+    }
+    update_moment_image();
+}
\ No newline at end of file
diff --git a/templates/moments.html b/templates/moments.html
index 973ed95..16881ad 100755
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -6,10 +6,30 @@
 
 <img src="#" id="moment_current_image">
 <input type="range" min="0" max="1" value="0" id="moment_slider">
+<a href="#" onclick="next_moment()">View</a>
+<table class="pure-table pure-table-horizontal pure-table-striped">
+    <thead>
+        <th>Moment</th>
+        <th>Time</th>
+        <th>#</th>
+        <th>View</th>
+    </thead>
+    <tbody>
+        {{range $i, $moments := .Moments}}
+            <tr>
+                <td>{{$i}}</td>
+                <td>{{index $moments 0}}</td>
+                <td>{{len $moments}}</td>
+                <td><a href="#" onclick="set_current_moment({{$i}})">View</a></td>
+            </tr>
+        {{end}} 
+    </tbody>
+</table>
 
 <script>
     let streamName = "{{.Stream.Name}}";
     let watchAreaName = "{{.WatchArea.Name}}";
+    let interval = {{.Stream.MotionInterval}};
     let moments = [
     {{range $moment := .Moments}}
         [