Merge pull request 'Deployment.' (#14) from deployment into master

Reviewed-on: #14

.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

api/.env.example

@@ -3,3 +3,6 @@ DATABASES_HOST=psql.domain.tld
 DATABASES_NAME=db
 DATABASES_USER=user
 DATABASES_PASS=1234
+
+## CORS Einstellungen
+CORS_ALLOW_ORIGIN_REGEX=/https?:\/\/localhost:\d+/

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/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/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)) {
+            //                     Stunden   Minuten   Sekunden
+            $accessControlMaxAge = 24      * 60      * 60;
+            $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);
+            $response = $response->withHeader('Access-Control-Max-Age', (string)$accessControlMaxAge);
+        }
+        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/Models/WorkingHoursView.php

@@ -91,12 +91,13 @@ class WorkingHoursView implements ModelInterface
                   'overtime'          => "string"
     ])] public function jsonSerialize(): array
     {
+        $formatOvertime = (($this->getOvertime()->invert === 1) ? '-' : '') . '%H:%I:%S';
         return [
             'period'            => $this->getPeriod()->format($this->getPeriodDesignation()->getValue()),
             'periodDesignation' => strtolower($this->getPeriodDesignation()->getKey()),
             'workingDays'       => $this->getWorkingDays(),
             'totalHours'        => $this->getTotalHours()->format('%H:%I:%S'),
-            'overtime'          => $this->getOvertime()->format('%H:%I:%S')
+            'overtime'          => $this->getOvertime()->format($formatOvertime)
         ];
     }
 }

api/src/Repositories/WorkingHoursRepository.php

@@ -44,7 +44,7 @@ class WorkingHoursRepository implements RepositoryReaderInterface, RepositoryWri
     public function findAll(): array
     {
         $models = [];
-        $stmt = $this->database->prepare('select "Datum" as "workingDay", "Arbeitszeit" as "workingTime" from public."Arbeitszeiten"');
+        $stmt = $this->database->prepare('select "Datum" as "workingDay", "Arbeitszeit" as "workingTime" from public."Arbeitszeiten" order by "Datum"');
         $stmt->execute();
         while ($row = $stmt->fetch()) {
             $model = new WorkingHours();

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/Middleware/ErrorHandlerTest.php

@@ -12,6 +12,9 @@ use Psr\Http\Message\StreamInterface;
 use Psr\Log\LoggerInterface;
 use Slim\App;
 use Slim\Exception\HttpException;
+use Slim\Interfaces\RouteParserInterface;
+use Slim\Routing\RouteContext;
+use Slim\Routing\RoutingResults;
 use TorstenHettstedt\TimekeepingApi\Middleware\ErrorHandler;
 
 class ErrorHandlerTest extends Unit
@@ -28,6 +31,7 @@ class ErrorHandlerTest extends Unit
     protected function _before(): void
     {
         parent::_before();
+        /** @noinspection PhpFieldAssignmentTypeMismatchInspection */
         $this->app = $this->makeEmpty(App::class, [
             'getResponseFactory' => $this->makeEmpty(ResponseFactoryInterface::class, [
                 'createResponse' => $this->makeEmpty(ResponseInterface::class, [
@@ -40,7 +44,16 @@ class ErrorHandlerTest extends Unit
                 ]),
             ]),
         ]);
-        $this->request = $this->makeEmpty(ServerRequestInterface::class);
+        /** @noinspection PhpFieldAssignmentTypeMismatchInspection */
+        $this->request = $this->makeEmpty(ServerRequestInterface::class, [
+            'getAttribute' => function($name) {
+                return match ($name) {
+                    RouteContext::ROUTE_PARSER => $this->makeEmpty(RouteParserInterface::class),
+                    RouteContext::ROUTING_RESULTS => $this->makeEmpty(RoutingResults::class),
+                    default => null,
+                };
+            }
+        ]);
     }
 
     /**
@@ -48,11 +61,13 @@ class ErrorHandlerTest extends Unit
      */
     public function testUseWithLogger(): void
     {
+        /** @noinspection PhpFieldAssignmentTypeMismatchInspection */
         $this->exception = $this->make(Exception::class, [
             'message' => '',
             'code'    => 400,
             'file'    => '/path(to/file',
         ]);
+        /** @noinspection PhpFieldAssignmentTypeMismatchInspection */
         $this->logger = $this->makeEmpty(LoggerInterface::class, [
             'error' => Expected::once(),
         ]);
@@ -66,12 +81,14 @@ class ErrorHandlerTest extends Unit
      */
     public function testUseWithHttpException(): void
     {
+        /** @noinspection PhpFieldAssignmentTypeMismatchInspection */
         $this->exception = $this->make(HttpException::class, [
             'message' => '',
             'code'    => 400,
             'file'    => '/path(to/file',
             'getTitle'   => Expected::once('The Title'),
         ]);
+        /** @noinspection PhpFieldAssignmentTypeMismatchInspection */
         $this->logger = $this->makeEmpty(LoggerInterface::class, []);
 
         $middleWare = new ErrorHandler($this->app);
@@ -84,11 +101,13 @@ class ErrorHandlerTest extends Unit
      */
     public function testUseWithGeneralException(): void
     {
+        /** @noinspection PhpFieldAssignmentTypeMismatchInspection */
         $this->exception = $this->make(Exception::class, [
             'message' => '',
             'code'    => 400,
             'file'    => '/path(to/file',
         ]);
+        /** @noinspection PhpFieldAssignmentTypeMismatchInspection */
         $this->logger = $this->makeEmpty(LoggerInterface::class, []);
 
         $middleWare = new ErrorHandler($this->app);

api/tests/unit/Models/WorkingHoursViewTest.php

@@ -17,13 +17,15 @@ class WorkingHoursViewTest extends Unit
      */
     public function workingHoursProvider(): array
     {
+        $date = new DateTime('2020-11-30');
+        $work_days = 15;
+        $total_hours = new DateInterval("PT32H22M");
+        $overtime = new DateInterval("PT22M");
+        $absence_time = clone $overtime;
+        $absence_time->invert = 1;
         return [
             [
-                new DateTime('2020-11-30'),
-                PeriodDesignationEnum::WEEKLY(),
-                15,
-                new DateInterval("PT32H22M"),
-                new DateInterval("PT22M"),
+                $date, PeriodDesignationEnum::WEEKLY(), $work_days, $total_hours, $overtime,
                 [
                     'period'            => '2020#49',
                     'periodDesignation' => 'weekly',
@@ -33,11 +35,17 @@ class WorkingHoursViewTest extends Unit
                 ],
             ],
             [
-                new DateTime('2020-11-30'),
-                PeriodDesignationEnum::MONTHLY(),
-                15,
-                new DateInterval("PT32H22M"),
-                new DateInterval("PT22M"),
+                $date, PeriodDesignationEnum::WEEKLY(), $work_days, $total_hours, $absence_time,
+                [
+                    'period'            => '2020#49',
+                    'periodDesignation' => 'weekly',
+                    'workingDays'       => 15,
+                    'totalHours'        => '32:22:00',
+                    'overtime'          => '-00:22:00'
+                ],
+            ],
+            [
+                $date, PeriodDesignationEnum::MONTHLY(), $work_days, $total_hours, $overtime,
                 [
                     'period'            => '2020-11',
                     'periodDesignation' => 'monthly',
@@ -47,12 +55,17 @@ class WorkingHoursViewTest extends Unit
                 ],
             ],
             [
-                new DateTime('2020-11-30'),
-                PeriodDesignationEnum::YEARLY(),
-                15,
-                new DateInterval("PT32H22M"),
-                new DateInterval("PT22M"),
+                $date, PeriodDesignationEnum::MONTHLY(), $work_days, $total_hours, $absence_time,
                 [
+                    'period'            => '2020-11',
+                    'periodDesignation' => 'monthly',
+                    'workingDays'       => 15,
+                    'totalHours'        => '32:22:00',
+                    'overtime'          => '-00:22:00'
+                ],
+            ],
+            [
+                $date, PeriodDesignationEnum::YEARLY(), $work_days, $total_hours, $overtime, [
                     'period'            => '2020',
                     'periodDesignation' => 'yearly',
                     'workingDays'       => 15,
@@ -60,6 +73,15 @@ class WorkingHoursViewTest extends Unit
                     'overtime'          => '00:22:00'
                 ],
             ],
+            [
+                $date, PeriodDesignationEnum::YEARLY(), $work_days, $total_hours, $absence_time, [
+                    'period'            => '2020',
+                    'periodDesignation' => 'yearly',
+                    'workingDays'       => 15,
+                    'totalHours'        => '32:22:00',
+                    'overtime'          => '-00:22:00'
+                ],
+            ],
         ];
     }
 

compose.yml

@@ -24,3 +24,9 @@ services:
     volumes:
       - ./api:/var/www
       - logs:/var/www/logs
+  ui:
+      build: ./ui/
+      ports:
+          - 80:80
+      depends_on:
+          - api

deploy.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+
+install_api_dependence() {
+    cd api/ || exit 2
+    composer install
+    cd ..
+}
+
+build_ui() {
+    cd ui/ || exit 2
+    npm run build
+    cd ..
+}
+
+test_unit() {
+    pwd
+    cd api/ || exit 2
+    ./vendor/bin/codecept run unit
+    cd ..
+}
+
+test_api() {
+    cd api/ || exit 2
+    ./vendor/bin/codecept run api
+    cd ..
+}
+
+composer_run() {
+    docker-compose up -d
+}
+
+install_api_dependence && build_ui && test_unit && composer_run && test_api

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/Dockerfile

@@ -0,0 +1,3 @@
+FROM httpd:2.4
+
+COPY ./public/ /usr/local/apache2/htdocs/

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

@@ -0,0 +1,22 @@
+<!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/public/less/global.less

@@ -0,0 +1,19 @@
+// Einstellungen auf die Grundlagen zurücksetzen,
+// beinhaltet auch Einstellungen für die neuen HTML5-Tags
+//noinspection CssUnknownTarget
+@import "meyer_resets.css";
+// Import und Einbindung der Zeichensätze
+@import "lesslib/fonts.less";
+// Bestimmung der Farben
+@import "lesslib/colors.less";
+// Mixins des Layouts
+@import "lesslib/mixins.less";
+// Layout-Unabhängige Mixins
+@import "lesslib/mixins.framework.less";
+// Bestimmung des grundsätzlichen Erscheinungsbildes der einzelnen Elemente,
+// einschließlich des Hauptbereiches
+@import "lesslib/basics.less";
+// Darstellung unabhängig der Darstellungsgrößen
+@import "lesslib/layout.less";
+// Darstellung in den verschiedenen Ansichtsgrößen
+@import "lesslib/media_queries.less";

ui/public/less/lesslib/basics.less

@@ -0,0 +1,76 @@
+html {
+    font-size: 100%;
+}
+
+body {
+    color: #000;
+    font-size: 1em;
+    font-family: OpenSans, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
+    text-align: left;
+    background-color: #fff;
+}
+
+strong, b {
+    font-weight: bold;
+}
+
+em, i {
+    font-style: italic;
+}
+
+small {
+    font-size: 0.8rem;
+}
+
+section article {
+    font-size: 95%;
+    p, ul, ol, dl {
+        line-height: 1.5em;
+        .hyphens();
+        font-size: 1.00em;
+    }
+    p {
+        text-align: justify;
+    }
+    ul, ol {
+        li {
+            list-style: initial;
+        }
+    }
+    dl {
+        dt {
+            font-weight: 600;
+        }
+    }
+    h1, h2, h3 {
+        font-weight: bold;
+    }
+    h1 {
+        font-size: 1.50em;
+    }
+    h2 {
+        font-size: 1.30em;
+    }
+    h3 {
+        font-size: 1.20em;
+    }
+    table {
+        colgroup:not(:first-child) col:first-child{
+            border-left: solid thin;
+        }
+        thead {
+            th {
+                font-size: 100%;
+                font-weight: bold;
+            }
+        }
+    }
+    form {
+        fieldset {
+            legend {
+                font-size: 1.30em;
+                font-weight: bold;
+            }
+        }
+    }
+}

ui/public/less/lesslib/colors.less

@@ -0,0 +1,14 @@
+/**
+Definition der Farben
+*/
+
+@hueMain: 35;
+@hueSub: 215;
+
+@mainColor: hsl(@hueMain, 90%, 29%);
+@redColor: hsl(0, 90%, 29%);
+@mainColorDark: darken(@mainColor,66%,relativ);
+@mainColorLight: lighten(@mainColor,66%,relativ);
+@subColor: hsl(@hueSub, 90%, 29%);
+@subColorDark: darken(@subColor,66%,relativ);
+@subColorLight: lighten(@subColor,66%,relativ);

ui/public/less/lesslib/fonts.less

@@ -0,0 +1,43 @@
+@font-face {
+    font-family: OpenSans;
+    src: url(../fonts/opensans-regular.eot);
+    src: url(../fonts/opensans-regular.eot?#iefix) format("embedded-opentype"),
+        url(../fonts/opensans-regular.woff) format("woff"),
+        url(../fonts/opensans-regular.ttf) format("truetype"),
+        url(../fonts/opensans-regular.svg#open_sansregular) format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: OpenSans;
+    src: url(../fonts/opensans-italic.eot);
+    src: url(../fonts/opensans-italic.eot?#iefix) format("embedded-opentype"),
+        url(../fonts/opensans-italic.woff) format("woff"),
+        url(../fonts/opensans-italic.ttf) format("truetype"),
+        url(../fonts/opensans-italic.svg#open_sansitalic) format("svg");
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: OpenSans;
+    src: url(../fonts/opensans-bold.eot);
+    src: url(../fonts/opensans-bold.eot?#iefix) format("embedded-opentype"),
+        url(../fonts/opensans-bold.woff) format("woff"),
+        url(../fonts/opensans-bold.ttf) format("truetype"),
+        url(../fonts/opensans-bold.svg#open_sansbold) format("svg");
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: OpenSans;
+    src: url(../fonts/opensans-bolditalic.eot);
+    src: url(../fonts/opensans-bolditalic.eot?#iefix) format("embedded-opentype"),
+        url(../fonts/opensans-bolditalic.woff) format("woff"),
+        url(../fonts/opensans-bolditalic.ttf) format("truetype"),
+        url(../fonts/opensans-bolditalic.svg#open_sansbold_italic) format("svg");
+    font-weight: bold;
+    font-style: italic;
+}

ui/public/less/lesslib/layout.less

@@ -0,0 +1,153 @@
+@breiteMainBereich: 70rem;
+@breiteTextBereich: 60rem;
+@breiteNavBereich: @breiteMainBereich - @breiteTextBereich;
+
+html {
+    body {
+        background: @mainColorLight;
+        > header, > footer {
+            color: @mainColorDark;
+            background: @mainColor;
+            font-family: serif;
+            h1 {
+                font-size: 3rem;
+                text-align: center;
+            }
+            p {
+                text-indent: inherit;
+                &:first-letter {
+                    font-size: inherit;
+                }
+                font-style: italic;
+            }
+        }
+        > header h1 {
+            margin: 1rem auto;
+        }
+        > footer {
+            color: contrast(@mainColorDark);
+        }
+        & > nav {
+            ul {
+                background: darken(@mainColorLight,33%,relativ);
+                li {
+                    font-weight: bold;
+                    &:not(:first-child) {
+                        border-left: @mainColorDark solid thin;
+                    }
+                    a {
+                        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);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+main {
+    * {
+        border-style: none;
+        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 {
+                    td, th {
+                        border-bottom: @mainColor solid thin;
+                    }
+                }
+            };
+            tbody {
+                td.absence-time {
+                    color: @redColor;
+                    text-decoration-line: underline;
+                    text-decoration-style: dashed;
+                }
+            }
+        }
+        form {
+            @formLabelWidth: 10rem;
+            @formItemWidth: 40rem;
+            fieldset {
+                width: @formItemWidth + @formLabelWidth + 2rem;
+                margin: 1rem auto;
+                border-style: solid ;
+                border-color: @mainColor;
+                padding: @sectionMargin;
+                &.tasten {
+                    border: none;
+                    background-color: @mainColorLight;
+                }
+                legend {
+                    margin: @sectionMargin;
+                    margin-left: @sectionMargin * 2;
+                }
+                div {
+                    &  > label {
+                        width: @formLabelWidth;
+                        display: inline-block;
+                        margin: 0.5rem;
+                    }
+                    input {
+                        display: inline-block;
+                        width: @formItemWidth;
+                        padding: 0.25rem;
+                        margin-bottom: 1.0rem;
+                        border-style:  solid;
+                        border-width: thin;
+                    }
+                }
+            }
+        }
+        button {
+            .button(@mainColor, spin(lighten(@mainColor,66%,relativ),@subColor));
+            &.sub-button {
+                .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 ;
+                font-style: italic;
+                font-size: 85%;
+            }
+            nav li {
+                padding: 0.5rem;
+            }
+            border-bottom-style: solid;
+        }
+    }
+}

ui/public/less/lesslib/media_queries.less

@@ -0,0 +1,306 @@
+//Media Queries
+
+@media print {
+    * {
+        font-size: 10pt;
+    }
+    header, footer, main, nav, aside {
+        body > & {
+            width: 19cm;
+            margin: auto;
+            .border-box();
+        }
+    }
+    header, footer{
+        padding: 0.5rem;
+        ;
+    }
+    body {
+        & > header {
+            font-size: 200%;
+            font-weight: bolder;
+        }
+        & > nav, > header {
+            display: none;
+        }
+    }
+    main {
+        padding: 1.5rem 0.5rem 3.25rem;
+        .flexKinder(flow,'row');
+        width: @breiteTextBereich;
+        section {
+            padding: 0 0.5rem;
+            h1, h2, p {
+                margin-bottom: 1rem;
+            }
+            footer {
+                padding: 0;
+                p {
+                    padding: 0.5rem;
+                    font-size: 85%;
+                    margin-bottom: 0;
+                }
+            }
+            article.liste {
+                page-break-after: always;
+            }
+        }
+        h1, h2 {
+            margin-left: 5em;
+        }
+        h1 {
+            font-size: 2em;
+        }
+        h2 {
+            font-size: 1.75em;
+        }
+        table {
+            margin: auto;
+            td, th {
+                padding: 0.5rem;
+                collapse: true;
+            }
+        }
+    }
+    aside {
+        padding-top: 2rem;
+        .flexKinder(flow,'row');
+        width: @breiteNavBereich;
+    }
+}
+
+@media screen and (min-width: 831px) {
+    header, footer, main, nav, aside {
+        body > & {
+            width: @breiteMainBereich;
+            margin: auto;
+            .border-box();
+        }
+    }
+    header, footer{
+        padding: 0.5rem;
+    }
+    body {
+        & > header {
+            font-size: 200%;
+            font-weight: bolder;
+        }
+        & > nav {
+            ul {
+                .flexEltern();
+                margin: 0;
+                li {
+                    display: inline-block;
+                    height: 1.5rem;
+                    padding: 0.5rem 1rem;
+                }
+            }
+        }
+    }
+    main {
+        padding: 1.5rem 0.5rem 3.25rem;
+        .flexKinder(flow,'row');
+        width: @breiteTextBereich;
+        section {
+            padding: 0 0.5rem;
+            h1, h2, p {
+                margin-bottom: 1rem;
+            }
+            footer {
+                padding: 0;
+                p {
+                    padding: 0.5rem;
+                    font-size: 85%;
+                    margin-bottom: 0;
+                }
+            }
+        }
+        h1, h2 {
+            margin-left: 5em;
+        }
+        h1 {
+            font-size: 2em;
+        }
+        h2 {
+            font-size: 1.75em;
+        }
+        table {
+            margin: auto;
+            td, th {
+                padding: 0.5rem;
+            }
+        }
+    }
+    aside {
+        padding-top: 2rem;
+        .flexKinder(flow,'row');
+        width: @breiteNavBereich;
+    }
+}
+
+@media screen and (max-width: 830px) {
+    html body {
+        @boxHeight: 5rem;
+        & > header {
+            height: @boxHeight;
+            font-size: @boxHeight;
+            text-align: center;
+            padding: 1rem;
+        }
+        & > footer {
+            padding: 1rem;
+        }
+        & > nav {
+            ul {
+                li {
+                    display: inline-block;
+                    border: none;
+                    width: auto;
+                    height: 1.5em;
+                    padding-top: 0.25em;
+                    a {
+                        padding: 0.75rem;
+                    }
+                    &:not(:first-child) {
+                        border-left: none;
+                    }
+                }
+            }
+        }
+        main section {
+            header {
+                padding: 0 0.5rem;
+                h1, h2, p {
+                    margin-bottom: 1rem;
+                }
+                h1, h2 {
+                    margin-left: 5em;
+                }
+                h1 {
+                    font-size: 2em;
+                }
+                h2 {
+                    font-size: 1.75em;
+                }
+            }
+            form {
+                @formLabelWidth: 10rem;
+                @formItemWidth: 40rem;
+                @sectionMargin: 1rem;
+                margin: @sectionMargin;
+                fieldset {
+                    width: auto;
+                    margin: 1rem auto;
+                    padding: @sectionMargin;
+                    legend {
+                        margin: @sectionMargin;
+                        margin-left: @sectionMargin * 2;
+                    }
+                    div {
+                        &  > label {
+                            width: auto;
+                            display: inline-block;
+                            margin: 0.5rem;
+                        }
+                        input, textarea {
+                            display: inline-block;
+                            width: auto;
+                            padding: 0.25rem;
+                            margin: 0.5rem;
+                            margin-bottom: 1.0rem;
+                            border-style:  solid;
+                            border-width: thin;
+                        }
+                        div.radio-button {
+                            padding-left: 20%;
+                            label, input {
+                                display: inline;
+                                width: auto;
+                            }
+                            input {
+                                margin-top: inherit;
+                                margin-right: 1rem;
+                                margin-left: 1rem;
+                                margin-bottom: inherit;
+                            }
+                        }
+                        textarea {
+                            height: 10rem;
+                        }
+                        ul.suche {
+                            width: 30rem;
+                            margin-left: @formLabelWidth + 1.5rem;
+                            margin-top: -1rem;
+                            background: white;
+                            position: absolute;
+                            border: solid thin;
+                            li {list-style: none;
+                                text-indent: 0;
+                                cursor: pointer;
+                                &:hover {
+                                    background: @mainColorLight;
+                                    color: @mainColor;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+        }
+        table {
+            width: 90%;
+            margin: 5%;
+            td, th {
+                padding: 0.25rem;
+            }
+            colgroup:not(:first-child) col:first-child{
+                border-left: solid thin;
+            }
+            thead {
+                th {
+                    font-size: 100%;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 720px) {
+    html body {
+        @boxHeight: 2.5rem;
+        & > header {
+            height: @boxHeight;
+            font-size: @boxHeight;
+            text-align: center;
+            padding: 1rem;
+        }
+
+        & > nav {
+            .hamburgerMenu();
+        }
+        main section header {
+            h1, h2 {
+                text-align: center;
+                margin: 0.5rem auto;
+            }
+        }
+        table {
+            width: 100%;
+            margin: 1rem 0;
+            td, th {
+                padding: 0.25rem;
+            }
+            colgroup:not(:first-child) col:first-child{
+                border-left: solid thin;
+            }
+            thead {
+                th {
+                    font-size: 100%;
+                    font-weight: bold;
+                    .hyphens();
+                }
+            }
+        }
+    }
+}

ui/public/less/lesslib/mixins.framework.less

@@ -0,0 +1,145 @@
+.hyphens() {
+	-webkit-hyphens: auto;
+	-moz-hyphens: auto;
+	hyphens: auto;
+}
+
+.border-box() {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.vertical-gradient(@stop1, @stop2) {
+	.gradient(0deg, @stop1, @stop2);
+}
+
+.horizontal-gradient(@stop1, @stop2) {
+	.gradient(-90deg, @stop1, @stop2);
+}
+
+.gradient(@winkel, @stop1, @stop2) {
+	@winkelOld: @winkel + 90deg;
+	@groundColor: @stop2;
+	background: @groundColor -moz-linear-gradient(@winkelOld, @stop2, @stop1);
+	background: @groundColor -webkit-linear-gradient(@winkelOld, @stop2, @stop1);
+	background: @groundColor -o-linear-gradient(@winkelOld, @stop2, @stop1);
+	background: @groundColor -ms-linear-gradient(@winkelOld, @stop2, @stop1);
+	background: @groundColor linear-gradient(@winkel, @stop2, @stop1);
+	background-repeat: no-repeat;
+}
+
+.box-shadow(...) {
+	-webkit-box-shadow: @arguments;
+	-moz-box-shadow: @arguments;
+	box-shadow: @arguments;
+}
+
+.border-radius(...) {
+	-webkit-border-radius: @arguments;
+	-moz-border-radius: @arguments;
+	border-radius: @arguments;
+}
+
+.nowrap() {
+	display: block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.hamburgerMenu() {
+	color: white;
+	width: 3rem;
+	height: 2rem;
+	top: 0.25rem;
+	left: 0.25rem;
+	.border-radius(4px);
+	border: none;
+	.vertical-gradient(@mainColorDark; @mainColor);
+	> ul {
+		height: auto;
+		width: auto;
+		position: absolute;
+		left: 0;
+		top: 100%;
+		background: fade(@mainColorDark,80%);
+		.border-radius(5px);
+		display: none;
+		> li {
+			display: block;
+			text-align: left;
+			line-height: normal;
+			border: none;
+			&:not(:first-child) {
+				border-top: 1px #888 solid;
+			}
+			a {
+				.nowrap();
+				display: block;
+				height: auto;
+				width: auto;
+				padding: 0.5rem 1rem;
+				color: white;
+				&:hover,
+					&:focus {
+					color: white;
+					.vertical-gradient(@mainColorLight; @mainColor);
+				}
+			}
+			&:first-child {
+				a {
+					.border-radius( 5px 5px 0 0 );
+				}
+			}
+			&:last-child {
+				a {
+					.border-radius( 0 0 5px 5px );
+				}
+			}
+		}
+	}
+	&:hover, &:focus, &:active, &:checked {
+		ul {
+			display: block;
+		}
+	}
+	&:before {
+		content: "\2261";
+		font-size: 2rem;
+		text-align: center;
+		line-height: 0.8em;
+		display: block;
+		cursor: pointer;
+	}
+}
+
+.flexEltern() {
+	display:-ms-flexbox;
+	display: flexbox;
+	display: -webkit-flex;
+	display: flex;
+}
+
+.flexEltern(column) {
+	display:-ms-flexbox;
+	display: flexbox;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: column;
+	-ms-flex-direction: column;
+	flex-direction: column;
+}
+
+.flexKinder(flow, @rest...) {
+	-webkit-flex-flow: @rest;
+	-ms-flex-flow: @rest;
+	flex-flow: @rest;
+}
+
+.flexKinder(glow, @num) {
+	-webkit-flex-grow: @num;
+	-ms-flex: @num;
+	flex: @num;
+	flex-grow: @num;
+}

ui/public/less/lesslib/mixins.less

@@ -0,0 +1,16 @@
+.button(@color, @colorFont) {
+    @colorBackground: @color;
+    @colorBackgroundLight: lighten(@colorBackground,50%,relativ);
+    @colorShadow: fade(@colorBackground,50%);
+    height: 2.5em;
+    .border-radius(1.25em);
+    padding: 0.5em 1.25em;
+    .vertical-gradient(@colorBackgroundLight, @colorBackground);
+    .box-shadow(0.1em 0.2em 0.5em @colorShadow);
+    color: @colorFont;
+    font-weight: bold;
+    &:hover {
+        .vertical-gradient(@colorBackground, @colorBackgroundLight);
+    }
+    margin: 0.25rem;
+}

ui/public/less/lesslib/print/basics.less

@@ -0,0 +1,80 @@
+html {
+    font-size: 100%;
+}
+
+body {
+    color: #000;
+    font-size: 1em;
+    font-family: OpenSans, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
+    text-align: left;
+    background-color: #fff;
+}
+
+strong, b {
+    font-weight: bold;
+}
+
+em, i {
+    font-style: italic;
+}
+
+small {
+    font-size: 0.8rem;
+}
+
+section article {
+    font-size: 95%;
+    p, ul, ol, dl {
+        line-height: 1.5em;
+        //noinspection TaskProblemsInspection,LessResolvedByNameOnly
+        .hyphens();
+        font-size: 1.00em;
+    }
+    p {
+        text-align: justify;
+    }
+    ul, ol {
+        li {
+            list-style: initial;
+        }
+    }
+    dl {
+        dt {
+            font-weight: 600;
+        }
+    }
+    h1, h2, h3 {
+        font-weight: bold;
+    }
+    h1 {
+        font-size: 1.50em;
+    }
+    h2 {
+        font-size: 1.30em;
+    }
+    h3 {
+        font-size: 1.20em;
+    }
+    table {
+        thead {
+            th {
+                font-size: 100%;
+                font-weight: bold;
+            }
+        }
+    }
+    form {
+        fieldset {
+            legend {
+                font-size: 1.30em;
+                font-weight: bold;
+            }
+            div.zelle > label {
+
+            }
+        }
+    }
+    &.http-error {
+        display: none;
+    }
+}

ui/public/less/lesslib/print/colors.less

@@ -0,0 +1,13 @@
+/**
+Definition der Farben
+*/
+
+@hueMain: 180;
+@hueSub: 60;
+
+@mainColor: hsl(@hueMain, 90%, 29%);
+@mainColorDark: darken(@mainColor,66%,relativ);
+@mainColorLight: lighten(@mainColor,66%,relativ);
+@subColor: hsl(@hueSub, 90%, 29%);
+@subColorDark: darken(@subColor,66%,relativ);
+@subColorLight: lighten(@subColor,66%,relativ);

ui/public/less/lesslib/print/layout.less

@@ -0,0 +1,99 @@
+html {
+    body {
+        > header, > footer {
+            background: none;
+            font-family: serif;
+            h1 {
+                font-size: 3rem;
+                text-align: left;
+            }
+            p {
+                text-indent: inherit;
+                &:first-letter {
+                    font-size: inherit;
+                }
+                font-style: italic;
+            }
+        }
+        > header {
+            border-bottom: black solid thick;
+            h1 {
+                margin: 1rem;
+            }
+        }
+        > nav {
+            display: none;
+        }
+        > footer {
+            color: contrast(@mainColor);
+        }
+    }
+}
+
+main {
+    * {
+        border-style: none;
+        border-color: @mainColorDark;
+        border-width: medium;
+    }
+    section {
+        @sectionMargin: 1rem;
+        header {
+            text-align: center;
+        }
+        h1, h2 {
+            margin: @sectionMargin;
+        }
+        p {
+            margin: @sectionMargin;
+            text-indent: @sectionMargin * 2;
+        }
+        table {
+            colgroup:not(:first-child) col:first-child{
+                border-left: solid medium;
+            }
+            thead {
+                tr:last-child {
+                    td, th {
+                        border-bottom: @mainColorDark solid thick;
+                    }
+                }
+            }
+            tbody {
+                th {
+                    font-weight: bold;
+                    text-align: center;
+                    padding: 1rem 0.5rem;
+                }
+                th, td {
+                    padding: 0.5rem;
+                    border-bottom: solid thin;
+                }
+            }
+        }
+        form {
+            display: none;
+        }
+        button {
+            display: none;
+        }
+        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 ;
+                font-style: italic;
+                font-size: 85%;
+            }
+            border-bottom-style: solid;
+        }
+    }
+}

ui/public/less/print.less

@@ -0,0 +1,15 @@
+// Einstellungen auf die Grundlagen zurücksetzen,
+// beinhaltet auch Einstellungen für die neuen HTML5-Tags
+//noinspection CssUnknownTarget
+@import "meyer_resets.css";
+// Bestimmung der Farben
+@import "lesslib/colors.less";
+// Mixins des Layouts
+@import "lesslib/mixins.less";
+// Layout-Unabhängige Mixins
+@import "lesslib/mixins.framework.less";
+// Bestimmung des grundsätzlichen Erscheinungsbildes der einzelnen Elemente,
+// einschließlich des Hauptbereiches
+@import "lesslib/print/basics.less";
+// Darstellung unabhängig der Darstellungsgrößen
+@import "lesslib/print/layout.less";

ui/public/meyer_resets.css

@@ -0,0 +1,51 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+@media screen {
+    html, body, div, span, applet, object, iframe,
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+    a, abbr, acronym, address, big, cite, code,
+    del, dfn, em, img, ins, kbd, q, s, samp,
+    small, strike, strong, sub, sup, tt, var,
+    b, u, i, center,
+    dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend,
+    table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, canvas, details, embed,
+    figure, figcaption, footer, header, hgroup,
+    menu, nav, output, ruby, section, summary,
+    time, mark, audio, video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font: inherit;
+        font-size: 100%;
+        vertical-align: baseline;
+    }
+    /* HTML5 display-role reset for older browsers */
+    article, aside, details, figcaption, figure,
+    main, /* Korektur: Torsten Lücke 2016-09-01 */
+    footer, header, hgroup, menu, nav, section {
+        display: block;
+    }
+    body {
+        line-height: 1;
+    }
+    ol, ul {
+        list-style: none;
+    }
+    blockquote, q {
+        quotes: none;
+    }
+    blockquote:before, blockquote:after,
+    q:before, q:after {
+        content: '';
+        content: none;
+    }
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+}
+/* END:  meyer_ressets */

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 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/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,54 @@
+<script>
+    export let params;
+    console.log(params)
+    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;
+</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>
+                <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 params.records 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>
+            </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,216 @@
+<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': async record => {
+            console.log(record);
+            // noinspection JSUnresolvedVariable
+            await fetch(env.API_URL + '/working-hours', {
+                method: 'POST',
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'omit',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(record)
+            })
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Fail!');
+                    }
+                })
+                .then(() => {
+                    Controller.listRecords();
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        'update': async (date, record) => {
+            console.log(record);
+            // noinspection JSUnresolvedVariable
+            await fetch(env.API_URL + '/working-hours/' + date, {
+                method: 'PUT',
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'omit',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                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} type="button">Neuer Eintrag
+                            <IconifyIcon icon={documentIcon}/>
+                        </button>
+                    </fieldset>
+                </form>
+                <table>
+                    <colgroup>
+                        <col />
+                        <col />
+                        <col />
+                    </colgroup>
+                    <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)} type="button">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}-[0-1]\d-[0-3]\d\">
+                    </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} type="button">Übernehmen
+                        <IconifyIcon icon={checkIcon} color="green"/>
+                    </button>
+                    <button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">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} />