refactor: migrate most non-chart-related js logic to petite-vue (resolve #282)

static/assets/base.js

@@ -0,0 +1,37 @@
+// @formatter:off
+const MD5 = function(d){var r = M(V(Y(X(d),8*d.length)));return r.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function V(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){var h=m,t=f,g=r,e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){var m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}
+
+function findParentAttribute(el, attrName) {
+    if (el.attributes[attrName]) return el.attributes[attrName]
+    if (!el.parentNode || !el.parentNode.attributes) return null
+    return findParentAttribute(el.parentNode, attrName)
+}
+
+function copyApiKey(event) {
+    const el = document.getElementById('api-key-container')
+    el.select()
+    el.setSelectionRange(0, 9999)
+    document.execCommand('copy')
+    event.stopPropagation()
+}
+
+window.addEventListener('load', () => {
+    const baseUrl = location.href.substring(0, location.href.lastIndexOf('/'))
+    document.querySelectorAll('.with-url-src').forEach(e => {
+        e.setAttribute('src', e.getAttribute('src').replace('%s', baseUrl))
+    })
+    document.querySelectorAll('.with-url-src-no-scheme').forEach(e => {
+        const strippedUrl = baseUrl.replace(/https?:\/\//, '')
+        e.setAttribute('src', e.getAttribute('src').replace('%s', strippedUrl))
+    })
+    document.querySelectorAll('.with-url-value').forEach(e => {
+        e.setAttribute('value', e.getAttribute('value').replace('%s', baseUrl))
+    })
+    document.querySelectorAll('.with-url-inner').forEach(e => {
+        e.innerHTML = e.innerHTML.replace('%s', baseUrl)
+    })
+    document.querySelectorAll('.with-url-inner-no-scheme').forEach(e => {
+        const strippedUrl = baseUrl.replace(/https?:\/\//, '')
+        e.innerHTML = e.innerHTML.replace('%s', strippedUrl)
+    })
+})

static/assets/summary.js

@@ -35,7 +35,6 @@ topNPickers.forEach(e => {
 
 let charts = []
 let showTopN = []
-let resizeCount = 0
 
 Chart.defaults.color = "#E2E8F0"
 Chart.defaults.borderColor = "#242b3a"
@@ -353,11 +352,6 @@ function getPresentDataMask() {
     return data.map(list => (list ? list.reduce((acc, e) => acc + e.total, 0) : 0) > 0)
 }
 
-function getContainer(chart) {
-    // See https://github.com/muety/wakapi/issues/235#issuecomment-907762100
-    return chart.canvas.parentNode
-}
-
 function getColor(seed, index) {
     if (index < baseColors.length) return baseColors[(index + 5) % baseColors.length]
     return getRandomColor(seed)
@@ -388,61 +382,12 @@ function hexToRgb(hex) {
     } : null;
 }
 
-function togglePopup(event, id) {
-    const el = document.getElementById(id)
-    if (el.classList.contains('hidden')) {
-        el.classList.remove('hidden')
-        el.classList.add('block')
-    } else {
-        el.classList.add('hidden')
-        el.classList.remove('block')
-    }
-    event.stopPropagation()
-}
-
-function copyApiKey(event) {
-    const el = document.getElementById('api-key-container')
-    el.select()
-    el.setSelectionRange(0, 9999)
-    document.execCommand('copy')
-    event.stopPropagation()
-}
-
-function submitTimePicker(event) {
-    const el = document.getElementById('time-picker-form')
-    el.submit()
-}
-
 function swapCharts(showEntity, hideEntity) {
     document.getElementById(`${showEntity}-container`).parentElement.classList.remove('hidden')
     document.getElementById(`${hideEntity}-container`).parentElement.classList.add('hidden')
 }
 
-function updateTimeSelection() {
-    const query = new URLSearchParams(window.location.search)
-    if (query.has('interval')) {
-        const targetEl = document.getElementById('current-time-selection')
-        const refEl = document.getElementById(`time-option-${query.get('interval')}`)
-        targetEl.innerText = refEl ? refEl.innerText : 'Unknown'
-    }
-}
-
-
-
-// Click outside
-window.addEventListener('click', function (event) {
-    if (event.target.classList.contains('popup')) {
-        return
-    }
-    document.querySelectorAll('.popup').forEach(el => {
-        el.classList.remove('block')
-        el.classList.add('hidden')
-    })
-})
-
 window.addEventListener('load', function () {
-    updateTimeSelection()
-
     topNPickers.forEach(e => e.addEventListener('change', () => {
         parseTopN()
         draw([parseInt(e.attributes['data-entity'].value)])

views/foot.tpl.html

@@ -2,4 +2,4 @@
 <script src="assets/vendor/seedrandom.min.js"></script>
 <script src="assets/vendor/chart.min.js"></script>
 <script src="assets/icons.js"></script>
-<script src="assets/app.js"></script>
+<script src="assets/base.js"></script>

views/menu-main.tpl.html

@@ -1,10 +1,4 @@
 <script type="module">
-    function findParentAttribute(el, attrName) {
-        if (el.attributes[attrName]) return el.attributes[attrName]
-        if (!el.parentNode || !el.parentNode.attributes) return null
-        return findParentAttribute(el.parentNode, attrName)
-    }
-
     PetiteVue.createApp({
         $delimiters: ['${', '}'],
         state: {
@@ -15,9 +9,7 @@
         mounted() {
             window.addEventListener('click', (e) => {
                 const skip = findParentAttribute(e.target, 'data-trigger-for')?.value
-                Object.keys(this.state).forEach(k => {
+                Object.keys(this.state).filter(k => k !== skip).forEach(k => this.state[k] = false)
-                    if (k !== skip) this.state[k] = false
-                })
             })
         }
     }).mount('#main-menu')

views/settings.tpl.html

@@ -684,27 +684,6 @@
 
 {{ template "footer.tpl.html" . }}
 
-<script type="text/javascript">
-    const baseUrl = location.href.substring(0, location.href.lastIndexOf('/'))
-    document.querySelectorAll('.with-url-src').forEach(e => {
-        e.setAttribute('src', e.getAttribute('src').replace('%s', baseUrl))
-    })
-    document.querySelectorAll('.with-url-src-no-scheme').forEach(e => {
-        const strippedUrl = baseUrl.replace(/https?:\/\//, '')
-        e.setAttribute('src', e.getAttribute('src').replace('%s', strippedUrl))
-    })
-    document.querySelectorAll('.with-url-value').forEach(e => {
-        e.setAttribute('value', e.getAttribute('value').replace('%s', baseUrl))
-    })
-    document.querySelectorAll('.with-url-inner').forEach(e => {
-        e.innerHTML = e.innerHTML.replace('%s', baseUrl)
-    })
-    document.querySelectorAll('.with-url-inner-no-scheme').forEach(e => {
-        const strippedUrl = baseUrl.replace(/https?:\/\//, '')
-        e.innerHTML = e.innerHTML.replace('%s', strippedUrl)
-    })
-</script>
-
 {{ template "foot.tpl.html" . }}
 </body>
 

views/signup.tpl.html

@@ -3,13 +3,53 @@
 
 {{ template "head.tpl.html" . }}
 
+<script type="module">
+    // Constants
+    const defaultAvatarUrl = 'assets/images/unknown.svg'
+    const avatarUrlTemplate = {{ avatarUrlTemplate }}
+
+    function guessTimezone() {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone
+    }
+
+    let debounceTimeout
+
+    PetiteVue.createApp({
+        timezone: guessTimezone(),
+        username: '',
+        email: '',
+        avatarUrl: defaultAvatarUrl,
+        updateAvatar() {
+            if (!avatarUrlTemplate) return
+            if (debounceTimeout) {
+                clearTimeout(debounceTimeout)
+            }
+            debounceTimeout = setTimeout(() => {
+                let url = avatarUrlTemplate
+
+                if ((url.includes('{username') && !this.username) || (url.includes('{email') && !this.email)) {
+                    url = defaultAvatarUrl
+                } else {
+                    url = url.replaceAll('{username}', this.username)
+                    url = url.replaceAll('{email}', this.email)
+                    url = url.replaceAll('{username_hash}', MD5(this.username))
+                    url = url.replaceAll('{email_hash}', MD5(this.email))
+                    url = url.includes('{') ? defaultAvatarUrl : url
+                }
+                console.log(url)
+                this.avatarUrl = url
+            }, 500)
+        }
+    }).mount('#signup-page')
+</script>
+
 <body class="bg-gray-900 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-lg mx-auto justify-center">
 
 {{ template "header.tpl.html" . }}
 
 {{ template "alerts.tpl.html" . }}
 
-<main class="mt-10 flex-grow flex justify-center w-full">
+<main class="mt-10 flex-grow flex justify-center w-full" id="signup-page">
     <div class="flex-grow max-w-lg mt-10">
         <div class="mb-8">
             <h1 class="font-semibold text-3xl text-white m-0 mb-2">Sign up to Wakapi</h1>
@@ -26,25 +66,27 @@
         </div>
 
         <form class="mt-10" action="signup" method="post">
-            <input type="hidden" name="location" id="input-location">
+            <input type="hidden" name="location" id="input-location" v-model="timezone">
 
             <div class="flex space-x-4">
                 <div class="mt-1">
-                    <img id="avatar" src="assets/images/unknown.svg" width="96px" class="rounded-full border-4 border-green-700 cursor-pointer" alt="User Profile Avatar" title="Your Avatar"/>
+                    <img v-cloak id="avatar" :src="avatarUrl" width="96px" class="rounded-full border-4 border-green-700 cursor-pointer" alt="User Profile Avatar" title="Your Avatar"/>
                 </div>
 
                 <div>
                     <div class="mb-4">
                         <input class="appearance-none bg-gray-850 focus:bg-gray-800 text-gray-300 outline-none rounded w-full py-2 px-4"
+                               v-model="username"
                                type="text" id="username"
                                name="username" placeholder="Choose a username" minlength="1"
-                               onkeyup="updateAvatar()"
+                               @keyup="updateAvatar"
                                required autofocus>
                     </div>
                     <div class="mb-4">
                         <input class="appearance-none bg-gray-850 focus:bg-gray-800 text-gray-300 outline-none rounded w-full py-2 px-4"
+                               v-model="email"
                                type="email" id="email"
-                               name="email" onkeyup="updateAvatar()" placeholder="Your e-mail address">
+                               name="email" @keyup="updateAvatar" placeholder="Your e-mail address">
                         <div class="text-xs text-gray-600 mt-2">E-Mail address is optional, but required for some weekly reports and password reset.</div>
                     </div>
                 </div>
@@ -82,52 +124,6 @@
 
 {{ template "foot.tpl.html" . }}
 
-<script type="text/javascript">
-    // @formatter:off
-    const MD5 = function(d){var r = M(V(Y(X(d),8*d.length)));return r.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function V(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){var h=m,t=f,g=r,e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){var m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}
-
-    function guessTimezone() {
-        return Intl.DateTimeFormat().resolvedOptions().timeZone
-    }
-
-    document.getElementById('input-location').setAttribute('value', guessTimezone())
-
-    // Avatar
-
-    let debounceTimeout
-    const avatarEl = document.getElementById('avatar')
-    const usernameInput = document.getElementById('username')
-    const emailInput = document.getElementById('email')
-    const defaultAvatarUrl = 'assets/images/unknown.svg'
-    const avatarUrlTemplate = {{ avatarUrlTemplate }}
-
-    function updateAvatar() {
-        if (!avatarUrlTemplate) return
-
-        if (debounceTimeout) {
-            clearTimeout(debounceTimeout)
-        }
-
-        debounceTimeout = setTimeout(() => {
-            let url = avatarUrlTemplate
-
-            if ((url.includes('{username') && !usernameInput.value) || (url.includes('{email') && !emailInput.value)) {
-                url = defaultAvatarUrl
-            } else {
-                url = url.replaceAll('{username}', usernameInput.value)
-                url = url.replaceAll('{email}', emailInput.value)
-                url = url.replaceAll('{username_hash}', MD5(usernameInput.value))
-                url = url.replaceAll('{email_hash}', MD5(emailInput.value))
-                url = url.includes('{') ? defaultAvatarUrl : url
-            }
-
-            avatarEl.src = url
-        }, 500)
-
-
-
-    }
-</script>
 </body>
 
 </html>

views/summary.tpl.html

@@ -3,6 +3,41 @@
 
 {{ template "head.tpl.html" . }}
 
+<script type="module">
+    // Constants
+    const timeSelection = '{{ .From | datetime }} - {{ .To | ceildate | datetime }}'
+    const fromDate = '{{ .From | simpledate }}'
+    const toDate = '{{ .To | ceildate | simpledate }}'
+
+    // Elements
+    const formTimePicker = document.getElementById('time-picker-form')
+
+    PetiteVue.createApp({
+        $delimiters: ['${', '}'],
+        state: {
+            showDropdownTimepicker: false,
+        },
+        fromDate: fromDate,
+        toDate: toDate,
+        timeSelection: timeSelection,
+        onDateUpdated() {
+            formTimePicker.submit()
+        },
+        mounted() {
+            window.addEventListener('click', (e) => {
+                const skip = findParentAttribute(e.target, 'data-trigger-for')?.value
+                Object.keys(this.state).filter(k => k !== skip).forEach(k => this.state[k] = false)
+            })
+
+            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'
+            }
+        }
+    }).mount('#summary-page')
+</script>
+
 <body class="relative bg-gray-900 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-xl mx-auto justify-center">
 
 {{ template "menu-main.tpl.html" . }}
@@ -11,35 +46,35 @@
 
 {{ if .User.HasData }}
 
-<div class="flex justify-end mt-12 relative">
+<div class="flex justify-end mt-12 relative" id="summary-page" v-scope @vue:mounted="mounted">
-    <div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer justify-end" onclick="togglePopup(event, 'time-picker-dropdown')">
+    <div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer justify-end" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">
         <span class="iconify inline text-2xl text-gray-400 flex-grow" data-icon="fa-regular:calendar-alt"></span>
-        <a id="current-time-selection" class="text-gray-300 -mb-1">{{ .From | datetime }} - {{ .To | ceildate | datetime }}</a>
+        <a v-cloak id="current-time-selection" class="text-gray-300 -mb-1">${timeSelection}</a>
         <span class="iconify inline text-2xl text-gray-400" data-icon="akar-icons:chevron-down"></span>
     </div>
 
-    <div class="hidden z-10 absolute top-0 right-0 popup mt-12 w-40" id="time-picker-dropdown">
+    <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="flex-grow flex flex-col flex bg-gray-850 shadow-md rounded w-40 p-1 ">
-            <a id="time-option-today" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=today" onclick="togglePopup(event, 'time-picker-dropdown')">Today</a>
+            <a id="time-option-today" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=today"  @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Today</a>
-            <a id="time-option-yesterday" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=yesterday" onclick="togglePopup(event, 'time-picker-dropdown')">Yesterday</a>
+            <a id="time-option-yesterday" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=yesterday"  @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Yesterday</a>
-            <a id="time-option-week" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=week" onclick="togglePopup(event, 'time-picker-dropdown')">This Week</a>
+            <a id="time-option-week" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=week"  @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">This Week</a>
-            <a id="time-option-month" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=month" onclick="togglePopup(event, 'time-picker-dropdown')">This Month</a>
+            <a id="time-option-month" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=month"  @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">This Month</a>
-            <a id="time-option-year" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=year" onclick="togglePopup(event, 'time-picker-dropdown')">This Year</a>
+            <a id="time-option-year" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=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-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=last_7_days" onclick="togglePopup(event, 'time-picker-dropdown')">Past 7 Days</a>
+            <a id="time-option-last_7_days" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=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-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=last_30_days" onclick="togglePopup(event, 'time-picker-dropdown')">Past 30 Days</a>
+            <a id="time-option-last_30_days" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=last_30_days"  @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Past 30 Days</a>
-            <a id="time-option-last_12_months" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=last_12_months" onclick="togglePopup(event, 'time-picker-dropdown')">Past 12 Months</a>
+            <a id="time-option-last_12_months" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=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-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=any" onclick="togglePopup(event, 'time-picker-dropdown')">All Time</a>
+            <a id="time-option-any" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=any"  @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">All Time</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-gray-900 rounded p-1 border-2 border-gray-800">
                     <label for="from-date-picker" class="text-gray-500 text-xs ml-2">Start:</label>
-                    <input id="from-date-picker" type="date" name="from" max="{{ .ToTime.T | simpledate }}" class="text-sm text-gray-300 bg-gray-900 cursor-pointer"
+                    <input v-model="fromDate" id="from-date-picker" type="date" name="from" max="{{ .ToTime.T | simpledate }}" class="text-sm text-gray-300 bg-gray-900 cursor-pointer"
-                           value="{{ .From | simpledate }}" onclick="event.stopPropagation()" oninput="submitTimePicker(event)" required>
+                           required @input="onDateUpdated" data-trigger-for="showDropdownTimepicker">
                 </div>
                 <div class="flex flex-col space-x-1 bg-gray-900 rounded p-1 border-2 border-gray-800">
                     <label for="to-date-picker" class="text-gray-500 text-xs ml-2">End:</label>
-                    <input id="to-date-picker" type="date" name="to" min="{{ .FromTime.T | simpledate }}" class="text-sm text-gray-300 bg-gray-900 cursor-pointer"
+                    <input v-model="toDate" id="to-date-picker" type="date" name="to" min="{{ .FromTime.T | simpledate }}" class="text-sm text-gray-300 bg-gray-900 cursor-pointer"
-                           value="{{ .To | ceildate | simpledate }}" onclick="event.stopPropagation()" oninput="submitTimePicker(event)" required>
+                           required @input="onDateUpdated" data-trigger-for="showDropdownTimepicker">
                 </div>
             </form>
         </div>
@@ -197,7 +232,7 @@
 
                 <!-- https://github.com/muety/wakapi/issues/224#issuecomment-890855563 -->
                 # Set <em>api_url = <span class="with-url-inner">%s/api/heartbeat</span></em><br>
-                # Set <em>api_key = <span id="api-key-instruction"></span></em><br><br>
+                # Set <em>api_key = <span id="api-key-instruction">{{ .ApiKey }}</span></em><br><br>
 
                 # <strong>Step 3:</strong> Start coding and then check back here!
             </div>
@@ -222,22 +257,9 @@
     wakapiData.languages = {{ .Languages | json }}
     wakapiData.machines = {{ .Machines | json }}
     wakapiData.labels = {{ .Labels | json }}
-
-    if (document.getElementById('to-date-picker') !== null) {
-        document.getElementById("to-date-picker").onchange = function () {
-            var input = document.getElementById("from-date-picker");
-            input.setAttribute("max", this.value);
-        }
-
-        document.getElementById("from-date-picker").onchange = function () {
-            var input = document.getElementById("to-date-picker");
-            input.setAttribute("min", this.value);
-        }
-    } else {
-        document.getElementById('api-key-instruction').innerHTML = document.getElementById('api-key-container').value
-    }
-
 </script>
+<script src="assets/summary.js"></script>
+
 </body>
 
 </html>