working interface for selecting different moments

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];
-    });
-});
+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();
+}

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}}
         [