teach/atsebay.t
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Use datetime field to edit start/end time

Browse Source
This commit is contained in:
nemunaire 2022-09-16 10:56:55 +02:00
parent 3bb6f0374c
commit 85d9f1e280
5 changed files with 39 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "atsebayt",
"version": "0.0.1",
"dependencies": {
"dayjs": "^1.11.5",
"svelte-frappe-charts": "^1.9.1",
"vite": "^3.0.4"
},
@ -645,6 +646,11 @@
"node": ">= 8"
}
},
"node_modules/dayjs": {
"version": "1.11.5",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
"integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -3091,6 +3097,11 @@
"which": "^2.0.1"
}
},
"dayjs": {
"version": "1.11.5",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
"integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
},
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

1
ui/package.json
View File

@ -28,6 +28,7 @@
},
"type": "module",
"dependencies": {
"dayjs": "^1.11.5",
"svelte-frappe-charts": "^1.9.1",
"vite": "^3.0.4"
}

21
ui/src/components/DateTimeInput.svelte Normal file
View File

@ -0,0 +1,21 @@
<script>
import dayjs from 'dayjs';
export let format = 'YYYY-MM-DD HH:mm';
export let date = new Date();
let className = '';
export { className as class };
export let id = null;
let internal;
const input = (x) => (internal = dayjs(x).format(format));
const output = (x) => (date = dayjs(x, format).toDate().toISOString());
$: input(date)
$: output(internal)
</script>
<input type="datetime-local" class={className} id={id} bind:value={internal}>

5
ui/src/components/SurveyAdmin.svelte
View File

@ -3,6 +3,7 @@
import { goto } from '$app/navigation';
import { getQuestions } from '../lib/questions';
import DateTimeInput from './DateTimeInput.svelte';
import { ToastsStore } from '../stores/toasts';
const dispatch = createEventDispatcher();
@ -108,7 +109,7 @@
<label for="start_availability" class="col-form-label col-form-label-sm">Date de début</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control form-control-sm" id="start_availability" bind:value={survey.start_availability}>
<DateTimeInput class="form-control form-control-sm" id="start_availability" bind:date={survey.start_availability} />
</div>
</div>
@ -117,7 +118,7 @@
<label for="end_availability" class="col-form-label col-form-label-sm">Date de fin</label>
</div>
<div class="col-8">
<input type="text" class="form-control form-control-sm" id="end_availability" bind:value={survey.end_availability}>
<DateTimeInput class="form-control form-control-sm" id="end_availability" bind:date={survey.end_availability} />
</div>
</div>

5
ui/src/components/WorkAdmin.svelte
View File

@ -2,6 +2,7 @@
import { createEventDispatcher } from 'svelte';
import { goto } from '$app/navigation';
import DateTimeInput from './DateTimeInput.svelte';
import { ToastsStore } from '../stores/toasts';
const dispatch = createEventDispatcher();
@ -102,7 +103,7 @@
<label for="start_availability" class="col-form-label col-form-label-sm">Date de début</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control form-control-sm" id="start_availability" bind:value={work.start_availability}>
<DateTimeInput class="form-control form-control-sm" id="start_availability" bind:date={work.start_availability} />
</div>
</div>
@ -111,7 +112,7 @@
<label for="end_availability" class="col-form-label col-form-label-sm">Date de fin</label>
</div>
<div class="col-8">
<input type="text" class="form-control form-control-sm" id="end_availability" bind:value={work.end_availability}>
<DateTimeInput class="form-control form-control-sm" id="end_availability" bind:date={work.end_availability} />
</div>
</div>