Files
PHP-App-Timekeeping/ui/src/routes/WorkingHours/Formular.svelte
T

49 lines
1.9 KiB
Svelte

<script>
import {WorkingHoursRepository} from "../../components/Repositories.svelte"
import IconifyIcon from '@iconify/svelte'
import checkIcon from '@iconify-icons/oi/check'
import xIcon from '@iconify-icons/oi/x'
import {TimekeepingDate} from "../../components/TimekeepingDate.svelte"
export let activeRecord = null
export let newRecord = false
const Controller = {
'saveRecord': () => {
WorkingHoursRepository.addOrUpdate(activeRecord.workingDay, activeRecord).then(() => {
Controller.nextDay()
});
},
'nextDay': () => {
let actDate = new TimekeepingDate(activeRecord.workingDay)
let nextDay = actDate.getNextDay()
activeRecord = WorkingHoursRepository.readOrNew(nextDay.getDateString())
},
'cancelActiveRecord': () => {
activeRecord = null;
newRecord = false;
}
}
</script>
<!--suppress HtmlUnknownTarget -->
<form action="/working-hours" name="editRecord">
<fieldset name="record-data">
<div>
<label for="workingDay">Arbeitstag</label>
<input bind:value={activeRecord.workingDay} type="date"
id="workingDay" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
</div>
<div>
<label for="workingTime">Arbeitszeit</label>
<input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
</div>
</fieldset>
<fieldset name="buttons">
<button on:click={Controller.saveRecord} type="button">Übernehmen und Weiter
<IconifyIcon icon={checkIcon} color="green"/>
</button>
<button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
<IconifyIcon icon={xIcon}/>
</button>
</fieldset>
</form>