From bc83fc8dd100c1fa472334d1b0ed38c51d3d1a5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Fri, 9 Apr 2021 21:19:19 +0200
Subject: [PATCH] =?UTF-8?q?Die=20Eintr=C3=A4ge=20werden=20aufgelistet=20un?=
 =?UTF-8?q?d=20angezeigt.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/routes/WorkingHours.svelte | 48 ++++++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte
index e2da199..67936ab 100644
--- a/ui/src/routes/WorkingHours.svelte
+++ b/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>