Refactor: Anzeige der verschiedenen Zeiträume verbessern

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} />

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>

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} />

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} />