--- a/assets/index.html.hbs	Sat Jul 16 13:20:20 2022 -0700
+++ b/assets/index.html.hbs	Sat Jul 16 16:24:13 2022 -0700
@@ -8,6 +8,29 @@
         <script src="static/chart.min.js" type="application/javascript"></script>
 
         <script type="application/javascript">
+            let from = "{{ date.today }}";
+            let duration = {{ date.duration }}; // in days
+
+            function formatDate(d) {
+                let m = d.getUTCMonth()+1; m = m < 10 ? "0"+m : m;
+                let day = d.getUTCDate(); day = day < 10 ? "0"+day : day;
+
+                return `${d.getUTCFullYear()}-${m}-${day}`;
+            }
+            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));
+                console.log(from_date, new_from_date);
+                let new_duration = gduration * durationMultiplier;
+
+                usp.set("from", new_from_date);
+                usp.set("duration", new_duration.toFixed());
+                window.location.search = usp.toString();
+            };
         </script>
 
         <style>
@@ -27,6 +50,9 @@
 
             .fullwidth { width: 95%; }
             .halfwidth { width: 48%; }
+
+            .timenav { display: flex; justify-content: center; }
+            .timeindicator { text-align: center; }
         </style>
 
     </head>
@@ -49,9 +75,16 @@
     {{#if error}}<div id="error"><span id="errortext">{{error}}</span></div>{{/if}}
 
     <!-- Time navigation -->
+    <div class="timeindicator">
+        from {{ date.today }} ({{date.duration}} days)
+    </div>
     <div class="timenav">
-        <div>{{ #each beginnav }}<a href="{{link}}">{{title}}</a>{{/each}}</div>
-        <div>{{ #each durationnav }}<a href="{{link}}">{{title}}</a>{{/each}}</div>
+        <button onclick="adjustURLDateParams(-30, 1)">-30d</button>
+        <button onclick="adjustURLDateParams(-7, 1)">-7d</button>
+        <button onclick="adjustURLDateParams(-1, 1)">-1d</button>
+        <button onclick="adjustURLDateParams(1, 1)">+1d</button>
+        <button onclick="adjustURLDateParams(7, 1)">+7d</button>
+        <button onclick="adjustURLDateParams(30, 1)">+30d</button>
     </div>
 
 

--- a/src/main.rs	Sat Jul 16 13:20:20 2022 -0700
+++ b/src/main.rs	Sat Jul 16 16:24:13 2022 -0700
@@ -221,8 +221,6 @@
 
     // Chart rendering
 
-    let mut charts = HashMap::<String, String>::new();
-
     // in seconds for this user.
     let tz_offset = match ConfigDBSession(&mut config_conn)
         .get_user_details(&lig.0)
@@ -290,16 +288,9 @@
         Err(e) => "undefined".to_string(),
     };
 
-    let begin_nav = [
-        ("-30d", -30),
-        ("-14d", -14),
-        ("-7d", -7),
-        ("-1d", -1),
-        ("+1d", 1),
-        ("+7d", 7),
-        ("+14d", 14),
-        ("+30d", 30),
-    ];
+    let ymd_format = time::format_description::parse("[year]-[month]-[day]").unwrap();
+    let tmpl_today = begin.date().format(&ymd_format).unwrap();
+    let tmpl_duration = duration.whole_days().to_string();
 
     Template::render(
         "index",
@@ -308,6 +299,9 @@
         domain: domain,
         username: lig.0,
         flash: f,
+        date: HashMap::<&str,&str>::from_iter([
+            ("today", tmpl_today.as_str()),
+            ("duration", tmpl_duration.as_str())].into_iter()),
         beginnav: vec![HashMap::<&str, &str>::from_iter([("link", "/abc"), ("title", "3d")].into_iter())],
         chartconfig: context![ visitsAndSessions: vissess, topPaths: toppaths, requestsBySession: reqbyses ]],
     )