mirror/wakapi
1
0
Fork 0
mirror of https://github.com/muety/wakapi.git synced 2023-08-10 21:12:56 +03:00
Code Issues Projects Releases Wiki Activity

chore: make time picker a standalone petite-vue component

Browse Source
This commit is contained in:
Ferdinand Mütsch
2022-01-02 18:30:22 +01:00
parent c4c62f31e4
commit bb0d0569fd
4 changed files with 39 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
static/assets/js/components/summary.js Normal file
View File

@@ -0,0 +1,3 @@
PetiteVue.createApp({
$delimiters: ['${', '}'],
}).mount('#summary-page')

51
static/assets/js/components/time-picker.js
View File

@@ -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')
}

19
views/summary.tpl.html
View File

@@ -3,13 +3,8 @@
{{ template "head.tpl.html" . }}
<script>
// Constants
const timeSelection = '{{ .From | datetime }} - {{ .To | ceildate | datetime }}'
const fromDate = '{{ .From | simpledate }}'
const toDate = '{{ .To | ceildate | simpledate }}'
</script>
<script type="module" src="assets/js/components/time-picker.js"></script>
<script src="assets/js/components/time-picker.js"></script>
<script type="module" src="assets/js/components/summary.js"></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">
@@ -17,10 +12,16 @@
{{ template "alerts.tpl.html" . }}
{{ template "time-picker.tpl.html" . }}
{{ if .User.HasData }}
<div class="flex justify-end mt-12 relative" id="summary-page" v-scope @vue:mounted="mounted">
{{ template "time-picker.tpl.html" . }}
<div class="flex justify-end mt-12 relative" id="summary-page" v-scope>
<div v-scope="TimePicker({
fromDate: '{{ .From | simpledate }}',
toDate: '{{ .To | ceildate | simpledate }}',
timeSelection: '{{ .From | datetime }} - {{ .To | ceildate | datetime }}'
})" @vue:mounted="mounted"></div>
</div>
{{ end }}

4
views/time-picker.tpl.html
View File

@@ -1,4 +1,4 @@
<div id="time-picker-container">
<template id="time-picker-template">
<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 v-cloak id="current-time-selection" class="text-gray-300 -mb-1">${timeSelection}</a>
@@ -31,4 +31,4 @@
</form>
</div>
</div>
</div>
</template>