From c711e0ae24a14456bf3f76a272a771cc9b4d4b13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Sat, 10 Apr 2021 11:26:34 +0200
Subject: [PATCH] =?UTF-8?q?Es=20ist=20m=C3=B6glich=20einen=20neuen=20Eintr?=
 =?UTF-8?q?ag=20zu=20generieren.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/routes/WorkingHours.svelte | 101 ++++++++++++++++++++++--------
 1 file changed, 75 insertions(+), 26 deletions(-)

diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte
index fae987b..137cb2f 100644
--- a/ui/src/routes/WorkingHours.svelte
+++ b/ui/src/routes/WorkingHours.svelte
@@ -5,7 +5,9 @@
     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';
     let activeRecord = null;
+    let newRecord = false;
     params = {
         title: 'Einträge',
         records: [],
@@ -50,6 +52,34 @@
                     console.log(err);
                 });
         },
+        'add': record => {
+            console.log(record);
+            // noinspection JSUnresolvedVariable
+            fetch(env.API_URL + '/working-hours', {
+                method: 'POST',
+                mode: 'no-cors',
+                cache: 'no-cache',
+                credentials: 'same-origin',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                redirect: 'follow',
+                referrerPolicy: 'no-referrer',
+                body: JSON.stringify(record)
+            })
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Fail!');
+                    }
+                })
+                .then(() => {
+                    newRecord = false;
+                    Records.browse();
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
         'update': (date, record) => {
             console.log(record);
             // noinspection JSUnresolvedVariable
@@ -71,7 +101,6 @@
                     }
                 })
                 .then(() => {
-                    activeRecord = null;
                     Records.browse();
                 })
                 .catch(err => {
@@ -92,28 +121,40 @@
             <h1>{title}</h1>
         </header>
         <article>
-            <table>
-                <thead>
-                <tr>
-                    <th>Datum</th>
-                    <th>Arbeitsstunden</th>
-                    <th>Aktionen</th>
-                </tr>
-                </thead>
-                <tbody>
-                {#each params.records as record}
+            {#if params.isLoading === true}
+                <p>Loading...</p>
+            {:else}
+                <!--suppress HtmlUnknownTarget -->
+                <form action="/working-hours">
+                    <fieldset>
+                        <button on:click={() => {activeRecord = {}; newRecord = true}}>Neuer Eintrag
+                            <IconifyIcon icon={documentIcon}/>
+                        </button>
+                    </fieldset>
+                </form>
+                <table>
+                    <thead>
                     <tr>
-                        <td>{record.workingDay}</td>
-                        <td>{record.workingTime}</td>
-                        <td>
-                            <button on:click={() => Records.read(record.workingDay)}>Bearbeiten
-                                <IconifyIcon icon={wrenchIcon}/>
-                            </button>
-                        </td>
+                        <th>Datum</th>
+                        <th>Arbeitsstunden</th>
+                        <th>Aktionen</th>
                     </tr>
-                {/each}
-                </tbody>
-            </table>
+                    </thead>
+                    <tbody>
+                    {#each params.records as record}
+                        <tr>
+                            <td>{record.workingDay}</td>
+                            <td>{record.workingTime}</td>
+                            <td>
+                                <button on:click={() => Records.read(record.workingDay)}>Bearbeiten
+                                    <IconifyIcon icon={wrenchIcon}/>
+                                </button>
+                            </td>
+                        </tr>
+                    {/each}
+                    </tbody>
+                </table>
+            {/if}
         </article>
     </section>
 {:else}
@@ -127,17 +168,25 @@
                 <fieldset name="record-data">
                     <div>
                         <label for="workingDay">Arbeitstag</label>
-                        <input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date" id="workingDay">
+                        <input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date"
+                               id="workingDay">
                     </div>
                     <div>
                         <label for="workingTime">Arbeitszeit</label>
-                        <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time" id="workingTime">
+                        <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
+                               id="workingTime">
                     </div>
                 </fieldset>
                 <fieldset name="buttons">
-                    <button on:click={() => Records.update(activeRecord.workingDay, activeRecord)}>Übernehmen
-                        <IconifyIcon icon={checkIcon} color="green"/>
-                    </button>
+                    {#if newRecord === true}
+                        <button on:click={() => Records.add(activeRecord)}>Übernehmen
+                            <IconifyIcon icon={checkIcon} color="green"/>
+                        </button>
+                    {:else}
+                        <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>