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

Reviewed-on: #14

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'),
+                $date, PeriodDesignationEnum::WEEKLY(), $work_days, $total_hours, $overtime,
-                PeriodDesignationEnum::WEEKLY(),
-                15,
-                new DateInterval("PT32H22M"),
-                new DateInterval("PT22M"),
                 [
                     'period'            => '2020#49',
                     'periodDesignation' => 'weekly',
@@ -33,11 +35,17 @@ class WorkingHoursViewTest extends Unit
                 ],
             ],
             [
-                new DateTime('2020-11-30'),
+                $date, PeriodDesignationEnum::WEEKLY(), $work_days, $total_hours, $absence_time,
-                PeriodDesignationEnum::MONTHLY(),
+                [
-                15,
+                    'period'            => '2020#49',
-                new DateInterval("PT32H22M"),
+                    'periodDesignation' => 'weekly',
-                new DateInterval("PT22M"),
+                    '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'),
+                $date, PeriodDesignationEnum::MONTHLY(), $work_days, $total_hours, $absence_time,
-                PeriodDesignationEnum::YEARLY(),
-                15,
-                new DateInterval("PT32H22M"),
-                new DateInterval("PT22M"),
                 [
+                    '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

ui/Dockerfile

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

ui/public/global.css

@@ -1 +0,0 @@
-

ui/public/index.html

@@ -10,7 +10,8 @@
 	<title>Svelte app</title>
 
     <link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel="stylesheet" href="/global.css">
+	<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>

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/src/components/App.svelte

@@ -45,22 +45,12 @@
 	addEventListener('pushstate', track);
 	addEventListener('popstate', track);
 
-
-    let r = {
-        "workingDay": "2020-01-15",
-        "workingTime": "09:00:00"
-    };
-    let records = {
-        "title" : "Einträge",
-        "records" : [r, r]
-    };
-
 	const router = Navaid('/')
 		.on('/', () => run(import('../routes/Home.svelte')))
 		.on('/views/weekly', () => run(import('../routes/WeeklyViews.svelte')))
 		.on('/views/monthly', () => run(import('../routes/MonthlyViews.svelte')))
 		.on('/views/yearly', () => run(import('../routes/YearlyViews.svelte')))
-		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte'), records))
+		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte')))
 		.listen();
 
 	onDestroy(router.unlisten);

ui/src/components/Nav.svelte

@@ -1,11 +1,11 @@
 <!--suppress HtmlUnknownTarget -->
 <nav>
 	<ul>
-		<li><a class="{ isActive('home') }" href="/">Home</a></li>
+		<li class="{ isActive('home') }"><a href="/">Home</a></li>
-		<li><a class="{ isActive('weekly') }" href="/views/weekly">Wochenansicht</a></li>
+		<li class="{ isActive('weekly') }"><a href="/views/weekly">Wochenansicht</a></li>
-		<li><a class="{ isActive('monthly') }" href="/views/monthly">Monatsansicht</a></li>
+		<li class="{ isActive('monthly') }"><a href="/views/monthly">Monatsansicht</a></li>
-		<li><a class="{ isActive('yearly') }" href="/views/yearly">Jahresansicht</a></li>
+		<li class="{ isActive('yearly') }"><a href="/views/yearly">Jahresansicht</a></li>
-		<li><a class="{ isActive('working-hours') }" href="/working-hours">Einträge</a></li>
+		<li class="{ isActive('working-hours') }"><a href="/working-hours">Einträge</a></li>
 	</ul>
 </nav>
 

ui/src/routes/Views.svelte

@@ -1,6 +1,14 @@
 <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>
@@ -16,6 +24,12 @@
             <p>Loading...</p>
         {:else}
             <table>
+                <colgroup>
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                </colgroup>
                 <thead>
                 <tr>
                     <th>Zeitraum</th>
@@ -30,7 +44,7 @@
                         <td>{record.period}</td>
                         <td>{record.workingDays}</td>
                         <td>{record.totalHours}</td>
-                        <td>{record.overtime}</td>
+                        <td class="{ isNegative(record.overtime) }">{cutMinusChar(record.overtime)}</td>
                     </tr>
                 {/each}
                 </tbody>

ui/src/routes/WorkingHours.svelte

@@ -24,7 +24,7 @@
                     return res.json();
                 })
                 .then(data => {
-                    activeRecord = null;
+                    Controller.cancelActiveRecord();
                     params.records = data;
                     params.isLoading = false;
                 })
@@ -45,26 +45,24 @@
                 .then(data => {
                     activeRecord = data;
                     if (date === null) {
-                        Records.browse();
+                        Controller.listRecords();
                     }
                 })
                 .catch(err => {
                     console.log(err);
                 });
         },
-        'add': record => {
+        'add': async record => {
             console.log(record);
             // noinspection JSUnresolvedVariable
-            fetch(env.API_URL + '/working-hours', {
+            await fetch(env.API_URL + '/working-hours', {
                 method: 'POST',
-                mode: 'no-cors',
+                mode: 'cors',
                 cache: 'no-cache',
-                credentials: 'same-origin',
+                credentials: 'omit',
                 headers: {
                     'Content-Type': 'application/json'
                 },
-                redirect: 'follow',
-                referrerPolicy: 'no-referrer',
                 body: JSON.stringify(record)
             })
                 .then(res => {
@@ -73,26 +71,23 @@
                     }
                 })
                 .then(() => {
-                    newRecord = false;
+                    Controller.listRecords();
-                    Records.browse();
                 })
                 .catch(err => {
                     console.log(err);
                 });
         },
-        'update': (date, record) => {
+        'update': async (date, record) => {
             console.log(record);
             // noinspection JSUnresolvedVariable
-            fetch(env.API_URL + '/working-hours/' + date, {
+            await fetch(env.API_URL + '/working-hours/' + date, {
                 method: 'PUT',
-                mode: 'no-cors',
+                mode: 'cors',
                 cache: 'no-cache',
-                credentials: 'same-origin',
+                credentials: 'omit',
                 headers: {
                     'Content-Type': 'application/json'
                 },
-                redirect: 'follow',
-                referrerPolicy: 'no-referrer',
                 body: JSON.stringify(record)
             })
                 .then(res => {
@@ -101,14 +96,39 @@
                     }
                 })
                 .then(() => {
-                    Records.browse();
+                    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>
@@ -127,12 +147,17 @@
                 <!--suppress HtmlUnknownTarget -->
                 <form action="/working-hours">
                     <fieldset>
-                        <button on:click={() => {activeRecord = {}; newRecord = true}}>Neuer Eintrag
+                        <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>
@@ -146,7 +171,7 @@
                             <td>{record.workingDay}</td>
                             <td>{record.workingTime}</td>
                             <td>
-                                <button on:click={() => Records.read(record.workingDay)}>Bearbeiten
+                                <button on:click={() => Controller.selectActiveRecord(record)} type="button">Bearbeiten
                                     <IconifyIcon icon={wrenchIcon}/>
                                 </button>
                             </td>
@@ -168,26 +193,20 @@
                 <fieldset name="record-data">
                     <div>
                         <label for="workingDay">Arbeitstag</label>
-                        <input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date"
+                        <input bind:value={activeRecord.workingDay} type="date"
-                               id="workingDay">
+                               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">
+                               id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
                     </div>
                 </fieldset>
                 <fieldset name="buttons">
-                    {#if newRecord === true}
+                    <button on:click={Controller.saveRecord} type="button">Übernehmen
-                        <button on:click={() => Records.add(activeRecord)}>Übernehmen
                         <IconifyIcon icon={checkIcon} color="green"/>
                     </button>
-                    {:else}
+                    <button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
-                        <button on:click={() => Records.update(activeRecord.workingDay, activeRecord)}>Übernehmen
-                            <IconifyIcon icon={checkIcon} color="green"/>
-                        </button>
-                    {/if}
-                    <button on:click={() => Records.read(null)}>Abbrechen
                         <IconifyIcon icon={xIcon}/>
                     </button>
                 </fieldset>