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",

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))

ui/src/routes/Home.svelte

@@ -2,14 +2,5 @@
 
 <script>
     import Views from "./Views.svelte";
-    let r = {
+    export let params;
-        "Zeitraum": "2020#01",
-        "Arbeitstage": 20,
-        "Arbeitsstunden": "99:00:00",
-        "Unterstunden": "10:22:00"
-    };
-    let params = {
-        "title" : "Wochenansicht",
-        "records" : [r, r]
-    };
 </script>

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>Datum</th>
-        <th>Arbeitstage</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.workingDay}</td>
-            <td>{record.Arbeitstage}</td>
+            <td>{record.workingTime}</td>
-            <td>{record.Arbeitsstunden}</td>
+            <td>
-            <td>{record.Unterstunden}</td>
+                <button>Bearbeiten <IconifyIcon icon={wrenchIcon} /></button>
+                <button>Löschen <IconifyIcon icon={trashIcon} color="red" /></button>
+            </td>
         </tr>
     {/each}
     </tbody>
-</table>
+</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}