🚀RELEASE v0.16.3

Reviewed-on: #157

.drone.yml

@@ -43,18 +43,23 @@ steps:
       ssh_key:
         from_secret: git_ssh
   - name: build dev
-    image: plugins/docker
+    depends_on: ["clone"]
-    depends_on: [clone]
+    image: registry.odit.services/library/drone-kaniko
     settings:
       username:
         from_secret: docker_username
       password:
         from_secret: docker_password
-      repo: registry.odit.services/lfk/frontend
+      build_args:
+        - NPM_REGISTRY_DOMAIN:
+          from_secret: npmjs_domain
+        - NPM_REGISTRY_TOKEN:
+          from_secret: npmjs_token
+      repo: lfk/frontend
       tags:
         - dev
+      cache: true
       registry: registry.odit.services
-      mtu: 1000
 trigger:
   branch:
     - dev
@@ -67,18 +72,23 @@ type: kubernetes
 name: build:tags
 steps:
   - name: build $DRONE_TAG
-    image: plugins/docker
+    depends_on: ["clone"]
-    depends_on: [clone]
+    image: registry.odit.services/library/drone-kaniko
     settings:
       username:
         from_secret: docker_username
       password:
         from_secret: docker_password
-      repo: registry.odit.services/lfk/frontend
+      build_args:
+        - NPM_REGISTRY_DOMAIN:
+          from_secret: npmjs_domain
+        - NPM_REGISTRY_TOKEN:
+          from_secret: npmjs_token
+      repo: lfk/frontend
       tags:
-        - '${DRONE_TAG}'
+        - "${DRONE_TAG}"
+      cache: true
       registry: registry.odit.services
-      mtu: 1000
 trigger:
   event:
   - tag

.gitignore

@@ -8,3 +8,4 @@ public/index.html
 .yarn
 .pnp.js
 .yarnrc.yml
+pnpm-lock.yaml

CHANGELOG.md

@@ -2,8 +2,116 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.16.3](https://git.odit.services/lfk/frontend/compare/0.16.2...0.16.3)
+
+- 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)

Dockerfile

@@ -1,12 +1,12 @@
-FROM registry.odit.services/hub/library/node:15.14.0-alpine3.13
+FROM registry.odit.services/hub/library/node:19.5.0-alpine3.16 as build
 WORKDIR /app
 COPY package.json ./
-RUN yarn
+RUN npx pnpm i
-COPY package.json *.config.js postcss.config.cjs index.html ./
+COPY package.json *.config.js postcss.config.cjs tailwind.config.js vite.config.js index.html ./
 COPY src ./src
 COPY public ./public
 RUN yarn build
 # final image
-FROM registry.odit.services/hub/fholzer/nginx-brotli:v1.19.1
+FROM registry.odit.services/library/nginx-brotli:3.15 as final
-COPY --from=0 /app/dist /usr/share/nginx/html
+COPY --from=build /app/dist /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.15.3-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.16.3-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>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.15.3",
+	"version": "0.16.3",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "vite",
@@ -10,26 +10,27 @@
 	},
 	"license": "CC-BY-NC-SA-4.0",
 	"devDependencies": {
-		"@odit/lfk-client-js": "0.11.0",
+		"@odit/lfk-client-js": "0.13.1",
 		"@odit/license-exporter": "0.0.11",
 		"@sveltejs/vite-plugin-svelte": "1.0.0-next.6",
 		"@types/html-minifier": "4.0.0",
+		"@vincjo/datatables": "^1.1.0",
 		"auto-changelog": "2.2.1",
-		"autoprefixer": "^10.2.5",
+		"autoprefixer": "10.2.5",
 		"check-password-strength": "2.0.2",
 		"csvtojson": "2.0.10",
 		"gridjs": "3.4.0",
 		"html-minifier": "4.0.0",
 		"localforage": "1.9.0",
 		"marked": "2.0.3",
-		"postcss": "^8.2.10",
+		"postcss": "8.2.10",
 		"release-it": "14.6.1",
 		"svelte": "3.37.0",
 		"svelte-focus-trap": "1.2.0",
 		"svelte-i18n": "3.3.9",
-		"svelte-preprocess": "^4.7.0",
+		"svelte-preprocess": "4.7.0",
 		"svelte-select": "3.17.0",
-		"tailwindcss": "^2.1.1",
+		"tailwindcss": "3.2.7",
 		"tinro": "0.6.1",
 		"toastify-js": "1.10.0",
 		"validator": "13.5.2",
@@ -52,5 +53,8 @@
 		"hooks": {
 			"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"
 		}
+	},
+	"dependencies": {
+		"@paralleldrive/cuid2": "^2.2.0"
 	}
 }

src/App.svelte

@@ -72,6 +72,8 @@
   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>
 
@@ -206,6 +208,14 @@
             <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/cards/CardDetailModal.svelte

@@ -5,6 +5,7 @@
   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 = {};
@@ -21,6 +22,10 @@
   $: 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 };
@@ -65,6 +70,7 @@
           }).showToast();
           current_cards[current_cards.findIndex((c) => c.id === id)] = result;
           current_cards = current_cards;
+          dataUpdated();
         })
         .catch((err) => {
           //

src/components/cards/CardsOverview.svelte

@@ -3,279 +3,230 @@
   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";
   export let edit_modal_open = false;
   export let runner = {};
   export let editable = {};
   export let original_data = {};
   export let current_cards = [];
-  $: filtered_cards = current_cards.filter(function (c) {
+  const handler = new DataHandler(current_cards, { rowsPerPage: 50 });
-    if (
+  const rows = handler.getRows();
-      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 = current_cards.some((r) => r.is_selected === true);
+  $: cards_show = generate_cards.length > 0;
-  $: generate_cards = current_cards.filter((r) => r.is_selected === true);
+  $: generate_cards = [];
   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?.middlename || "") + " " + (option?.lastname || "{$_('non-blanko')}");
+    option?.firstname +
+    " " +
+    (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 {
-    else{
+      card.runner = null;
-      card.runner=null;
+      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>
 
-<style>
+{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:UPDATE")}
-  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="text-sm">{$_('this-might-take-a-moment')}</p>
+      <p class="font-bold">{$_("loading-cards")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
   {:then}
     {#if current_cards.length === 0}
       <CardsEmptyState />
     {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
-        aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
       <div class="h-12">
-          <GenerateRunnerCards
+        <GenerateRunnerCards bind:cards_show bind:generate_cards />
-            bind:cards_show
-            bind:generate_cards />
       </div>
-      <div
+      <Datatable {handler}>
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        <table>
-        <table class="divide-y divide-gray-200 w-full">
+          <thead>
-          <thead class="bg-gray-50">
             <tr>
-              <th
+              <th>
-                scope="col"
+                <input
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  type="checkbox"
-                <span
+                  class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                  checked={generate_cards.length == current_cards.length}
                   on:click={() => {
-                    const newstate = !current_cards.some((r) => r.is_selected === true);
+                    if (generate_cards.length != current_cards.length) {
-                    current_cards = current_cards.map((r) => {
+                      generate_cards = current_cards;
-                      r.is_selected = newstate;
+                    } else {
-                      return r;
+                      generate_cards = [];
-                    });
+                    }
                   }}
-                  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>{$_("action")}</th>
+            </tr>
+            <tr>
+              <th />
+              <ThFilter {handler} filterBy="code" />
+              <ThFilter {handler} filterBy="runner" />
+              <ThFilterStatus {handler} />
+              <th />
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-200 virtual-wrapper"
+          <tbody>
-  on:scroll={updateScroll}
+            {#each $rows as row}
-  style="height: 70vh; width:100%"
+              <tr>
-  bind:this={ele}
+                <td>
-          >
-    {#each filtered_cards as card, index}
-    {#if card.code
-      .toLowerCase()
-      .includes(
-        searchvalue.toLowerCase()
-      ) || card.runner?.firstname
-        .toLowerCase()
-        .includes(
-          searchvalue.toLowerCase()
-        ) || card.runner?.middlename
-        .toLowerCase()
-        .includes(
-          searchvalue.toLowerCase()
-        ) || card.runner?.lastname
-        .toLowerCase()
-        .includes(
-          searchvalue.toLowerCase()
-        ) || should_display_based_on_id(card.id)}
-      <tr data-rowid="card_{card.id}">
-        <td class="px-6 py-4 whitespace-nowrap">
                   <input
-            bind:checked={card.is_selected}
                     type="checkbox"
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                    class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-        </td>
+                    checked={generate_cards.filter((i) => i.id == row.id)
-        <td class="px-6 py-4 whitespace-nowrap">
+                      .length > 0}
-          <div class="flex items-center">{card.code}</div>
-        </td>
-        <td class="px-6 py-4 whitespace-nowrap">
-          <div class="flex items-center">
-            {#if card.runner}
-              <a
-                href="../runners/{card.runner.id}"
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
-                {card.runner.middlename || ''}
-                {card.runner.lastname}</a>
-            {:else}{$_('non-blanko')}{/if}
-          </div>
-        </td>
-        <td class="px-6 py-4 whitespace-nowrap">
-          <div class="flex items-center">
-            {#if card.enabled}
-              <span
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
-            {:else}
-              <span
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
-            {/if}
-          </div>
-        </td>
-
-        {#if active_deletes[card.id] === true}
-          <td
-            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-            <button
                     on:click={() => {
-                active_deletes[card.id] = false;
+                      if (
-              }}
+                        generate_cards.findIndex((i) => i.id == row.id) == -1
-              tabindex="0"
+                      ) {
-              class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                        generate_cards.push(row);
-            <button
+                        generate_cards = generate_cards;
-              on:click={() => {
+                      } else {
-                RunnerCardService.runnerCardControllerRemove(card.id, false).then(
+                        generate_cards = generate_cards.filter(
-                  (resp) => {
+                          (r) => r.id != row.id
-                    current_cards = current_cards.filter(
-                      (obj) => obj.id !== card.id
                         );
-                    Toastify({
-                      text: $_('card-deleted'),
-                      duration: 500,
-                      backgroundColor:
-                        'linear-gradient(to right, #00b09b, #96c93d)',
-                    }).showToast();
                       }
-                );
+                      console.log(generate_cards);
                     }}
-              tabindex="0"
+                  />
-              class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
                 </td>
+                <td>{row.code}</td>
+                <td>
+                  {#if row.runner}
+                    <a
+                      href="../runners/{row.runner.id}"
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                      >{row.runner.firstname}
+                      {row.runner.middlename || ""}
+                      {row.runner.lastname}</a
+                    >
+                  {:else}{$_("non-blanko")}{/if}
+                </td>
+                <td>
+                  {#if row.enabled}
+                    <span
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+                      >{$_("enabled")}</span
+                    >
                   {:else}
-          <td
+                    <span
-            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
-            <button
+                      >{$_("disabled")}</span
-              on:click={() => {
+                    >
-                open_edit_modal(card);
-              }}
-              class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
-            {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
-              <button
-                on:click={() => {
-                  active_deletes[card.id] = true;
-                }}
-                tabindex="0"
-                class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
                   {/if}
                 </td>
+                <td>
+                  {#if active_deletes[row.id] === true}
+                    <button
+                      on:click={() => {
+                        active_deletes[row.id] = false;
+                      }}
+                      tabindex="0"
+                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                      >{$_("cancel-delete")}</button
+                    >
+                    <button
+                      on:click={() => {
+                        RunnerCardService.runnerCardControllerRemove(
+                          row.id,
+                          true
+                        )
+                          .then((resp) => {
+                            current_cards = current_cards.filter(
+                              (obj) => obj.id !== row.id
+                            );
+                          })
+                          .catch((err) => {});
+                      }}
+                      tabindex="0"
+                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                      >{$_("confirm-delete")}</button
+                    >
+                  {:else}
+                    <button
+                      on:click={() => {
+                        open_edit_modal(row);
+                      }}
+                      class="text-indigo-600 hover:text-indigo-900"
+                      >{$_("details")}</button
+                    >
+                    {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:DELETE")}
+                      <button
+                        on:click={() => {
+                          active_deletes[row.id] = true;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        >{$_("delete")}</button
+                      >
                     {/if}
+                  {/if}
+                </td>
               </tr>
-    {/if}
             {/each}
           </tbody>
         </table>
-      </div>
+      </Datatable>
     {/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/ThFilterStatus.svelte

@@ -0,0 +1,29 @@
+<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>

src/components/dashboard/Dashboard.svelte

@@ -256,6 +256,26 @@
           <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,22 +1,157 @@
 <script>
   import { _ } from "svelte-i18n";
-  import StatCards from "./StatCards.svelte";
+  import { StatsService } from "@odit/lfk-client-js";
+  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
+      <span class="text-blue-500"
-        class="text-blue-500">{store.state.jwtinfo.userdetails.firstname} {store.state.jwtinfo.userdetails.lastname}</span></span>
+        >{store.state.jwtinfo.userdetails.firstname}
+        {store.state.jwtinfo.userdetails.lastname}</span
+      ></span
+    >
   </h1>
-  <StatCards />
+  <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="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

@@ -0,0 +1,22 @@
+<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

@@ -1,165 +0,0 @@
-<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/donors/DonorDetail.svelte

@@ -207,7 +207,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/pdf_generation/GenerateRunnerCards.svelte

@@ -6,6 +6,9 @@
     RunnerTeamService,
   } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
+  import { init } from "@paralleldrive/cuid2";
+  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+
   export let cards_show = false;
   export let generate_cards = [];
   export let generate_runners = [];
@@ -67,7 +70,7 @@
         const url = window.URL.createObjectURL(blob);
         let a = document.createElement("a");
         a.href = url;
-                a.download = `${$_('runnercards')}-${locale}.pdf`;
+        a.download = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
         document.body.appendChild(a);
         a.click();
         a.remove();
@@ -75,8 +78,7 @@
         Toastify({
           text: $_("pdf-successfully-generated"),
           duration: 3500,
-                    backgroundColor:
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                        "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
       })
       .catch((err) => {
@@ -127,11 +129,12 @@
         const url = window.URL.createObjectURL(blob);
         let a = document.createElement("a");
         a.href = url;
-                if(generate_runners.length == 1){
+        if (generate_runners.length == 1) {
-                    a.download = `${$_('runnercards')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
+          a.download = `${$_("runnercards")}_${generate_runners[0].firstname}_${
-                }
+            generate_runners[0].lastname
-                else{
+          }-${locale}-${createId()}.pdf`;
-                    a.download = `Runnercards-${locale}.pdf`;
+        } else {
+          a.download = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
         }
         document.body.appendChild(a);
         a.click();
@@ -140,8 +143,7 @@
         Toastify({
           text: $_("pdf-successfully-generated"),
           duration: 3500,
-                    backgroundColor:
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                        "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
       })
       .catch((err) => {});
@@ -196,7 +198,7 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-                    a.download = `${$_('runnercards')}_${t.name}-${locale}.pdf`;
+          a.download = `${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`;
           document.body.appendChild(a);
           a.click();
           a.remove();
@@ -205,8 +207,7 @@
             Toastify({
               text: $_("pdfs-successfully-generated"),
               duration: 3500,
-                            backgroundColor:
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                                "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
           }
         })
@@ -221,11 +222,15 @@
     }).showToast();
     const current_cards = await RunnerCardService.runnerCardControllerGetAll();
     let count = 0;
-        let count_orgs =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 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);
@@ -263,18 +268,17 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-                a.download = `${$_('runnercards')}_${o.name}_direct-${locale}.pdf`;
+          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")
+            console.log("here");
             Toastify({
               text: $_("pdfs-successfully-generated"),
               duration: 3500,
-                        backgroundColor:
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                        "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
           }
         })
@@ -321,17 +325,21 @@
             const url = window.URL.createObjectURL(blob);
             let a = document.createElement("a");
             a.href = url;
-                a.download = `${$_('runnercards')}_${o.name}_${t.name}-${locale}.pdf`;
+            a.download = `${$_("runnercards")}_${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) {
+            if (
+              count === o.teams.length &&
+              count_orgs === generate_orgs.length
+            ) {
               toast.hideToast();
               Toastify({
                 text: $_("pdfs-successfully-generated"),
                 duration: 3500,
-                        backgroundColor:
+                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                            "linear-gradient(to right, #00b09b, #96c93d)",
               }).showToast();
             }
           })
@@ -352,49 +360,56 @@
         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"
         aria-haspopup="true"
-                aria-expanded="true">
+        aria-expanded="true"
-                {$_('generate-runnercards')}
+      >
+        {$_("generate-runnercards")}
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="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
             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"
+          /></svg
+        >
       </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"
+        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">
+        id="cards:dropdown:menu"
+      >
         <div
           class="py-1"
           role="menu"
           aria-orientation="vertical"
-                    aria-labelledby="options-menu">
+          aria-labelledby="options-menu"
-                    <span
+        >
-                        class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
+          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
+            >{$_("select-language")}</span
+          >
           <button
             on:click={() => {
-                            generateRunnerCards('de');
+              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">
+            role="menuitem"
-                        {$_('german')}
+          >
+            {$_("german")}
           </button>
           <button
             on:click={() => {
-                            generateRunnerCards('en');
+              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">
+            role="menuitem"
-                        {$_('english')}
+          >
+            {$_("english")}
           </button>
         </div>
       </div>

src/components/pdf_generation/GenerateRunnerCertificates.svelte

@@ -3,9 +3,12 @@
   import {
     DonationService,
     RunnerTeamService,
-        RunnerOrganizationService
+    RunnerOrganizationService,
   } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
+  import { init } from "@paralleldrive/cuid2";
+  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+
   export let certificates_show = false;
   export let generate_runners = [];
   export let generate_orgs = [];
@@ -37,10 +40,13 @@
       text: $_("generating-pdf"),
       duration: -1,
     }).showToast();
-        const current_donations = (await DonationService.donationControllerGetAll()) || [];
+    const current_donations =
+      (await DonationService.donationControllerGetAll()) || [];
     let certificateRunners = [];
     for (let runner of generate_runners) {
-            runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
+      runner.distanceDonations =
+        current_donations.filter((d) => d.runner?.id == runner.id) || [];
+      console.log(runner.distanceDonations);
       certificateRunners.push(runner);
     }
     fetch(
@@ -70,11 +76,12 @@
         const url = window.URL.createObjectURL(blob);
         let a = document.createElement("a");
         a.href = url;
-                if(generate_runners.length == 1){
+        if (generate_runners.length == 1) {
-                    a.download = `${$_('certificates')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
+          a.download = `${$_("certificates")}_${
-                }
+            generate_runners[0].firstname
-                else{
+          }_${generate_runners[0].lastname}-${locale}-${createId()}.pdf`;
-                    a.download = `${$_('certificates')}-${locale}.pdf`;
+        } else {
+          a.download = `${$_("certificates")}-${locale}.pdf`;
         }
         document.body.appendChild(a);
         a.click();
@@ -83,8 +90,7 @@
         Toastify({
           text: $_("pdf-successfully-generated"),
           duration: 3500,
-                    backgroundColor:
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                        "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
       })
       .catch((err) => {});
@@ -96,14 +102,16 @@
       duration: -1,
     }).showToast();
     let count = 0;
-        const current_donations = (await DonationService.donationControllerGetAll()) || [];
+    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) || [];
+        runner.distanceDonations =
+          current_donations.filter((d) => d.runner?.id == runner.id) || [];
         certificateRunners.push(runner);
       }
       fetch(
@@ -134,7 +142,7 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-                    a.download = `${$_('certificates')}_${t.name}-${locale}.pdf`;
+          a.download = `${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`;
           document.body.appendChild(a);
           a.click();
           a.remove();
@@ -143,8 +151,7 @@
             Toastify({
               text: $_("pdfs-successfully-generated"),
               duration: 3500,
-                            backgroundColor:
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                                "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
           }
         })
@@ -157,16 +164,22 @@
       text: $_("generating-pdfs"),
       duration: -1,
     }).showToast();
-        const current_donations = (await DonationService.donationControllerGetAll()) || [];
+    const current_donations =
+      (await DonationService.donationControllerGetAll()) || [];
     let count = 0;
-        let count_orgs =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 runners =
+        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+          o.id,
+          true
+        );
       let certificateRunners = [];
       for (let runner of runners) {
-                runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
+        runner.distanceDonations =
+          current_donations.filter((d) => d.runner?.id == runner.id) || [];
         certificateRunners.push(runner);
       }
       await fetch(
@@ -196,18 +209,17 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-                a.download = `${$_('certificates')}_${o.name}_direct-${locale}.pdf`;
+          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")
+            console.log("here");
             Toastify({
               text: $_("pdfs-successfully-generated"),
               duration: 3500,
-                        backgroundColor:
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                        "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
           }
         })
@@ -219,7 +231,8 @@
         );
         let certificateRunners = [];
         for (let runner of runners) {
-                runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
+          runner.distanceDonations =
+            current_donations.filter((d) => d.runner?.id == runner.id) || [];
           certificateRunners.push(runner);
         }
         await fetch(
@@ -249,17 +262,21 @@
             const url = window.URL.createObjectURL(blob);
             let a = document.createElement("a");
             a.href = url;
-                a.download = `${$_('certificates')}_${o.name}_${t.name}-${locale}.pdf`;
+            a.download = `${$_("certificates")}_${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) {
+            if (
+              count === o.teams.length &&
+              count_orgs === generate_orgs.length
+            ) {
               toast.hideToast();
               Toastify({
                 text: $_("pdfs-successfully-generated"),
                 duration: 3500,
-                        backgroundColor:
+                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                            "linear-gradient(to right, #00b09b, #96c93d)",
               }).showToast();
             }
           })
@@ -280,49 +297,56 @@
         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"
         aria-haspopup="true"
-                aria-expanded="true">
+        aria-expanded="true"
-                {$_('generate-runner-certificates')}
+      >
+        {$_("generate-runner-certificates")}
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="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
             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"
+          /></svg
+        >
       </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"
+        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">
+        id="certificates:dropdown:menu"
+      >
         <div
           class="py-1"
           role="menu"
           aria-orientation="vertical"
-                    aria-labelledby="options-menu">
+          aria-labelledby="options-menu"
-                    <span
+        >
-                        class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
+          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
+            >{$_("select-language")}</span
+          >
           <button
             on:click={() => {
-                            generateCertificates('de');
+              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">
+            role="menuitem"
-                        {$_('german')}
+          >
+            {$_("german")}
           </button>
           <button
             on:click={() => {
-                            generateCertificates('en');
+              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">
+            role="menuitem"
-                        {$_('english')}
+          >
+            {$_("english")}
           </button>
         </div>
       </div>

src/components/pdf_generation/GenerateSponsoringContracts.svelte

@@ -5,6 +5,9 @@
     RunnerTeamService,
   } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
+  import { init } from "@paralleldrive/cuid2";
+  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+
   export let sponsoring_contracts_show = false;
   export let generate_runners = [];
   export let generate_orgs = [];
@@ -69,7 +72,7 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-                    a.download = `${$_('sponsorings')}_${t.name}-${locale}.pdf`;
+          a.download = `${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`;
           document.body.appendChild(a);
           a.click();
           a.remove();
@@ -78,8 +81,7 @@
             Toastify({
               text: $_("pdfs-successfully-generated"),
               duration: 3500,
-                            backgroundColor:
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                                "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
           }
         })
@@ -92,11 +94,15 @@
       text: $_("generating-pdf"),
       duration: -1,
     }).showToast();
-        let count_orgs =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 runners =
+        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+          o.id,
+          true
+        );
       await fetch(
         `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
         {
@@ -124,18 +130,17 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-                a.download = `${$_('sponsorings')}_${o.name}_direct-${locale}.pdf`;
+          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")
+            console.log("here");
             Toastify({
               text: $_("pdfs-successfully-generated"),
               duration: 3500,
-                        backgroundColor:
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                        "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
           }
         })
@@ -172,17 +177,21 @@
             const url = window.URL.createObjectURL(blob);
             let a = document.createElement("a");
             a.href = url;
-                a.download = `${$_('sponsorings')}_${o.name}_${t.name}-${locale}.pdf`;
+            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) {
+            if (
+              count === o.teams.length &&
+              count_orgs === generate_orgs.length
+            ) {
               toast.hideToast();
               Toastify({
                 text: $_("pdfs-successfully-generated"),
                 duration: 3500,
-                        backgroundColor:
+                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                            "linear-gradient(to right, #00b09b, #96c93d)",
               }).showToast();
             }
           })
@@ -223,10 +232,12 @@
         const url = window.URL.createObjectURL(blob);
         let a = document.createElement("a");
         a.href = url;
-                if(generate_runners.length == 1){
+        if (generate_runners.length == 1) {
-                    a.download = `${$_('sponsorings')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
+          a.download = `${$_("sponsorings")}_${generate_runners[0].firstname}_${
+            generate_runners[0].lastname
+          }-${locale}-${createId()}.pdf`;
         }
-                a.download = `${$_('sponsorings')}-${locale}.pdf`;
+        a.download = `${$_("sponsorings")}-${locale}-${createId()}.pdf`;
         document.body.appendChild(a);
         a.click();
         a.remove();
@@ -234,8 +245,7 @@
         Toastify({
           text: $_("pdf-successfully-generated"),
           duration: 3500,
-                    backgroundColor:
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                        "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
       })
       .catch((err) => {
@@ -249,55 +259,63 @@
     <div>
       <button
         on:click={() => {
-                    sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
+          sponsoring_contracts_download_open =
+            !sponsoring_contracts_download_open;
         }}
         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"
         id="options-menu"
         aria-haspopup="true"
-                aria-expanded="true">
+        aria-expanded="true"
-                {$_('generate-sponsoring-contracts')}
+      >
+        {$_("generate-sponsoring-contracts")}
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="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
             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"
+          /></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"
+        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">
+        id="sponsoring:dropdown:menu"
+      >
         <div
           class="py-1"
           role="menu"
           aria-orientation="vertical"
-                    aria-labelledby="options-menu">
+          aria-labelledby="options-menu"
-                    <span
+        >
-                        class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
+          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
+            >{$_("select-language")}</span
+          >
           <button
             on:click={() => {
-                            generateSponsoringContract('de');
+              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">
+            role="menuitem"
-                        {$_('german')}
+          >
+            {$_("german")}
           </button>
           <button
             on:click={() => {
-                            generateSponsoringContract('en');
+              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">
+            role="menuitem"
-                        {$_('english')}
+          >
+            {$_("english")}
           </button>
         </div>
       </div>

src/components/runners/RunnerDetail.svelte

@@ -71,6 +71,9 @@
       }).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);
@@ -95,7 +98,7 @@
 </script>
 
 {#await runner_promise}
-  {$_('loading-runners')}
+  {$_("loading-runners")}
 {:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">
@@ -109,12 +112,15 @@
                 class="flex-shrink-0 w-5 h-5 mr-2"
                 fill="currentColor"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><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" /></svg>
+                  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
+              >
             </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"
@@ -124,17 +130,17 @@
                 class="h-3 w-3 mr-2 stroke-current"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
+                xmlns="http://www.w3.org/2000/svg"
-                  x1="5"
+                ><line x1="5" y1="12" x2="19" y2="12" />
-                  y1="12"
+                <polyline points="12 5 19 12 12 19" /></svg
-                  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.firstname}
+              <span class="mr-2"
-                {original_data.middlename || ''}
+                >{original_data.firstname}
-                {original_data.lastname}</span>
+                {original_data.middlename || ""}
+                {original_data.lastname}</span
+              >
             </li>
           </ol>
         </nav>
@@ -142,36 +148,42 @@
     </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">{$_('confirm-deletion')}</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"
+              >{$_("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>
+              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}
           <GenerateSponsoringContracts
             bind:sponsoring_contracts_show
-            bind:generate_runners />
+            bind:generate_runners
-          <GenerateRunnerCards
+          />
-            bind:cards_show
+          <GenerateRunnerCards bind:cards_show bind:generate_runners />
-            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">{$_('delete-runner')}</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-runner")}</button
+            >
           {/if}
         {/if}
         {#if !delete_triggered}
@@ -180,121 +192,128 @@
             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">{$_('save-changes')}</button>
+            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
+          >
         {/if}
       </span>
     </div>
     <!--  -->
     <div class="text-sm w-full">
-      <label
+      <label for="firstname" class="font-medium text-gray-700"
-        for="firstname"
+        >{$_("first-name")}</label
-        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
+      <label for="middlename" class="font-medium text-gray-700"
-        for="middlename"
+        >{$_("middle-name")}</label
-        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
+      <label for="lastname" class="font-medium text-gray-700"
-        for="lastname"
+        >{$_("last-name")}</label
-        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
+      <label for="email" class="font-medium text-gray-700"
-        for="email"
+        >{$_("e-mail-adress")}</label
-        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) => label
+        itemFilter={(label, filterText, option) =>
-            .toLowerCase()
+          label.toLowerCase().includes(filterText.toLowerCase()) ||
-            .includes(
+          option.id.value.toString().startsWith(filterText.toLowerCase())}
-              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} km</span>
+      <span class="text-gray-700">{original_data.distance / 1000} km</span>
     </div>
   </section>
 {:catch error}

src/components/runners/RunnersOverview.svelte

@@ -1,37 +1,26 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import { _ } from "svelte-i18n";
   import {
     RunnerService,
     RunnerTeamService,
     RunnerOrganizationService,
   } from "@odit/lfk-client-js";
+  import ThFilterGroup from "./ThFilterGroup.svelte";
+  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
   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";
-  $: searchvalue = "";
+  import { onMount } from "svelte";
   $: active_deletes = [];
-  export let current_runners = [];
+  let dataLoaded = false;
-  const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
+  let current_runners = [];
-    current_runners = val;
+  const handler = new DataHandler(current_runners, { rowsPerPage: 50 });
-  });
+  const rows = handler.getRows();
-  $: selectedFilter_teams = null;
+  $: sponsoring_contracts_show = generate_runners.length > 0;
-  $: selectedFilter = null;
+  $: cards_show = generate_runners.length > 0;
-  $: filter__teams = selectedFilter_teams || [];
+  $: certificates_show = generate_runners.length > 0;
-  $: filter__orgs = selectedFilter || [];
+  $: generate_runners = []; //current_runners.filter((r) => r.selected === true);
-  $: 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) {
@@ -42,222 +31,193 @@
       return { value: g.id, label: g.name };
     })
     .concat(mappedteams);
-
+  onMount(() => {
+    RunnerService.runnerControllerGetAll().then((val) => {
+      current_runners = val;
+      dataLoaded = true;
+      handler.setRows(val);
+    });
     RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
       teams = val;
     });
-  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((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")}
-  {#await runners_promise}
+  {#if !dataLoaded}
     <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="text-sm">{$_('this-might-take-a-moment')}</p>
+      <p class="font-bold">{$_("runners-are-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
-  {:then}
-    {#if current_runners.length === 0}
-      <RunnersEmptyState />
   {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
-        aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
-      <div class="block mb-6">
-        <label
-          for="country"
-          class="text-sm font-medium text-gray-700">{$_('filter-by-organization-team')}</label>
-        <Select
-          on:select={(event) => {
-            selectedFilter = event.detail;
-          }}
-          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 />
+        bind:generate_runners
-        <GenerateRunnerCards
+      />
-          bind:cards_show
+      <GenerateRunnerCards bind:cards_show bind:generate_runners />
-          bind:generate_runners />
       <GenerateRunnerCertificates
         bind:certificates_show
-          bind:generate_runners />
+        bind:generate_runners
+      />
     </div>
-      <div
+    <Datatable {handler}>
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+      <table>
-        <table class="divide-y divide-gray-200 w-full">
+        <thead>
-          <thead class="bg-gray-50">
           <tr>
-              <th
+            <th>
-                scope="col"
+              <input
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                type="checkbox"
-                <span
+                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                checked={generate_runners.length == current_runners.length}
                 on:click={() => {
-                    const newstate = !current_runners.some((r) => r.is_selected === true);
+                  if (generate_runners.length != current_runners.length) {
-                    current_runners = current_runners.map((r) => {
+                    generate_runners = current_runners;
-                      r.is_selected = newstate;
+                  } else {
-                      return r;
+                    generate_runners = [];
-                    });
+                  }
                 }}
-                  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>
+            <Th {handler} orderBy="id">ID</Th>
+            <Th {handler} orderBy="firstname">First Name</Th>
+            <Th {handler} orderBy="middlename">Middle Name</Th>
+            <Th {handler} orderBy="lastname">Last Name</Th>
+            <th>Gruppe</th>
+            <Th {handler} orderBy="distance">Distanz</Th>
+            <th>{$_("action")}</th>
+          </tr>
+          <tr>
+            <th />
+            <ThFilter {handler} filterBy="id" />
+            <ThFilter {handler} filterBy="firstname" />
+            <ThFilter {handler} filterBy="middlename" />
+            <ThFilter {handler} filterBy="lastname" />
+            <ThFilterGroup groups={selectgroups} {handler} />
+            <th />
+            <th />
           </tr>
         </thead>
-          <tbody class="divide-y divide-gray-200">
+        <tbody>
-            {#each current_runners as runner}
+          {#each $rows as row}
-              {#if runner.firstname
+            <tr>
-                .toLowerCase()
+              <td>
-                .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" />
+                  class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                  checked={generate_runners.filter((i)=>i.id == row.id).length > 0}
+                  on:click={() => {
+                    if (
+                      generate_runners.findIndex((i) => i.id == row.id) == -1
+                    ) {
+                      generate_runners.push(row);
+                      generate_runners = generate_runners;
+                    } else {
+                      generate_runners = generate_runners.filter(
+                        (r) => r.id != row.id
+                      );
+                    }
+                    console.log(generate_runners)
+                  }}
+                />
               </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
+              <td>{row.id}</td>
-                      <div class="flex items-center">
+              <td>{row.firstname}</td>
-                        <div class="ml-4">
+              <td>{row.middlename || ""}</td>
-                          <div class="text-sm font-medium text-gray-900">
+              <td>{row.lastname}</td>
-                            {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.parentGroup.name} &gt; {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">
+                >{#if row.group.responseType === "RUNNERTEAM"}
+                  <a
+                    href="../teams/{row.group.id}"
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                    >{row.group.parentGroup.name} &gt; {row.group.name}</a
+                  >
+                {/if}
+                {#if row.group.responseType === "RUNNERORGANIZATION"}
+                  <a
+                    href="../orgs/{row.group.id}"
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                    >{row.group.name}</a
+                  >
+                {/if}</td
+              >
+              <td>{row.distance / 1000} km</td>
+              <td>
+                {#if active_deletes[row.id] === true}
                   <button
                     on:click={() => {
-                            active_deletes[runner.id] = false;
+                      active_deletes[row.id] = false;
                     }}
                     tabindex="0"
-                          class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                    class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                    >{$_("cancel-delete")}</button
+                  >
                   <button
                     on:click={() => {
-                            RunnerService.runnerControllerRemove(runner.id, true)
+                      RunnerService.runnerControllerRemove(row.id, true)
                         .then((resp) => {
-                                current_runners = current_runners.filter((obj) => obj.id !== runner.id);
+                          current_runners = current_runners.filter(
+                            (obj) => obj.id !== row.id
+                          );
                         })
                         .catch((err) => {});
                     }}
                     tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                      </td>
+                    >{$_("confirm-delete")}</button
+                  >
                 {:else}
-                      <td
-                        class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                   <a
-                          href="./{runner.id}"
+                    href="./{row.id}"
-                          class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
+                    class="text-indigo-600 hover:text-indigo-900"
-                        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
+                    >{$_("details")}</a
+                  >
+                  {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
                     <button
                       on:click={() => {
-                              active_deletes[runner.id] = true;
+                        active_deletes[row.id] = true;
                       }}
                       tabindex="0"
-                            class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                      >{$_("delete")}</button
+                    >
+                  {/if}
                 {/if}
               </td>
-                    {/if}
             </tr>
-                {/if}
-              {/if}
           {/each}
         </tbody>
       </table>
-      </div>
+    </Datatable>
   {/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}
+
+<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

@@ -0,0 +1,35 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let groups;
+  export let handler;
+  let selected = "all";
+</script>
+
+<th>
+  <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

@@ -14,7 +14,7 @@
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterRunners = (label, filterText, option) =>
     label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.value.toString().startsWith(filterText.toLowerCase());
+    option.value.id.toString().startsWith(filterText.toLowerCase());
   function focus(el) {
     el.focus();
   }

src/components/statsclients/AddStatsClientModal.svelte

@@ -0,0 +1,151 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  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: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">
+      <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

@@ -0,0 +1,92 @@
+<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";
+  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:focusTrap
+    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

@@ -0,0 +1,129 @@
+<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;
+  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" 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">
+        <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

@@ -0,0 +1,119 @@
+<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

@@ -0,0 +1,33 @@
+<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

@@ -0,0 +1,21 @@
+<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

@@ -0,0 +1,150 @@
+<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/locales/de.json

@@ -7,8 +7,10 @@
     "add-card": "Karte erstellen",
     "add-donation": "Sponsoring erstellen",
     "add-donor": "Sponsor:in erstellen",
+    "add-or-update-a-payment": "Zahlung hinzufügen oder bearbeiten",
     "add-scan": "Scan erstellen",
     "add-the-first-scanstation": "Erstelle deine erste Scannerstation.",
+    "add-the-first-statsclient": "Erstelle deinen ersten Statsclient.",
     "add-user-group": "Neue Gruppe erstellen",
     "add-your-first-card": "Erstelle deine erste Läuferkarte",
     "add-your-first-contact": "Erstelle den ersten Kontakt",
@@ -28,6 +30,7 @@
     "address-is-required": "Du musst eine Adresse angeben",
     "after-deletion-we-cant-restore-your-old-profile": "Nach der Löschung können auch die Admins dein Profil nicht wiederherstellen!",
     "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": "Alle",
     "all-associated-donations-will-get-deleted-as-well": "Alle Sponsorings dieser Sponsor:in werden ebenfalls gelöscht",
     "all-associated-runners-will-be-deleted-too": "Alle zugehörigen Läufer:innen werden auch gelöscht!",
     "all-associated-teams-and-runners-will-be-deleted-too": "Alle assoziierten Teams und Läufer:innen werden auch gelöscht!",
@@ -46,6 +49,7 @@
     "cancel-keep-donor": "Abbrechen, Sponsor:in behalten",
     "cancel-keep-my-profile": "Abbrechen, mein Profil behalten",
     "cancel-keep-organization": "Abbrechen und Organisation bearbeiten",
+    "cancel-keep-statsclient": "Abbrechen und Statsclient behalten",
     "cancel-keep-team": "Abbrechen, Team behalten",
     "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.",
     "card-added": "Karte wurde hinzugefügt",
@@ -66,6 +70,7 @@
     "confirm-delete-donor-with-all-donations": "Bestätigen, Sponsor:in mit allen Sponsorings löschen",
     "confirm-delete-my-user-profile": "Bestätigung, mein Benutzerprofil löschen",
     "confirm-delete-organization-and-associated-teams-runners": "Bestätugung, lösche die Organisation und alle zugehörigen Teams und Läufer:innen.",
+    "confirm-delete-statsclient": "Bestätigung, Statsclient löschen",
     "confirm-delete-team-and-associated-runners": "Bestätigung, lösche das Team mitsamt seinen Läufer:innen.",
     "confirm-deletion": "Löschung Bestätigen",
     "confirm-the-new-password": "Neues Passwort bestätigen",
@@ -93,6 +98,7 @@
     "create-a-new-runner": "Neue Läufer:in erstellen",
     "create-a-new-scan-fixed-only": "Neuen Scan erstellen (nur mit Festdistanz)",
     "create-a-new-scanstation": "Neue Station erstellen",
+    "create-a-new-statsclient": "Neuen Statsclient erstellen",
     "create-a-new-team": "Erstelle ein neues Team",
     "create-a-new-track": "Neuen Track erstellen",
     "create-a-new-user": "Neue Benutzer:in anlegen",
@@ -141,6 +147,7 @@
     "delete-runner": "Läufer:in löschen",
     "delete-scan": "Scan löschen",
     "delete-station": "Station löschen",
+    "delete-statsclient": "Statsclient löschen",
     "delete-team": "Team Löschen",
     "delete-user": "Benutzer:in löschen",
     "deleted-scan": "Scan wurde gelöscht",
@@ -234,6 +241,7 @@
     "invalid": "Ungültig",
     "invalid-mail-reset": "Das ist keine gültige E-Mail",
     "just-enter-how-many-you-want-and-the-system-will-create-them": "Gebe einfach ein, wie viele Blankokarten das System erstellen soll.",
+    "key": "Schlüssel",
     "laeufer-hinzufuegen": "Läufer:in hinzufügen",
     "laeufer-importieren": "Läufer:innen importieren",
     "laptime": "Rundenzeit",
@@ -320,8 +328,10 @@
     "please-provide-the-required-information-to-add-a-new-track": "Bitte die benötigten Informationen angeben.",
     "please-provide-the-required-information-to-add-a-new-user": "Bitte gebe alle nötigen Informationen an, im die neue Benutzer:in zu erstellen.",
     "please-provide-the-required-information-to-create-a-new-scanstation": "Bitte gebe alle für eine Scannerstation notwendigen Informationen an",
+    "please-provide-the-required-information-to-create-a-new-statsclient": "Bitte gebe alle für einen Statsclient notwendigen Informationen an",
     "please-request-a-new-reset-mail": "Bitte eine neue Passwortreset-Mail anfordern...",
     "please-wait-a-moment-your-login-is-still-being-processed": "Bitte warte einen Moment, deine Anmeldung wird verarbeitet",
+    "prefix": "Prefix",
     "privacy": "Datenschutz",
     "privacy-loading": "Datenschutzerklärung lädt...",
     "profile": "Profil",
@@ -372,6 +382,10 @@
     "sponsoring-quittungs-liste_herunterladen": "Sponsoring-Quittungs-Liste herunterladen",
     "sponsorings": "Sponsoringerklaerungen",
     "stats-are-being-loaded": "Die Statistiken werden geladen...",
+    "statsclient-deleted": "Statsclient wurde gelöscht",
+    "statsclient-is-being-added": "Statsclient wird angelegt...",
+    "statsclients": "Statsclient (aka Beamershow)",
+    "statsclients-are-being-loaded": "Statsclients werden geladen",
     "status": "Status",
     "stuff-that-could-harm-your-profile": "Einstellungen, die deinem Profil nachhaltig schaden können",
     "successful-password-reset": "Passwort erfolgreich zurückgesetzt!",
@@ -387,6 +401,7 @@
     "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...",
     "the-scans-distance-must-be-greater-than-0m": "Die Distanz muss größer als 0m sein.",
     "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!",
+    "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!",
     "there-are-no-cards-yet": "Es gibt noch keine Läuferkarten.",
     "there-are-no-contacts-added-yet": "Es wurden noch keine Kontakte hinzugefügt.",
     "there-are-no-donations-yet": "Es gibt noch keine Sponsorings",
@@ -453,6 +468,7 @@
     "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.",

src/locales/en.json

@@ -10,6 +10,7 @@
     "add-or-update-a-payment": "Add or update a payment",
     "add-scan": "Add scan",
     "add-the-first-scanstation": "Add your first scanstation.",
+    "add-the-first-statsclient": "Add your first statsclient.",
     "add-user-group": "Add User Group",
     "add-your-first-card": "Add your first card",
     "add-your-first-contact": "Add your first contact",
@@ -29,6 +30,7 @@
     "address-is-required": "Address is required",
     "after-deletion-we-cant-restore-your-old-profile": "After deletion we can't restore your old profile!",
     "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": "all",
     "all-associated-donations-will-get-deleted-as-well": "All associated donations will get deleted as well",
     "all-associated-runners-will-be-deleted-too": "All associated runners will be deleted too!",
     "all-associated-teams-and-runners-will-be-deleted-too": "All associated teams and runners will be deleted too!",
@@ -47,6 +49,7 @@
     "cancel-keep-donor": "Cancel, keep donor",
     "cancel-keep-my-profile": "Cancel, keep my profile",
     "cancel-keep-organization": "Cancel, keep organization",
+    "cancel-keep-statsclient": "Cancel and keep statsclient",
     "cancel-keep-team": "Cancel, keep team",
     "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
     "card-added": "Card added",
@@ -67,6 +70,7 @@
     "confirm-delete-donor-with-all-donations": "Confirm, delete donor with all donations",
     "confirm-delete-my-user-profile": "Confirm, delete my user profile",
     "confirm-delete-organization-and-associated-teams-runners": "Confirm, delete organization and associated teams+runners.",
+    "confirm-delete-statsclient": "Confirm, delete statsclient",
     "confirm-delete-team-and-associated-runners": "Confirm, delete team and associated runners.",
     "confirm-deletion": "Confirm Deletion",
     "confirm-the-new-password": "Confirm the new password",
@@ -94,6 +98,7 @@
     "create-a-new-runner": "Create a new Runner",
     "create-a-new-scan-fixed-only": "Create a new scan (fixed only)",
     "create-a-new-scanstation": "Create a new station",
+    "create-a-new-statsclient": "Create a new statsclient",
     "create-a-new-team": "Create a new team",
     "create-a-new-track": "Create a new Track",
     "create-a-new-user": "Create a new User",
@@ -142,6 +147,7 @@
     "delete-runner": "Delete Runner",
     "delete-scan": "Delete scan",
     "delete-station": "Delete station",
+    "delete-statsclient": "Delete statsclient",
     "delete-team": "Delete Team",
     "delete-user": "Delete User",
     "deleted-scan": "Deleted scan",
@@ -235,6 +241,7 @@
     "invalid": "Invalid",
     "invalid-mail-reset": "the provided email is invalid",
     "just-enter-how-many-you-want-and-the-system-will-create-them": "Just enter how many you want and the system will create them",
+    "key": "Key",
     "laeufer-hinzufuegen": "Add runner",
     "laeufer-importieren": "Läufer importieren",
     "laptime": "Laptime",
@@ -321,8 +328,10 @@
     "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
     "please-provide-the-required-information-to-add-a-new-user": "Please provide the required information to add a new user.",
     "please-provide-the-required-information-to-create-a-new-scanstation": "Please provide the required information to create a new scanstation",
+    "please-provide-the-required-information-to-create-a-new-statsclient": "Please provide the required information to create a new statsclient",
     "please-request-a-new-reset-mail": "Please request a new reset mail...",
     "please-wait-a-moment-your-login-is-still-being-processed": "Please wait a moment, your login is still being processed",
+    "prefix": "Prefix",
     "privacy": "Privacy",
     "privacy-loading": "Privacy loading...",
     "profile": "Profile",
@@ -373,6 +382,10 @@
     "sponsoring-quittungs-liste_herunterladen": "Download donor receipt list",
     "sponsorings": "Sponsorings",
     "stats-are-being-loaded": "stats are being loaded...",
+    "statsclient-deleted": "Deleted statsclient",
+    "statsclient-is-being-added": "Statsclient is being added...",
+    "statsclients": "Statsclients (aka Beamershow)",
+    "statsclients-are-being-loaded": "Loading statsclients",
     "status": "Status",
     "stuff-that-could-harm-your-profile": "Stuff that could harm your profile",
     "successful-password-reset": "Successful password reset!",
@@ -388,6 +401,7 @@
     "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...",
     "the-scans-distance-must-be-greater-than-0m": "The scan's distance must be greater than 0m",
     "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!",
+    "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!",
     "there-are-no-cards-yet": "There are no cards yet.",
     "there-are-no-contacts-added-yet": "There are no contacts added yet.",
     "there-are-no-donations-yet": "There are no donations yet",
@@ -454,6 +468,7 @@
     "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.",

vite.config.js

@@ -20,14 +20,15 @@ export default defineConfig(({ command, mode }) => {
 		build: {
 			polyfillDynamicImport: false,
 			cssCodeSplit: false,
-			minify: isProduction
+			minify: isProduction,
+			target: ["es2020", "esnext", "edge88", "chrome87", "safari14"]
 		},
 		plugins: [
 			svelte({
 				//@ts-ignore
 				hot: !isProduction,
 				emitCss: true,
-				extensions: [ '.md', '.svx', '.svelte' ],
+				extensions: ['.md', '.svx', '.svelte'],
 				preprocess: [
 					//
 				]