Änderungen und Eintragungen wurden eingebaut

Ignoriere die Pagination der Tabellen und das Bearbeiten der Einträge.

.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*

api/html/index.php

@@ -17,7 +17,7 @@ use TorstenHettstedt\TimekeepingApi\Middleware\OriginAccessControlHandler;
 $container = new Container();
 
 $container->set('databases', function () {
-    $dsn = "pgsql:host=${_ENV['DATABASES_HOST']};port=5432;dbname=${_ENV['DATABASES_NAME']}";
+    $dsn = "pgsql:host={$_ENV['DATABASES_HOST']};port=5432;dbname={$_ENV['DATABASES_NAME']}";
     return new PDO($dsn, $_ENV['DATABASES_USER'], $_ENV['DATABASES_PASS']);
 });
 

api/tests/unit/Controller/WorkingHoursControllerTest.php

@@ -19,11 +19,11 @@ use TorstenHettstedt\TimekeepingApi\Controller\WorkingHoursController;
 class WorkingHoursControllerTest extends AbstractControllerTest
 {
 
-    protected const FICTIONAL_STATUS_CODE = 666;
+    protected const int    FICTIONAL_STATUS_CODE = 666;
-    public const    EXISTING_DATE         = '2020-01-28';
+    public const    string EXISTING_DATE         = '2020-01-28';
-    public const    EXISTING_INTERVAL     = '07:20:00';
+    public const    string EXISTING_INTERVAL     = '07:20:00';
-    public const    NEW_DATE              = '2020-04-01';
+    public const    string NEW_DATE              = '2020-04-01';
-    public const    NEW_INTERVAL          = '07:59:00';
+    public const    string NEW_INTERVAL          = '07:59:00';
 
     protected ContainerInterface  $container;
     protected Request             $request;

api/tests/unit/Repositories/WorkingHoursRepositoryTest.php

@@ -18,11 +18,11 @@ use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursRepository;
 
 class WorkingHoursRepositoryTest extends Unit
 {
-    public const EXISTING_DATE     = '2020-01-28';
+    public const string EXISTING_DATE     = '2020-01-28';
-    public const EXISTING_INTERVAL = 'PT7H20M';
+    public const string EXISTING_INTERVAL = 'PT7H20M';
-    public const NEW_DATE          = '2020-04-01';
+    public const string NEW_DATE          = '2020-04-01';
-    public const NEW_INTERVAL      = 'PT7H59M';
+    public const string NEW_INTERVAL      = 'PT7H59M';
-    public const RECORDS_COUNT     = 61;
+    public const int    RECORDS_COUNT     = 61;
 
     protected PDO $pdoObject;
 

api/tests/unit/Repositories/WorkingHoursViewRepositoryTest.php

@@ -6,7 +6,6 @@ use Codeception\Attribute\DataProvider;
 use Codeception\Test\Unit;
 use DateTime;
 use DateTimeZone;
-use Exception;
 use PDO;use TorstenHettstedt\TimekeepingApi\Models\WorkingHoursView;
 use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryRecordNotFoundException;
 use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursWeeklyViewRepository;
@@ -38,14 +37,13 @@ class WorkingHoursViewRepositoryTest extends Unit
 
     /**
      * @return array<array{string, string, int, DateTime}>
-     * @throws Exception
      */
     public function existingObjectProvider(): array
     {
         return [
-            [WorkingHoursYearlyViewRepository::class,  '2020',          61, new DateTime('2020-01-01', new DateTimeZone('UCT'))],
+            [WorkingHoursYearlyViewRepository::class,  '2020',          61, date_create('2020-01-01', new DateTimeZone('UCT'))],
-            [WorkingHoursMonthlyViewRepository::class, '2020 February', 20, new DateTime('2020-02-01', new DateTimeZone('UCT'))],
+            [WorkingHoursMonthlyViewRepository::class, '2020 February', 20, date_create('2020-02-01', new DateTimeZone('UCT'))],
-            [WorkingHoursWeeklyViewRepository::class,  '2020#03',        5, new DateTime('2020-01-13', new DateTimeZone('UCT'))],
+            [WorkingHoursWeeklyViewRepository::class,  '2020#03',        5, date_create('2020-01-13', new DateTimeZone('UCT'))],
         ];
     }
 

ui/less/lesslib/layout.less

@@ -5,50 +5,66 @@
 html {
     body {
         background: @mainColorLight;
-        > header, > footer {
+        div {
-            color: @mainColorDark;
+            > header, > footer {
-            background: @mainColor;
+                color: @mainColorDark;
-            font-family: serif;
+                background: @mainColor;
-            h1 {
+                font-family: serif;
-                font-size: 3rem;
+
-                text-align: center;
+                h1 {
-            }
+                    font-size: 3rem;
-            p {
+                    text-align: center;
-                text-indent: inherit;
+                }
-                &:first-letter {
+
-                    font-size: inherit;
+                p {
+                    text-indent: inherit;
+
+                    &:first-letter {
+                        font-size: inherit;
+                    }
+
+                    font-style: italic;
                 }
-                font-style: italic;
             }
-        }
+
-        > header h1 {
+            > header h1 {
-            margin: 1rem auto;
+                margin: 1rem auto;
-        }
+            }
-        > footer {
+
-            color: contrast(@mainColorDark);
+            > footer {
-        }
+                color: contrast(@mainColorDark);
-        & > nav {
+            }
-            ul {
+
-                background: darken(@mainColorLight,33%,relativ);
+            & > nav {
-                li {
+                ul {
-                    font-weight: bold;
+                    background: darken(@mainColorLight, 33%, relativ);
-                    &:not(:first-child) {
+
-                        border-left: @mainColorDark solid thin;
+                    li {
-                    }
+                        font-weight: bold;
-                    a {
+
-                        text-decoration: none;
+                        &:not(:first-child) {
-                        color: @mainColorDark;
+                            border-left: @mainColorDark solid thin;
-                    }
-                    &:hover {
-                        background: lighten(@mainColor,20%,relativ);
-                        a {
-                            color: lighten(@mainColor,66%,relativ);
                         }
-                    }
+
-                    &.selected, &.selected:hover {
-                        background: lighten(@mainColor,10%,relativ);
                         a {
-                            color: lighten(@mainColor,66%,relativ);
+                            text-decoration: none;
+                            color: @mainColorDark;
+                        }
+
+                        &:hover {
+                            background: lighten(@mainColor, 20%, relativ);
+
+                            a {
+                                color: lighten(@mainColor, 66%, relativ);
+                            }
+                        }
+
+                        &.selected, &.selected:hover {
+                            background: lighten(@mainColor, 10%, relativ);
+
+                            a {
+                                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,73 +133,89 @@ 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 {
+                    & > label {
                         width: @formLabelWidth;
                         display: inline-block;
                         margin: 0.5rem;
                     }
+
                     input {
                         display: inline-block;
                         width: @formItemWidth;
                         padding: 0.25rem;
                         margin-bottom: 1.0rem;
-                        border-style:  solid;
+                        border-style: solid;
                         border-width: thin;
                     }
                 }
             }
         }
+
         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,31 +1,36 @@
 {
-  "private": true,
+    "private": true,
-  "name": "svelte-demo",
+    "name": "svelte-demo",
-  "scripts": {
+    "type": "module",
-    "build": "rollup -c",
+    "scripts": {
-    "autobuild": "rollup -c -w",
+        "dev": "vite dev",
-    "dev": "run-p start:dev autobuild",
+        "build": "vite build",
-    "start": "sirv public --single",
+        "preview": "vite preview",
-    "start:dev": "sirv public --dev --single"
+        "prepare": "svelte-kit sync || echo ''",
-  },
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-  "dependencies": {
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-    "ganalytics": "^3.1.2",
+    },
-    "navaid": "^1.0.2",
+    "dependencies": {
-    "open-iconic": "^1.1.1"
+        "ganalytics": "^3.1.2",
-  },
+        "navaid": "^1.0.2",
-  "devDependencies": {
+        "open-iconic": "^1.1.1"
-    "@iconify-icons/oi": "^1.1.0",
+    },
-    "@iconify/svelte": "^1.0.4",
+    "devDependencies": {
-    "@rollup/plugin-commonjs": "^15.0.0",
+        "@sveltejs/adapter-auto": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
+        "@sveltejs/kit": "^2.16.0",
-    "@rollup/plugin-replace": "^2.3.0",
+        "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "dotenv": "^8.2.0",
+        "svelte": "^5.0.0",
-    "npm-run-all": "^4.1.3",
+        "svelte-check": "^4.0.0",
-    "rollup": "^2.30.0",
+        "typescript": "^5.0.0",
-    "rollup-plugin-svelte": "^6.0.0",
+        "vite": "^6.2.6",
-    "rollup-plugin-terser": "^7.0.0",
+        "dotenv": "^8.2.0",
-    "sirv-cli": "^1.0.8",
+        "wx-svelte-grid": "^2.1.5",
-    "svelte": "^3.4.4",
+        "@iconify-icons/oi": "^1.1.0",
-    "svelte-paginate": "^0.1.0"
+        "@iconify/svelte": "^5.0.0"
-  }
+    },
+    "exports": {
+        ".": {
+            "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/components/TimekeepingDate.svelte

@@ -1,15 +0,0 @@
-<script context="module">
-    export class TimekeepingDate extends Date {
-        getDateString() {
-            return this.getFullYear() + "-"
-            + (this.getMonth() + 1).toString().padStart(2, '0') + "-"
-            + this.getDate().toString().padStart(2, '0')
-        }
-
-        getNextDay() {
-            let nextDay = new TimekeepingDate(this);
-            nextDay.setDate(this.getDate() + 1)
-            return nextDay
-        }
-    }
-</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,163 @@
+<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) => {
+            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) => {
+            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,24 @@
+<script>
+    import { page } from '$app/state';
+    let { children } = $props();
+    /** @param {String} str **/
+    const isActive = str => page.url.pathname === str;
+    /** @param {String} str **/
+    const isSelected = str => isActive(str) ? 'selected' : '';
+</script>
+
+<nav>
+    <ul>
+        <li class="{isSelected('/')}"><a href="/" aria-current={isActive('/')}>Home</a></li>
+        <li class="{isSelected('/views/weekly')}"><a href="/views/weekly" aria-current={isActive('/views/weekly')}>Wochenansicht</a></li>
+        <li class="{isSelected('/views/monthly')}"><a href="/views/monthly" aria-current={isActive('/views/monthly')}>Monatsansicht</a></li>
+        <li class="{isSelected('/views/yearly')}"><a href="/views/yearly" aria-current={isActive('/views/yearly')}>Jahresansicht</a></li>
+        <li class="{isSelected('/working-hours')}"><a href="/working-hours" aria-current={isActive('/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/WorkingHours/Formular.svelte

@@ -1,126 +0,0 @@
-<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'
-    import EditByDay from "./Formular/EditByDay.svelte";
-    import EditByWeek from "./Formular/EditByWeek.svelte";
-    import ImportCsv from "./Formular/ImportCsv.svelte";
-    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte";
-
-    const DAILY_EDIT = 0
-    const WEEKLY_EDIT = 1
-    const CSV_IMPORT = 2
-
-    const Controller = {
-        'saveRecord': () => {
-            activeRecordList.forEach((actualRecord) => {
-                if (actualRecord.workingTime === '00:00:00') {
-                    return
-                }
-                WorkingHoursRepository.addOrUpdate(actualRecord.workingDay, actualRecord);
-            })
-            activeDate = nextDate
-            makeTimekeepingList()
-        },
-        'cancelActiveRecord': () => {
-            activeRecordList = []
-            activeRecord = null
-        }
-    }
-    const WeekController = {
-        'makeTimekeepingList': () => {
-            let actualDay = WeekController.getMondayFromWeek(
-                activeDate === null ? new TimekeepingDate() : new TimekeepingDate(activeDate)
-            )
-            activeRecordList = []
-            activeDate = actualDay.getDateString()
-            for (const daysDiff in [0, 1, 2, 3, 4, 5, 6]) {
-                activeRecordList.push({workingTime: '00:00:00', workingDay: actualDay.getDateString()})
-                actualDay = actualDay.getNextDay()
-            }
-            nextDate = actualDay.getDateString()
-            WorkingHoursRepository.browse(activeRecordList[0].workingDay, activeRecordList[6].workingDay).then(data => {
-                data.forEach(item => {
-                    let actualDay = new TimekeepingDate(item.workingDay)
-                    activeRecordList[actualDay.getDay()-1].workingTime = item.workingTime
-                })
-            })
-        },
-        'getMondayFromWeek': actualDayObject => {
-            if (actualDayObject.getDate() === 0) {
-                actualDayObject.setDate(actualDayObject.getDate() - 7)
-            }
-            if (actualDayObject.getDate() !== 1) {
-                actualDayObject.setDate(actualDayObject.getDate() - (actualDayObject.getDay() - 1))
-            }
-            return actualDayObject
-        }
-    }
-    const DayController = {
-        'makeTimekeepingList': () => {
-            let actualDay = activeDate === null ? new TimekeepingDate() : new TimekeepingDate(activeDate)
-            WorkingHoursRepository.readOrNew(actualDay.getDateString()).then(data => {
-                activeRecordList = [ data ]
-                activeDate = actualDay.getDateString()
-                nextDate = actualDay.getNextDay().getDateString()
-            })
-        }
-    }
-    const CsvController = {
-        'makeTimekeepingList': () => {
-            MenuController.dailyEdit()
-        }
-    }
-    const MenuController = {
-        'dailyEdit': () => {
-            period_of_edit = DAILY_EDIT
-            makeTimekeepingList = DayController.makeTimekeepingList
-            makeTimekeepingList()
-        },
-        'weeklyEdit': () => {
-            period_of_edit = WEEKLY_EDIT
-            makeTimekeepingList = WeekController.makeTimekeepingList
-            makeTimekeepingList()
-        },
-        'csvImport': () => {
-            period_of_edit = CSV_IMPORT
-            activeRecordList = []
-            makeTimekeepingList = CsvController.makeTimekeepingList
-        }
-    }
-
-    let activeDate = null
-    let nextDate = null
-    let activeRecordList = []
-    export let activeRecord = null
-    let period_of_edit
-    let makeTimekeepingList
-
-    MenuController.dailyEdit()
-</script>
-<!--suppress HtmlUnknownTarget -->
-<form action="/working-hours" name="editRecord">
-    <nav class="menu">
-        <span on:click={MenuController.dailyEdit} on:keypress={() => {}} class:active={period_of_edit === DAILY_EDIT}>Täglich</span>
-        <span on:click={MenuController.weeklyEdit} on:keypress={() => {}} class:active={period_of_edit === WEEKLY_EDIT}>Wöchentlich</span>
-        <span on:click={MenuController.csvImport} on:keypress={() => {}} class:active={period_of_edit === CSV_IMPORT}>Import per CSV</span>
-    </nav>
-    {#if period_of_edit === DAILY_EDIT}
-        <EditByDay bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
-    {/if}
-    {#if period_of_edit === WEEKLY_EDIT}
-        <EditByWeek bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
-    {/if}
-    {#if period_of_edit === CSV_IMPORT}
-        <ImportCsv bind:activeRecordList bind:makeTimekeepingList/>
-    {/if}
-    <fieldset name="buttons">
-        <button on:click={Controller.saveRecord} type="button">Übernehmen und Weiter
-            <IconifyIcon icon={checkIcon} color="green"/>
-        </button>
-        <button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
-            <IconifyIcon icon={xIcon}/>
-        </button>
-    </fieldset>
-</form>

ui/src/routes/WorkingHours/Formular/EditByDay.svelte

@@ -1,24 +0,0 @@
-<script>
-    export let activeDate = null
-    export let activeRecordList = []
-    export let makeTimekeepingList = () => {}
-
-    makeTimekeepingList()
-</script>
-
-{#if activeRecordList.length < 1}
-    <p>Loading...</p>
-{:else}
-    <fieldset name="record-data-by-day">
-        <div>
-            <label for="workingDay">Arbeitstag</label>
-            <input bind:value={activeDate} type="date" on:change={makeTimekeepingList}
-                   id="workingDay" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
-        </div>
-        <div>
-            <label for="workingTime">Arbeitszeit</label>
-            <input bind:value={activeRecordList[0].workingTime} placeholder="Arbeitszeit" type="time"
-                   id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
-        </div>
-    </fieldset>
-{/if}

ui/src/routes/WorkingHours/Formular/EditByWeek.svelte

@@ -1,62 +0,0 @@
-<script>
-    export let activeDate = null
-    export let activeRecordList = []
-    export let makeTimekeepingList = () => {}
-
-    makeTimekeepingList()
-</script>
-
-<style>
-    tbody.weekend td input, tbody.weekend td {
-        color: red;
-    }
-    input#monday {
-        display: inline;
-        width: auto;
-    }
-</style>
-
-
-{#if activeRecordList.length < 1}
-    <p>Loading...</p>
-{:else}
-    <fieldset name="how-week-is-use">
-        <div>
-            <label for="monday">Woche vom</label>
-            <input bind:value={activeDate} type="date" on:change={makeTimekeepingList}
-                   id="monday" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
-        </div>
-    </fieldset>
-    <fieldset name="record-data-by-week">
-        <div>
-            <table>
-                <tbody>
-                {#each ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'] as day, index}
-                    <tr>
-                        <td>
-                            {day}
-                        </td>
-                        <td>
-                            <input bind:value={activeRecordList[index].workingTime} placeholder="Arbeitszeit" type="time"
-                                   required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
-                        </td>
-                    </tr>
-                {/each}
-                </tbody>
-                <tbody class="weekend">
-                {#each ['Samstag', 'Sontag'] as day, index}
-                    <tr>
-                        <td>
-                            {day}
-                        </td>
-                        <td>
-                            <input bind:value={activeRecordList[index+5].workingTime} placeholder="Arbeitszeit" type="time"
-                                   required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
-                        </td>
-                    </tr>
-                {/each}
-                </tbody>
-            </table>
-        </div>
-    </fieldset>
-{/if}

ui/src/routes/WorkingHours/List.svelte

@@ -1,95 +0,0 @@
-<script>
-    import { WorkingHoursRepository } from '../../components/Repositories.svelte'
-    import { TimekeepingDate } from '../../components/TimekeepingDate.svelte'
-    import { paginate, PaginationNav } from 'svelte-paginate'
-    import IconifyIcon from '@iconify/svelte'
-    import wrenchIcon from '@iconify-icons/oi/wrench'
-    import documentIcon from '@iconify-icons/oi/document'
-
-    export let activeRecord = null
-    let isLoading = true
-    let records = []
-    export let currentPage = 1
-    let pageSize = 15
-    $: paginatedItems = paginate({ items: records, pageSize, currentPage })
-
-    const Controller = {
-        'listRecords': () => {
-            Controller.cancelActiveRecord()
-            WorkingHoursRepository.browse().then(data => {
-                Controller.cancelActiveRecord()
-                records = data
-                isLoading = false
-            })
-        },
-        'newRecord': async () => {
-            const actDate = new TimekeepingDate()
-            activeRecord = await WorkingHoursRepository.readOrNew(actDate.getDateString())
-        },
-        'selectActiveRecord': record => WorkingHoursRepository.read(record.workingDay).then(data => {
-            if (data === null) {
-                Controller.listRecords()
-                return
-            }
-            activeRecord = data
-        }),
-        'cancelActiveRecord': () => {
-            activeRecord = null
-        },
-    }
-    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 paginatedItems 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>
-        <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}

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/src/routes/working-hours/+page.server.js

@@ -0,0 +1,64 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursRepository} from "$lib/Repositories.svelte";
+
+export function load() {
+    return {
+        promise: WorkingHoursRepository.browse(env.API_URL)
+    };
+}
+
+/** @param {Date} actualDayObject **/
+const getMonday = actualDayObject => {
+    if (actualDayObject.getDate() === 0) {
+        actualDayObject.setDate(actualDayObject.getDate() - 7)
+    }
+    if (actualDayObject.getDate() !== 1) {
+        actualDayObject.setDate(actualDayObject.getDate() - (actualDayObject.getDay() - 1))
+    }
+    return actualDayObject
+}
+
+/** @type {String[]} **/
+const day_list = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sontag']
+
+/** @param {Date} actualDayObject **/
+const getDateString = actualDayObject => {
+    return actualDayObject.getFullYear() + "-"
+        + (actualDayObject.getMonth() + 1).toString().padStart(2, '0') + "-"
+        + actualDayObject.getDate().toString().padStart(2, '0')
+}
+
+export const actions = {
+    update: async ({ request }) => {
+        const data = await request.formData();
+        const body_data = {
+            workingDay: data.get('workingDay'),
+            workingTime: data.get('workingTime'),
+        }
+        await WorkingHoursRepository.update(env.API_URL, data.get('workingDay'), body_data);
+    },
+    create: async ({ request }) => {
+        const form_data = await request.formData();
+        const body_data = {
+            workingDay: form_data.get('workingDay'),
+            workingTime: form_data.get('workingTime'),
+        }
+        await WorkingHoursRepository.add(env.API_URL, body_data);
+    },
+    "create-by-week": async ({ request }) => {
+        const form_data = await request.formData();
+        // @ts-ignore
+        let actualDayObject = getMonday(new Date(form_data.get('week')))
+        day_list.forEach(day => {
+            if (form_data.get(day) !== '00:00:00' && form_data.get(day) !== '00:00') {
+                const working_day = getDateString(actualDayObject)
+                const body_data = {
+                    workingDay: working_day,
+                    workingTime: form_data.get(day),
+                }
+                WorkingHoursRepository.addOrUpdate(env.API_URL, working_day, body_data);
+            }
+            actualDayObject.setDate(actualDayObject.getDate() + 1)
+        })
+    }
+};

ui/src/routes/working-hours/+page.svelte

@@ -0,0 +1,73 @@
+<script>
+    import documentIcon from "@iconify-icons/oi/document.js";
+    import wrenchIcon from "@iconify-icons/oi/wrench.js";
+    import IconifyIcon from "@iconify/svelte";
+    let { data } = $props();
+    const TITLE = "Bearbeitung Einträge"
+    /** @type {{workingDay: String, workingTime: String, }[]|null} **/
+    let records = $state([])
+    const init = async () => await data.promise.then(
+        /**
+         * @param {{workingDay: String, workingTime: String, }[]} data
+         */
+        data => {
+            records = data
+        }
+    )
+    init()
+</script>
+
+<svelte:head>
+    <title>{TITLE}</title>
+</svelte:head>
+
+<section id="list-records">
+    <header>
+        <h1>{TITLE}</h1>
+    </header>
+    <article>
+        <!--suppress HtmlUnknownTarget -->
+        <form action="/working-hours">
+            <fieldset>
+                <legend>Neuer Eintrag</legend>
+                <button formaction="/working-hours/create-by-day" type="submit">per Tag
+                    <IconifyIcon icon={documentIcon}/>
+                </button>
+                <button formaction="/working-hours/create-by-week" type="submit">per Woche
+                    <IconifyIcon icon={documentIcon}/>
+                </button>
+            </fieldset>
+            {#if records === null}
+                <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 formaction={'/working-hours/' + record.workingDay} type="submit">Bearbeiten
+                                    <IconifyIcon icon={wrenchIcon}/>
+                                </button>
+                            </td>
+                        </tr>
+                    {/each}
+                    </tbody>
+                </table>
+            {/if}
+        </form>
+    </article>
+</section>

ui/src/routes/working-hours/[working_day]/+page.server.js

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

ui/src/routes/working-hours/[working_day]/+page.svelte

@@ -0,0 +1,57 @@
+<script>
+    import IconifyIcon from '@iconify/svelte'
+    import checkIcon from "@iconify-icons/oi/check";
+    import xIcon from "@iconify-icons/oi/x";
+    let { data } = $props();
+    const TITLE = "Bearbeitung eines Eintrags"
+    /** @type {{workingDay: String, workingTime: String, }|null} **/
+    let activeDate = $state(null)
+    const init = async () => await data.promise.then(
+        /**
+         * @param {{workingDay: String, workingTime: String, }} data
+         */
+        data => {
+            activeDate = data
+        }
+    )
+    init()
+</script>
+
+<svelte:head>
+    <title>{TITLE}</title>
+</svelte:head>
+
+
+<section id="edit-record">
+    <header>
+        <h1>{TITLE}</h1>
+    </header>
+    <article>
+        <form action="/working-hours?/update" name="editRecord" method="POST">
+            {#if activeDate === null}
+                <p>Loading...</p>
+            {:else}
+                <fieldset name="record-data-by-day">
+                    <div>
+                        <label for="workingDay">Arbeitstag</label>
+                        <input name="workingDay" type="date" id="workingDay" value="{activeDate.workingDay}" required pattern="\d\{4}-[0-1]\d-[0-3]\d">
+                    </div>
+                    <div>
+                        <label for="workingTime">Arbeitszeit</label>
+                        <input name="workingTime" placeholder="Arbeitszeit" type="time" step="1"
+                               value="{activeDate.workingTime}"
+                               id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+                    </div>
+                </fieldset>
+            {/if}
+            <fieldset name="buttons">
+                <button type="submit">Übernehmen und Weiter
+                    <IconifyIcon icon={checkIcon} color="green"/>
+                </button>
+                <button formmethod="GET" type="submit" class="sub-button">Abbrechen
+                    <IconifyIcon icon={xIcon}/>
+                </button>
+            </fieldset>
+        </form>
+    </article>
+</section>

ui/src/routes/working-hours/create-by-day/+page.svelte

@@ -0,0 +1,43 @@
+<script>
+    import IconifyIcon from '@iconify/svelte'
+    import checkIcon from "@iconify-icons/oi/check";
+    import xIcon from "@iconify-icons/oi/x";
+    import {goto} from "$app/navigation";
+
+    const TITLE = "Erstellung eines neuen Eintrags"
+</script>
+
+<svelte:head>
+    <title>{TITLE}</title>
+</svelte:head>
+
+
+<section id="edit-record">
+    <header>
+        <h1>{TITLE}</h1>
+    </header>
+    <article>
+        <form action="/working-hours?/create" name="newRecord" method="POST">
+            <fieldset name="record-data-by-day">
+                <div>
+                    <label for="workingDay">Arbeitstag</label>
+                    <input name="workingDay" type="date" id="workingDay" value="" required
+                           pattern="\d\{4}-[0-1]\d-[0-3]\d">
+                </div>
+                <div>
+                    <label for="workingTime">Arbeitszeit</label>
+                    <input name="workingTime" placeholder="Arbeitszeit" type="time" step="1" value=""
+                           id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+                </div>
+            </fieldset>
+            <fieldset name="buttons">
+                <button type="submit">Übernehmen und Weiter
+                    <IconifyIcon icon={checkIcon} color="green"/>
+                </button>
+                <button type="button" class="sub-button" onclick={() => goto('/working-hours')}>Abbrechen
+                    <IconifyIcon icon={xIcon}/>
+                </button>
+            </fieldset>
+        </form>
+    </article>
+</section>

ui/src/routes/working-hours/create-by-week/+page.svelte

@@ -0,0 +1,74 @@
+<script>
+    import IconifyIcon from '@iconify/svelte'
+    import checkIcon from "@iconify-icons/oi/check";
+    import xIcon from "@iconify-icons/oi/x";
+    import {goto} from "$app/navigation";
+    const TITLE = "Erstellung neuer Einträge für eine Woche"
+</script>
+
+<svelte:head>
+    <title>{TITLE}</title>
+</svelte:head>
+
+<style>
+    tbody.weekend td input, tbody.weekend td {
+        color: red;
+    }
+</style>
+
+
+<section id="edit-record">
+    <header>
+        <h1>{TITLE}</h1>
+    </header>
+    <article>
+        <form action="/working-hours?/create-by-week" name="newRecord" method="POST">
+            <fieldset name="how-week-is-use">
+                <div>
+                    <label for="monday">Woche vom</label>
+                    <input name="week" type="date" id="week" required value="">
+                </div>
+            </fieldset>
+            <fieldset name="record-data-by-week">
+                <div>
+                    <table>
+                        <tbody>
+                        {#each ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'] as day}
+                            <tr>
+                                <td>
+                                    {day}
+                                </td>
+                                <td>
+                                    <input name="{day}" value="08:00:00" type="time" step="1"
+                                           required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+                                </td>
+                            </tr>
+                        {/each}
+                        </tbody>
+                        <tbody class="weekend">
+                        {#each ['Samstag', 'Sontag'] as day}
+                            <tr>
+                                <td>
+                                    {day}
+                                </td>
+                                <td>
+                                    <input name="{day}" value="00:00:00" type="time" step="1"
+                                           required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+                                </td>
+                            </tr>
+                        {/each}
+                        </tbody>
+                    </table>
+                </div>
+            </fieldset>
+            <fieldset name="buttons">
+                <button type="submit">Übernehmen und Weiter
+                    <IconifyIcon icon={checkIcon} color="green"/>
+                </button>
+                <button type="button" class="sub-button" onclick={() => goto('/working-hours')}>Abbrechen
+                    <IconifyIcon icon={xIcon}/>
+                </button>
+            </fieldset>
+        </form>
+    </article>
+</section>

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()]
+});