Es gibt ein Objekt 'Controller', dass die Funktionen für die Tasten-Aktionen sammelt.

Es gibt nun eine Initialisierung-Funktion.
Wenn eine Bearbeitung abgebrochen wird, wird nicht jedes mal die Liste neu geladen.

ui/src/routes/WorkingHours.svelte

@@ -24,7 +24,7 @@
                     return res.json();
                 })
                 .then(data => {
-                    activeRecord = null;
+                    Controller.cancelActiveRecord();
                     params.records = data;
                     params.isLoading = false;
                 })
@@ -45,7 +45,7 @@
                 .then(data => {
                     activeRecord = data;
                     if (date === null) {
-                        Records.browse();
+                        Controller.listRecords();
                     }
                 })
                 .catch(err => {
@@ -73,8 +73,7 @@
                     }
                 })
                 .then(() => {
-                    newRecord = false;
+                    Controller.listRecords();
-                    Records.browse();
                 })
                 .catch(err => {
                     console.log(err);
@@ -101,14 +100,39 @@
                     }
                 })
                 .then(() => {
-                    Records.browse();
+                    Controller.listRecords();
                 })
                 .catch(err => {
                     console.log(err);
                 });
         }
     };
+    const Controller = {
+        'listRecords': () => {
+            Controller.cancelActiveRecord();
             Records.browse();
+        },
+        'newRecord': () => {
+            activeRecord = {workingTime: '00:00:00'};
+            newRecord = true;
+        },
+        'saveRecord': () => {
+            if (newRecord === true) {
+                Records.add(activeRecord);
+            } else {
+                Records.update(activeRecord.workingDay, activeRecord);
+            }
+        },
+        'selectActiveRecord': record => Records.read(record.workingDay),
+        'cancelActiveRecord': () => {
+            activeRecord = null;
+            newRecord = false;
+        }
+    };
+    const initSite = () => {
+        Controller.listRecords()
+    };
+    initSite()
 </script>
 
 <svelte:head>
@@ -127,7 +151,7 @@
                 <!--suppress HtmlUnknownTarget -->
                 <form action="/working-hours">
                     <fieldset>
-                        <button on:click={() => {activeRecord = {workingTime: '00:00:00'}; newRecord = true}}>Neuer Eintrag
+                        <button on:click={Controller.newRecord}>Neuer Eintrag
                             <IconifyIcon icon={documentIcon}/>
                         </button>
                     </fieldset>
@@ -146,7 +170,7 @@
                             <td>{record.workingDay}</td>
                             <td>{record.workingTime}</td>
                             <td>
-                                <button on:click={() => Records.read(record.workingDay)}>Bearbeiten
+                                <button on:click={() => Controller.selectActiveRecord(record)}>Bearbeiten
                                     <IconifyIcon icon={wrenchIcon}/>
                                 </button>
                             </td>
@@ -178,16 +202,10 @@
                     </div>
                 </fieldset>
                 <fieldset name="buttons">
-                    {#if newRecord === true}
+                    <button on:click={Controller.saveRecord}>Übernehmen
-                        <button on:click={() => Records.add(activeRecord)}>Übernehmen
                         <IconifyIcon icon={checkIcon} color="green"/>
                     </button>
-                    {:else}
+                    <button on:click={Controller.cancelActiveRecord}>Abbrechen
-                        <button on:click={() => Records.update(activeRecord.workingDay, activeRecord)}>Übernehmen
-                            <IconifyIcon icon={checkIcon} color="green"/>
-                        </button>
-                    {/if}
-                    <button on:click={() => Records.read(null)}>Abbrechen
                         <IconifyIcon icon={xIcon}/>
                     </button>
                 </fieldset>