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
Show Stats 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')

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

@ -1,13 +1,9 @@
// To use this, do the following: function TimePicker({ fromDate, toDate, timeSelection }) {
// 1. Include petite-vue return {
// 2. Define variables timeSelection, fromDate, toDate in an inline script below previous $template: '#time-picker-template',
// 3. Include this script file below previous
// 4. Include time-picker.tpl.html template partial in body
PetiteVue.createApp({
$delimiters: ['${', '}'], $delimiters: ['${', '}'],
state: { state: {
showDropdownTimepicker: false, showDropdownTimepicker: false
}, },
fromDate: fromDate, fromDate: fromDate,
toDate: toDate, toDate: toDate,
@ -27,4 +23,5 @@ PetiteVue.createApp({
this.timeSelection = refEl ? refEl.innerText : 'Unknown' 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" . }} {{ template "head.tpl.html" . }}
<script> <script src="assets/js/components/time-picker.js"></script>
// Constants <script type="module" src="assets/js/components/summary.js"></script>
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>
<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"> <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 "alerts.tpl.html" . }}
{{ template "time-picker.tpl.html" . }}
{{ if .User.HasData }} {{ if .User.HasData }}
<div class="flex justify-end mt-12 relative" id="summary-page" v-scope @vue:mounted="mounted"> <div class="flex justify-end mt-12 relative" id="summary-page" v-scope>
{{ template "time-picker.tpl.html" . }} <div v-scope="TimePicker({
fromDate: '{{ .From | simpledate }}',
toDate: '{{ .To | ceildate | simpledate }}',
timeSelection: '{{ .From | datetime }} - {{ .To | ceildate | datetime }}'
})" @vue:mounted="mounted"></div>
</div> </div>
{{ end }} {{ 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"> <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> <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> <a v-cloak id="current-time-selection" class="text-gray-300 -mb-1">${timeSelection}</a>
@ -31,4 +31,4 @@
</form> </form>
</div> </div>
</div> </div>
</div> </template>