From c4c62f31e4ecf555f6134ae03606ef9904431fa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferdinand=20M=C3=BCtsch?= Date: Sun, 2 Jan 2022 14:30:28 +0100 Subject: [PATCH] chore: move time picker to separate component --- .../components/{summary.js => time-picker.js} | 10 ++++- views/summary.tpl.html | 38 +------------------ views/time-picker.tpl.html | 34 +++++++++++++++++ 3 files changed, 44 insertions(+), 38 deletions(-) rename static/assets/js/components/{summary.js => time-picker.js} (68%) create mode 100644 views/time-picker.tpl.html diff --git a/static/assets/js/components/summary.js b/static/assets/js/components/time-picker.js similarity index 68% rename from static/assets/js/components/summary.js rename to static/assets/js/components/time-picker.js index 51b59ec..6b64ff3 100644 --- a/static/assets/js/components/summary.js +++ b/static/assets/js/components/time-picker.js @@ -1,3 +1,9 @@ +// 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 + PetiteVue.createApp({ $delimiters: ['${', '}'], state: { @@ -7,7 +13,7 @@ PetiteVue.createApp({ toDate: toDate, timeSelection: timeSelection, onDateUpdated() { - formTimePicker.submit() + document.getElementById('time-picker-form').submit() }, mounted() { window.addEventListener('click', (e) => { @@ -21,4 +27,4 @@ PetiteVue.createApp({ this.timeSelection = refEl ? refEl.innerText : 'Unknown' } } -}).mount('#summary-page') \ No newline at end of file +}).mount('#time-picker-container') \ No newline at end of file diff --git a/views/summary.tpl.html b/views/summary.tpl.html index 36a326a..e55add9 100644 --- a/views/summary.tpl.html +++ b/views/summary.tpl.html @@ -8,11 +8,8 @@ const timeSelection = '{{ .From | datetime }} - {{ .To | ceildate | datetime }}' const fromDate = '{{ .From | simpledate }}' const toDate = '{{ .To | ceildate | simpledate }}' - - // Elements - const formTimePicker = document.getElementById('time-picker-form') - + @@ -23,38 +20,7 @@ {{ if .User.HasData }}
-
- - ${timeSelection} - -
- - +{{ template "time-picker.tpl.html" . }}
{{ end }} diff --git a/views/time-picker.tpl.html b/views/time-picker.tpl.html new file mode 100644 index 0000000..4405e32 --- /dev/null +++ b/views/time-picker.tpl.html @@ -0,0 +1,34 @@ +
+
+ + ${timeSelection} + +
+ + +
\ No newline at end of file