ui/src/routes/WorkingHours/Formular/EditByDay.svelte

@@ -0,0 +1,23 @@
+<script>
+    export let activeRecordList = []
+    export let makeTimekeepingList = () => {}
+
+    makeTimekeepingList()
+</script>
+
+{#if activeRecordList.length < 1}
+    <p>Loading...</p>
+{:else}
+    <fieldset name="record-data-by-day">
+        <div>
+            <label for="workingDay">Arbeitstag</label>
+            <input bind:value={activeRecordList[0].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={activeRecordList[0].workingTime} placeholder="Arbeitszeit" type="time"
+                   id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+        </div>
+    </fieldset>
+{/if}

ui/src/routes/WorkingHours/Formular/EditByWeek.svelte

@@ -0,0 +1,62 @@
+<script>
+    export let activeDate = null
+    export let activeRecordList = []
+    export let makeTimekeepingList = () => {}
+
+    makeTimekeepingList()
+</script>
+
+<style>
+    tbody.weekend td input, tbody.weekend td {
+        color: red;
+    }
+    input#monday {
+        display: inline;
+        width: auto;
+    }
+</style>
+
+
+{#if activeRecordList.length < 1}
+    <p>Loading...</p>
+{:else}
+    <fieldset name="how-week-is-use">
+        <div>
+            <label for="monday">Woche vom</label>
+            <input bind:value={activeDate} type="date" on:change={makeTimekeepingList}
+                   id="monday" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
+        </div>
+    </fieldset>
+    <fieldset name="record-data-by-week">
+        <div>
+            <table>
+                <tbody>
+                {#each ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'] as day, index}
+                    <tr>
+                        <td>
+                            {day}
+                        </td>
+                        <td>
+                            <input bind:value={activeRecordList[index].workingTime} placeholder="Arbeitszeit" type="time"
+                                   required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+                        </td>
+                    </tr>
+                {/each}
+                </tbody>
+                <tbody class="weekend">
+                {#each ['Samstag', 'Sontag'] as day, index}
+                    <tr>
+                        <td>
+                            {day}
+                        </td>
+                        <td>
+                            <input bind:value={activeRecordList[index+5].workingTime} placeholder="Arbeitszeit" type="time"
+                                   required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+                        </td>
+                    </tr>
+                {/each}
+                </tbody>
+            </table>
+        </div>
+    </fieldset>
+{/if}

ui/src/routes/working-hours/NewByDay.svelte

@@ -1,17 +0,0 @@
-<script>
-    export let activeRecord
-</script>
-
-
-<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>