ui/src/routes/WorkingHours.svelte

@@ -1,11 +1,13 @@
 <script>
     export let params;
-    let title = "Bearbeitung Einträge"
+    const TITLE = "Bearbeitung Einträge";
     import IconifyIcon from '@iconify/svelte';
     import wrenchIcon from '@iconify-icons/oi/wrench';
     import checkIcon from '@iconify-icons/oi/check';
     import xIcon from '@iconify-icons/oi/x';
     import documentIcon from '@iconify-icons/oi/document';
+    import {WorkingHoursRepository} from '../components/Repositories.svelte'
+    import NewByDay from "./working-hours/NewByDay.svelte";
     let activeRecord = null;
     params = {
         title: 'Einträge',
@@ -51,14 +53,14 @@
 </script>
 
 <svelte:head>
-    <title>{title}</title>
+    <title>{TITLE}</title>
 </svelte:head>
 
-{#if activeRecord === null}
 <section id="list-records">
     <header>
-            <h1>{title}</h1>
+        <h1>{TITLE}</h1>
     </header>
+    {#if activeRecord === null}
     <article>
         {#if params.isLoading === true}
             <p>Loading...</p>
@@ -100,27 +102,11 @@
             </table>
         {/if}
     </article>
-    </section>
     {:else}
-    <section id="edit-record">
-        <header>
-            <h1>{title}</h1>
-        </header>
     <article>
         <!--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>
+            <NewByDay activeRecord="{activeRecord}"/>
             <fieldset name="buttons">
                 <button on:click={Controller.saveRecord} type="button">Übernehmen
                     <IconifyIcon icon={checkIcon} color="green"/>
@@ -131,5 +117,5 @@
             </fieldset>
         </form>
     </article>
-    </section>
     {/if}
+</section>

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

@@ -0,0 +1,17 @@
+<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>