From 89ad394773ef525ed59efc67092db6475f0c7198 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Thu, 8 Apr 2021 19:09:44 +0200
Subject: [PATCH] =?UTF-8?q?Die=20gew=C3=BCnschte=20HTML-Struktur=20wurde?=
 =?UTF-8?q?=20=C3=BCbernommen.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/App.svelte      |  7 ++-
 ui/src/routes/Views.svelte        | 49 +++++++++-------
 ui/src/routes/WorkingHours.svelte | 96 +++++++++++++++++--------------
 3 files changed, 86 insertions(+), 66 deletions(-)

diff --git a/ui/src/components/App.svelte b/ui/src/components/App.svelte
index 9522a43..0852d11 100644
--- a/ui/src/components/App.svelte
+++ b/ui/src/components/App.svelte
@@ -1,8 +1,11 @@
+<header>
+    Arbeitszeiten
+</header>
 <Nav {active} />
-
 <main>
-	<svelte:component this={Route} {params} />
+    <svelte:component this={Route} {params} />
 </main>
+<footer><p>© Torsten Lücke 2021</p></footer>
 
 <script>
 	import Navaid from 'navaid';
diff --git a/ui/src/routes/Views.svelte b/ui/src/routes/Views.svelte
index 4d7fe78..e61e5e4 100644
--- a/ui/src/routes/Views.svelte
+++ b/ui/src/routes/Views.svelte
@@ -6,25 +6,30 @@
 	<title>{params.title}</title>
 </svelte:head>
 
-<h1>{params.title}</h1>
-
-<table>
-    <thead>
-        <tr>
-            <th>Zeitraum</th>
-            <th>Arbeitstage</th>
-            <th>Arbeitsstunden</th>
-            <th>Über- / Unterstunden</th>
-        </tr>
-    </thead>
-    <tbody>
-        {#each params.records as record}
-        <tr>
-            <td>{record.period}</td>
-            <td>{record.workingDays}</td>
-            <td>{record.totalHours}</td>
-            <td>{record.overtime}</td>
-        </tr>
-        {/each}
-    </tbody>
-</table>
\ No newline at end of file
+<section id="list-records">
+    <header>
+        <h1>{params.title}</h1>
+    </header>
+    <article>
+        <table>
+            <thead>
+            <tr>
+                <th>Zeitraum</th>
+                <th>Arbeitstage</th>
+                <th>Arbeitsstunden</th>
+                <th>Über- / Unterstunden</th>
+            </tr>
+            </thead>
+            <tbody>
+            {#each params.records as record}
+                <tr>
+                    <td>{record.period}</td>
+                    <td>{record.workingDays}</td>
+                    <td>{record.totalHours}</td>
+                    <td>{record.overtime}</td>
+                </tr>
+            {/each}
+            </tbody>
+        </table>
+    </article>
+</section>
\ No newline at end of file
diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte
index 6be4746..e2da199 100644
--- a/ui/src/routes/WorkingHours.svelte
+++ b/ui/src/routes/WorkingHours.svelte
@@ -13,48 +13,60 @@
     <title>{title}</title>
 </svelte:head>
 
-<h1>{title}</h1>
-
 {#if activeRecord === null}
-<table>
-    <thead>
-    <tr>
-        <th>Datum</th>
-        <th>Arbeitsstunden</th>
-        <th>Aktionen</th>
-    </tr>
-    </thead>
-    <tbody>
-    {#each params.records as record}
-        <tr>
-            <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>
+    <section id="list-records">
+        <header>
+            <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}
+                    <tr>
+                        <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>
+        </article>
+    </section>
 {: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>
+    <section id="edit-record">
+        <header>
+            <h1>{title}</h1>
+        </header>
+        <article>
+            <!--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>
+        </article>
+    </section>
 {/if}