From c8d9bc040e60c6397445b58ddacd66a29debd76b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Thu, 8 Apr 2021 18:12:05 +0200
Subject: [PATCH] =?UTF-8?q?Die=20HTML-Dateien=20f=C3=BCr=20die=20Anzeige?=
 =?UTF-8?q?=20und=20Bearbeitung=20der=20Daten=20sind=20vorhanden.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/package.json                   |  5 +++-
 ui/src/components/App.svelte      |  4 +--
 ui/src/routes/Home.svelte         | 11 +-------
 ui/src/routes/WorkingHours.svelte | 45 +++++++++++++++++++++++++------
 4 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index af12750..f794272 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -10,9 +10,12 @@
   },
   "dependencies": {
     "ganalytics": "^3.1.2",
-    "navaid": "^1.0.2"
+    "navaid": "^1.0.2",
+    "open-iconic": "^1.1.1"
   },
   "devDependencies": {
+    "@iconify-icons/oi": "^1.1.0",
+    "@iconify/svelte": "^1.0.4",
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.3.0",
diff --git a/ui/src/components/App.svelte b/ui/src/components/App.svelte
index c8dea93..9522a43 100644
--- a/ui/src/components/App.svelte
+++ b/ui/src/components/App.svelte
@@ -75,7 +75,7 @@
     };
     let r = {
         "workingDay": "2020-01-15",
-        "workingTime": "99:00:00"
+        "workingTime": "09:00:00"
     };
     let records = {
         "title" : "Einträge",
@@ -83,7 +83,7 @@
     };
 
 	const router = Navaid('/')
-		.on('/', () => run(import('../routes/Home.svelte')))
+		.on('/', () => run(import('../routes/Home.svelte'), weekly))
 		.on('/views/weekly', () => run(import('../routes/Views.svelte'), weekly))
 		.on('/views/monthly', () => run(import('../routes/Views.svelte'), monthly))
 		.on('/views/yearly', () => run(import('../routes/Views.svelte'), yearly))
diff --git a/ui/src/routes/Home.svelte b/ui/src/routes/Home.svelte
index 95bc6d8..8041d2c 100644
--- a/ui/src/routes/Home.svelte
+++ b/ui/src/routes/Home.svelte
@@ -2,14 +2,5 @@
 
 <script>
     import Views from "./Views.svelte";
-    let r = {
-        "Zeitraum": "2020#01",
-        "Arbeitstage": 20,
-        "Arbeitsstunden": "99:00:00",
-        "Unterstunden": "10:22:00"
-    };
-    let params = {
-        "title" : "Wochenansicht",
-        "records" : [r, r]
-    };
+    export let params;
 </script>
\ No newline at end of file
diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte
index 75da05b..6be4746 100644
--- a/ui/src/routes/WorkingHours.svelte
+++ b/ui/src/routes/WorkingHours.svelte
@@ -1,6 +1,12 @@
 <script>
     export let params;
     let title = "Bearbeitung Einträge"
+    import IconifyIcon from '@iconify/svelte';
+    import wrenchIcon from '@iconify-icons/oi/wrench';
+    import trashIcon from '@iconify-icons/oi/trash';
+    import checkIcon from '@iconify-icons/oi/check';
+    import xIcon from '@iconify-icons/oi/x';
+    let activeRecord = null;
 </script>
 
 <svelte:head>
@@ -9,23 +15,46 @@
 
 <h1>{title}</h1>
 
+{#if activeRecord === null}
 <table>
     <thead>
     <tr>
-        <th>Zeitraum</th>
-        <th>Arbeitstage</th>
+        <th>Datum</th>
         <th>Arbeitsstunden</th>
-        <th>Über- / Unterstunden</th>
+        <th>Aktionen</th>
     </tr>
     </thead>
     <tbody>
     {#each params.records as record}
         <tr>
-            <td>{record.Zeitraum}</td>
-            <td>{record.Arbeitstage}</td>
-            <td>{record.Arbeitsstunden}</td>
-            <td>{record.Unterstunden}</td>
+            <td>{record.workingDay}</td>
+            <td>{record.workingTime}</td>
+            <td>
+                <button>Bearbeiten <IconifyIcon icon={wrenchIcon} /></button>
+                <button>Löschen <IconifyIcon icon={trashIcon} color="red" /></button>
+            </td>
         </tr>
     {/each}
     </tbody>
-</table>
\ No newline at end of file
+</table>
+{:else}
+<!--suppress HtmlUnknownTarget -->
+<form action="/working-hours" name="editRecord">
+    <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>
+    </fieldset>
+</form>
+{/if}