Merge pull request 'sync - 0.12.3' (#127) from dev into main

Reviewed-on: #127
Reviewed-by: Nicolai Ort <info@nicolai-ort.com>

.dockerignore

@@ -1,2 +1 @@
-public/env.sample.js
+public/env.sample.js
-.pnpm-store

.drone.yml

@@ -19,13 +19,6 @@ get:
   path: odit-git-bot
   name: sshkey
 
----
-kind: secret
-name: npm_url
-get:
-  path: odit-npm-cache
-  name: url
-
 ---
 kind: pipeline
 type: kubernetes
@@ -34,14 +27,10 @@ name: build:dev
 steps:
   - name: run full license export
     depends_on: ["clone"]
-    image: registry.odit.services/hub/library/node:19.7.0-alpine3.16
+    image: node:alpine
     commands:
-      - npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8
+      - yarn
-      - pnpm i
+      - yarn licenses:export
-      - pnpm licenses:export
-    environment:
-      NPM_REGISTRY_URL:
-        from_secret: npm_url
   - name: push new licenses file to repo
     depends_on: ["run full license export"]
     image: appleboy/drone-git-push
@@ -54,21 +43,18 @@ steps:
       ssh_key:
         from_secret: git_ssh
   - name: build dev
-    depends_on: ["clone"]
+    image: plugins/docker
-    image: registry.odit.services/library/drone-kaniko
+    depends_on: [clone]
     settings:
       username:
         from_secret: docker_username
       password:
         from_secret: docker_password
-      build_args:
+      repo: registry.odit.services/lfk/frontend
-        - NPM_REGISTRY_URL:
-          from_secret: npm_url
-      repo: lfk/frontend
       tags:
         - dev
-      cache: true
       registry: registry.odit.services
+      mtu: 1000
 trigger:
   branch:
     - dev
@@ -81,21 +67,18 @@ type: kubernetes
 name: build:tags
 steps:
   - name: build $DRONE_TAG
-    depends_on: ["clone"]
+    image: plugins/docker
-    image: registry.odit.services/library/drone-kaniko
+    depends_on: [clone]
     settings:
       username:
         from_secret: docker_username
       password:
         from_secret: docker_password
-      build_args:
+      repo: registry.odit.services/lfk/frontend
-        - NPM_REGISTRY_URL:
-          from_secret: npm_url
-      repo: lfk/frontend
       tags:
-        - "${DRONE_TAG}"
+        - '${DRONE_TAG}'
-      cache: true
       registry: registry.odit.services
+      mtu: 1000
 trigger:
   event:
   - tag

.gitignore

@@ -1,6 +1,10 @@
 node_modules
+package-lock.json
+yarn.lock
 *.map
 public/env.js
 public/index.html
 /dist
-.pnpm-store
+.yarn
+.pnp.js
+.yarnrc.yml

CHANGELOG.md

@@ -2,279 +2,8 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-#### [0.17.3](https://git.odit.services/lfk/frontend/compare/0.17.2...0.17.3)
-
-- dependency fixes [`3ea7a01`](https://git.odit.services/lfk/frontend/commit/3ea7a015a9beba3c2e4d3eb966f24ff6d4ac786e)
-- set pnpm to @7 [`4432941`](https://git.odit.services/lfk/frontend/commit/44329413ed2ca23f74e86db041b2c25b2b1c2a2b)
-
-#### [0.17.2](https://git.odit.services/lfk/frontend/compare/0.17.1...0.17.2)
-
-> 15 March 2023
-
-- new license file version [CI SKIP] [`00359d2`](https://git.odit.services/lfk/frontend/commit/00359d25c1bd3efdd6365bf284b3c07634049399)
-- 🚀RELEASE v0.17.2 [`46db68a`](https://git.odit.services/lfk/frontend/commit/46db68ab229dc740dfff8835ef916f2c2e629b27)
-- improved ThFilterGroup style [`f917018`](https://git.odit.services/lfk/frontend/commit/f917018fd92a8a5b034f735ac8b6e41995044317)
-
-#### [0.17.1](https://git.odit.services/lfk/frontend/compare/0.17.0...0.17.1)
-
-> 15 March 2023
-
-- Revert "package dependency fixes, bumps, lockfile update" [`d8a3063`](https://git.odit.services/lfk/frontend/commit/d8a30637351e164599e07a6473d9a1d2b08d245d)
-- 🚀RELEASE v0.17.1 [`7b420c4`](https://git.odit.services/lfk/frontend/commit/7b420c430d27bf0fc85a4297780164a593fc1be3)
-
-#### [0.17.0](https://git.odit.services/lfk/frontend/compare/0.16.5...0.17.0)
-
-> 15 March 2023
-
-- new license file version [CI SKIP] [`61328d2`](https://git.odit.services/lfk/frontend/commit/61328d20ed2cfd1df7d3c32767f9c64154879d6d)
-- wip: pnpm + node version [`732b2f0`](https://git.odit.services/lfk/frontend/commit/732b2f061e465bd08cf34c58d8cd6b021ba25dce)
-- package dependency fixes, bumps, lockfile update [`2c73b98`](https://git.odit.services/lfk/frontend/commit/2c73b9862d401dac15021eed3f7847d46132a8ed)
-- Fixed runners not showing up [`75bc89c`](https://git.odit.services/lfk/frontend/commit/75bc89ca3020c48f490c7602374616bd9461e78f)
-- add ThFilterRunner [`3a3e2f7`](https://git.odit.services/lfk/frontend/commit/3a3e2f71575d3a0e39a5e13b05cff932b8683ac9)
-- fix styling for table filters th border [`bea57aa`](https://git.odit.services/lfk/frontend/commit/bea57aa03acaaaa4b1860b30228dd5d1298317f8)
-- You can now create cards from runners by searching via #runnerid [`e8a0ad6`](https://git.odit.services/lfk/frontend/commit/e8a0ad6647ab39252865f62b755f27c34ac2d243)
-- remodelled for early return [`b869b5f`](https://git.odit.services/lfk/frontend/commit/b869b5fd2a01955fb21f936fa38eb5a9648e7de3)
-- 🚀RELEASE v0.17.0 [`6491af1`](https://git.odit.services/lfk/frontend/commit/6491af19e375cbeba7ddd94e463b4dfe308a70a8)
-- Wow this api is fun [`32a9074`](https://git.odit.services/lfk/frontend/commit/32a9074963cce3328f14b1f981ddd5ee49df0008)
-- Fixed double space in label [`92b89cc`](https://git.odit.services/lfk/frontend/commit/92b89cc4d88c9d5625c2ddf7c81c98494f7f5271)
-- UsersOverview: drop pfp [`30991d5`](https://git.odit.services/lfk/frontend/commit/30991d5364a09d517b2115a7e9ea3fbf1fe2e57d)
-- Switched license generation to cache registry and pnpm [`0a6d92a`](https://git.odit.services/lfk/frontend/commit/0a6d92a1f3c5562f11562c433b3a04e3eaae3da4)
-- Pinned pnpm in dockerfile, thx @philipp [`3a576d1`](https://git.odit.services/lfk/frontend/commit/3a576d1073ee503b68100e01054a1756bab62805)
-- Pinned ci node version [`b30b98b`](https://git.odit.services/lfk/frontend/commit/b30b98b521eda2bc7fc055097546f716e90d92ef)
-- Fixed pnpm being called without being installed [`43d82a2`](https://git.odit.services/lfk/frontend/commit/43d82a2af04af49c2169f78a0d0f27ef7e4d7558)
-- Merge pull request 'bugfix/162-create_card_modal' (#163) from bugfix/162-create_card_modal into dev [`6a4495b`](https://git.odit.services/lfk/frontend/commit/6a4495b8131a31cd48a608c2275e80494d0a0fb4)
-- Removed unused log [`268b1b1`](https://git.odit.services/lfk/frontend/commit/268b1b1d9830de196d1d95345d7a2467bbf19eb6)
-- Merge pull request 'filter by runner full names + "#<ID>"' (#160) from feature/159-cardsoverview-filter-for-runner-full-names-and-id into dev [`0625937`](https://git.odit.services/lfk/frontend/commit/0625937068f0786078ffd29b9c8bb54949350b6c)
-- UsersOverview: change profilepic scaling [`5cc8b08`](https://git.odit.services/lfk/frontend/commit/5cc8b0811cf290f97a4399b23c5ea4d961a5a91c)
-
-#### [0.16.5](https://git.odit.services/lfk/frontend/compare/0.16.4...0.16.5)
-
-> 14 March 2023
-
-- 🚀RELEASE v0.16.5 [`3680533`](https://git.odit.services/lfk/frontend/commit/3680533eefef042fc77246dd3d374aafe10c428f)
-- new license file version [CI SKIP] [`405dfa0`](https://git.odit.services/lfk/frontend/commit/405dfa0c34ba87fc450c22e0e9974f92c4cdeffe)
-
-#### [0.16.4](https://git.odit.services/lfk/frontend/compare/0.16.3...0.16.4)
-
-> 14 March 2023
-
-- fix: OrgDetail: clicking on address will toggle selfservice [`#158`](https://git.odit.services/lfk/frontend/issues/158)
-- 🚀RELEASE v0.16.4 [`5c2d154`](https://git.odit.services/lfk/frontend/commit/5c2d154ad180ce7916605871c63e2f5ac4428250)
-
-#### [0.16.3](https://git.odit.services/lfk/frontend/compare/0.16.2...0.16.3)
-
-> 23 February 2023
-
-- 🚀RELEASE v0.16.3 [`f9cfd6b`](https://git.odit.services/lfk/frontend/commit/f9cfd6bd063b01a584774854d8fb5eab96f99528)
-- Bumped vite build targets [`5fe4763`](https://git.odit.services/lfk/frontend/commit/5fe47634e8980e77b65c05f213c475cf49273609)
-- new license file version [CI SKIP] [`a659091`](https://git.odit.services/lfk/frontend/commit/a6590910cfdc5e91fba91c1bc9237e407ef15fd2)
-- Merge pull request 'feature/156-pdf_names' (#157) from feature/156-pdf_names into dev [`ad454c3`](https://git.odit.services/lfk/frontend/commit/ad454c386cbf11abc59d41d269d1a0ef7442c9ed)
-- Added ids for generated pdfs [`0b2c296`](https://git.odit.services/lfk/frontend/commit/0b2c296de069a4ef302c5535de01bc18236675bc)
-
-#### [0.16.2](https://git.odit.services/lfk/frontend/compare/0.16.1...0.16.2)
-
-> 23 February 2023
-
-- Fixed scanmodal [`#154`](https://git.odit.services/lfk/frontend/issues/154)
-- 🚀RELEASE v0.16.2 [`0e85940`](https://git.odit.services/lfk/frontend/commit/0e85940cba292cbccd1ec038aa24f4a719382c19)
-- Merge pull request 'feature/147-cardoverview_performance' (#153) from feature/147-cardoverview_performance into dev [`8d479c3`](https://git.odit.services/lfk/frontend/commit/8d479c32f82938904aee6a10deb80fea85487e4b)
-- Merge pull request 'Fixed scanmodal' (#155) from bugfix/154-scan_select_runner_by_id into dev [`549785c`](https://git.odit.services/lfk/frontend/commit/549785cf7d1c9edc1be37dc745b97096232a08ca)
-- i18n [`ca6da15`](https://git.odit.services/lfk/frontend/commit/ca6da15ef761184a55b18d56f749f660a32cbb83)
-- Bsic datatable conversion [`757655e`](https://git.odit.services/lfk/frontend/commit/757655ea63b3667bc4612ae1595eb52910b61137)
-- 1st datatable try with @vincjo/datatables [`81b8fbf`](https://git.odit.services/lfk/frontend/commit/81b8fbf4e341e6f2998a6e9e2053972c5c225021)
-- Dasboard Cards redesign [`eb1c17e`](https://git.odit.services/lfk/frontend/commit/eb1c17e3ac7e8f5e7310a90421fc9db3ed15c497)
-- set .phone to null if empty [`da6dd55`](https://git.odit.services/lfk/frontend/commit/da6dd55d139a672fa50204eabdca67d9740614a0)
-- add group filtering to table [`14d64b6`](https://git.odit.services/lfk/frontend/commit/14d64b6070d98e6368da5709e9ff8221e8a621c7)
-- formatting [`24d0747`](https://git.odit.services/lfk/frontend/commit/24d074752f1c5dc1a14b075ac14b448d7e129376)
-- RunnersOverview loading fix [`2e075ea`](https://git.odit.services/lfk/frontend/commit/2e075eafab5c4d78fd9aa9d66834b477b2685bfc)
-- Added old formatting for runner and status [`df63c23`](https://git.odit.services/lfk/frontend/commit/df63c2388da359dec9ed9968bc9f970be7092a45)
-- Added custom status filter [`f0a2b28`](https://git.odit.services/lfk/frontend/commit/f0a2b2859fa18426a454b7d9d6dd22dfdfe7ce27)
-- Basic checkbox fix [`1337676`](https://git.odit.services/lfk/frontend/commit/1337676e0894c46da0b6dcb7553e5ea8f88d0c14)
-- Fixed all filter [`8dfa19f`](https://git.odit.services/lfk/frontend/commit/8dfa19fa0f9897c61342ece956df88731c7aa861)
-- improved runner search [`1b0cd5b`](https://git.odit.services/lfk/frontend/commit/1b0cd5b90bcceb92627c6b7cdcdd7792ed81b50f)
-- set table-layout:fixed + display when loaded [`65e8998`](https://git.odit.services/lfk/frontend/commit/65e89988943807c1606a8b6aea49564b13d52537)
-- Trigger edit modal [`32ddb66`](https://git.odit.services/lfk/frontend/commit/32ddb66fc8d8cd689f1104759812f4cee4b7a613)
-- cleaned up table search [`08047a9`](https://git.odit.services/lfk/frontend/commit/08047a93073c32f5dd7a8e958400ae8a5b7f4035)
-- Fixed edit update bug [`0feee0a`](https://git.odit.services/lfk/frontend/commit/0feee0ae2fb6d8dba0b6fd72cedc0712dc749511)
-- fix: z-index on action buttons [`224034d`](https://git.odit.services/lfk/frontend/commit/224034dcc6263d3b0a8ea20045e435142d8ed2af)
-- rename: ThFilterGroup -> ThFilterStatus [`2a6a399`](https://git.odit.services/lfk/frontend/commit/2a6a39916a03c0466e63354e9f5ad7924cb59b6b)
-- new license file version [CI SKIP] [`0e5490f`](https://git.odit.services/lfk/frontend/commit/0e5490f1c84217a5a6d5c8745c4667b32ca65e1a)
-- new license file version [CI SKIP] [`026d3d4`](https://git.odit.services/lfk/frontend/commit/026d3d41c1b976a4dc7c733576a6a9e8d4b13b78)
-- Updated breakpoints [`452d010`](https://git.odit.services/lfk/frontend/commit/452d0101838d72bff7d588a953faae028e2ff819)
-- Tailwind bump [`a101873`](https://git.odit.services/lfk/frontend/commit/a101873eb0946b284a11a5081642711f5087da14)
-- Fixed checkbox show [`0900c26`](https://git.odit.services/lfk/frontend/commit/0900c2691e4cfe5046e8ae186c8ac8884c90abd6)
-- Removed unused console log [`aafc4c8`](https://git.odit.services/lfk/frontend/commit/aafc4c8d62a7a0a493c8bd60149f90c842534bdd)
-- i18n import [`6fe134a`](https://git.odit.services/lfk/frontend/commit/6fe134afc8bfef4e7470b7e53b9312b172a7322b)
-- Merge pull request 'fix: RunnerDetail: set .phone to null if empty' (#152) from bugfix/151-runnerdetail--cannot-unset-phone-number into dev [`329c1cc`](https://git.odit.services/lfk/frontend/commit/329c1cc037a43c818ba3b6c72581d29586d76232)
-- Merge pull request 'feature/146-runner-table-performance-data-table' (#150) from feature/146-runner-table-performance-data-table into dev [`b82d638`](https://git.odit.services/lfk/frontend/commit/b82d638de1aa1f72aada212cf3e4147d808b4fcf)
-- Merge pull request 'feature/148-dashboard_statscards' (#149) from feature/148-dashboard_statscards into dev [`fd1a06b`](https://git.odit.services/lfk/frontend/commit/fd1a06b3595b3713ad474e623c74105125602d46)
-- Fixed top checkbox state [`3d2acb6`](https://git.odit.services/lfk/frontend/commit/3d2acb692a28c116790248679e238fb562b24ac5)
-
-#### [0.16.1](https://git.odit.services/lfk/frontend/compare/0.16.0...0.16.1)
-
-> 15 February 2023
-
-- fix: donor detail: sponsorings: unset middlename will show as "null" [`#145`](https://git.odit.services/lfk/frontend/issues/145)
-- 🚀RELEASE v0.16.1 [`4499480`](https://git.odit.services/lfk/frontend/commit/449948050b8673d43a8dfbb225c3198e4bbb3c7b)
-
-#### [0.16.0](https://git.odit.services/lfk/frontend/compare/0.15.6...0.16.0)
-
-> 3 February 2023
-
-- First page for statsclients [`f299617`](https://git.odit.services/lfk/frontend/commit/f299617c600d2bba7b4405c7c3acae9fd93aefa8)
-- 🚀RELEASE v0.16.0 [`75684ef`](https://git.odit.services/lfk/frontend/commit/75684efa1ae0edb4b4d414757c5acf2a77c572e5)
-- Basic statsclient detail [`0215860`](https://git.odit.services/lfk/frontend/commit/02158605be824e5ac21a6284731138190988c794)
-- Updated Add modal [`f679330`](https://git.odit.services/lfk/frontend/commit/f679330466205e6480cd7f2b7c2b4fdc41c51525)
-- Switched drone to kaniko [`1c98005`](https://git.odit.services/lfk/frontend/commit/1c980059cff5c87c452428b53513507c2339451f)
-- Re-added copy modal [`fecb07e`](https://git.odit.services/lfk/frontend/commit/fecb07ee373dcaaeaea69fdf8d4c6ee2c257c89c)
-- Added Statsclients to sidebar [`068076d`](https://git.odit.services/lfk/frontend/commit/068076dd47373c673a25e730cb8a57c686682810)
-- Fixed imports and naming [`f3cc07c`](https://git.odit.services/lfk/frontend/commit/f3cc07c009ed0a34e61f1aad47a1a31778145439)
-- new license file version [CI SKIP] [`2c4f27a`](https://git.odit.services/lfk/frontend/commit/2c4f27a943bb35be6728bb49bd5c2263cba78165)
-- Merge pull request 'feature/143-beamershow_clients' (#144) from feature/143-beamershow_clients into dev [`53b7dec`](https://git.odit.services/lfk/frontend/commit/53b7dec7cd516c908d45591b855f4be09371f9b1)
-- Updated deletion modal [`93fc7c2`](https://git.odit.services/lfk/frontend/commit/93fc7c2e83f78dd88f15d9246127bb9e69f1a8ee)
-- Updated mounted variables [`674e6a9`](https://git.odit.services/lfk/frontend/commit/674e6a90ec23dde9377bea64c14a50e41ffa450d)
-- Removed Key after creation [`e10c648`](https://git.odit.services/lfk/frontend/commit/e10c6480a504338b21e30fdf2577e5b6c3b635db)
-- Updated docker base images [`9767553`](https://git.odit.services/lfk/frontend/commit/976755338b8621064f9a73147aa600af1f77cd51)
-- Added translation [`96c55db`](https://git.odit.services/lfk/frontend/commit/96c55db63dbfed92b78ff0e7bdab7a8cce4d76e9)
-- Pinned versions [`cff112d`](https://git.odit.services/lfk/frontend/commit/cff112d705a74a135286943298f3f344341325ac)
-- Tailwind bump [`e0cbfb0`](https://git.odit.services/lfk/frontend/commit/e0cbfb000bee59a71e06bd58a9c7ef6a0fc7091d)
-- Added missing translation [`19a333d`](https://git.odit.services/lfk/frontend/commit/19a333d7bda525fbcb3c68f3cbf85a4f925a9707)
-- Bumped apiclient [`c28f1ee`](https://git.odit.services/lfk/frontend/commit/c28f1ee0bc4456595c21858f38e52ed6f16871c5)
-- new license file version [CI SKIP] [`3a66f4c`](https://git.odit.services/lfk/frontend/commit/3a66f4c862db9f35c223cc7007b0560fef4e1d63)
-- Bumped apiclient [`28cbc5b`](https://git.odit.services/lfk/frontend/commit/28cbc5b98ca09657100e1740b83aa2617243b26b)
-- Ignore pnpm lock [`2d8c4c1`](https://git.odit.services/lfk/frontend/commit/2d8c4c1698a1675f618e85e678012f310f87c6ee)
-
-#### [0.15.6](https://git.odit.services/lfk/frontend/compare/0.15.5...0.15.6)
-
-> 19 July 2021
-
-- 🚀RELEASE v0.15.6 [`9fc4ad6`](https://git.odit.services/lfk/frontend/commit/9fc4ad63c4f77b46d645e83c94b51747b91247b8)
-- Fixed donations getting reduced to the first one on certificates [`2391668`](https://git.odit.services/lfk/frontend/commit/2391668a25a1e11a1409df572d77ad1635070fbc)
-- new license file version [CI SKIP] [`97054a7`](https://git.odit.services/lfk/frontend/commit/97054a71c1ab8a045762a55148124965c6994373)
-
-#### [0.15.5](https://git.odit.services/lfk/frontend/compare/0.15.4...0.15.5)
-
-> 5 July 2021
-
-- 🚀RELEASE v0.15.5 [`717d335`](https://git.odit.services/lfk/frontend/commit/717d33547c3378424dd720005da9952f8a753f1a)
-- Merge pull request 'Fixed kilometer conversion' (#142) from bugfix/141-runner_kilometers into dev [`997be32`](https://git.odit.services/lfk/frontend/commit/997be32679dc38c9fb0e92b6ce011057b854d99d)
-- Fixed kilometer conversion [`134f00c`](https://git.odit.services/lfk/frontend/commit/134f00c40e0c8252e7604a73151e8d6685b2c61d)
-- new license file version [CI SKIP] [`e752ee1`](https://git.odit.services/lfk/frontend/commit/e752ee12d17a4423f4364f7766eafbe7d4cef2d1)
-
-#### [0.15.4](https://git.odit.services/lfk/frontend/compare/0.15.3...0.15.4)
-
-> 5 July 2021
-
-- Merge pull request 'fix total donation sum in dashboard' (#140) from bugfix/139-total-donation-sum-is-wrong into dev [`#139`](https://git.odit.services/lfk/frontend/issues/139)
-- 🚀RELEASE v0.15.4 [`cc4515f`](https://git.odit.services/lfk/frontend/commit/cc4515ff66b1c1de3747d0ee6cc465574accedb7)
-- divide by 100 + toFixes(2) [`b246f2b`](https://git.odit.services/lfk/frontend/commit/b246f2b349b06d1adea318dfad58f97fb1a249bb)
-
-#### [0.15.3](https://git.odit.services/lfk/frontend/compare/0.15.2...0.15.3)
-
-> 16 April 2021
-
-- 🚀RELEASE v0.15.3 [`76b69d8`](https://git.odit.services/lfk/frontend/commit/76b69d851aa590ecf8caac135b72962a72e83635)
-- Small bugfix (null got displayed) 🛠 [`224f586`](https://git.odit.services/lfk/frontend/commit/224f5863683ae2543a4a435510ed2c558dc5d307)
-
-#### [0.15.2](https://git.odit.services/lfk/frontend/compare/0.15.1...0.15.2)
-
-> 16 April 2021
-
-- 🚀RELEASE v0.15.2 [`9add6c8`](https://git.odit.services/lfk/frontend/commit/9add6c8ff1fbeed91fe97a7cf262921b716f4e3c)
-- Footer - noopener link [`cee04c1`](https://git.odit.services/lfk/frontend/commit/cee04c1d6fb6005cefe77fb95855ab6fe2cc448f)
-- Hotfix: Team change recognition 🐞 [`cbec785`](https://git.odit.services/lfk/frontend/commit/cbec78589d2fa21f12ce87e71bff2b49c3a7d345)
-- NGINX cache assets [`e54a480`](https://git.odit.services/lfk/frontend/commit/e54a4807f70bc333396885f81d3dcc7ae6c115d9)
-
-#### [0.15.1](https://git.odit.services/lfk/frontend/compare/0.15.0...0.15.1)
-
-> 16 April 2021
-
-- 🚀RELEASE v0.15.1 [`a85db7c`](https://git.odit.services/lfk/frontend/commit/a85db7cb3f89881794e37a66ecd822f8ad5873f1)
-- Merge pull request '🐞🐳 fix Dockerfile' (#138) from bugfix/136-opacity_reactivity into dev [`2bd3779`](https://git.odit.services/lfk/frontend/commit/2bd3779839de16a89b91a3da93033e2a2b742ab7)
-- 🚚 move to tailwind [`07ac041`](https://git.odit.services/lfk/frontend/commit/07ac041d69b3b1810e5db538b53fe62084490f7a)
-- 🐞🐳 fix Dockerfile [`303e33c`](https://git.odit.services/lfk/frontend/commit/303e33cafb4a1be01e4c4b43f46ff0c651cb4620)
-- Dockerfile now uses selfhosted registry [`b4e689d`](https://git.odit.services/lfk/frontend/commit/b4e689dddf0b93a2794aa30ea83e8c6505d6bbfd)
-- new license file version [CI SKIP] [`98a0b03`](https://git.odit.services/lfk/frontend/commit/98a0b036c5490b4bc4992e83f3bca02be39927fa)
-- Merge pull request 'Opacity import fix bugfix/136-opacity_reactivity' (#137) from bugfix/136-opacity_reactivity into dev [`fb3f30f`](https://git.odit.services/lfk/frontend/commit/fb3f30fb1024de61ce1c541dae90374454f6ef96)
-- Added bs import fix [`6213952`](https://git.odit.services/lfk/frontend/commit/621395200751c2d42b9ad44c77e84bda03b62e83)
-
-#### [0.15.0](https://git.odit.services/lfk/frontend/compare/0.14.0...0.15.0)
-
-> 15 April 2021
-
-- 🚀RELEASE v0.15.0 [`5c02028`](https://git.odit.services/lfk/frontend/commit/5c02028841c68d9a284bf6971eec2b6bc2fdf1f3)
-- Merge pull request 'Mark donations as payed feature/133-donation_payments' (#135) from feature/133-donation_payments into dev [`c561b53`](https://git.odit.services/lfk/frontend/commit/c561b536705a68215d9c0a6b320587d1647bf57f)
-- Sorted translations [`c7a858e`](https://git.odit.services/lfk/frontend/commit/c7a858eed7962294bc9df3c92ce2e46b0a354796)
-- Added total donation amount to donor overview [`e42ea94`](https://git.odit.services/lfk/frontend/commit/e42ea943b7821d433fe21599edbd9f76c3128ef2)
-- Added Add Payment button to donor overview [`6e6e8b2`](https://git.odit.services/lfk/frontend/commit/6e6e8b26171f16542c101520800b4b6ea7c023d3)
-- You can now open a modal to add a payment to a donation from the donation overview [`a943aaf`](https://git.odit.services/lfk/frontend/commit/a943aaf5fce8f113dd967d3842e2b0d7d50604e9)
-- You can now add payments from the donation overview [`1dbab03`](https://git.odit.services/lfk/frontend/commit/1dbab03fe73b5e0fc011f9b0af7199bd71bc79c5)
-- Added payment updating via detail [`bdcf5d3`](https://git.odit.services/lfk/frontend/commit/bdcf5d3fc08d250377226a253642d79b2e82d624)
-- Added **all** missing toast translations [`de5aa92`](https://git.odit.services/lfk/frontend/commit/de5aa9237d261b5d47a8def35afa7f8e0089aea6)
-- You can now mark fixed donations as already paid on creation [`3d3a10a`](https://git.odit.services/lfk/frontend/commit/3d3a10aafb16d371be9471eb5172f9251fb2583f)
-- Added translations 🌎 [`d015f97`](https://git.odit.services/lfk/frontend/commit/d015f9739570c44a7a2fe6ba248c9a45c3047c62)
-- Changed top info style for donation overview [`4c2c24a`](https://git.odit.services/lfk/frontend/commit/4c2c24af2ca5c2874a583b0fd93bee147a17f449)
-- Added paid donation amount and status to donation detail [`5645eea`](https://git.odit.services/lfk/frontend/commit/5645eeaafaa4254edf1a81bc597ce0c7a9b03ff0)
-- Added total donation amount to donation overview [`961477d`](https://git.odit.services/lfk/frontend/commit/961477d5224bc44b552d2fc2851d8514116f4e20)
-- Fixed chante recognition bug for fixed donation [`0f0aae7`](https://git.odit.services/lfk/frontend/commit/0f0aae7ba4cf5dfab15d56ce48edbdbc7cb7e403)
-- Added total donation amount to donor detail [`a5f7101`](https://git.odit.services/lfk/frontend/commit/a5f71015a6557d664e9d3f505613352792fc38cb)
-- Added msiisng runner id conversion [`5761815`](https://git.odit.services/lfk/frontend/commit/57618156b49b2b0f0274f2126fef36a017d90022)
-- AddDonationModal - vertical alignment for paid status [`18acac8`](https://git.odit.services/lfk/frontend/commit/18acac83bc6532e14d36b3399d867e026d0c88ac)
-- Added missing updated comparison [`04a3038`](https://git.odit.services/lfk/frontend/commit/04a3038369f2717c43459318b7b5754ebbaa9e45)
-- DonationsOverview contrast on action [`d7d4447`](https://git.odit.services/lfk/frontend/commit/d7d44470bb08ac06594bc400608c17eeacb0434b)
-- Fixed typo [`4c0886a`](https://git.odit.services/lfk/frontend/commit/4c0886a5d9b91439967bc8f66b09a57177f967d0)
-- Fixed styling [`865254d`](https://git.odit.services/lfk/frontend/commit/865254d646b5f7de15720551c67ae649601cbcd2)
-- Changed top info style for donation detail [`000fc97`](https://git.odit.services/lfk/frontend/commit/000fc97beb14427f69d421ff2c96975dbbdc7a3a)
-
-#### [0.14.0](https://git.odit.services/lfk/frontend/compare/0.13.1...0.14.0)
-
-> 14 April 2021
-
-- Merge pull request 'added donor receipt list download to DonorsOverview' (#134) from feature/132-export-donors-receipt-list into dev [`#132`](https://git.odit.services/lfk/frontend/issues/132)
-- Sorted translations 🌎 [`c6c9751`](https://git.odit.services/lfk/frontend/commit/c6c97516b3981ef580d620c0c8a6fcc42f26facd)
-- Fixed typos in translations [`03676b2`](https://git.odit.services/lfk/frontend/commit/03676b2894892c3559118b93e969c063b53b081e)
-- added donor receipt list download to DonorsOverview [`d241ca5`](https://git.odit.services/lfk/frontend/commit/d241ca569838abbe9581fbd319f7f3b563cb7dcc)
-- 🚀RELEASE v0.14.0 [`9c5fc6b`](https://git.odit.services/lfk/frontend/commit/9c5fc6b61c0bb2a6d831d4a23ef8679c6e68c6a1)
-- ⏫ general version bump [`18f151c`](https://git.odit.services/lfk/frontend/commit/18f151c1fb878a74c3d1a2c2a2debf7913739417)
-- new license file version [CI SKIP] [`302caf0`](https://git.odit.services/lfk/frontend/commit/302caf015f88f77e2b2ae2b67680e79f987ad81e)
-- Switched to selfhosted images [`112eb29`](https://git.odit.services/lfk/frontend/commit/112eb29f932cd936f1d6c2308dcaeaf8cb642490)
-- ⏫ bump @odit/lfk-client-js@0.11.0 [`9ca57fa`](https://git.odit.services/lfk/frontend/commit/9ca57fac2eeabbf25142a507fb9c0fa3c90b4e74)
-- replace donationAmount with paidDonationAmount [`e90e56d`](https://git.odit.services/lfk/frontend/commit/e90e56d8b26aef23aba2bbb0c3942ba4d7feb224)
-
-#### [0.13.1](https://git.odit.services/lfk/frontend/compare/0.13.0...0.13.1)
-
-> 11 April 2021
-
-- 🚀RELEASE v0.13.1 [`b512cf8`](https://git.odit.services/lfk/frontend/commit/b512cf86674f1c60b5ac790985ededdfd6554185)
-- For await fix [`a24d292`](https://git.odit.services/lfk/frontend/commit/a24d2923c6e6da90d610c05183d29d47eaf2ed30)
-
-#### [0.13.0](https://git.odit.services/lfk/frontend/compare/0.12.5...0.13.0)
-
-> 11 April 2021
-
-- 🚀RELEASE v0.13.0 [`467808a`](https://git.odit.services/lfk/frontend/commit/467808abefe127dac66a2837fcce3197dddb140f)
-- Merge pull request 'Better org pdf generation feature/130-org_doc_splitting' (#131) from feature/130-org_doc_splitting into dev [`861f1f2`](https://git.odit.services/lfk/frontend/commit/861f1f221653283e7586aa2c67b205337fd44398)
-- Org card generation now runs in sequence [`fef14b6`](https://git.odit.services/lfk/frontend/commit/fef14b6e4fb47ad92da61de91fedce96aea26b2c)
-- Org certificate generation now runs in sequence [`509b22b`](https://git.odit.services/lfk/frontend/commit/509b22bea0dd3e4446e6ecc37d27644e9bf2ad50)
-- Org contract generation now runs in sequence [`01d2a7e`](https://git.odit.services/lfk/frontend/commit/01d2a7e6aa709b3f2d71575f705fc962e97e2742)
-- Emergency document server url change [`5476808`](https://git.odit.services/lfk/frontend/commit/5476808683a919bc34dbaea1f1ed276d49750096)
-- Fixed const -> let [`7447b2f`](https://git.odit.services/lfk/frontend/commit/7447b2f4c134a585905db6733093eab13e6f7c47)
-- Hotfix: Org * generation🐞 [`ac586fe`](https://git.odit.services/lfk/frontend/commit/ac586fec5abd324d590ba99cdfe8ddddefbf95e6)
-
-#### [0.12.5](https://git.odit.services/lfk/frontend/compare/0.12.4...0.12.5)
-
-> 8 April 2021
-
-- 🚀RELEASE v0.12.5 [`331d737`](https://git.odit.services/lfk/frontend/commit/331d737796c82454b1c19fa1840ccc20e36d2626)
-- Merge pull request 'Added runner team's parentorg name to runenr overciew' (#129) from feature/128-runner_orgs into dev [`ef81b8a`](https://git.odit.services/lfk/frontend/commit/ef81b8adf9bef685a55936d7544bf645c0d6ecbe)
-- Switched to html entity [`8a7d635`](https://git.odit.services/lfk/frontend/commit/8a7d635cef2d465e70c84e1f7a7b90b98a8dbab1)
-- Added runner team's parentorg name to runenr overciew [`4c259c1`](https://git.odit.services/lfk/frontend/commit/4c259c1eef2b0166ce6a8493d0c9e9d5ede11146)
-
 #### [0.12.4](https://git.odit.services/lfk/frontend/compare/0.12.3...0.12.4)
 
-> 8 April 2021
-
-- 🚀RELEASE v0.12.4 [`5b4ede5`](https://git.odit.services/lfk/frontend/commit/5b4ede5e2f6a26b475a7a4b430a4146d21fb9671)
 - 🚑 [HOTFIX] - drop "svelte-infinite-loading" [`d0ab3dd`](https://git.odit.services/lfk/frontend/commit/d0ab3dda78bbad2cea18a2491056530897d56607)
 
 #### [0.12.3](https://git.odit.services/lfk/frontend/compare/0.12.2...0.12.3)
@@ -1329,7 +1058,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - init [`32357ec`](https://git.odit.services/lfk/frontend/commit/32357ece0a7195ea1135c9c3e4c6c84323f95b4d)
 - tmp [`1b7173c`](https://git.odit.services/lfk/frontend/commit/1b7173cda9134ee8058a00bdc030defa80d46bfc)
 - Login - move to env.js import [`8ef0b21`](https://git.odit.services/lfk/frontend/commit/8ef0b21819309752c573d0485f6514152fb684e6)
-- initial commit [`4bb3bae`](https://git.odit.services/lfk/frontend/commit/4bb3bae4e6fc89c35a8a2b36b7cd6e6d47958eae)
+-  initial commit [`4bb3bae`](https://git.odit.services/lfk/frontend/commit/4bb3bae4e6fc89c35a8a2b36b7cd6e6d47958eae)
 - Initial license export [`4c96b9a`](https://git.odit.services/lfk/frontend/commit/4c96b9a3e04dbb7c021c71aa8828a29248509fbe)
 - 🚚 move to tinro svelte router [`a50ea15`](https://git.odit.services/lfk/frontend/commit/a50ea15b38023b867a9f7757e973184cbcdd2457)
 - new Dashboard [`7270ce9`](https://git.odit.services/lfk/frontend/commit/7270ce9d32869abd4f6ac65ab7c2c87363633cbe)

Dockerfile

@@ -1,15 +1,14 @@
-FROM registry.odit.services/hub/library/node:19.7.0-alpine3.16 as build
+FROM node:15.5.1-alpine3.12
-ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
-
+COPY package.json ./
-COPY package.json pnpm-lock.yaml *.config.js *.config.cjs index.html ./
+RUN yarn
-RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8 && pnpm i
+COPY package.json *.config.js index.html ./
-
 COPY src ./src
 COPY public ./public
-RUN pnpm build
+RUN yarn build
-
 # final image
-FROM registry.odit.services/library/nginx-brotli:3.15 as final
+FROM alpine
-COPY --from=build /app/dist /usr/share/nginx/html
+COPY --from=0 /app/dist /app
+FROM fholzer/nginx-brotli:v1.19.1
+COPY --from=1 /app /usr/share/nginx/html
 COPY ./nginx.conf /etc/nginx/nginx.conf

index.html

@@ -13,7 +13,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.17.3-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.12.4-RELEASE_INFO</span>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <script src="/env.js"></script>
   <script type="module" src="/src/main.js"></script>

nginx.conf

@@ -6,11 +6,6 @@ http {
     server {
         error_page 404 /index.html;
         root /usr/share/nginx/html;
-        location /assets {
-            expires 1y;
-            log_not_found off;
-            access_log off;
-        }
         location = /index.html {
             add_header Cache-Control 'no-store';
         }

package.json

@@ -1,64 +1,56 @@
-{
+{
-	"name": "@odit/lfk-frontend",
+	"name": "@odit/lfk-frontend",
-	"version": "0.17.3",
+	"version": "0.12.4",
-	"type": "module",
+	"scripts": {
-	"scripts": {
+		"i18n-order": "node order.js",
-		"i18n-order": "node order.js",
+		"dev": "vite",
-		"dev": "vite",
+		"build": "vite build",
-		"build": "vite build",
+		"release": "release-it",
-		"release": "release-it",
+		"licenses:export": "license-exporter --json -o public"
-		"licenses:export": "license-exporter --json -o public"
+	},
-	},
+	"license": "CC-BY-NC-SA-4.0",
-	"license": "CC-BY-NC-SA-4.0",
+	"devDependencies": {
-	"devDependencies": {
+		"check-password-strength": "2.0.2",
-		"@odit/license-exporter": "0.0.12",
+		"@odit/lfk-client-js": "0.10.1",
-		"@sveltejs/vite-plugin-svelte": "2.0.4",
+		"@odit/license-exporter": "0.0.11",
-		"@types/html-minifier": "4.0.2",
+		"@sveltejs/vite-plugin-svelte": "1.0.0-next.6",
-		"auto-changelog": "2.4.0",
+		"@types/html-minifier": "4.0.0",
-		"autoprefixer": "10.4.14",
+		"auto-changelog": "2.2.1",
-		"html-minifier": "4.0.0",
+		"autoprefixer": "10.2.5",
-		"postcss": "8.4.21",
+		"csvtojson": "2.0.10",
-		"release-it": "15.10.1",
+		"gridjs": "3.4.0",
-		"svelte-select": "3.17.0",
+		"html-minifier": "4.0.0",
-		"tailwindcss": "3.3.1",
+		"localforage": "1.9.0",
-		"vite": "4.2.1"
+		"marked": "2.0.1",
-	},
+		"release-it": "14.5.1",
-	"release-it": {
+		"svelte": "3.37.0",
-		"git": {
+		"svelte-focus-trap": "1.2.0",
-			"commit": true,
+		"svelte-i18n": "3.3.9",
-			"requireCleanWorkingDir": false,
+		"svelte-preprocess": "4.7.0",
-			"commitMessage": "🚀RELEASE v${version}",
+		"svelte-select": "3.17.0",
-			"push": false,
+		"tailwindcss": "2.1.1",
-			"tag": true,
+		"tinro": "0.6.1",
-			"tagName": null,
+		"toastify-js": "1.10.0",
-			"tagAnnotation": "v${version}"
+		"validator": "13.5.2",
-		},
+		"vite": "2.1.5",
-		"npm": {
+		"vite-plugin-windicss": "0.12.5",
-			"publish": false
+		"xlsx": "0.16.9"
-		},
+	},
-		"hooks": {
+	"release-it": {
-			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add index.html && node order.js  && git add src/locales"
+		"git": {
-		}
+			"commit": true,
-	},
+			"requireCleanWorkingDir": false,
-	"dependencies": {
+			"commitMessage": "🚀RELEASE v${version}",
-		"@odit/lfk-client-js": "0.14.3",
+			"push": false,
-		"@paralleldrive/cuid2": "^2.2.0",
+			"tag": true,
-		"@tanstack/svelte-table": "^8.8.5",
+			"tagName": null,
-		"@tanstack/table-core": "^8.8.5",
+			"tagAnnotation": "v${version}"
-		"@vincjo/datatables": "^1.5.2",
+		},
-		"check-password-strength": "2.0.7",
+		"npm": {
-		"csvtojson": "2.0.10",
+			"publish": false
-		"gridjs": "3.4.0",
+		},
-		"localforage": "1.10.0",
+		"hooks": {
-		"marked": "2.0.3",
+			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add index.html && node order.js  && git add src/locales"
-		"svelte": "3.58.0",
+		}
-		"svelte-i18n": "3.6.0",
+	}
-		"tinro": "0.6.12",
+}
-		"toastify-js": "1.12.0",
-		"validator": "13.9.0",
-		"xlsx": "0.18.5"
-	},
-	"volta": {
-		"node": "19.7.0"
-	}
-}

postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
-};

public/env.sample.js

@@ -1,6 +1,5 @@
 const config = {
 	baseurl: 'http://localhost:4010',
-	baseurl_documentserver: 'http://localhost:4010/documents',
 	documentserver_key: 'NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe',
 	// optional
 	default_username: 'demo',

src/App.svelte

@@ -72,8 +72,6 @@
   import Scans from "./components/scans/Scans.svelte";
   import ScanDetail from "./components/scans/ScanDetail.svelte";
   import Cards from "./components/cards/Cards.svelte";
-	import StatsClients from "./components/statsclients/StatsClients.svelte";
-	import StatsClientDetail from "./components/statsclients/StatsClientDetail.svelte";
   store.init();
 </script>
 
@@ -208,14 +206,6 @@
             <ScanStationDetail {params} />
           </Route>
         </Route>
-        <Route path="/statsclients/*">
-          <Route path="/">
-            <StatsClients />
-          </Route>
-          <Route path="/:clientid" let:params>
-            <StatsClientDetail {params} />
-          </Route>
-        </Route>
         <Route path="/about">
           <About />
         </Route>

src/components/auth/Login.svelte

@@ -76,7 +76,7 @@
       // last login was not processed yet
     } else {
       Toastify({
-        text: $_('please-wait-a-moment-your-login-is-still-being-processed'),
+        text: "chill...",
         duration: 1500,
         backgroundColor:
           "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",

src/components/base/importfixes.svelte

@@ -1,6 +0,0 @@
-<!--
-    Temporary tailwind import fixes for classes that wouldn't be directly used otherwise. 
-    Or as others may call it: Real big bullshit time.
-    Issue: https://git.odit.services/lfk/frontend/issues/136
- -->
-<div class="opacity-50"></div>

src/components/cards/AddCardBulkModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import { RunnerCardService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   export let bulk_modal_open;
@@ -77,7 +77,7 @@
             duration: -1,
           }).showToast();
           fetch(
-            `${config.baseurl_documentserver}/cards?&download=true&key=${config.documentserver_key}`,
+            `${config.baseurl}/documents/cards?&download=true&key=${config.documentserver_key}`,
             {
               method: "POST",
               headers: {
@@ -133,7 +133,7 @@
 {#if bulk_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       bulk_modal_open = false;

src/components/cards/AddCardModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import {
     RunnerCardService,
     RunnerService,
@@ -11,37 +11,22 @@
   import Toastify from "toastify-js";
   export let modal_open;
   export let current_cards;
-
+  const getRunnerLabel = (option) =>
-  const getRunnerLabel = (option) => {
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-    if (option.middlename) {
+  const filterRunners = (label, filterText, option) =>
-      return option.firstname + " " + option.middlename + " " + option.lastname;
+    label.toLowerCase().includes(filterText.toLowerCase()) ||
-    }
+    option.value.toString().startsWith(filterText.toLowerCase());
-    return option.firstname + " " + option.lastname;
-  };
-
-  const filterRunners = (label, filterText, option) => {
-    if (filterText.startsWith("#")) {
-      return option.value.id == parseInt(filterText.replace("#",""))
-    }
-    return (
-      label.toLowerCase().includes(filterText.toLowerCase()) ||
-      option.value.toString().startsWith(filterText.toLowerCase())
-    );
-  };
   function focus(el) {
     el.focus();
   }
   $: runner = 0;
+  $: runners = [];
   $: enabled = true;
   $: processed_last_submit = true;
-
-  let loading = true;
-  let runners = [];
   RunnerService.runnerControllerGetAll().then((val) => {
     runners = val.map((r) => {
       return { label: getRunnerLabel(r), value: r };
     });
-    loading = false;
   });
   $: createbtnenabled = true;
   (() => {
@@ -97,82 +82,65 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}
+    }}>
-  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
+          data-id="modal_backdrop" />
-        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
+        aria-hidden="true">&#8203;</span>
-      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline"
+        aria-labelledby="modal-headline">
-      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-            >
               <svg
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
-                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
                   fill="currentColor"
-                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
+                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
-                /></svg
-              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("create-a-new-card")}
+                {$_('create-a-new-card')}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_("you-can-provide-a-runner-but-you-dont-have-to")}
+                  {$_('you-can-provide-a-runner-but-you-dont-have-to')}
-                  {$_(
+                  {$_('if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button')}
-                    "if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button"
-                  )}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="donor"
-                    class="block text-sm font-medium text-gray-700"
+                    class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
-                    >{$_("runner")}</label
-                  >
                   <Select
                     containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-                    itemFilter={(label, filterText, option) =>
+                    itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
-                      filterRunners(label, filterText, option)}
                     items={runners}
-                    bind:loading
+                    showChevron={true}
-                    showChevron={!loading}
+                    placeholder={$_('search-for-runner-by-name-or-id')}
-                    placeholder={$_("search-for-runner-by-name-or-id")}
+                    noOptionsMessage={$_('no-runners-found')}
-                    noOptionsMessage={$_("no-runners-found")}
+                    on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
-                    on:select={(selectedValue) =>
+                    on:clear={() => (runner = null)} />
-                      (runner = selectedValue.detail.value.id)}
-                    on:clear={() => (runner = null)}
-                  />
                 </div>
               </div>
             </div>
@@ -184,18 +152,16 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-          >
+            {$_('create')}
-            {$_("create")}
           </button>
           <button
             on:click={() => {
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-          >
+            {$_('cancel')}
-            {$_("cancel")}
           </button>
         </div>
       </div>

src/components/cards/CardDetailModal.svelte

@@ -1,11 +1,10 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
   import Select from "svelte-select";
   import Toastify from "toastify-js";
-  import { createEventDispatcher } from "svelte";
   export let edit_modal_open;
   export let current_cards;
   export let runner = {};
@@ -13,26 +12,15 @@
   export let original_data = {};
   const getRunnerLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-    const filterRunners = (label, filterText, option) => {
+  const filterRunners = (label, filterText, option) =>
-    if (filterText.startsWith("#")) {
+    label.toLowerCase().includes(filterText.toLowerCase()) ||
-      return option.value.id == parseInt(filterText.replace("#",""))
+    option.value.toString().startsWith(filterText.toLowerCase());
-    }
-    return (
-      label.toLowerCase().includes(filterText.toLowerCase()) ||
-      option.value.toString().startsWith(filterText.toLowerCase())
-    );
-  };
-
   function focus(el) {
     el.focus();
   }
   $: runners = [];
   $: enabled = true;
   $: processed_last_submit = true;
-  const dispatch = createEventDispatcher();
-  function dataUpdated() {
-		dispatch('dataUpdated',);
-	}
   RunnerService.runnerControllerGetAll().then((val) => {
     runners = val.map((r) => {
       return { label: getRunnerLabel(r), value: r };
@@ -77,7 +65,6 @@
           }).showToast();
           current_cards[current_cards.findIndex((c) => c.id === id)] = result;
           current_cards = current_cards;
-          dataUpdated();
         })
         .catch((err) => {
           //
@@ -94,7 +81,7 @@
 {#if edit_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       edit_modal_open = false;

src/components/cards/CardsOverview.svelte

@@ -3,270 +3,279 @@
   import { RunnerCardService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
-  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
   import CardsEmptyState from "./CardsEmptyState.svelte";
   import CardDetailModal from "./CardDetailModal.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import ThFilterStatus from "./ThFilterStatus.svelte";
-  import ThFilterRunner from "./ThFilterRunner.svelte";
   export let edit_modal_open = false;
   export let runner = {};
   export let editable = {};
   export let original_data = {};
   export let current_cards = [];
-  const handler = new DataHandler(current_cards, { rowsPerPage: 50 });
+  $: filtered_cards = current_cards.filter(function (c) {
-  const rows = handler.getRows();
+    if (
+      c.code.toLowerCase().includes(searchvalue_lowercase) ||
+      c.runner?.firstname.toLowerCase().includes(searchvalue_lowercase) ||
+      c.runner?.middlename.toLowerCase().includes(searchvalue_lowercase) ||
+      c.runner?.lastname.toLowerCase().includes(searchvalue_lowercase) ||
+      should_display_based_on_id(c.id)
+    ) {
+      return true;
+    }
+  });
+  $: searchvalue = "";
+  $: searchvalue_lowercase = searchvalue.toLowerCase();
   $: active_deletes = [];
-  $: cards_show = generate_cards.length > 0;
+  $: cards_show = current_cards.some((r) => r.is_selected === true);
-  $: generate_cards = [];
+  $: generate_cards = current_cards.filter((r) => r.is_selected === true);
   const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
     (val) => {
       current_cards = val;
-      handler.setRows(val);
     }
   );
+  function should_display_based_on_id(id) {
+    if (searchvalue.toString().slice(-1) === "*") {
+      return id.toString().startsWith(searchvalue.replace("*", ""));
+    }
+    return id.toString() === searchvalue;
+  }
   const getRunnerLabel = (option) =>
-    option?.firstname +
+    option?.firstname + " " + (option?.middlename || "") + " " + (option?.lastname || "{$_('non-blanko')}");
-    " " +
-    (option?.middlename || "") +
-    " " +
-    (option?.lastname || "{$_('non-blanko')}");
   function open_edit_modal(card) {
-    if (card.runner?.id) {
+    if(card.runner?.id){
       runner = Object.assign(
         { runner },
         { label: getRunnerLabel(card.runner), value: card.runner }
       );
       card.runner = card.runner.id;
-    } else {
+    }
-      card.runner = null;
+    else{
-      runner = null;
+      card.runner=null;
+      runner = null
     }
     editable = Object.assign(editable, card);
     original_data = Object.assign(original_data, card);
     edit_modal_open = true;
   }
+// -----------------
+  let scrollTop = 0;
+  $: rendered = filtered_cards;
+  let innerHeight = 0;
+  let ele;
+  $: updateSlice(scrollTop);
+  $: innerHeight = `${filtered_cards.length * 25}px`;
+  $: if (ele) updateSlice();
+  function updateSlice() {
+    const height = ele ? parseInt(ele.clientHeight) : 100;
+    const init = scrollTop / 25;
+    const end = Math.ceil((scrollTop + height) / 25);
+    rendered = filtered_cards.slice(init, end + 15);
+  }
+  function updateScroll($event) {
+    scrollTop = $event.target.scrollTop;
+  }
 </script>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:UPDATE")}
+<style>
+  table tbody {
+  display: block;
+  overflow-y: scroll;
+}
+
+table thead, table tbody tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+</style>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
   <CardDetailModal
     bind:current_cards
     bind:edit_modal_open
     bind:runner
     bind:editable
-    bind:original_data
+    bind:original_data />
-    on:dataUpdated={handler.setRows(current_cards)}
-  />
 {/if}
 
-{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
+{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
   {#await cards_promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert"
+      role="alert">
-    >
+      <p class="font-bold">{$_('loading-cards')}</p>
-      <p class="font-bold">{$_("loading-cards")}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
   {:then}
     {#if current_cards.length === 0}
       <CardsEmptyState />
     {:else}
-      <div class="h-12 mt-1">
+      <input
-        {#if cards_show}
+        type="search"
-          <button
+        bind:value={searchvalue}
-            type="button"
+        placeholder={$_('datatable.search')}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+        aria-label={$_('datatable.search')}
-            id="options-menu"
+        class="gridjs-input gridjs-search-input mb-4" />
-            on:click={async () => {
+        <div class="h-12">
-              const prom = [];
+          <GenerateRunnerCards
-              for (const card of generate_cards) {
+            bind:cards_show
-                prom.push(
+            bind:generate_cards />
-                  RunnerCardService.runnerCardControllerRemove(card.id, true)
+        </div>
-                );
+      <div
-              }
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-              await Promise.all(prom);
+        <table class="divide-y divide-gray-200 w-full">
-              Toastify({
+          <thead class="bg-gray-50">
-                text: $_("cards-deleted"),
-                duration: 3500,
-                backgroundColor:
-                  "linear-gradient(to right, #00b09b, #96c93d)",
-              }).showToast();
-              //TODO: Delete cards from table
-            }}
-          >
-            {$_("delete-cards")}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="w-5 h-5"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-              />
-            </svg>
-          </button>
-        {/if}
-        <GenerateRunnerCards bind:cards_show bind:generate_cards />
-      </div>
-      <Datatable {handler}>
-        <table>
-          <thead>
             <tr>
-              <th style="border-bottom: 1px solid #ddd;">
+              <th
-                <input
+                scope="col"
-                  type="checkbox"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                <span
-                  checked={generate_cards.length == current_cards.length}
                   on:click={() => {
-                    if (generate_cards.length != current_cards.length) {
+                    const newstate = !current_cards.some((r) => r.is_selected === true);
-                      generate_cards = current_cards;
+                    current_cards = current_cards.map((r) => {
-                    } else {
+                      r.is_selected = newstate;
-                      generate_cards = [];
+                      return r;
-                    }
+                    });
                   }}
-                />
+                  class="underline cursor-pointer select-none">{#if current_cards.some((r) => r.is_selected === true)}
+                    {$_('deselect-all')}
+                  {:else}{$_('select-all')}{/if}
+                </span>
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('code')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('runner')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('status')}
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">{$_('action')}</span>
               </th>
-              <Th {handler} orderBy="code">{$_("code")}</Th>
-              <Th {handler} orderBy="runner">{$_("runner")}</Th>
-              <Th {handler} orderBy="status">{$_("status")}</Th>
-              <th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
-            </tr>
-            <tr>
-              <th style="border-bottom: 1px solid #ddd;" />
-              <ThFilter {handler} filterBy="code" />
-              <ThFilterRunner {handler} />
-              <ThFilterStatus {handler} />
-              <th style="border-bottom: 1px solid #ddd;" />
             </tr>
           </thead>
-          <tbody>
+          <tbody class="divide-y divide-gray-200 virtual-wrapper"
-            {#each $rows as row}
+  on:scroll={updateScroll}
-              <tr>
+  style="height: 70vh; width:100%"
-                <td>
+  bind:this={ele}
-                  <input
+          >
-                    type="checkbox"
+    {#each filtered_cards as card, index}
-                    class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+    {#if card.code
-                    checked={generate_cards.filter((i) => i.id == row.id)
+      .toLowerCase()
-                      .length > 0}
+      .includes(
-                    on:click={() => {
+        searchvalue.toLowerCase()
-                      if (
+      ) || card.runner?.firstname
-                        generate_cards.findIndex((i) => i.id == row.id) == -1
+        .toLowerCase()
-                      ) {
+        .includes(
-                        generate_cards.push(row);
+          searchvalue.toLowerCase()
-                        generate_cards = generate_cards;
+        ) || card.runner?.middlename
-                      } else {
+        .toLowerCase()
-                        generate_cards = generate_cards.filter(
+        .includes(
-                          (r) => r.id != row.id
+          searchvalue.toLowerCase()
-                        );
+        ) || card.runner?.lastname
-                      }
+        .toLowerCase()
-                      console.log(generate_cards);
+        .includes(
-                    }}
+          searchvalue.toLowerCase()
-                  />
+        ) || should_display_based_on_id(card.id)}
-                </td>
+      <tr data-rowid="card_{card.id}">
-                <td>{row.code}</td>
+        <td class="px-6 py-4 whitespace-nowrap">
-                <td>
+          <input
-                  {#if row.runner}
+            bind:checked={card.is_selected}
-                    <a
+            type="checkbox"
-                      href="../runners/{row.runner.id}"
+            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+        </td>
-                      >{row.runner.firstname}
+        <td class="px-6 py-4 whitespace-nowrap">
-                      {row.runner.middlename || ""}
+          <div class="flex items-center">{card.code}</div>
-                      {row.runner.lastname}</a
+        </td>
-                    >
+        <td class="px-6 py-4 whitespace-nowrap">
-                  {:else}{$_("non-blanko")}{/if}
+          <div class="flex items-center">
-                </td>
+            {#if card.runner}
-                <td>
+              <a
-                  {#if row.enabled}
+                href="../runners/{card.runner.id}"
-                    <span
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+                {card.runner.middlename || ''}
-                      >{$_("enabled")}</span
+                {card.runner.lastname}</a>
-                    >
+            {:else}{$_('non-blanko')}{/if}
-                  {:else}
+          </div>
-                    <span
+        </td>
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+        <td class="px-6 py-4 whitespace-nowrap">
-                      >{$_("disabled")}</span
+          <div class="flex items-center">
-                    >
+            {#if card.enabled}
-                  {/if}
+              <span
-                </td>
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
-                <td>
+            {:else}
-                  {#if active_deletes[row.id] === true}
+              <span
-                    <button
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
-                      on:click={() => {
+            {/if}
-                        active_deletes[row.id] = false;
+          </div>
-                      }}
+        </td>
-                      tabindex="0"
+
-                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+        {#if active_deletes[card.id] === true}
-                      >{$_("cancel-delete")}</button
+          <td
-                    >
+            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                    <button
+            <button
-                      on:click={() => {
+              on:click={() => {
-                        RunnerCardService.runnerCardControllerRemove(
+                active_deletes[card.id] = false;
-                          row.id,
+              }}
-                          true
+              tabindex="0"
-                        )
+              class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                          .then((resp) => {
+            <button
-                            current_cards = current_cards.filter(
+              on:click={() => {
-                              (obj) => obj.id !== row.id
+                RunnerCardService.runnerCardControllerRemove(card.id, false).then(
-                            );
+                  (resp) => {
-                          })
+                    current_cards = current_cards.filter(
-                          .catch((err) => {});
+                      (obj) => obj.id !== card.id
-                      }}
+                    );
-                      tabindex="0"
+                    Toastify({
-                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                      text: $_('card-deleted'),
-                      >{$_("confirm-delete")}</button
+                      duration: 500,
-                    >
+                      backgroundColor:
-                  {:else}
+                        'linear-gradient(to right, #00b09b, #96c93d)',
-                    <button
+                    }).showToast();
-                      on:click={() => {
+                  }
-                        open_edit_modal(row);
+                );
-                      }}
+              }}
-                      class="text-indigo-600 hover:text-indigo-900"
+              tabindex="0"
-                      >{$_("details")}</button
+              class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-                    >
+          </td>
-                    {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:DELETE")}
+        {:else}
-                      <button
+          <td
-                        on:click={() => {
+            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                          active_deletes[row.id] = true;
+            <button
-                        }}
+              on:click={() => {
-                        tabindex="0"
+                open_edit_modal(card);
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+              }}
-                        >{$_("delete")}</button
+              class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
-                      >
+            {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
-                    {/if}
+              <button
-                  {/if}
+                on:click={() => {
-                </td>
+                  active_deletes[card.id] = true;
-              </tr>
+                }}
-            {/each}
+                tabindex="0"
+                class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+            {/if}
+          </td>
+        {/if}
+      </tr>
+    {/if}
+    {/each}
           </tbody>
         </table>
-      </Datatable>
+      </div>
     {/if}
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
       <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_("general_promise_error")}</b>
+        <b class="capitalize">{$_('general_promise_error')}</b>
         {error}
       </span>
     </div>
   {/await}
 {/if}
-
-<style>
-  table tbody {
-    display: block;
-    overflow-y: scroll;
-  }
-
-  table thead,
-  table tbody tr {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
-  }
-</style>

src/components/cards/ThFilterRunner.svelte

@@ -1,57 +0,0 @@
-<script>
-  export let handler;
-  let filterValue = "";
-</script>
-
-<th>
-  <input
-    on:input={() => {
-      setTimeout(() => {
-        const v = filterValue.toLowerCase();
-        handler.filter(v, (c) => {
-          // if (v === "") {
-          //   return c;
-          // }
-
-          if (!c.runner && v === "blanko") {
-            return "blanko";
-          }
-
-          if (v.startsWith("#")) {
-            return `#${c.runner?.id}`;
-          }
-          if (c.runner) {
-            let runnerName = `${c.runner.firstname} ${c.runner.lastname}`;
-            if (c.runner.middlename) {
-              runnerName = `${c.runner.firstname} ${c.runner.middlename} ${c.runner.lastname}`;
-            }
-            runnerName = runnerName.toLowerCase();
-            return runnerName;
-          }
-          return "";
-        });
-      }, 150);
-    }}
-    bind:value={filterValue}
-    type="text"
-    name="runnerfilter"
-    id="runnerfilter"
-  />
-</th>
-
-<style>
-  th {
-    border-bottom: 1px solid #e0e0e0;
-  }
-  input {
-    margin: -1px 0 0 0;
-    padding: 0;
-    width: 100%;
-    height: 24px;
-    border: none;
-    text-align: left;
-    background: inherit;
-    outline: 0;
-    font-size: 14px;
-  }
-</style>

src/components/cards/ThFilterStatus.svelte

@@ -1,45 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  export let handler;
-  let selected = "all";
-</script>
-
-<th>
-  <select
-    on:input={() => {
-      setTimeout(() => {
-        if (`${selected}`.trim()) {
-          if (selected === "all") {
-            handler.filter("", "enabled");
-          } else {
-            handler.filter(selected, "enabled");
-          }
-        }
-      }, 50);
-    }}
-    bind:value={selected}
-    name="statusfilter"
-    id="statusfilter"
-  >
-    <option value="all">{$_("all")}</option>
-    <option value="true">{$_("enabled")}</option>
-    <option value="false">{$_("disabled")}</option>
-  </select>
-</th>
-
-<style>
-  th {
-    border-bottom: 1px solid #e0e0e0;
-  }
-  select {
-    margin: -1px 0 0 0;
-    padding: 0;
-    width: 100%;
-    height: 24px;
-    border: none;
-    text-align: left;
-    background: inherit;
-    outline: 0;
-    font-size: 14px;
-  }
-</style>

src/components/contacts/AddContactModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import {
     GroupContactService,
     RunnerTeamService,
@@ -86,7 +86,7 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: $_('contact-is-being-added'),
+        text: "Contact is being added...",
         duration: -1,
       }).showToast();
       let address = {};
@@ -123,7 +123,7 @@
           modal_open = false;
           //
           Toastify({
-            text: $_('contact-added'),
+            text: "Contact added",
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -145,7 +145,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/dashboard/Dashboard.svelte

@@ -256,26 +256,6 @@
           <span>{$_('scanstations')}</span>
         </a>
       {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/statsclients/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/statsclients/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"><path
-              fill="none"
-              d="M0 0h24v24H0z" />
-            <path
-              fill="currentColor"
-              d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
-          <span>{$_('statsclients')}</span>
-        </a>
-      {/if}
       <a
         class:bg-gray-100={$router.path === '/settings/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"

src/components/dashboard/MainDashContent.svelte

@@ -1,157 +1,22 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { StatsService } from "@odit/lfk-client-js";
+  import StatCards from "./StatCards.svelte";
-  import StatCards from "./StatCard.svelte";
   import store from "../../store";
-  import StatCard from "./StatCard.svelte";
   let navOpen = false;
-  const stats_promise = StatsService.statsControllerGet();
 </script>
 
 <div
   class="p-5 overflow-x-hidden"
   on:click={() => {
     navOpen = false;
-  }}
+  }}>
->
   <h1 class="text-3xl leading-tight">
-    <span class="font-extrabold">{$_("dashboard-title")}</span>
+    <span class="font-extrabold">{$_('dashboard-title')}</span>
     <span>
       -
-      {$_("dashboard-greeting")},
+      {$_('dashboard-greeting')},
-      <span class="text-blue-500"
+      <span
-        >{store.state.jwtinfo.userdetails.firstname}
+        class="text-blue-500">{store.state.jwtinfo.userdetails.firstname} {store.state.jwtinfo.userdetails.lastname}</span></span>
-        {store.state.jwtinfo.userdetails.lastname}</span
-      ></span
-    >
   </h1>
-  <h1>{$_("general-stats")}</h1>
+  <StatCards />
-  {#await stats_promise}
-    <div
-      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert"
-    >
-      <p class="font-bold">{$_("stats-are-being-loaded")}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
-    </div>
-  {:then stats}
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
-      <StatCard
-        title={$_("runners")}
-        value={stats.total_runners}
-        href="/runners/"
-      >
-        <svg
-          height="24"
-          width="24"
-          fill="currentColor"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          ><path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
-          /></svg
-        >
-      </StatCard>
-      <StatCard
-        title={$_("total-scans")}
-        value={stats.total_scans}
-        href="/scans/"
-      >
-        <svg
-          stroke="currentColor"
-          fill="currentColor"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          size="24"
-          class="stroke-current text-grey-500"
-          height="24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-          ><polyline points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg
-        >
-      </StatCard>
-      <StatCard
-        title={$_("total-donations")}
-        value={`${(stats.total_donation / 100).toFixed(2)} €`}
-        href="/donations/"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          fill="currentColor"
-          width="24"
-          ><path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
-          /></svg
-        >
-      </StatCard>
-      <StatCard
-        title={$_("total-distance")}
-        value={`${stats.total_distance / 1000} km`}
-        href="#"
-      >
-        <svg
-          fill="currentColor"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          width="24"
-          ><path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
-          /></svg
-        >
-      </StatCard>
-      <StatCard
-        title={$_("count_teams")}
-        value={stats.total_teams}
-        href="/teams/"
-      >
-        <svg
-          stroke="currentColor"
-          fill="none"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          size="24"
-          class="stroke-current text-grey-500"
-          height="24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-          ><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-          <circle cx="9" cy="7" r="4" />
-          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-          <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg
-        >
-      </StatCard>
-      <StatCard
-        title={$_("count_organizations")}
-        value={stats.total_orgs}
-        href="/orgs/"
-      >
-        <svg
-          height="24"
-          fill="currentColor"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z"
-          /></svg
-        >
-      </StatCard>
-    </div>
-  {:catch error}
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-      <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_("general_promise_error")}</b>
-        {error}
-      </span>
-    </div>
-  {/await}
 </div>

src/components/dashboard/StatCard.svelte

@@ -1,22 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-
-  export let href = "#"
-  export let title = "";
-  export let value = "";
-</script>
-
-<a href={href}>
-  <div
-    class="p-4 rounded-lg bg-white border border-grey-100">
-    <div class="flex flex-row items-center justify-between">
-      <div class="flex flex-col">
-        <div class="text-xs uppercase font-light text-grey-500">
-          {title}
-        </div>
-        <div class="text-xl font-bold">{value}</div>
-      </div>
-      <slot></slot>
-    </div>
-  </div>
-</a>

src/components/dashboard/StatCards.svelte

@@ -0,0 +1,165 @@
+<script>
+  import { StatsService } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  const stats_promise = StatsService.statsControllerGet();
+</script>
+
+<!--  -->
+<h1>{$_('general-stats')}</h1>
+{#await stats_promise}
+  <div
+    class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+    role="alert">
+    <p class="font-bold">{$_('stats-are-being-loaded')}</p>
+    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+  </div>
+{:then stats}
+  <div
+    class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
+    <a href="/runners/" class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('runners')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_runners}</div>
+          </div>
+          <svg
+            height="24"
+            width="24"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z" /></svg>
+        </div>
+      </div>
+    </a>
+    <div class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('total-scans')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_scans}</div>
+          </div><svg
+            stroke="currentColor"
+            fill="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            size="24"
+            class="stroke-current text-grey-500"
+            height="24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"><polyline
+              points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg>
+        </div>
+      </div>
+    </div>
+    <div class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('total-donations')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_donation} €</div>
+          </div><svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            fill="currentColor"
+            width="24"><path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z" /></svg>
+        </div>
+      </div>
+    </div>
+    <div class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('total-distance')}
+            </div>
+            <div class="text-xl font-bold">
+              {stats.total_distance / 1000}
+              km
+            </div>
+          </div>
+          <svg
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            width="24"><path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z" /></svg>
+        </div>
+      </div>
+    </div>
+    <a href="/teams/" class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('count_teams')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_teams}</div>
+          </div>
+          <svg
+            stroke="currentColor"
+            fill="none"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            size="24"
+            class="stroke-current text-grey-500"
+            height="24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"><path
+              d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+            <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
+        </div>
+      </div>
+    </a>
+    <a href="/orgs/" class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('count_organizations')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_orgs}</div>
+          </div>
+          <svg
+            height="24"
+            fill="currentColor"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z" /></svg>
+        </div>
+      </div>
+    </a>
+  </div>
+{:catch error}
+  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+    <span class="inline-block align-middle mr-8">
+      <b class="capitalize">{$_('general_promise_error')}</b>
+      {error}
+    </span>
+  </div>
+{/await}

src/components/donations/AddDonationModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import {
     DonationService,
     DonorService,
@@ -9,7 +9,6 @@
   } from "@odit/lfk-client-js";
   import Select from "svelte-select";
   import Toastify from "toastify-js";
-import { is_promise } from "svelte/internal";
   export let modal_open;
   export let current_donations;
   const getDonorLabel = (option) =>
@@ -25,7 +24,6 @@ import { is_promise } from "svelte/internal";
   $: donors = [];
   $: runners = [];
   $: is_fixed = false;
-  $: is_paid = false;
   DonorService.donorControllerGetAll().then((val) => {
     donors = val.map((r) => {
       return { label: getDonorLabel(r), value: r };
@@ -59,18 +57,14 @@ import { is_promise } from "svelte/internal";
       let amount_cent = Math.floor(amount_input * 100);
       processed_last_submit = false;
       const toast = Toastify({
-        text: $_('adding-donation'),
+        text: "adding donation",
         duration: -1,
       }).showToast();
       if (is_fixed) {
         let postdata = {
           donor,
           amount: amount_cent,
-          paidAmount: 0
         };
-        if(is_paid){
-          postdata.paidAmount = amount_cent;
-        }
         DonationService.donationControllerPostFixed(postdata)
           .then((result) => {
             donor = donors[0].id || 0;
@@ -79,7 +73,7 @@ import { is_promise } from "svelte/internal";
             modal_open = false;
             //
             Toastify({
-              text: $_('donation_added'),
+              text: "donation_added",
               duration: 500,
               backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
@@ -108,7 +102,7 @@ import { is_promise } from "svelte/internal";
             modal_open = false;
             //
             Toastify({
-              text: $_('donation_added'),
+              text: "donation_added",
               duration: 500,
               backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
@@ -129,7 +123,7 @@ import { is_promise } from "svelte/internal";
 </script>
 
 <style>
-  .toggle:before {
+  input:before {
     content: "";
     position: absolute;
     width: 1.25rem;
@@ -143,12 +137,12 @@ import { is_promise } from "svelte/internal";
     transition: 0.2s ease-in-out;
   }
 
-  .toggle:checked {
+  input:checked {
     /* @apply: bg-indigo-400; */
     background-color: #7f9cf5;
   }
 
-  .toggle:checked:before {
+  input:checked:before {
     left: 1.25rem;
   }
 </style>
@@ -156,7 +150,7 @@ import { is_promise } from "svelte/internal";
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -201,7 +195,7 @@ import { is_promise } from "svelte/internal";
                   class="ml-2 text-base"
                   class:text-gray-300={is_fixed}>{$_('distance-donation')}</span>
                 <input
-                  class="toggle relative w-10 h-5 transition-all duration-200 ease-in-out bg-gray-400 rounded-full shadow-inner outline-none appearance-none align-middle"
+                  class="relative w-10 h-5 transition-all duration-200 ease-in-out bg-gray-400 rounded-full shadow-inner outline-none appearance-none align-middle"
                   type="checkbox"
                   bind:checked={is_fixed} />
                 <span
@@ -273,29 +267,6 @@ import { is_promise } from "svelte/internal";
                     </span>
                   {/if}
                 </div>
-                {#if is_fixed}
-                <div class="col-span-6">
-                  <label
-                    for="paid"
-                    class="block text-sm font-medium text-gray-700">{$_('already-paid')}</label>
-                    <p class="text-gray-500">
-                      <input
-                        id="paid"
-                        bind:checked={is_paid}
-                        name="paid"
-                        type="checkbox"
-                        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" >
-                        <span class="align-text-bottom">
-
-                      {#if is_paid}
-                      {$_('paid')}
-                      {:else}
-                      {$_('open')}
-                      {/if}
-                        </span>
-                    </p>
-                </div>
-                {/if}
               </div>
             </div>
           </div>

src/components/donations/AddDonationPaymentModal.svelte

@@ -1,202 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-  
-  import { DonationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  export let payment_modal_open = false;
-  export let current_donations = [];
-  export let editable = {};
-  export let original_data = {};
-  export let paid_amount_input = 0;
-  $:processed_last_submit=true;
-  function focus(el) {
-    el.focus();
-  }
-  $: createbtnenabled = is_paid_amount_valid && !(paid_amount_input*100 == original_data.paidAmount)
-  $: is_paid_amount_valid = paid_amount_input > 0;
-  (() => {
-    document.onkeydown = (e) => {
-      e = e || window.event;
-      if (e.key === "Escape") {
-        payment_modal_open = false;
-      }
-      if (e.keyCode === 13) {
-        if (createbtnenabled === true) {
-          createbtnenabled = false;
-          submit();
-        }
-      }
-    };
-  })();
-  function submit() {
-    if (processed_last_submit === true) {
-      processed_last_submit = false;
-      const toast = Toastify({
-        text: $_('updating-donation'),
-        duration: -1,
-      }).showToast();
-      editable.donor = editable.donor.id;
-      editable.paidAmount = paid_amount_input*100;
-      if(editable.responseType == "DISTANCEDONATION" || editable.runner){
-        editable.runner = editable.runner.id;
-        DonationService.donationControllerPutDistance(original_data.id, editable)
-        .then((result) => {
-          let id = original_data.id;
-          editable = {};
-          original_data = {};
-          payment_modal_open = false;
-          //
-          Toastify({
-            text: $_('donation-updated'),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          current_donations[current_donations.findIndex((c) => c.id === id)] = result;
-          current_donations = current_donations;
-        })
-        .catch((err) => {
-          //
-        })
-        .finally(() => {
-          processed_last_submit = true;
-          //
-          toast.hideToast();
-        });
-      }
-      else{
-          DonationService.donationControllerPutFixed(original_data.id, editable)
-        .then((result) => {
-          let id = original_data.id;
-          editable = {};
-          original_data = {};
-          payment_modal_open = false;
-          //
-          Toastify({
-            text: $_('donation-updated'),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          current_donations[current_donations.findIndex((c) => c.id === id)] = result;
-          current_donations = current_donations;
-        })
-        .catch((err) => {
-          //
-        })
-        .finally(() => {
-          processed_last_submit = true;
-          //
-          toast.hideToast();
-        });
-      }
-    }
-  }
-</script>
-
-{#if payment_modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    
-    use:clickOutside
-    on:click_outside={() => {
-      payment_modal_open = false;
-    }}>
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <svg
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  fill="currentColor"
-                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('enter-payment')}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_('you-can-enter-the-donations-paid-amount-manually-or-use-the-max-button-to-use-the-donations-exact-amount')}
-                </p>
-              </div>
-              <div class="grid grid-cols gap-6">
-                <div class="w-full">
-                  <label
-                  for="token"
-                  class="block text-sm font-medium text-gray-700">{$_('paid-amount')}</label>
-                <div class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full">
-                  <input
-                      autocomplete="off"
-                      class:border-red-500={!is_paid_amount_valid}
-                      class:focus:border-red-500={!is_paid_amount_valid}
-                      class:focus:ring-red-500={!is_paid_amount_valid}
-                      bind:value={paid_amount_input}
-                      type="number"
-                      step="0.01"
-                      name="donation_amount_eur"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm p-2"
-                      placeholder="2.00" />
-                    <button
-                      on:click={
-                        ()=>{
-                          paid_amount_input=paid_amount_input = (original_data.amount/100).toFixed(2);
-                        }
-                      }
-                      class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm">MAX</button>
-                    <span
-                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">€</span>
-                  </div>
-                  {#if !is_paid_amount_valid}
-                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('payment-amount-must-be-greater-than-0-00eur')}
-                    </span>
-                  {/if}
-                </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-            <button
-              disabled={!createbtnenabled}
-              class:opacity-50={!createbtnenabled}
-              on:click={submit}
-              type="button"
-              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-              {$_('save-changes')}
-            </button>
-            <button
-              on:click={() => {
-                payment_modal_open = false;
-              }}
-              type="button"
-              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-              {$_('cancel')}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-{/if}

src/components/donations/DonationDetail.svelte

@@ -20,8 +20,6 @@
   $: current_runners = [];
   $: amount_input = 0;
   $: is_amount_valid = amount_input > 0;
-  $: paid_amount_input = 0;
-  $: is_paid_amount_valid = paid_amount_input > 0;
   $: is_everything_set =
     editable.donor != null &&
     ((original_data.responseType == "DISTANCEDONATION" &&
@@ -32,17 +30,15 @@
     (original_data.responseType == "DISTANCEDONATION" &&
       !(Math.floor(amount_input * 100) === original_data.amountPerDistance)) ||
     (original_data.responseType !== "DISTANCEDONATION" &&
-      !(Math.floor(amount_input * 100) === original_data.amount)) ||
+      !(Math.floor(amount_input * 100) === original_data.amount));
-      !(Math.floor(paid_amount_input * 100) === original_data.paidAmount);
   $: save_enabled = changes_performed && is_amount_valid && is_everything_set;
 
   const promise = DonationService.donationControllerGetOne(
     params.donationid
   ).then((data) => {
     data_loaded = true;
-    original_data = Object.assign({}, data);
+    original_data = Object.assign(original_data, data);
-    editable = Object.assign({}, original_data);
+    editable = Object.assign(editable, original_data);
-    paid_amount_input = data.paidAmount / 100;
     if (data.responseType == "DISTANCEDONATION") {
       amount_input = data.amountPerDistance / 100;
       RunnerService.runnerControllerGetAll().then((val) => {
@@ -70,11 +66,10 @@
   function submit() {
     if (data_loaded === true && save_enabled) {
       Toastify({
-        text: $_('updating-donation'),
+        text: "Donation is being updated",
         duration: 2500,
       }).showToast();
       let postdata = {};
-      editable.paidAmount = paid_amount_input*100;
       if (original_data.responseType === "DISTANCEDONATION") {
         editable.amountPerDistance = Math.floor(amount_input * 100);
         postdata = Object.assign(postdata, editable);
@@ -88,7 +83,7 @@
             Object.assign(original_data, editable);
             original_data = original_data;
             Toastify({
-              text: $_('donation-updated'),
+              text: "updated donation",
               duration: 2500,
               backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
@@ -103,7 +98,7 @@
             Object.assign(original_data, editable);
             original_data = original_data;
             Toastify({
-              text: $_('donation-updated'),
+              text: "updated donation",
               duration: 2500,
               backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
@@ -117,7 +112,7 @@
     DonationService.donationControllerRemove(original_data.id, false)
       .then((resp) => {
         Toastify({
-          text: $_('donation-deleted'),
+          text: "Donation delete",
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -224,24 +219,7 @@
       <span>{(editable.amount / 100)
           .toFixed(2)
           .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
-      |
-      <span
-        class="font-medium text-gray-700">{$_('paid-amount')}:</span>
-      <span>{(editable.paidAmount / 100)
-          .toFixed(2)
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
-      |
-      <span
-        class="font-medium text-gray-700">{$_('status')}:</span>
-        {#if editable.status =="PAID"}
-          <span
-            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('paid')}</span>
-        {:else}
-          <span
-            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('open')}</span>
-        {/if}
     </div>
-    <br>
     <div class=" w-full">
       <label
         for="donor"
@@ -254,7 +232,7 @@
         placeholder={$_('search-for-donor-name-or-id')}
         noOptionsMessage={$_('no-donors-found')}
         bind:selectedValue={donor}
-        on:select={(selectedValue) => {editable.donor = selectedValue.detail.value; editable.donor.donationAmount=original_data.donor.donationAmount; editable.donor.paidDonationAmount =original_data.donor.paidDonationAmount}}
+        on:select={(selectedValue) => (editable.donor = selectedValue.detail.value)}
         on:clear={() => (editable.donor = null)} />
     </div>
     {#if original_data.responseType == 'DISTANCEDONATION'}
@@ -302,39 +280,6 @@
         </span>
       {/if}
     </div>
-    <div class="w-full">
-      <label
-        for="token"
-        class="block text-sm font-medium text-gray-700">{$_('paid-amount')}</label>
-      <div class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full">
-        <input
-            autocomplete="off"
-            class:border-red-500={!is_amount_valid}
-            class:focus:border-red-500={!is_amount_valid}
-            class:focus:ring-red-500={!is_amount_valid}
-            bind:value={paid_amount_input}
-            type="number"
-            step="0.01"
-            name="donation_amount_eur"
-            class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm p-2"
-            placeholder="2.00" />
-          <button
-            on:click={
-              ()=>{
-                paid_amount_input=paid_amount_input = (original_data.amount/100).toFixed(2);
-              }
-            }
-            class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm">MAX</button>
-          <span
-            class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">€</span>
-        </div>
-        {#if !is_paid_amount_valid}
-          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-            {$_('payment-amount-must-be-greater-than-0-00eur')}
-          </span>
-        {/if}
-    </div>
   </section>
 {:catch error}
   <PromiseError {error} />

src/components/donations/DonationsOverview.svelte

@@ -4,14 +4,9 @@
   import store from "../../store";
   import Toastify from "toastify-js";
   import DonationsEmptyState from "./DonationsEmptyState.svelte";
-  import AddDonationPaymentModal from "./AddDonationPaymentModal.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
   export let current_donations = [];
-  export let payment_modal_open = false;
-  export let editable = {};
-  export let original_data = {};
-  export let paid_amount_input = 0;
   const donations_promise = DonationService.donationControllerGetAll().then(
     (val) => {
       current_donations = val;
@@ -23,15 +18,8 @@
     }
     return id.toString() === searchvalue;
   }
-  function open_payment_modal(donation) {
-    editable = Object.assign({}, donation);
-    original_data = Object.assign({}, donation);
-    paid_amount_input = (donation.paidAmount/100).toFixed(2);
-    payment_modal_open = true;
-  }
 </script>
 
-<AddDonationPaymentModal bind:current_donations bind:original_data bind:editable bind:paid_amount_input bind:payment_modal_open />
 {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
   {#await donations_promise}
     <div
@@ -75,16 +63,6 @@
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 {$_('donation-amount')}
               </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('paid-amount')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('status')}
-              </th>
               <th scope="col" class="relative px-6 py-3">
                 <span class="sr-only">{$_('action')}</span>
               </th>
@@ -154,22 +132,6 @@
                         .toLocaleString('de-DE', { valute: 'EUR' })}€
                     </div>
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="text-sm font-medium text-gray-900">
-                      {(donation.paidAmount / 100)
-                        .toFixed(2)
-                        .toLocaleString('de-DE', { valute: 'EUR' })}€
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#if donation.status =="PAID"}
-                      <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('paid')}</span>
-                    {:else}
-                      <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('open')}</span>
-                    {/if}
-                  </td>
                   {#if active_deletes[donation.id] === true}
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
@@ -187,7 +149,7 @@
                                 (obj) => obj.id !== donation.id
                               );
                               Toastify({
-                                text: $_('donation-deleted'),
+                                text: 'Donation deleted',
                                 duration: 500,
                                 backgroundColor:
                                   'linear-gradient(to right, #00b09b, #96c93d)',
@@ -201,9 +163,6 @@
                   {:else}
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {open_payment_modal(donation);}}
-                        class="text-[#025a21] hover:text-green-900 mr-4">{$_('enter-payment')}</button>
                       <a
                         href="./{donation.id}"
                         class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>

src/components/donors/AddDonorModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import {
     DonorService
   } from "@odit/lfk-client-js";
@@ -134,7 +134,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/donors/ConfirmDonorDeletion.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import { DonorService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
@@ -19,7 +19,7 @@
     )
       .then((resp) => {
         Toastify({
-          text: $_('donor-deleted'),
+          text: "Donor deleted",
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -32,7 +32,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={cancelDelete}>
     <div

src/components/donors/DonorDetail.svelte

@@ -193,12 +193,6 @@
       <span>{(editable.donationAmount / 100)
           .toFixed(2)
           .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
-      |
-      <span
-        class="font-medium text-gray-700">{$_('total-paid-amount')}:</span>
-      <span>{(editable.paidDonationAmount / 100)
-          .toFixed(2)
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
       <br />
       <span class="font-medium text-gray-700">{$_('donations')}:</span>
       {#if current_donations.filter((d) => d.donor.id == editable.id).length > 0}
@@ -207,7 +201,7 @@
             <a
               href="../donations/{d.id}"
               class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1">{d.runner.firstname}
-              {d.runner.middlename || ""}
+              {d.runner.middlename}
               {d.runner.lastname}</a>
           {:else}
             <a

src/components/donors/Donors.svelte

@@ -20,31 +20,6 @@
         {$_('add-donor')}
       </button>
     {/if}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
-      <button
-        on:click={() => {
-          const data = (current_donors.filter(d=>d.receiptNeeded===true)).map(function (d) {
-            d.address.address2=d.address.address2===""?"":" "+d.address.address2;
-            const address=`${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
-            return [d.firstname,d.middlename,d.lastname,d.paidDonationAmount,address];
-          })
-          let csv = `${$_('csv_import__firstname')};${$_('csv_import__middlename')};${$_('csv_import__lastname')};${$_('total_donation_amount_in_eur')};${$_('address')}\n`;
-    data.forEach(function(row) {
-            csv += row.join(';');
-            csv += "\n";
-    });
-    let hiddenElement = document.createElement('a');
-    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
-    hiddenElement.target = '_blank';
-    hiddenElement.download = `${$_('filename_sponsoringquittungsliste')}.csv`;
-    hiddenElement.click();
-    hiddenElement.remove();
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        {$_('sponsoring-quittungs-liste_herunterladen')}
-      </button>
-    {/if}
   </span>
   <DonorsOverview bind:current_donors />
 </section>

src/components/donors/DonorsOverview.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
   import { DonationService, DonorService } from "@odit/lfk-client-js";
   import store from "../../store";
   import DonorsEmptyState from "./DonorsEmptyState.svelte";
@@ -77,11 +77,6 @@
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 {$_('total-donation-amount')}
               </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('total-paid-amount')}
-              </th>
               <th scope="col" class="relative px-6 py-3">
                 <span class="sr-only">{$_('action')}</span>
               </th>
@@ -132,7 +127,7 @@
                           <a
                             href="../donations/{d.id}"
                             class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1">{d.runner.firstname}
-                            {d.runner.middlename || ''}
+                            {d.runner.middlename}
                             {d.runner.lastname}</a>
                         {:else}
                           <a
@@ -150,11 +145,6 @@
                       .toFixed(2)
                       .toLocaleString('de-DE', { valute: 'EUR' })}€
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {(donor.paidDonationAmount / 100)
-                      .toFixed(2)
-                      .toLocaleString('de-DE', { valute: 'EUR' })}€
-                  </td>
                   {#if active_deletes[donor.id] === true}
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">

src/components/general/About.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   export let modal_open;
   (function () {
     document.onkeydown = function (e) {
@@ -25,7 +25,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/general/Footer.svelte

@@ -32,12 +32,8 @@
       target="_blank"
       rel="noopener, noreferrer"
       href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}">{releaseinfo}</a>
-    -
+      -
-    <a
+    <a class="underline" href="https://docs.lauf-fuer-kaya.de" target="_blank">{$_('documentation')}</a>
-      rel="noopener, noreferrer"
-      class="underline"
-      href="https://docs.lauf-fuer-kaya.de"
-      target="_blank">{$_('documentation')}</a>
     -
     <a class="underline" href="/privacy">{$_('privacy')}</a>
     -

src/components/general/Privacy.svelte

@@ -2,7 +2,7 @@
   import { _, getLocaleFromNavigator } from "svelte-i18n";
   import marked from "marked";
   import Footer from "./Footer.svelte";
-  // import * as css from "../base/simple.css?inline";
+  import * as css from "../base/simple.css";
   let html = "";
   async function load() {
     let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");

src/components/groups/AddGroupModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import Toastify from "toastify-js";
   import { UserGroupService } from "@odit/lfk-client-js";
   export let modal_open;
@@ -69,7 +69,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/orgs/AddOrgModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import { RunnerOrganizationService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   export let modal_open;
@@ -89,7 +89,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/orgs/ConfirmOrgDeletion.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import { RunnerOrganizationService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
@@ -19,7 +19,7 @@
     )
       .then((resp) => {
         Toastify({
-          text: $_('organization-deleted'),
+          text: "Organization deleted",
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -32,7 +32,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={cancelDelete}>
     <div

src/components/orgs/OrgDetail.svelte

@@ -326,14 +326,14 @@
         <div class="flex items-center h-5">
           <input
             bind:checked={editable.registrationEnabled}
-            id="toggle_selfservice_feature"
+            id="comments"
-            name="toggle_selfservice_feature"
+            name="comments"
             type="checkbox"
             class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
         </div>
         <div class="ml-3 text-sm">
           <label
-            for="toggle_selfservice_feature"
+            for="comments"
             class="font-medium text-gray-700">{$_('selfservice-registration')}</label>
         </div>
       </div>
@@ -375,14 +375,14 @@
             <div class="flex items-center h-5">
               <input
                 bind:checked={editable.address_checked}
-                id="toggle_address_checkbox"
+                id="comments"
-                name="toggle_address_checkbox"
+                name="comments"
                 type="checkbox"
                 class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
             </div>
             <div class="ml-3 text-sm">
               <label
-                for="toggle_address_checkbox"
+                for="comments"
                 class="font-medium text-gray-700">{$_('address')}</label>
             </div>
           </div>

src/components/orgs/OrgOverview.svelte

@@ -14,7 +14,7 @@
   $: active_deletes = [];
   $: sponsoring_contracts_show = current_organizations.some((r) => r.is_selected === true);
   $: cards_show = current_organizations.some((r) => r.is_selected === true);
-  $: generate_orgs = current_organizations.filter((r) => r.is_selected === true);
+  $: generate_orgs = current_organizations.some((r) => r.is_selected === true);
   $: certificates_show = current_organizations.some(
     (r) => r.is_selected === true
   );

src/components/pdf_generation/GenerateRunnerCards.svelte

@@ -1,418 +1,344 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+    import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import {
+    import {
-    RunnerCardService,
+        RunnerCardService,
-    RunnerOrganizationService,
+        RunnerOrganizationService,
-    RunnerTeamService,
+        RunnerTeamService,
-  } from "@odit/lfk-client-js";
+    } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+    import Toastify from "toastify-js";
-  import { init } from "@paralleldrive/cuid2";
+    export let cards_show = false;
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+    export let generate_cards = [];
-
+    export let generate_runners = [];
-  export let cards_show = false;
+    export let generate_orgs = [];
-  export let generate_cards = [];
+    export let generate_teams = [];
-  export let generate_runners = [];
+    $: cards_dropdown_open = false;
-  export let generate_orgs = [];
+    document.addEventListener("click", function (e) {
-  export let generate_teams = [];
+        if (
-  $: cards_dropdown_open = false;
+            e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
-  document.addEventListener("click", function (e) {
+            e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
-    if (
+        ) {
-      e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
+            cards_dropdown_open = false;
-      e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
-    ) {
-      cards_dropdown_open = false;
-    }
-  });
-
-  function generateRunnerCards(locale) {
-    cards_dropdown_open = false;
-
-    if (generate_orgs.length > 0) {
-      generateOrgCards(locale);
-    } else if (generate_teams.length > 0) {
-      generateTeamCards(locale);
-    } else if (generate_runners.length > 0) {
-      generateRunnersCards(locale);
-    } else {
-      generateCards(locale);
-    }
-  }
-
-  function generateCards(locale) {
-    const toast = Toastify({
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
-    fetch(
-      `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(generate_cards),
-      }
-    )
-      .then((response) => {
-        if (response.status != "200") {
-          toast.hideToast();
-          Toastify({
-            text: $_("pdf-generation-failed"),
-            duration: 3500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
-        } else {
-          return response.blob();
         }
-      })
+    });
-      .then((blob) => {
+
-        const url = window.URL.createObjectURL(blob);
+    function generateRunnerCards(locale) {
-        let a = document.createElement("a");
+        cards_dropdown_open = false;
-        a.href = url;
+
-        a.download = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
+        if (generate_orgs.length > 0) {
-        document.body.appendChild(a);
+            generateOrgCards(locale);
-        a.click();
+        } else if (generate_teams.length > 0) {
-        a.remove();
+            generateTeamCards(locale);
-        toast.hideToast();
+        } else if (generate_runners.length > 0) {
-        Toastify({
+            generateRunnersCards(locale);
-          text: $_("pdf-successfully-generated"),
+        } else {
-          duration: 3500,
+            generateCards(locale);
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }
+    }
+
+    function generateCards(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
         }).showToast();
-      })
+        fetch(
-      .catch((err) => {
+            `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
-        console.error(err);
+            {
-      });
+                method: "POST",
-  }
+                headers: {
-
+                    "Content-Type": "application/json",
-  async function generateRunnersCards(locale) {
+                },
-    const toast = Toastify({
+                body: JSON.stringify(generate_cards),
-      text: $_("generating-pdf"),
+            }
-      duration: -1,
-    }).showToast();
-    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
-    let cards = [];
-    for (let runner of generate_runners) {
-      let card = current_cards.find((c) => c.runner?.id == runner.id);
-      if (!card) {
-        card = await RunnerCardService.runnerCardControllerPost({
-          runner: runner.id,
-        });
-      }
-      cards.push(card);
-    }
-    fetch(
-      `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(cards),
-      }
-    )
-      .then((response) => {
-        if (response.status != "200") {
-          toast.hideToast();
-          Toastify({
-            text: $_("pdf-generation-failed"),
-            duration: 3500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
-        } else {
-          return response.blob();
-        }
-      })
-      .then((blob) => {
-        const url = window.URL.createObjectURL(blob);
-        let a = document.createElement("a");
-        a.href = url;
-        if (generate_runners.length == 1) {
-          a.download = `${$_("runnercards")}_${generate_runners[0].firstname}_${
-            generate_runners[0].lastname
-          }-${locale}-${createId()}.pdf`;
-        } else {
-          a.download = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
-        }
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        toast.hideToast();
-        Toastify({
-          text: $_("pdf-successfully-generated"),
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-      })
-      .catch((err) => {});
-  }
-
-  async function generateTeamCards(locale) {
-    const toast = Toastify({
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
-    let count = 0;
-    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
-    for (const t of generate_teams) {
-      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-        t.id
-      );
-      let cards = [];
-      for (let runner of runners) {
-        let card = current_cards.find((c) => c.runner?.id == runner.id);
-        if (!card) {
-          card = await RunnerCardService.runnerCardControllerPost({
-            runner: runner.id,
-          });
-        }
-        cards.push(card);
-      }
-      fetch(
-        `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(cards),
-        }
-      )
-        .then((response) => {
-          if (response.status != "200") {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
-          } else {
-            return response.blob();
-          }
-        })
-        .then((blob) => {
-          count++;
-          const url = window.URL.createObjectURL(blob);
-          let a = document.createElement("a");
-          a.href = url;
-          a.download = `${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`;
-          document.body.appendChild(a);
-          a.click();
-          a.remove();
-          if (count === generate_teams.length) {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-          }
-        })
-        .catch((err) => {});
-    }
-  }
-
-  async function generateOrgCards(locale) {
-    const toast = Toastify({
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
-    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
-    let count = 0;
-    let count_orgs = 0;
-    for (const o of generate_orgs) {
-      count_orgs++;
-      let count = 0;
-      let runners =
-        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-          o.id,
-          true
-        );
-      let cards = [];
-      for (let runner of runners) {
-        let card = current_cards.find((c) => c.runner?.id == runner.id);
-        if (!card) {
-          card = await RunnerCardService.runnerCardControllerPost({
-            runner: runner.id,
-          });
-        }
-        cards.push(card);
-      }
-      await fetch(
-        `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(cards),
-        }
-      )
-        .then((response) => {
-          if (response.status != "200") {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
-          } else {
-            return response.blob();
-          }
-        })
-        .then((blob) => {
-          const url = window.URL.createObjectURL(blob);
-          let a = document.createElement("a");
-          a.href = url;
-          a.download = `${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`;
-          document.body.appendChild(a);
-          a.click();
-          a.remove();
-          if (count === o.teams.length && count_orgs === generate_orgs.length) {
-            toast.hideToast();
-            console.log("here");
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-          }
-        })
-        .catch((err) => {});
-      for (const t of o.teams) {
-        count++;
-        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-          t.id
-        );
-        let cards = [];
-        for (let runner of runners) {
-          let card = current_cards.find((c) => c.runner?.id == runner.id);
-          if (!card) {
-            card = await RunnerCardService.runnerCardControllerPost({
-              runner: runner.id,
-            });
-          }
-          cards.push(card);
-        }
-        await fetch(
-          `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(cards),
-          }
         )
-          .then((response) => {
+            .then((response) => {
-            if (response.status != "200") {
+                if (response.status != "200") {
-              toast.hideToast();
+                    toast.hideToast();
-              Toastify({
+                    Toastify({
-                text: $_("pdf-generation-failed"),
+                        text: $_("pdf-generation-failed"),
-                duration: 3500,
+                        duration: 3500,
-                backgroundColor:
+                        backgroundColor:
-                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                            "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-              }).showToast();
+                    }).showToast();
-            } else {
+                } else {
-              return response.blob();
+                    return response.blob();
-            }
+                }
-          })
+            })
-          .then((blob) => {
+            .then((blob) => {
-            const url = window.URL.createObjectURL(blob);
+                const url = window.URL.createObjectURL(blob);
-            let a = document.createElement("a");
+                let a = document.createElement("a");
-            a.href = url;
+                a.href = url;
-            a.download = `${$_("runnercards")}_${o.name}_${
+                a.download = `${$_('runnercards')}-${locale}.pdf`;
-              t.name
+                document.body.appendChild(a);
-            }-${locale}-${createId()}.pdf`;
+                a.click();
-            document.body.appendChild(a);
+                a.remove();
-            a.click();
+                toast.hideToast();
-            a.remove();
+                Toastify({
-            if (
+                    text: $_("pdf-successfully-generated"),
-              count === o.teams.length &&
+                    duration: 3500,
-              count_orgs === generate_orgs.length
+                    backgroundColor:
-            ) {
+                        "linear-gradient(to right, #00b09b, #96c93d)",
-              toast.hideToast();
+                }).showToast();
-              Toastify({
+            })
-                text: $_("pdfs-successfully-generated"),
+            .catch((err) => {
-                duration: 3500,
+                console.error(err);
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            });
-              }).showToast();
+    }
-            }
+
-          })
+    async function generateRunnersCards(locale) {
-          .catch((err) => {});
+        const toast = Toastify({
-      }
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+        let cards = [];
+        for (let runner of generate_runners) {
+            let card = current_cards.find((c) => c.runner?.id == runner.id);
+            if (!card) {
+                card = await RunnerCardService.runnerCardControllerPost({
+                    runner: runner.id,
+                });
+            }
+            cards.push(card);
+        }
+        fetch(
+            `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(cards),
+            }
+        )
+            .then((response) => {
+                if (response.status != "200") {
+                    toast.hideToast();
+                    Toastify({
+                        text: $_("pdf-generation-failed"),
+                        duration: 3500,
+                        backgroundColor:
+                            "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                    }).showToast();
+                } else {
+                    return response.blob();
+                }
+            })
+            .then((blob) => {
+                const url = window.URL.createObjectURL(blob);
+                let a = document.createElement("a");
+                a.href = url;
+                if(generate_runners.length == 1){
+                    a.download = `${$_('runnercards')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
+                }
+                else{
+                    a.download = `Runnercards-${locale}.pdf`;
+                }
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+                toast.hideToast();
+                Toastify({
+                    text: $_("pdf-successfully-generated"),
+                    duration: 3500,
+                    backgroundColor:
+                        "linear-gradient(to right, #00b09b, #96c93d)",
+                }).showToast();
+            })
+            .catch((err) => {});
+    }
+
+    async function generateTeamCards(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdfs"),
+            duration: -1,
+        }).showToast();
+        let count = 0;
+        const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+        for (const t of generate_teams) {
+            const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+                t.id
+            );
+            let cards = [];
+            for (let runner of runners) {
+                let card = current_cards.find((c) => c.runner?.id == runner.id);
+                if (!card) {
+                    card = await RunnerCardService.runnerCardControllerPost({
+                        runner: runner.id,
+                    });
+                }
+                cards.push(card);
+            }
+            fetch(
+                `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(cards),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdf-generation-failed"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                        }).showToast();
+                    } else {
+                        return response.blob();
+                    }
+                })
+                .then((blob) => {
+                    count++;
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = `${$_('runnercards')}_${t.name}-${locale}.pdf`;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_teams.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
+    }
+
+    async function generateOrgCards(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        let count = 0;
+        const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+        for (const o of generate_orgs) {
+            const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+                o.id
+            );
+            let cards = [];
+            for (let runner of runners) {
+                let card = current_cards.find((c) => c.runner?.id == runner.id);
+                if (!card) {
+                    card = await RunnerCardService.runnerCardControllerPost({
+                        runner: runner.id,
+                    });
+                }
+                cards.push(card);
+            }
+            fetch(
+                `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(cards),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdf-generation-failed"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                        }).showToast();
+                    } else {
+                        return response.blob();
+                    }
+                })
+                .then((blob) => {
+                    count++;
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = `${$_('runnercards')}_${o.name}-${locale}.pdf`;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_orgs.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
     }
-  }
 </script>
 
 {#if cards_show}
-  <div id="cards:dropdown" class="relative inline-block">
+    <div id="cards:dropdown" class="relative inline-block">
-    <div>
+        <div>
-      <button
+            <button
-        on:click={() => {
+                on:click={() => {
-          cards_dropdown_open = !cards_dropdown_open;
+                    cards_dropdown_open = !cards_dropdown_open;
-        }}
+                }}
-        type="button"
+                type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+                class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
+                id="options-menu"
-        aria-haspopup="true"
+                aria-haspopup="true"
-        aria-expanded="true"
+                aria-expanded="true">
-      >
+                {$_('generate-runnercards')}
-        {$_("generate-runnercards")}
+                <svg
-        <svg
+                    xmlns="http://www.w3.org/2000/svg"
-          xmlns="http://www.w3.org/2000/svg"
+                    width="24"
-          width="24"
+                    height="24"
-          height="24"
+                    viewBox="0 0 24 24"
-          viewBox="0 0 24 24"
+                    class="-mr-1 ml-2 h-5 w-5"><path
-          class="-mr-1 ml-2 h-5 w-5"
+                        fill="none"
-          ><path fill="none" d="M0 0h24v24H0z" />
+                        d="M0 0h24v24H0z" />
-          <path
+                    <path
-            fill="currentColor"
+                        fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
+                        d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
-          /></svg
+            </button>
-        >
-      </button>
-    </div>
-    {#if cards_dropdown_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="cards:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
-          <button
-            on:click={() => {
-              generateRunnerCards("de");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("german")}
-          </button>
-          <button
-            on:click={() => {
-              generateRunnerCards("en");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("english")}
-          </button>
         </div>
-      </div>
+        {#if cards_dropdown_open}
-    {/if}
+            <div
-  </div>
+                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
+                id="cards:dropdown:menu">
+                <div
+                    class="py-1"
+                    role="menu"
+                    aria-orientation="vertical"
+                    aria-labelledby="options-menu">
+                    <span
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
+                    <button
+                        on:click={() => {
+                            generateRunnerCards('de');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('german')}
+                    </button>
+                    <button
+                        on:click={() => {
+                            generateRunnerCards('en');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('english')}
+                    </button>
+                </div>
+            </div>
+        {/if}
+    </div>
 {/if}

src/components/pdf_generation/GenerateRunnerCertificates.svelte

@@ -1,355 +1,277 @@
 <script>
-  import { _ } from "svelte-i18n";
+    import { _ } from "svelte-i18n";
-  import {
+    import {
-    DonationService,
+        DonationService,
-    RunnerTeamService,
+        RunnerTeamService,
-    RunnerOrganizationService,
+        RunnerOrganizationService
-  } from "@odit/lfk-client-js";
+    } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+    import Toastify from "toastify-js";
-  import { init } from "@paralleldrive/cuid2";
+    export let certificates_show = false;
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+    export let generate_runners = [];
-
+    export let generate_orgs = [];
-  export let certificates_show = false;
+    export let generate_teams = [];
-  export let generate_runners = [];
+    $: certificates_dropdown_open = false;
-  export let generate_orgs = [];
+    document.addEventListener("click", function (e) {
-  export let generate_teams = [];
+        if (
-  $: certificates_dropdown_open = false;
+            e.target.parentNode?.parentNode?.id != "certificates:dropdown" &&
-  document.addEventListener("click", function (e) {
+            e.target.parentNode?.parentNode?.id != "certificates:dropdown:menu"
-    if (
+        ) {
-      e.target.parentNode?.parentNode?.id != "certificates:dropdown" &&
+            certificates_dropdown_open = false;
-      e.target.parentNode?.parentNode?.id != "certificates:dropdown:menu"
-    ) {
-      certificates_dropdown_open = false;
-    }
-  });
-
-  function generateCertificates(locale) {
-    certificates_dropdown_open = false;
-
-    if (generate_orgs.length > 0) {
-      generateOrgCertificates(locale);
-    } else if (generate_teams.length > 0) {
-      generateTeamCertificates(locale);
-    } else {
-      generateRunnerCertificates(locale);
-    }
-  }
-
-  async function generateRunnerCertificates(locale) {
-    const toast = Toastify({
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
-    const current_donations =
-      (await DonationService.donationControllerGetAll()) || [];
-    let certificateRunners = [];
-    for (let runner of generate_runners) {
-      runner.distanceDonations =
-        current_donations.filter((d) => d.runner?.id == runner.id) || [];
-      console.log(runner.distanceDonations);
-      certificateRunners.push(runner);
-    }
-    fetch(
-      `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(certificateRunners),
-      }
-    )
-      .then((response) => {
-        if (response.status != "200") {
-          toast.hideToast();
-          Toastify({
-            text: $_("pdf-generation-failed"),
-            duration: 3500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
-        } else {
-          return response.blob();
         }
-      })
+    });
-      .then((blob) => {
+
-        const url = window.URL.createObjectURL(blob);
+    function generateCertificates(locale) {
-        let a = document.createElement("a");
+        certificates_dropdown_open = false;
-        a.href = url;
+
-        if (generate_runners.length == 1) {
+        if (generate_orgs.length > 0) {
-          a.download = `${$_("certificates")}_${
+            generateOrgCertificates(locale);
-            generate_runners[0].firstname
+        } else if (generate_teams.length > 0) {
-          }_${generate_runners[0].lastname}-${locale}-${createId()}.pdf`;
+            generateTeamCertificates(locale);
         } else {
-          a.download = `${$_("certificates")}-${locale}.pdf`;
+            generateRunnerCertificates(locale);
         }
-        document.body.appendChild(a);
+    }
-        a.click();
+
-        a.remove();
+    async function generateRunnerCertificates(locale) {
-        toast.hideToast();
+        const toast = Toastify({
-        Toastify({
+            text: $_("generating-pdf"),
-          text: $_("pdf-successfully-generated"),
+            duration: -1,
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
-      })
+        const current_donations = await DonationService.donationControllerGetAll();
-      .catch((err) => {});
-  }
-
-  async function generateTeamCertificates(locale) {
-    const toast = Toastify({
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
-    let count = 0;
-    const current_donations =
-      (await DonationService.donationControllerGetAll()) || [];
-    for (const t of generate_teams) {
-      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-        t.id
-      );
-      let certificateRunners = [];
-      for (let runner of runners) {
-        runner.distanceDonations =
-          current_donations.filter((d) => d.runner?.id == runner.id) || [];
-        certificateRunners.push(runner);
-      }
-      fetch(
-        `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(certificateRunners),
-        }
-      )
-        .then((response) => {
-          if (response.status != "200") {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
-          } else {
-            return response.blob();
-          }
-        })
-        .then((blob) => {
-          count++;
-          const url = window.URL.createObjectURL(blob);
-          let a = document.createElement("a");
-          a.href = url;
-          a.download = `${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`;
-          document.body.appendChild(a);
-          a.click();
-          a.remove();
-          if (count === generate_teams.length) {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-          }
-        })
-        .catch((err) => {});
-    }
-  }
-
-  async function generateOrgCertificates(locale) {
-    const toast = Toastify({
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
-    const current_donations =
-      (await DonationService.donationControllerGetAll()) || [];
-    let count = 0;
-    let count_orgs = 0;
-    for (const o of generate_orgs) {
-      count_orgs++;
-      let count = 0;
-      let runners =
-        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-          o.id,
-          true
-        );
-      let certificateRunners = [];
-      for (let runner of runners) {
-        runner.distanceDonations =
-          current_donations.filter((d) => d.runner?.id == runner.id) || [];
-        certificateRunners.push(runner);
-      }
-      await fetch(
-        `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(certificateRunners),
-        }
-      )
-        .then((response) => {
-          if (response.status != "200") {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
-          } else {
-            return response.blob();
-          }
-        })
-        .then((blob) => {
-          const url = window.URL.createObjectURL(blob);
-          let a = document.createElement("a");
-          a.href = url;
-          a.download = `${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`;
-          document.body.appendChild(a);
-          a.click();
-          a.remove();
-          if (count === o.teams.length && count_orgs === generate_orgs.length) {
-            toast.hideToast();
-            console.log("here");
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-          }
-        })
-        .catch((err) => {});
-      for (const t of o.teams) {
-        count++;
-        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-          t.id
-        );
         let certificateRunners = [];
-        for (let runner of runners) {
+        for (let runner of generate_runners) {
-          runner.distanceDonations =
+            runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
-            current_donations.filter((d) => d.runner?.id == runner.id) || [];
+            certificateRunners.push(runner);
-          certificateRunners.push(runner);
         }
-        await fetch(
+        fetch(
-          `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
+            `${config.baseurl}/documents/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
-          {
+            {
-            method: "POST",
+                method: "POST",
-            headers: {
+                headers: {
-              "Content-Type": "application/json",
+                    "Content-Type": "application/json",
-            },
+                },
-            body: JSON.stringify(certificateRunners),
+                body: JSON.stringify(certificateRunners),
-          }
+            }
         )
-          .then((response) => {
+            .then((response) => {
-            if (response.status != "200") {
+                if (response.status != "200") {
-              toast.hideToast();
+                    toast.hideToast();
-              Toastify({
+                    Toastify({
-                text: $_("pdf-generation-failed"),
+                        text: $_("pdf-generation-failed"),
-                duration: 3500,
+                        duration: 3500,
-                backgroundColor:
+                        backgroundColor:
-                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                            "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-              }).showToast();
+                    }).showToast();
-            } else {
+                } else {
-              return response.blob();
+                    return response.blob();
-            }
+                }
-          })
+            })
-          .then((blob) => {
+            .then((blob) => {
-            const url = window.URL.createObjectURL(blob);
+                const url = window.URL.createObjectURL(blob);
-            let a = document.createElement("a");
+                let a = document.createElement("a");
-            a.href = url;
+                a.href = url;
-            a.download = `${$_("certificates")}_${o.name}_${
+                if(generate_runners.length == 1){
-              t.name
+                    a.download = `${$_('certificates')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
-            }-${locale}-${createId()}.pdf`;
+                }
-            document.body.appendChild(a);
+                else{
-            a.click();
+                    a.download = `${$_('certificates')}-${locale}.pdf`;
-            a.remove();
+                }
-            if (
+                document.body.appendChild(a);
-              count === o.teams.length &&
+                a.click();
-              count_orgs === generate_orgs.length
+                a.remove();
-            ) {
+                toast.hideToast();
-              toast.hideToast();
+                Toastify({
-              Toastify({
+                    text: $_("pdf-successfully-generated"),
-                text: $_("pdfs-successfully-generated"),
+                    duration: 3500,
-                duration: 3500,
+                    backgroundColor:
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+                        "linear-gradient(to right, #00b09b, #96c93d)",
-              }).showToast();
+                }).showToast();
-            }
+            })
-          })
+            .catch((err) => {});
-          .catch((err) => {});
+    }
-      }
+
+    async function generateTeamCertificates(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdfs"),
+            duration: -1,
+        }).showToast();
+        let count = 0;
+        const current_donations = await DonationService.donationControllerGetAll();
+        for (const t of generate_teams) {
+            const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+                t.id
+                );
+            let certificateRunners = [];
+            for (let runner of runners) {
+                runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
+                certificateRunners.push(runner);
+            }
+            fetch(
+                `${config.baseurl}/documents/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(certificateRunners),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdf-generation-failed"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                        }).showToast();
+                    } else {
+                        return response.blob();
+                    }
+                })
+                .then((blob) => {
+                    count++;
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = `${$_('certificates')}_${t.name}-${locale}.pdf`;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_teams.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
+    }
+
+    async function generateOrgCertificates(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        let count = 0;
+        const current_donations = await DonationService.donationControllerGetAll();
+        for (const o of generate_orgs) {
+            const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+                o.id
+            );
+            let certificateRunners = [];
+            for (let runner of runners) {
+                runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
+                certificateRunners.push(runner);
+            }
+            fetch(
+                `${config.baseurl}/documents/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(certificateRunners),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdf-generation-failed"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                        }).showToast();
+                    } else {
+                        return response.blob();
+                    }
+                })
+                .then((blob) => {
+                    count++;
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = `${$_('certificates')}_${o.name}-${locale}.pdf`;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_orgs.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
     }
-  }
 </script>
 
 {#if certificates_show}
-  <div id="certificates:dropdown" class="relative inline-block">
+    <div id="certificates:dropdown" class="relative inline-block">
-    <div>
+        <div>
-      <button
+            <button
-        on:click={() => {
+                on:click={() => {
-          certificates_dropdown_open = !certificates_dropdown_open;
+                    certificates_dropdown_open = !certificates_dropdown_open;
-        }}
+                }}
-        type="button"
+                type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+                class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
+                id="options-menu"
-        aria-haspopup="true"
+                aria-haspopup="true"
-        aria-expanded="true"
+                aria-expanded="true">
-      >
+                {$_('generate-runner-certificates')}
-        {$_("generate-runner-certificates")}
+                <svg
-        <svg
+                    xmlns="http://www.w3.org/2000/svg"
-          xmlns="http://www.w3.org/2000/svg"
+                    width="24"
-          width="24"
+                    height="24"
-          height="24"
+                    viewBox="0 0 24 24"
-          viewBox="0 0 24 24"
+                    class="-mr-1 ml-2 h-5 w-5"><path
-          class="-mr-1 ml-2 h-5 w-5"
+                        fill="none"
-          ><path fill="none" d="M0 0h24v24H0z" />
+                        d="M0 0h24v24H0z" />
-          <path
+                    <path
-            fill="currentColor"
+                        fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
+                        d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
-          /></svg
+            </button>
-        >
-      </button>
-    </div>
-    {#if certificates_dropdown_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="certificates:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
-          <button
-            on:click={() => {
-              generateCertificates("de");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("german")}
-          </button>
-          <button
-            on:click={() => {
-              generateCertificates("en");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("english")}
-          </button>
         </div>
-      </div>
+        {#if certificates_dropdown_open}
-    {/if}
+            <div
-  </div>
+                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
+                id="certificates:dropdown:menu">
+                <div
+                    class="py-1"
+                    role="menu"
+                    aria-orientation="vertical"
+                    aria-labelledby="options-menu">
+                    <span
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
+                    <button
+                        on:click={() => {
+                            generateCertificates('de');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('german')}
+                    </button>
+                    <button
+                        on:click={() => {
+                            generateCertificates('en');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('english')}
+                    </button>
+                </div>
+            </div>
+        {/if}
+    </div>
 {/if}

src/components/pdf_generation/GenerateSponsoringContracts.svelte

@@ -1,324 +1,257 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+    import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import {
+    import {
-    RunnerOrganizationService,
+        RunnerOrganizationService,
-    RunnerTeamService,
+        RunnerTeamService,
-  } from "@odit/lfk-client-js";
+    } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+    import Toastify from "toastify-js";
-  import { init } from "@paralleldrive/cuid2";
+    export let sponsoring_contracts_show = false;
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+    export let generate_runners = [];
-
+    export let generate_orgs = [];
-  export let sponsoring_contracts_show = false;
+    export let generate_teams = [];
-  export let generate_runners = [];
+    $: sponsoring_contracts_download_open = false;
-  export let generate_orgs = [];
+    document.addEventListener("click", function (e) {
-  export let generate_teams = [];
+        if (
-  $: sponsoring_contracts_download_open = false;
+            e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-  document.addEventListener("click", function (e) {
+            e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    if (
+        ) {
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
+            sponsoring_contracts_download_open = false;
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    ) {
-      sponsoring_contracts_download_open = false;
-    }
-  });
-
-  function generateSponsoringContract(locale) {
-    sponsoring_contracts_download_open = false;
-
-    if (generate_orgs.length > 0) {
-      generateOrgContracts(locale);
-    } else if (generate_teams.length > 0) {
-      generateTeamContracts(locale);
-    } else {
-      generateRunnerContracts(locale);
-    }
-  }
-
-  async function generateTeamContracts(locale) {
-    const toast = Toastify({
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
-    let count = 0;
-    for (const t of generate_teams) {
-      count++;
-      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-        t.id
-      );
-      fetch(
-        `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(runners),
         }
-      )
+    });
-        .then((response) => {
-          if (response.status != "200") {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
-          } else {
-            return response.blob();
-          }
-        })
-        .then((blob) => {
-          const url = window.URL.createObjectURL(blob);
-          let a = document.createElement("a");
-          a.href = url;
-          a.download = `${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`;
-          document.body.appendChild(a);
-          a.click();
-          a.remove();
-          if (count === generate_teams.length) {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-          }
-        })
-        .catch((err) => {});
-    }
-  }
 
-  async function generateOrgContracts(locale) {
+    function generateSponsoringContract(locale) {
-    const toast = Toastify({
+        sponsoring_contracts_download_open = false;
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
-    let count_orgs = 0;
-    for (const o of generate_orgs) {
-      count_orgs++;
-      let count = 0;
-      let runners =
-        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-          o.id,
-          true
-        );
-      await fetch(
-        `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(runners),
-        }
-      )
-        .then((response) => {
-          if (response.status != "200") {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
-          } else {
-            return response.blob();
-          }
-        })
-        .then((blob) => {
-          const url = window.URL.createObjectURL(blob);
-          let a = document.createElement("a");
-          a.href = url;
-          a.download = `${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`;
-          document.body.appendChild(a);
-          a.click();
-          a.remove();
-          if (count === o.teams.length && count_orgs === generate_orgs.length) {
-            toast.hideToast();
-            console.log("here");
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-          }
-        })
-        .catch((err) => {});
-      for (const t of o.teams) {
-        count++;
-        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-          t.id
-        );
-        await fetch(
-          `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(runners),
-          }
-        )
-          .then((response) => {
-            if (response.status != "200") {
-              toast.hideToast();
-              Toastify({
-                text: $_("pdf-generation-failed"),
-                duration: 3500,
-                backgroundColor:
-                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-              }).showToast();
-            } else {
-              return response.blob();
-            }
-          })
-          .then((blob) => {
-            const url = window.URL.createObjectURL(blob);
-            let a = document.createElement("a");
-            a.href = url;
-            a.download = `${$_("sponsorings")}_${o.name}_${
-              t.name
-            }-${locale}-${createId()}.pdf`;
-            document.body.appendChild(a);
-            a.click();
-            a.remove();
-            if (
-              count === o.teams.length &&
-              count_orgs === generate_orgs.length
-            ) {
-              toast.hideToast();
-              Toastify({
-                text: $_("pdfs-successfully-generated"),
-                duration: 3500,
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-              }).showToast();
-            }
-          })
-          .catch((err) => {});
-      }
-    }
-  }
 
-  function generateRunnerContracts(locale) {
+        if (generate_orgs.length > 0) {
-    const toast = Toastify({
+            generateOrgContracts(locale);
-      text: $_("generating-pdf"),
+        } else if (generate_teams.length > 0) {
-      duration: -1,
+            generateTeamContracts(locale);
-    }).showToast();
-    fetch(
-      `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(generate_runners),
-      }
-    )
-      .then((response) => {
-        if (response.status != "200") {
-          toast.hideToast();
-          Toastify({
-            text: $_("pdf-generation-failed"),
-            duration: 3500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
         } else {
-          return response.blob();
+            generateRunnerContracts(locale);
         }
-      })
+    }
-      .then((blob) => {
+
-        const url = window.URL.createObjectURL(blob);
+    async function generateTeamContracts(locale) {
-        let a = document.createElement("a");
+        const toast = Toastify({
-        a.href = url;
+            text: $_("generating-pdfs"),
-        if (generate_runners.length == 1) {
+            duration: -1,
-          a.download = `${$_("sponsorings")}_${generate_runners[0].firstname}_${
-            generate_runners[0].lastname
-          }-${locale}-${createId()}.pdf`;
-        }
-        a.download = `${$_("sponsorings")}-${locale}-${createId()}.pdf`;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        toast.hideToast();
-        Toastify({
-          text: $_("pdf-successfully-generated"),
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
-      })
+        let count = 0;
-      .catch((err) => {
+        for (const t of generate_teams) {
-        console.error(err);
+            count++;
-      });
+            const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-  }
+                t.id
+            );
+            fetch(
+                `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(runners),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdf-generation-failed"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                        }).showToast();
+                    } else {
+                        return response.blob();
+                    }
+                })
+                .then((blob) => {
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = `${$_('sponsorings')}_${t.name}-${locale}.pdf`;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_teams.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
+    }
+
+    async function generateOrgContracts(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        for (const o of generate_orgs) {
+            const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+                o.id
+            );
+            fetch(
+                `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(runners),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdf-generation-failed"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                        }).showToast();
+                    } else {
+                        return response.blob();
+                    }
+                })
+                .then((blob) => {
+                    count++;
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = `${$_('sponsorings')}_${o.name}-${locale}.pdf`;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_orgs.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
+    }
+
+    function generateRunnerContracts(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        fetch(
+            `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(generate_runners),
+            }
+        )
+            .then((response) => {
+                if (response.status != "200") {
+                    toast.hideToast();
+                    Toastify({
+                        text: $_("pdf-generation-failed"),
+                        duration: 3500,
+                        backgroundColor:
+                            "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                    }).showToast();
+                } else {
+                    return response.blob();
+                }
+            })
+            .then((blob) => {
+                const url = window.URL.createObjectURL(blob);
+                let a = document.createElement("a");
+                a.href = url;
+                if(generate_runners.length == 1){
+                    a.download = `${$_('sponsorings')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
+                }
+                a.download = `${$_('sponsorings')}-${locale}.pdf`;
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+                toast.hideToast();
+                Toastify({
+                    text: $_("pdf-successfully-generated"),
+                    duration: 3500,
+                    backgroundColor:
+                        "linear-gradient(to right, #00b09b, #96c93d)",
+                }).showToast();
+            })
+            .catch((err) => {
+                console.error(err);
+            });
+    }
 </script>
 
 {#if sponsoring_contracts_show}
-  <div id="sponsoring:dropdown" class="relative inline-block">
+    <div id="sponsoring:dropdown" class="relative inline-block">
-    <div>
+        <div>
-      <button
+            <button
-        on:click={() => {
+                on:click={() => {
-          sponsoring_contracts_download_open =
+                    sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-            !sponsoring_contracts_download_open;
+                }}
-        }}
+                type="button"
-        type="button"
+                class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+                id="options-menu"
-        id="options-menu"
+                aria-haspopup="true"
-        aria-haspopup="true"
+                aria-expanded="true">
-        aria-expanded="true"
+                {$_('generate-sponsoring-contracts')}
-      >
+                <svg
-        {$_("generate-sponsoring-contracts")}
+                    xmlns="http://www.w3.org/2000/svg"
-        <svg
+                    width="24"
-          xmlns="http://www.w3.org/2000/svg"
+                    height="24"
-          width="24"
+                    viewBox="0 0 24 24"
-          height="24"
+                    class="-mr-1 ml-2 h-5 w-5"><path
-          viewBox="0 0 24 24"
+                        fill="none"
-          class="-mr-1 ml-2 h-5 w-5"
+                        d="M0 0h24v24H0z" />
-          ><path fill="none" d="M0 0h24v24H0z" />
+                    <path
-          <path
+                        fill="currentColor"
-            fill="currentColor"
+                        d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
+            </button>
-          /></svg
-        >
-      </button>
-    </div>
-    {#if sponsoring_contracts_download_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="sponsoring:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
-          <button
-            on:click={() => {
-              generateSponsoringContract("de");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("german")}
-          </button>
-          <button
-            on:click={() => {
-              generateSponsoringContract("en");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("english")}
-          </button>
         </div>
-      </div>
+        {#if sponsoring_contracts_download_open}
-    {/if}
+            <div
-  </div>
+                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
+                id="sponsoring:dropdown:menu">
+                <div
+                    class="py-1"
+                    role="menu"
+                    aria-orientation="vertical"
+                    aria-labelledby="options-menu">
+                    <span
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
+                    <button
+                        on:click={() => {
+                            generateSponsoringContract('de');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('german')}
+                    </button>
+                    <button
+                        on:click={() => {
+                            generateSponsoringContract('en');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('english')}
+                    </button>
+                </div>
+            </div>
+        {/if}
+    </div>
 {/if}

src/components/runners/AddRunnerModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import {
     RunnerService,
     RunnerTeamService,
@@ -125,7 +125,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/runners/ImportRunnerModal.svelte

@@ -3,7 +3,7 @@
   import { read as readXlsx, utils as xlsx_utils } from "xlsx";
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import Toastify from "toastify-js";
   import {
     ImportService,
@@ -202,7 +202,7 @@
               toast.hideToast();
               recent_processed = true;
               Toastify({
-                text: $_('import-finished'),
+                text: "Import finished",
                 duration: 500,
                 backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
               }).showToast();
@@ -228,7 +228,7 @@
 {#if import_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       cancelModal();

src/components/runners/RunnerDetail.svelte

@@ -71,9 +71,6 @@
       }).showToast();
       let postdata = {};
       postdata = Object.assign(postdata, editable);
-      if (postdata.phone === "") {
-        postdata.phone = null;
-      }
       RunnerService.runnerControllerPut(original_data.id, postdata)
         .then((resp) => {
           Object.assign(original_data, editable);
@@ -98,7 +95,7 @@
 </script>
 
 {#await runner_promise}
-  {$_("loading-runners")}
+  {$_('loading-runners')}
 {:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">
@@ -112,15 +109,12 @@
                 class="flex-shrink-0 w-5 h-5 mr-2"
                 fill="currentColor"
                 width="24"
-                height="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
-                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
-                /></svg
-              >
             </li>
             <li class="flex items-center">
-              <a class="mr-2" href="./">{$_("runners")}</a><svg
+              <a class="mr-2" href="./">{$_('runners')}</a><svg
                 stroke="currentColor"
                 fill="none"
                 stroke-width="2"
@@ -130,17 +124,17 @@
                 class="h-3 w-3 mr-2 stroke-current"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"
+                xmlns="http://www.w3.org/2000/svg"><line
-                ><line x1="5" y1="12" x2="19" y2="12" />
+                  x1="5"
-                <polyline points="12 5 19 12 12 19" /></svg
+                  y1="12"
-              >
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
             </li>
             <li class="flex items-center">
-              <span class="mr-2"
+              <span class="mr-2">{original_data.firstname}
-                >{original_data.firstname}
+                {original_data.middlename || ''}
-                {original_data.middlename || ""}
+                {original_data.lastname}</span>
-                {original_data.lastname}</span
-              >
             </li>
           </ol>
         </nav>
@@ -148,42 +142,36 @@
     </div>
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_data.firstname}
-      {original_data.middlename || ""}
+      {original_data.middlename || ''}
       {original_data.lastname}
       <span data-id="runner_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
+        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
           {#if delete_triggered}
             <button
               on:click={deleteRunner}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
-              >{$_("confirm-deletion")}</button
-            >
             <button
               on:click={() => {
                 delete_triggered = !delete_triggered;
               }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
-              >{$_("cancel")}</button
-            >
           {/if}
           <GenerateSponsoringContracts
             bind:sponsoring_contracts_show
-            bind:generate_runners
+            bind:generate_runners />
-          />
+          <GenerateRunnerCards
-          <GenerateRunnerCards bind:cards_show bind:generate_runners />
+            bind:cards_show
+            bind:generate_runners />
           <GenerateRunnerCertificates
             bind:certificates_show
-            bind:generate_runners
+            bind:generate_runners />
-          />
           {#if !delete_triggered}
             <button
               on:click={() => {
                 delete_triggered = true;
               }}
               type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-runner')}</button>
-              >{$_("delete-runner")}</button
-            >
           {/if}
         {/if}
         {#if !delete_triggered}
@@ -192,128 +180,121 @@
             class:opacity-50={!save_enabled}
             type="button"
             on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
-            >{$_("save-changes")}</button
-          >
         {/if}
       </span>
     </div>
     <!--  -->
     <div class="text-sm w-full">
-      <label for="firstname" class="font-medium text-gray-700"
+      <label
-        >{$_("first-name")}</label
+        for="firstname"
-      >
+        class="font-medium text-gray-700">{$_('first-name')}</label>
       <input
         autocomplete="off"
-        placeholder={$_("first-name")}
+        placeholder={$_('first-name')}
         type="text"
         class:border-red-500={!isFirstnameValid}
         class:focus:border-red-500={!isFirstnameValid}
         class:focus:ring-red-500={!isFirstnameValid}
         bind:value={editable.firstname}
         name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-      />
       {#if !isFirstnameValid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-        >
+          {$_('first-name-is-required')}
-          {$_("first-name-is-required")}
         </span>
       {/if}
     </div>
     <div class="text-sm w-full">
-      <label for="middlename" class="font-medium text-gray-700"
+      <label
-        >{$_("middle-name")}</label
+        for="middlename"
-      >
+        class="font-medium text-gray-700">{$_('middle-name')}</label>
       <input
         autocomplete="off"
-        placeholder={$_("middle-name")}
+        placeholder={$_('middle-name')}
         type="text"
         bind:value={editable.middlename}
         name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-      />
     </div>
     <div class="text-sm w-full">
-      <label for="lastname" class="font-medium text-gray-700"
+      <label
-        >{$_("last-name")}</label
+        for="lastname"
-      >
+        class="font-medium text-gray-700">{$_('last-name')}</label>
       <input
         autocomplete="off"
-        placeholder={$_("last-name")}
+        placeholder={$_('last-name')}
         type="text"
         bind:value={editable.lastname}
         class:border-red-500={!isLastnameValid}
         class:focus:border-red-500={!isLastnameValid}
         class:focus:ring-red-500={!isLastnameValid}
         name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-      />
       {#if !isLastnameValid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-        >
+          {$_('last-name-is-required')}
-          {$_("last-name-is-required")}
         </span>
       {/if}
     </div>
     <div class="text-sm w-full">
-      <label for="email" class="font-medium text-gray-700"
+      <label
-        >{$_("e-mail-adress")}</label
+        for="email"
-      >
+        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
       <input
         autocomplete="off"
-        placeholder={$_("e-mail-adress")}
+        placeholder={$_('e-mail-adress')}
         type="email"
         bind:value={editable.email}
         class:border-red-500={!isEmailValid}
         class:focus:border-red-500={!isEmailValid}
         class:focus:ring-red-500={!isEmailValid}
         name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-      />
       {#if !isEmailValid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-        >
+          {$_('valid-email-is-required')}
-          {$_("valid-email-is-required")}
         </span>
       {/if}
     </div>
     <div class="text-sm w-full">
-      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
+      <label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
       <input
         autocomplete="off"
-        placeholder={$_("phone")}
+        placeholder={$_('phone')}
         type="tel"
         bind:value={editable.phone}
         name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-      />
     </div>
     <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_("group")}</span>
+      <span class="font-medium text-gray-700">{$_('group')}</span>
       <Select
         containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
+        itemFilter={(label, filterText, option) => label
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
+            .toLowerCase()
-          option.id.value.toString().startsWith(filterText.toLowerCase())}
+            .includes(
+              filterText.toLowerCase()
+            ) || option.id.value
+            .toString()
+            .startsWith(filterText.toLowerCase())}
         items={groups}
         showChevron={true}
-        placeholder={$_("search-for-an-organization-or-team-by-name-or-id")}
+        placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
-        noOptionsMessage={$_("no-organization-or-team-found")}
+        noOptionsMessage={$_('no-organization-or-team-found')}
         bind:selectedValue={group}
         on:select={(selectedValue) => {
           editable.group = selectedValue.detail.value.id;
         }}
-        on:clear={() => (editable.group = null)}
+        on:clear={() => (editable.group = null)} />
-      />
     </div>
     <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_("distance")}</span>
+      <span class="font-medium text-gray-700">{$_('distance')}</span>
       <br />
-      <span class="text-gray-700">{original_data.distance / 1000} km</span>
+      <span class="text-gray-700">{original_data.distance} km</span>
     </div>
   </section>
 {:catch error}

src/components/runners/RunnersOverview.svelte

@@ -1,76 +1,37 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  let tablePageCount = [50, 100, 250, 500];
-  import { writable } from "svelte/store";
-  import {
-    createSvelteTable,
-    flexRender,
-    getCoreRowModel,
-    getFilteredRowModel,
-    getPaginationRowModel,
-    getSortedRowModel,
-  } from "@tanstack/svelte-table";
-
-  $: selected =
-    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
-
-  const columns = [
-    {
-      accessorKey: "id",
-      header: () => "id",
-      filterFn: `equalsString`,
-    },
-    {
-      accessorKey: "firstname",
-      header: () => $_('first-name'),
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "lastname",
-      header: () => $_('last-name'),
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "group",
-      header: () => $_('group'),
-      cell: (info) => {
-        const group = info.getValue();
-        if(group.responseType === "RUNNERORGANIZATION"){return group.name}
-        return `${group.parentGroup.name} > ${group.name}`
-      },
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "distance",
-      header: () => $_('distance'),
-      cell: (info) => {
-        if(info.getValue() < 1000){return `${info.getValue()} m`}
-        return `${(info.getValue() / 1000).toFixed(1)} km`
-      },
-      enableColumnFilter: false,
-    },
-  ];
-
-  //
-
   import {
     RunnerService,
     RunnerTeamService,
     RunnerOrganizationService,
   } from "@odit/lfk-client-js";
   import store from "../../store";
+  import RunnersEmptyState from "./RunnersEmptyState.svelte";
+  import Select from "svelte-select";
   import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import { onMount } from "svelte";
+  $: searchvalue = "";
-  import InputElement from "../shared/InputElement.svelte";
   $: active_deletes = [];
-  let dataLoaded = false;
   export let current_runners = [];
-  $: sponsoring_contracts_show = generate_runners.length > 0;
+  const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
-  $: cards_show = generate_runners.length > 0;
+    current_runners = val;
-  $: certificates_show = generate_runners.length > 0;
+  });
-  $: generate_runners = []; //current_runners.filter((r) => r.selected === true);
+  $: selectedFilter_teams = null;
+  $: selectedFilter = null;
+  $: filter__teams = selectedFilter_teams || [];
+  $: filter__orgs = selectedFilter || [];
+  $: filterGroupIDs = filter__teams.concat(filter__orgs).map((i) => i.value);
+  $: sponsoring_contracts_show = current_runners.some(
+    (r) => r.is_selected === true
+  );
+  $: cards_show = current_runners.some(
+    (r) => r.is_selected === true
+  );
+  $: certificates_show = current_runners.some(
+    (r) => r.is_selected === true
+  );
+  $: generate_runners = current_runners.filter((r) => r.is_selected === true);
   $: teams = [];
   $: orgs = [];
   $: mappedteams = teams.map(function (g) {
@@ -81,239 +42,222 @@
       return { value: g.id, label: g.name };
     })
     .concat(mappedteams);
-  const options = writable({
-    data: [],
-    columns: columns,
-    initialState: {
-      pagination: {
-        pageSize: tablePageCount[0],
-      },
-    },
-    enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
-  const table = createSvelteTable(options);
-  onMount(() => {
-    RunnerService.runnerControllerGetAll().then((val) => {
-      current_runners = val;
-      dataLoaded = true;
 
-      options.update((options) => ({
+  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-        ...options,
+    teams = val;
-        data: current_runners,
-      }));
-    });
-    RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-      teams = val;
-    });
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-      (val) => {
-        orgs = val;
-      }
-    );
   });
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    orgs = val;
+  });
+  function should_display_based_on_id(id) {
+    if (searchvalue.toString().slice(-1) === "*") {
+      return id.toString().startsWith(searchvalue.replace("*", ""));
+    }
+    return id.toString() === searchvalue;
+  }
 </script>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
+{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
-  {#if !dataLoaded}
+  {#await runners_promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert"
+      role="alert">
-    >
+      <p class="font-bold">{$_('runners-are-being-loaded')}</p>
-      <p class="font-bold">{$_("runners-are-being-loaded")}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
-  {:else}
+  {:then}
-    <div class="h-12">
+    {#if current_runners.length === 0}
-      <GenerateSponsoringContracts
+      <RunnersEmptyState />
-        bind:sponsoring_contracts_show
+    {:else}
-        bind:generate_runners
+      <input
-      />
+        type="search"
-      <GenerateRunnerCards bind:cards_show bind:generate_runners />
+        bind:value={searchvalue}
-      <GenerateRunnerCertificates
+        placeholder={$_('datatable.search')}
-        bind:certificates_show
+        aria-label={$_('datatable.search')}
-        bind:generate_runners
+        class="gridjs-input gridjs-search-input mb-4" />
-      />
+      <div class="block mb-6">
-    </div>
+        <label
-    <table class="w-full">
+          for="country"
-      <thead>
+          class="text-sm font-medium text-gray-700">{$_('filter-by-organization-team')}</label>
-        {#each $table.getHeaderGroups() as headerGroup}
+        <Select
-          <tr class="select-none">
+          on:select={(event) => {
-            <th class="inset-y-0 left-0 px-4 py-2 text-left bg-stone-100 w-px">
+            selectedFilter = event.detail;
-              <InputElement
-                type="checkbox"
-                checked={$table.getIsAllRowsSelected()}
-                indeterminate={$table.getIsSomeRowsSelected()}
-                on:change={() => $table.toggleAllRowsSelected()}
-              />
-            </th>
-            {#each headerGroup.headers as header}
-              <th class="cursor-pointer">
-                {#if !header.isPlaceholder}
-                  <div on:click={header.column.getToggleSortingHandler()}>
-                    <svelte:component
-                      this={flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                    />
-                    {#if header.column.getIsSorted().toString() == "asc"}
-                      🔼
-                    {:else if header.column.getIsSorted().toString() == "desc"}
-                      🔽
-                    {/if}
-                  </div>
-                {/if}
-                {#if header.column.getCanFilter()}
-                  <div class="relative max-w-xs">
-                    <input
-                      title="name-search"
-                      value={header.column.getFilterValue() || ""}
-                      on:keyup={(e) => {
-                        header.column.setFilterValue(e.target.value);
-                      }}
-                      type="text"
-                      class="block rounded-md border-gray-200 py-2 pl-8 text-xs focus:border-blue-500 focus:ring-blue-500"
-                      placeholder=""
-                    />
-                    <div
-                      class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
-                    >
-                      <svg
-                        class="h-3.5 w-3.5 text-gray-400"
-                        xmlns="http://www.w3.org/2000/svg"
-                        width={16}
-                        height={16}
-                        fill="currentColor"
-                        viewBox="0 0 16 16"
-                      >
-                        <path
-                          d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                {/if}
-              </th>
-            {/each}
-          </tr>
-        {/each}
-      </thead>
-      <tbody>
-        {#each $table.getRowModel().rows as row}
-          <tr>
-            <td class="inset-y-0 left-0 px-4 py-2">
-              <InputElement
-                type="checkbox"
-                checked={row.getIsSelected()}
-                on:change={() => row.toggleSelected()}
-              />
-            </td>
-            {#each row.getVisibleCells() as cell}
-              <td>
-                <svelte:component
-                  this={flexRender(
-                    cell.column.columnDef.cell,
-                    cell.getContext()
-                  )}
-                />
-              </td>
-            {/each}
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-    <div class="h-2" />
-    <div class="flex items-center gap-2">
-      <button
-        class="border rounded p-1"
-        on:click={() => $table.setPageIndex(0)}
-        disabled={!$table.getCanPreviousPage()}
-      >
-        {"<<"}
-      </button>
-      <button
-        class="border rounded p-1"
-        on:click={() => $table.previousPage()}
-        disabled={!$table.getCanPreviousPage()}
-      >
-        {"<"}
-      </button>
-      <button
-        class="border rounded p-1"
-        on:click={() => $table.nextPage()}
-        disabled={!$table.getCanNextPage()}
-      >
-        {">"}
-      </button>
-      <button
-        class="border rounded p-1"
-        on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
-        disabled={!$table.getCanNextPage()}
-      >
-        {">>"}
-      </button>
-      <span class="flex items-center gap-1">
-        <div>Page</div>
-        <strong>
-          {$table.getState().pagination.pageIndex + 1} of{" "}
-          {$table.getPageCount()}
-        </strong>
-      </span>
-      <span class="flex items-center gap-1">
-        | Go to page:
-        <input
-          type="number"
-          defaultValue={$table.getState().pagination.pageIndex + 1}
-          on:change={(e) => {
-            const page = e.target.value ? Number(e.target.value) - 1 : 0;
-            $table.setPageIndex(page);
           }}
-          class="border p-1 rounded w-16"
+          selectedValue={selectedFilter}
-        />
+          placeholder={$_('filter-by-organization-team')}
+          containerClasses="mt-1 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+          items={selectgroups}
+          isMulti={true} />
+      </div>
+      <div class="h-12">
+        <GenerateSponsoringContracts
+          bind:sponsoring_contracts_show
+          bind:generate_runners />
+        <GenerateRunnerCards
+          bind:cards_show
+          bind:generate_runners />
+        <GenerateRunnerCertificates
+          bind:certificates_show
+          bind:generate_runners />
+      </div>
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <span
+                  on:click={() => {
+                    const newstate = !current_runners.some((r) => r.is_selected === true);
+                    current_runners = current_runners.map((r) => {
+                      r.is_selected = newstate;
+                      return r;
+                    });
+                  }}
+                  class="underline cursor-pointer select-none">{#if current_runners.some((r) => r.is_selected === true)}
+                    {$_('deselect-all')}
+                  {:else}{$_('select-all')}{/if}
+                </span>
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('name')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('contact-information')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('group')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('distance-in-km')}
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">{$_('action')}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each current_runners as runner}
+              {#if runner.firstname
+                .toLowerCase()
+                .includes(
+                  searchvalue.toLowerCase()
+                ) || runner.lastname
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || should_display_based_on_id(runner.id)}
+                {#if filterGroupIDs.includes(runner.group.id) || filterGroupIDs.includes(runner.group.parentGroup?.id) || filterGroupIDs.length === 0}
+                  <tr
+                    data-rowid="user_{runner.id}"
+                    data-groupid={runner.group.id}>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <input
+                        bind:checked={runner.is_selected}
+                        type="checkbox"
+                        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <div class="flex items-center">
+                        <div class="ml-4">
+                          <div class="text-sm font-medium text-gray-900">
+                            {runner.firstname}
+                            {runner.middlename || ''}
+                            {runner.lastname}
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      {#if runner.email}
+                        <div class="text-sm text-gray-500">{runner.email}</div>
+                      {/if}
+                      {#if runner.phone}
+                        <div class="text-sm text-gray-500">{runner.phone}</div>
+                      {/if}
+                      {#if runner.address.address1 !== null}
+                        {runner.address.address1}<br />
+                        {runner.address.address2 || ''}<br />
+                        {runner.address.postalcode}
+                        {runner.address.city}
+                        {runner.address.country}
+                      {/if}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      {#if runner.group.responseType === 'RUNNERTEAM'}
+                        <a
+                          href="../teams/{runner.group.id}"
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
+                      {/if}
+                      {#if runner.group.responseType === 'RUNNERORGANIZATION'}
+                        <a
+                          href="../orgs/{runner.group.id}"
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
+                      {/if}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      {runner.distance}
+                    </td>
+                    {#if active_deletes[runner.id] === true}
+                      <td
+                        class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <button
+                          on:click={() => {
+                            active_deletes[runner.id] = false;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                        <button
+                          on:click={() => {
+                            RunnerService.runnerControllerRemove(runner.id, true)
+                              .then((resp) => {
+                                current_runners = current_runners.filter((obj) => obj.id !== runner.id);
+                              })
+                              .catch((err) => {});
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                      </td>
+                    {:else}
+                      <td
+                        class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <a
+                          href="./{runner.id}"
+                          class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
+                        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
+                          <button
+                            on:click={() => {
+                              active_deletes[runner.id] = true;
+                            }}
+                            tabindex="0"
+                            class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                        {/if}
+                      </td>
+                    {/if}
+                  </tr>
+                {/if}
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:catch error}
+    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+      <span class="inline-block align-middle mr-8">
+        <b class="capitalize">{$_('general_promise_error')}</b>
+        {error}
       </span>
-      <select
-        value={$table.getState().pagination.pageSize}
-        on:change={(e) => {
-          const ps = Number(e.target.value);
-          console.log({ ps });
-          $table.setPageSize(Number(e.target.value));
-        }}
-      >
-        {#each tablePageCount as pageSize}
-          <option value={pageSize}>{pageSize}</option>
-        {/each}
-      </select>
     </div>
-    <pre>{JSON.stringify($table.getState(), null, 2)}</pre>
+  {/await}
-    <div>
-      {Object.keys(selected).length} of{" "}
-      {$table.getPreFilteredRowModel().rows.length} Total Rows Selected
-    </div>
-  {/if}
 {/if}
-
-<style>
-  thead {
-    background: #fff;
-  }
-  thead {
-    position: sticky;
-    inset-block-start: 0;
-  }
-  tbody td {
-    padding: 4px;
-  }
-  tbody tr:nth-child(even) {
-    background: #fafafa;
-  }
-  tbody tr {
-    transition: all, 0.2s;
-  }
-  tbody tr:hover {
-    background: #f5f5f5;
-  }
-</style>

src/components/runners/ThFilterGroup.svelte

@@ -1,35 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  export let groups;
-  export let handler;
-  let selected = "all";
-</script>
-
-<th style="border-bottom: 1px solid #ddd;">
-  <select
-    on:input={() => {
-      setTimeout(() => {
-        if (`${selected}`.trim()) {
-          const value = selected;
-          handler.filter(value, (runner) => {
-            if (
-              runner.group.id === value ||
-              runner?.group?.parentGroup?.id === value ||
-              value === "all"
-            )
-              return runner;
-            return "";
-          });
-        }
-      }, 50);
-    }}
-    bind:value={selected}
-    name="groupfilter"
-    id="groupfilter"
-  >
-    <option value="all">{$_('all')}</option>
-    {#each groups as g}
-      <option value={g.value}>{g.label}</option>
-    {/each}
-  </select>
-</th>

src/components/scans/AddScanModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import {
     RunnerService,
     ScanService,
@@ -14,7 +14,7 @@
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterRunners = (label, filterText, option) =>
     label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.value.id.toString().startsWith(filterText.toLowerCase());
+    option.value.toString().startsWith(filterText.toLowerCase());
   function focus(el) {
     el.focus();
   }
@@ -81,7 +81,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/scans/ScansOverview.svelte

@@ -1,147 +1,125 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
+  import {
-  import { ScanService, TrackService } from "@odit/lfk-client-js";
+    ScanService,
+  } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
   import ScansEmptyState from "./ScansEmptyState.svelte";
-  import ThFilterRunner from "./ThFilterRunner.svelte";
+  $: searchvalue = "";
-  import ThFilterTrack from "./ThFilterTrack.svelte";
   $: active_deletes = [];
   export let current_scans = [];
-  const handler = new DataHandler(current_scans, { rowsPerPage: 20 });
-  const rows = handler.getRows();
   const scans_promise = ScanService.scanControllerGetAll().then((val) => {
     current_scans = val;
-    handler.setRows(val);
   });
-  $: allTracks = [];
+  function should_display_based_on_id(id) {
-  TrackService.trackControllerGetAll().then((val) => {
+    if (searchvalue.toString().slice(-1) === "*") {
-    allTracks = val;
+      return id.toString().startsWith(searchvalue.replace("*", ""));
-  });
-  function format_laptime(laptime) {
-    if (laptime == 0 || laptime == null) {
-      return $_("first-scan-of-the-day");
     }
-    if (laptime < 60) {
+    return id.toString() === searchvalue;
-      return `${laptime}s`;
+  }
-    }
+  function format_laptime(laptime){
-    if (laptime < 3600) {
+    if(laptime == 0 || laptime == null){return $_('first-scan-of-the-day')}
-      return `${Math.floor(laptime / 60)}min ${
+    if(laptime < 60){return `${laptime}s`}
-        laptime - Math.floor(laptime / 60) * 60
+    if(laptime < 3600){return `${Math.floor(laptime / 60)}min ${laptime - (Math.floor(laptime / 60)*60)}s`}
-      }s`;
+    return `${Math.floor(laptime / 3600)}h ${laptime - (Math.floor(laptime / 3600)*3600)}min ${laptime - (Math.floor(laptime / 3600)*3600) - (Math.floor(laptime / 60)*60)}`
-    }
-    return `${Math.floor(laptime / 3600)}h ${
-      laptime - Math.floor(laptime / 3600) * 3600
-    }min ${
-      laptime -
-      Math.floor(laptime / 3600) * 3600 -
-      Math.floor(laptime / 60) * 60
-    }`;
   }
 </script>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
+{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:GET')}
   {#await scans_promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert"
+      role="alert">
-    >
+      <p class="font-bold">{$_('scans-are-being-loaded')}</p>
-      <p class="font-bold">{$_("scans-are-being-loaded")}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
   {:then}
     {#if current_scans.length === 0}
       <ScansEmptyState />
     {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
       <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-      >
+        <table class="divide-y divide-gray-200 w-full">
-        <Datatable {handler}>
+          <thead class="bg-gray-50">
-          <table class="divide-y divide-gray-200 w-full">
+            <tr>
-            <thead class="bg-gray-50">
+              <th
-              <tr>
+                scope="col"
-                <Th {handler} orderBy="id">ID</Th>
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                <Th {handler}>
+                {$_('runner')}
-                  {$_("runner")}
+              </th>
-                </Th>
+              <th
-                <Th {handler}>
+                scope="col"
-                  {$_("distance")}
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                </Th>
+                {$_('distance-track')}
-                <Th {handler}>
+              </th>
-                  {$_("track")}
+              <th
-                </Th>
+                scope="col"
-                <Th {handler}>
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  {$_("laptime")}
+                {$_('laptime')}
-                </Th>
+              </th>
-                <Th {handler}>
+              <th
-                  {$_("status")}
+                scope="col"
-                </Th>
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                <th
+                {$_('status')}
-                  scope="col"
+              </th>
-                  class="relative px-6 py-3"
+              <th scope="col" class="relative px-6 py-3">
-                  style="border-bottom: 1px solid #ddd;"
+                <span class="sr-only">{$_('action')}</span>
-                >
+              </th>
-                  {$_("action")}
+            </tr>
-                </th>
+          </thead>
-              </tr>
+          <tbody class="divide-y divide-gray-200">
-              <tr>
+            {#each current_scans as scan}
-                <ThFilter {handler} filterBy="id" />
+              {#if scan.track?.name
-                <ThFilterRunner {handler} />
+                .toLowerCase()
-                <th style="border-bottom: 1px solid #ddd;" />
+                .includes(
-                <ThFilterTrack tracks={allTracks} {handler} />
+                  searchvalue.toLowerCase()
-                <!-- <th style="border-bottom: 1px solid #ddd;" /> -->
+                ) || scan.runner?.firstname
-                <th style="border-bottom: 1px solid #ddd;" />
+                  .toLowerCase()
-                <th style="border-bottom: 1px solid #ddd;" />
+                  .includes(
-                <!-- TODO: filter status -->
+                    searchvalue.toLowerCase()
-                <th style="border-bottom: 1px solid #ddd;" />
+                  ) || scan.runner?.lastname
-              </tr>
+                  .toLowerCase()
-            </thead>
+                  .includes(
-            <tbody class="divide-y divide-gray-200">
+                    searchvalue.toLowerCase()
-              {#each $rows as scan}
+                  ) || should_display_based_on_id(scan.id)}
                 <tr data-rowid="scan_{scan.id}">
-                  <td class="px-6 py-4 whitespace-nowrap text-left">
-                    <div class="text-sm font-medium text-gray-900">
-                      {scan.id}
-                    </div>
-                  </td>
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <a
                         href="../runners/{scan.runner.id}"
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{scan.runner.firstname}
-                        >{scan.runner.firstname}
+                        {scan.runner.middlename || ''}
-                        {scan.runner.middlename || ""}
+                        {scan.runner.lastname}</a>
-                        {scan.runner.lastname}</a
-                      >
                     </div>
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-left">
+                  <td class="px-6 py-4 whitespace-nowrap">
                     <div class="text-sm font-medium text-gray-900">
                       {#if scan.distance < 1000}
                         {scan.distance}m
                       {:else}{scan.distance / 1000}km{/if}
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-left">
-                    <div class="text-sm font-medium text-gray-900">
                       {#if scan.track}
                         <a
                           href="../tracks"
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{scan.track.name}
-                          >{scan.track.name}
                         </a>
                       {/if}
                     </div>
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-left">
+                  <td class="px-6 py-4 whitespace-nowrap">
                     {#if scan.responseType === "TRACKSCAN"}
                       <div class="text-sm font-medium text-gray-900">
                         {format_laptime(scan.lapTime)}
                       </div>
                     {:else}
                       <div class="text-sm font-medium text-gray-900">
-                        {$_("scan-with-fixed-distance")}
+                        {$_('scan-with-fixed-distance')}
                       </div>
                     {/if}
                   </td>
@@ -149,30 +127,23 @@
                     <div class="flex items-center">
                       {#if scan.valid}
                         <span
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('valid')}</span>
-                          >{$_("valid")}</span
-                        >
                       {:else}
                         <span
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('invalid')}</span>
-                          >{$_("invalid")}</span
-                        >
                       {/if}
                     </div>
                   </td>
 
                   {#if active_deletes[scan.id] === true}
                     <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                    >
                       <button
                         on:click={() => {
                           active_deletes[scan.id] = false;
                         }}
                         tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                        >{$_("cancel-delete")}</button
-                      >
                       <button
                         on:click={() => {
                           ScanService.scanControllerRemove(scan.id, false).then(
@@ -181,51 +152,44 @@
                                 (obj) => obj.id !== scan.id
                               );
                               Toastify({
-                                text: "Scan deleted",
+                                text: 'Scan deleted',
                                 duration: 500,
                                 backgroundColor:
-                                  "linear-gradient(to right, #00b09b, #96c93d)",
+                                  'linear-gradient(to right, #00b09b, #96c93d)',
                               }).showToast();
                             }
                           );
                         }}
                         tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-                        >{$_("confirm-delete")}</button
-                      >
                     </td>
                   {:else}
                     <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                    >
                       <a
                         href="./{scan.id}"
-                        class="text-indigo-600 hover:text-indigo-900"
+                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
-                        >{$_("details")}</a
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:DELETE')}
-                      >
-                      {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
                         <button
                           on:click={() => {
                             active_deletes[scan.id] = true;
                           }}
                           tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-                          >{$_("delete")}</button
-                        >
                       {/if}
                     </td>
                   {/if}
                 </tr>
-              {/each}
+              {/if}
-            </tbody>
+            {/each}
-          </table>
+          </tbody>
-        </Datatable>
+        </table>
       </div>
     {/if}
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
       <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_("general_promise_error")}</b>
+        <b class="capitalize">{$_('general_promise_error')}</b>
         {error}
       </span>
     </div>

src/components/scans/ThFilterRunner.svelte

@@ -1,50 +0,0 @@
-<script>
-  export let handler;
-  let filterValue = "";
-</script>
-
-<th>
-  <input
-    on:input={() => {
-      setTimeout(() => {
-        const v = filterValue.toLowerCase();
-        handler.filter(v, (c) => {
-          if (v.startsWith("#")) {
-            return `#${c.runner?.id}`;
-          }
-          if (c.runner) {
-            let runnerName = `${c.runner.firstname} ${c.runner.lastname}`;
-            if (c.runner.middlename) {
-              runnerName = `${c.runner.firstname} ${c.runner.middlename} ${c.runner.lastname}`;
-            }
-            runnerName = runnerName.toLowerCase();
-            return runnerName;
-          }
-          return "";
-        });
-      }, 150);
-    }}
-    placeholder="Filter"
-    bind:value={filterValue}
-    type="text"
-    name="runnerfilter"
-    id="runnerfilter"
-  />
-</th>
-
-<style>
-  th {
-    border-bottom: 1px solid #e0e0e0;
-  }
-  input {
-    margin: -1px 0 0 0;
-    padding: 0;
-    width: 100%;
-    height: 24px;
-    border: none;
-    text-align: left;
-    background: inherit;
-    outline: 0;
-    font-size: 14px;
-  }
-</style>

src/components/scans/ThFilterTrack.svelte

@@ -1,31 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  export let tracks;
-  export let handler;
-  let selected = "all";
-</script>
-
-<th style="border-bottom: 1px solid #ddd;">
-  <select
-    on:input={() => {
-      setTimeout(() => {
-        if (`${selected}`.trim()) {
-          const value = selected;
-          handler.filter(value, (scan) => {
-            // TODO: fix filter
-            if (scan.track.id === value || value === "all") return scan.track.id;
-            return "";
-          });
-        }
-      }, 50);
-    }}
-    bind:value={selected}
-    name="trackfilter"
-    id="trackfilter"
-  >
-    <option value="all">{$_("all")}</option>
-    {#each tracks as track}
-      <option value={track.id}>{track.name}</option>
-    {/each}
-  </select>
-</th>

src/components/scanstations/AddScanStationModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import { ScanStationService, TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import Select from "svelte-select";
@@ -81,7 +81,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/scanstations/ConfirmScanStationDeletion.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import { ScanStationService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
@@ -32,7 +32,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={cancelDelete}>
     <div

src/components/scanstations/CopyScanStationTokenModal.svelte

@@ -1,6 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import Toastify from "toastify-js";
   import { tick, createEventDispatcher } from "svelte";
   export let copy_modal_open;
@@ -46,7 +46,7 @@
   {#if valueCopy != null}
     <textarea bind:this={areaDom}>{valueCopy}</textarea>
   {/if}
-  <div class="fixed z-10 inset-0 overflow-y-auto" >
+  <div class="fixed z-10 inset-0 overflow-y-auto" use:focusTrap>
     <div
       class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">

src/components/settings/ConfirmProfileDeletion.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import { MeService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
@@ -17,7 +17,7 @@
     MeService.meControllerRemove(true)
       .then((resp) => {
         Toastify({
-          text: $_('profile-deleted'),
+          text: "Profile deleted!",
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -30,7 +30,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={cancelDelete}>
     <div

src/components/shared/InputElement.svelte

@@ -1,20 +0,0 @@
-<script>
-  let className = "";
-  export { className as class };
-
-  export let type;
-</script>
-
-<input
-  class={`border-1 border-stone-300 border rounded-md shadow ${className} ${
-    type === "checkbox" && "w-5 h-5 text-orange-400"
-  }`}
-  {type}
-  {...$$restProps}
-  on:click
-  on:change
-  on:keydown
-  on:keyup
-  on:mouseenter
-  on:mouseleave
-/>

src/components/statsclients/AddStatsClientModal.svelte

@@ -1,151 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-  
-  import { StatsClientService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  export let modal_open;
-  export let new_client;
-  export let current_clients;
-  export let copy_modal_open;
-  function focus(el) {
-    el.focus();
-  }
-  $: description = "";
-  $: createbtnenabled = description != "";
-  $: processed_last_submit = true;
-  (() => {
-    document.onkeydown = (e) => {
-      e = e || window.event;
-      if (e.key === "Escape") {
-        modal_open = false;
-      }
-      if (e.keyCode === 13) {
-        if (createbtnenabled === true) {
-          createbtnenabled = false;
-          submit();
-        }
-      }
-    };
-  })();
-  function submit() {
-    if (processed_last_submit === true) {
-      processed_last_submit = false;
-      const toast = Toastify({
-        text: $_("statsclient-is-being-added"),
-        duration: -1,
-      }).showToast();
-
-      StatsClientService.statsClientControllerPost({description})
-        .then((result) => {
-          description = "";
-          modal_open = false;
-          //
-          Toastify({
-            text: $_("scanstation-added"),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          current_clients.push(result);
-          current_clients = current_clients;
-          new_client = result;
-          copy_modal_open = true;
-        })
-        .catch((err) => {
-          //
-        })
-        .finally(() => {
-          processed_last_submit = true;
-          //
-          toast.hideToast();
-        });
-    }
-  }
-</script>
-
-{#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    
-    use:clickOutside
-    on:click_outside={() => {
-      modal_open = false;
-    }}>
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <svg
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-a-new-statsclient')}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-create-a-new-statsclient')}
-                </p>
-              </div>
-              <div class="grid grid-cols-6 gap-6">
-                <div class="col-span-6">
-                  <label
-                    for="description"
-                    class="block text-sm font-medium text-gray-700">{$_('description')}</label>
-                  <input
-                    use:focus
-                    autocomplete="off"
-                    placeholder={$_('description')}
-                    bind:value={description}
-                    type="text"
-                    name="description"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            disabled={!createbtnenabled}
-            class:opacity-50={!createbtnenabled}
-            on:click={submit}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('create')}
-          </button>
-          <button
-            on:click={() => {
-              modal_open = false;
-            }}
-            type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('cancel')}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

src/components/statsclients/ConfirmStatsClientDeletion.svelte

@@ -1,92 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-  
-  import { ScanStationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  import { createEventDispatcher } from "svelte";
-  export let modal_open;
-  export let delete_station;
-  const dispatch = createEventDispatcher();
-  function cancelDelete() {
-    modal_open = false;
-    dispatch("cancelDelete", { id: delete_station.id });
-  }
-  function deleteClient() {
-    ScanStationService.donorControllerRemove(
-      delete_station.id,
-      true
-    )
-      .then((resp) => {
-        Toastify({
-          text: $_('statsclient-deleted'),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
-</script>
-
-{#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    
-    use:clickOutside
-    on:click_outside={cancelDelete}>
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <svg class="h-6 w-6 text-blue-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"/></svg>
-            </div>
-            <!-- <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('attention')}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_(
-                    'do-you-want-to-delete-this-donor-with-all-related-donations'
-                  )}
-                  <br /> 
-                  {$_('all-associated-scans-will-get-deleted-as-well')}
-                </p>
-              </div>
-            </div> -->
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            on:click={deleteClient}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('confirm-delete-statsclient')}
-          </button>
-          <button
-            on:click={cancelDelete}
-            type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('cancel-keep-statsclient')}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

src/components/statsclients/CopyStatsClientTokenModal.svelte

@@ -1,129 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  
-  import Toastify from "toastify-js";
-  import { tick, createEventDispatcher } from "svelte";
-  export let copy_modal_open;
-  export let new_client;
-  const dispatch = createEventDispatcher();
-  let valueCopy = null;
-  let areaDom;
-  let copied = false;
-  function close() {
-    copy_modal_open = false;
-  }
-  async function copy() {
-    valueCopy = new_client.key;
-    await tick();
-    areaDom.focus();
-    areaDom.select();
-    try {
-      const successful = document.execCommand("copy");
-      if (!successful) {
-        throw new Error();
-      }
-      Toastify({
-        text: $_("copied-token-to-clipboard"),
-        duration: 500,
-        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-      }).showToast();
-      copied = true;
-    } catch (err) {
-      Toastify({
-        text: $_("error-whyile-copying-to-clipboard"),
-        duration: 500,
-        backgroundColor:
-          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-      }).showToast();
-    }
-
-    // we can notifi by event or storage about copy status
-    valueCopy = null;
-  }
-</script>
-
-{#if copy_modal_open}
-  {#if valueCopy != null}
-    <textarea bind:this={areaDom}>{valueCopy}</textarea>
-  {/if}
-  <div class="fixed z-10 inset-0 overflow-y-auto" >
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <svg
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('token')}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_('the-statsclient-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again')}
-                  <br />
-                  {$_('please-copy-the-token-and-store-it-somewhere-save')}
-                </p>
-              </div>
-              <div class="mt-2 mb-6">
-                <label
-                  for="token"
-                  class="block text-sm font-medium text-gray-700">{$_('token')}</label>
-                <div on:click={copy} class="inline-flex">
-                  <p
-                    name="token"
-                    class:bg-green-200={copied}
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2">
-                    {new_client.key}
-                  </p>
-                  <div
-                    class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      height="24"><path fill="none" d="M0 0h24v24H0z" />
-                      <path
-                        fill="currentColor"
-                        d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" /></svg>
-                  </div>
-                </div>
-                <p class="text-gray-500 text-xs">
-                  {$_('click-to-copy-token-to-clipboard')}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            on:click={close}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('yes-i-copied-the-token')}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

src/components/statsclients/StatsClientDetail.svelte

@@ -1,119 +0,0 @@
-<script>
-  import { t, _ } from "svelte-i18n";
-  import store from "../../store";
-  import Toastify from "toastify-js";
-  import PromiseError from "../base/PromiseError.svelte";
-  import ConfirmStatsClientDeletion from "./ConfirmStatsClientDeletion.svelte";
-	import { StatsClientService } from "@odit/lfk-client-js";
-  let data_loaded = false;
-  let modal_open;
-  let delete_client;
-  export let params;
-  $: delete_triggered = false;
-  $: original_data = {};
-  const promise = StatsClientService.statsClientControllerGetOne(
-    params.clientid
-  ).then((data) => {
-    data_loaded = true;
-    original_data = Object.assign(original_data, data);
-  });
-  function deleteClient() {
-    StatsClientService.statsClientControllerRemove(original_data.id, false)
-      .then((resp) => {
-        Toastify({
-          text: $_("statsclient-deleted"),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_client = original_data;
-      });
-  }
-</script>
-
-<ConfirmStatsClientDeletion bind:modal_open bind:delete_client />
-{#await promise}
-  {$_('loading-statsclient-details')}
-{:then}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_('statsclient')}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
-                  x1="5"
-                  y1="12"
-                  x2="19"
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">#{original_data.id}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      #{original_data.id}
-      <span data-id="stations_actions_${original_data.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:DELETE')}
-          {#if delete_triggered}
-            <button
-              on:click={deleteClient}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-statsclient')}</button>
-          {/if}
-        {/if}
-      </span>
-    </div>
-    <!--  -->
-    <div class="text-sm w-full">
-      <label
-        for="description"
-        class="font-medium text-gray-700">{$_('description')}</label>
-      <p
-        name="description"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" >
-        {original_data.description}</p>
-    </div>
-  </section>
-{:catch error}
-  <PromiseError {error} />
-{/await}

src/components/statsclients/StatsClients.svelte

@@ -1,33 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import AddStatsClientModal from "./AddStatsClientModal.svelte";
-	import CopyStatsClientTokenModal from "./CopyStatsClientTokenModal.svelte";
-  import StatsClientsOverview from "./StatsClientsOverview.svelte";
-  export let modal_open = false;
-  export let copy_modal_open = false;
-  export let new_client = {};
-  let current_clients = [];
-</script>
-
-<section class="container p-5">
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('statsclients')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:CREATE')}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        {$_('create-a-new-statsclient')}
-      </button>
-    {/if}
-  </span>
-  <StatsClientsOverview bind:current_clients bind:modal_open bind:new_client bind:copy_modal_open />
-</section>
-
-{#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:CREATE')}
-<AddStatsClientModal bind:modal_open bind:current_clients bind:new_client bind:copy_modal_open/>
-<CopyStatsClientTokenModal bind:copy_modal_open bind:new_client />
-{/if}

src/components/statsclients/StatsClientsEmptyState.svelte

@@ -1,21 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-import AddStatsClientModal from "./AddStatsClientModal.svelte";
-import CopyScanStationTokenModal from "./CopyStatsClientTokenModal.svelte";
-  import scanstations_empty from "./statsclients_empty.svg";
-  let modal_open = false;
-  let copy_modal_open = false;
-  let new_client = {};
-  let current_clients = [];
-</script>
-
-<div class="text-center items-center justify-center">
-  <p class="mb-16 text-lg text-gray-500">
-    <img class="w-full h-44" src={scanstations_empty} alt="" />
-    <span class="font-bold">{$_('you-dont-have-any-scanclients-yet')}.</span><br />
-    <span>{$_('add-the-first-statsclient')}</span>
-  </p>
-</div>
-
-<AddStatsClientModal bind:modal_open bind:current_clients bind:new_client bind:copy_modal_open/>
-<CopyScanStationTokenModal bind:copy_modal_open bind:new_client />

src/components/statsclients/StatsClientsOverview.svelte

@@ -1,150 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
-  import { StatsClientService } from "@odit/lfk-client-js";
-  const promise = StatsClientService.statsClientControllerGetAll().then(
-    (result) => {
-      current_clients = result;
-    }
-  );
-  import store from "../../store";
-  import StatsClientsEmptyState from "./StatsClientsEmptyState.svelte";
-  import ConfirmStatsClientDeletion from "./ConfirmStatsClientDeletion.svelte";
-  $: searchvalue = "";
-  $: active_deletes = [];
-  let delete_client = {};
-  let modal_open = false;
-  export let current_clients = [];
-</script>
-
-<ConfirmStatsClientDeletion
-  on:cancelDelete={(event) => {
-    modal_open = false;
-    active_deletes[event.detail.id] = false;
-  }}
-  bind:modal_open
-  bind:delete_client />
-{#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:GET')}
-  {#await promise}
-    <div
-      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert">
-      <p class="font-bold">{$_('statsclients-are-being-loaded')}</p>
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
-    </div>
-  {:then}
-    {#if current_clients.length === 0}
-      <StatsClientsEmptyState />
-    {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
-        aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-        <table class="divide-y divide-gray-200 w-full">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-              scope="col"
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              {$_('description')}
-            </th>
-            <th
-              scope="col"
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              {$_('prefix')}
-            </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#each current_clients as c}
-              {#if Object.values(c)
-                .toString()
-                .toLowerCase()
-                .includes(searchvalue)}
-                <tr data-rowid="station_{c.id}">
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                            {c.description}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {c.prefix}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  {#if active_deletes[c.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {
-                          active_deletes[c.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                      <button
-                        on:click={() => {
-                          StatsClientService.statsClientControllerRemove(c.id, false)
-                            .then((resp) => {
-                              current_clients = current_clients.filter((obj) => obj.id !== c.id);
-                              Toastify({
-                                text: $_('statsclient-deleted'),
-                                duration: 500,
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            })
-                            .catch((err) => {
-                              modal_open = true;
-                              delete_client = c;
-                            });
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-                    </td>
-                  {:else}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <a
-                        href="/statsclients/{c.id}"
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:DELETE')}
-                        <button
-                          on:click={() => {
-                            active_deletes[c.id] = true;
-                          }}
-                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-                      {/if}
-                    </td>
-                  {/if}
-                </tr>
-              {/if}
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  {:catch error}
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-      <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_('general_promise_error')}</b>
-        {error}
-      </span>
-    </div>
-  {/await}
-{/if}

src/components/teams/AddTeamModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import {
     RunnerOrganizationService,
     RunnerTeamService,
@@ -43,7 +43,7 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: $_('team-is-being-added'),
+        text: "Team is being added...",
         duration: -1,
       }).showToast();
       RunnerTeamService.runnerTeamControllerPost({
@@ -55,7 +55,7 @@
           modal_open = false;
           //
           Toastify({
-            text: $_('team-added'),
+            text: "Team added",
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -77,7 +77,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/teams/ConfirmTeamDeletion.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import { RunnerTeamService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
@@ -16,7 +16,7 @@
     RunnerTeamService.runnerTeamControllerRemove(delete_team.id, true)
       .then((resp) => {
         Toastify({
-          text: $_('team-deleted'),
+          text: "Team deleted",
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -29,7 +29,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={cancelDelete}>
     <div

src/components/teams/TeamDetail.svelte

@@ -26,9 +26,9 @@
   export let params;
   export let import_modal_open = false;
   $: delete_triggered = false;
-  $: save_enabled = data_changed && teamdata.parentGroup != null;
+  $: save_enabled = !data_changed && teamdata.parentGroup != null;
   $: data_loaded = false;
-  $: data_changed = !(JSON.stringify(teamdata) === JSON.stringify(original));
+  $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
   $: sponsoring_contracts_show = true;
   $: cards_show = true;
   $: certificates_show = true;
@@ -47,8 +47,6 @@
     RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
       (val) => {
         orgs = val.map((r) => {
-          delete r.contact;
-          r.teams = [];
           return { label: r.name, value: r };
         });
         group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
@@ -69,7 +67,7 @@
     RunnerTeamService.runnerTeamControllerRemove(original.id, false)
       .then((resp) => {
         Toastify({
-          text: $_('team-deleted'),
+          text: "Organization deleted",
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -83,7 +81,7 @@
   function submit() {
     if (data_loaded === true && save_enabled) {
       Toastify({
-        text: $_('updating-team'),
+        text: "updating team",
         duration: 2500,
       }).showToast();
       let postdata = teamdata;
@@ -94,7 +92,7 @@
           Object.assign(original, teamdata);
           original = original;
           Toastify({
-            text: $_('updated-team'),
+            text: "updated team",
             duration: 2500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();

src/components/tracks/AddTrackModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import { tracks as tracksstore } from "../../store.js";
   import { TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
@@ -75,7 +75,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/tracks/Tracks.svelte

@@ -34,7 +34,7 @@
         `[data-id="triggered_table_actions_${trackid}"]`
       ).parentNode.parentNode.parentNode;
       Toastify({
-        text: $_('track-is-being-updated'),
+        text: "Track is being updated...",
         duration: 500,
       }).showToast();
       TrackService.trackControllerPut(trackid, {
@@ -45,7 +45,7 @@
       })
         .then((r) => {
           Toastify({
-            text: $_('track-was-updated'),
+            text: "Track was updated!",
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
             duration: 1000,
           }).showToast();

src/components/users/AddUserModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
   import { UserService } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import Toastify from "toastify-js";
@@ -92,7 +92,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/users/UserPermissions.svelte

@@ -27,7 +27,7 @@
   });
   function submit() {
     Toastify({
-      text: $_('updating-permissions'),
+      text: "updating permissions...",
       duration: 2500,
     }).showToast();
     to_delete.forEach((d) => {

src/components/users/UsersOverview.svelte

@@ -82,6 +82,14 @@
                 <tr data-rowid="user_{u.id}">
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
+                      {#if u.profilePic}
+                        <div class="flex-shrink-0 h-10 w-10">
+                          <img
+                            class="h-10 w-10 rounded-full"
+                            src={u.profilePic}
+                            alt="" />
+                        </div>
+                      {/if}
                       <div class="ml-4">
                         <div class="text-sm font-medium text-gray-900">
                           {u.firstname}

src/locales/de.json

@@ -1,479 +1,432 @@
 {
-  "404message": "Die gesuchte Seite wurde leider nicht gefunden.",
+    "404message": "Die gesuchte Seite wurde leider nicht gefunden.",
-  "404title": "Fehler 404",
+    "404title": "Fehler 404",
-  "about": "Über",
+    "about": "Über",
-  "action": "Aktionen",
+    "action": "Aktionen",
-  "active": "Aktiv",
+    "active": "Aktiv",
-  "add-card": "Karte erstellen",
+    "add-card": "Karte erstellen",
-  "add-donation": "Sponsoring erstellen",
+    "add-donation": "Sponsoring erstellen",
-  "add-donor": "Sponsor:in erstellen",
+    "add-donor": "Sponsor:in erstellen",
-  "add-or-update-a-payment": "Zahlung hinzufügen oder bearbeiten",
+    "add-scan": "Scan erstellen",
-  "add-scan": "Scan erstellen",
+    "add-the-first-scanstation": "Erstelle deine erste Scannerstation.",
-  "add-the-first-scanstation": "Erstelle deine erste Scannerstation.",
+    "add-user-group": "Neue Gruppe erstellen",
-  "add-the-first-statsclient": "Erstelle deinen ersten Statsclient.",
+    "add-your-first-card": "Erstelle deine erste Läuferkarte",
-  "add-user-group": "Neue Gruppe erstellen",
+    "add-your-first-contact": "Erstelle den ersten Kontakt",
-  "add-your-first-card": "Erstelle deine erste Läuferkarte",
+    "add-your-first-donor": "Erstelle die erste Sponsor:in",
-  "add-your-first-contact": "Erstelle den ersten Kontakt",
+    "add-your-first-group": "Erstelle die erste Gruppe",
-  "add-your-first-donor": "Erstelle die erste Sponsor:in",
+    "add-your-first-organization": "Erstelle die erste Organisation",
-  "add-your-first-group": "Erstelle die erste Gruppe",
+    "add-your-first-runner": "Erstelle die erste Läufer:in",
-  "add-your-first-organization": "Erstelle die erste Organisation",
+    "add-your-first-team": "Erstelle das erste Team",
-  "add-your-first-runner": "Erstelle die erste Läufer:in",
+    "add-your-first-track": "Erstelle den ersten Track (Laufstrecke).",
-  "add-your-first-team": "Erstelle das erste Team",
+    "add-your-first-user": "Erstelle die erste Benutzer:in",
-  "add-your-first-track": "Erstelle den ersten Track (Laufstrecke).",
+    "add-your-fist-donation": "Erstelle dein erstes Sponsoring",
-  "add-your-first-user": "Erstelle die erste Benutzer:in",
+    "add-your-fist-scan": "Füge deinen ersten Scan hinzu",
-  "add-your-fist-donation": "Erstelle dein erstes Sponsoring",
+    "adding-card": "Karte wird erstellt",
-  "add-your-fist-scan": "Füge deinen ersten Scan hinzu",
+    "adding-scan": "Scan wird hinzugefügt",
-  "adding-card": "Karte wird erstellt",
+    "address": "Adresse",
-  "adding-donation": "Sponsoring wird erstellt...",
+    "address-is-required": "Du musst eine Adresse angeben",
-  "adding-scan": "Scan wird hinzugefügt",
+    "after-deletion-we-cant-restore-your-old-profile": "Nach der Löschung können auch die Admins dein Profil nicht wiederherstellen!",
-  "address": "Adresse",
+    "after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that": "Nach der Änderung wirst du abgemeldet - bitte melde dich dann mit deinem neuen Passwort an.",
-  "address-is-required": "Du musst eine Adresse angeben",
+    "all-associated-donations-will-get-deleted-as-well": "Alle Sponsorings dieser Sponsor:in werden ebenfalls gelöscht",
-  "after-deletion-we-cant-restore-your-old-profile": "Nach der Löschung können auch die Admins dein Profil nicht wiederherstellen!",
+    "all-associated-runners-will-be-deleted-too": "Alle zugehörigen Läufer:innen werden auch gelöscht!",
-  "after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that": "Nach der Änderung wirst du abgemeldet - bitte melde dich dann mit deinem neuen Passwort an.",
+    "all-associated-teams-and-runners-will-be-deleted-too": "Alle assoziierten Teams und Läufer:innen werden auch gelöscht!",
-  "all": "Alle",
+    "amount": "Anzahl",
-  "all-associated-donations-will-get-deleted-as-well": "Alle Sponsorings dieser Sponsor:in werden ebenfalls gelöscht",
+    "amount-per-kilometer": "Betrag pro Kilometer",
-  "all-associated-runners-will-be-deleted-too": "Alle zugehörigen Läufer:innen werden auch gelöscht!",
+    "apartment-suite-etc": "Apartment, Wohnung, etc.",
-  "all-associated-teams-and-runners-will-be-deleted-too": "Alle assoziierten Teams und Läufer:innen werden auch gelöscht!",
+    "application_name": "Lauf für Kaya! - Admin",
-  "already-paid": "Bereits bezahlt",
+    "applying-changes": "Änderungen anwenden",
-  "amount": "Anzahl",
+    "attention": "Achtung!",
-  "amount-per-kilometer": "Betrag pro Kilometer",
+    "author": "Autor:in",
-  "apartment-suite-etc": "Apartment, Wohnung, etc.",
+    "bitte-bestaetige-diese-laeufer-fuer-den-import": "Bitte die Läufer:innen für den Import bestätigen.",
-  "application_name": "Lauf für Kaya! - Admin",
+    "by": "von",
-  "applying-changes": "Änderungen anwenden",
+    "cancel": "Abbrechen",
-  "attention": "Achtung!",
+    "cancel-delete": "Löschen abbrechen",
-  "author": "Autor:in",
+    "cancel-keep-donor": "Abbrechen, Sponsor:in behalten",
-  "bitte-bestaetige-diese-laeufer-fuer-den-import": "Bitte die Läufer:innen für den Import bestätigen.",
+    "cancel-keep-my-profile": "Abbrechen, mein Profil behalten",
-  "by": "von",
+    "cancel-keep-organization": "Abbrechen und Organisation bearbeiten",
-  "cancel": "Abbrechen",
+    "cancel-keep-team": "Abbrechen, Team behalten",
-  "cancel-delete": "Löschen abbrechen",
+    "cannot-reset-your-password-directly": "Schade. \nWir können das Passwort leider nicht direkt zurücksetzen.\nBitte sende uns eine Mail in der du deine Identität bestätigst.",
-  "cancel-keep-donor": "Abbrechen, Sponsor:in behalten",
+    "card-added": "Karte wurde hinzugefügt",
-  "cancel-keep-my-profile": "Abbrechen, mein Profil behalten",
+    "card-deleted": "Karte gelöscht",
-  "cancel-keep-organization": "Abbrechen und Organisation bearbeiten",
+    "card-updated": "Karte aktualisiert",
-  "cancel-keep-statsclient": "Abbrechen und Statsclient behalten",
+    "cards": "Läuferkarten",
-  "cancel-keep-team": "Abbrechen, Team behalten",
+    "certificates": "Urkunden",
-  "cannot-reset-your-password-directly": "Schade. \nWir können das Passwort leider nicht direkt zurücksetzen.\nBitte sende uns eine Mail in der du deine Identität bestätigst.",
+    "change-your-password-here": "Hier kannst du dein Passwort ändern",
-  "card-added": "Karte wurde hinzugefügt",
+    "changing-your-password": "Passwort wird geändert",
-  "card-deleted": "Karte gelöscht",
+    "city": "Stadt",
-  "card-updated": "Karte aktualisiert",
+    "click-to-copy-the-link-into-your-clipboard": "Klicke auf den Link, um ihn in deine Zwischenablage zu kopieren",
-  "cards": "Läuferkarten",
+    "click-to-copy-token-to-clipboard": "Klicke auf den Token, um ihn in deine Zwischenablage zu kopieren",
-  "certificates": "Urkunden",
+    "close": "Schließen",
-  "change-your-password-here": "Hier kannst du dein Passwort ändern",
+    "code": "Code",
-  "changing-your-password": "Passwort wird geändert",
+    "configure-the-tracks-and-minimum-lap-times": "Bearbeite die Tracks und ihre minimale Rundenzeit",
-  "city": "Stadt",
+    "confirm": "Bestätigen",
-  "click-to-copy-the-link-into-your-clipboard": "Klicke auf den Link, um ihn in deine Zwischenablage zu kopieren",
+    "confirm-delete": "Löschung Bestätigen",
-  "click-to-copy-token-to-clipboard": "Klicke auf den Token, um ihn in deine Zwischenablage zu kopieren",
+    "confirm-delete-donor-with-all-donations": "Bestätigen, Sponsor:in mit allen Sponsorings löschen",
-  "close": "Schließen",
+    "confirm-delete-my-user-profile": "Bestätigung, mein Benutzerprofil löschen",
-  "code": "Code",
+    "confirm-delete-organization-and-associated-teams-runners": "Bestätugung, lösche die Organisation und alle zugehörigen Teams und Läufer:innen.",
-  "configure-the-tracks-and-minimum-lap-times": "Bearbeite die Tracks und ihre minimale Rundenzeit",
+    "confirm-delete-team-and-associated-runners": "Bestätigung, lösche das Team mitsamt seinen Läufer:innen.",
-  "confirm": "Bestätigen",
+    "confirm-deletion": "Löschung Bestätigen",
-  "confirm-delete": "Löschung Bestätigen",
+    "confirm-the-new-password": "Neues Passwort bestätigen",
-  "confirm-delete-donor-with-all-donations": "Bestätigen, Sponsor:in mit allen Sponsorings löschen",
+    "contact": "Kontakt",
-  "confirm-delete-my-user-profile": "Bestätigung, mein Benutzerprofil löschen",
+    "contact-deleted": "Kontakt gelöscht",
-  "confirm-delete-organization-and-associated-teams-runners": "Bestätugung, lösche die Organisation und alle zugehörigen Teams und Läufer:innen.",
+    "contact-information": "Kontaktinformation",
-  "confirm-delete-statsclient": "Bestätigung, Statsclient löschen",
+    "contact-is-being-updated": "Kontakt wird aktualisiert ...",
-  "confirm-delete-team-and-associated-runners": "Bestätigung, lösche das Team mitsamt seinen Läufer:innen.",
+    "contact-is-not-a-member-in-any-group": "Kontakt gehört zu keiner Gruppe",
-  "confirm-deletion": "Löschung Bestätigen",
+    "contacts": "Kontakte",
-  "confirm-the-new-password": "Neues Passwort bestätigen",
+    "contacts-are-being-loaded": "Kontakte werden geladen ...",
-  "contact": "Kontakt",
+    "copied-link-to-clipboard": "Link wurde in die Zwischenablage kopiert",
-  "contact-added": "Kontakt wurde hinzugefügt",
+    "copied-token-to-clipboard": "Token wurde in die Zwischenablage kopiert",
-  "contact-deleted": "Kontakt gelöscht",
+    "count_organizations": "Organisationen (Anzahl)",
-  "contact-information": "Kontaktinformation",
+    "count_teams": "Teams (Anzahl)",
-  "contact-is-being-added": "Kontakt wird erstellt...",
+    "create": "Erstellen",
-  "contact-is-being-updated": "Kontakt wird aktualisiert ...",
+    "create-a-new": "Erstelle eine neue",
-  "contact-is-not-a-member-in-any-group": "Kontakt gehört zu keiner Gruppe",
+    "create-a-new-card": "Neue Läuferkarte erstellen",
-  "contacts": "Kontakte",
+    "create-a-new-contact": "Kontakt erstellen",
-  "contacts-are-being-loaded": "Kontakte werden geladen ...",
+    "create-a-new-distance-donation": "Erstelle ein neues Sponsoring",
-  "copied-link-to-clipboard": "Link wurde in die Zwischenablage kopiert",
+    "create-a-new-donor": "Neue Sponsor:in erstellen",
-  "copied-token-to-clipboard": "Token wurde in die Zwischenablage kopiert",
+    "create-a-new-fixed-donation": "Erstelle eine neue Festbetragsspende",
-  "count_organizations": "Organisationen (Anzahl)",
+    "create-a-new-organization": "Neue Organisation anlegen",
-  "count_teams": "Teams (Anzahl)",
+    "create-a-new-runner": "Neue Läufer:in erstellen",
-  "create": "Erstellen",
+    "create-a-new-scan-fixed-only": "Neuen Scan erstellen (nur mit Festdistanz)",
-  "create-a-new": "Erstelle eine neue",
+    "create-a-new-scanstation": "Neue Station erstellen",
-  "create-a-new-card": "Neue Läuferkarte erstellen",
+    "create-a-new-team": "Erstelle ein neues Team",
-  "create-a-new-contact": "Kontakt erstellen",
+    "create-a-new-track": "Neuen Track erstellen",
-  "create-a-new-distance-donation": "Erstelle ein neues Sponsoring",
+    "create-a-new-user": "Neue Benutzer:in anlegen",
-  "create-a-new-donor": "Neue Sponsor:in erstellen",
+    "create-a-new-user-group": "Erstelle eine neue Gruppe",
-  "create-a-new-fixed-donation": "Erstelle eine neue Festbetragsspende",
+    "create-and-generate-pdf": "Erstellen und PDF herunterladen",
-  "create-a-new-organization": "Neue Organisation anlegen",
+    "create-bulk-blanco-cards": "Blankokarten erstellen",
-  "create-a-new-runner": "Neue Läufer:in erstellen",
+    "create-bulk-cards": "Blankokarten erstellen",
-  "create-a-new-scan-fixed-only": "Neuen Scan erstellen (nur mit Festdistanz)",
+    "create-organization": "Organisation erstellen",
-  "create-a-new-scanstation": "Neue Station erstellen",
+    "create-team": "Team erstellen",
-  "create-a-new-statsclient": "Neuen Statsclient erstellen",
+    "create-track": "Track erstellen",
-  "create-a-new-team": "Erstelle ein neues Team",
+    "create-user": "Benutzer anlegen",
-  "create-a-new-track": "Neuen Track erstellen",
+    "create-without-pdf": "Ohne PDF erstellen",
-  "create-a-new-user": "Neue Benutzer:in anlegen",
+    "created-blanco-cards": "Blankokarten wurden erstellt",
-  "create-a-new-user-group": "Erstelle eine neue Gruppe",
+    "creating-blanco-cards": "Erstelle Blankokarten",
-  "create-and-generate-pdf": "Erstellen und PDF herunterladen",
+    "credits": "Credits",
-  "create-bulk-blanco-cards": "Blankokarten erstellen",
+    "csv_import__class": "Klasse",
-  "create-bulk-cards": "Blankokarten erstellen",
+    "csv_import__firstname": "Vorname",
-  "create-organization": "Organisation erstellen",
+    "csv_import__lastname": "Nachname",
-  "create-team": "Team erstellen",
+    "csv_import__middlename": "Mittelname",
-  "create-track": "Track erstellen",
+    "csv_import__team": "Team",
-  "create-user": "Benutzer anlegen",
+    "danger-zone": "Gefahrenzone",
-  "create-without-pdf": "Ohne PDF erstellen",
+    "dashboard-greeting": "Hallo",
-  "created-blanco-cards": "Blankokarten wurden erstellt",
+    "dashboard-title": "Dashboard",
-  "creating-blanco-cards": "Erstelle Blankokarten",
+    "datatable": {
-  "credits": "Credits",
+        "search": "🔍 Suche ...",
-  "csv_import__class": "Klasse",
+        "an_error_happened_while_fetching_the_data": "Beim Abrufen der Daten ist ein Fehler aufgetreten",
-  "csv_import__firstname": "Vorname",
+        "loading": "Wird geladen...",
-  "csv_import__lastname": "Nachname",
+        "next": "Nächste",
-  "csv_import__middlename": "Mittelname",
+        "of": "von",
-  "csv_import__team": "Team",
+        "previous": "Vorherige",
-  "danger-zone": "Gefahrenzone",
+        "to": "bis",
-  "dashboard-greeting": "Hallo",
+        "showing": "Zeige",
-  "dashboard-title": "Dashboard",
+        "no_matching_records_found": "Keine passenden Einträge gefunden",
-  "datatable": {
+        "page": "Seite",
-    "search": "🔍 Suche ...",
+        "records": "Einträge",
-    "an_error_happened_while_fetching_the_data": "Beim Abrufen der Daten ist ein Fehler aufgetreten",
+        "sort_column_ascending": "Spalte aufsteigend sortieren",
-    "loading": "Wird geladen...",
+        "sort_column_descending": "Spalte absteigend sortieren"
-    "next": "Nächste",
+    },
-    "of": "von",
+    "delete": "Löschen",
-    "previous": "Vorherige",
+    "delete-contact": "Kontakt löschen",
-    "to": "bis",
+    "delete-donation": "Sponsporing löschen",
-    "showing": "Zeige",
+    "delete-donor": "Sponsor:in löschen",
-    "no_matching_records_found": "Keine passenden Einträge gefunden",
+    "delete-group": "Gruppe löschen",
-    "page": "Seite",
+    "delete-organization": "Organisation löschen",
-    "records": "Einträge",
+    "delete-profile": "Profil löschen",
-    "sort_column_ascending": "Spalte aufsteigend sortieren",
+    "delete-runner": "Läufer:in löschen",
-    "sort_column_descending": "Spalte absteigend sortieren"
+    "delete-scan": "Scan löschen",
-  },
+    "delete-station": "Station löschen",
-  "delete": "Löschen",
+    "delete-team": "Team Löschen",
-  "delete-contact": "Kontakt löschen",
+    "delete-user": "Benutzer:in löschen",
-  "delete-donation": "Sponsoring löschen",
+    "deleted-scan": "Scan wurde gelöscht",
-  "delete-donor": "Sponsor:in löschen",
+    "dependency_name": "Name",
-  "delete-group": "Gruppe löschen",
+    "description": "Beschreibung",
-  "delete-organization": "Organisation löschen",
+    "description-optional": "Beschreibung (optional)",
-  "delete-profile": "Profil löschen",
+    "deselect-all": "Alle abwählen",
-  "delete-runner": "Läufer:in löschen",
+    "details": "Details",
-  "delete-scan": "Scan löschen",
+    "disabled": "deaktiviert",
-  "delete-station": "Station löschen",
+    "distance": "Distanz",
-  "delete-statsclient": "Statsclient löschen",
+    "distance-donation": "Sponsoring",
-  "delete-team": "Team Löschen",
+    "distance-in-km": "Distanz (in KM)",
-  "delete-user": "Benutzer:in löschen",
+    "distance-track": "Distanz (+Track)",
-  "deleted-scan": "Scan wurde gelöscht",
+    "do-you-really-want-to-delete-your-profile": "Möchtest du dein Profil wirklich löschen?",
-  "dependency_name": "Name",
+    "do-you-want-to-delete-the-organization-delete_org-name": "Möchtest du die Organisation {orgname} löschen?",
-  "description": "Beschreibung",
+    "do-you-want-to-delete-the-team-delete_team-name": "Möchtest du das Team {teamname} löschen?",
-  "description-optional": "Beschreibung (optional)",
+    "do-you-want-to-delete-this-donor-with-all-related-donations": "Möchtest du diese Sponsor:in mit all ihren Sponsorings löschen?",
-  "deselect-all": "Alle abwählen",
+    "documentation": "Dokumentation",
-  "details": "Details",
+    "donation-amount": "Sponsoringbetrag",
-  "disabled": "deaktiviert",
+    "donation-amount-must-be-greater-that-0-00eur": "Der Sponsoringbetrag muss größer als 0.00€ sein.",
-  "distance": "Distanz",
+    "donations": "Sponsorings",
-  "distance-donation": "Sponsoring",
+    "donor": "Sponsor:in",
-  "distance-in-km": "Distanz (in KM)",
+    "donor-added": "Sponsor:in hinzugefügt",
-  "distance-track": "Distanz (+Track)",
+    "donor-deleted": "Sponsor:in gelöscht",
-  "do-you-really-want-to-delete-your-profile": "Möchtest du dein Profil wirklich löschen?",
+    "donor-has-no-associated-donations": "Zur Sponsor:in gibt es noch keine Sponsorings",
-  "do-you-want-to-delete-the-organization-delete_org-name": "Möchtest du die Organisation {orgname} löschen?",
+    "donor-is-being-added": "Sponsor:in wird hinzugefügt...",
-  "do-you-want-to-delete-the-team-delete_team-name": "Möchtest du das Team {teamname} löschen?",
+    "donor-is-being-updated": "Sponsor:in wird aktualisiert",
-  "do-you-want-to-delete-this-donor-with-all-related-donations": "Möchtest du diese Sponsor:in mit all ihren Sponsorings löschen?",
+    "donors": "Sponsor:innen",
-  "documentation": "Dokumentation",
+    "donors-are-being-loaded": "Sponsor:innen werden geladen",
-  "donation-amount": "Sponsoringbetrag",
+    "dont-have-your-email-connected": "Deine E-Mail ist nicht verknüpft?",
-  "donation-amount-must-be-greater-that-0-00eur": "Der Sponsoringbetrag muss größer als 0.00€ sein.",
+    "dont-panic-were-resetting-it": "Keine Panik, wir setzen es zurück ✌",
-  "donation-deleted": "Sponsoring gelöscht",
+    "e-mail-adress": "E-Mail-Adresse",
-  "donation-updated": "Sponsoring wurde aktualisiert",
+    "edit": "Bearbeiten",
-  "donation_added": "Sponsoring hinzugefügt",
+    "edit-a-card": "Läuferkarte bearbeiten",
-  "donations": "Sponsorings",
+    "edit-permissions": "Berechtigungen bearbeiten",
-  "donor": "Sponsor:in",
+    "email_address_or_username": "E-Mail-Adresse/ Benutzername",
-  "donor-added": "Sponsor:in hinzugefügt",
+    "enabled": "aktiviert",
-  "donor-deleted": "Sponsor:in gelöscht",
+    "enabled_large": "Aktiviert",
-  "donor-has-no-associated-donations": "Zur Sponsor:in gibt es noch keine Sponsorings",
+    "english": "Englisch",
-  "donor-is-being-added": "Sponsor:in wird hinzugefügt...",
+    "error-during-import": "Fehler beim Importieren",
-  "donor-is-being-updated": "Sponsor:in wird aktualisiert",
+    "error-whyile-copying-to-clipboard": "Fehler beim Kopieren in die Zwischenablage",
-  "donors": "Sponsor:innen",
+    "error_on_login": "😢Fehler beim Login",
-  "donors-are-being-loaded": "Sponsor:innen werden geladen",
+    "erteilte": "Direkt erteilte",
-  "dont-have-your-email-connected": "Deine E-Mail ist nicht verknüpft?",
+    "everything-concerning-your-profile": "Alles zu deinem Profil",
-  "dont-panic-were-resetting-it": "Keine Panik, wir setzen es zurück ✌",
+    "everything-is-more-fun-together": "Im Team macht's mehr Spaß 🏃‍♂️🏃‍♀️🏃‍♂️",
-  "e-mail-adress": "E-Mail-Adresse",
+    "faq": "FAQ",
-  "edit": "Bearbeiten",
+    "filter-by-organization-team": "Filtern nach Organisation / Team",
-  "edit-a-card": "Läuferkarte bearbeiten",
+    "first-name": "Vorname",
-  "edit-permissions": "Berechtigungen bearbeiten",
+    "first-name-is-required": "Vorname muss angegeben werden",
-  "email_address_or_username": "E-Mail-Adresse/ Benutzername",
+    "first-scan-of-the-day": "Erster Scan des Tages",
-  "enabled": "aktiviert",
+    "fixed-donation": "Festbetragsspende",
-  "enabled_large": "Aktiviert",
+    "forgot_password": "Passwort vergessen?",
-  "english": "Englisch",
+    "geerbte": "geerbte",
-  "enter-payment": "Zahlung eingeben",
+    "general-stats": "Allgemeine Statistiken",
-  "error-during-import": "Fehler beim Importieren",
+    "general_promise_error": "😢 Ein unbekannter Fehler ist aufgetreten",
-  "error-whyile-copying-to-clipboard": "Fehler beim Kopieren in die Zwischenablage",
+    "generate-runner-certificate": "Urkunde generieren",
-  "error_on_login": "😢Fehler beim Login",
+    "generate-runner-certificates": "Urkunden generieren",
-  "erteilte": "Direkt erteilte",
+    "generate-runnercards": "Läuferkarten generieren",
-  "everything-concerning-your-profile": "Alles zu deinem Profil",
+    "generate-sponsoring-contract": "Sponsoringvertrag generieren",
-  "everything-is-more-fun-together": "Im Team macht's mehr Spaß 🏃‍♂️🏃‍♀️🏃‍♂️",
+    "generate-sponsoring-contracts": "Sponsoringverträge generieren",
-  "faq": "FAQ",
+    "generating-pdf": "PDF wird generiert...",
-  "filename_sponsoringquittungsliste": "SponsoringQuittungsListe",
+    "generating-pdfs": "PDFs werden generiert...",
-  "filter-by-organization-team": "Filtern nach Organisation / Team",
+    "generic-ui-logic-error": "Etwas ist in der Benutzeroberfläche schiefgelaufen.",
-  "first-name": "Vorname",
+    "german": "Deutsch",
-  "first-name-is-required": "Vorname muss angegeben werden",
+    "go-to-login": "Zum Login",
-  "first-scan-of-the-day": "Erster Scan des Tages",
+    "goback": "Zur Startseite",
-  "fixed-donation": "Festbetragsspende",
+    "granted": "Gewährt",
-  "forgot_password": "Passwort vergessen?",
+    "group": "Gruppe",
-  "geerbte": "geerbte",
+    "group-added": "Gruppe hinzugefügt",
-  "general-stats": "Allgemeine Statistiken",
+    "group-is-being-added": "Gruppe wird erstellt",
-  "general_promise_error": "😢 Ein unbekannter Fehler ist aufgetreten",
+    "group-name-is-required": "Der Gruppenname muss angegeben werden.",
-  "generate-runner-certificate": "Urkunde generieren",
+    "group-updated": "Gruppe aktualisiert",
-  "generate-runner-certificates": "Urkunden generieren",
+    "groups": "Gruppen",
-  "generate-runnercards": "Läuferkarten generieren",
+    "groups-are-being-loaded": "Gruppen werden geladen",
-  "generate-sponsoring-contract": "Sponsoringvertrag generieren",
+    "home": "Start",
-  "generate-sponsoring-contracts": "Sponsoringverträge generieren",
+    "icon-image-credits": "Wir möchten uns außerdem für die verwendeten Icons und Bilder bedanken bei:",
-  "generating-pdf": "PDF wird generiert...",
+    "if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button": "Wenn du mehrere Blankokarten erstellen willst, nutze doch den \"Blankokarten erstellen\" Knopf.",
-  "generating-pdfs": "PDFs werden generiert...",
+    "import-finished": "Import abgeschlossen",
-  "generic-ui-logic-error": "Etwas ist in der Benutzeroberfläche schiefgelaufen.",
+    "import-runners": "Läufer:innen importieren",
-  "german": "Deutsch",
+    "import__target-organization": "Ziel Organisation",
-  "go-to-login": "Zum Login",
+    "imprint": "Impressum ",
-  "goback": "Zur Startseite",
+    "imprint-loading": "Impressum lädt...",
-  "granted": "Gewährt",
+    "inactive": "Inaktiv",
-  "group": "Gruppe",
+    "installed-version": "Installierte Version",
-  "group-added": "Gruppe hinzugefügt",
+    "internal-error": "Interner Fehler",
-  "group-is-being-added": "Gruppe wird erstellt",
+    "invalid": "Ungültig",
-  "group-name-is-required": "Der Gruppenname muss angegeben werden.",
+    "invalid-mail-reset": "Das ist keine gültige E-Mail",
-  "group-updated": "Gruppe aktualisiert",
+    "just-enter-how-many-you-want-and-the-system-will-create-them": "Gebe einfach ein, wie viele Blankokarten das System erstellen soll.",
-  "groups": "Gruppen",
+    "laeufer-hinzufuegen": "Läufer:in hinzufügen",
-  "groups-are-being-loaded": "Gruppen werden geladen",
+    "laeufer-importieren": "Läufer:innen importieren",
-  "home": "Start",
+    "laptime": "Rundenzeit",
-  "icon-image-credits": "Wir möchten uns außerdem für die verwendeten Icons und Bilder bedanken bei:",
+    "last-name": "Nachname",
-  "if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button": "Wenn du mehrere Blankokarten erstellen willst, nutze doch den \"Blankokarten erstellen\" Knopf.",
+    "last-name-is-required": "Nachname muss angegeben werden",
-  "import-finished": "Import abgeschlossen",
+    "lfk-is-os": "Das \"Lauf für Kaya!\" Frontend ist (wie alle anderen Projekte für den \"LfK!\" auch) ein OpenSource Projekt.",
-  "import-runners": "Läufer:innen importieren",
+    "license": "Lizenz",
-  "import__target-organization": "Ziel Organisation",
+    "licenses-are-being-loaded": "Lizenzen werden geladen...",
-  "imprint": "Impressum ",
+    "loading-cards": "Läuferkarten werden geladen",
-  "imprint-loading": "Impressum lädt...",
+    "loading-contact-details": "Kontaktdaten werden geladen ...",
-  "inactive": "Inaktiv",
+    "loading-donation-details": "Lade Sponsoringdetails",
-  "installed-version": "Installierte Version",
+    "loading-donor-details": "Lade Details",
-  "internal-error": "Interner Fehler",
+    "loading-group-detail": "Lade Gruppendetails...",
-  "invalid": "Ungültig",
+    "loading-profile-data": "Lade Profildaten",
-  "invalid-mail-reset": "Das ist keine gültige E-Mail",
+    "loading-runners": "Läufer:innen werden geladen...",
-  "just-enter-how-many-you-want-and-the-system-will-create-them": "Gebe einfach ein, wie viele Blankokarten das System erstellen soll.",
+    "loading-station-details": "Lade Scanstation-Details ...",
-  "key": "Schlüssel",
+    "log_in": "Anmelden",
-  "laeufer-hinzufuegen": "Läufer:in hinzufügen",
+    "log_in_to_your_account": "Bitte melde dich an",
-  "laeufer-importieren": "Läufer:innen importieren",
+    "login_is_checked": "Login wird überprüft",
-  "laptime": "Rundenzeit",
+    "logout": "Abmelden",
-  "last-name": "Nachname",
+    "mail-validation-in-progress": "E-Mail Verifizierung läuft... ",
-  "last-name-is-required": "Nachname muss angegeben werden",
+    "manage-admin-users": "Nutzer verwalten",
-  "lfk-is-os": "Das \"Lauf für Kaya!\" Frontend ist (wie alle anderen Projekte für den \"LfK!\" auch) ein OpenSource Projekt.",
+    "middle-name": "Mittelname",
-  "license": "Lizenz",
+    "minimum-lap-time-in-s": "Minimale Rundenzeit (in Sekunden)",
-  "licenses-are-being-loaded": "Lizenzen werden geladen...",
+    "minimum-lap-time-must-be-a-positive-number-or-0": "Die minimale Rundenzeit muss eine positive Zahl oder 0 sein",
-  "loading-cards": "Läuferkarten werden geladen",
+    "must-be-at-least-10-characters-long": "Passwort muss mindestens 10 Zeichen lang sein!",
-  "loading-contact-details": "Kontaktdaten werden geladen ...",
+    "must-contain-a-lowercase-letter": "Passwort muss einen Großbuchstaben enthalten!",
-  "loading-donation-details": "Lade Sponsoringdetails",
+    "must-contain-a-number": "Passwort muss eine Zahl enthalten!",
-  "loading-donor-details": "Lade Details",
+    "must-contain-a-uppercase-letter": "Passwort muss einen Kleinbuchstaben enthalten!",
-  "loading-group-detail": "Lade Gruppendetails...",
+    "name": "Name",
-  "loading-profile-data": "Lade Profildaten",
+    "name-is-required": "Der Gruppenname muss angegeben werden",
-  "loading-runners": "Läufer:innen werden geladen...",
+    "new-password": "Neues Passwort",
-  "loading-station-details": "Lade Scanstation-Details ...",
+    "no-contact-found": "Keine Kontakte gefunden",
-  "log_in": "Anmelden",
+    "no-contact-selected": "Kein Kontakt ausgewählt",
-  "log_in_to_your_account": "Bitte melde dich an",
+    "no-contact-specified": "Kein Kontakt angegeben",
-  "login_is_checked": "Login wird überprüft",
+    "no-donors-found": "Keine Spender:innen gefunden",
-  "logout": "Abmelden",
+    "no-license-text-could-be-found": "Kein Lizenz-Text gefunden 😢",
-  "mail-validation-in-progress": "E-Mail Verifizierung läuft... ",
+    "no-organization-or-team-found": "Keine Organisationen oder Teams gefunden",
-  "manage-admin-users": "Nutzer verwalten",
+    "no-organization-specified": "Keine Organisation angegeben",
-  "middle-name": "Mittelname",
+    "no-organizations-found": "Keine Organisationen gefunden",
-  "minimum-lap-time-in-s": "Minimale Rundenzeit (in Sekunden)",
+    "no-runners-found": "Keine Läufer:innen gefunden",
-  "minimum-lap-time-must-be-a-positive-number-or-0": "Die minimale Rundenzeit muss eine positive Zahl oder 0 sein",
+    "no-tracks-added-yet": "Es wurden noch keine Tracks erstellt.",
-  "must-be-at-least-10-characters-long": "Passwort muss mindestens 10 Zeichen lang sein!",
+    "non-blanko": "Keine/Blankokarte",
-  "must-contain-a-lowercase-letter": "Passwort muss einen Großbuchstaben enthalten!",
+    "organization": "Organisation",
-  "must-contain-a-number": "Passwort muss eine Zahl enthalten!",
+    "organization-added": "Organisation hinzugefügt",
-  "must-contain-a-uppercase-letter": "Passwort muss einen Kleinbuchstaben enthalten!",
+    "organization-deleted": "Organisation gelöscht",
-  "name": "Name",
+    "organization-detail-is-being-loaded": "Organisationsdetails werden geladen ...",
-  "name-is-required": "Der Gruppenname muss angegeben werden",
+    "organization-is-being-added": "Organisation wird hinzugefügt ...",
-  "new-password": "Neues Passwort",
+    "organization-name-is-required": "Der Name muss angegeben werden",
-  "no-contact-found": "Keine Kontakte gefunden",
+    "organizations": "Organisationen",
-  "no-contact-selected": "Kein Kontakt ausgewählt",
+    "organizations-are-being-loaded": "Organisationen werden geladen ...",
-  "no-contact-specified": "Kein Kontakt angegeben",
+    "orgs": "Organisationen",
-  "no-donors-found": "Keine Spender:innen gefunden",
+    "oss_credit_description": "Wir verwenden eine Menge Open Source-Software bei diesen Projekten und möchten uns bei den folgenden Projekten und Mitwirkenden bedanken, die dazu beitragen, Open Source großartig zu machen!",
-  "no-license-text-could-be-found": "Kein Lizenz-Text gefunden 😢",
+    "password": "Passwort",
-  "no-organization-or-team-found": "Keine Organisationen oder Teams gefunden",
+    "password-changed": "Passwort wurde aktualisiert!",
-  "no-organization-specified": "Keine Organisation angegeben",
+    "password-is-required": "Passwort muss angegeben werden",
-  "no-organizations-found": "Keine Organisationen gefunden",
+    "password-reset-failed": "Passwort zurücksetzen ist fehlgeschlagen!",
-  "no-runners-found": "Keine Läufer:innen gefunden",
+    "password-reset-in-progress": "Passwort wird zurückgesetzt...",
-  "no-tracks-added-yet": "Es wurden noch keine Tracks erstellt.",
+    "password-reset-mail-sent": "Passwort-Reset Mail wurde an \"{usersEmail}\" geschickt.",
-  "non-blanko": "Keine/Blankokarte",
+    "password-reset-successful": "Passwort erfolgreich zurückgesetzt!",
-  "open": "OFFEN",
+    "passwords-dont-match": "Die Passwörter stimmen nicht überein!",
-  "organization": "Organisation",
+    "pdf-generation-failed": "PDF Generierung fehlgeschlagen!",
-  "organization-added": "Organisation hinzugefügt",
+    "pdf-successfully-generated": "PDF wurde erfolgreich generiert!",
-  "organization-deleted": "Organisation gelöscht",
+    "pdfs-successfully-generated": "Alle PDFs wurden generiert!",
-  "organization-detail-is-being-loaded": "Organisationsdetails werden geladen ...",
+    "per-kilometer": "pro Kilometer",
-  "organization-is-being-added": "Organisation wird hinzugefügt ...",
+    "permissions": "Berechtigungen",
-  "organization-name-is-required": "Der Name muss angegeben werden",
+    "permissions-updated": "Berechtigungen aktualisiert!",
-  "organizations": "Organisationen",
+    "phone": "Telefon",
-  "organizations-are-being-loaded": "Organisationen werden geladen ...",
+    "please-copy-the-token-and-store-it-somewhere-save": "Bitte kopiere dir den Token und bewahre ihn gut auf.",
-  "orgs": "Organisationen",
+    "please-provide-a-password": "Bitte gebe ein Passwort an...",
-  "oss_credit_description": "Wir verwenden eine Menge Open Source-Software bei diesen Projekten und möchten uns bei den folgenden Projekten und Mitwirkenden bedanken, die dazu beitragen, Open Source großartig zu machen!",
+    "please-provide-the-nessecary-information-to-add-a-new-donor": "Bitte mach die Notwendigen Angaben, um eine neue Sponsor:in zu erstellen",
-  "paid": "BEZAHLT",
+    "please-provide-the-nessecary-information-to-create-a-new-donation": "Bitte gebe alle für das Sponsoring notwendigen Daten an.",
-  "paid-amount": "Gezahlter Betrag",
+    "please-provide-the-nessecary-information-to-create-a-new-scan": "Bitte gebe alle notwendigen Informationen an, um einen neuen Scan zu erstellen.",
-  "password": "Passwort",
+    "please-provide-the-required-csv-xlsx-file": "Bitte eine CSV oder XLSX Datei hochladen.",
-  "password-changed": "Passwort wurde aktualisiert!",
+    "please-provide-the-required-information-for-creating-a-new-user-group": "Bitte gebe alle für eine neue Gruppe notwendigen Informationen an.",
-  "password-is-required": "Passwort muss angegeben werden",
+    "please-provide-the-required-information-to-add-a-new-contact": "Bitte gebe alle nötigen Informationen an, im den neuen Kontakt zu erstellen.",
-  "password-reset-failed": "Passwort zurücksetzen ist fehlgeschlagen!",
+    "please-provide-the-required-information-to-add-a-new-organization": "Bitte gebe alle nötigen Informationen an, im die neue Organisation zu erstellen.",
-  "password-reset-in-progress": "Passwort wird zurückgesetzt...",
+    "please-provide-the-required-information-to-add-a-new-runner": "Bitte die benötigten Informationen angeben.",
-  "password-reset-mail-sent": "Passwort-Reset Mail wurde an \"{usersEmail}\" geschickt.",
+    "please-provide-the-required-information-to-add-a-new-team": "Bitte gebe alle nötigen Informationen an, im das neue Team zu erstellen.",
-  "password-reset-successful": "Passwort erfolgreich zurückgesetzt!",
+    "please-provide-the-required-information-to-add-a-new-track": "Bitte die benötigten Informationen angeben.",
-  "passwords-dont-match": "Die Passwörter stimmen nicht überein!",
+    "please-provide-the-required-information-to-add-a-new-user": "Bitte gebe alle nötigen Informationen an, im die neue Benutzer:in zu erstellen.",
-  "payment-amount-must-be-greater-than-0-00eur": "Der Zahlungsbetrag muss größer als 0.00€ sein!",
+    "please-provide-the-required-information-to-create-a-new-scanstation": "Bitte gebe alle für eine Scannerstation notwendigen Informationen an",
-  "pdf-generation-failed": "PDF Generierung fehlgeschlagen!",
+    "please-request-a-new-reset-mail": "Bitte eine neue Passwortreset-Mail anfordern...",
-  "pdf-successfully-generated": "PDF wurde erfolgreich generiert!",
+    "privacy": "Datenschutz",
-  "pdfs-successfully-generated": "Alle PDFs wurden generiert!",
+    "privacy-loading": "Datenschutzerklärung lädt...",
-  "per-kilometer": "pro Kilometer",
+    "profile": "Profil",
-  "permissions": "Berechtigungen",
+    "profile-picture": "Profilbild",
-  "permissions-updated": "Berechtigungen aktualisiert!",
+    "profile-updated": "Profil wurde aktualisiert!",
-  "phone": "Telefon",
+    "read-license": "Lizenz-Text lesen",
-  "please-copy-the-token-and-store-it-somewhere-save": "Bitte kopiere dir den Token und bewahre ihn gut auf.",
+    "receipt-needed": "Spendenquittung benötigt",
-  "please-provide-a-password": "Bitte gebe ein Passwort an...",
+    "repo_link": "Link",
-  "please-provide-the-nessecary-information-to-add-a-new-donor": "Bitte mach die Notwendigen Angaben, um eine neue Sponsor:in zu erstellen",
+    "request-a-new-reset-mail": "Neue Reset-Mail anfordern",
-  "please-provide-the-nessecary-information-to-create-a-new-donation": "Bitte gebe alle für das Sponsoring notwendigen Daten an.",
+    "reset-my-password": "Passwort zurücksetzen",
-  "please-provide-the-nessecary-information-to-create-a-new-scan": "Bitte gebe alle notwendigen Informationen an, um einen neuen Scan zu erstellen.",
+    "reset-password": "Passwort zurücksetzen",
-  "please-provide-the-required-csv-xlsx-file": "Bitte eine CSV oder XLSX Datei hochladen.",
+    "runner": "Läufer:in",
-  "please-provide-the-required-information-for-creating-a-new-user-group": "Bitte gebe alle für eine neue Gruppe notwendigen Informationen an.",
+    "runner-added": "Läufer:in hinzugefügt",
-  "please-provide-the-required-information-to-add-a-new-contact": "Bitte gebe alle nötigen Informationen an, im den neuen Kontakt zu erstellen.",
+    "runner-import": "Läufer:innen Import",
-  "please-provide-the-required-information-to-add-a-new-organization": "Bitte gebe alle nötigen Informationen an, im die neue Organisation zu erstellen.",
+    "runner-is-being-added": "Läufer:in wird hinzugefügt...",
-  "please-provide-the-required-information-to-add-a-new-runner": "Bitte die benötigten Informationen angeben.",
+    "runner-updated": "Läufer:in aktualisiert!",
-  "please-provide-the-required-information-to-add-a-new-team": "Bitte gebe alle nötigen Informationen an, im das neue Team zu erstellen.",
+    "runnercards": "Laeuferkarten",
-  "please-provide-the-required-information-to-add-a-new-track": "Bitte die benötigten Informationen angeben.",
+    "runnerimport_verify_runners_org": "Bitte die Läufer:innen für den Import in die Organisation \"{org_name}\" bestätigen",
-  "please-provide-the-required-information-to-add-a-new-user": "Bitte gebe alle nötigen Informationen an, im die neue Benutzer:in zu erstellen.",
+    "runners": "Läufer",
-  "please-provide-the-required-information-to-create-a-new-scanstation": "Bitte gebe alle für eine Scannerstation notwendigen Informationen an",
+    "runners-are-being-imported": "Läufer:innen werden importiert ...",
-  "please-provide-the-required-information-to-create-a-new-statsclient": "Bitte gebe alle für einen Statsclient notwendigen Informationen an",
+    "runners-are-being-loaded": "Läufer:innen werden geladen ...",
-  "please-request-a-new-reset-mail": "Bitte eine neue Passwortreset-Mail anfordern...",
+    "save": "Speichern",
-  "please-wait-a-moment-your-login-is-still-being-processed": "Bitte warte einen Moment, deine Anmeldung wird verarbeitet",
+    "save-changes": "Änderungen speichern",
-  "prefix": "Prefix",
+    "scan-added": "Scan hinzugefügt",
-  "privacy": "Datenschutz",
+    "scan-is-being-updated": "Scan wird aktualisiert",
-  "privacy-loading": "Datenschutzerklärung lädt...",
+    "scan-with-fixed-distance": "Scan mit Festdistanz",
-  "profile": "Profil",
+    "scans": "Scans",
-  "profile-deleted": "Profil gelöscht!",
+    "scans-are-being-loaded": "Scans werden geladen",
-  "profile-picture": "Profilbild",
+    "scanstation": "Scanner Station",
-  "profile-updated": "Profil wurde aktualisiert!",
+    "scanstation-added": "Station wurde erstellt",
-  "read-license": "Lizenz-Text lesen",
+    "scanstation-is-being-added": "Scannerstation wird angelegt...",
-  "receipt-needed": "Spendenquittung benötigt",
+    "scanstations": "Scanner Stationen",
-  "repo_link": "Link",
+    "scanstations-are-being-loaded": "Scannerstationen werden geladen...",
-  "request-a-new-reset-mail": "Neue Reset-Mail anfordern",
+    "search-for-an-organization-by-name-or-id": "Suche eine Organisation (via Name oder Id)",
-  "reset-my-password": "Passwort zurücksetzen",
+    "search-for-an-organization-or-team-by-name-or-id": "Suche eine Organisation oder ein Team (via Name oder Id)",
-  "reset-password": "Passwort zurücksetzen",
+    "search-for-donor-name-or-id": "Suche eine Spender:in (via Name oder Id)",
-  "runner": "Läufer:in",
+    "search-for-permission": "Berechtigungen durchsuchen",
-  "runner-added": "Läufer:in hinzugefügt",
+    "search-for-runner-by-name-or-id": "Suche eine Läufer:in (via Name oder Id)",
-  "runner-import": "Läufer:innen Import",
+    "select-all": "Alle auswählen",
-  "runner-is-being-added": "Läufer:in wird hinzugefügt...",
+    "select-language": "Sprache auswählen",
-  "runner-updated": "Läufer:in aktualisiert!",
+    "selfservice-registration": "Selfservice Registrierung",
-  "runnercards": "Laeuferkarten",
+    "send-a-mail-to-lfk-odit-services": "Sende eine Mail an lfk@odit.services",
-  "runnerimport_verify_runners_org": "Bitte die Läufer:innen für den Import in die Organisation \"{org_name}\" bestätigen",
+    "set-the-user-active-inactive": "Den Benutzer auf (in)aktiv setzen",
-  "runners": "Läufer",
+    "settings": "Einstellungen",
-  "runners-are-being-imported": "Läufer:innen werden importiert ...",
+    "settings-for-your-profile": "Die Einstellungen deines Accounts",
-  "runners-are-being-loaded": "Läufer:innen werden geladen ...",
+    "something-about-the-group": "Infos zur Gruppe",
-  "save": "Speichern",
+    "sponsorings": "Sponsoringerklaerungen",
-  "save-changes": "Änderungen speichern",
+    "stats-are-being-loaded": "Die Statistiken werden geladen...",
-  "scan-added": "Scan hinzugefügt",
+    "status": "Status",
-  "scan-is-being-updated": "Scan wird aktualisiert",
+    "stuff-that-could-harm-your-profile": "Einstellungen, die deinem Profil nachhaltig schaden können",
-  "scan-with-fixed-distance": "Scan mit Festdistanz",
+    "successful-password-reset": "Passwort erfolgreich zurückgesetzt!",
-  "scans": "Scans",
+    "team": "Team",
-  "scans-are-being-loaded": "Scans werden geladen",
+    "team-detail-is-being-loaded": "Team wird geladen...",
-  "scanstation": "Scanner Station",
+    "team-name": "Teamname",
-  "scanstation-added": "Station wurde erstellt",
+    "team-name-is-required": "Teamname ist erforderlich",
-  "scanstation-is-being-added": "Scannerstation wird angelegt...",
+    "teams": "Teams",
-  "scanstations": "Scanner Stationen",
+    "teams-are-being-loaded": "Teams werden geladen ...",
-  "scanstations-are-being-loaded": "Scannerstationen werden geladen...",
+    "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number": "Die angegebene Telefonnummer ist nicht korrekt. <br /> Bitte gebe eine Telefonnummer im internationalen Format an...",
-  "search-for-an-organization-by-name-or-id": "Suche eine Organisation (via Name oder Id)",
+    "the-scans-distance-must-be-greater-than-0m": "Die Distanz muss größer als 0m sein.",
-  "search-for-an-organization-or-team-by-name-or-id": "Suche eine Organisation oder ein Team (via Name oder Id)",
+    "the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again": "Der Scannerstation Token wird nur einmal angezeigt - du kannst ihn nicht ändern oder ihn dir nochmal anzeigen lassen!",
-  "search-for-donor-name-or-id": "Suche eine Spender:in (via Name oder Id)",
+    "there-are-no-cards-yet": "Es gibt noch keine Läuferkarten.",
-  "search-for-permission": "Berechtigungen durchsuchen",
+    "there-are-no-contacts-added-yet": "Es wurden noch keine Kontakte hinzugefügt.",
-  "search-for-runner-by-name-or-id": "Suche eine Läufer:in (via Name oder Id)",
+    "there-are-no-donations-yet": "Es gibt noch keine Sponsorings",
-  "select-all": "Alle auswählen",
+    "there-are-no-donors-yet": "Es gibt noch keine Sponsor:innen",
-  "select-language": "Sprache auswählen",
+    "there-are-no-groups-yet": "Es gibt noch keine Gruppen",
-  "selfservice-registration": "Selfservice Registrierung",
+    "there-are-no-organizations-added-yet": "Es wurden noch keine Organisationen hinzugefügt.",
-  "send-a-mail-to-lfk-odit-services": "Sende eine Mail an lfk@odit.services",
+    "there-are-no-runners-added-yet": "Es wurden noch keine Läufer:innen hinzugefügt.",
-  "set-the-user-active-inactive": "Den Benutzer auf (in)aktiv setzen",
+    "there-are-no-scans-yet": "Es gibt noch keine Scans",
-  "settings": "Einstellungen",
+    "there-are-no-teams-added-yet": "Es wurden noch keine Teams hinzugefügt.",
-  "settings-for-your-profile": "Die Einstellungen deines Accounts",
+    "there-are-no-users-added-yet": "Es wurden noch keine Benutzer hinzugefügt.",
-  "something-about-the-group": "Infos zur Gruppe",
+    "this-card-is": "Diese Karte ist",
-  "sponsoring-quittungs-liste_herunterladen": "Sponsoring-Quittungs-Liste herunterladen",
+    "this-might-take-a-moment": "Das könnte einen kleinen Moment dauern",
-  "sponsorings": "Sponsoringerklaerungen",
+    "this-scanstation-is": "Diese Station ist",
-  "stats-are-being-loaded": "Die Statistiken werden geladen...",
+    "token": "Token",
-  "statsclient-deleted": "Statsclient wurde gelöscht",
+    "total-distance": "gelaufene Strecke",
-  "statsclient-is-being-added": "Statsclient wird angelegt...",
+    "total-donation-amount": "Gesamtbetrag",
-  "statsclients": "Statsclient (aka Beamershow)",
+    "total-donations": "Spendensumme",
-  "statsclients-are-being-loaded": "Statsclients werden geladen",
+    "total-scans": "gesamte Scans",
-  "status": "Status",
+    "track": "Track",
-  "stuff-that-could-harm-your-profile": "Einstellungen, die deinem Profil nachhaltig schaden können",
+    "track-added": "Track hinzugefügt",
-  "successful-password-reset": "Passwort erfolgreich zurückgesetzt!",
+    "track-data-is-being-loaded": "Trackdaten werden geladen",
-  "team": "Team",
+    "track-is-being-added": "Track wird hinzugefügt...",
-  "team-added": "Team wurde hinzugefügt",
+    "track-length-in-m": "Tracklänge (in Metern)",
-  "team-deleted": "Team gelöscht",
+    "track-length-must-be-greater-than-0": "Die Länge muss größer als 0 (Meter) sein",
-  "team-detail-is-being-loaded": "Team wird geladen...",
+    "track-name": "Trackname",
-  "team-is-being-added": "Team wird erstellt...",
+    "track-name-must-not-be-empty": "Der Name muss angegeben werden",
-  "team-name": "Teamname",
+    "tracks": "Tracks",
-  "team-name-is-required": "Teamname ist erforderlich",
+    "update-password": "Passwort ändern",
-  "teams": "Teams",
+    "updated-contact": "Kontakt aktualisiert!",
-  "teams-are-being-loaded": "Teams werden geladen ...",
+    "updated-donor": "Sponsor:in wurde aktualisiert",
-  "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number": "Die angegebene Telefonnummer ist nicht korrekt. <br /> Bitte gebe eine Telefonnummer im internationalen Format an...",
+    "updated-organization": "Organisation wurde aktualisiert",
-  "the-scans-distance-must-be-greater-than-0m": "Die Distanz muss größer als 0m sein.",
+    "updated-scan": "Scan wurde aktualisiert",
-  "the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again": "Der Scannerstation Token wird nur einmal angezeigt - du kannst ihn nicht ändern oder ihn dir nochmal anzeigen lassen!",
+    "updateing-group": "Gruppe wird aktualisiert...",
-  "the-statsclient-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again": "Der Statsclient Token wird nur einmal angezeigt - du kannst ihn nicht ändern oder ihn dir nochmal anzeigen lassen!",
+    "updating-card": "Karte wird aktualisiert",
-  "there-are-no-cards-yet": "Es gibt noch keine Läuferkarten.",
+    "updating-organization": "Organisation wird aktualisiert",
-  "there-are-no-contacts-added-yet": "Es wurden noch keine Kontakte hinzugefügt.",
+    "updating-permissions": "Berechtigungen werden aktualisiert...",
-  "there-are-no-donations-yet": "Es gibt noch keine Sponsorings",
+    "updating-runner": "Läufer:in wird aktualisiert.",
-  "there-are-no-donors-yet": "Es gibt noch keine Sponsor:innen",
+    "updating-user": "Benutzer:in wird aktualisiert...",
-  "there-are-no-groups-yet": "Es gibt noch keine Gruppen",
+    "updating-your-profile": "Profil wird aktualisiert...",
-  "there-are-no-organizations-added-yet": "Es wurden noch keine Organisationen hinzugefügt.",
+    "user-added": "Benutzer hinzugefügt",
-  "there-are-no-runners-added-yet": "Es wurden noch keine Läufer:innen hinzugefügt.",
+    "user-groups": "Benutzergruppen",
-  "there-are-no-scans-yet": "Es gibt noch keine Scans",
+    "user-is-being-added": "Benutzer wird hinzugefügt ...",
-  "there-are-no-teams-added-yet": "Es wurden noch keine Teams hinzugefügt.",
+    "user-updated": "Benutzer:in wurde aktualisiert",
-  "there-are-no-users-added-yet": "Es wurden noch keine Benutzer hinzugefügt.",
+    "username": "Benutzername",
-  "this-card-is": "Diese Karte ist",
+    "users": "Benutzer",
-  "this-might-take-a-moment": "Das könnte einen kleinen Moment dauern",
+    "valid": "Gültig",
-  "this-scanstation-is": "Diese Station ist",
+    "valid-city-is-required": "Du musst eine Stadt angeben",
-  "token": "Token",
+    "valid-email-is-required": "Es wird eine valide E-Mail Adresse benötigt",
-  "total-distance": "gelaufene Strecke",
+    "valid-international-phone-number-is-required": "Du musst eine Telefonnummer im internationalen Format angeben...",
-  "total-donation-amount": "Gesamtbetrag",
+    "valid-zipcode-postal-code-is-required": "Du musst eine valide Postleitzahl angeben",
-  "total-donations": "Spendensumme",
+    "verfuegbare": "Verfügbar",
-  "total-paid-amount": "Gezahlter Gesamtbetrag",
+    "welcome_wavinghand": "Willkommen 👋",
-  "total-scans": "gesamte Scans",
+    "yes-i-copied-the-token": "Ja, ich habe den Token kopiert",
-  "total_donation_amount_in_eur": "Gesamtbetrag in €",
+    "you-are-going-to-loose-all-permissions-and-access-to-the-runner-system": "Du wirst all deine Berechtigungen und den Zugriff aufs Läufersystem verlieren!",
-  "track": "Track",
+    "you-can-now-use-your-new-password-to-log-in-to-your-account": "Du kannst dich jetzt mit deinem neuen Passwort anmelden! 🎉",
-  "track-added": "Track hinzugefügt",
+    "you-can-provide-a-runner-but-you-dont-have-to": "Du kannst eine Läufer:in angeben, musst aber nicht.",
-  "track-data-is-being-loaded": "Trackdaten werden geladen",
+    "you-dont-have-any-scanstations-yet": "Es gibt noch keine Scannerstationen",
-  "track-is-being-added": "Track wird hinzugefügt...",
+    "you-have-to-provide-an-organization": "Du musst eine Organisation angeben",
-  "track-is-being-updated": "Track wird aktualisiert...",
+    "you-have-to-save-your-changes-to-generate-a-link": "Du musst deine Änderungen speichern, um einen Link zu generieren.",
-  "track-length-in-m": "Tracklänge (in Metern)",
+    "you-must-create-at-least-one-card-or-cancel": "Du musst mindestens eine Blankokarte erstellen (oder abbrechen).",
-  "track-length-must-be-greater-than-0": "Die Länge muss größer als 0 (Meter) sein",
+    "zip-postal-code": "Postleitzahl"
-  "track-name": "Trackname",
+}
-  "track-name-must-not-be-empty": "Der Name muss angegeben werden",
-  "track-was-updated": "Track wurde aktualisiert",
-  "tracks": "Tracks",
-  "unpaid": "Offen",
-  "update-card": "Karte aktualisieren",
-  "update-password": "Passwort ändern",
-  "updated-contact": "Kontakt aktualisiert!",
-  "updated-donor": "Sponsor:in wurde aktualisiert",
-  "updated-organization": "Organisation wurde aktualisiert",
-  "updated-scan": "Scan wurde aktualisiert",
-  "updated-team": "Team wurde aktualisiert",
-  "updateing-group": "Gruppe wird aktualisiert...",
-  "updating-card": "Karte wird aktualisiert",
-  "updating-donation": "Sponsoring wird aktualisiert",
-  "updating-organization": "Organisation wird aktualisiert",
-  "updating-permissions": "Berechtigungen werden aktualisiert...",
-  "updating-runner": "Läufer:in wird aktualisiert.",
-  "updating-team": "Team wird aktualisiert",
-  "updating-user": "Benutzer:in wird aktualisiert...",
-  "updating-your-profile": "Profil wird aktualisiert...",
-  "user-added": "Benutzer hinzugefügt",
-  "user-groups": "Benutzergruppen",
-  "user-is-being-added": "Benutzer wird hinzugefügt ...",
-  "user-updated": "Benutzer:in wurde aktualisiert",
-  "username": "Benutzername",
-  "users": "Benutzer",
-  "valid": "Gültig",
-  "valid-city-is-required": "Du musst eine Stadt angeben",
-  "valid-email-is-required": "Es wird eine valide E-Mail Adresse benötigt",
-  "valid-international-phone-number-is-required": "Du musst eine Telefonnummer im internationalen Format angeben...",
-  "valid-zipcode-postal-code-is-required": "Du musst eine valide Postleitzahl angeben",
-  "verfuegbare": "Verfügbar",
-  "welcome_wavinghand": "Willkommen 👋",
-  "yes-i-copied-the-token": "Ja, ich habe den Token kopiert",
-  "you-are-going-to-loose-all-permissions-and-access-to-the-runner-system": "Du wirst all deine Berechtigungen und den Zugriff aufs Läufersystem verlieren!",
-  "you-can-enter-the-donations-paid-amount-manually-or-use-the-max-button-to-use-the-donations-exact-amount": "Du kannst den Betrag der Zahlung entweder manuell eingeben oder über den MAX Button auf den Spendenbetrag setzen",
-  "you-can-now-use-your-new-password-to-log-in-to-your-account": "Du kannst dich jetzt mit deinem neuen Passwort anmelden! 🎉",
-  "you-can-provide-a-runner-but-you-dont-have-to": "Du kannst eine Läufer:in angeben, musst aber nicht.",
-  "you-dont-have-any-scanclients-yet": "Es gibt noch keine Statsclients",
-  "you-dont-have-any-scanstations-yet": "Es gibt noch keine Scannerstationen",
-  "you-have-to-provide-an-organization": "Du musst eine Organisation angeben",
-  "you-have-to-save-your-changes-to-generate-a-link": "Du musst deine Änderungen speichern, um einen Link zu generieren.",
-  "you-must-create-at-least-one-card-or-cancel": "Du musst mindestens eine Blankokarte erstellen (oder abbrechen).",
-  "zip-postal-code": "Postleitzahl",
-  "delete-cards": "Karten löschen",
-  "cards-deleted": "Karten gelöscht"
-}

src/locales/en.json

@@ -1,479 +1,433 @@
 {
-  "404message": "Sorry, the page you are looking for could not be found.",
+    "404message": "Sorry, the page you are looking for could not be found.",
-  "404title": "Error 404",
+    "404title": "Error 404",
-  "about": "About",
+    "about": "About",
-  "action": "Action",
+    "action": "Action",
-  "active": "Active",
+    "active": "Active",
-  "add-card": "Add Card",
+    "add-card": "Add Card",
-  "add-donation": "Add donation",
+    "add-donation": "Add donation",
-  "add-donor": "Add donor",
+    "add-donor": "add donor",
-  "add-or-update-a-payment": "Add or update a payment",
+    "add-scan": "Add scan",
-  "add-scan": "Add scan",
+    "add-the-first-scanstation": "Add your first scanstation.",
-  "add-the-first-scanstation": "Add your first scanstation.",
+    "add-user-group": "Add User Group",
-  "add-the-first-statsclient": "Add your first statsclient.",
+    "add-your-first-card": "Add your first card",
-  "add-user-group": "Add User Group",
+    "add-your-first-contact": "Add your first contact",
-  "add-your-first-card": "Add your first card",
+    "add-your-first-donor": "add your first donor",
-  "add-your-first-contact": "Add your first contact",
+    "add-your-first-group": "Add your first group",
-  "add-your-first-donor": "add your first donor",
+    "add-your-first-organization": "Add your first organization",
-  "add-your-first-group": "Add your first group",
+    "add-your-first-runner": "Add your first runner",
-  "add-your-first-organization": "Add your first organization",
+    "add-your-first-team": "Add your first team",
-  "add-your-first-runner": "Add your first runner",
+    "add-your-first-track": "Add your first track.",
-  "add-your-first-team": "Add your first team",
+    "add-your-first-user": "Add your first user",
-  "add-your-first-track": "Add your first track.",
+    "add-your-fist-donation": "Add your fist donation",
-  "add-your-first-user": "Add your first user",
+    "add-your-fist-scan": "Add your fist scan",
-  "add-your-fist-donation": "Add your fist donation",
+    "adding-card": "Adding Card",
-  "add-your-fist-scan": "Add your fist scan",
+    "adding-scan": "Adding Scan",
-  "adding-card": "Adding Card",
+    "address": "Address",
-  "adding-donation": "Adding donation...",
+    "address-is-required": "Address is required",
-  "adding-scan": "Adding Scan",
+    "after-deletion-we-cant-restore-your-old-profile": "After deletion we can't restore your old profile!",
-  "address": "Address",
+    "after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that": "After the update you'll get logged out - Please login with your new password after that.",
-  "address-is-required": "Address is required",
+    "all-associated-donations-will-get-deleted-as-well": "All associated donations will get deleted as well",
-  "after-deletion-we-cant-restore-your-old-profile": "After deletion we can't restore your old profile!",
+    "all-associated-runners-will-be-deleted-too": "All associated runners will be deleted too!",
-  "after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that": "After the update you'll get logged out - Please login with your new password after that.",
+    "all-associated-teams-and-runners-will-be-deleted-too": "All associated teams and runners will be deleted too!",
-  "all": "all",
+    "amount": "Amount",
-  "all-associated-donations-will-get-deleted-as-well": "All associated donations will get deleted as well",
+    "amount-per-kilometer": "Amount per kilometer",
-  "all-associated-runners-will-be-deleted-too": "All associated runners will be deleted too!",
+    "apartment-suite-etc": "Apartment, suite, etc.",
-  "all-associated-teams-and-runners-will-be-deleted-too": "All associated teams and runners will be deleted too!",
+    "application_name": "Lauf für Kaya! - Admin",
-  "already-paid": "Already paid",
+    "applying-changes": "Applying Changes",
-  "amount": "Amount",
+    "attention": "Attention!",
-  "amount-per-kilometer": "Amount per kilometer",
+    "author": "Author",
-  "apartment-suite-etc": "Apartment, suite, etc.",
+    "bitte-bestaetige-diese-laeufer-fuer-den-import": "Please confirm these runners for import.",
-  "application_name": "Lauf für Kaya! - Admin",
+    "by": "by",
-  "applying-changes": "Applying Changes",
+    "cancel": "Cancel",
-  "attention": "Attention!",
+    "cancel-delete": "Cancel Delete",
-  "author": "Author",
+    "cancel-keep-donor": "Cancel, keep donor",
-  "bitte-bestaetige-diese-laeufer-fuer-den-import": "Please confirm these runners for import.",
+    "cancel-keep-my-profile": "Cancel, keep my profile",
-  "by": "by",
+    "cancel-keep-organization": "Cancel, keep organization",
-  "cancel": "Cancel",
+    "cancel-keep-team": "Cancel, keep team",
-  "cancel-delete": "Cancel Delete",
+    "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
-  "cancel-keep-donor": "Cancel, keep donor",
+    "card-added": "Card added",
-  "cancel-keep-my-profile": "Cancel, keep my profile",
+    "card-deleted": "Card deleted",
-  "cancel-keep-organization": "Cancel, keep organization",
+    "card-updated": "Card updated",
-  "cancel-keep-statsclient": "Cancel and keep statsclient",
+    "cards": "Cards",
-  "cancel-keep-team": "Cancel, keep team",
+    "certificates": "Certificates",
-  "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
+    "change-your-password-here": "Change your password here",
-  "card-added": "Card added",
+    "changing-your-password": "Changing your password",
-  "card-deleted": "Card deleted",
+    "city": "City",
-  "card-updated": "Card updated",
+    "click-to-copy-the-link-into-your-clipboard": "Click to copy the link into your clipboard",
-  "cards": "Cards",
+    "click-to-copy-token-to-clipboard": "Click to copy the token to your clipboard",
-  "certificates": "Certificates",
+    "close": "Close",
-  "change-your-password-here": "Change your password here",
+    "code": "Code",
-  "changing-your-password": "Changing your password",
+    "configure-the-tracks-and-minimum-lap-times": "configure the tracks & minimum lap times",
-  "city": "City",
+    "confirm": "Confirm",
-  "click-to-copy-the-link-into-your-clipboard": "Click to copy the link into your clipboard",
+    "confirm-delete": "Confirm Delete",
-  "click-to-copy-token-to-clipboard": "Click to copy the token to your clipboard",
+    "confirm-delete-donor-with-all-donations": "Confirm, delete donor with all donations",
-  "close": "Close",
+    "confirm-delete-my-user-profile": "Confirm, delete my user profile",
-  "code": "Code",
+    "confirm-delete-organization-and-associated-teams-runners": "Confirm, delete organization and associated teams+runners.",
-  "configure-the-tracks-and-minimum-lap-times": "configure the tracks & minimum lap times",
+    "confirm-delete-team-and-associated-runners": "Confirm, delete team and associated runners.",
-  "confirm": "Confirm",
+    "confirm-deletion": "Confirm Deletion",
-  "confirm-delete": "Confirm Delete",
+    "confirm-the-new-password": "Confirm the new password",
-  "confirm-delete-donor-with-all-donations": "Confirm, delete donor with all donations",
+    "contact": "Contact",
-  "confirm-delete-my-user-profile": "Confirm, delete my user profile",
+    "contact-deleted": "Contact deleted",
-  "confirm-delete-organization-and-associated-teams-runners": "Confirm, delete organization and associated teams+runners.",
+    "contact-information": "Contact Information",
-  "confirm-delete-statsclient": "Confirm, delete statsclient",
+    "contact-is-being-updated": "Contact is being updated...",
-  "confirm-delete-team-and-associated-runners": "Confirm, delete team and associated runners.",
+    "contact-is-not-a-member-in-any-group": "Contact is not a member in any group",
-  "confirm-deletion": "Confirm Deletion",
+    "contacts": "Contacts",
-  "confirm-the-new-password": "Confirm the new password",
+    "contacts-are-being-loaded": "contacts are being loaded...",
-  "contact": "Contact",
+    "copied-link-to-clipboard": "Copied link to clipboard",
-  "contact-added": "Contact added",
+    "copied-token-to-clipboard": "Copied token to clipboard",
-  "contact-deleted": "Contact deleted",
+    "count_organizations": "# Organizations",
-  "contact-information": "Contact Information",
+    "count_teams": "# Teams",
-  "contact-is-being-added": "Contact is being added...",
+    "create": "Create",
-  "contact-is-being-updated": "Contact is being updated...",
+    "create-a-new": "Create a new",
-  "contact-is-not-a-member-in-any-group": "Contact is not a member in any group",
+    "create-a-new-card": "Create a new card",
-  "contacts": "Contacts",
+    "create-a-new-contact": "Create a new contact",
-  "contacts-are-being-loaded": "contacts are being loaded...",
+    "create-a-new-distance-donation": "Create a new distance donation",
-  "copied-link-to-clipboard": "Copied link to clipboard",
+    "create-a-new-donor": "Create a new donor",
-  "copied-token-to-clipboard": "Copied token to clipboard",
+    "create-a-new-fixed-donation": "Create a new fixed donation",
-  "count_organizations": "# Organizations",
+    "create-a-new-organization": "Create a new Organization",
-  "count_teams": "# Teams",
+    "create-a-new-runner": "Create a new Runner",
-  "create": "Create",
+    "create-a-new-scan-fixed-only": "Create a new scan (fixed only)",
-  "create-a-new": "Create a new",
+    "create-a-new-scanstation": "Create a new station",
-  "create-a-new-card": "Create a new card",
+    "create-a-new-team": "Create a new team",
-  "create-a-new-contact": "Create a new contact",
+    "create-a-new-track": "Create a new Track",
-  "create-a-new-distance-donation": "Create a new distance donation",
+    "create-a-new-user": "Create a new User",
-  "create-a-new-donor": "Create a new donor",
+    "create-a-new-user-group": "Create a new user group",
-  "create-a-new-fixed-donation": "Create a new fixed donation",
+    "create-and-generate-pdf": "Create and generate PDF",
-  "create-a-new-organization": "Create a new Organization",
+    "create-bulk-blanco-cards": "Create bulk blanco cards",
-  "create-a-new-runner": "Create a new Runner",
+    "create-bulk-cards": "Add blanco cards",
-  "create-a-new-scan-fixed-only": "Create a new scan (fixed only)",
+    "create-organization": "Create Organization",
-  "create-a-new-scanstation": "Create a new station",
+    "create-team": "Create Team",
-  "create-a-new-statsclient": "Create a new statsclient",
+    "create-track": "Create Track",
-  "create-a-new-team": "Create a new team",
+    "create-user": "Create User",
-  "create-a-new-track": "Create a new Track",
+    "create-without-pdf": "Create without PDF",
-  "create-a-new-user": "Create a new User",
+    "created-blanco-cards": "Created blanco cards",
-  "create-a-new-user-group": "Create a new user group",
+    "creating-blanco-cards": "Creating blanco cards",
-  "create-and-generate-pdf": "Create and generate PDF",
+    "credits": "Credits",
-  "create-bulk-blanco-cards": "Create bulk blanco cards",
+    "csv_import__class": "Class",
-  "create-bulk-cards": "Add blanco cards",
+    "csv_import__firstname": "Firstname",
-  "create-organization": "Create Organization",
+    "csv_import__lastname": "Lastname",
-  "create-team": "Create Team",
+    "csv_import__middlename": "Middlename",
-  "create-track": "Create Track",
+    "csv_import__team": "Team",
-  "create-user": "Create User",
+    "danger-zone": "Danger zone",
-  "create-without-pdf": "Create without PDF",
+    "dashboard-greeting": "Hello",
-  "created-blanco-cards": "Created blanco cards",
+    "dashboard-title": "Dashboard",
-  "creating-blanco-cards": "Creating blanco cards",
+    "datatable": {
-  "credits": "Credits",
+        "search": "🔍 Search...",
-  "csv_import__class": "Class",
+        "sort_column_ascending": "Sort column ascending",
-  "csv_import__firstname": "Firstname",
+        "sort_column_descending": "Sort column descending",
-  "csv_import__lastname": "Lastname",
+        "previous": "Previous",
-  "csv_import__middlename": "Middlename",
+        "next": "Next",
-  "csv_import__team": "Team",
+        "page": "Page",
-  "danger-zone": "Danger zone",
+        "showing": "Showing",
-  "dashboard-greeting": "Hello",
+        "records": "Records",
-  "dashboard-title": "Dashboard",
+        "of": "of",
-  "datatable": {
+        "to": "to",
-    "search": "🔍 Search...",
+        "loading": "Loading...",
-    "sort_column_ascending": "Sort column ascending",
+        "no_matching_records_found": "No matching records found",
-    "sort_column_descending": "Sort column descending",
+        "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
-    "previous": "Previous",
+    },
-    "next": "Next",
+    "delete": "Delete",
-    "page": "Page",
+    "delete-contact": "Delete Contact",
-    "showing": "Showing",
+    "delete-donation": "Delete Donation",
-    "records": "Records",
+    "delete-donor": "Delete donor",
-    "of": "of",
+    "delete-group": "Delete Group",
-    "to": "to",
+    "delete-organization": "Delete Organization",
-    "loading": "Loading...",
+    "delete-profile": "Delete Profile",
-    "no_matching_records_found": "No matching records found",
+    "delete-runner": "Delete Runner",
-    "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
+    "delete-scan": "Delete scan",
-  },
+    "delete-station": "Delete station",
-  "delete": "Delete",
+    "delete-team": "Delete Team",
-  "delete-contact": "Delete Contact",
+    "delete-user": "Delete User",
-  "delete-donation": "Delete Donation",
+    "deleted-scan": "Deleted scan",
-  "delete-donor": "Delete donor",
+    "dependency_name": "Name",
-  "delete-group": "Delete Group",
+    "description": "description",
-  "delete-organization": "Delete Organization",
+    "description-optional": "Description (optional)",
-  "delete-profile": "Delete Profile",
+    "deselect-all": "deselect all",
-  "delete-runner": "Delete Runner",
+    "details": "Details",
-  "delete-scan": "Delete scan",
+    "disabled": "disabled",
-  "delete-station": "Delete station",
+    "distance": "Distance",
-  "delete-statsclient": "Delete statsclient",
+    "distance-donation": "distance donation",
-  "delete-team": "Delete Team",
+    "distance-in-km": "Distance in km",
-  "delete-user": "Delete User",
+    "distance-track": "Distance (+Track)",
-  "deleted-scan": "Deleted scan",
+    "do-you-really-want-to-delete-your-profile": "Do you really want to delete your profile?",
-  "dependency_name": "Name",
+    "do-you-want-to-delete-the-organization-delete_org-name": "Do you want to delete the organization {orgname}?",
-  "description": "description",
+    "do-you-want-to-delete-the-team-delete_team-name": "Do you want to delete the team {teamname}?",
-  "description-optional": "Description (optional)",
+    "do-you-want-to-delete-this-donor-with-all-related-donations": "Do you want to delete this donor with all related donations",
-  "deselect-all": "deselect all",
+    "documentation": "Documentation",
-  "details": "Details",
+    "donation-amount": "Donation amount",
-  "disabled": "disabled",
+    "donation-amount-must-be-greater-that-0-00eur": "Donation amount must be greater that 0.00€",
-  "distance": "Distance",
+    "donations": "Donations",
-  "distance-donation": "distance donation",
+    "donor": "Donor",
-  "distance-in-km": "Distance in km",
+    "donor-added": "Donor added",
-  "distance-track": "Distance (+Track)",
+    "donor-deleted": "donor deleted",
-  "do-you-really-want-to-delete-your-profile": "Do you really want to delete your profile?",
+    "donor-has-no-associated-donations": "Donor has no associated donations.",
-  "do-you-want-to-delete-the-organization-delete_org-name": "Do you want to delete the organization {orgname}?",
+    "donor-is-being-added": "Donor is being added...",
-  "do-you-want-to-delete-the-team-delete_team-name": "Do you want to delete the team {teamname}?",
+    "donor-is-being-updated": "Donor is being updated",
-  "do-you-want-to-delete-this-donor-with-all-related-donations": "Do you want to delete this donor with all related donations",
+    "donors": "Donors",
-  "documentation": "Documentation",
+    "donors-are-being-loaded": "donors are being loaded",
-  "donation-amount": "Donation amount",
+    "dont-have-your-email-connected": "Don't have your email connected?",
-  "donation-amount-must-be-greater-that-0-00eur": "Donation amount must be greater that 0.00€",
+    "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
-  "donation-deleted": "Donation deleted",
+    "e-mail-adress": "E-Mail Adress",
-  "donation-updated": "Donation updated",
+    "edit": "Edit",
-  "donation_added": "Donation_added",
+    "edit-a-card": "Edit a card",
-  "donations": "Donations",
+    "edit-permissions": "edit permissions",
-  "donor": "Donor",
+    "email_address_or_username": "Email / username",
-  "donor-added": "Donor added",
+    "enabled": "enabled",
-  "donor-deleted": "donor deleted",
+    "enabled_large": "Enabled",
-  "donor-has-no-associated-donations": "Donor has no associated donations.",
+    "english": "English",
-  "donor-is-being-added": "Donor is being added...",
+    "error-during-import": "Error during import",
-  "donor-is-being-updated": "Donor is being updated",
+    "error-whyile-copying-to-clipboard": "Error while copying to clipboard",
-  "donors": "Donors",
+    "error_on_login": "Error on login",
-  "donors-are-being-loaded": "donors are being loaded",
+    "erteilte": "Directly granted",
-  "dont-have-your-email-connected": "Don't have your email connected?",
+    "everything-concerning-your-profile": "Everything concerning your profile",
-  "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
+    "everything-is-more-fun-together": "everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️",
-  "e-mail-adress": "E-Mail Adress",
+    "faq": "FAQ",
-  "edit": "Edit",
+    "filter-by-organization-team": "Filter by Organization/ Team",
-  "edit-a-card": "Edit a card",
+    "first-name": "First name",
-  "edit-permissions": "edit permissions",
+    "first-name-is-required": "First Name is required",
-  "email_address_or_username": "Email / username",
+    "first-scan-of-the-day": "First scan of the day.",
-  "enabled": "enabled",
+    "fixed-donation": "fixed donation",
-  "enabled_large": "Enabled",
+    "forgot_password": "Forgot your password?",
-  "english": "English",
+    "geerbte": "inherited",
-  "enter-payment": "Enter payment",
+    "general-stats": "General Stats",
-  "error-during-import": "Error during import",
+    "general_promise_error": "😢 Error",
-  "error-whyile-copying-to-clipboard": "Error while copying to clipboard",
+    "generate-runner-certificate": "Generate runner certificate",
-  "error_on_login": "Error on login",
+    "generate-runner-certificates": "Generate runner certificates",
-  "erteilte": "Directly granted",
+    "generate-runnercards": "Generate Runnercards",
-  "everything-concerning-your-profile": "Everything concerning your profile",
+    "generate-sponsoring-contract": "generate sponsoring contract",
-  "everything-is-more-fun-together": "everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️",
+    "generate-sponsoring-contracts": "generate sponsoring contracts",
-  "faq": "FAQ",
+    "generating-pdf": "generating PDF...",
-  "filename_sponsoringquittungsliste": "DonorReceiptList",
+    "generating-pdfs": "generating PDFs...",
-  "filter-by-organization-team": "Filter by Organization/ Team",
+    "generic-ui-logic-error": "Something went wrong in the UI logic",
-  "first-name": "First name",
+    "german": "German",
-  "first-name-is-required": "First Name is required",
+    "go-to-login": "Go To Login",
-  "first-scan-of-the-day": "First scan of the day.",
+    "goback": "Go Home",
-  "fixed-donation": "fixed donation",
+    "granted": "granted",
-  "forgot_password": "Forgot your password?",
+    "group": "Group",
-  "geerbte": "inherited",
+    "group-added": "Group added",
-  "general-stats": "General Stats",
+    "group-is-being-added": "Group is being added...",
-  "general_promise_error": "😢 Error",
+    "group-name-is-required": "Group name is required",
-  "generate-runner-certificate": "Generate runner certificate",
+    "group-updated": "group updated",
-  "generate-runner-certificates": "Generate runner certificates",
+    "groups": "Groups",
-  "generate-runnercards": "Generate Runnercards",
+    "groups-are-being-loaded": "Groups are being loaded",
-  "generate-sponsoring-contract": "generate sponsoring contract",
+    "home": "Home",
-  "generate-sponsoring-contracts": "generate sponsoring contracts",
+    "icon-image-credits": "We also want to thank these projects for illustrations and icons:",
-  "generating-pdf": "generating PDF...",
+    "if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button": "If you want to create multiple blanco cards: Try the 'Add blanco cards' button.",
-  "generating-pdfs": "generating PDFs...",
+    "import-finished": "Import finished",
-  "generic-ui-logic-error": "Something went wrong in the UI logic",
+    "import-runners": "Import runners",
-  "german": "German",
+    "import__target-organization": "Target Organization",
-  "go-to-login": "Go To Login",
+    "imprint": "Imprint",
-  "goback": "Go Home",
+    "imprint-loading": "Imprint loading...",
-  "granted": "granted",
+    "inactive": "Inactive",
-  "group": "Group",
+    "installed-version": "Installed version",
-  "group-added": "Group added",
+    "internal-error": "Internal Error",
-  "group-is-being-added": "Group is being added...",
+    "invalid": "Invalid",
-  "group-name-is-required": "Group name is required",
+    "invalid-mail-reset": "the provided email is invalid",
-  "group-updated": "group updated",
+    "just-enter-how-many-you-want-and-the-system-will-create-them": "Just enter how many you want and the system will create them",
-  "groups": "Groups",
+    "laeufer-hinzufuegen": "Add runner",
-  "groups-are-being-loaded": "Groups are being loaded",
+    "laeufer-importieren": "Läufer importieren",
-  "home": "Home",
+    "laptime": "Laptime",
-  "icon-image-credits": "We also want to thank these projects for illustrations and icons:",
+    "last-name": "Last name",
-  "if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button": "If you want to create multiple blanco cards: Try the 'Add blanco cards' button.",
+    "last-name-is-required": "Last Name is required",
-  "import-finished": "Import finished",
+    "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
-  "import-runners": "Import runners",
+    "license": "License",
-  "import__target-organization": "Target Organization",
+    "licenses-are-being-loaded": "Licenses are being loaded...",
-  "imprint": "Imprint",
+    "loading-cards": "Loading cards",
-  "imprint-loading": "Imprint loading...",
+    "loading-contact-details": "Loading contact details...",
-  "inactive": "Inactive",
+    "loading-donation-details": "Loading donation details",
-  "installed-version": "Installed version",
+    "loading-donor-details": "Loading donor details",
-  "internal-error": "Internal Error",
+    "loading-group-detail": "Loading group detail...",
-  "invalid": "Invalid",
+    "loading-profile-data": "Loading profile data",
-  "invalid-mail-reset": "the provided email is invalid",
+    "loading-runners": "loading runners...",
-  "just-enter-how-many-you-want-and-the-system-will-create-them": "Just enter how many you want and the system will create them",
+    "loading-station-details": "Loading station details",
-  "key": "Key",
+    "log_in": "Log in",
-  "laeufer-hinzufuegen": "Add runner",
+    "log_in_to_your_account": "Log in to your account",
-  "laeufer-importieren": "Läufer importieren",
+    "login_is_checked": "Login is being checked...",
-  "laptime": "Laptime",
+    "logout": "Logout",
-  "last-name": "Last name",
+    "mail-validation-in-progress": "mail validation in progress...",
-  "last-name-is-required": "Last Name is required",
+    "manage-admin-users": "manage admin users",
-  "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
+    "middle-name": "Middle name",
-  "license": "License",
+    "minimum-lap-time-in-s": "minimum lap time in s",
-  "licenses-are-being-loaded": "Licenses are being loaded...",
+    "minimum-lap-time-must-be-a-positive-number-or-0": "minimum lap time must be a positive number or 0",
-  "loading-cards": "Loading cards",
+    "must-be-at-least-10-characters-long": "Must be at least 10 characters long!",
-  "loading-contact-details": "Loading contact details...",
+    "must-contain-a-lowercase-letter": "Must contain a lowercase letter!",
-  "loading-donation-details": "Loading donation details",
+    "must-contain-a-number": "Must contain a number!",
-  "loading-donor-details": "Loading donor details",
+    "must-contain-a-uppercase-letter": "Must contain a uppercase letter!",
-  "loading-group-detail": "Loading group detail...",
+    "name": "Name",
-  "loading-profile-data": "Loading profile data",
+    "name-is-required": "Name is required",
-  "loading-runners": "loading runners...",
+    "new-password": "New password",
-  "loading-station-details": "Loading station details",
+    "no-contact-found": "No contacts found",
-  "log_in": "Log in",
+    "no-contact-selected": "No contact selected",
-  "log_in_to_your_account": "Log in to your account",
+    "no-contact-specified": "no contact specified",
-  "login_is_checked": "Login is being checked...",
+    "no-donors-found": "No donors found",
-  "logout": "Logout",
+    "no-license-text-could-be-found": "No license text could be found 😢",
-  "mail-validation-in-progress": "mail validation in progress...",
+    "no-organization-or-team-found": "No organization or team found",
-  "manage-admin-users": "manage admin users",
+    "no-organization-specified": "no organization specified",
-  "middle-name": "Middle name",
+    "no-organizations-found": "No organizations found",
-  "minimum-lap-time-in-s": "minimum lap time in s",
+    "no-runners-found": "No runners found",
-  "minimum-lap-time-must-be-a-positive-number-or-0": "minimum lap time must be a positive number or 0",
+    "no-tracks-added-yet": "there are no tracks added yet.",
-  "must-be-at-least-10-characters-long": "Must be at least 10 characters long!",
+    "non-blanko": "Non/Blanko",
-  "must-contain-a-lowercase-letter": "Must contain a lowercase letter!",
+    "organization": "Organization",
-  "must-contain-a-number": "Must contain a number!",
+    "organization-added": "Organization added",
-  "must-contain-a-uppercase-letter": "Must contain a uppercase letter!",
+    "organization-deleted": "Organization deleted",
-  "name": "Name",
+    "organization-detail-is-being-loaded": "organization detail is being loaded...",
-  "name-is-required": "Name is required",
+    "organization-is-being-added": "Organization is being added...",
-  "new-password": "New password",
+    "organization-name-is-required": "Organization name is required",
-  "no-contact-found": "No contacts found",
+    "organizations": "Organizations",
-  "no-contact-selected": "No contact selected",
+    "organizations-are-being-loaded": "organizations are being loaded...",
-  "no-contact-specified": "no contact specified",
+    "orgs": "Organizations",
-  "no-donors-found": "No donors found",
+    "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
-  "no-license-text-could-be-found": "No license text could be found 😢",
+    "password": "Password",
-  "no-organization-or-team-found": "No organization or team found",
+    "password-changed": "Password changed!",
-  "no-organization-specified": "no organization specified",
+    "password-is-required": "Password is required",
-  "no-organizations-found": "No organizations found",
+    "password-reset-failed": "Password reset failed!",
-  "no-runners-found": "No runners found",
+    "password-reset-in-progress": "Password Reset in Progress...",
-  "no-tracks-added-yet": "there are no tracks added yet.",
+    "password-reset-mail-sent": "Password reset mail was sent to \"{usersEmail}\".",
-  "non-blanko": "Non/Blanko",
+    "password-reset-successful": "Password Reset successful!",
-  "open": "OPEN",
+    "passwords-dont-match": "Passwords don't match!",
-  "organization": "Organization",
+    "pdf-generation-failed": "PDF generation failed!",
-  "organization-added": "Organization added",
+    "pdf-successfully-generated": "PDF successfully generated!",
-  "organization-deleted": "Organization deleted",
+    "pdfs-successfully-generated": "PDFs successfully generated!",
-  "organization-detail-is-being-loaded": "organization detail is being loaded...",
+    "per-kilometer": "per Kilometer",
-  "organization-is-being-added": "Organization is being added...",
+    "permissions": "Permissions",
-  "organization-name-is-required": "Organization name is required",
+    "permissions-updated": "Permissions updated!",
-  "organizations": "Organizations",
+    "phone": "Phone",
-  "organizations-are-being-loaded": "organizations are being loaded...",
+    "please-copy-the-token-and-store-it-somewhere-save": "Please copy the token and store it somewhere safe.",
-  "orgs": "Organizations",
+    "please-provide-a-password": "Please provide a password...",
-  "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
+    "please-provide-the-nessecary-information-to-add-a-new-donor": "Please provide the nessecary information to add a new donor",
-  "paid": "PAID",
+    "please-provide-the-nessecary-information-to-create-a-new-donation": "Please provide the nessecary information to create a new donation",
-  "paid-amount": "Paid amount",
+    "please-provide-the-nessecary-information-to-create-a-new-scan": "Please provide the nessecary information to create a new scan.",
-  "password": "Password",
+    "please-provide-the-required-csv-xlsx-file": "Please provide the required csv/ xlsx file",
-  "password-changed": "Password changed!",
+    "please-provide-the-required-information-for-creating-a-new-user-group": "Please provide the required information for creating a new user group.",
-  "password-is-required": "Password is required",
+    "please-provide-the-required-information-to-add-a-new-contact": "Please provide the required information to add a new contact.",
-  "password-reset-failed": "Password reset failed!",
+    "please-provide-the-required-information-to-add-a-new-organization": "Please provide the required information to add a new organization.",
-  "password-reset-in-progress": "Password Reset in Progress...",
+    "please-provide-the-required-information-to-add-a-new-runner": "Please provide the required information to add a new runner.",
-  "password-reset-mail-sent": "Password reset mail was sent to \"{usersEmail}\".",
+    "please-provide-the-required-information-to-add-a-new-team": "Please provide the required information to add a new team.",
-  "password-reset-successful": "Password Reset successful!",
+    "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
-  "passwords-dont-match": "Passwords don't match!",
+    "please-provide-the-required-information-to-add-a-new-user": "Please provide the required information to add a new user.",
-  "payment-amount-must-be-greater-than-0-00eur": "Payment amount must be greater than 0.00€!",
+    "please-provide-the-required-information-to-create-a-new-scanstation": "Please provide the required information to create a new scanstation",
-  "pdf-generation-failed": "PDF generation failed!",
+    "please-request-a-new-reset-mail": "Please request a new reset mail...",
-  "pdf-successfully-generated": "PDF successfully generated!",
+    "privacy": "Privacy",
-  "pdfs-successfully-generated": "PDFs successfully generated!",
+    "privacy-loading": "Privacy loading...",
-  "per-kilometer": "per Kilometer",
+    "profile": "Profile",
-  "permissions": "Permissions",
+    "profile-picture": "Profile Picture",
-  "permissions-updated": "Permissions updated!",
+    "profile-updated": "Profile updated!",
-  "phone": "Phone",
+    "read-license": "Read License",
-  "please-copy-the-token-and-store-it-somewhere-save": "Please copy the token and store it somewhere safe.",
+    "receipt-needed": "Receipt needed",
-  "please-provide-a-password": "Please provide a password...",
+    "repo_link": "Link",
-  "please-provide-the-nessecary-information-to-add-a-new-donor": "Please provide the nessecary information to add a new donor",
+    "request-a-new-reset-mail": "Request a new reset mail",
-  "please-provide-the-nessecary-information-to-create-a-new-donation": "Please provide the nessecary information to create a new donation",
+    "reset-my-password": "Reset my password",
-  "please-provide-the-nessecary-information-to-create-a-new-scan": "Please provide the nessecary information to create a new scan.",
+    "reset-password": "Reset your password",
-  "please-provide-the-required-csv-xlsx-file": "Please provide the required csv/ xlsx file",
+    "runner": "Runner",
-  "please-provide-the-required-information-for-creating-a-new-user-group": "Please provide the required information for creating a new user group.",
+    "runner-added": "Runner added",
-  "please-provide-the-required-information-to-add-a-new-contact": "Please provide the required information to add a new contact.",
+    "runner-import": "Runner Import",
-  "please-provide-the-required-information-to-add-a-new-organization": "Please provide the required information to add a new organization.",
+    "runner-is-being-added": "Runner is being added...",
-  "please-provide-the-required-information-to-add-a-new-runner": "Please provide the required information to add a new runner.",
+    "runner-updated": "Runner updated!",
-  "please-provide-the-required-information-to-add-a-new-team": "Please provide the required information to add a new team.",
+    "runnercards": "Runnercards",
-  "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
+    "runnerimport_verify_runners_org": "Please confirm these runners for import into the organization \"{org_name}\"",
-  "please-provide-the-required-information-to-add-a-new-user": "Please provide the required information to add a new user.",
+    "runners": "Runners",
-  "please-provide-the-required-information-to-create-a-new-scanstation": "Please provide the required information to create a new scanstation",
+    "runners-are-being-imported": "Runners are being imported...",
-  "please-provide-the-required-information-to-create-a-new-statsclient": "Please provide the required information to create a new statsclient",
+    "runners-are-being-loaded": "runners are being loaded...",
-  "please-request-a-new-reset-mail": "Please request a new reset mail...",
+    "save": "Save",
-  "please-wait-a-moment-your-login-is-still-being-processed": "Please wait a moment, your login is still being processed",
+    "save-changes": "Save Changes",
-  "prefix": "Prefix",
+    "scan-added": "Scan added",
-  "privacy": "Privacy",
+    "scan-is-being-updated": "Scan is being updated",
-  "privacy-loading": "Privacy loading...",
+    "scan-with-fixed-distance": "Scan with fixed distance",
-  "profile": "Profile",
+    "scans": "Scans",
-  "profile-deleted": "Profile deleted!",
+    "scans-are-being-loaded": "Scans are being loaded",
-  "profile-picture": "Profile Picture",
+    "scanstation": "Scanstation",
-  "profile-updated": "Profile updated!",
+    "scanstation-added": "Scanstation added",
-  "read-license": "Read License",
+    "scanstation-is-being-added": "Adding scanstation...",
-  "receipt-needed": "Receipt needed",
+    "scanstations": "Scanstations",
-  "repo_link": "Link",
+    "scanstations-are-being-loaded": "Loading scanstations...",
-  "request-a-new-reset-mail": "Request a new reset mail",
+    "search-for-an-organization-by-name-or-id": "Search for an organization (by name or id)",
-  "reset-my-password": "Reset my password",
+    "search-for-an-organization-or-team-by-name-or-id": "Search for an organization or team (by name or id)",
-  "reset-password": "Reset your password",
+    "search-for-donor-name-or-id": "Search for donor (by name or id)",
-  "runner": "Runner",
+    "search-for-permission": "Search for permission",
-  "runner-added": "Runner added",
+    "search-for-runner-by-name-or-id": "Search for runner (by name or id)",
-  "runner-import": "Runner Import",
+    "select-all": "select all",
-  "runner-is-being-added": "Runner is being added...",
+    "select-language": "Select language",
-  "runner-updated": "Runner updated!",
+    "selfservice-registration": "Selfservice registration",
-  "runnercards": "Runnercards",
+    "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
-  "runnerimport_verify_runners_org": "Please confirm these runners for import into the organization \"{org_name}\"",
+    "set-the-user-active-inactive": "set the user active/ inactive",
-  "runners": "Runners",
+    "settings": "Settings",
-  "runners-are-being-imported": "Runners are being imported...",
+    "settings-for-your-profile": "Settings for your profile",
-  "runners-are-being-loaded": "runners are being loaded...",
+    "something-about-the-group": "Something about the group...",
-  "save": "Save",
+    "sponsorings": "Sponsorings",
-  "save-changes": "Save Changes",
+    "stats-are-being-loaded": "stats are being loaded...",
-  "scan-added": "Scan added",
+    "status": "Status",
-  "scan-is-being-updated": "Scan is being updated",
+    "stuff-that-could-harm-your-profile": "Stuff that could harm your profile",
-  "scan-with-fixed-distance": "Scan with fixed distance",
+    "successful-password-reset": "Successful password reset!",
-  "scans": "Scans",
+    "team": "Team",
-  "scans-are-being-loaded": "Scans are being loaded",
+    "team-detail-is-being-loaded": "team detail is being loaded...",
-  "scanstation": "Scanstation",
+    "team-name": "Team name",
-  "scanstation-added": "Scanstation added",
+    "team-name-is-required": "team name is required",
-  "scanstation-is-being-added": "Adding scanstation...",
+    "teams": "Teams",
-  "scanstations": "Scanstations",
+    "teams-are-being-loaded": "teams are being loaded...",
-  "scanstations-are-being-loaded": "Loading scanstations...",
+    "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number": "the provided phone number is invalid.<br />please enter a valid international number...",
-  "search-for-an-organization-by-name-or-id": "Search for an organization (by name or id)",
+    "the-scans-distance-must-be-greater-than-0m": "The scan's distance must be greater than 0m",
-  "search-for-an-organization-or-team-by-name-or-id": "Search for an organization or team (by name or id)",
+    "the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again": "The scanstation api token will only get displayed once - you won't be able to change or view it again!",
-  "search-for-donor-name-or-id": "Search for donor (by name or id)",
+    "there-are-no-cards-yet": "There are no cards yet.",
-  "search-for-permission": "Search for permission",
+    "there-are-no-contacts-added-yet": "There are no contacts added yet.",
-  "search-for-runner-by-name-or-id": "Search for runner (by name or id)",
+    "there-are-no-donations-yet": "There are no donations yet",
-  "select-all": "select all",
+    "there-are-no-donors-yet": "There are no donors yet",
-  "select-language": "Select language",
+    "there-are-no-groups-yet": "There are no groups yet",
-  "selfservice-registration": "Selfservice registration",
+    "there-are-no-organizations-added-yet": "There are no organizations added yet.",
-  "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
+    "there-are-no-runners-added-yet": "There are no runners added yet.",
-  "set-the-user-active-inactive": "set the user active/ inactive",
+    "there-are-no-scans-yet": "There are no scans yet",
-  "settings": "Settings",
+    "there-are-no-teams-added-yet": "There are no teams added yet.",
-  "settings-for-your-profile": "Settings for your profile",
+    "there-are-no-users-added-yet": "There are no users added yet.",
-  "something-about-the-group": "Something about the group...",
+    "this-card-is": "This card is",
-  "sponsoring-quittungs-liste_herunterladen": "Download donor receipt list",
+    "this-might-take-a-moment": "This might take a moment 👀",
-  "sponsorings": "Sponsorings",
+    "this-scanstation-is": "This scanstation is",
-  "stats-are-being-loaded": "stats are being loaded...",
+    "token": "Token",
-  "statsclient-deleted": "Deleted statsclient",
+    "total-distance": "total distance",
-  "statsclient-is-being-added": "Statsclient is being added...",
+    "total-donation-amount": "total donation amount",
-  "statsclients": "Statsclients (aka Beamershow)",
+    "total-donations": "total donations",
-  "statsclients-are-being-loaded": "Loading statsclients",
+    "total-scans": "total scans",
-  "status": "Status",
+    "track": "Track",
-  "stuff-that-could-harm-your-profile": "Stuff that could harm your profile",
+    "track-added": "Track added",
-  "successful-password-reset": "Successful password reset!",
+    "track-data-is-being-loaded": "Track data is being loaded",
-  "team": "Team",
+    "track-is-being-added": "Track is being added...",
-  "team-added": "Team added",
+    "track-length-in-m": "Track Length in m",
-  "team-deleted": "Team deleted",
+    "track-length-must-be-greater-than-0": "Track length must be greater than 0",
-  "team-detail-is-being-loaded": "team detail is being loaded...",
+    "track-name": "Track name",
-  "team-is-being-added": "Team is being added...",
+    "track-name-must-not-be-empty": "Track name must not be empty",
-  "team-name": "Team name",
+    "tracks": "Tracks",
-  "team-name-is-required": "team name is required",
+    "update-card": "Update Card",
-  "teams": "Teams",
+    "update-password": "Update password",
-  "teams-are-being-loaded": "teams are being loaded...",
+    "updated-contact": "Updated contact!",
-  "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number": "the provided phone number is invalid.<br />please enter a valid international number...",
+    "updated-donor": "updated donor",
-  "the-scans-distance-must-be-greater-than-0m": "The scan's distance must be greater than 0m",
+    "updated-organization": "updated organization",
-  "the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again": "The scanstation api token will only get displayed once - you won't be able to change or view it again!",
+    "updated-scan": "updated scan",
-  "the-statsclient-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again": "The statsclient api token will only get displayed once - you won't be able to change or view it again!",
+    "updateing-group": "updateing group...",
-  "there-are-no-cards-yet": "There are no cards yet.",
+    "updating-card": "Updating card",
-  "there-are-no-contacts-added-yet": "There are no contacts added yet.",
+    "updating-organization": "updating organization",
-  "there-are-no-donations-yet": "There are no donations yet",
+    "updating-permissions": "updating permissions...",
-  "there-are-no-donors-yet": "There are no donors yet",
+    "updating-runner": "Updating runner...",
-  "there-are-no-groups-yet": "There are no groups yet",
+    "updating-user": "updating user...",
-  "there-are-no-organizations-added-yet": "There are no organizations added yet.",
+    "updating-your-profile": "Updating your profile...",
-  "there-are-no-runners-added-yet": "There are no runners added yet.",
+    "user-added": "User added",
-  "there-are-no-scans-yet": "There are no scans yet",
+    "user-groups": "User Groups",
-  "there-are-no-teams-added-yet": "There are no teams added yet.",
+    "user-is-being-added": "User is being added...",
-  "there-are-no-users-added-yet": "There are no users added yet.",
+    "user-updated": "User updated",
-  "this-card-is": "This card is",
+    "username": "Username",
-  "this-might-take-a-moment": "This might take a moment 👀",
+    "users": "Users",
-  "this-scanstation-is": "This scanstation is",
+    "valid": "Valid",
-  "token": "Token",
+    "valid-city-is-required": "Valid city is required",
-  "total-distance": "total distance",
+    "valid-email-is-required": "valid email is required",
-  "total-donation-amount": "total donation amount",
+    "valid-international-phone-number-is-required": "valid international phone number is required...",
-  "total-donations": "total donations",
+    "valid-zipcode-postal-code-is-required": "Valid zipcode/ postal code is required",
-  "total-paid-amount": "Total paid amount",
+    "verfuegbare": "availdable",
-  "total-scans": "total scans",
+    "welcome_wavinghand": "Welcome 👋",
-  "total_donation_amount_in_eur": "Total donation amount in €",
+    "yes-i-copied-the-token": "Yes, I copied the token",
-  "track": "Track",
+    "you-are-going-to-loose-all-permissions-and-access-to-the-runner-system": "You are going to loose all permissions and access to the runner system!",
-  "track-added": "Track added",
+    "you-can-now-use-your-new-password-to-log-in-to-your-account": "You can now use your new password to log in to your account! 🎉",
-  "track-data-is-being-loaded": "Track data is being loaded",
+    "you-can-provide-a-runner-but-you-dont-have-to": "You can provide a runner, but you don't have to.",
-  "track-is-being-added": "Track is being added...",
+    "you-dont-have-any-scanstations-yet": "You don't have any scanstations yet",
-  "track-is-being-updated": "Track is being updated...",
+    "you-have-to-provide-an-organization": "You have to provide an organization",
-  "track-length-in-m": "Track Length in m",
+    "you-have-to-save-your-changes-to-generate-a-link": "You have to save your changes to generate a link.",
-  "track-length-must-be-greater-than-0": "Track length must be greater than 0",
+    "you-must-create-at-least-one-card-or-cancel": "You must create at least one card (or cancel).",
-  "track-name": "Track name",
+    "zip-postal-code": "ZIP/ postal code"
-  "track-name-must-not-be-empty": "Track name must not be empty",
+}
-  "track-was-updated": "Track was updated!",
-  "tracks": "Tracks",
-  "unpaid": "Unpaid",
-  "update-card": "Update Card",
-  "update-password": "Update password",
-  "updated-contact": "Updated contact!",
-  "updated-donor": "updated donor",
-  "updated-organization": "updated organization",
-  "updated-scan": "updated scan",
-  "updated-team": "Updated team",
-  "updateing-group": "updateing group...",
-  "updating-card": "Updating card",
-  "updating-donation": "Updating donation",
-  "updating-organization": "updating organization",
-  "updating-permissions": "updating permissions...",
-  "updating-runner": "Updating runner...",
-  "updating-team": "Updating team",
-  "updating-user": "updating user...",
-  "updating-your-profile": "Updating your profile...",
-  "user-added": "User added",
-  "user-groups": "User Groups",
-  "user-is-being-added": "User is being added...",
-  "user-updated": "User updated",
-  "username": "Username",
-  "users": "Users",
-  "valid": "Valid",
-  "valid-city-is-required": "Valid city is required",
-  "valid-email-is-required": "valid email is required",
-  "valid-international-phone-number-is-required": "valid international phone number is required...",
-  "valid-zipcode-postal-code-is-required": "Valid zipcode/ postal code is required",
-  "verfuegbare": "availdable",
-  "welcome_wavinghand": "Welcome 👋",
-  "yes-i-copied-the-token": "Yes, I copied the token",
-  "you-are-going-to-loose-all-permissions-and-access-to-the-runner-system": "You are going to loose all permissions and access to the runner system!",
-  "you-can-enter-the-donations-paid-amount-manually-or-use-the-max-button-to-use-the-donations-exact-amount": "You can enter the donation's paid amount manually or use the MAX button to use the donation's exact amount.",
-  "you-can-now-use-your-new-password-to-log-in-to-your-account": "You can now use your new password to log in to your account! 🎉",
-  "you-can-provide-a-runner-but-you-dont-have-to": "You can provide a runner, but you don't have to.",
-  "you-dont-have-any-scanclients-yet": "You don't have any statsclients yet",
-  "you-dont-have-any-scanstations-yet": "You don't have any scanstations yet",
-  "you-have-to-provide-an-organization": "You have to provide an organization",
-  "you-have-to-save-your-changes-to-generate-a-link": "You have to save your changes to generate a link.",
-  "you-must-create-at-least-one-card-or-cancel": "You must create at least one card (or cancel).",
-  "zip-postal-code": "ZIP/ postal code",
-  "delete-cards": "Delete cards",
-  "cards-deleted": "Cards deleted"
-}

src/main.js

@@ -1,4 +1,4 @@
-import './style.css';
+import 'windi.css';
 import "toastify-js/src/toastify.css";
 import "gridjs/dist/theme/mermaid.css";
 import App from './App.svelte';

src/style.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

tailwind.config.js

@@ -1,6 +1,4 @@
 module.exports = {
-	mode: 'jit',
-	content: [ './src/**/*.svelte' ],
 	theme: {
 		extend: {
 			colors: {

vite.config.js

@@ -1,11 +1,50 @@
-// vite.config.js
+import svelte from '@sveltejs/vite-plugin-svelte';
+import windiCSS from 'vite-plugin-windicss';
+import { minify } from 'html-minifier';
 import { defineConfig } from 'vite';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
+//
+const indexReplace = () => {
+	return {
+		name: 'html-transform',
+		transformIndexHtml(html) {
+			return minify(html, {
+				collapseWhitespace: true
+			});
+		}
+	};
+};
 
-export default defineConfig({
+export default defineConfig(({ command, mode }) => {
-	plugins: [
+	const isProduction = mode === 'production';
-		svelte({
+	return {
-			/* plugin options */
+		// base: './',
-		})
+		build: {
-	]
+			polyfillDynamicImport: false,
-});
+			cssCodeSplit: false,
+			minify: isProduction
+		},
+		plugins: [
+			windiCSS({
+				//@ts-ignore
+				verbose: true,
+				silent: false,
+				debug: true,
+				config: 'tailwind.config.js', // tailwind config file path (optional)
+				compile: false, // false: interpretation mode; true: compilation mode
+				prefix: 'windi-', // set compilation mode style prefix
+				globalPreflight: true, // set preflight style is global or scoped
+				globalUtility: true // set utility style is global or scoped
+			}),
+			svelte({
+				//@ts-ignore
+				hot: !isProduction,
+				emitCss: true,
+				extensions: [ '.md', '.svx', '.svelte' ],
+				preprocess: [
+					//
+				]
+			}),
+			indexReplace()
+		]
+	};
+});