Es sollte auf die notwendigen Header geachtet werden (https://developer.mozilla.org/de/docs/Web/HTTP/CORS)

Reviewed-on: #6

.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,8 @@
+## Datenbank-Einstellungen
+DATABASES_HOST=psql.domain.tld
+DATABASES_NAME=db
+DATABASES_USER=user
+DATABASES_PASS=1234
+
+## CORS Einstellungen
+CORS_ALLOW_ORIGIN_REGEX=/https?:\/\/localhost:\d+/

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/html/index.php

@@ -7,10 +7,12 @@ $dotenv->load();
 use DI\Container;
 use Slim\Factory\AppFactory;
 use Slim\Routing\RouteCollectorProxy;
+use TorstenHettstedt\TimekeepingApi\Controller\PreflightController;
 use TorstenHettstedt\TimekeepingApi\Controller\WorkingHoursController;
 use TorstenHettstedt\TimekeepingApi\Controller\WorkingHoursViewController;
 use TorstenHettstedt\TimekeepingApi\Middleware\ErrorHandler;
 use TorstenHettstedt\TimekeepingApi\Middleware\JsonBodyParserMiddleware;
+use TorstenHettstedt\TimekeepingApi\Middleware\OriginAccessControlHandler;
 
 $container = new Container();
 
@@ -22,17 +24,25 @@ $container->set('databases', function () {
 AppFactory::setContainer($container);
 $app = AppFactory::create();
 $app->add(new JsonBodyParserMiddleware());
+$app->addBodyParsingMiddleware();
+$app->add(new OriginAccessControlHandler());
+$app->addRoutingMiddleware();
 
 $app->group('/views/working-hours', function (RouteCollectorProxy $group) {
+    $group->options('/weekly', PreflightController::class . ':preflight');
     $group->get('/weekly', WorkingHoursViewController::class . ':browseWeekly');
+    $group->options('/monthly', PreflightController::class . ':preflight');
     $group->get('/monthly', WorkingHoursViewController::class . ':browseMonthly');
+    $group->options('/yearly', PreflightController::class . ':preflight');
     $group->get('/yearly', WorkingHoursViewController::class . ':browseYearly');
 });
 
 $app->group('/working-hours', function (RouteCollectorProxy $group) {
+    $group->options('', PreflightController::class . ':preflight');
     $group->get('', WorkingHoursController::class . ':browse');
     $group->post('', WorkingHoursController::class . ':creat');
     $group->group('/{id:\d\d\d\d-\d\d-\d\d}', function (RouteCollectorProxy $group) {
+        $group->options('', PreflightController::class . ':preflight');
         $group->get('', WorkingHoursController::class . ':read');
         $group->put('', WorkingHoursController::class . ':update');
     });

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/PreflightController.php

@@ -0,0 +1,18 @@
+<?php
+
+
+namespace TorstenHettstedt\TimekeepingApi\Controller;
+
+
+use Psr\Http\Message\ResponseInterface;
+use Slim\Psr7\Request;
+use Slim\Psr7\Response;
+use TorstenHettstedt\TimekeepingApi\Middleware\OriginAccessControlHandler;
+
+class PreflightController
+{
+    public function preflight(Request $request, Response $response): ResponseInterface
+    {
+        return (new OriginAccessControlHandler())->originAccessControl($request, $response);
+    }
+}

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);
+        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) {
+        $repository = new WorkingHoursWeeklyViewRepository($this->databases);
-            throw new NotDatabasesException('Datenbank ist nicht Vorhanden');
+        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) {
+        $repository = new WorkingHoursMonthlyViewRepository($this->databases);
-            throw new NotDatabasesException('Datenbank ist nicht Vorhanden');
+        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) {
+        $repository = new WorkingHoursYearlyViewRepository($this->databases);
-            throw new NotDatabasesException('Datenbank ist nicht Vorhanden');
+        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/Middleware/ErrorHandler.php

@@ -84,7 +84,9 @@ class ErrorHandler
             json_encode($payload, JSON_UNESCAPED_UNICODE)
         );
 
-        return $response;
+        $originAccessControlHandler = new OriginAccessControlHandler();
+
+        return $originAccessControlHandler->originAccessControl($request, $response);
     }
 
 }

api/src/Middleware/OriginAccessControlHandler.php

@@ -0,0 +1,58 @@
+<?php
+
+
+namespace TorstenHettstedt\TimekeepingApi\Middleware;
+
+
+use Psr\Http\Message\ResponseInterface as Response;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Server\MiddlewareInterface;
+use Psr\Http\Server\RequestHandlerInterface as RequestHandler;
+use Slim\Routing\RouteContext;
+
+class OriginAccessControlHandler implements MiddlewareInterface
+{
+
+    /**
+     * Process an incoming server request.
+     *
+     * Processes an incoming server request in order to produce a response.
+     * If unable to produce the response itself, it may delegate to the provided
+     * request handler to do so.
+     */
+    public function process(Request $request, RequestHandler $handler): Response
+    {
+        $response = $handler->handle($request);
+        return $this->originAccessControl($request, $response);
+    }
+
+    public function originAccessControl(Request $request, Response $response): Response
+    {
+
+        $routeContext = RouteContext::fromRequest($request);
+        $routingResults = $routeContext->getRoutingResults();
+        $methods = $routingResults->getAllowedMethods();
+        $requestHeaders = $request->getHeaderLine('Access-Control-Request-Headers');
+
+        if ($this->testRoute($request)) {
+            $response = $response->withHeader('Access-Control-Allow-Origin', $this->buildOrigin($request));
+            $response = $response->withHeader('Access-Control-Allow-Methods', implode(',', $methods));
+            $response = $response->withHeader('Access-Control-Allow-Headers', $requestHeaders);
+
+            // Optional: Allow Ajax CORS requests with Authorization header
+            $response = $response->withHeader('Access-Control-Allow-Credentials', 'true');
+        }
+        return $response;
+    }
+
+    protected function testRoute(Request $request): bool
+    {
+        $corsAllowOriginRegex = $_ENV['CORS_ALLOW_ORIGIN_REGEX'] ?? '/https?:\/\/.*:.*/';
+        return preg_match($corsAllowOriginRegex, $this->buildOrigin($request));
+    }
+
+    protected function buildOrigin(Request $request): string
+    {
+        return $request->getHeaderLine('Origin') ?? '';
+    }
+}

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/_support/Helper/Api.php

@@ -32,4 +32,6 @@ class Api extends Module
         "message"   => "string",
         "path"      => "string",
     ];
+
+    const TEST_ORIGIN = 'http://localhost:1234';
 }

api/tests/api/Views/BrowseWorkingHoursMonthlyCest.php

@@ -8,13 +8,27 @@ use Helper\Api;
 
 class BrowseWorkingHoursMonthlyCest
 {
+    public static function preflight(ApiTester $I): void
+    {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
+        $I->haveHttpHeader('Access-Control-Request-Method', 'GET');
+        $I->sendOptions('/views/working-hours/monthly');
+        $I->seeResponseCodeIs(HttpCode::OK);
+        $I->seeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
+        $I->seeHttpHeader('Access-Control-Allow-Methods');
+        $I->seeHttpHeader('Access-Control-Allow-Headers');
+        $I->seeHttpHeader('Access-Control-Max-Age');
+    }
+
     /**
      * @param ApiTester $I
      */
     public function browseWorkingHoursView(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/views/working-hours/monthly');
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_VIEW_JSON_FORMAT);
     }

api/tests/api/Views/BrowseWorkingHoursWeeklyCest.php

@@ -8,13 +8,27 @@ use Helper\Api;
 
 class BrowseWorkingHoursWeeklyCest
 {
+    public static function preflight(ApiTester $I): void
+    {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
+        $I->haveHttpHeader('Access-Control-Request-Method', 'GET');
+        $I->sendOptions('/views/working-hours/weekly');
+        $I->seeResponseCodeIs(HttpCode::OK);
+        $I->seeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
+        $I->seeHttpHeader('Access-Control-Allow-Methods');
+        $I->seeHttpHeader('Access-Control-Allow-Headers');
+        $I->seeHttpHeader('Access-Control-Max-Age');
+    }
+
     /**
      * @param ApiTester $I
      */
     public function browseWorkingHoursView(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/views/working-hours/weekly');
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_VIEW_JSON_FORMAT);
     }

api/tests/api/Views/BrowseWorkingHoursYearlyCest.php

@@ -8,13 +8,27 @@ use Helper\Api;
 
 class BrowseWorkingHoursYearlyCest
 {
+    public static function preflight(ApiTester $I): void
+    {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
+        $I->haveHttpHeader('Access-Control-Request-Method', 'GET');
+        $I->sendOptions('/views/working-hours/yearly');
+        $I->seeResponseCodeIs(HttpCode::OK);
+        $I->seeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
+        $I->seeHttpHeader('Access-Control-Allow-Methods');
+        $I->seeHttpHeader('Access-Control-Allow-Headers');
+        $I->seeHttpHeader('Access-Control-Max-Age');
+    }
+
     /**
      * @param ApiTester $I
      */
     public function browseWorkingHoursView(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/views/working-hours/yearly');
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_VIEW_JSON_FORMAT);
     }

api/tests/api/WorkingHours/BrowseWorkingHoursCest.php

@@ -8,13 +8,27 @@ use Helper\Api;
 
 class BrowseWorkingHoursCest
 {
+    public static function preflight(ApiTester $I): void
+    {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
+        $I->haveHttpHeader('Access-Control-Request-Method', 'GET');
+        $I->sendOptions('/working-hours');
+        $I->seeResponseCodeIs(HttpCode::OK);
+        $I->seeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
+        $I->seeHttpHeader('Access-Control-Allow-Methods');
+        $I->seeHttpHeader('Access-Control-Allow-Headers');
+        $I->seeHttpHeader('Access-Control-Max-Age');
+    }
+
     /**
      * @param ApiTester $I
      */
     public function browseWorkingHours(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/working-hours');
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_JSON_FORMAT);
     }

api/tests/api/WorkingHours/CreateWorkingHoursCest.php

@@ -8,15 +8,29 @@ use Helper\Api;
 
 class CreateWorkingHoursCest
 {
+    public static function preflight(ApiTester $I): void
+    {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
+        $I->haveHttpHeader('Access-Control-Request-Method', 'POST');
+        $I->sendOptions('/working-hours');
+        $I->seeResponseCodeIs(HttpCode::OK);
+        $I->seeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
+        $I->seeHttpHeader('Access-Control-Allow-Methods');
+        $I->seeHttpHeader('Access-Control-Allow-Headers');
+        $I->seeHttpHeader('Access-Control-Max-Age');
+    }
+
     public function createWorkingHoursWithNewValidRecord(ApiTester $I): void
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPost('/working-hours', [
             'workingDay'  => '2020-04-01',
             'workingTime' => '08:00:00',
         ]);
         $I->seeResponseCodeIs(HttpCode::CREATED);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_JSON_FORMAT);
     }
@@ -26,11 +40,13 @@ class CreateWorkingHoursCest
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPost('/working-hours', [
             'workingDay'  => '2020-04-01',
             'workingTime' => 8.0,
         ]);
         $I->seeResponseCodeIs(HttpCode::BAD_REQUEST);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::ERROR_JSON_FORMAT);
     }
@@ -40,11 +56,13 @@ class CreateWorkingHoursCest
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPost('/working-hours', [
             'workingDay'  => '2020-01-15',
             'workingTime' => '08:00:00',
         ]);
         $I->seeResponseCodeIs(HttpCode::CONFLICT);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::ERROR_JSON_FORMAT);
     }

api/tests/api/WorkingHours/ReadWorkingHoursCest.php

@@ -8,18 +8,34 @@ use Helper\Api;
 
 class ReadWorkingHoursCest
 {
+    public static function preflight(ApiTester $I): void
+    {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
+        $I->haveHttpHeader('Access-Control-Request-Method', 'GET');
+        $I->sendOptions('/working-hours/2020-04-15');
+        $I->seeResponseCodeIs(HttpCode::OK);
+        $I->seeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
+        $I->seeHttpHeader('Access-Control-Allow-Methods');
+        $I->seeHttpHeader('Access-Control-Allow-Headers');
+        $I->seeHttpHeader('Access-Control-Max-Age');
+    }
+
     public function readExistingWorkingHours(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/working-hours/2020-01-15');
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_JSON_FORMAT);
     }
 
     public function readNotExistingWorkingHours(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/working-hours/2020-04-15');
         $I->seeResponseCodeIs(HttpCode::NOT_FOUND);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::ERROR_JSON_FORMAT);
     }

api/tests/api/WorkingHours/UpdateWorkingHoursCest.php

@@ -8,15 +8,29 @@ use Helper\Api;
 
 class UpdateWorkingHoursCest
 {
+    public static function preflight(ApiTester $I): void
+    {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
+        $I->haveHttpHeader('Access-Control-Request-Method', 'PUT');
+        $I->sendOptions('/working-hours/2020-01-15');
+        $I->seeResponseCodeIs(HttpCode::OK);
+        $I->seeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
+        $I->seeHttpHeader('Access-Control-Allow-Methods');
+        $I->seeHttpHeader('Access-Control-Allow-Headers');
+        $I->seeHttpHeader('Access-Control-Max-Age');
+    }
+
     public function updateWorkingHoursWithExistingValidRecord(ApiTester $I): void
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPut('/working-hours/2020-01-15', [
             'workingDay'  => '2020-01-15',
             'workingTime' => '10:00:00',
         ]);
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_JSON_FORMAT);
     }
@@ -25,11 +39,13 @@ class UpdateWorkingHoursCest
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPut('/working-hours/2020-04-15', [
             'workingDay'  => '2020-04-15',
             'workingTime' => '10:00:00',
         ]);
         $I->seeResponseCodeIs(HttpCode::NOT_FOUND);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::ERROR_JSON_FORMAT);
     }
@@ -38,11 +54,13 @@ class UpdateWorkingHoursCest
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPut('/working-hours/2020-01-15', [
             'workingDay'  => '2020-01-15',
             'workingTime' => 8.0,
         ]);
         $I->seeResponseCodeIs(HttpCode::BAD_REQUEST);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::ERROR_JSON_FORMAT);
     }

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, [
+        $this->logger = $this->makeEmpty(LoggerInterface::class, []);
-            'error' => Expected::once(),
-        ]);
 
         $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, [
+        $this->logger = $this->makeEmpty(LoggerInterface::class, []);
-            'error' => Expected::once(),
-        ]);
 
         $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,57 @@
+<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

@@ -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,215 @@
+<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 => {
+                    Controller.cancelActiveRecord();
+                    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) {
+                        Controller.listRecords();
+                    }
+                })
+                .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(() => {
+                    Controller.listRecords();
+                })
+                .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(() => {
+                    Controller.listRecords();
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        }
+    };
+    const Controller = {
+        'listRecords': () => {
+            Controller.cancelActiveRecord();
+            Records.browse();
+        },
+        'newRecord': () => {
+            activeRecord = {workingTime: '00:00:00'};
+            newRecord = true;
+        },
+        'saveRecord': () => {
+            if (newRecord === true) {
+                Records.add(activeRecord);
+            } else {
+                Records.update(activeRecord.workingDay, activeRecord);
+            }
+        },
+        'selectActiveRecord': record => Records.read(record.workingDay),
+        'cancelActiveRecord': () => {
+            activeRecord = null;
+            newRecord = false;
+        }
+    };
+    const initSite = () => {
+        Controller.listRecords()
+    };
+    initSite()
+</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={Controller.newRecord}>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={() => Controller.selectActiveRecord(record)}>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} type="date"
+                               id="workingDay" required pattern="\d{4}-\d{2}-\d{2}">
+                    </div>
+                    <div>
+                        <label for="workingTime">Arbeitszeit</label>
+                        <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
+                               id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+                    </div>
+                </fieldset>
+                <fieldset name="buttons">
+                    <button on:click={Controller.saveRecord}>Übernehmen
+                        <IconifyIcon icon={checkIcon} color="green"/>
+                    </button>
+                    <button on:click={Controller.cancelActiveRecord}>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} />