changeset 54:d1f8cccac7b2

Dashboard: add duration navigation and reset button
author Lewin Bormann <lbo@spheniscida.de>
date Fri, 22 Jul 2022 18:24:27 -0700
parents f81d2fdcbe63
children ced9006f0f91
files assets/index_dashboard.html.hbs assets/static/style.css
diffstat 2 files changed, 26 insertions(+), 7 deletions(-) [+]
line wrap: on
line diff
--- a/assets/index_dashboard.html.hbs	Fri Jul 22 18:11:28 2022 -0700
+++ b/assets/index_dashboard.html.hbs	Fri Jul 22 18:24:27 2022 -0700
@@ -24,10 +24,9 @@
             function adjustURLDateParams(dateOffsetDays, durationMultiplier) {
                 let usp = new URLSearchParams(window.location.search);
                 let from_date = new Date(usp.get("from") || from);
-                console.log("from date", from_date, " ", dateOffsetDays);
                 let gduration = +usp.get("duration") || duration;
 
-                let new_from_date = formatDate(new Date(from_date.getTime() + dateOffsetDays * 86400 * 1000));
+                let new_from_date = formatDate(new Date(from_date.getTime() + (dateOffsetDays + gduration * (1-durationMultiplier)) * 86400 * 1000));
                 console.log(from_date, new_from_date);
                 let new_duration = gduration * durationMultiplier;
 
@@ -41,6 +40,12 @@
                 usp.set("includebots", box.checked);
                 window.location.search = usp.toString();
             };
+            function resetDateParams() {
+                let usp = new URLSearchParams(window.location.search);
+                usp.delete("duration");
+                usp.delete("from");
+                window.location.search = usp.toString();
+            };
         </script>
 
     </head>
@@ -61,17 +66,29 @@
     <!-- Time navigation -->
     <div id="timebox">
         <div id="timeindicator">
-            from {{ date.today }} ({{date.duration}} days)
+            from {{ date.today }} (for {{date.duration}} days)
         </div>
         <div id="timenav">
             <button onclick="adjustURLDateParams(-30, 1)">-30d</button>
             <button onclick="adjustURLDateParams(-7, 1)">-7d</button>
             <button onclick="adjustURLDateParams(-1, 1)">-1d</button>
-            &nbsp;&nbsp;
+            &nbsp;&lt; begin &gt;&nbsp;
             <button onclick="adjustURLDateParams(1, 1)">+1d</button>
             <button onclick="adjustURLDateParams(7, 1)">+7d</button>
             <button onclick="adjustURLDateParams(30, 1)">+30d</button>
         </div>
+        <div id="durationnav">
+            <button onclick="adjustURLDateParams(0, 1/8)">x⅛</button>
+            <button onclick="adjustURLDateParams(0, 1/4)">x¼</button>
+            <button onclick="adjustURLDateParams(0, 1/2)">x½</button>
+            &nbsp;&lt; duration &gt;&nbsp;
+            <button onclick="adjustURLDateParams(0, 2)">x2</button>
+            <button onclick="adjustURLDateParams(0, 4)">x4</button>
+            <button onclick="adjustURLDateParams(0, 8)">x8</button>
+        </div>
+        <div id="timereset">
+            <button onclick="resetDateParams()">Reset</button>
+        </div>
         <div id="topconfig">
             <label for="botbox" id="botboxlabel">Include bots</label>
             <input type="checkbox" id="botbox" name="botbox" onclick="toggleBots('botbox')"></input>
--- a/assets/static/style.css	Fri Jul 22 18:11:28 2022 -0700
+++ b/assets/static/style.css	Fri Jul 22 18:24:27 2022 -0700
@@ -19,11 +19,13 @@
 
 #timebox { display: flex; justify-content: center; flex-direction: column; padding: 0.5em; }
 #timenav { text-align: center; }
-#timeindicator { text-align: center; }
+#timeindicator { text-align: center; padding: 0.2em; }
+#durationnav { text-align: center; padding: 0.2em; }
+#timereset { text-align: center; padding: 0.3em; }
 
 #topconfig { text-align: center;  }
-#botbox { position: relative; top: .3em; }
-#botboxlabel { position: relative; top: -.3em }
+#botbox { position: relative; top: .0em; }
+#botboxlabel { position: relative; top: -.6em }
 
 /* Login form */
 #loginformbox {  display: flex; justify-content: center; }