chore: page footer

feat: keyboard shortcuts for time picker (resolve #852 )
2025-12-05 22:20:24 -08:00 · 2025-10-13 21:52:06 +02:00 · 2025-10-13 21:37:59 +02:00
12 changed files with 46 additions and 22 deletions
--- a/routes/routes.go
+++ b/routes/routes.go
@@ -1,11 +1,12 @@
 package routes

 import (
-	"github.com/duke-git/lancet/v2/strutil"
-	"github.com/muety/wakapi/helpers"
 	"html/template"
 	"strings"

+	"github.com/duke-git/lancet/v2/strutil"
+	"github.com/muety/wakapi/helpers"
+
 	"github.com/duke-git/lancet/v2/datetime"
 	"github.com/muety/wakapi/config"
 	"github.com/muety/wakapi/models"
@@ -46,6 +47,9 @@ func DefaultTemplateFuncs() template.FuncMap {
 		"getBasePath": func() string {
 			return config.Get().Server.BasePath
 		},
+		"getPublicUrl": func() string {
+			return config.Get().Server.PublicUrl
+		},
 		"getVersion": func() string {
 			return config.Get().Version
 		},
--- a/scripts/bundle_icons.js
+++ b/scripts/bundle_icons.js
@@ -91,6 +91,7 @@ let icons = [
    'devicon-plain:okta',
    'devicon-plain:facebook',
    'mdi:microsoft',
+    'twemoji:flag-germany',
 ]

 const output = path.normalize(path.join(__dirname, '../static/assets/js/icons.dist.js'))
--- a/static/assets/css/app.css
+++ b/static/assets/css/app.css
@@ -181,7 +181,7 @@ main {
 }

 .entity-filter-control {
-    width: 180px; 
+    width: 180px;
    @apply text-foreground text-sm;
 }

@@ -227,8 +227,16 @@ main {
    }
 }

-@media print {
+#time-picker-dropdown kbd {
+    border: rgb(var(--muted)) 1px solid;
+    border-radius: .25rem;
+    padding: 0 8px;
+    font-weight: normal;
+    font-size: x-small;
+    margin-left: 8px;
+}

+@media print {
    /* Avoid the element from being breaked */
    .no-break {
        page-break-inside: avoid;
--- a/static/assets/css/app.dist.css
+++ b/static/assets/css/app.dist.css
--- a/static/assets/css/app.dist.css.br
+++ b/static/assets/css/app.dist.css.br
--- a/static/assets/js/components/time-picker.js
+++ b/static/assets/js/components/time-picker.js
@@ -25,8 +25,15 @@ function TimePicker({ fromDate, toDate, timeSelection }) {
            const query = new URLSearchParams(window.location.search)
            if (query.has('interval')) {
                const refEl = document.getElementById(`time-option-${query.get('interval')}`)
-                this.timeSelection = refEl ? refEl.innerText : 'Unknown'
+                this.timeSelection = refEl ? refEl.childNodes[0].textContent : 'Unknown'
            }
+
+            // Time picker keyboard shortcuts
+            document.addEventListener('keyup', e => {
+                if (e.target !== document.body) return
+                const optionEl = document.querySelector(`a[data-hotkey="${e.key}"]`)
+                if (optionEl) optionEl.click()
+            })
        }
    }
 }
--- a/static/assets/js/icons.dist.js
+++ b/static/assets/js/icons.dist.js
--- a/static/assets/js/icons.dist.js.br
+++ b/static/assets/js/icons.dist.js.br
--- a/static/assets/js/summary.js
+++ b/static/assets/js/summary.js
@@ -723,4 +723,4 @@ window.addEventListener('load', function () {
    togglePlaceholders(getPresentDataMask())
    draw()
    updateNumTotal()
-})
+})
--- a/views/footer.tpl.html
+++ b/views/footer.tpl.html
@@ -3,9 +3,13 @@
        {{ getVersion }} @ {{ getDbType }}
    </div>
    <div class="font-semibold text-sm">
-        Made with &nbsp; <span class="iconify inline" data-icon="bi:heart-fill"></span>&nbsp; by
-        <a href="https://muetsch.io" class="text-secondary hover:text-foreground">Ferdinand Mütsch</a> as
-        <a href="https://github.com/muety/wakapi" class="text-secondary hover:text-foreground">open-source</a> software
+        Made with &nbsp; <span class="iconify inline" data-icon="bi:heart-fill"></span>&nbsp; by <a href="https://muetsch.io" target="_blank" class="text-secondary hover:text-foreground">Ferdi</a>
+        <span>&nbsp;|&nbsp;</span>
+        Open source on &nbsp; <a href="https://github.com/muety/wakapi" target="_blank" rel="noreferrer noopener"><span class="iconify inline text-secondary hover:text-foreground" data-icon="codicon:github-inverted"></span></a>
+        {{ if eq getPublicUrl "https://wakapi.dev" }}
+        <span>&nbsp;|&nbsp;</span>
+        Hosted securely in &nbsp; <span class="iconify inline" data-icon="twemoji:flag-germany"></span>
+        {{ end }}
    </div>
    <div class="text-sm">
        <a href="imprint" class="font-semibold hover:text-secondary">Imprint, Cookies & Data Privacy</a>
--- a/views/summary.tpl.html
+++ b/views/summary.tpl.html
@@ -66,7 +66,7 @@
        <div class="flex-shrink-1 sm:flex-shrink-0" v-scope="TimePicker({
            fromDate: '{{ .From | simpledate }}',
            toDate: '{{ .To | ceildate | simpledate }}',
-            timeSelection: '{{ .From | datetime }} - {{ .To | ceildate | datetime }}'
+            timeSelection: '{{ .From | date }} - {{ .To | ceildate | date }}'
        })" @vue:mounted="mounted"></div>
    </div>

--- a/views/time-picker.tpl.html
+++ b/views/time-picker.tpl.html
@@ -7,16 +7,16 @@

    <div v-cloak v-show="state.showDropdownTimepicker" class="z-10 absolute top-0 right-0 popup mt-12 w-40" id="time-picker-dropdown">
        <div class="grow flex flex-col flex bg-card shadow-md rounded w-40 p-1 ">
-            <a id="time-option-today" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('today')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Today</a>
-            <a id="time-option-yesterday" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('yesterday')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Yesterday</a>
-            <a id="time-option-week" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('week')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">This Week</a>
-            <a id="time-option-month" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('month')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">This Month</a>
-            <a id="time-option-year" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('year')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">This Year</a>
-            <a id="time-option-last_7_days" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('last_7_days')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Past 7 Days</a>
-            <a id="time-option-last_30_days" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('last_30_days')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Past 30 Days</a>
-            <a id="time-option-last_6_months" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('last_6_months')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Past 6 Months</a>
-            <a id="time-option-last_12_months" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('last_12_months')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Past 12 Months</a>
-            <a id="time-option-any" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('any')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">All Time</a>
+            <a id="time-option-today" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('today')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker" data-hotkey="d">Today <kbd>D</kbd></a>
+            <a id="time-option-yesterday" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('yesterday')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker" data-hotkey="e">Yesterday <kbd>E</kbd></a>
+            <a id="time-option-week" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('week')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker" data-hotkey="w">This Week <kbd>W</kbd></a>
+            <a id="time-option-month" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('month')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker" data-hotkey="m">This Month <kbd>M</kbd></a>
+            <a id="time-option-year" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('year')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker" data-hotkey="y">This Year <kbd>Y</kbd></a>
+            <a id="time-option-last_7_days" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('last_7_days')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker" data-hotkey="1">Past 7 Days <kbd>1</kbd></a>
+            <a id="time-option-last_30_days" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('last_30_days')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker" data-hotkey="2">Past 30 Days <kbd>2</kbd></a>
+            <a id="time-option-last_6_months" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('last_6_months')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker" data-hotkey="3">Past 6 Months <kbd>3</kbd></a>
+            <a id="time-option-last_12_months" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('last_12_months')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker" data-hotkey="4">Past 12 Months <kbd>4</kbd></a>
+            <a id="time-option-any" class="submenu-item hover:bg-focused rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('any')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker" data-hotkey="a">All Time <kbd>A</kbd></a>
            <hr class="my-2">
            <form id="time-picker-form" class="flex flex-col space-y-1">
                <div class="flex flex-col space-x-1 bg-background rounded p-1 border-2 border-focused">
Author	SHA1	Message	Date
Ferdinand Mütsch	6a0ffe54e9	chore: page footer	2025-10-13 21:52:06 +02:00
Ferdinand Mütsch	452a9580c6	feat: keyboard shortcuts for time picker (resolve #852 )	2025-10-13 21:37:59 +02:00