From 45650a0f9a4320250fe580d29cef54a938b940cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Wed, 15 Dec 2021 17:47:02 +0100
Subject: [PATCH 1/4] refactor: Abfrage in ein eigenes Modul ausgelagert.

---
 ui/src/components/Repositories.svelte |  83 +++++++++++++++++++
 ui/src/routes/MonthlyViews.svelte     |  20 ++---
 ui/src/routes/WeeklyViews.svelte      |  20 ++---
 ui/src/routes/WorkingHours.svelte     | 114 +++++---------------------
 ui/src/routes/YearlyViews.svelte      |  20 ++---
 5 files changed, 117 insertions(+), 140 deletions(-)
 create mode 100644 ui/src/components/Repositories.svelte

diff --git a/ui/src/components/Repositories.svelte b/ui/src/components/Repositories.svelte
new file mode 100644
index 0000000..e5a3ba6
--- /dev/null
+++ b/ui/src/components/Repositories.svelte
@@ -0,0 +1,83 @@
+<script context="module">
+    const MyFetch = {
+        'post': async (rest_url, request_body) => {
+            return MyFetch._fetch(rest_url, {
+                method: 'POST',
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'omit',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: request_body,
+            }, {})
+        },
+        'put': async (rest_url, http_body) => {
+            return MyFetch._fetch(rest_url, {
+                method: 'PUT',
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'omit',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: http_body,
+            }, {})
+        },
+        'get': async (rest_url, query_parameters) => {
+            if (query_parameters !== null) {
+                let filter = []
+                for (let parameter in query_parameters) {
+                    filter.push(parameter + '=' + query_parameters[parameter])
+                }
+                if (filter.length > 0) {
+                    rest_url += '?' + filter.join('&')
+                }
+            }
+            return MyFetch._fetch(rest_url, {})
+        },
+        '_fetch': async (rest_url, request_options) => {
+            // noinspection JSUnresolvedVariable
+            let response = await fetch(env.API_URL + rest_url, request_options).catch(err => {
+                console.error(err)
+                return null
+            })
+            if (!response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        }
+    }
+
+    export let WorkingHoursRepository = {
+        'browse': () => {
+            return MyFetch.get('/working-hours')
+        },
+
+        'read': date => {
+            return MyFetch.get('/working-hours/' + date)
+        },
+
+        'add': async (record) => {
+            console.debug(record);
+            return MyFetch.post('/working-hours', JSON.stringify(record))
+        },
+
+        'update': async (date, record) => {
+            console.debug(record);
+            return MyFetch.put('/working-hours/' + date, JSON.stringify(record))
+        }
+    }
+
+    export let WorkingHoursViewsRepository = {
+        'weekly': async () => {
+            return MyFetch.get('/views/working-hours/weekly')
+        },
+        'monthly': async () => {
+            return MyFetch.get('/views/working-hours/monthly')
+        },
+        'yearly': async () => {
+            return MyFetch.get('/views/working-hours/yearly')
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/ui/src/routes/MonthlyViews.svelte b/ui/src/routes/MonthlyViews.svelte
index fd4166e..3818a8c 100644
--- a/ui/src/routes/MonthlyViews.svelte
+++ b/ui/src/routes/MonthlyViews.svelte
@@ -1,5 +1,6 @@
 <script>
     import Views from "./Views.svelte";
+    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
     export let params;
     params = {
         title: 'Monatsansicht',
@@ -8,21 +9,10 @@
     }
     const View = {
         'browse': () => {
-            fetch(env.API_URL + '/views/working-hours/monthly')
-                .then(res => {
-                    if (!res.ok) {
-                        throw new Error('Fail!');
-                    }
-                    return res.json();
-                })
-                .then(data => {
-                    params.records = data;
-                    params.isLoading = false;
-                })
-                .catch(err => {
-                    params.isLoading = false;
-                    console.log(err);
-                });
+            WorkingHoursViewsRepository.monthly().then(data => {
+                params.records = data;
+                params.isLoading = false;
+            })
         }
     };
     View.browse();
diff --git a/ui/src/routes/WeeklyViews.svelte b/ui/src/routes/WeeklyViews.svelte
index 34eb07b..7483dd5 100644
--- a/ui/src/routes/WeeklyViews.svelte
+++ b/ui/src/routes/WeeklyViews.svelte
@@ -1,5 +1,6 @@
 <script>
     import Views from "./Views.svelte";
+    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
     export let params;
     params = {
         title: 'Wochenansicht',
@@ -8,21 +9,10 @@
     }
     const View = {
         'browse': () => {
-            fetch(env.API_URL + '/views/working-hours/weekly')
-                .then(res => {
-                    if (!res.ok) {
-                        throw new Error('Fail!');
-                    }
-                    return res.json();
-                })
-                .then(data => {
-                    params.records = data;
-                    params.isLoading = false;
-                })
-                .catch(err => {
-                    params.isLoading = false;
-                    console.log(err);
-                });
+            WorkingHoursViewsRepository.weekly().then(data => {
+                params.records = data;
+                params.isLoading = false;
+            })
         }
     };
     View.browse();
diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte
index 15b7682..5510005 100644
--- a/ui/src/routes/WorkingHours.svelte
+++ b/ui/src/routes/WorkingHours.svelte
@@ -1,5 +1,5 @@
 <script>
-    export let params;
+    import {WorkingHoursRepository} from "../components/Repositories.svelte"
     let title = "Bearbeitung Einträge"
     import IconifyIcon from '@iconify/svelte';
     import wrenchIcon from '@iconify-icons/oi/wrench';
@@ -13,100 +13,14 @@
         records: [],
         isLoading: true
     }
-    const Records = {
-        'browse': () => {
-            // noinspection JSUnresolvedVariable
-            fetch(env.API_URL + '/working-hours')
-                .then(res => {
-                    if (!res.ok) {
-                        throw new Error('Fail!');
-                    }
-                    return res.json();
-                })
-                .then(data => {
-                    Controller.cancelActiveRecord();
-                    params.records = data;
-                    params.isLoading = false;
-                })
-                .catch(err => {
-                    params.isLoading = false;
-                    console.log(err);
-                });
-        },
-        'read': date => {
-            // noinspection JSUnresolvedVariable
-            fetch(env.API_URL + '/working-hours/' + date)
-                .then(res => {
-                    if (!res.ok) {
-                        throw new Error('Fail!');
-                    }
-                    return res.json();
-                })
-                .then(data => {
-                    activeRecord = data;
-                    if (date === null) {
-                        Controller.listRecords();
-                    }
-                })
-                .catch(err => {
-                    console.log(err);
-                });
-        },
-        'add': async record => {
-            console.log(record);
-            // noinspection JSUnresolvedVariable
-            await fetch(env.API_URL + '/working-hours', {
-                method: 'POST',
-                mode: 'cors',
-                cache: 'no-cache',
-                credentials: 'omit',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(record)
-            })
-                .then(res => {
-                    if (!res.ok) {
-                        throw new Error('Fail!');
-                    }
-                })
-                .then(() => {
-                    Controller.listRecords();
-                })
-                .catch(err => {
-                    console.log(err);
-                });
-        },
-        'update': async (date, record) => {
-            console.log(record);
-            // noinspection JSUnresolvedVariable
-            await fetch(env.API_URL + '/working-hours/' + date, {
-                method: 'PUT',
-                mode: 'cors',
-                cache: 'no-cache',
-                credentials: 'omit',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(record)
-            })
-                .then(res => {
-                    if (!res.ok) {
-                        throw new Error('Fail!');
-                    }
-                })
-                .then(() => {
-                    Controller.listRecords();
-                })
-                .catch(err => {
-                    console.log(err);
-                });
-        }
-    };
     const Controller = {
         'listRecords': () => {
             Controller.cancelActiveRecord();
-            Records.browse();
+            WorkingHoursRepository.browse().then(data => {
+                Controller.cancelActiveRecord()
+                params.records = data
+                params.isLoading = false
+            });
         },
         'newRecord': () => {
             activeRecord = {workingTime: '00:00:00'};
@@ -114,12 +28,22 @@
         },
         'saveRecord': () => {
             if (newRecord === true) {
-                Records.add(activeRecord);
+                WorkingHoursRepository.add(activeRecord).then(() => {
+                    Controller.listRecords()
+                });
             } else {
-                Records.update(activeRecord.workingDay, activeRecord);
+                WorkingHoursRepository.update(activeRecord.workingDay, activeRecord).then(() => {
+                    Controller.listRecords()
+                });
             }
         },
-        'selectActiveRecord': record => Records.read(record.workingDay),
+        'selectActiveRecord': record => WorkingHoursRepository.read(record.workingDay).then(data => {
+            if (data === null) {
+                Controller.listRecords()
+                return
+            }
+            activeRecord = data;
+        }),
         'cancelActiveRecord': () => {
             activeRecord = null;
             newRecord = false;
diff --git a/ui/src/routes/YearlyViews.svelte b/ui/src/routes/YearlyViews.svelte
index 974b2b1..376a1ae 100644
--- a/ui/src/routes/YearlyViews.svelte
+++ b/ui/src/routes/YearlyViews.svelte
@@ -1,5 +1,6 @@
 <script>
     import Views from "./Views.svelte";
+    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
     export let params;
     params = {
         title: 'Jahresansicht',
@@ -8,21 +9,10 @@
     }
     const View = {
         'browse': () => {
-            fetch(env.API_URL + '/views/working-hours/yearly')
-                .then(res => {
-                    if (!res.ok) {
-                        throw new Error('Fail!');
-                    }
-                    return res.json();
-                })
-                .then(data => {
-                    params.records = data;
-                    params.isLoading = false;
-                })
-                .catch(err => {
-                    params.isLoading = false;
-                    console.log(err);
-                });
+            WorkingHoursViewsRepository.yearly().then(data => {
+                params.records = data;
+                params.isLoading = false;
+            })
         }
     };
     View.browse();

From 907ce88ed12081b61b306a2db576bab8ead4943d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Wed, 15 Dec 2021 18:16:48 +0100
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20Export-Objekte=20m=C3=BCssen=20konst?=
 =?UTF-8?q?ant=20sein?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/Repositories.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/Repositories.svelte b/ui/src/components/Repositories.svelte
index e5a3ba6..2953868 100644
--- a/ui/src/components/Repositories.svelte
+++ b/ui/src/components/Repositories.svelte
@@ -49,7 +49,7 @@
         }
     }
 
-    export let WorkingHoursRepository = {
+    export const WorkingHoursRepository = {
         'browse': () => {
             return MyFetch.get('/working-hours')
         },
@@ -69,7 +69,7 @@
         }
     }
 
-    export let WorkingHoursViewsRepository = {
+    export const WorkingHoursViewsRepository = {
         'weekly': async () => {
             return MyFetch.get('/views/working-hours/weekly')
         },

From 66022e42df837de57e26f934d57911b03031a6d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Wed, 15 Dec 2021 18:21:29 +0100
Subject: [PATCH 3/4] =?UTF-8?q?Refactor:=20Aufteilung=20der=20Darstellung?=
 =?UTF-8?q?=20der=20Eintr=C3=A4ge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/routes/WorkingHours.svelte          | 126 ++-------------------
 ui/src/routes/WorkingHours/Formular.svelte |  49 ++++++++
 ui/src/routes/WorkingHours/List.svelte     |  78 +++++++++++++
 3 files changed, 136 insertions(+), 117 deletions(-)
 create mode 100644 ui/src/routes/WorkingHours/Formular.svelte
 create mode 100644 ui/src/routes/WorkingHours/List.svelte

diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte
index 5510005..198507f 100644
--- a/ui/src/routes/WorkingHours.svelte
+++ b/ui/src/routes/WorkingHours.svelte
@@ -1,140 +1,32 @@
 <script>
-    import {WorkingHoursRepository} from "../components/Repositories.svelte"
-    let title = "Bearbeitung Einträge"
-    import IconifyIcon from '@iconify/svelte';
-    import wrenchIcon from '@iconify-icons/oi/wrench';
-    import checkIcon from '@iconify-icons/oi/check';
-    import xIcon from '@iconify-icons/oi/x';
-    import documentIcon from '@iconify-icons/oi/document';
+    import List from "./WorkingHours/List.svelte";
+    import Formular from "./WorkingHours/Formular.svelte";
+
+    let TITLE = "Bearbeitung Einträge"
     let activeRecord = null;
     let newRecord = false;
-    params = {
-        title: 'Einträge',
-        records: [],
-        isLoading: true
-    }
-    const Controller = {
-        'listRecords': () => {
-            Controller.cancelActiveRecord();
-            WorkingHoursRepository.browse().then(data => {
-                Controller.cancelActiveRecord()
-                params.records = data
-                params.isLoading = false
-            });
-        },
-        'newRecord': () => {
-            activeRecord = {workingTime: '00:00:00'};
-            newRecord = true;
-        },
-        'saveRecord': () => {
-            if (newRecord === true) {
-                WorkingHoursRepository.add(activeRecord).then(() => {
-                    Controller.listRecords()
-                });
-            } else {
-                WorkingHoursRepository.update(activeRecord.workingDay, activeRecord).then(() => {
-                    Controller.listRecords()
-                });
-            }
-        },
-        'selectActiveRecord': record => WorkingHoursRepository.read(record.workingDay).then(data => {
-            if (data === null) {
-                Controller.listRecords()
-                return
-            }
-            activeRecord = data;
-        }),
-        'cancelActiveRecord': () => {
-            activeRecord = null;
-            newRecord = false;
-        }
-    };
-    const initSite = () => {
-        Controller.listRecords()
-    };
-    initSite()
 </script>
 
 <svelte:head>
-    <title>{title}</title>
+    <title>{TITLE}</title>
 </svelte:head>
 
 {#if activeRecord === null}
     <section id="list-records">
         <header>
-            <h1>{title}</h1>
+            <h1>{TITLE}</h1>
         </header>
         <article>
-            {#if params.isLoading === true}
-                <p>Loading...</p>
-            {:else}
-                <!--suppress HtmlUnknownTarget -->
-                <form action="/working-hours">
-                    <fieldset>
-                        <button on:click={Controller.newRecord} type="button">Neuer Eintrag
-                            <IconifyIcon icon={documentIcon}/>
-                        </button>
-                    </fieldset>
-                </form>
-                <table>
-                    <colgroup>
-                        <col />
-                        <col />
-                        <col />
-                    </colgroup>
-                    <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 on:click={() => Controller.selectActiveRecord(record)} type="button">Bearbeiten
-                                    <IconifyIcon icon={wrenchIcon}/>
-                                </button>
-                            </td>
-                        </tr>
-                    {/each}
-                    </tbody>
-                </table>
-            {/if}
+            <List bind:activeRecord={activeRecord} bind:newRecord={newRecord}/>
         </article>
     </section>
 {:else}
     <section id="edit-record">
         <header>
-            <h1>{title}</h1>
+            <h1>{TITLE}</h1>
         </header>
         <article>
-            <!--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>
-                <fieldset name="buttons">
-                    <button on:click={Controller.saveRecord} type="button">Übernehmen
-                        <IconifyIcon icon={checkIcon} color="green"/>
-                    </button>
-                    <button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
-                        <IconifyIcon icon={xIcon}/>
-                    </button>
-                </fieldset>
-            </form>
+            <Formular bind:activeRecord={activeRecord} bind:newRecord={newRecord}/>
         </article>
     </section>
 {/if}
diff --git a/ui/src/routes/WorkingHours/Formular.svelte b/ui/src/routes/WorkingHours/Formular.svelte
new file mode 100644
index 0000000..370bf0a
--- /dev/null
+++ b/ui/src/routes/WorkingHours/Formular.svelte
@@ -0,0 +1,49 @@
+<script>
+    import {WorkingHoursRepository} from "../../components/Repositories.svelte"
+    import IconifyIcon from '@iconify/svelte'
+    import checkIcon from '@iconify-icons/oi/check'
+    import xIcon from '@iconify-icons/oi/x'
+
+    export let activeRecord = null
+    export let newRecord = false
+    const Controller = {
+        'saveRecord': () => {
+            if (newRecord === true) {
+                WorkingHoursRepository.add(activeRecord).then(() => {
+                    Controller.cancelActiveRecord()
+                });
+            } else {
+                WorkingHoursRepository.update(activeRecord.workingDay, activeRecord).then(() => {
+                    Controller.cancelActiveRecord()
+                });
+            }
+        },
+        'cancelActiveRecord': () => {
+            activeRecord = null;
+            newRecord = false;
+        }
+    }
+</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>
+    <fieldset name="buttons">
+        <button on:click={Controller.saveRecord} type="button">Übernehmen
+            <IconifyIcon icon={checkIcon} color="green"/>
+        </button>
+        <button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
+            <IconifyIcon icon={xIcon}/>
+        </button>
+    </fieldset>
+</form>
\ No newline at end of file
diff --git a/ui/src/routes/WorkingHours/List.svelte b/ui/src/routes/WorkingHours/List.svelte
new file mode 100644
index 0000000..0e53e85
--- /dev/null
+++ b/ui/src/routes/WorkingHours/List.svelte
@@ -0,0 +1,78 @@
+<script>
+    import {WorkingHoursRepository} from "../../components/Repositories.svelte"
+
+    export let activeRecord = null
+    export let newRecord = false
+    let isLoading = true
+    let records = []
+    import IconifyIcon from '@iconify/svelte'
+    import wrenchIcon from '@iconify-icons/oi/wrench'
+    import documentIcon from '@iconify-icons/oi/document'
+
+    const Controller = {
+        'listRecords': () => {
+            Controller.cancelActiveRecord();
+            WorkingHoursRepository.browse().then(data => {
+                Controller.cancelActiveRecord()
+                records = data
+                isLoading = false
+            });
+        },
+        'newRecord': () => {
+            activeRecord = {workingTime: '00:00:00'};
+            newRecord = true;
+        },
+        'selectActiveRecord': record => WorkingHoursRepository.read(record.workingDay).then(data => {
+            if (data === null) {
+                Controller.listRecords()
+                return
+            }
+            activeRecord = data;
+        }),
+        'cancelActiveRecord': () => {
+            activeRecord = null;
+            newRecord = false;
+        }
+    }
+    Controller.listRecords()
+</script>
+
+<!--suppress HtmlUnknownTarget -->
+<form action="/working-hours">
+    <fieldset>
+        <button on:click={Controller.newRecord} type="button">Neuer Eintrag
+            <IconifyIcon icon={documentIcon}/>
+        </button>
+    </fieldset>
+</form>
+{#if isLoading === true}
+    <p>Loading...</p>
+{:else}
+    <table>
+        <colgroup>
+            <col/>
+            <col/>
+            <col/>
+        </colgroup>
+        <thead>
+        <tr>
+            <th>Datum</th>
+            <th>Arbeitsstunden</th>
+            <th>Aktionen</th>
+        </tr>
+        </thead>
+        <tbody>
+        {#each records as record}
+            <tr>
+                <td>{record.workingDay}</td>
+                <td>{record.workingTime}</td>
+                <td>
+                    <button on:click={() => Controller.selectActiveRecord(record)} type="button">Bearbeiten
+                        <IconifyIcon icon={wrenchIcon}/>
+                    </button>
+                </td>
+            </tr>
+        {/each}
+        </tbody>
+    </table>
+{/if}
\ No newline at end of file

From c3a1953cc95bd491831acd3161fe52c988d18323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Wed, 15 Dec 2021 18:50:32 +0100
Subject: [PATCH 4/4] =?UTF-8?q?Refactor:=20Anzeige=20der=20verschiedenen?=
 =?UTF-8?q?=20Zeitr=C3=A4ume=20verbessern?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/routes/MonthlyViews.svelte | 14 ++------------
 ui/src/routes/Views.svelte        | 14 +++++++++++---
 ui/src/routes/WeeklyViews.svelte  | 14 ++------------
 ui/src/routes/YearlyViews.svelte  | 14 ++------------
 4 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/ui/src/routes/MonthlyViews.svelte b/ui/src/routes/MonthlyViews.svelte
index 3818a8c..b2ac1f2 100644
--- a/ui/src/routes/MonthlyViews.svelte
+++ b/ui/src/routes/MonthlyViews.svelte
@@ -1,21 +1,11 @@
 <script>
     import Views from "./Views.svelte";
     import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params;
+    export let params
     params = {
         title: 'Monatsansicht',
-        records: [],
-        isLoading: true
+        promise: WorkingHoursViewsRepository.monthly()
     }
-    const View = {
-        'browse': () => {
-            WorkingHoursViewsRepository.monthly().then(data => {
-                params.records = data;
-                params.isLoading = false;
-            })
-        }
-    };
-    View.browse();
 </script>
 
 <Views {params} />
\ No newline at end of file
diff --git a/ui/src/routes/Views.svelte b/ui/src/routes/Views.svelte
index 0a665a2..70c5086 100644
--- a/ui/src/routes/Views.svelte
+++ b/ui/src/routes/Views.svelte
@@ -1,5 +1,7 @@
 <script>
-    export let params;
+    export let params = {};
+    let records = []
+    let isLoading = true
     console.log(params)
     if (!String.prototype.startsWith) {
         String.prototype.startsWith = function(searchString, position) {
@@ -9,6 +11,12 @@
     }
     $: isNegative = time => time.startsWith('-') ? 'absence-time' : '';
     $: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time;
+
+    const init = async () => await params.promise.then(data => {
+        records = data
+        isLoading = false
+    })
+    init()
 </script>
 
 <svelte:head>
@@ -20,7 +28,7 @@
         <h1>{params.title}</h1>
     </header>
     <article>
-        {#if params.isLoading === true}
+        {#if isLoading === true}
             <p>Loading...</p>
         {:else}
             <table>
@@ -39,7 +47,7 @@
                 </tr>
                 </thead>
                 <tbody>
-                {#each params.records as record}
+                {#each records as record}
                     <tr>
                         <td>{record.period}</td>
                         <td>{record.workingDays}</td>
diff --git a/ui/src/routes/WeeklyViews.svelte b/ui/src/routes/WeeklyViews.svelte
index 7483dd5..6700321 100644
--- a/ui/src/routes/WeeklyViews.svelte
+++ b/ui/src/routes/WeeklyViews.svelte
@@ -1,21 +1,11 @@
 <script>
     import Views from "./Views.svelte";
     import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params;
+    export let params
     params = {
         title: 'Wochenansicht',
-        records: [],
-        isLoading: true
+        promise: WorkingHoursViewsRepository.weekly()
     }
-    const View = {
-        'browse': () => {
-            WorkingHoursViewsRepository.weekly().then(data => {
-                params.records = data;
-                params.isLoading = false;
-            })
-        }
-    };
-    View.browse();
 </script>
 
 <Views {params} />
\ No newline at end of file
diff --git a/ui/src/routes/YearlyViews.svelte b/ui/src/routes/YearlyViews.svelte
index 376a1ae..f3ea452 100644
--- a/ui/src/routes/YearlyViews.svelte
+++ b/ui/src/routes/YearlyViews.svelte
@@ -1,21 +1,11 @@
 <script>
     import Views from "./Views.svelte";
     import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params;
+    export let params
     params = {
         title: 'Jahresansicht',
-        records: [],
-        isLoading: true
+        promise: WorkingHoursViewsRepository.yearly()
     }
-    const View = {
-        'browse': () => {
-            WorkingHoursViewsRepository.yearly().then(data => {
-                params.records = data;
-                params.isLoading = false;
-            })
-        }
-    };
-    View.browse();
 </script>
 
 <Views {params} />
\ No newline at end of file