From dbca8ad5708ff537d1994bfe9d7b70dbef88360f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <arbeit@torsten-hettstedt.de>
Date: Fri, 20 Jun 2025 19:43:04 +0200
Subject: [PATCH] =?UTF-8?q?Eintragung=20von=20HomeOffice=20ist=20=C3=BCber?=
 =?UTF-8?q?=20die=20Oberfl=C3=A4che=20m=C3=B6glich?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/test-data/report-1672928012.CSV     |  2 +-
 ui/src/lib/Models.svelte.js                   |  3 +-
 ui/src/lib/Views.svelte                       |  2 +
 ui/src/routes/working-hours/+page.server.js   | 19 ++++++++--
 ui/src/routes/working-hours/+page.svelte      |  8 ++--
 .../working-hours/[working_day]/+page.svelte  |  8 +++-
 .../working-hours/create-by-day/+page.svelte  |  4 ++
 .../working-hours/create-by-week/+page.svelte | 38 ++++++++++++++++++-
 .../working-hours/import-csv/+page.svelte     | 18 +++++++--
 9 files changed, 87 insertions(+), 15 deletions(-)

diff --git a/resources/test-data/report-1672928012.CSV b/resources/test-data/report-1672928012.CSV
index daf9c3a..d13b8a7 100755
--- a/resources/test-data/report-1672928012.CSV
+++ b/resources/test-data/report-1672928012.CSV
@@ -23,7 +23,7 @@ Arbeit;04:16;2021-07-22 07:55;2021-07-22 12:11;
 Arbeit;03:11;2021-07-21 13:37;2021-07-21 16:48;
 Mittagspause ;01:07;2021-07-21 12:29;2021-07-21 13:37;
 Arbeit;04:58;2021-07-21 07:31;2021-07-21 12:29;
-Arbeit;01:17;2021-07-20 18:44;2021-07-20 20:02;
+Verkehr;01:17;2021-07-20 18:44;2021-07-20 20:02;
 Arbeit;03:50;2021-07-20 13:14;2021-07-20 17:04;
 Mittagspause ;00:41;2021-07-20 12:32;2021-07-20 13:14;
 Arbeit;04:55;2021-07-20 07:37;2021-07-20 12:32;
diff --git a/ui/src/lib/Models.svelte.js b/ui/src/lib/Models.svelte.js
index 099129a..f9bc552 100644
--- a/ui/src/lib/Models.svelte.js
+++ b/ui/src/lib/Models.svelte.js
@@ -1,9 +1,10 @@
 export class PeriodRecord {
     /**
-     * @param {{ workingDays: Number; totalHours: any; overtime: string; period: string; }} record
+     * @param {{ workingDays: Number; totalHours: any; overtime: string; period: string; homeOfficeDays: Number }} record
      */
     constructor(record) {
         this.workingDays = Number(record.workingDays)
+        this.homeOfficeDays = Number(record.homeOfficeDays)
         this.totalHours = String(record.totalHours)
         this.period = String(record.period)
         this.overtime = String('##:##:##')
diff --git a/ui/src/lib/Views.svelte b/ui/src/lib/Views.svelte
index 6b4556a..038a7f7 100644
--- a/ui/src/lib/Views.svelte
+++ b/ui/src/lib/Views.svelte
@@ -43,6 +43,7 @@
                 <tr>
                     <th>Zeitraum</th>
                     <th>Arbeitstage</th>
+                    <th>davon HomeOffice</th>
                     <th>Arbeitsstunden</th>
                     <th>Über- / Unterstunden</th>
                 </tr>
@@ -52,6 +53,7 @@
                     <tr>
                         <td>{record.period}</td>
                         <td>{record.workingDays}</td>
+                        <td>{record.homeOfficeDays}</td>
                         <td>{record.totalHours}</td>
                         <td class="{record.isMinus ? 'absence-time' : ''}">{record.overtime}</td>
                     </tr>
diff --git a/ui/src/routes/working-hours/+page.server.js b/ui/src/routes/working-hours/+page.server.js
index 6656eaa..b0a6eb4 100644
--- a/ui/src/routes/working-hours/+page.server.js
+++ b/ui/src/routes/working-hours/+page.server.js
@@ -34,6 +34,7 @@ export const actions = {
         const body_data = {
             workingDay: data.get('workingDay'),
             workingTime: data.get('workingTime'),
+            isHomeOffice: data.get('isHomeOffice'),
         }
         await WorkingHoursRepository.update(env.API_URL, data.get('workingDay'), body_data);
     },
@@ -42,6 +43,7 @@ export const actions = {
         const body_data = {
             workingDay: form_data.get('workingDay'),
             workingTime: form_data.get('workingTime'),
+            isHomeOffice: form_data.get('isHomeOffice'),
         }
         await WorkingHoursRepository.add(env.API_URL, body_data);
     },
@@ -56,13 +58,19 @@ export const actions = {
             actualDayObject.setDate(actualDayObject.getDate() + 1)
         })
         for (const pair of form_data.entries()) {
-            const working_day = day_list[pair[0]] ?? null
-            if (working_day === null) {
+            let key = /(?<day>\w+)\[time]/.exec(pair[0])
+            if (key === null) {
+                continue
+            }
+            let day = key?.groups?.day ?? ''
+            const working_day = day_list[day] ?? null
+            if (working_day === null || pair[1] === '00:00:00' || pair[1] === '00:00') {
                 continue
             }
             const body_data = {
                 workingDay: working_day,
                 workingTime: pair[1],
+                isHomeOffice: form_data.has(day + '[isHomeOffice]')
             }
             await WorkingHoursRepository.addOrUpdate(env.API_URL, working_day, body_data);
         }
@@ -70,10 +78,15 @@ export const actions = {
     'import-csv': async ({ request }) => {
         const form_data = await request.formData();
         for (const pair of form_data.entries()) {
-            const working_day = pair[0]
+            let key = /^(?<day>\d{4}-\d{2}-\d{2})\[time]$/.exec(pair[0])
+            if (key === null) {
+                continue
+            }
+            let working_day = key?.groups?.day ?? ''
             const body_data = {
                 workingDay: working_day,
                 workingTime: pair[1],
+                isHomeOffice: form_data.has(working_day + '[isHomeOffice]')
             }
             await WorkingHoursRepository.addOrUpdate(env.API_URL, working_day, body_data);
         }
diff --git a/ui/src/routes/working-hours/+page.svelte b/ui/src/routes/working-hours/+page.svelte
index ee61cef..979449f 100644
--- a/ui/src/routes/working-hours/+page.svelte
+++ b/ui/src/routes/working-hours/+page.svelte
@@ -4,11 +4,11 @@
     import IconifyIcon from "@iconify/svelte";
     let { data } = $props();
     const TITLE = "Bearbeitung Einträge"
-    /** @type {{workingDay: String, workingTime: String, }[]|null} **/
+    /** @type {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }[]|null} **/
     let records = $state([])
     const init = async () => await data.promise.then(
         /**
-         * @param {{workingDay: String, workingTime: String, }[]} data
+         * @param {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }[]} data
          */
         data => {
             records = data
@@ -53,14 +53,16 @@
                     <tr>
                         <th>Datum</th>
                         <th>Arbeitsstunden</th>
+                        <th>Zu Hause gearbeitet?</th>
                         <th>Aktionen</th>
                     </tr>
                     </thead>
                     <tbody>
                     {#each records as record}
-                        <tr>
+                        <tr style="{record.isHomeOffice ? 'background: aqua' : ''}">
                             <td>{record.workingDay}</td>
                             <td>{record.workingTime}</td>
+                            <td>{record.isHomeOffice ? 'ja' : ''}</td>
                             <td>
                                 <button formaction={'/working-hours/' + record.workingDay} type="submit">Bearbeiten
                                     <IconifyIcon icon={wrenchIcon}/>
diff --git a/ui/src/routes/working-hours/[working_day]/+page.svelte b/ui/src/routes/working-hours/[working_day]/+page.svelte
index d1e2dc1..7c1def9 100644
--- a/ui/src/routes/working-hours/[working_day]/+page.svelte
+++ b/ui/src/routes/working-hours/[working_day]/+page.svelte
@@ -4,11 +4,11 @@
     import xIcon from "@iconify-icons/oi/x";
     let { data } = $props();
     const TITLE = "Bearbeitung eines Eintrags"
-    /** @type {{workingDay: String, workingTime: String, }|null} **/
+    /** @type {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }|null} **/
     let activeDate = $state(null)
     const init = async () => await data.promise.then(
         /**
-         * @param {{workingDay: String, workingTime: String, }} data
+         * @param {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }} data
          */
         data => {
             activeDate = data
@@ -42,6 +42,10 @@
                                value="{activeDate.workingTime}"
                                id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
                     </div>
+                    <div>
+                        <label for="isHomeOffice">Arbeitszeit</label>
+                        <input name="isHomeOffice" type="checkbox" checked={activeDate.isHomeOffice} id="isHomeOffice">
+                    </div>
                 </fieldset>
             {/if}
             <fieldset name="buttons">
diff --git a/ui/src/routes/working-hours/create-by-day/+page.svelte b/ui/src/routes/working-hours/create-by-day/+page.svelte
index 80d1fd0..f4fc28c 100644
--- a/ui/src/routes/working-hours/create-by-day/+page.svelte
+++ b/ui/src/routes/working-hours/create-by-day/+page.svelte
@@ -29,6 +29,10 @@
                     <input name="workingTime" placeholder="Arbeitszeit" type="time" step="1" value=""
                            id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
                 </div>
+                <div>
+                    <label for="isHomeOffice">Arbeitszeit</label>
+                    <input name="isHomeOffice" type="checkbox" id="isHomeOffice">
+                </div>
             </fieldset>
             <fieldset name="buttons">
                 <button type="submit">Übernehmen und Weiter
diff --git a/ui/src/routes/working-hours/create-by-week/+page.svelte b/ui/src/routes/working-hours/create-by-week/+page.svelte
index 0a0d9a3..56553c2 100644
--- a/ui/src/routes/working-hours/create-by-week/+page.svelte
+++ b/ui/src/routes/working-hours/create-by-week/+page.svelte
@@ -14,6 +14,22 @@
     tbody.weekend td input, tbody.weekend td {
         color: red;
     }
+    tbody.weekend label {
+        color: initial;
+    }
+
+    section form fieldset div input {
+        display: inline-block;
+        padding: 0.25rem;
+        border-style: solid;
+        border-width: thin;
+    }
+
+    section form fieldset div input[type=checkbox] {
+        display: inline-block;
+        width: auto;
+        margin: 0 1rem 1.0rem;
+    }
 </style>
 
 
@@ -39,10 +55,19 @@
                                     {day}
                                 </td>
                                 <td>
-                                    <input name="{day}" value="08:00:00" type="time" step="1"
+                                    <input name="{day}[time]" value="08:00:00" type="time" step="1"
                                            required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
                                 </td>
                             </tr>
+                            <tr>
+                                <td>
+                                </td>
+                                <td>
+                                    <label>wurde zu Hause gearbeitet?
+                                        <input name="{day}[isHomeOffice]" type="checkbox">
+                                    </label>
+                                </td>
+                            </tr>
                         {/each}
                         </tbody>
                         <tbody class="weekend">
@@ -52,10 +77,19 @@
                                     {day}
                                 </td>
                                 <td>
-                                    <input name="{day}" value="00:00:00" type="time" step="1"
+                                    <input name="{day}[time]" value="00:00:00" type="time" step="1"
                                            required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
                                 </td>
                             </tr>
+                            <tr>
+                                <td>
+                                </td>
+                                <td>
+                                    <label>wurde zu Hause gearbeitet?
+                                        <input name="{day}[isHomeOffice]" type="checkbox">
+                                    </label>
+                                </td>
+                            </tr>
                         {/each}
                         </tbody>
                     </table>
diff --git a/ui/src/routes/working-hours/import-csv/+page.svelte b/ui/src/routes/working-hours/import-csv/+page.svelte
index 15eddf2..02938fd 100644
--- a/ui/src/routes/working-hours/import-csv/+page.svelte
+++ b/ui/src/routes/working-hours/import-csv/+page.svelte
@@ -8,7 +8,7 @@
 
     const TITLE = "Erstellung neuer Einträge für eine Woche"
 
-    /** @type {{ workingTime: String, workingDay: String, }[]} **/
+    /** @type {{ workingTime: String, workingDay: String, isHomeOffice: Boolean, }[]} **/
     let imported_data = $state([])
 
 
@@ -30,6 +30,8 @@
             complete: results => {
                 /** @type {Object<String, Number>} **/
                 let cash_work_days = {}
+                /** @type {Object<String, Boolean>} **/
+                let home_office_days = {}
                 results.data.forEach(
                     /** @param {Object<String, any>} item **/
                     item => {
@@ -42,6 +44,9 @@
                         let work_to = new Date(item['Bis'])
                         let actual_day = work_from.toISOString().substring(0, 10)
                         let actual_work_hours = (work_to.getTime() - work_from.getTime()) / (1000 * 60 * 60)
+                        if (activity.trim() === 'Verkehr') {
+                            home_office_days[actual_day] = true
+                        }
                         cash_work_days[actual_day] ??= 0
                         cash_work_days[actual_day] += actual_work_hours
                     }
@@ -52,7 +57,11 @@
                     let minutes_digits = Math.round((hours - hours_digits) * 60)
                     let working_time = String(hours_digits).padStart(2, '0') + ':'
                         + String(minutes_digits).padStart(2, '0') + ':00'
-                    imported_data.push({workingTime: working_time, workingDay: day})
+                    imported_data.push({
+                        workingTime: working_time,
+                        workingDay: day,
+                        isHomeOffice: home_office_days[day] ?? false,
+                    })
                 }
             },
         })
@@ -90,7 +99,10 @@
                                         {item.workingDay}
                                     </td>
                                     <td>
-                                        <input type="time" readonly name="{item.workingDay}" value="{item.workingTime}">
+                                        <input type="time" readonly name="{item.workingDay}[time]" value="{item.workingTime}">
+                                    </td>
+                                    <td>
+                                        <input type="checkbox" readonly name="{item.workingDay}[isHomeOffice]" checked={item.isHomeOffice}>
                                     </td>
                                 </tr>
                             {/each}