Mercurial > lbo > hg > analyrics
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> - + < begin > <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> + < duration > + <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; }