Merge branch 'feature-ui/pagination-tabellen'

# Conflicts:
#	ui/src/routes/WorkingHours/Formular.svelte
#	ui/src/routes/WorkingHours/Formular/ImportCsv.svelte

.gitignore

@@ -6,6 +6,7 @@
 .idea/**/workspace.xml
 .idea/**/tasks.xml
 .idea/**/usage.statistics.xml
+.idea/**/markdown.xml
 .idea/**/dictionaries
 .idea/**/shelf
 

api/composer.json

@@ -21,7 +21,8 @@
         "slim/psr7": "^1.3",
         "php-di/slim-bridge": "^3.1.0",
         "jetbrains/phpstorm-attributes": "^1.0.0",
-        "myclabs/php-enum": "^1.8.0"
+        "myclabs/php-enum": "^1.8.0",
+        "ext-pdo": "*"
     },
     "require-dev": {
         "phpstan/phpstan": "^0.12.80",

api/html/openapi.json

@@ -18,6 +18,15 @@
         "tags": [
           "Eintragungen Arbeitszeiten"
         ],
+        "description": "Liefert eine Liste der Einträge. Kann gefiltert werden und dadurch eine leere Liste zurückgeben",
+        "parameters": [
+            {
+                "$ref": "#/components/parameters/start-date"
+            },
+            {
+                "$ref": "#/components/parameters/end-date"
+            }
+        ],
         "responses": {
           "200": {
             "$ref": "#/components/responses/ListEntities"
@@ -259,6 +268,26 @@
           "type": "string",
           "format": "date"
         }
+      },
+      "start-date" : {
+        "description": "Filtert Liste ab Datum",
+        "name": "start-date",
+        "in" : "query",
+        "required": false,
+        "schema": {
+          "type": "string",
+          "format": "date"
+        }
+      },
+      "end-date" : {
+        "description": "Filtert Liste bis Datum",
+        "name": "end-date",
+        "in" : "query",
+        "required": false,
+        "schema": {
+          "type": "string",
+          "format": "date"
+        }
       }
     },
     "responses": {

api/src/Controller/WorkingHoursController.php

@@ -12,6 +12,7 @@ use Slim\Exception\HttpNotFoundException;
 use Slim\Psr7\Request;
 use Slim\Psr7\Response;
 use TorstenHettstedt\TimekeepingApi\Models\WorkingHours;
+use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryBadWhereDataException;
 use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryRecordAlreadyExistException;
 use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryRecordNotFoundException;
 use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursRepository;
@@ -50,13 +51,20 @@ class WorkingHoursController extends AbstractController
      * @return Response
      *
      * @throws HttpInternalServerErrorException
+     * @throws HttpBadRequestException
      * @noinspection PhpUnusedParameterInspection
      */
     public function browse(Request $request, Response $response, array $args): Response
     {
         $repository = new WorkingHoursRepository($this->databases);
+        $queryParams = $request->getQueryParams();
         try {
-            return $this->printResponse($response, $repository->findAll(), StatusCodeInterface::STATUS_OK);
+            return $this->printResponse($response, $repository->findFiltered(
+                $queryParams['start-date'] ?? null,
+                $queryParams['end-date'] ?? null
+            ), StatusCodeInterface::STATUS_OK);
+        } catch (RepositoryBadWhereDataException $exception) {
+            throw new HttpBadRequestException($request, 'Ein Wert für das Datum im Query ist ungültig', $exception);
         } catch (Exception $exception) {
             throw new HttpInternalServerErrorException($request, 'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
         }

api/src/Repositories/RepositoryBadWhereDataException.php

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

api/src/Repositories/WorkingHoursRepository.php

@@ -10,6 +10,7 @@ use Exception;
 use InvalidArgumentException;
 use PDO;
 use PDOException;
+use PDOStatement;
 use TorstenHettstedt\TimekeepingApi\Models\ModelInterface;
 use TorstenHettstedt\TimekeepingApi\Models\WorkingHours;
 
@@ -42,10 +43,33 @@ class WorkingHoursRepository implements RepositoryReaderInterface, RepositoryWri
      * @throws PDOException
      */
     public function findAll(): array
+    {
+        return $this->findFiltered(null, null);
+    }
+
+    /**
+     *
+     * Gibt alle vorhandenen Einträge zurück
+     *
+     * @param string|null $start
+     * @param string|null $end
+     *
+     * @return WorkingHours[]
+     * @throws Exception
+     */
+    public function findFiltered(?string $start, ?string $end): array
     {
         $models = [];
-        $stmt = $this->database->prepare('select "Datum" as "workingDay", "Arbeitszeit" as "workingTime" from public."Arbeitszeiten" order by "Datum"');
+        $stmt = $this->buildFindFilteredStatement($start, $end);
+        try {
             $stmt->execute();
+        } catch (PDOException $exception) {
+            if ($exception->getCode() === '22007' || $exception->getCode() === '22008') {
+                throw new RepositoryBadWhereDataException($exception);
+            }
+            throw $exception;
+        }
+
         while ($row = $stmt->fetch()) {
             $model = new WorkingHours();
             $model
@@ -56,6 +80,35 @@ class WorkingHoursRepository implements RepositoryReaderInterface, RepositoryWri
         return $models;
     }
 
+    protected function buildFilterString(?string $start, ?string $end): string
+    {
+        if (is_string($start) && is_string($end)) {
+            return 'where "Datum" >= :start AND "Datum" <= :end ';
+        }
+        if (is_string($start)) {
+            return 'where "Datum" >= :start ';
+        }
+        if (is_string($end)) {
+            return 'where "Datum" <= :end ';
+        }
+        return '';
+    }
+
+    protected function buildFindFilteredStatement(?string $start, ?string $end): ?PDOStatement
+    {
+        $query = 'select "Datum" as "workingDay", "Arbeitszeit" as "workingTime" from public."Arbeitszeiten" ';
+        $query .= $this->buildFilterString($start, $end);
+        $query .= 'order by "Datum"';
+        $stmt = $this->database->prepare($query);
+        if (is_string($start)) {
+            $stmt->bindParam(':start', $start);
+        }
+        if (is_string($end)) {
+            $stmt->bindParam(':end', $end);
+        }
+        return $stmt ?? null;
+    }
+
     /**
      * Gibt den Eintrag zurück, der durch die ID
      *

api/tests/api/WorkingHours/BrowseWorkingHoursCest.php

@@ -3,6 +3,7 @@
 namespace TorstenHettstedt\TimekeepingApi\Tests\Api\WorkingHours;
 
 use ApiTester;
+use Codeception\Example;
 use Codeception\Util\HttpCode;
 use Helper\Api;
 
@@ -22,14 +23,67 @@ class BrowseWorkingHoursCest
 
     /**
      * @param ApiTester $I
+     *
+     * @dataProvider validWorkingHoursFilterProvider
      */
-    public function browseWorkingHours(ApiTester $I): void
+    public function browseEmptyWorkingHours(ApiTester $I): void
     {
         $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
-        $I->sendGet('/working-hours');
+        $I->sendGet('/working-hours', ['start-date' => '2020-04-01', 'end-date' => '2020-04-30']);
+        $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
+        $I->seeResponseIsJson();
+        $I->seeResponseEquals('[]');
+    }
+
+    public function validWorkingHoursFilterProvider(): array
+    {
+        return [
+            [[null]],
+            [['start-date' => '2020-01-01', 'end-date' => '2020-01-08']],
+            [['start-date' => '2020-01-01', 'end-date' => '2020-04-30']],
+            [['start-date' => '2020-03-01', 'end-date' => '2020-03-07']],
+        ];
+    }
+
+    /**
+     * @param ApiTester $I
+     * @param Example   $example
+     *                          
+     * @dataProvider validWorkingHoursFilterProvider
+     */
+    public function browseWorkingHours(ApiTester $I, Example $example): void
+    {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
+        $I->sendGet('/working-hours', $example[0]);
         $I->seeResponseCodeIs(HttpCode::OK);
         $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_JSON_FORMAT);
     }
+
+    public function invalidWorkingHoursFilterProvider(): array
+    {
+        return [
+            ['2020-11-31'],
+            ['2020-11'],
+            ['2020'],
+        ];
+    }
+
+    /**
+     * @param ApiTester $I
+     * @param Example   $example
+     *
+     * @dataProvider invalidWorkingHoursFilterProvider
+     */
+    public function browseWorkingHoursWithWrongFilterDate(ApiTester $I, Example $example): void
+    {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
+        $I->sendGet('/working-hours', ['start-date' => $example[0]]);
+        $I->seeResponseCodeIs(HttpCode::BAD_REQUEST);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
+        $I->seeResponseIsJson();
+        $I->seeResponseMatchesJsonType(Api::ERROR_JSON_FORMAT);
+    }
 }

api/tests/unit/Controller/WorkingHoursControllerTest.php

@@ -2,6 +2,7 @@
 
 namespace TorstenHettstedt\TimekeepingApi\Tests\Unit\Controller;
 
+use Codeception\Example;
 use Codeception\Test\Unit;
 use Exception;
 use PDO;
@@ -37,13 +38,13 @@ class WorkingHoursControllerTest extends Unit
         /** @noinspection SpellCheckingInspection */
         $this->container = $this->makeEmpty(ContainerInterface::class, [
             'has' => true,
-            'get' => new PDO('pgsql:host=psql.torsten-hettstedt.net;port=5432;dbname=testdb;user=bruce;password=mypass')
+            'get' => new PDO('pgsql:host=psql.torsten-hettstedt.net;port=5432;dbname=testdb;user=bruce;password=mypass'),
         ]);
         $this->request = $this->makeEmpty(Request::class, [
             'getParsedBody' => [
                 'workingDay'  => self::EXISTING_DATE,
                 'workingTime' => self::EXISTING_INTERVAL,
-                ]
+            ],
         ]);
         $this->response = $this->makeEmpty(Response::class, [
             'getBody'    => $this->makeEmpty(StreamInterface::class, [
@@ -65,23 +66,202 @@ class WorkingHoursControllerTest extends Unit
     public function testConstructWithNonDatabase(): void
     {
         $this->container = $this->makeEmpty(ContainerInterface::class, [
-            'has' => false
+            'has' => false,
         ]);
         $this->expectException(NotDatabasesException::class);
         new WorkingHoursController($this->container);
     }
 
     /**
+     * @return array<int, array<int, array<string, string>>>
+     */
+    public function valideFilterDataProvider(): array
+    {
+        return [
+            [
+                [],
+            ],
+            [
+                [
+                    'start-date' => '2020-03-01',
+                    'end-date'   => '2020-03-31',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '2020-03-01',
+                ],
+            ],
+            [
+                [
+                    'end-date' => '2020-03-31',
+                ],
+            ],
+        ];
+    }
+
+    /**
+     * @param array<string, string> $queryParams
+     *
+     * @dataProvider valideFilterDataProvider
+     *
+     * @throws HttpInternalServerErrorException
      * @throws NotDatabasesException
      * @throws Exception
      */
-    public function testBrowse(): void
+    public function testBrowseWithValideParameter(array $queryParams): void
     {
+        $this->request = $this->makeEmpty(Request::class, [
+            'getQueryParams' => $queryParams,
+        ]);
         $controller = new WorkingHoursController($this->container);
         $response = $controller->browse($this->request, $this->response, []);
         $this->assertInstanceOf(Response::class, $response);
     }
 
+    /**
+     * @return array<int, array<int, array<string, string|null>>>
+     */
+    public function invalideFilterDataProvider(): array
+    {
+        return [
+            [
+                [
+                    'start-date' => '',
+                    'end-date'   => '',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '',
+                ],
+            ],
+            [
+                [
+                    'end-date' => '',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '2020-03-01',
+                    'end-date'   => '',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '',
+                    'end-date'   => '2020-03-31',
+                ],
+            ],
+            //
+            [
+                [
+                    'start-date' => '2020-03-00',
+                    'end-date'   => '2020-04-31',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '2020-03-00',
+                ],
+            ],
+            [
+                [
+                    'end-date' => '2020-04-31',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '2020-03-01',
+                    'end-date'   => '2020-04-31',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '2020-03-00',
+                    'end-date'   => '2020-03-31',
+                ],
+            ],
+            //
+            [
+                [
+                    'start-date' => '2020-03',
+                    'end-date'   => '2020-03',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '2020-03',
+                ],
+            ],
+            [
+                [
+                    'end-date' => '2020-03',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '2020-03-01',
+                    'end-date'   => '2020-03',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '2020-03',
+                    'end-date'   => '2020-03-31',
+                ],
+            ],
+            //
+            [
+                [
+                    'start-date' => '2020',
+                    'end-date'   => '2020',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '2020',
+                ],
+            ],
+            [
+                [
+                    'end-date' => '2020',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '2020-03-01',
+                    'end-date'   => '2020',
+                ],
+            ],
+            [
+                [
+                    'start-date' => '2020',
+                    'end-date'   => '2020-03-31',
+                ],
+            ],
+        ];
+    }
+
+    /**
+     * @param array<string, string> $queryParams
+     *
+     * @dataProvider invalideFilterDataProvider
+     *
+     * @throws HttpInternalServerErrorException
+     * @throws NotDatabasesException
+     * @throws Exception
+     */
+    public function testBrowseWithInvalideParameter(array $queryParams): void
+    {
+        $this->request = $this->makeEmpty(Request::class, [
+            'getQueryParams' => $queryParams,
+        ]);
+        $controller = new WorkingHoursController($this->container);
+        $this->expectException(HttpBadRequestException::class);
+        $controller->browse($this->request, $this->response, []);
+    }
+
     /**
      * @throws NotDatabasesException
      * @throws HttpBadRequestException
@@ -91,7 +271,7 @@ class WorkingHoursControllerTest extends Unit
     {
         $controller = new WorkingHoursController($this->container);
         $response = $controller->update($this->request, $this->response, [
-            'id' => self::EXISTING_DATE
+            'id' => self::EXISTING_DATE,
         ]);
         $this->assertInstanceOf(Response::class, $response);
     }
@@ -106,23 +286,23 @@ class WorkingHoursControllerTest extends Unit
         $controller = new WorkingHoursController($this->container);
         $this->expectException(HttpNotFoundException::class);
         $controller->update($this->request, $this->response, [
-            'id' => self::NEW_DATE
+            'id' => self::NEW_DATE,
         ]);
     }
 
     /**
      * @return string[][]
      */
-    public function invalidDataProvider(): array
+    public function invalidCreatDataProvider(): array
     {
         return [
             [
                 self::NEW_DATE,
-                '07:59'
+                '07:59',
             ],
             [
                 '2020-13-33',
-                self::NEW_INTERVAL
+                self::NEW_INTERVAL,
             ],
         ];
     }
@@ -131,7 +311,7 @@ class WorkingHoursControllerTest extends Unit
      * @param string $date
      * @param string $time
      *
-     * @dataProvider invalidDataProvider
+     * @dataProvider invalidCreatDataProvider
      *
      * @throws HttpBadRequestException
      * @throws HttpConflictRequestException
@@ -145,7 +325,7 @@ class WorkingHoursControllerTest extends Unit
             'getParsedBody' => [
                 'workingDay'  => $date,
                 'workingTime' => $time,
-            ]
+            ],
         ]);
         $controller = new WorkingHoursController($this->container);
         $this->expectException(HttpBadRequestException::class);
@@ -165,7 +345,7 @@ class WorkingHoursControllerTest extends Unit
             'getParsedBody' => [
                 'workingDay'  => self::NEW_DATE,
                 'workingTime' => self::NEW_INTERVAL,
-            ]
+            ],
         ]);
         $controller = new WorkingHoursController($this->container);
         $response = $controller->creat($this->request, $this->response, []);
@@ -185,7 +365,7 @@ class WorkingHoursControllerTest extends Unit
             'getParsedBody' => [
                 'workingDay'  => self::EXISTING_DATE,
                 'workingTime' => self::EXISTING_INTERVAL,
-            ]
+            ],
         ]);
         $controller = new WorkingHoursController($this->container);
         $this->expectException(HttpConflictRequestException::class);
@@ -201,7 +381,7 @@ class WorkingHoursControllerTest extends Unit
     {
         $controller = new WorkingHoursController($this->container);
         $response = $controller->read($this->request, $this->response, [
-            'id' => self::EXISTING_DATE
+            'id' => self::EXISTING_DATE,
         ]);
         $this->assertInstanceOf(Response::class, $response);
     }
@@ -216,7 +396,7 @@ class WorkingHoursControllerTest extends Unit
         $controller = new WorkingHoursController($this->container);
         $this->expectException(HttpNotFoundException::class);
         $controller->read($this->request, $this->response, [
-            'id' => self::NEW_DATE
+            'id' => self::NEW_DATE,
         ]);
     }
 }

api/tests/unit/Repositories/WorkingHoursRepositoryTest.php

@@ -2,6 +2,7 @@
 
 namespace TorstenHettstedt\TimekeepingApi\Tests\Unit\Repositories;
 
+use Codeception\Example;
 use Codeception\Test\Unit;
 use DateInterval;
 use DateTime;
@@ -10,6 +11,7 @@ use InvalidArgumentException;
 use PDO;
 use TorstenHettstedt\TimekeepingApi\Models\ModelInterface;
 use TorstenHettstedt\TimekeepingApi\Models\WorkingHours;
+use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryBadWhereDataException;
 use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryRecordAlreadyExistException;
 use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryRecordNotFoundException;
 use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursRepository;
@@ -34,7 +36,7 @@ class WorkingHoursRepositoryTest extends Unit
     /**
      * @throws Exception
      */
-    public function testFindAll(): void
+    public function testFindAllWithBlankParameter(): void
     {
         $repository = new WorkingHoursRepository($this->pdoObject);
         $models = $repository->findAll();
@@ -43,6 +45,81 @@ class WorkingHoursRepositoryTest extends Unit
         $this->assertCount(self::RECORDS_COUNT, $models);
     }
 
+    /**
+     * @return array<int, array<int|string|null>>
+     */
+    public function valideFilterParameter(): array
+    {
+        return [
+            [null,         null,         61,],
+            ['2020-04-01', null,          0,],
+            ['2020-04-01', '2020-04-30',  0,],
+            [null,         '2020-04-30', 61,],
+            ['2020-03-01', null,         22,],
+            ['2020-03-01', '2020-03-31', 22,],
+            ['2020-03-01', '2020-03-07',  5,],
+        ];
+    }
+
+    /**
+     * @param string|null $start
+     * @param string|null $ende
+     * @param int         $count
+     *
+     * @dataProvider valideFilterParameter
+     *
+     * @throws Exception
+     */
+    public function testFindAllWithValideParameter(?string $start, ?string $ende, int $count): void
+    {
+        $repository = new WorkingHoursRepository($this->pdoObject);
+        $models = $repository->findFiltered($start, $ende);
+        $this->assertIsArray($models);
+        $this->assertContainsOnly(WorkingHours::class, $models);
+        $this->assertCount($count, $models);
+    }
+
+    /**
+     * @return array<int, array<int|string|null>>
+     */
+    public function invalideFilterParameter(): array
+    {
+        return [
+            ['2020-04-31',null],
+            [null,        '2020-04-31'],
+            ['2020-04-00','2020-04-31'],
+            ['2020-04-01','2020-04-31'],
+            ['2020-04-00','2020-04-30'],
+            //
+            ['2020-04',   null],
+            [null,        '2020-04'],
+            ['2020-04',   '2020-04'],
+            ['2020-04-01','2020-04'],
+            ['2020-04',   '2020-04-30'],
+            //
+            ['2020',      null],
+            [null,        '2020'],
+            ['2020',      '2020'],
+            ['2020-04-01','2020'],
+            ['2020',      '2020-04-30'],
+        ];
+    }
+
+    /**
+     * @param string|null $start
+     * @param string|null $ende
+     *
+     * @dataProvider invalideFilterParameter
+     *
+     * @throws Exception
+     */
+    public function testFindAllWithInvalideParameter(?string $start, ?string $ende): void
+    {
+        $repository = new WorkingHoursRepository($this->pdoObject);
+        $this->expectException(RepositoryBadWhereDataException::class);
+        $repository->findFiltered($start, $ende);
+    }
+
     /**
      * @throws RepositoryRecordNotFoundException
      */

deploy.sh

@@ -1,5 +1,20 @@
 #!/usr/bin/env bash
 
+create_css_files() {
+    cd ui/public || exit 2
+    lessc --source-map less/print.less print.css
+    lessc --source-map less/global.less global.css
+    cd ../..
+}
+
+
+install_ui_dependence() {
+    cd ui/ || exit 2
+    npm install
+    cd ..
+}
+
+
 install_api_dependence() {
     cd api/ || exit 2
     composer install
@@ -29,4 +44,4 @@ composer_run() {
     docker-compose up -d
 }
 
-install_api_dependence && build_ui && test_unit && composer_run && test_api
+create_css_files && install_ui_dependence && install_api_dependence && build_ui && test_unit && composer_run && test_api

resources/test-data/report-1672928012.CSV

@@ -0,0 +1,62 @@
+Aktivität;Dauer;Von;Bis;Kommentar
+Arbeit;04:19;2021-07-30 13:01;2021-07-30 17:20;
+Mittagspause ;00:45;2021-07-30 12:16;2021-07-30 13:01;
+Arbeit;04:22;2021-07-30 07:54;2021-07-30 12:16;
+Arbeit;03:25;2021-07-29 13:25;2021-07-29 16:50;
+Mittagspause ;01:01;2021-07-29 12:23;2021-07-29 13:25;
+Arbeit;04:44;2021-07-29 07:39;2021-07-29 12:23;
+Arbeit;04:47;2021-07-28 12:49;2021-07-28 17:37;
+Mittagspause ;00:58;2021-07-28 11:51;2021-07-28 12:49;
+Arbeit;03:48;2021-07-28 08:02;2021-07-28 11:51;
+Arbeit;03:49;2021-07-27 12:34;2021-07-27 16:24;
+Mittagspause ;00:47;2021-07-27 11:47;2021-07-27 12:34;
+Arbeit;03:20;2021-07-27 08:27;2021-07-27 11:47;
+Arbeit;04:47;2021-07-26 12:59;2021-07-26 17:47;
+Mittagspause ;00:52;2021-07-26 12:07;2021-07-26 12:59;
+Arbeit;03:59;2021-07-26 08:08;2021-07-26 12:07;
+Arbeit;05:53;2021-07-23 12:43;2021-07-23 18:37;
+Mittagspause ;00:36;2021-07-23 12:07;2021-07-23 12:43;
+Arbeit;04:10;2021-07-23 07:57;2021-07-23 12:07;
+Arbeit;04:09;2021-07-22 12:54;2021-07-22 17:04;
+Mittagspause ;00:42;2021-07-22 12:11;2021-07-22 12:54;
+Arbeit;04:16;2021-07-22 07:55;2021-07-22 12:11;
+Arbeit;03:11;2021-07-21 13:37;2021-07-21 16:48;
+Mittagspause ;01:07;2021-07-21 12:29;2021-07-21 13:37;
+Arbeit;04:58;2021-07-21 07:31;2021-07-21 12:29;
+Arbeit;01:17;2021-07-20 18:44;2021-07-20 20:02;
+Arbeit;03:50;2021-07-20 13:14;2021-07-20 17:04;
+Mittagspause ;00:41;2021-07-20 12:32;2021-07-20 13:14;
+Arbeit;04:55;2021-07-20 07:37;2021-07-20 12:32;
+Arbeit;03:19;2021-07-19 13:12;2021-07-19 16:31;
+Mittagspause ;00:52;2021-07-19 12:20;2021-07-19 13:12;
+Arbeit;04:28;2021-07-19 07:51;2021-07-19 12:20;
+Arbeit;02:48;2021-07-16 12:55;2021-07-16 15:43;
+Mittagspause ;00:47;2021-07-16 12:07;2021-07-16 12:55;
+Arbeit;04:01;2021-07-16 08:06;2021-07-16 12:07;
+Arbeit;03:38;2021-07-15 13:05;2021-07-15 16:43;
+Mittagspause ;01:05;2021-07-15 11:59;2021-07-15 13:05;
+Arbeit;03:56;2021-07-15 08:02;2021-07-15 11:59;
+Arbeit;03:38;2021-07-14 13:07;2021-07-14 16:45;
+Mittagspause ;01:00;2021-07-14 12:07;2021-07-14 13:07;
+Arbeit;04:00;2021-07-14 08:06;2021-07-14 12:07;
+Arbeit;04:22;2021-07-13 12:53;2021-07-13 17:15;
+Mittagspause ;01:03;2021-07-13 11:50;2021-07-13 12:53;
+Arbeit;03:47;2021-07-13 08:02;2021-07-13 11:50;
+Arbeit;03:26;2021-07-12 13:02;2021-07-12 16:28;
+Mittagspause ;01:03;2021-07-12 11:58;2021-07-12 13:02;
+Arbeit;04:14;2021-07-12 07:44;2021-07-12 11:58;
+Arbeit;03:57;2021-07-09 13:09;2021-07-09 17:06;
+Mittagspause ;01:06;2021-07-09 12:02;2021-07-09 13:09;
+Arbeit;03:57;2021-07-09 08:04;2021-07-09 12:02;
+Arbeit;03:17;2021-07-08 13:12;2021-07-08 16:29;
+Mittagspause ;01:07;2021-07-08 12:04;2021-07-08 13:12;
+Arbeit;04:00;2021-07-08 08:03;2021-07-08 12:04;
+Arbeit;03:41;2021-07-07 13:08;2021-07-07 16:49;
+Mittagspause ;01:00;2021-07-07 12:07;2021-07-07 13:08;
+Arbeit;04:05;2021-07-07 08:02;2021-07-07 12:07;
+Arbeit;02:50;2021-07-06 13:05;2021-07-06 15:55;
+Mittagspause ;01:05;2021-07-06 11:59;2021-07-06 13:05;
+Arbeit;03:49;2021-07-06 08:10;2021-07-06 11:59;
+Arbeit;03:32;2021-07-05 13:00;2021-07-05 16:33;
+Mittagspause ;00:59;2021-07-05 12:00;2021-07-05 13:00;
+Arbeit;03:48;2021-07-05 08:12;2021-07-05 12:00;

resources/uml/Speichere-mehere-Daten.puml

@@ -0,0 +1,15 @@
+@startuml
+'https://plantuml.com/activity-diagram-beta
+|UI|
+:Bestimme //Startdatum//;
+:Bestimme //Enddatum//;
+:Erstelle //Liste der Wochentage//;
+|REST|
+start
+:Rufe API auf;
+|UI|
+:Zeige //Liste der Wochentage// an;
+:Verarbeite Informationen der Rest-API;
+stop
+
+@enduml

ui/package.json

@@ -25,6 +25,7 @@
     "rollup-plugin-svelte": "^6.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "sirv-cli": "^1.0.8",
-    "svelte": "^3.4.4"
+    "svelte": "^3.4.4",
+    "svelte-paginate": "^0.1.0"
   }
 }

ui/public/less/lesslib/basics.less

@@ -74,3 +74,28 @@ section article {
         }
     }
 }
+
+// Einstellungen für die Pagination-Navigation
+.pagination-nav {
+    display: flex;
+    justify-content: center;
+    padding-top: 1rem;
+    .option {
+        &.number, &.ellipsis {
+            line-height: 1.25rem;
+            span {
+                margin: .25rem .5rem;
+            }
+            &.active {
+                text-decoration: underline solid;
+            }
+        }
+        &.disabled {
+            svg {
+                path {
+                    fill: darken(@mainColorLight,40%,relativ);
+                }
+            }
+        }
+    }
+}

ui/public/less/lesslib/layout.less

@@ -91,6 +91,29 @@ main {
         form {
             @formLabelWidth: 10rem;
             @formItemWidth: 40rem;
+            nav.menu {
+                width: @formItemWidth + @formLabelWidth + 4rem;
+                border-color: @mainColor;
+                border-bottom-style: solid;
+                margin: 1rem auto;
+                span {
+                    border-color: @mainColor;
+                    border-style: solid solid none;
+                    padding: 0.5rem;
+                    display: inline-block;
+                    font-weight: bolder;
+                    margin-right: 1rem;
+                    &:first-child {
+                        margin-left: 1.5rem;
+                    }
+                    &:hover {
+                        background-color: darken(@mainColorLight,10%,relativ);
+                    }
+                    &.active {
+                        background-color: darken(@mainColorLight,20%,relativ);
+                    }
+                }
+            }
             fieldset {
                 width: @formItemWidth + @formLabelWidth + 2rem;
                 margin: 1rem auto;

ui/src/components/Repositories.svelte

@@ -20,7 +20,10 @@
         },
         '_fetch': async (rest_url, request_options) => {
             // noinspection JSUnresolvedVariable
-            let response = await MyFetch._pureFetch(rest_url, request_options)
+            let response = await MyFetch._pureFetch(rest_url, request_options).catch(err => {
+                console.error(err)
+                return null
+            })
             if (!response.ok) {
                 throw new Error('Fail!')
             }
@@ -40,16 +43,20 @@
         },
         '_pureFetch': async (rest_url, request_options) => {
             // noinspection JSUnresolvedVariable
-            return await fetch(env.API_URL + rest_url, request_options).catch(err => {
+            return await fetch(env.API_URL + rest_url, request_options)
-                console.error(err)
-                return null
-            })
         }
     }
 
     export const WorkingHoursRepository = {
-        'browse': () => {
+        'browse': (startDate = '', endDate = '') => {
-            return MyFetch.get('/working-hours')
+            let filter = {}
+            if (startDate !== '') {
+                filter['start-date'] = startDate
+            }
+            if (endDate !== '') {
+                filter['end-date'] = endDate
+            }
+            return MyFetch.get('/working-hours', filter)
         },
 
         'read': date => {

ui/src/routes/Views.svelte

@@ -1,16 +1,21 @@
 <script>
-    export let params = {};
+    import { paginate, PaginationNav } from 'svelte-paginate'
+
+    export let params = {}
     let records = []
     let isLoading = true
     console.log(params)
+    let currentPage = 1
+    let pageSize = 15
+    $: paginatedItems = paginate({ items: records, pageSize, currentPage })
     if (!String.prototype.startsWith) {
         String.prototype.startsWith = function (searchString, position) {
-            position = position || 0;
+            position = position || 0
-            return this.indexOf(searchString, position) === position;
+            return this.indexOf(searchString, position) === position
-        };
         }
-    $: isNegative = time => time.startsWith('-') ? 'absence-time' : '';
+    }
-    $: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time;
+    $: isNegative = time => time.startsWith('-') ? 'absence-time' : ''
+    $: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time
 
     const init = async () => await params.promise.then(data => {
         records = data
@@ -47,7 +52,7 @@
                 </tr>
                 </thead>
                 <tbody>
-                {#each records as record}
+                {#each paginatedItems as record}
                     <tr>
                         <td>{record.period}</td>
                         <td>{record.workingDays}</td>
@@ -56,6 +61,20 @@
                     </tr>
                 {/each}
                 </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="4">
+                        <PaginationNav
+                            totalItems="{records.length}"
+                            pageSize="{pageSize}"
+                            currentPage="{currentPage}"
+                            limit="{1}"
+                            showStepOptions="{true}"
+                            on:setPage="{(e) => currentPage = e.detail.page}"
+                        />
+                    </td>
+                </tr>
+                </tfoot>
             </table>
         {/if}
     </article>

ui/src/routes/WorkingHours.svelte

@@ -5,6 +5,7 @@
 
     let TITLE = "Bearbeitung Einträge"
     let activeRecord = null;
+    let currentPage = 1
 </script>
 
 <svelte:head>
@@ -17,7 +18,7 @@
             <h1>{TITLE}</h1>
         </header>
         <article>
-            <List bind:activeRecord={activeRecord}/>
+            <List bind:activeRecord={activeRecord} bind:currentPage/>
         </article>
     </section>
 {:else}

ui/src/routes/WorkingHours/Formular.svelte

@@ -3,39 +3,118 @@
     import IconifyIcon from '@iconify/svelte'
     import checkIcon from '@iconify-icons/oi/check'
     import xIcon from '@iconify-icons/oi/x'
-    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte"
+    import EditByDay from "./Formular/EditByDay.svelte";
+    import EditByWeek from "./Formular/EditByWeek.svelte";
+    import ImportCsv from "./Formular/ImportCsv.svelte";
+    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte";
+
+    const DAILY_EDIT = 0
+    const WEEKLY_EDIT = 1
+    const CSV_IMPORT = 2
 
-    export let activeRecord = null
     const Controller = {
         'saveRecord': () => {
-            WorkingHoursRepository.addOrUpdate(activeRecord.workingDay, activeRecord).then(() => {
+            activeRecordList.forEach((actualRecord) => {
-                Controller.nextDay()
+                if (actualRecord.workingTime === '00:00:00') {
-            });
+                    return
-        },
+                }
-        'nextDay': async () => {
+                WorkingHoursRepository.addOrUpdate(actualRecord.workingDay, actualRecord);
-            let actDate = new TimekeepingDate(activeRecord.workingDay)
+            })
-            let nextDay = actDate.getNextDay()
+            activeDate = nextDate
-            activeRecord = await WorkingHoursRepository.readOrNew(nextDay.getDateString())
+            makeTimekeepingList()
         },
         'cancelActiveRecord': () => {
-            activeRecord = null;
+            activeRecordList = []
+            activeRecord = null
         }
     }
+    const WeekController = {
+        'makeTimekeepingList': () => {
+            let actualDay = WeekController.getMondayFromWeek(
+                activeDate === null ? new TimekeepingDate() : new TimekeepingDate(activeDate)
+            )
+            activeRecordList = []
+            activeDate = actualDay.getDateString()
+            for (const daysDiff in [0, 1, 2, 3, 4, 5, 6]) {
+                activeRecordList.push({workingTime: '00:00:00', workingDay: actualDay.getDateString()})
+                actualDay = actualDay.getNextDay()
+            }
+            nextDate = actualDay.getDateString()
+            WorkingHoursRepository.browse(activeRecordList[0].workingDay, activeRecordList[6].workingDay).then(data => {
+                data.forEach(item => {
+                    let actualDay = new TimekeepingDate(item.workingDay)
+                    activeRecordList[actualDay.getDay()-1].workingTime = item.workingTime
+                })
+            })
+        },
+        'getMondayFromWeek': actualDayObject => {
+            if (actualDayObject.getDate() === 0) {
+                actualDayObject.setDate(actualDayObject.getDate() - 7)
+            }
+            if (actualDayObject.getDate() !== 1) {
+                actualDayObject.setDate(actualDayObject.getDate() - (actualDayObject.getDay() - 1))
+            }
+            return actualDayObject
+        }
+    }
+    const DayController = {
+        'makeTimekeepingList': () => {
+            let actualDay = activeDate === null ? new TimekeepingDate() : new TimekeepingDate(activeDate)
+            WorkingHoursRepository.readOrNew(actualDay.getDateString()).then(data => {
+                activeRecordList = [ data ]
+                activeDate = actualDay.getDateString()
+                nextDate = actualDay.getNextDay().getDateString()
+            })
+        }
+    }
+    const CsvController = {
+        'makeTimekeepingList': () => {
+            MenuController.dailyEdit()
+        }
+    }
+    const MenuController = {
+        'dailyEdit': () => {
+            period_of_edit = DAILY_EDIT
+            makeTimekeepingList = DayController.makeTimekeepingList
+            makeTimekeepingList()
+        },
+        'weeklyEdit': () => {
+            period_of_edit = WEEKLY_EDIT
+            makeTimekeepingList = WeekController.makeTimekeepingList
+            makeTimekeepingList()
+        },
+        'csvImport': () => {
+            period_of_edit = CSV_IMPORT
+            activeRecordList = []
+            makeTimekeepingList = CsvController.makeTimekeepingList
+        }
+    }
+
+    let activeDate = null
+    let nextDate = null
+    let activeRecordList = []
+    export let activeRecord = null
+    let period_of_edit
+    let makeTimekeepingList
+
+    MenuController.dailyEdit()
 </script>
 <!--suppress HtmlUnknownTarget -->
 <form action="/working-hours" name="editRecord">
-    <fieldset name="record-data">
+    <nav class="menu">
-        <div>
+        <span on:click={MenuController.dailyEdit} on:keypress={() => {}} class:active={period_of_edit === DAILY_EDIT}>Täglich</span>
-            <label for="workingDay">Arbeitstag</label>
+        <span on:click={MenuController.weeklyEdit} on:keypress={() => {}} class:active={period_of_edit === WEEKLY_EDIT}>Wöchentlich</span>
-            <input bind:value={activeRecord.workingDay} type="date"
+        <span on:click={MenuController.csvImport} on:keypress={() => {}} class:active={period_of_edit === CSV_IMPORT}>Import per CSV</span>
-                   id="workingDay" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
+    </nav>
-        </div>
+    {#if period_of_edit === DAILY_EDIT}
-        <div>
+        <EditByDay bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
-            <label for="workingTime">Arbeitszeit</label>
+    {/if}
-            <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
+    {#if period_of_edit === WEEKLY_EDIT}
-                   id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+        <EditByWeek bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
-        </div>
+    {/if}
-    </fieldset>
+    {#if period_of_edit === CSV_IMPORT}
+        <ImportCsv bind:activeRecordList bind:makeTimekeepingList/>
+    {/if}
     <fieldset name="buttons">
         <button on:click={Controller.saveRecord} type="button">Übernehmen und Weiter
             <IconifyIcon icon={checkIcon} color="green"/>

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

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

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

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

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

@@ -0,0 +1,96 @@
+<script>
+    import Papa from '../../../papaparse.min'
+    import { paginate, PaginationNav } from 'svelte-paginate'
+
+    export let activeRecordList = []
+    let imported_data = []
+    export let currentPage = 1
+    let pageSize = 15
+    $: paginatedItems = paginate({ items: imported_data, pageSize, currentPage })
+
+    let files = null
+
+    const VerarbeiteDateien = () => {
+        for (const file of files) {
+            VerarbeiteCsv(file)
+        }
+    }
+
+    const VerarbeiteCsv = file => {
+        Papa.parse(file, {
+            header: true,
+            skipEmptyLines: true,
+            complete: results => {
+                let cash_work_days = {}
+                results.data.forEach(item => {
+                    // noinspection JSNonASCIINames
+                    let activity = item['Aktivität']
+                    if (activity.trim() === 'Mittagspause') {
+                        return
+                    }
+                    let work_from = new Date(item['Von'])
+                    let work_to = new Date(item['Bis'])
+                    let actual_day = work_from.toISOString().substring(0, 10)
+                    let actual_work_hours = (work_to - work_from) / (1000 * 60 * 60)
+                    cash_work_days[actual_day] ??= 0
+                    cash_work_days[actual_day] += actual_work_hours
+                })
+                for (let day in cash_work_days) {
+                    let hours = cash_work_days[day]
+                    let hours_digits = Math.trunc(hours)
+                    let minutes_digits = Math.round((hours - hours_digits) * 60)
+                    let working_time = String(hours_digits).padStart(2, '0') + ':'
+                        + String(minutes_digits).padStart(2, '0') + ':00'
+                    activeRecordList.push({ workingTime: working_time, workingDay: day })
+                }
+                imported_data = activeRecordList
+            },
+        })
+    }
+</script>
+
+
+<fieldset>
+    <legend>Download-Liste</legend>
+    <div class="zelle">
+        <label for="csv-file">Download der Zeiten von <i>aTimeLogger2</i></label>
+        <input type="file" accept="text/csv" id="csv-file" bind:files/>
+        <button type="button" on:click={VerarbeiteDateien}>Upload</button>
+    </div>
+</fieldset>
+<fieldset name="record-data-for-import">
+    <div>
+        {#if imported_data.length < 1}
+            <p>Loading...</p>
+        {:else}
+            <table>
+                <tbody>
+                {#each imported_data as item}
+                    <tr>
+                        <td>
+                            {item.workingDay}
+                        </td>
+                        <td>
+                            {item.workingTime}
+                        </td>
+                    </tr>
+                {/each}
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="4">
+                        <PaginationNav
+                            totalItems="{imported_data.length}"
+                            pageSize="{pageSize}"
+                            currentPage="{currentPage}"
+                            limit="{1}"
+                            showStepOptions="{true}"
+                            on:setPage="{(e) => currentPage = e.detail.page}"
+                        />
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        {/if}
+    </div>
+</fieldset>

ui/src/routes/WorkingHours/List.svelte

@@ -1,22 +1,26 @@
 <script>
-    import {WorkingHoursRepository} from "../../components/Repositories.svelte"
+    import { WorkingHoursRepository } from '../../components/Repositories.svelte'
-    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte"
+    import { TimekeepingDate } from '../../components/TimekeepingDate.svelte'
-
+    import { paginate, PaginationNav } from 'svelte-paginate'
-    export let activeRecord = null
-    let isLoading = true
-    let records = []
     import IconifyIcon from '@iconify/svelte'
     import wrenchIcon from '@iconify-icons/oi/wrench'
     import documentIcon from '@iconify-icons/oi/document'
 
+    export let activeRecord = null
+    let isLoading = true
+    let records = []
+    export let currentPage = 1
+    let pageSize = 15
+    $: paginatedItems = paginate({ items: records, pageSize, currentPage })
+
     const Controller = {
         'listRecords': () => {
-            Controller.cancelActiveRecord();
+            Controller.cancelActiveRecord()
             WorkingHoursRepository.browse().then(data => {
                 Controller.cancelActiveRecord()
                 records = data
                 isLoading = false
-            });
+            })
         },
         'newRecord': async () => {
             const actDate = new TimekeepingDate()
@@ -27,11 +31,11 @@
                 Controller.listRecords()
                 return
             }
-            activeRecord = data;
+            activeRecord = data
         }),
         'cancelActiveRecord': () => {
-            activeRecord = null;
+            activeRecord = null
-        }
+        },
     }
     Controller.listRecords()
 </script>
@@ -61,7 +65,7 @@
         </tr>
         </thead>
         <tbody>
-        {#each records as record}
+        {#each paginatedItems as record}
             <tr>
                 <td>{record.workingDay}</td>
                 <td>{record.workingTime}</td>
@@ -73,5 +77,19 @@
             </tr>
         {/each}
         </tbody>
+        <tfoot>
+        <tr>
+            <td colspan="4">
+                <PaginationNav
+                    totalItems="{records.length}"
+                    pageSize="{pageSize}"
+                    currentPage="{currentPage}"
+                    limit="{1}"
+                    showStepOptions="{true}"
+                    on:setPage="{(e) => currentPage = e.detail.page}"
+                />
+            </td>
+        </tr>
+        </tfoot>
     </table>
 {/if}

ui/src/routes/working-hours/NewByDay.svelte

@@ -1,17 +0,0 @@
-<script>
-    export let activeRecord
-</script>
-
-
-<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>