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 }}
-
-
-
+{{ 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 @@
+
+
+
+
+
\ No newline at end of file