Feature: Der Wechsel der Eintrags-Periode wird durch ein Menu bestimmt

ui/public/less/lesslib/layout.less

@@ -91,6 +91,29 @@ main {
         form {
             @formLabelWidth: 10rem;
             @formItemWidth: 40rem;
+            nav.menu {
+                width: @formItemWidth + @formLabelWidth + 4rem;
+                border-color: @mainColor;
+                border-bottom-style: solid;
+                margin: 1rem auto;
+                span {
+                    border-color: @mainColor;
+                    border-style: solid solid none;
+                    padding: 0.5rem;
+                    display: inline-block;
+                    font-weight: bolder;
+                    margin-right: 1rem;
+                    &:first-child {
+                        margin-left: 1.5rem;
+                    }
+                    &:hover {
+                        background-color: darken(@mainColorLight,10%,relativ);
+                    }
+                    &.active {
+                        background-color: darken(@mainColorLight,20%,relativ);
+                    }
+                }
+            }
             fieldset {
                 width: @formItemWidth + @formLabelWidth + 2rem;
                 margin: 1rem auto;

ui/src/routes/WorkingHours/Formular.svelte

@@ -3,39 +3,102 @@
     import IconifyIcon from '@iconify/svelte'
     import checkIcon from '@iconify-icons/oi/check'
     import xIcon from '@iconify-icons/oi/x'
-    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte"
+    import EditByDay from "./Formular/EditByDay.svelte";
+    import EditByWeek from "./Formular/EditByWeek.svelte";
+    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte";
+
+    const DAILY_EDIT = 0
+    const WEEKLY_EDIT = 1
 
-    export let activeRecord = null
     const Controller = {
         'saveRecord': () => {
-            WorkingHoursRepository.addOrUpdate(activeRecord.workingDay, activeRecord).then(() => {
-                Controller.nextDay()
-            });
-        },
-        'nextDay': async () => {
-            let actDate = new TimekeepingDate(activeRecord.workingDay)
-            let nextDay = actDate.getNextDay()
-            activeRecord = await WorkingHoursRepository.readOrNew(nextDay.getDateString())
+            activeRecordList.forEach((actualRecord) => {
+                if (actualRecord.workingTime === '00:00:00') {
+                    return
+                }
+                WorkingHoursRepository.addOrUpdate(actualRecord.workingDay, actualRecord);
+            })
+            activeDate = nextDate
+            makeTimekeepingList()
         },
         'cancelActiveRecord': () => {
-            activeRecord = null;
+            activeRecordList = []
+            activeRecord = null
         }
     }
+    const WeekController = {
+        'makeTimekeepingList': () => {
+            let actualDay = WeekController.getMondayFromWeek(
+                activeDate === null ? new TimekeepingDate() : new TimekeepingDate(activeDate)
+            )
+            activeRecordList = []
+            activeDate = actualDay.getDateString()
+            for (const daysDiff in [0, 1, 2, 3, 4, 5, 6]) {
+                activeRecordList.push({workingTime: '00:00:00', workingDay: actualDay.getDateString()})
+                actualDay = actualDay.getNextDay()
+            }
+            nextDate = actualDay.getDateString()
+            WorkingHoursRepository.browse(activeRecordList[0].workingDay, activeRecordList[6].workingDay).then(data => {
+                data.forEach(item => {
+                    let actualDay = new TimekeepingDate(item.workingDay)
+                    activeRecordList[actualDay.getDay()-1].workingTime = item.workingTime
+                })
+            })
+        },
+        'getMondayFromWeek': actualDayObject => {
+            if (actualDayObject.getDate() === 0) {
+                actualDayObject.setDate(actualDayObject.getDate() - 7)
+            }
+            if (actualDayObject.getDate() !== 1) {
+                actualDayObject.setDate(actualDayObject.getDate() - (actualDayObject.getDay() - 1))
+            }
+            return actualDayObject
+        }
+    }
+    const DayController = {
+        'makeTimekeepingList': () => {
+            let actualDay = activeDate === null ? new TimekeepingDate() : new TimekeepingDate(activeDate)
+            WorkingHoursRepository.readOrNew(actualDay.getDateString()).then(data => {
+                activeRecordList = [ data ]
+                activeDate = actualDay.getDateString()
+                nextDate = actualDay.getNextDay().getDateString()
+            })
+        }
+    }
+    const MenuController = {
+        'dailyEdit': () => {
+            period_of_edit = DAILY_EDIT
+            makeTimekeepingList = DayController.makeTimekeepingList
+            makeTimekeepingList()
+        },
+        'weeklyEdit': () => {
+            period_of_edit = WEEKLY_EDIT
+            makeTimekeepingList = WeekController.makeTimekeepingList
+            makeTimekeepingList()
+        }
+    }
+
+    let activeDate = null
+    let nextDate = null
+    let activeRecordList = []
+    export let activeRecord = null
+    let period_of_edit
+    let makeTimekeepingList
+
+    MenuController.dailyEdit()
 </script>
 <!--suppress HtmlUnknownTarget -->
 <form action="/working-hours" name="editRecord">
-    <fieldset name="record-data">
-        <div>
-            <label for="workingDay">Arbeitstag</label>
-            <input bind:value={activeRecord.workingDay} type="date"
-                   id="workingDay" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
-        </div>
-        <div>
-            <label for="workingTime">Arbeitszeit</label>
-            <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
-                   id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
-        </div>
-    </fieldset>
+    <nav class="menu">
+        <span on:click={MenuController.dailyEdit} class:active={period_of_edit === DAILY_EDIT}>Täglich</span>
+        <span on:click={MenuController.weeklyEdit} class:active={period_of_edit === WEEKLY_EDIT}>Wöchentlich</span>
+    </nav>
+    {#if period_of_edit === DAILY_EDIT}
+        <EditByDay bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
+    {/if}
+    {#if period_of_edit === WEEKLY_EDIT}
+        <EditByWeek bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
+    {/if}
     <fieldset name="buttons">
         <button on:click={Controller.saveRecord} type="button">Übernehmen und Weiter
             <IconifyIcon icon={checkIcon} color="green"/>