From f92dfd54861773499b95f43609169ec0042ec4a9 Mon Sep 17 00:00:00 2001
From: Matthias Wirth <matthias.wirth@gmail.com>
Date: Mon, 24 May 2021 00:27:43 +0200
Subject: [PATCH] more replay interface tweaks

---
 html/index.html | 41 ++---------------------
 html/script.js  | 89 ++++++++++++++++++++++++++++++++++++-------------
 html/style.css  | 19 +++++------
 3 files changed, 76 insertions(+), 73 deletions(-)

diff --git a/html/index.html b/html/index.html
index 472cd8c..ff99112 100644
--- a/html/index.html
+++ b/html/index.html
@@ -753,46 +753,11 @@
           <p id="dateHint" class="hintText">Date:</p>
           <input type="text" class="datepicker" id="replayDatepicker">
           <p id="timeHint" class="hintText">Time:</p>
-          <select id="hourSelect">
-            <option>0</option>
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-            <option>6</option>
-            <option>7</option>
-            <option>8</option>
-            <option>9</option>
-            <option>10</option>
-            <option>11</option>
-            <option>12</option>
-            <option>13</option>
-            <option>14</option>
-            <option>15</option>
-            <option>16</option>
-            <option>17</option>
-            <option>18</option>
-            <option>19</option>
-            <option>20</option>
-            <option>21</option>
-            <option>22</option>
-            <option>23</option>  
-          </select> 
-          <select id="minuteSelect">
-            <option>00</option>
-            <option>15</option>
-            <option>30</option>
-            <option>45</option>
-          </select>
+          <p id="hourSelect"></p>
+          <p id="minuteSelect"></p>
           <p id="timeZone">UTC</p>
           <p id="speedHint" class="hintText">Speed:</p>
-          <select id="speedSelect">
-            <option>10</option>
-            <option>20</option>
-            <option>30</option>
-            <option>40</option>
-          </select>
+          <p id="speedSelect"></p>
           <button id="findHistory">Find History</button>
         </div> <!-- replayBar -->
 
diff --git a/html/script.js b/html/script.js
index f113034..7119f5b 100644
--- a/html/script.js
+++ b/html/script.js
@@ -682,12 +682,8 @@ function initPage() {
             ts.setUTCMinutes(numbers[4]);
         }
 
-        replay = {
-            playing: true,
-            ts: ts,
-            ival: 60 * 1000,
-            speed: 30,
-        };
+        replay = replayDefaults(ts);
+        replay.playing = true;
     }
 
     if (onMobile)
@@ -839,17 +835,17 @@ function initPage() {
     });
     jQuery("#findHistory").click(function(){
         console.log("replayDatepicker: "+replayDatepicker.value);
-        console.log("hourSelect: "+hourSelect.value);
-        console.log("minuteSelect: "+minuteSelect.value);
-        console.log("speedSelect: "+speedSelect.value);
+        console.log("hourSelect: "+ replay.hours);
+        console.log("minuteSelect: "+ replay.minutes);
+        console.log("speedSelect: "+ replay.speed);
         let date = new Date(replayDatepicker.value);
-        date.setUTCHours(Number(hourSelect.value));
-        date.setUTCMinutes(Number(minuteSelect.value));
+        date.setUTCHours(Number(replay.hours));
+        date.setUTCMinutes(Number(replay.minutes));
 
         replay.ival = 60 * 1000;
-        replay.speed = Number(speedSelect.value);
 
         playReplay(true);
+        replayClear();
         loadReplay(date);
     });
 
@@ -5848,12 +5844,27 @@ function currentExtent(factor) {
     return myExtent(OLMap.getView().calculateExtent(size));
 }
 
+function replayDefaults(ts) {
+    return {
+        playing: false,
+        ts: ts,
+        ival: 60 * 1000,
+        speed: 30,
+        hours: ts.getUTCHours(),
+        minutes: ts.getUTCMinutes(),
+    };
+}
+
+function replayClear() {
+    reaper(true);
+    refreshFilter();
+}
+
 function loadReplay(ts) {
     let epochms = new Date().getTime();
     if (epochms - ts.getTime() < 30 * 60 * 1000) {
-        reaper(true);
-        refreshFilter();
         ts = new Date(epochms - 60 * 60 * 1000);
+        replayClear();
     }
     replay.ts = ts;
     let xhrOverride = new XMLHttpRequest();
@@ -5953,8 +5964,7 @@ function play(index) {
             return;
         } else {
             index = 0;
-            reaper(true);
-            refreshFilter();
+            replayClear();
         }
     }
     replay.index = index;
@@ -6177,6 +6187,11 @@ function playReplay(state){
     }
 };
 
+function replaySetTimeHint() {
+    jQuery('#timeHint').text('Time: '
+        + replay.hours.toString().padStart(2, '0') + ':'
+        + replay.minutes.toString().padStart(2, '0'));
+}
 function showReplayBar(){
     console.log('showReplayBar()');
     if (showingReplayBar){
@@ -6194,20 +6209,46 @@ function showReplayBar(){
         let ts = new Date();
         ts.setUTCHours(ts.getUTCHours() - 1);
         if (!replay) {
-            replay = {
-                playing: false,
-                ts: ts,
-                ival: 60 * 1000,
-                speed: 30,
-            };
+            replay = replayDefaults(ts);
+            replay.playing = false;
         }
         ts = new Date(replay.ts);
         ts.setUTCMinutes((parseInt((ts.getUTCMinutes() + 7.5)/15) * 15) % 60);
-        jQuery("#hourSelect").val(ts.getUTCHours()).change();
-        jQuery("#minuteSelect").val(ts.getUTCMinutes()).change();
         jQuery("#replayDatepicker").datepicker('setDate', ts);
 
         showingReplayBar = true;
+        jQuery('#hourSelect').slider({
+            value: ts.getUTCHours(),
+            step: 1,
+            min: 0,
+            max: 23,
+            slide: function(event, ui) {
+                replay.hours = ui.value;
+                replaySetTimeHint();
+            },
+        });
+        jQuery('#minuteSelect').slider({
+            value: ts.getUTCMinutes(),
+            step: 1,
+            min: 0,
+            max: 59,
+            slide: function(event, ui) {
+                replay.minutes = ui.value;
+                replaySetTimeHint();
+            },
+        });
+        replaySetTimeHint();
+        jQuery('#speedSelect').slider({
+            value: replay.speed,
+            step: 1,
+            min: 1,
+            max: 60,
+            slide: function(event, ui) {
+                replay.speed = ui.value;
+                jQuery('#speedHint').text('Speed: ' + replay.speed + 'x');
+            },
+        });
+        jQuery('#speedHint').text('Speed: ' + replay.speed + 'x');
     }
 };
 
diff --git a/html/style.css b/html/style.css
index de846e9..8ad97e8 100644
--- a/html/style.css
+++ b/html/style.css
@@ -824,15 +824,15 @@ input{
   position: absolute;
   height: 10px;
   bottom: 0%;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 3fr 1fr 1fr 1fr;
   grid-template-rows: 20px 40px 20px;
   justify-items: center;
   align-items: center;
   grid-template-areas:
-    ". datehint timehint timehint timezonehint speedhint ."
-    "play date hours minutes timezone speed findhistory"
-    ". . showingdate showingdate showingdate . ."
-    ". . . . . . .";
+    ". datehint timehint hours speedhint ."
+    "play date . minutes speed findhistory"
+    ". . showingdate showingdate showingdate ."
+    ". . . . . .";
 }
 #replayPlay{
   grid-area: play;
@@ -841,13 +841,16 @@ input{
   grid-area: date;
 }
 #hourSelect{
+  width: 80%;
   grid-area: hours;
 }
 #minuteSelect{
+  width: 80%;
   grid-area: minutes;
 }
 #speedSelect{
   grid-area: speed;
+  width: 80%;
 }
 #findHistory{
    grid-area: findhistory;
@@ -861,9 +864,6 @@ input{
 #dateHint{
   grid-area: datehint;
 }
-#speedSelect{
-  grid-area: speed;
-}
 #speedHint{
   grid-area: speedhint;
 }
@@ -871,8 +871,5 @@ input{
     grid-area: showingdate;
     justify-self:start;
 }
-#timeZone{
-  grid-area:timezone;
-}