From 4acf1275a0086828a8b9364aaf48a678a7d7484d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <arbeit@torsten-hettstedt.de>
Date: Fri, 27 Jun 2025 11:23:54 +0200
Subject: [PATCH 1/4] =?UTF-8?q?Erstelle=20eine=20Pagination-Komponente=20f?=
 =?UTF-8?q?=C3=BCr=20*Svelte*?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/lib/TablePagination.svelte | 73 +++++++++++++++++++++++++++++++
 ui/src/lib/Views.svelte           | 12 ++++-
 2 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/lib/TablePagination.svelte

diff --git a/ui/src/lib/TablePagination.svelte b/ui/src/lib/TablePagination.svelte
new file mode 100644
index 0000000..6d96eb4
--- /dev/null
+++ b/ui/src/lib/TablePagination.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+    let {promise_data, actual_records= $bindable()} = $props();
+    let records: Array<any[]> = $state([])
+    const page_count = $state(5)
+    let page_number = $state(0)
+    let max_page_number = $state(0)
+    const setPage = (new_page: number) => {
+        page_number = new_page
+        actual_records = records[page_number - 1]
+    }
+    const init = async () => {
+        let page_records: any[] = []
+        console.log(promise_data, actual_records)
+        for (let index in promise_data) {
+            page_records.push(promise_data[index])
+            if (page_records.length >= page_count) {
+                records.push(page_records.values().toArray())
+                page_records = []
+            }
+        }
+        if (page_records.length > 0) {
+            records.push(page_records.values().toArray())
+        }
+        max_page_number = records.length
+        setPage(1)
+    }
+    init()
+</script>
+<style>
+    div.table-pagination {
+        text-align: center;
+    }
+
+    div.table-pagination > button {
+        display: inline-block;
+        width: 2rem;
+    }
+
+    div.table-pagination > button[disabled] {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    div.table-pagination > span {
+        display: inline-block;
+        width: 5rem;
+        text-align: center;
+    }
+</style>
+
+<div class="table-pagination">
+    <button
+        type="button"
+        disabled={page_number === 1}
+        onclick={() => setPage(1)}>&ll;
+    </button>
+    <button
+        type="button"
+        disabled={page_number === 1}
+        onclick={() => setPage(page_number - 1)}>&lt;
+    </button>
+    <span>{page_number} von {max_page_number}</span>
+    <button
+        type="button"
+        disabled={page_number === max_page_number}
+        onclick={() => setPage(page_number + 1)}>&gt;
+    </button>
+    <button
+        type="button"
+        disabled={page_number === max_page_number}
+        onclick={() => setPage(max_page_number)}>&gg;
+    </button>
+</div>
\ No newline at end of file
diff --git a/ui/src/lib/Views.svelte b/ui/src/lib/Views.svelte
index 038a7f7..b1f59b4 100644
--- a/ui/src/lib/Views.svelte
+++ b/ui/src/lib/Views.svelte
@@ -1,5 +1,6 @@
 <script>
     import {PeriodRecord} from './Models.svelte.js'
+    import TablePagination from "$lib/TablePagination.svelte";
 
     /**
      * @type {{ promise: Promise<object>; title: string;}}
@@ -7,6 +8,8 @@
     let {params} = $props();
     /** @type PeriodRecord[] **/
     let records = $state([])
+    /** @type PeriodRecord[] **/
+    let actual_records = $state([])
     let isLoading = $state(true)
     const init = async () => await params.promise.then(
         /**
@@ -49,7 +52,7 @@
                 </tr>
                 </thead>
                 <tbody>
-                {#each records as record}
+                {#each actual_records as record}
                     <tr>
                         <td>{record.period}</td>
                         <td>{record.workingDays}</td>
@@ -59,6 +62,13 @@
                     </tr>
                 {/each}
                 </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="4">
+                            <TablePagination promise_data={records} bind:actual_records={actual_records}/>
+                        </td>
+                    </tr>
+                </tfoot>
             </table>
         {/if}
     </article>
-- 
2.54.0


From ab9bccf532aa4d72e7cbee55d392e527a22fbb58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <arbeit@torsten-hettstedt.de>
Date: Fri, 27 Jun 2025 11:27:40 +0200
Subject: [PATCH 2/4] Vereinfache den Aufruf der Anzeige der Arbeitszeitdaten

---
 ui/src/lib/Views.svelte                  | 13 +++++--------
 ui/src/routes/views/monthly/+page.svelte |  2 +-
 ui/src/routes/views/weekly/+page.svelte  |  2 +-
 ui/src/routes/views/yearly/+page.svelte  |  2 +-
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/ui/src/lib/Views.svelte b/ui/src/lib/Views.svelte
index b1f59b4..f049c3b 100644
--- a/ui/src/lib/Views.svelte
+++ b/ui/src/lib/Views.svelte
@@ -2,18 +2,15 @@
     import {PeriodRecord} from './Models.svelte.js'
     import TablePagination from "$lib/TablePagination.svelte";
 
-    /**
-     * @type {{ promise: Promise<object>; title: string;}}
-     */
-    let {params} = $props();
+    let { promise, title } = $props();
     /** @type PeriodRecord[] **/
     let records = $state([])
     /** @type PeriodRecord[] **/
     let actual_records = $state([])
     let isLoading = $state(true)
-    const init = async () => await params.promise.then(
+    const init = async () => await promise.then(
         /**
-         * @param {Array<object>} data
+         * @param {Array<{ workingDays: Number; totalHours: any; overtime: string; period: string; }>} data
          */
         data => {
             records = data.map(row => new PeriodRecord(row))
@@ -24,12 +21,12 @@
 </script>
 
 <svelte:head>
-    <title>{params.title}</title>
+    <title>{title}</title>
 </svelte:head>
 
 <section id="list-records">
     <header>
-        <h1>{params.title}</h1>
+        <h1>{title}</h1>
     </header>
     <article>
         {#if isLoading === true}
diff --git a/ui/src/routes/views/monthly/+page.svelte b/ui/src/routes/views/monthly/+page.svelte
index f542f37..b67d645 100644
--- a/ui/src/routes/views/monthly/+page.svelte
+++ b/ui/src/routes/views/monthly/+page.svelte
@@ -3,5 +3,5 @@
     let { data } = $props();
 </script>
 
-<Views params={data}/>
+<Views {...data}/>
 
diff --git a/ui/src/routes/views/weekly/+page.svelte b/ui/src/routes/views/weekly/+page.svelte
index f542f37..b67d645 100644
--- a/ui/src/routes/views/weekly/+page.svelte
+++ b/ui/src/routes/views/weekly/+page.svelte
@@ -3,5 +3,5 @@
     let { data } = $props();
 </script>
 
-<Views params={data}/>
+<Views {...data}/>
 
diff --git a/ui/src/routes/views/yearly/+page.svelte b/ui/src/routes/views/yearly/+page.svelte
index f542f37..b67d645 100644
--- a/ui/src/routes/views/yearly/+page.svelte
+++ b/ui/src/routes/views/yearly/+page.svelte
@@ -3,5 +3,5 @@
     let { data } = $props();
 </script>
 
-<Views params={data}/>
+<Views {...data}/>
 
-- 
2.54.0


From b4d30066b955f2419d16a8c71029fc7dac767e4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <arbeit@torsten-hettstedt.de>
Date: Fri, 27 Jun 2025 12:20:21 +0200
Subject: [PATCH 3/4] =?UTF-8?q?Pagination=20bei=20der=20Tabelle=20der=20Ei?=
 =?UTF-8?q?ntr=C3=A4ge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/lib/Views.svelte                  |  2 +-
 ui/src/routes/working-hours/+page.svelte | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/src/lib/Views.svelte b/ui/src/lib/Views.svelte
index f049c3b..d20a899 100644
--- a/ui/src/lib/Views.svelte
+++ b/ui/src/lib/Views.svelte
@@ -10,7 +10,7 @@
     let isLoading = $state(true)
     const init = async () => await promise.then(
         /**
-         * @param {Array<{ workingDays: Number; totalHours: any; overtime: string; period: string; }>} data
+         * @param {Array<{ workingDays: Number; totalHours: any; overtime: string; period: string; homeOfficeDays: Number; }>} data
          */
         data => {
             records = data.map(row => new PeriodRecord(row))
diff --git a/ui/src/routes/working-hours/+page.svelte b/ui/src/routes/working-hours/+page.svelte
index 979449f..ed059c0 100644
--- a/ui/src/routes/working-hours/+page.svelte
+++ b/ui/src/routes/working-hours/+page.svelte
@@ -2,10 +2,13 @@
     import documentIcon from "@iconify-icons/oi/document.js";
     import wrenchIcon from "@iconify-icons/oi/wrench.js";
     import IconifyIcon from "@iconify/svelte";
+    import TablePagination from "$lib/TablePagination.svelte";
     let { data } = $props();
     const TITLE = "Bearbeitung Einträge"
     /** @type {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }[]|null} **/
-    let records = $state([])
+    let records = $state(null)
+    /** @type {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }[]} **/
+    let actual_records = $state([])
     const init = async () => await data.promise.then(
         /**
          * @param {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }[]} data
@@ -58,7 +61,7 @@
                     </tr>
                     </thead>
                     <tbody>
-                    {#each records as record}
+                    {#each actual_records as record}
                         <tr style="{record.isHomeOffice ? 'background: aqua' : ''}">
                             <td>{record.workingDay}</td>
                             <td>{record.workingTime}</td>
@@ -71,6 +74,13 @@
                         </tr>
                     {/each}
                     </tbody>
+                    <tfoot>
+                    <tr>
+                        <td colspan="4">
+                            <TablePagination promise_data={records} bind:actual_records={actual_records}/>
+                        </td>
+                    </tr>
+                    </tfoot>
                 </table>
             {/if}
         </form>
-- 
2.54.0


From 0e1244c02fd6690e17d296d8caf2957c74612ddb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <arbeit@torsten-hettstedt.de>
Date: Fri, 27 Jun 2025 12:23:26 +0200
Subject: [PATCH 4/4] =?UTF-8?q?Bestimmung=20der=20Zeilenanzahl=20hinzuf?=
 =?UTF-8?q?=C3=BCgen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/lib/TablePagination.svelte        | 3 +--
 ui/src/routes/working-hours/+page.svelte | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/src/lib/TablePagination.svelte b/ui/src/lib/TablePagination.svelte
index 6d96eb4..6d336ce 100644
--- a/ui/src/lib/TablePagination.svelte
+++ b/ui/src/lib/TablePagination.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    let {promise_data, actual_records= $bindable()} = $props();
+    let {promise_data, actual_records= $bindable(), page_count = 10} = $props();
     let records: Array<any[]> = $state([])
-    const page_count = $state(5)
     let page_number = $state(0)
     let max_page_number = $state(0)
     const setPage = (new_page: number) => {
diff --git a/ui/src/routes/working-hours/+page.svelte b/ui/src/routes/working-hours/+page.svelte
index ed059c0..1788ea2 100644
--- a/ui/src/routes/working-hours/+page.svelte
+++ b/ui/src/routes/working-hours/+page.svelte
@@ -77,7 +77,7 @@
                     <tfoot>
                     <tr>
                         <td colspan="4">
-                            <TablePagination promise_data={records} bind:actual_records={actual_records}/>
+                            <TablePagination promise_data={records} bind:actual_records={actual_records} page_count={15}/>
                         </td>
                     </tr>
                     </tfoot>
-- 
2.54.0