Die Daten für die Ansichten werden von einer API abgefragt.

ui/src/components/App.svelte

@@ -46,36 +46,6 @@
 	addEventListener('popstate', track);
 
 
-    let w = {
-        "period": "2020#01",
-        "workingDays": 20,
-        "totalHours": "99:00:00",
-        "overtime": "10:22:00"
-    };
-    let weekly = {
-        "title" : "Wochenansicht",
-        "records" : [w, w]
-    };
-    let m = {
-        "period": "2020-01",
-        "workingDays": 20,
-        "totalHours": "99:00:00",
-        "overtime": "10:22:00"
-    };
-    let monthly = {
-        "title" : "Monatsansicht",
-        "records" : [m, m]
-    };
-    let y = {
-        "period": "2020",
-        "workingDays": 20,
-        "totalHours": "99:00:00",
-        "overtime": "10:22:00"
-    };
-    let yearly = {
-        "title" : "Jahresansicht",
-        "records" : [y, y]
-    };
     let r = {
         "workingDay": "2020-01-15",
         "workingTime": "09:00:00"
@@ -86,10 +56,10 @@
     };
 
 	const router = Navaid('/')
-		.on('/', () => run(import('../routes/Home.svelte'), weekly))
+		.on('/', () => run(import('../routes/Home.svelte')))
-		.on('/views/weekly', () => run(import('../routes/Views.svelte'), weekly))
+		.on('/views/weekly', () => run(import('../routes/WeeklyViews.svelte')))
-		.on('/views/monthly', () => run(import('../routes/Views.svelte'), monthly))
+		.on('/views/monthly', () => run(import('../routes/MonthlyViews.svelte')))
-		.on('/views/yearly', () => run(import('../routes/Views.svelte'), yearly))
+		.on('/views/yearly', () => run(import('../routes/YearlyViews.svelte')))
 		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte'), records))
 		.listen();
 

ui/src/routes/Home.svelte

@@ -1,6 +1,5 @@
-<Views {params} />
+<Views />
 
 <script>
-    import Views from "./Views.svelte";
+    import Views from "./WeeklyViews.svelte";
-    export let params;
 </script>

ui/src/routes/MonthlyViews.svelte

@@ -0,0 +1,31 @@
+<script>
+    import Views from "./Views.svelte";
+    export let params;
+    params = {
+        title: 'Monatsansicht',
+        records: [],
+        isLoading: true
+    }
+    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);
+                });
+        }
+    };
+    View.browse();
+</script>
+
+<Views {params} />

ui/src/routes/Views.svelte

@@ -1,5 +1,6 @@
 <script>
     export let params;
+    console.log(params)
 </script>
 
 <svelte:head>
@@ -11,6 +12,9 @@
         <h1>{params.title}</h1>
     </header>
     <article>
+        {#if params.isLoading === true}
+            <p>Loading...</p>
+        {:else}
             <table>
                 <thead>
                 <tr>
@@ -31,5 +35,6 @@
                 {/each}
                 </tbody>
             </table>
+        {/if}
     </article>
 </section>

ui/src/routes/WeeklyViews.svelte

@@ -0,0 +1,31 @@
+<script>
+    import Views from "./Views.svelte";
+    export let params;
+    params = {
+        title: 'Wochenansicht',
+        records: [],
+        isLoading: true
+    }
+    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);
+                });
+        }
+    };
+    View.browse();
+</script>
+
+<Views {params} />

ui/src/routes/YearlyViews.svelte

@@ -0,0 +1,31 @@
+<script>
+    import Views from "./Views.svelte";
+    export let params;
+    params = {
+        title: 'Jahresansicht',
+        records: [],
+        isLoading: true
+    }
+    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);
+                });
+        }
+    };
+    View.browse();
+</script>
+
+<Views {params} />