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>
@@ -0,0 +1,78 @@
+<script>
+    import {WorkingHoursRepository} from "../../components/Repositories.svelte"
+
+    export let activeRecord = null
+    export let newRecord = false
+    let isLoading = true
+    let records = []
+    import IconifyIcon from '@iconify/svelte'
+    import wrenchIcon from '@iconify-icons/oi/wrench'
+    import documentIcon from '@iconify-icons/oi/document'
+
+    const Controller = {
+        'listRecords': () => {
+            Controller.cancelActiveRecord();
+            WorkingHoursRepository.browse().then(data => {
+                Controller.cancelActiveRecord()
+                records = data
+                isLoading = false
+            });
+        },
+        'newRecord': () => {
+            activeRecord = {workingTime: '00:00:00'};
+            newRecord = true;
+        },
+        'selectActiveRecord': record => WorkingHoursRepository.read(record.workingDay).then(data => {
+            if (data === null) {
+                Controller.listRecords()
+                return
+            }
+            activeRecord = data;
+        }),
+        'cancelActiveRecord': () => {
+            activeRecord = null;
+            newRecord = false;
+        }
+    }
+    Controller.listRecords()
+</script>
+
+<!--suppress HtmlUnknownTarget -->
+<form action="/working-hours">
+    <fieldset>
+        <button on:click={Controller.newRecord} type="button">Neuer Eintrag
+            <IconifyIcon icon={documentIcon}/>
+        </button>
+    </fieldset>
+</form>
+{#if isLoading === true}
+    <p>Loading...</p>
+{:else}
+    <table>
+        <colgroup>
+            <col/>
+            <col/>
+            <col/>
+        </colgroup>
+        <thead>
+        <tr>
+            <th>Datum</th>
+            <th>Arbeitsstunden</th>
+            <th>Aktionen</th>
+        </tr>
+        </thead>
+        <tbody>
+        {#each records as record}
+            <tr>
+                <td>{record.workingDay}</td>
+                <td>{record.workingTime}</td>
+                <td>
+                    <button on:click={() => Controller.selectActiveRecord(record)} type="button">Bearbeiten
+                        <IconifyIcon icon={wrenchIcon}/>
+                    </button>
+                </td>
+            </tr>
+        {/each}
+        </tbody>
+    </table>
+{/if}