Die Einträge werden aufgelistet und angezeigt.

ui/src/routes/WorkingHours.svelte

@@ -7,6 +7,48 @@
     import checkIcon from '@iconify-icons/oi/check';
     import xIcon from '@iconify-icons/oi/x';
     let activeRecord = null;
+    params = {
+        title: 'Einträge',
+        records: [],
+        isLoading: true
+    }
+    const Records = {
+        'browse': () => {
+            // noinspection JSUnresolvedVariable
+            fetch(env.API_URL + '/working-hours')
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Fail!');
+                    }
+                    return res.json();
+                })
+                .then(data => {
+                    params.records = data;
+                    params.isLoading = false;
+                })
+                .catch(err => {
+                    params.isLoading = false;
+                    console.log(err);
+                });
+        },
+        'read': date => {
+            // noinspection JSUnresolvedVariable
+            fetch(env.API_URL + '/working-hours/' + date)
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Fail!');
+                    }
+                    return res.json();
+                })
+                .then(data => {
+                    activeRecord = data;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        }
+    };
+    Records.browse();
 </script>
 
 <svelte:head>
@@ -33,7 +75,7 @@
                         <td>{record.workingDay}</td>
                         <td>{record.workingTime}</td>
                         <td>
-                            <button>Bearbeiten <IconifyIcon icon={wrenchIcon} /></button>
+                            <button on:click={() => Records.read(record.workingDay)}>Bearbeiten <IconifyIcon icon={wrenchIcon} /></button>
                             <button>Löschen <IconifyIcon icon={trashIcon} color="red" /></button>
                         </td>
                     </tr>
@@ -53,18 +95,16 @@
                 <fieldset name="record-data">
                     <div>
                         <label for="workingDay">Arbeitstag</label>
-                        <!--suppress JSUnresolvedVariable -->
                         <input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date" id="workingDay">
                     </div>
                     <div>
                         <label for="workingTime">Arbeitszeit</label>
-                        <!--suppress JSUnresolvedVariable -->
                         <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time" id="workingTime">
                     </div>
                 </fieldset>
                 <fieldset name="buttons">
                     <button>Übernehmen <IconifyIcon icon={checkIcon} color="green" /></button>
-                    <button>Abbrechen <IconifyIcon icon={xIcon} /></button>
+                    <button on:click={() => Records.read(null)}>Abbrechen <IconifyIcon icon={xIcon} /></button>
                 </fieldset>
             </form>
         </article>