Es ist möglich einen neuen Eintrag zu generieren.

Reviewed-on: #3

.editorconfig

@@ -0,0 +1,10 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_size = 4
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false

.gitignore

@@ -105,3 +105,4 @@ Temporary Items
 /api/vendor/
 /api/tests/_*
 /api/tests/*.suite.yml
+/api/.env

api/.env

@@ -1,5 +0,0 @@
-## Datenbank-Einstellungen
-DATABASES_HOST=psql.torsten-hettstedt.net
-DATABASES_NAME=torsten
-DATABASES_USER=web_user
-DATABASES_PASS=V6ZGhtdXEbxH8oWD

api/.env.example

@@ -0,0 +1,5 @@
+## Datenbank-Einstellungen
+DATABASES_HOST=psql.domain.tld
+DATABASES_NAME=db
+DATABASES_USER=user
+DATABASES_PASS=1234

api/Dockerfile

@@ -1,6 +1,5 @@
 FROM php:8.0-apache
 
-#RUN apt update && apt install -y postgresql postgresql-client
 RUN apt update && apt install -y libpq-dev
 RUN docker-php-ext-install -j$(nproc) pdo pdo_pgsql
 

api/src/Controller/AbstractController.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace TorstenHettstedt\TimekeepingApi\Controller;
+
+use JsonSerializable;
+use PDO;
+use Psr\Container\ContainerInterface;
+use Slim\Psr7\Response;
+
+abstract class AbstractController
+{
+
+    protected PDO $databases;
+
+    /**
+     * WorkingHoursController constructor.
+     *
+     * @param ContainerInterface $container
+     *
+     * @throws NotDatabasesException
+     */
+    public function __construct(ContainerInterface $container)
+    {
+        if ($container->has('databases') === false) {
+            throw new NotDatabasesException('Datenbank ist nicht Vorhanden');
+        }
+        $this->databases = $container->get('databases');
+    }
+
+    /**
+     * @param Response                            $response
+     * @param JsonSerializable|JsonSerializable[] $data
+     * @param int                                 $status_code
+     *
+     * @return Response
+     */
+    protected function printResponse(Response $response, mixed $data, int $status_code): Response {
+        $payload = json_encode($data);
+
+        $response->getBody()->write($payload);
+
+        return $response
+            ->withHeader('Content-Type', 'application/json')
+            ->withStatus($status_code);
+    }
+
+}

api/src/Controller/HttpConflictRequestException.php

@@ -6,16 +6,15 @@ use Slim\Exception\HttpSpecializedException;
 
 class HttpConflictRequestException extends HttpSpecializedException
 {
-    /**
-     * @var int
-     */
+    /** @var int */
     protected $code = 409;
 
-    /**
-     * @var string
-     */
+    /** @var string */
     protected $message = 'Conflict.';
 
+    /** @var string  */
     protected $title = '409 Conflict';
+
+    /** @var string  */
     protected $description = 'The 409 (Conflict) status code indicates that the request could not be completed due to a conflict with the current state of the target resource.';
 }

api/src/Controller/WorkingHoursController.php

@@ -2,45 +2,23 @@
 
 namespace TorstenHettstedt\TimekeepingApi\Controller;
 
-
 use DateInterval;
 use DateTime;
 use Exception;
 use Fig\Http\Message\StatusCodeInterface;
-use PDO;
-use Psr\Container\ContainerInterface;
 use Slim\Exception\HttpBadRequestException;
 use Slim\Exception\HttpInternalServerErrorException;
 use Slim\Exception\HttpNotFoundException;
 use Slim\Psr7\Request;
 use Slim\Psr7\Response;
 use TorstenHettstedt\TimekeepingApi\Models\WorkingHours;
-use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryModelAlreadyExists;
+use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryRecordAlreadyExistException;
 use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryRecordNotFoundException;
 use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursRepository;
 
-class WorkingHoursController
+class WorkingHoursController extends AbstractController
 {
 
-    protected PDO                $databases;
-    protected ContainerInterface $container;
-
-    /**
-     * WorkingHoursController constructor.
-     *
-     * @param ContainerInterface $container
-     *
-     * @throws NotDatabasesException
-     */
-    public function __construct(ContainerInterface $container)
-    {
-        $this->container = $container;
-        if ($this->container->has('databases') === false) {
-            throw new NotDatabasesException('Datenbank ist nicht Vorhanden');
-        }
-        $this->databases = $this->container->get('databases');
-    }
-
     /**
      * @param Request  $request
      * @param Response $response
@@ -71,13 +49,17 @@ class WorkingHoursController
      *
      * @return Response
      *
-     * @throws Exception
+     * @throws HttpInternalServerErrorException
      * @noinspection PhpUnusedParameterInspection
      */
     public function browse(Request $request, Response $response, array $args): Response
     {
         $repository = new WorkingHoursRepository($this->databases);
-        return $this->printResponse($response, $repository->findAll(), StatusCodeInterface::STATUS_OK);
+        try {
+            return $this->printResponse($response, $repository->findAll(), StatusCodeInterface::STATUS_OK);
+        } catch (Exception $exception) {
+            throw new HttpInternalServerErrorException($request, 'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
+        }
     }
 
     /**
@@ -121,7 +103,7 @@ class WorkingHoursController
         $model = $this->buildModel($request, $body['workingDay'], $body['workingTime']);
         try {
             $repository->insert($model);
-        } catch (RepositoryModelAlreadyExists $exception) {
+        } catch (RepositoryRecordAlreadyExistException $exception) {
             throw new HttpConflictRequestException($request, 'Der Eintrag ist schon vorhanden.', $exception);
         } catch (Exception $exception) {
             throw new HttpInternalServerErrorException($request, 'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
@@ -129,24 +111,6 @@ class WorkingHoursController
         return $this->printResponse($response, $model, StatusCodeInterface::STATUS_CREATED);
     }
 
-    /**
-     * @param Response $response
-     * @param mixed    $data
-     * @param int      $status_code
-     *
-     * @return Response
-     */
-    protected function printResponse(Response $response, mixed $data, int $status_code): Response
-    {
-        $payload = json_encode($data);
-
-        $response->getBody()->write($payload);
-
-        return $response
-            ->withHeader('Content-Type', 'application/json')
-            ->withStatus($status_code);
-    }
-
     /**
      * @param Request $request
      * @param string  $date

api/src/Controller/WorkingHoursViewController.php

@@ -4,25 +4,16 @@ namespace TorstenHettstedt\TimekeepingApi\Controller;
 
 
 use Exception;
-use Psr\Container\ContainerInterface;
+use Fig\Http\Message\StatusCodeInterface;
+use Slim\Exception\HttpInternalServerErrorException;
 use Slim\Psr7\Request;
 use Slim\Psr7\Response;
-use TorstenHettstedt\TimekeepingApi\Models\WorkingHoursView;
 use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursMonthlyViewRepository;
 use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursWeeklyViewRepository;
 use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursYearlyViewRepository;
 
-class WorkingHoursViewController
+class WorkingHoursViewController extends AbstractController
 {
-    /**
-     * @var ContainerInterface
-     */
-    protected ContainerInterface $container;
-
-    public function __construct(ContainerInterface $container) {
-        $this->container = $container;
-    }
-
     /**
      * @param Request  $request
      * @param Response $response
@@ -30,17 +21,18 @@ class WorkingHoursViewController
      *
      * @return Response
      *
+     * @throws HttpInternalServerErrorException
      * @noinspection PhpUnusedParameterInspection
-     * @throws NotDatabasesException
-     * @throws Exception
      */
     public function browseWeekly(Request $request, Response $response, array $args): Response
     {
-        if ($this->container->has('databases') === false) {
-            throw new NotDatabasesException('Datenbank ist nicht Vorhanden');
+        $repository = new WorkingHoursWeeklyViewRepository($this->databases);
+        try {
+            return $this->printResponse($response, $repository->findAll(), StatusCodeInterface::STATUS_OK);
+        } catch (Exception $exception) {
+            throw new HttpInternalServerErrorException($request,
+                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
         }
-        $repository = new WorkingHoursWeeklyViewRepository($this->container->get('databases'));
-        return $this->printResponse($response, $repository->findAll());
     }
 
     /**
@@ -50,16 +42,18 @@ class WorkingHoursViewController
      *
      * @return Response
      *
+     * @throws HttpInternalServerErrorException
      * @noinspection PhpUnusedParameterInspection
-     * @throws Exception
      */
     public function browseMonthly(Request $request, Response $response, array $args): Response
     {
-        if ($this->container->has('databases') === false) {
-            throw new NotDatabasesException('Datenbank ist nicht Vorhanden');
+        $repository = new WorkingHoursMonthlyViewRepository($this->databases);
+        try {
+            return $this->printResponse($response, $repository->findAll(), StatusCodeInterface::STATUS_OK);
+        } catch (Exception $exception) {
+            throw new HttpInternalServerErrorException($request,
+                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
         }
-        $repository = new WorkingHoursMonthlyViewRepository($this->container->get('databases'));
-        return $this->printResponse($response, $repository->findAll());
     }
 
     /**
@@ -69,33 +63,18 @@ class WorkingHoursViewController
      *
      * @return Response
      *
+     * @throws HttpInternalServerErrorException
      * @noinspection PhpUnusedParameterInspection
-     * @throws Exception
      */
     public function browseYearly(Request $request, Response $response, array $args): Response
     {
-        if ($this->container->has('databases') === false) {
-            throw new NotDatabasesException('Datenbank ist nicht Vorhanden');
+        $repository = new WorkingHoursYearlyViewRepository($this->databases);
+        try {
+            return $this->printResponse($response, $repository->findAll(), StatusCodeInterface::STATUS_OK);
+        } catch (Exception $exception) {
+            throw new HttpInternalServerErrorException($request,
+                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
         }
-        $repository = new WorkingHoursYearlyViewRepository($this->container->get('databases'));
-        return $this->printResponse($response, $repository->findAll());
-    }
-
-    /**
-     * @param Response $response
-     * @param WorkingHoursView[]    $data
-     *
-     * @return Response
-     */
-    protected function printResponse( Response $response, array $data): Response
-    {
-        $payload = json_encode($data);
-
-        $response->getBody()->write($payload);
-
-        return $response
-            ->withHeader('Content-Type', 'application/json')
-            ->withStatus(200);
     }
 
 }

api/src/Repositories/RepositoryModelAlreadyExists.php

@@ -1,10 +0,0 @@
-<?php
-
-
-namespace TorstenHettstedt\TimekeepingApi\Repositories;
-
-
-class RepositoryModelAlreadyExists extends RepositoryException
-{
-
-}

api/src/Repositories/RepositoryRecordAlreadyExistException.php

@@ -0,0 +1,10 @@
+<?php
+
+
+namespace TorstenHettstedt\TimekeepingApi\Repositories;
+
+
+class RepositoryRecordAlreadyExistException extends RepositoryException
+{
+
+}

api/src/Repositories/RepositoryWriterInterface.php

@@ -11,7 +11,7 @@ interface RepositoryWriterInterface
     /**
      * @param T $model
      *
-     * @throws RepositoryModelAlreadyExists
+     * @throws RepositoryRecordAlreadyExistException
      */
     public function insert(mixed $model): void;
 

api/src/Repositories/WorkingHoursRepository.php

@@ -85,7 +85,7 @@ class WorkingHoursRepository implements RepositoryReaderInterface, RepositoryWri
     /**
      * @param WorkingHours|ModelInterface $model
      *
-     * @throws RepositoryModelAlreadyExists
+     * @throws RepositoryRecordAlreadyExistException
      * @throws Exception
      */
     public function insert(mixed $model): void
@@ -99,7 +99,7 @@ class WorkingHoursRepository implements RepositoryReaderInterface, RepositoryWri
 
         try {
             $this->findByKey($workingDay);
-            throw new RepositoryModelAlreadyExists();
+            throw new RepositoryRecordAlreadyExistException();
         } /** @noinspection PhpUnusedLocalVariableInspection */
         catch (RepositoryRecordNotFoundException $exception) {
             $stmt = $this->database->prepare('insert into  public."Arbeitszeiten" ("Datum", "Arbeitszeit") values (?, ?) on conflict do nothing');

api/tests/unit/Controller/WorkingHoursViewControllerTest.php

@@ -44,16 +44,16 @@ class WorkingHoursViewControllerTest extends Unit
     }
 
     /**
+     * @throws NotDatabasesException
      * @throws Exception
      */
-    public function testBrowseMonthlyWithNonDatabase(): void
+    public function testConstructWithNonDatabase(): void
     {
         $this->container = $this->makeEmpty(ContainerInterface::class, [
             'has' => false
         ]);
-        $controller = new WorkingHoursViewController($this->container);
         $this->expectException(NotDatabasesException::class);
-        $controller->browseMonthly($this->request, $this->response, []);
+        new WorkingHoursViewController($this->container);
     }
 
     /**
@@ -66,19 +66,6 @@ class WorkingHoursViewControllerTest extends Unit
         $this->assertInstanceOf(Response::class, $response);
     }
 
-    /**
-     * @throws Exception
-     */
-    public function testBrowseYearlyWithNonDatabase(): void
-    {
-        $this->container = $this->makeEmpty(ContainerInterface::class, [
-            'has' => false
-        ]);
-        $controller = new WorkingHoursViewController($this->container);
-        $this->expectException(NotDatabasesException::class);
-        $controller->browseYearly($this->request, $this->response, []);
-    }
-
     /**
      * @throws Exception
      */
@@ -89,19 +76,6 @@ class WorkingHoursViewControllerTest extends Unit
         $this->assertInstanceOf(Response::class, $response);
     }
 
-    /**
-     * @throws Exception
-     */
-    public function testBrowseWeeklyWithNonDatabase(): void
-    {
-        $this->container = $this->makeEmpty(ContainerInterface::class, [
-            'has' => false
-        ]);
-        $controller = new WorkingHoursViewController($this->container);
-        $this->expectException(NotDatabasesException::class);
-        $controller->browseWeekly($this->request, $this->response, []);
-    }
-
     /**
      * @throws Exception
      */

api/tests/unit/Middleware/ErrorHandlerTest.php

@@ -72,9 +72,7 @@ class ErrorHandlerTest extends Unit
             'file'    => '/path(to/file',
             'getTitle'   => Expected::once('The Title'),
         ]);
-        $this->logger = $this->makeEmpty(LoggerInterface::class, [
-            'error' => Expected::once(),
-        ]);
+        $this->logger = $this->makeEmpty(LoggerInterface::class, []);
 
         $middleWare = new ErrorHandler($this->app);
         $middleWare($this->request, $this->exception, true, true, true, $this->logger);
@@ -91,9 +89,7 @@ class ErrorHandlerTest extends Unit
             'code'    => 400,
             'file'    => '/path(to/file',
         ]);
-        $this->logger = $this->makeEmpty(LoggerInterface::class, [
-            'error' => Expected::once(),
-        ]);
+        $this->logger = $this->makeEmpty(LoggerInterface::class, []);
 
         $middleWare = new ErrorHandler($this->app);
         $middleWare($this->request, $this->exception, true, true, true, $this->logger);

api/tests/unit/Repositories/WorkingHoursRepositoryTest.php

@@ -8,10 +8,9 @@ use DateTime;
 use Exception;
 use InvalidArgumentException;
 use PDO;
-use PDOStatement;
 use TorstenHettstedt\TimekeepingApi\Models\ModelInterface;
 use TorstenHettstedt\TimekeepingApi\Models\WorkingHours;
-use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryModelAlreadyExists;
+use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryRecordAlreadyExistException;
 use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryRecordNotFoundException;
 use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursRepository;
 
@@ -24,7 +23,6 @@ class WorkingHoursRepositoryTest extends Unit
     const RECORDS_COUNT     = 61;
 
     protected PDO          $pdoObject;
-    protected PDOStatement $pdoStatement;
 
     protected function _before(): void
     {
@@ -104,7 +102,7 @@ class WorkingHoursRepositoryTest extends Unit
             'workingDay'  => new DateTime(self::EXISTING_DATE),
             'workingTime' => new DateInterval(self::NEW_INTERVAL),
         ]);
-        $this->expectException(RepositoryModelAlreadyExists::class);
+        $this->expectException(RepositoryRecordAlreadyExistException::class);
         $repository->insert($model);
     }
 

resources/salt/add-update-record.puml

@@ -0,0 +1,11 @@
+@startuml
+'https://plantuml.com/salt
+
+salt
+{
+    Datum   |"Datum <&calendar>"
+    Uhrzeit | "Uhrzeit <&clock>"
+    [Übernehmen <&plus>]
+    [Abbrechen <&action-undo>]
+}
+@enduml

resources/salt/add-update-records-for-week.puml

@@ -0,0 +1,20 @@
+@startuml
+'https://plantuml.com/salt
+
+salt
+{
+    Woche vom <&calendar> bis zum <&calendar>
+    [<&chevron-left> Woche zurück] | [Woche vor <&chevron-right>]
+    {!
+                   Montag     |            "00:00:00 <&clock>"
+                   Dienstag   |            "00:00:00 <&clock>"
+                   Mittwoch   |            "00:00:00 <&clock>"
+                   Donnerstag |            "00:00:00 <&clock>"
+                   Freitag    |            "00:00:00 <&clock>"
+        <color:red>Samstag    | "<color:red>00:00:00 <&clock>"
+        <color:red>Sontag     | "<color:red>00:00:00 <&clock>"
+    }
+    [Übernehmen <&plus>]
+    [Abbrechen <&action-undo>]
+}
+@enduml

ui/.env.example

@@ -0,0 +1,2 @@
+# Url ohne abschlißenden Slash
+API_URL= http://localhost:8080

ui/.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules
+package-lock.json
+yarn.lock
+public
+/.env

ui/package.json

@@ -0,0 +1,30 @@
+{
+  "private": true,
+  "name": "svelte-demo",
+  "scripts": {
+    "build": "rollup -c",
+    "autobuild": "rollup -c -w",
+    "dev": "run-p start:dev autobuild",
+    "start": "sirv public --single",
+    "start:dev": "sirv public --dev --single"
+  },
+  "dependencies": {
+    "ganalytics": "^3.1.2",
+    "navaid": "^1.0.2",
+    "open-iconic": "^1.1.1"
+  },
+  "devDependencies": {
+    "@iconify-icons/oi": "^1.1.0",
+    "@iconify/svelte": "^1.0.4",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.3.0",
+    "dotenv": "^8.2.0",
+    "npm-run-all": "^4.1.3",
+    "rollup": "^2.30.0",
+    "rollup-plugin-svelte": "^6.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "sirv-cli": "^1.0.8",
+    "svelte": "^3.4.4"
+  }
+}

ui/public/global.css

@@ -0,0 +1 @@
+

ui/public/index.html

@@ -0,0 +1,21 @@
+<!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">
+	<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

@@ -0,0 +1,51 @@
+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/components/App.svelte

@@ -0,0 +1,67 @@
+<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);
+
+
+    let r = {
+        "workingDay": "2020-01-15",
+        "workingTime": "09:00:00"
+    };
+    let records = {
+        "title" : "Einträge",
+        "records" : [r, r]
+    };
+
+	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'), records))
+		.listen();
+
+	onDestroy(router.unlisten);
+</script>

ui/src/components/Nav.svelte

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

ui/src/index.js

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

ui/src/routes/Home.svelte

@@ -0,0 +1,5 @@
+<Views />
+
+<script>
+    import Views from "./WeeklyViews.svelte";
+</script>

ui/src/routes/MonthlyViews.svelte

@@ -0,0 +1,31 @@
+<script>
+    import Views from "./Views.svelte";
+    export let params;
+    params = {
+        title: 'Monatsansicht',
+        records: [],
+        isLoading: true
+    }
+    const View = {
+        'browse': () => {
+            fetch(env.API_URL + '/views/working-hours/monthly')
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Fail!');
+                    }
+                    return res.json();
+                })
+                .then(data => {
+                    params.records = data;
+                    params.isLoading = false;
+                })
+                .catch(err => {
+                    params.isLoading = false;
+                    console.log(err);
+                });
+        }
+    };
+    View.browse();
+</script>
+
+<Views {params} />

ui/src/routes/Views.svelte

@@ -0,0 +1,40 @@
+<script>
+    export let params;
+    console.log(params)
+</script>
+
+<svelte:head>
+	<title>{params.title}</title>
+</svelte:head>
+
+<section id="list-records">
+    <header>
+        <h1>{params.title}</h1>
+    </header>
+    <article>
+        {#if params.isLoading === true}
+            <p>Loading...</p>
+        {:else}
+            <table>
+                <thead>
+                <tr>
+                    <th>Zeitraum</th>
+                    <th>Arbeitstage</th>
+                    <th>Arbeitsstunden</th>
+                    <th>Über- / Unterstunden</th>
+                </tr>
+                </thead>
+                <tbody>
+                {#each params.records as record}
+                    <tr>
+                        <td>{record.period}</td>
+                        <td>{record.workingDays}</td>
+                        <td>{record.totalHours}</td>
+                        <td>{record.overtime}</td>
+                    </tr>
+                {/each}
+                </tbody>
+            </table>
+        {/if}
+    </article>
+</section>

ui/src/routes/WeeklyViews.svelte

@@ -0,0 +1,31 @@
+<script>
+    import Views from "./Views.svelte";
+    export let params;
+    params = {
+        title: 'Wochenansicht',
+        records: [],
+        isLoading: true
+    }
+    const View = {
+        'browse': () => {
+            fetch(env.API_URL + '/views/working-hours/weekly')
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Fail!');
+                    }
+                    return res.json();
+                })
+                .then(data => {
+                    params.records = data;
+                    params.isLoading = false;
+                })
+                .catch(err => {
+                    params.isLoading = false;
+                    console.log(err);
+                });
+        }
+    };
+    View.browse();
+</script>
+
+<Views {params} />

ui/src/routes/WorkingHours.svelte

@@ -0,0 +1,197 @@
+<script>
+    export let params;
+    let title = "Bearbeitung Einträge"
+    import IconifyIcon from '@iconify/svelte';
+    import wrenchIcon from '@iconify-icons/oi/wrench';
+    import checkIcon from '@iconify-icons/oi/check';
+    import xIcon from '@iconify-icons/oi/x';
+    import documentIcon from '@iconify-icons/oi/document';
+    let activeRecord = null;
+    let newRecord = false;
+    params = {
+        title: 'Einträge',
+        records: [],
+        isLoading: true
+    }
+    const Records = {
+        'browse': () => {
+            // noinspection JSUnresolvedVariable
+            fetch(env.API_URL + '/working-hours')
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Fail!');
+                    }
+                    return res.json();
+                })
+                .then(data => {
+                    activeRecord = null;
+                    params.records = data;
+                    params.isLoading = false;
+                })
+                .catch(err => {
+                    params.isLoading = false;
+                    console.log(err);
+                });
+        },
+        'read': date => {
+            // noinspection JSUnresolvedVariable
+            fetch(env.API_URL + '/working-hours/' + date)
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Fail!');
+                    }
+                    return res.json();
+                })
+                .then(data => {
+                    activeRecord = data;
+                    if (date === null) {
+                        Records.browse();
+                    }
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        'add': record => {
+            console.log(record);
+            // noinspection JSUnresolvedVariable
+            fetch(env.API_URL + '/working-hours', {
+                method: 'POST',
+                mode: 'no-cors',
+                cache: 'no-cache',
+                credentials: 'same-origin',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                redirect: 'follow',
+                referrerPolicy: 'no-referrer',
+                body: JSON.stringify(record)
+            })
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Fail!');
+                    }
+                })
+                .then(() => {
+                    newRecord = false;
+                    Records.browse();
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        'update': (date, record) => {
+            console.log(record);
+            // noinspection JSUnresolvedVariable
+            fetch(env.API_URL + '/working-hours/' + date, {
+                method: 'PUT',
+                mode: 'no-cors',
+                cache: 'no-cache',
+                credentials: 'same-origin',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                redirect: 'follow',
+                referrerPolicy: 'no-referrer',
+                body: JSON.stringify(record)
+            })
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Fail!');
+                    }
+                })
+                .then(() => {
+                    Records.browse();
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        }
+    };
+    Records.browse();
+</script>
+
+<svelte:head>
+    <title>{title}</title>
+</svelte:head>
+
+{#if activeRecord === null}
+    <section id="list-records">
+        <header>
+            <h1>{title}</h1>
+        </header>
+        <article>
+            {#if params.isLoading === true}
+                <p>Loading...</p>
+            {:else}
+                <!--suppress HtmlUnknownTarget -->
+                <form action="/working-hours">
+                    <fieldset>
+                        <button on:click={() => {activeRecord = {}; newRecord = true}}>Neuer Eintrag
+                            <IconifyIcon icon={documentIcon}/>
+                        </button>
+                    </fieldset>
+                </form>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>Datum</th>
+                        <th>Arbeitsstunden</th>
+                        <th>Aktionen</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {#each params.records as record}
+                        <tr>
+                            <td>{record.workingDay}</td>
+                            <td>{record.workingTime}</td>
+                            <td>
+                                <button on:click={() => Records.read(record.workingDay)}>Bearbeiten
+                                    <IconifyIcon icon={wrenchIcon}/>
+                                </button>
+                            </td>
+                        </tr>
+                    {/each}
+                    </tbody>
+                </table>
+            {/if}
+        </article>
+    </section>
+{:else}
+    <section id="edit-record">
+        <header>
+            <h1>{title}</h1>
+        </header>
+        <article>
+            <!--suppress HtmlUnknownTarget -->
+            <form action="/working-hours" name="editRecord">
+                <fieldset name="record-data">
+                    <div>
+                        <label for="workingDay">Arbeitstag</label>
+                        <input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date"
+                               id="workingDay">
+                    </div>
+                    <div>
+                        <label for="workingTime">Arbeitszeit</label>
+                        <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
+                               id="workingTime">
+                    </div>
+                </fieldset>
+                <fieldset name="buttons">
+                    {#if newRecord === true}
+                        <button on:click={() => Records.add(activeRecord)}>Übernehmen
+                            <IconifyIcon icon={checkIcon} color="green"/>
+                        </button>
+                    {:else}
+                        <button on:click={() => Records.update(activeRecord.workingDay, activeRecord)}>Übernehmen
+                            <IconifyIcon icon={checkIcon} color="green"/>
+                        </button>
+                    {/if}
+                    <button on:click={() => Records.read(null)}>Abbrechen
+                        <IconifyIcon icon={xIcon}/>
+                    </button>
+                </fieldset>
+            </form>
+        </article>
+    </section>
+{/if}

ui/src/routes/YearlyViews.svelte

@@ -0,0 +1,31 @@
+<script>
+    import Views from "./Views.svelte";
+    export let params;
+    params = {
+        title: 'Jahresansicht',
+        records: [],
+        isLoading: true
+    }
+    const View = {
+        'browse': () => {
+            fetch(env.API_URL + '/views/working-hours/yearly')
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Fail!');
+                    }
+                    return res.json();
+                })
+                .then(data => {
+                    params.records = data;
+                    params.isLoading = false;
+                })
+                .catch(err => {
+                    params.isLoading = false;
+                    console.log(err);
+                });
+        }
+    };
+    View.browse();
+</script>
+
+<Views {params} />