bugfix: erfülle die Voraussetzungen bei klickbaren SPAN-Element

.gitignore

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

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

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/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;
-            return this.indexOf(searchString, position) === position;
-        };
+        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;
+    }
+    $: isNegative = time => time.startsWith('-') ? 'absence-time' : ''
+    $: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time
 
     const init = async () => await params.promise.then(data => {
         records = data
@@ -33,10 +38,10 @@
         {:else}
             <table>
                 <colgroup>
-                    <col />
-                    <col />
-                    <col />
-                    <col />
+                    <col/>
+                    <col/>
+                    <col/>
+                    <col/>
                 </colgroup>
                 <thead>
                 <tr>
@@ -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

@@ -5,10 +5,12 @@
     import xIcon from '@iconify-icons/oi/x'
     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
 
     const Controller = {
         'saveRecord': () => {
@@ -65,6 +67,11 @@
             })
         }
     }
+    const CsvController = {
+        'makeTimekeepingList': () => {
+            MenuController.dailyEdit()
+        }
+    }
     const MenuController = {
         'dailyEdit': () => {
             period_of_edit = DAILY_EDIT
@@ -75,6 +82,11 @@
             period_of_edit = WEEKLY_EDIT
             makeTimekeepingList = WeekController.makeTimekeepingList
             makeTimekeepingList()
+        },
+        'csvImport': () => {
+            period_of_edit = CSV_IMPORT
+            activeRecordList = []
+            makeTimekeepingList = CsvController.makeTimekeepingList
         }
     }
 
@@ -90,8 +102,9 @@
 <!--suppress HtmlUnknownTarget -->
 <form action="/working-hours" name="editRecord">
     <nav class="menu">
-        <span on:click={MenuController.dailyEdit} class:active={period_of_edit === DAILY_EDIT}>Täglich</span>
-        <span on:click={MenuController.weeklyEdit} class:active={period_of_edit === WEEKLY_EDIT}>Wöchentlich</span>
+        <span on:click={MenuController.dailyEdit} on:keypress={() => {}} class:active={period_of_edit === DAILY_EDIT}>Täglich</span>
+        <span on:click={MenuController.weeklyEdit} on:keypress={() => {}} class:active={period_of_edit === WEEKLY_EDIT}>Wöchentlich</span>
+        <span on:click={MenuController.csvImport} on:keypress={() => {}} class:active={period_of_edit === CSV_IMPORT}>Import per CSV</span>
     </nav>
     {#if period_of_edit === DAILY_EDIT}
         <EditByDay bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
@@ -99,6 +112,9 @@
     {#if period_of_edit === WEEKLY_EDIT}
         <EditByWeek bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
     {/if}
+    {#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/ImportCsv.svelte

@@ -0,0 +1,80 @@
+<script>
+    import Papa from '../../../papaparse.min'
+    export let activeRecordList = []
+    let imported_data = []
+
+    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)
+                    if (cash_work_days[actual_day] === undefined) {
+                        cash_work_days[actual_day] = actual_work_hours
+                    } else {
+                        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>
+        </table>
+    {/if}
+    </div>
+</fieldset>

ui/src/routes/WorkingHours/List.svelte

@@ -1,22 +1,26 @@
 <script>
-    import {WorkingHoursRepository} from "../../components/Repositories.svelte"
-    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte"
-
-    export let activeRecord = null
-    let isLoading = true
-    let records = []
+    import { WorkingHoursRepository } from '../../components/Repositories.svelte'
+    import { TimekeepingDate } from '../../components/TimekeepingDate.svelte'
+    import { paginate, PaginationNav } from 'svelte-paginate'
     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}