From a40dd4c835df102b6738c8c26342e39b220d3b03 Mon Sep 17 00:00:00 2001
From: Trek H <trek.hopton@gmail.com>
Date: Sun, 11 Aug 2019 19:42:51 +0930
Subject: [PATCH] audio-player: added form for filling in timestamp and media
 info

---
 cmd/audio-player/index.html | 103 ++++++++++++++++++++++++++++++------
 cmd/audio-player/main.js    |   2 +-
 2 files changed, 89 insertions(+), 16 deletions(-)
diff --git a/cmd/audio-player/index.html b/cmd/audio-player/index.html
index 836a974c..167a5554 100644
--- a/cmd/audio-player/index.html
+++ b/cmd/audio-player/index.html
@@ -7,27 +7,100 @@
     <script type="text/javascript" src="pcm-to-wav.js"></script>
     <script type="text/javascript" src="adpcm.js"></script>
     <script type="text/javascript" src="main.js"></script>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <script type="text/javascript">
+        function sync(dateID, tsID, dateChanged) {
+            if (dateChanged) { // Go from date to Unix timestamp.
+                var s = document.getElementById(dateID).value;
+                if (s.length == 16) {
+                    s += ':00'; // Append seconds.
+                }
+                s += 'Z';
+                var dt = new Date(s)
+                document.getElementById(tsID).value = (dt.getTime() / 1000).toString();
+            } else { // Go from Unix timestamp to local date.
+                var ts = parseInt(document.getElementById(tsID).value) * 1000;
+                var dt = new Date(ts).toISOString().slice(0, -1);
+                document.getElementById(dateID).value = dt;
+            }
+        }
+
+        function presubmit() {
+            if (document.getElementById('st').value == "" && document.getElementById('sd').value != "") {
+                sync('sd', 'st', true);
+            }
+            if (document.getElementById('ft').value == "" && document.getElementById('fd').value != "") {
+                sync('fd', 'ft', true);
+            }
+            if (document.getElementById('ft').value == "") {
+                document.getElementById('ts').value = document.getElementById('st').value;
+            } else {
+                document.getElementById('ts').value = document.getElementById('st').value + '-' + document
+                    .getElementById('ft').value;
+            }
+        }
+    </script>
 </head>
 
 <body style="height: 100%">
-    <div class="jumbotron">
-        <div class="container-fluid">
-            <input type="file" id="input">
-        </div>
-        <div class="container-fluid">
-            <audio controls="controls" id="audio">
-                Your browser does not support the <code>audio</code> element.
-                <source id="source" src="" type="audio/wav" />
-            </audio>
+    <div class="card m-auto" style="width: 30rem;">
+        <div class="card-body">
+            <div class="container-fluid">
+                <div class="form-group">
+                    <input class="form-control-file" type="file" id="input">
+                </div>
+            </div>
+            <div class="container-fluid">
+                <form action="/search" enctype="multipart/form-data" method="post" onsubmit="presubmit();">
+                    <div class="form-group">
+                        <label>App key:</label>
+                        <input class="form-control form-control-sm" type="input" name="ak">
+                    </div>
+                    <div class="form-group">
+                        <label>Media ID:</label>
+                        <input class="form-control form-control-sm" type="input" name="id" id="id">
+                    </div>
+                    <div class="form-group">
+                        <label>Start date or timestamp:</label>
+                        <div class="row">
+                            <div class="col">
+                                <input class="form-control form-control-sm" name="sd" type="datetime-local" id="sd" onchange="sync('sd', 'st', true);">
+                            </div>
+                            <div class="col">
+                                <input class="form-control form-control-sm" name="st" type="input" id="st" onchange="sync('sd', 'sd', false);">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Finish date or timestamp:</label>
+                        <div class="row">
+                            <div class="col">
+                                <input class="form-control form-control-sm" name="fd" type="datetime-local" id="fd" onchange="sync('fd', 'ft', true);">
+                            </div>
+                            <div class="col">
+                                <input class="form-control form-control-sm" name="ft" type="input" id="ft" onchange="sync('fd', 'fd', false);">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <input class="btn btn-primary" type="submit" value="Search" name="submit">
+                    </div>
+                    <div class="form-group">
+                        <input type="hidden" name="ts" id="ts">
+                    </div>
+                </form>
+                <div class="container-fluid">
+                    <audio class="mx-auto" controls="controls" id="audio">
+                        Your browser does not support the <code>audio</code> element.
+                        <source id="source" src="" type="audio/wav" />
+                    </audio>
+                </div>
+            </div>
         </div>
     </div>
-    <footer id="sticky-footer" class="footer py-4 bg-dark text-white-50"
-        style="position: absolute; bottom: 0; width: 100%;">
+    <footer id="sticky-footer" class="footer fixed-bottom py-4 bg-dark text-white-50" style="width: 100%;">
         <div class="container text-center">
-            <small>&copy;2019 Australian Ocean Laboratory Limited (AusOcean) (<a rel="license"
-                    href="https://www.ausocean.org/license">License</a>)</small>
+            <small>&copy;2019 Australian Ocean Laboratory Limited (AusOcean) (<a rel="license" href="https://www.ausocean.org/license">License</a>)</small>
         </div>
     </footer>
 </body>
diff --git a/cmd/audio-player/main.js b/cmd/audio-player/main.js
index 1d893bb3..488999d6 100644
--- a/cmd/audio-player/main.js
+++ b/cmd/audio-player/main.js
@@ -23,7 +23,7 @@ LICENSE
 */
 
 window.onload = function () {
-	document.getElementById('input').addEventListener('change', processData)
+	document.getElementById('input').addEventListener('change', processData);
 }
 
 function processData() {
