From bb0d0569fd2146ef01756cb9ec6092fed626ec26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferdinand=20M=C3=BCtsch?= Date: Sun, 2 Jan 2022 18:30:22 +0100 Subject: [PATCH] chore: make time picker a standalone petite-vue component --- static/assets/js/components/summary.js | 3 ++ static/assets/js/components/time-picker.js | 51 ++++++++++------------ views/summary.tpl.html | 19 ++++---- views/time-picker.tpl.html | 4 +- 4 files changed, 39 insertions(+), 38 deletions(-) create mode 100644 static/assets/js/components/summary.js diff --git a/static/assets/js/components/summary.js b/static/assets/js/components/summary.js new file mode 100644 index 0000000..cbe9d49 --- /dev/null +++ b/static/assets/js/components/summary.js @@ -0,0 +1,3 @@ +PetiteVue.createApp({ + $delimiters: ['${', '}'], +}).mount('#summary-page') \ No newline at end of file diff --git a/static/assets/js/components/time-picker.js b/static/assets/js/components/time-picker.js index 6b64ff3..68eb190 100644 --- a/static/assets/js/components/time-picker.js +++ b/static/assets/js/components/time-picker.js @@ -1,30 +1,27 @@ -// To use this, do the following: -// 1. Include petite-vue -// 2. Define variables timeSelection, fromDate, toDate in an inline script below previous -// 3. Include this script file below previous -// 4. Include time-picker.tpl.html template partial in body +function TimePicker({ fromDate, toDate, timeSelection }) { + return { + $template: '#time-picker-template', + $delimiters: ['${', '}'], + state: { + showDropdownTimepicker: false + }, + fromDate: fromDate, + toDate: toDate, + timeSelection: timeSelection, + onDateUpdated() { + document.getElementById('time-picker-form').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) + }) -PetiteVue.createApp({ - $delimiters: ['${', '}'], - state: { - showDropdownTimepicker: false, - }, - fromDate: fromDate, - toDate: toDate, - timeSelection: timeSelection, - onDateUpdated() { - document.getElementById('time-picker-form').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' + 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('#time-picker-container') \ No newline at end of file +} \ No newline at end of file diff --git a/views/summary.tpl.html b/views/summary.tpl.html index e55add9..765d2ee 100644 --- a/views/summary.tpl.html +++ b/views/summary.tpl.html @@ -3,13 +3,8 @@ {{ template "head.tpl.html" . }} - - + + @@ -17,10 +12,16 @@ {{ template "alerts.tpl.html" . }} +{{ template "time-picker.tpl.html" . }} + {{ if .User.HasData }} -
-{{ template "time-picker.tpl.html" . }} +
+
{{ end }} diff --git a/views/time-picker.tpl.html b/views/time-picker.tpl.html index 4405e32..0f2b9db 100644 --- a/views/time-picker.tpl.html +++ b/views/time-picker.tpl.html @@ -1,4 +1,4 @@ -
+ \ No newline at end of file