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

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>