ui/src/components/App.svelte

@@ -0,0 +1,66 @@
+<Nav {active} />
+
+<main>
+	<svelte:component this={Route} {params} />
+</main>
+
+<script>
+	import Navaid from 'navaid';
+	import { onDestroy } from 'svelte';
+	import Nav from './Nav.svelte';
+
+	let Route, params={}, active;
+	let uri = location.pathname;
+	$: active = uri.split('/').pop() || 'home';
+
+	function run(thunk, obj) {
+		const target = uri;
+
+		thunk.then(m => {
+			if (target !== uri) return;
+
+			params = obj || {};
+
+			if (m.preload) {
+				m.preload({ params }).then(() => {
+					if (target !== uri) return;
+					Route = m.default;
+					window.scrollTo(0, 0);
+				});
+			} else {
+				Route = m.default;
+				window.scrollTo(0, 0);
+			}
+		});
+	}
+
+	function track(obj) {
+		uri = obj.state || obj.uri || location.pathname;
+	}
+
+	addEventListener('replacestate', track);
+	addEventListener('pushstate', track);
+	addEventListener('popstate', track);
+
+
+    let r = {
+        "Zeitraum": "2020#01",
+        "Arbeitstage": 20,
+        "Arbeitsstunden": "99:00:00",
+        "Unterstunden": "10:22:00"
+    };
+    let weekly = {
+        "title" : "Wochenansicht",
+        "records" : [r, r]
+    };
+
+	const router = Navaid('/')
+		.on('/', () => run(import('../routes/Home.svelte')))
+		.on('/views/weekly', () => run(import('../routes/Views.svelte'), weekly))
+		.on('/views/monthly', () => run(import('../routes/Views.svelte'), weekly))
+		.on('/views/yearly', () => run(import('../routes/Views.svelte'), weekly))
+		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte'), weekly))
+		.listen();
+
+	onDestroy(router.unlisten);
+</script>

ui/src/components/Nav.svelte

@@ -0,0 +1,15 @@
+<!--suppress HtmlUnknownTarget -->
+<nav>
+	<ul>
+		<li><a class="{ isActive('home') }" href="/">home</a></li>
+		<li><a class="{ isActive('weekly') }" href="/views/weekly">Wochenansicht</a></li>
+		<li><a class="{ isActive('monthly') }" href="/views/monthly">Monatsansicht</a></li>
+		<li><a class="{ isActive('yearly') }" href="/views/yearly">Jahresansicht</a></li>
+		<li><a class="{ isActive('working-hours') }" href="/working-hours">Einträge</a></li>
+	</ul>
+</nav>
+
+<script>
+	export let active;
+	$: isActive = str => active === str ? 'selected' : '';
+</script>

ui/src/index.js

@@ -0,0 +1,5 @@
+import App from './components/App.svelte';
+
+new App({
+	target: document.body
+});

ui/src/routes/Home.svelte

@@ -0,0 +1,15 @@
+<Views {params} />
+
+<script>
+    import Views from "./Views.svelte";
+    let r = {
+        "Zeitraum": "2020#01",
+        "Arbeitstage": 20,
+        "Arbeitsstunden": "99:00:00",
+        "Unterstunden": "10:22:00"
+    };
+    let params = {
+        "title" : "Wochenansicht",
+        "records" : [r, r]
+    };
+</script>

ui/src/routes/Views.svelte

@@ -0,0 +1,30 @@
+<script>
+    export let params;
+</script>
+
+<svelte:head>
+	<title>{params.title}</title>
+</svelte:head>
+
+<h1>{params.title}</h1>
+
+<table>
+    <thead>
+        <tr>
+            <th>Zeitraum</th>
+            <th>Arbeitstage</th>
+            <th>Arbeitsstunden</th>
+            <th>Über- / Unterstunden</th>
+        </tr>
+    </thead>
+    <tbody>
+        {#each params.records as record}
+        <tr>
+            <td>{record.Zeitraum}</td>
+            <td>{record.Arbeitstage}</td>
+            <td>{record.Arbeitsstunden}</td>
+            <td>{record.Unterstunden}</td>
+        </tr>
+        {/each}
+    </tbody>
+</table>

ui/src/routes/WorkingHours.svelte

@@ -0,0 +1,31 @@
+<script>
+    export let params;
+    let title = "Bearbeitung Einträge"
+</script>
+
+<svelte:head>
+    <title>{title}</title>
+</svelte:head>
+
+<h1>{title}</h1>
+
+<table>
+    <thead>
+    <tr>
+        <th>Zeitraum</th>
+        <th>Arbeitstage</th>
+        <th>Arbeitsstunden</th>
+        <th>Über- / Unterstunden</th>
+    </tr>
+    </thead>
+    <tbody>
+    {#each params.records as record}
+        <tr>
+            <td>{record.Zeitraum}</td>
+            <td>{record.Arbeitstage}</td>
+            <td>{record.Arbeitsstunden}</td>
+            <td>{record.Unterstunden}</td>
+        </tr>
+    {/each}
+    </tbody>
+</table>