Refactor: Aufteilung der Darstellung der Einträge

2021-12-15 18:21:29 +01:00
parent 907ce88ed1
commit 66022e42df
3 changed files with 136 additions and 117 deletions
@@ -0,0 +1,49 @@
+<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'
+
+    export let activeRecord = null
+    export let newRecord = false
+    const Controller = {
+        'saveRecord': () => {
+            if (newRecord === true) {
+                WorkingHoursRepository.add(activeRecord).then(() => {
+                    Controller.cancelActiveRecord()
+                });
+            } else {
+                WorkingHoursRepository.update(activeRecord.workingDay, activeRecord).then(() => {
+                    Controller.cancelActiveRecord()
+                });
+            }
+        },
+        '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
+            <IconifyIcon icon={checkIcon} color="green"/>
+        </button>
+        <button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
+            <IconifyIcon icon={xIcon}/>
+        </button>
+    </fieldset>
+</form>