.gitignore

@@ -109,3 +109,6 @@ Temporary Items
 /api/tests/_*
 /api/tests/*.suite.yml
 /api/.env
+/ui/static/print.css*
+/ui/static/global.css*
+/ui/static/bundle.css*

ui/less/lesslib/layout.less

@@ -5,50 +5,66 @@
 html {
     body {
         background: @mainColorLight;
+        div {
             > header, > footer {
                 color: @mainColorDark;
                 background: @mainColor;
                 font-family: serif;
+
                 h1 {
                     font-size: 3rem;
                     text-align: center;
                 }
+
                 p {
                     text-indent: inherit;
+
                     &:first-letter {
                         font-size: inherit;
                     }
+
                     font-style: italic;
                 }
             }
+
             > header h1 {
                 margin: 1rem auto;
             }
+
             > footer {
                 color: contrast(@mainColorDark);
             }
+
             & > nav {
                 ul {
-                background: darken(@mainColorLight,33%,relativ);
+                    background: darken(@mainColorLight, 33%, relativ);
+
                     li {
                         font-weight: bold;
+
                         &:not(:first-child) {
                             border-left: @mainColorDark solid thin;
                         }
+
                         a {
                             text-decoration: none;
                             color: @mainColorDark;
                         }
+
                         &:hover {
-                        background: lighten(@mainColor,20%,relativ);
+                            background: lighten(@mainColor, 20%, relativ);
+
                             a {
-                            color: lighten(@mainColor,66%,relativ);
+                                color: lighten(@mainColor, 66%, relativ);
                             }
                         }
+
                         &.selected, &.selected:hover {
-                        background: lighten(@mainColor,10%,relativ);
+                            background: lighten(@mainColor, 10%, relativ);
+
                             a {
-                            color: lighten(@mainColor,66%,relativ);
+                                color: lighten(@mainColor, 66%, relativ);
+                            }
                         }
                     }
                 }
@@ -63,15 +79,19 @@ main {
         border-color: @mainColorDark;
         border-width: medium;
     }
+
     section {
         @sectionMargin: 1rem;
+
         h1, h2 {
             margin: @sectionMargin;
         }
+
         p, ul, ol, dl {
             margin: @sectionMargin;
             text-indent: @sectionMargin * 2;
         }
+
         table {
             thead {
                 tr:last-child {
@@ -79,7 +99,9 @@ main {
                         border-bottom: @mainColor solid thin;
                     }
                 }
-            };
+            }
+        ;
+
             tbody {
                 td.absence-time {
                     color: @redColor;
@@ -87,15 +109,23 @@ main {
                     text-decoration-style: dashed;
                 }
             }
+            tfoot {
+                * {
+                    border: initial;
                 }
+            }
+        }
+
         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;
@@ -103,37 +133,45 @@ main {
                     display: inline-block;
                     font-weight: bolder;
                     margin-right: 1rem;
+
                     &:first-child {
                         margin-left: 1.5rem;
                     }
+
                     &:hover {
-                        background-color: darken(@mainColorLight,10%,relativ);
+                        background-color: darken(@mainColorLight, 10%, relativ);
                     }
+
                     &.active {
-                        background-color: darken(@mainColorLight,20%,relativ);
+                        background-color: darken(@mainColorLight, 20%, relativ);
                     }
                 }
             }
+
             fieldset {
                 width: @formItemWidth + @formLabelWidth + 2rem;
                 margin: 1rem auto;
-                border-style: solid ;
+                border-style: solid;
                 border-color: @mainColor;
                 padding: @sectionMargin;
+
                 &.tasten {
                     border: none;
                     background-color: @mainColorLight;
                 }
+
                 legend {
                     margin: @sectionMargin;
                     margin-left: @sectionMargin * 2;
                 }
+
                 div {
                     & > label {
                         width: @formLabelWidth;
                         display: inline-block;
                         margin: 0.5rem;
                     }
+
                     input {
                         display: inline-block;
                         width: @formItemWidth;
@@ -145,31 +183,39 @@ main {
                 }
             }
         }
+
         button {
-            .button(@mainColor, spin(lighten(@mainColor,66%,relativ),@subColor));
+            .button(@mainColor, spin(lighten(@mainColor, 66%, relativ), @subColor));
+
             &.sub-button {
-                .button(lighten(@mainColor,20%,relativ), spin(@mainColor,@subColor));
+                .button(lighten(@mainColor, 20%, relativ), spin(@mainColor, @subColor));
             }
         }
+
         footer {
             text-align: right;
             padding: 0;
+
             p {
                 padding: 0.5rem;
                 display: inline-block;
                 margin: inherit;
                 text-indent: inherit;
+
                 &:first-letter {
                     font-size: inherit;
                 }
-                background: @mainColorLight ;
+
-                color: @mainColor ;
+                background: @mainColorLight;
+                color: @mainColor;
                 font-style: italic;
                 font-size: 85%;
             }
+
             nav li {
                 padding: 0.5rem;
             }
+
             border-bottom-style: solid;
         }
     }

ui/less/lesslib/media_queries.less

@@ -5,7 +5,7 @@
         font-size: 10pt;
     }
     header, footer, main, nav, aside {
-        body > & {
+        body div > & {
             width: 19cm;
             margin: auto;
             .border-box();
@@ -15,7 +15,7 @@
         padding: 0.5rem;
         ;
     }
-    body {
+    body div {
         & > header {
             font-size: 200%;
             font-weight: bolder;
@@ -71,7 +71,7 @@
 
 @media screen and (min-width: 831px) {
     header, footer, main, nav, aside {
-        body > & {
+        body div > & {
             width: @breiteMainBereich;
             margin: auto;
             .border-box();
@@ -80,7 +80,7 @@
     header, footer{
         padding: 0.5rem;
     }
-    body {
+    body div {
         & > header {
             font-size: 200%;
             font-weight: bolder;
@@ -139,7 +139,7 @@
 }
 
 @media screen and (max-width: 830px) {
-    html body {
+    html body div {
         @boxHeight: 5rem;
         & > header {
             height: @boxHeight;
@@ -267,7 +267,7 @@
     }
 }
 @media screen and (max-width: 720px) {
-    html body {
+    html body div {
         @boxHeight: 2.5rem;
         & > header {
             height: @boxHeight;

ui/less/lesslib/print/basics.less

@@ -2,7 +2,7 @@ html {
     font-size: 100%;
 }
 
-body {
+body div {
     color: #000;
     font-size: 1em;
     font-family: OpenSans, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;

ui/less/lesslib/print/layout.less

@@ -1,5 +1,5 @@
 html {
-    body {
+    body div {
         > header, > footer {
             background: none;
             font-family: serif;
@@ -59,7 +59,7 @@ main {
                     }
                 }
             }
-            tbody {
+            tbody div {
                 th {
                     font-weight: bold;
                     text-align: center;

ui/package.json

@@ -1,12 +1,14 @@
 {
     "private": true,
     "name": "svelte-demo",
+    "type": "module",
     "scripts": {
-    "build": "rollup -c",
+        "dev": "vite dev",
-    "autobuild": "rollup -c -w",
+        "build": "vite build",
-    "dev": "run-p start:dev autobuild",
+        "preview": "vite preview",
-    "start": "sirv public --single",
+        "prepare": "svelte-kit sync || echo ''",
-    "start:dev": "sirv public --dev --single"
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
     },
     "dependencies": {
         "ganalytics": "^3.1.2",
@@ -14,18 +16,21 @@
         "open-iconic": "^1.1.1"
     },
     "devDependencies": {
-    "@iconify-icons/oi": "^1.1.0",
+        "@sveltejs/adapter-auto": "^6.0.0",
-    "@iconify/svelte": "^1.0.4",
+        "@sveltejs/kit": "^2.16.0",
-    "@rollup/plugin-commonjs": "^15.0.0",
+        "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
+        "svelte": "^5.0.0",
-    "@rollup/plugin-replace": "^2.3.0",
+        "svelte-check": "^4.0.0",
+        "typescript": "^5.0.0",
+        "vite": "^6.2.6",
         "dotenv": "^8.2.0",
-    "npm-run-all": "^4.1.3",
+        "wx-svelte-grid": "^2.1.5",
-    "rollup": "^2.30.0",
+        "@iconify-icons/oi": "^1.1.0",
-    "rollup-plugin-svelte": "^6.0.0",
+        "@iconify/svelte": "^5.0.0"
-    "rollup-plugin-terser": "^7.0.0",
+    },
-    "sirv-cli": "^1.0.8",
+    "exports": {
-    "svelte": "^3.4.4",
+        ".": {
-    "svelte-paginate": "^0.1.0"
+            "svelte": "./puplic/index.js"
+        }
     }
 }

ui/public/index.html

@@ -1,22 +0,0 @@
-<!doctype html>
-<!--suppress HtmlUnknownTarget -->
-<!--suppress JSUnresolvedLibraryURL -->
-<html lang="de">
-<head>
-	<base href="/" />
-	<meta charset="utf8">
-	<meta name="viewport" content="width=device-width">
-
-	<title>Svelte app</title>
-
-    <link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel="stylesheet" href="/global.css" media="screen">
-	<link rel="stylesheet" href="/print.css" media="print">
-	<link rel="stylesheet" href="/bundle.css">
-    <script type="module" src="https://unpkg.com/dimport?module" data-main="/index.js"></script>
-    <script nomodule src="https://unpkg.com/dimport/nomodule" data-main="/index.js"></script>
-</head>
-
-<body>
-</body>
-</html>

ui/rollup.config.js

@@ -1,51 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-import replace from '@rollup/plugin-replace';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import { terser } from 'rollup-plugin-terser';
-import {config} from 'dotenv';
-
-const production = !process.env.ROLLUP_WATCH;
-
-export default {
-	input: 'src/index.js',
-	output: {
-		name: 'app',
-		format: 'esm',
-		sourcemap: true,
-		dir: 'public',
-	},
-	preserveEntrySignatures: false,
-	plugins: [
-		svelte({
-			// enable run-time checks when not in production
-			dev: !production,
-			// we'll extract any component CSS out into
-			// a separate file — better for performance
-			css: css => {
-				css.write('bundle.css');
-			}
-		}),
-
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration —
-		// consult the documentation for details:
-		// https://github.com/rollup/rollup-plugin-commonjs
-		resolve(),
-		commonjs(),
-
-		replace({
-			'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development'),
-            'env': JSON.stringify({...config().parsed /* attached the .env config*/})
-		}),
-
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-
-	watch: {
-		clearScreen: false
-	}
-};

ui/src/app.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="de">
+    <head>
+        <base href="/"/>
+        <meta charset="utf8">
+        <meta name="viewport" content="width=device-width">
+
+        <title>Svelte app</title>
+
+        <link rel='icon' type='image/png' href='%sveltekit.assets%/favicon.png'>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <meta name="color-scheme" content="dark light"/>
+        %sveltekit.head%
+        <link rel="stylesheet" href="%sveltekit.assets%/global.css" media="screen">
+        <link rel="stylesheet" href="%sveltekit.assets%/print.css" media="print">
+    </head>
+
+    <body>
+        <div style="display: contents">
+            %sveltekit.body%
+        </div>
+    </body>
+</html>

ui/src/components/App.svelte

@@ -1,57 +0,0 @@
-<header>
-    Arbeitszeiten
-</header>
-<Nav {active} />
-<main>
-    <svelte:component this={Route} {params} />
-</main>
-<footer><p>© Torsten Lücke 2021</p></footer>
-
-<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);
-
-	const router = Navaid('/')
-		.on('/', () => run(import('../routes/Home.svelte')))
-		.on('/views/weekly', () => run(import('../routes/WeeklyViews.svelte')))
-		.on('/views/monthly', () => run(import('../routes/MonthlyViews.svelte')))
-		.on('/views/yearly', () => run(import('../routes/YearlyViews.svelte')))
-		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte')))
-		.listen();
-
-	onDestroy(router.unlisten);
-</script>

ui/src/components/Nav.svelte

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

ui/src/components/Repositories.svelte

@@ -1,110 +0,0 @@
-<script context="module">
-    const MyFetch = {
-        'post': async (rest_url, request_body) => {
-            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(request_body), {})
-        },
-        'put': async (rest_url, http_body) => {
-            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(http_body, true), {})
-        },
-        '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 MyFetch._pureFetch(rest_url, request_options).catch(err => {
-                console.error(err)
-                return null
-            })
-            if (!response.ok) {
-                throw new Error('Fail!')
-            }
-            return response.json()
-        },
-        '_buildRequestOptions': (request_body, needPut) => {
-            return {
-                method: (needPut === true) ? 'PUT' : 'POST',
-                mode: 'cors',
-                cache: 'no-cache',
-                credentials: 'omit',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: request_body,
-            }
-        },
-        '_pureFetch': async (rest_url, request_options) => {
-            // noinspection JSUnresolvedVariable
-            return await fetch(env.API_URL + rest_url, request_options)
-        }
-    }
-
-    export const WorkingHoursRepository = {
-        'browse': (startDate = '', endDate = '') => {
-            let filter = {}
-            if (startDate !== '') {
-                filter['start-date'] = startDate
-            }
-            if (endDate !== '') {
-                filter['end-date'] = endDate
-            }
-            return MyFetch.get('/working-hours', filter)
-        },
-
-        'read': date => {
-            return MyFetch.get('/working-hours/' + date)
-        },
-
-        'readOrNew': async date => {
-            let response = await MyFetch._pureFetch('/working-hours/' + date)
-            if (response.status === 404) {
-                return {workingTime: '00:00:00', workingDay: date}
-            } else if (!response.ok) {
-                throw new Error('Fail!')
-            }
-            return response.json()
-        },
-
-        '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))
-        },
-
-        'addOrUpdate': async (date, record) => {
-            console.debug(record);
-            let request_options = MyFetch._buildRequestOptions(JSON.stringify(record))
-            let response = await MyFetch._pureFetch('/working-hours', request_options)
-            if (response.status === 409) {
-                return WorkingHoursRepository.update(date, record)
-            } else if (!response.ok) {
-                throw new Error('Fail!')
-            }
-            return response.json()
-        }
-    }
-
-    export const 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>

ui/src/index.js

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

ui/src/lib/Models.svelte.js

@@ -0,0 +1,17 @@
+export class PeriodRecord {
+    /**
+     * @param {{ workingDays: Number; totalHours: any; overtime: string; period: string; }} record
+     */
+    constructor(record) {
+        this.workingDays = Number(record.workingDays)
+        this.totalHours = String(record.totalHours)
+        this.period = String(record.period)
+        this.overtime = String('##:##:##')
+        this.isMinus = false
+        const interval = record.overtime.match(/^(-?)(\d\d:\d\d:\d\d)$/)
+        if (interval) {
+            this.overtime = String(interval[2])
+            this.isMinus = String(interval[1]) === '-'
+        }
+    }
+}

ui/src/lib/Repositories.svelte

@@ -0,0 +1,165 @@
+<script module>
+
+    const MyFetch = {
+        /**
+         * @param {String} rest_url
+         * @param {String} request_body
+         */
+        'post': async (rest_url, request_body) => {
+            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(request_body, false))
+        },
+        /**
+         * @param {String} rest_url
+         * @param {String} http_body
+         */
+        'put': async (rest_url, http_body) => {
+            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(http_body, true))
+        },
+        /**
+         * @param {String} rest_url
+         * @param {Object|null} query_parameters
+         */
+        'get': async (rest_url, query_parameters = null) => {
+            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, {})
+        },
+        /**
+         * @param {String} rest_url
+         * @param {Object} request_options
+         */
+        '_fetch': async (rest_url, request_options) => {
+            // noinspection JSUnresolvedVariable
+            let response = await MyFetch._pureFetch(rest_url, request_options).catch(err => {
+                console.error(err)
+                return null
+            })
+            if (response === null || !response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        },
+        /**
+         *  @param {String} request_body
+         * @param {Boolean} needPut
+         */
+        '_buildRequestOptions': (request_body, needPut) => {
+            return {
+                method: (needPut === true) ? 'PUT' : 'POST',
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'omit',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: request_body,
+            }
+        },
+        /**
+         * @param {String} rest_url
+         * @param {Object} request_options
+         */
+        '_pureFetch': async (rest_url, request_options = {}) => {
+            // noinspection JSUnresolvedVariable
+            return await fetch(rest_url, request_options)
+        }
+    }
+
+    export const WorkingHoursRepository = {
+        /**
+         * @param {String} api_url
+         * @param {String} startDate
+         * @param {String} endDate
+         */
+        'browse': (api_url, startDate = '', endDate = '') => {
+            let filter = {}
+            if (startDate !== '') {
+                filter['start-date'] = startDate
+            }
+            if (endDate !== '') {
+                filter['end-date'] = endDate
+            }
+            return MyFetch.get(api_url + '/working-hours', filter)
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         */
+        'read': (api_url, date) => {
+            return MyFetch.get(api_url + '/working-hours/' + date)
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         */
+        'readOrNew': async (api_url, date) => {
+            let response = await MyFetch._pureFetch(api_url + '/working-hours/' + date)
+            if (response.status === 404) {
+                return {workingTime: '00:00:00', workingDay: date}
+            } else if (!response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        },
+        /**
+         * @param {String} api_url
+         * @param {Object} record
+         */
+        'add': async (api_url, record) => {
+            return MyFetch.post(api_url + '/working-hours', JSON.stringify(record))
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         * @param {Object} record
+         */
+        'update': async (api_url, date, record) => {
+            console.debug(record);
+            return MyFetch.put(api_url + '/working-hours/' + date, JSON.stringify(record))
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         * @param {Object} record
+         */
+        'addOrUpdate': async (api_url, date, record) => {
+            console.debug(record);
+            let request_options = MyFetch._buildRequestOptions(JSON.stringify(record), false)
+            let response = await MyFetch._pureFetch(api_url + '/working-hours', request_options)
+            if (response.status === 409) {
+                return WorkingHoursRepository.update(api_url, date, record)
+            } else if (!response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        }
+    }
+
+    export const WorkingHoursViewsRepository = {
+        /**
+         * @param {String} api_url
+         */
+        'weekly': async api_url => {
+            return MyFetch.get(api_url + '/views/working-hours/weekly', {})
+        },
+        /**
+         * @param {String} api_url
+         */
+        'monthly': async api_url => {
+            return MyFetch.get(api_url + '/views/working-hours/monthly', {})
+        },
+        /**
+         * @param {String} api_url
+         */
+        'yearly': async api_url => {
+            return MyFetch.get(api_url + '/views/working-hours/yearly', {})
+        },
+    }
+</script>

ui/src/lib/Views.svelte

@@ -0,0 +1,63 @@
+<script>
+    import {PeriodRecord} from './Models.svelte.js'
+
+    /**
+     * @type {{ promise: Promise<object>; title: string;}}
+     */
+    let {params} = $props();
+    /** @type PeriodRecord[] **/
+    let records = $state([])
+    let isLoading = $state(true)
+    const init = async () => await params.promise.then(
+        /**
+         * @param {Array<object>} data
+         */
+        data => {
+            records = data.map(row => new PeriodRecord(row))
+            isLoading = false
+        }
+    )
+    init()
+</script>
+
+<svelte:head>
+    <title>{params.title}</title>
+</svelte:head>
+
+<section id="list-records">
+    <header>
+        <h1>{params.title}</h1>
+    </header>
+    <article>
+        {#if isLoading === true}
+            <p>Loading...</p>
+        {:else}
+            <table>
+                <colgroup>
+                    <col/>
+                    <col/>
+                    <col/>
+                    <col/>
+                </colgroup>
+                <thead>
+                <tr>
+                    <th>Zeitraum</th>
+                    <th>Arbeitstage</th>
+                    <th>Arbeitsstunden</th>
+                    <th>Über- / Unterstunden</th>
+                </tr>
+                </thead>
+                <tbody>
+                {#each records as record}
+                    <tr>
+                        <td>{record.period}</td>
+                        <td>{record.workingDays}</td>
+                        <td>{record.totalHours}</td>
+                        <td class="{record.isMinus ? 'absence-time' : ''}">{record.overtime}</td>
+                    </tr>
+                {/each}
+                </tbody>
+            </table>
+        {/if}
+    </article>
+</section>

ui/src/routes/+layout.svelte

@@ -0,0 +1,19 @@
+<script>
+    let { children } = $props();
+</script>
+
+<nav>
+    <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/views/weekly">Wochenansicht</a></li>
+        <li><a href="/views/monthly">Monatsansicht</a></li>
+        <li><a href="/views/yearly">Jahresansicht</a></li>
+<!--        <li><a href="/working-hours">Einträge</a></li>-->
+    </ul>
+</nav>
+
+<main>
+{@render children()}
+</main>
+
+<footer><p>© Torsten Lücke 2021</p></footer>

ui/src/routes/+page.server.js

@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "../lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Wochenansicht',
+        promise: WorkingHoursViewsRepository.weekly(env.API_URL)
+    };
+}

ui/src/routes/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+

ui/src/routes/Home.svelte

@@ -1,6 +0,0 @@
-<WeeklyViews />
-
-<script>
-    import WeeklyViews from "./WeeklyViews.svelte";
-    export const params = {};
-</script>

ui/src/routes/MonthlyViews.svelte

@@ -1,11 +0,0 @@
-<script>
-    import Views from "./Views.svelte";
-    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params
-    params = {
-        title: 'Monatsansicht',
-        promise: WorkingHoursViewsRepository.monthly()
-    }
-</script>
-
-<Views {params} />

ui/src/routes/Views.svelte

@@ -1,81 +0,0 @@
-<script>
-    import { paginate, PaginationNav } from 'svelte-paginate'
-
-    export let params = {}
-    let records = []
-    let isLoading = true
-    console.log(params)
-    let currentPage = 1
-    let pageSize = 15
-    $: paginatedItems = paginate({ items: records, pageSize, currentPage })
-    if (!String.prototype.startsWith) {
-        String.prototype.startsWith = function (searchString, position) {
-            position = position || 0
-            return this.indexOf(searchString, position) === position
-        }
-    }
-    $: 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>
-    <title>{params.title}</title>
-</svelte:head>
-
-<section id="list-records">
-    <header>
-        <h1>{params.title}</h1>
-    </header>
-    <article>
-        {#if isLoading === true}
-            <p>Loading...</p>
-        {:else}
-            <table>
-                <colgroup>
-                    <col/>
-                    <col/>
-                    <col/>
-                    <col/>
-                </colgroup>
-                <thead>
-                <tr>
-                    <th>Zeitraum</th>
-                    <th>Arbeitstage</th>
-                    <th>Arbeitsstunden</th>
-                    <th>Über- / Unterstunden</th>
-                </tr>
-                </thead>
-                <tbody>
-                {#each paginatedItems as record}
-                    <tr>
-                        <td>{record.period}</td>
-                        <td>{record.workingDays}</td>
-                        <td>{record.totalHours}</td>
-                        <td class="{ isNegative(record.overtime) }">{cutMinusChar(record.overtime)}</td>
-                    </tr>
-                {/each}
-                </tbody>
-                <tfoot>
-                <tr>
-                    <td colspan="4">
-                        <PaginationNav
-                            totalItems="{records.length}"
-                            pageSize="{pageSize}"
-                            currentPage="{currentPage}"
-                            limit="{1}"
-                            showStepOptions="{true}"
-                            on:setPage="{(e) => currentPage = e.detail.page}"
-                        />
-                    </td>
-                </tr>
-                </tfoot>
-            </table>
-        {/if}
-    </article>
-</section>

ui/src/routes/WeeklyViews.svelte

@@ -1,11 +0,0 @@
-<script>
-    import Views from "./Views.svelte";
-    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params
-    params = {
-        title: 'Wochenansicht',
-        promise: WorkingHoursViewsRepository.weekly()
-    }
-</script>
-
-<Views {params} />

ui/src/routes/WorkingHours.svelte

@@ -1,33 +0,0 @@
-<script>
-    import List from "./WorkingHours/List.svelte";
-    import Formular from "./WorkingHours/Formular.svelte";
-    export const params = {};
-
-    let TITLE = "Bearbeitung Einträge"
-    let activeRecord = null;
-    let currentPage = 1
-</script>
-
-<svelte:head>
-    <title>{TITLE}</title>
-</svelte:head>
-
-{#if activeRecord === null}
-    <section id="list-records">
-        <header>
-            <h1>{TITLE}</h1>
-        </header>
-        <article>
-            <List bind:activeRecord={activeRecord} bind:currentPage/>
-        </article>
-    </section>
-{:else}
-    <section id="edit-record">
-        <header>
-            <h1>{TITLE}</h1>
-        </header>
-        <article>
-            <Formular bind:activeRecord={activeRecord}/>
-        </article>
-    </section>
-{/if}

ui/src/routes/YearlyViews.svelte

@@ -1,11 +0,0 @@
-<script>
-    import Views from "./Views.svelte";
-    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params
-    params = {
-        title: 'Jahresansicht',
-        promise: WorkingHoursViewsRepository.yearly()
-    }
-</script>
-
-<Views {params} />

ui/src/routes/views/monthly/+page.server.js

@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Monatsansicht',
+        promise: WorkingHoursViewsRepository.monthly(env.API_URL)
+    };
+}

ui/src/routes/views/monthly/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+

ui/src/routes/views/weekly/+page.server.js

@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Wochenansicht',
+        promise: WorkingHoursViewsRepository.weekly(env.API_URL)
+    };
+}

ui/src/routes/views/weekly/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+

ui/src/routes/views/yearly/+page.server.js

@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Jahresansicht',
+        promise: WorkingHoursViewsRepository.yearly(env.API_URL)
+    };
+}

ui/src/routes/views/yearly/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+

ui/svelte.config.js

@@ -0,0 +1,6 @@
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+    kit: {}
+};
+
+export default config;

ui/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

ui/vite.config.js

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    plugins: [sveltekit()]
+});