🚀RELEASE v1.1.0

Reviewed-on: #176

CHANGELOG.md

@@ -2,8 +2,72 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [1.1.0](https://git.odit.services/lfk/frontend/compare/1.0.0...1.1.0)
+
+- feat(dashboar): Added total donors to overview [`e0b6148`](https://git.odit.services/lfk/frontend/commit/e0b61486b089aa1e611ef3569b1521fc331ec0e4)
+- feat(dashboard): Updated stats icons [`4fcb26c`](https://git.odit.services/lfk/frontend/commit/4fcb26cf9371e27e5d7e474b3558ef354e9114c0)
+- feat(dashboard): Added average sponsoring [`269def2`](https://git.odit.services/lfk/frontend/commit/269def20d114ededaba3153bbd50ec2ddd70e1c6)
+- feat(dashboard): Added total donations [`7b2b598`](https://git.odit.services/lfk/frontend/commit/7b2b59858839b98370af6fb1e6028ba0a1639186)
+- feat(dashboard): Added average distance [`b8de9e0`](https://git.odit.services/lfk/frontend/commit/b8de9e0e427b3a8b56e6354ad7168ae12c7cce85)
+- Lockfile [`3f86f74`](https://git.odit.services/lfk/frontend/commit/3f86f7412ffc4bc27328ad1f7d3c3118546e7e29)
+- Bumped client [`6454d96`](https://git.odit.services/lfk/frontend/commit/6454d960de3f9f5ea86679f157b3b7e7cffde74d)
+- new license file version [CI SKIP] [`2a64094`](https://git.odit.services/lfk/frontend/commit/2a640940062765a470387103a72ed14a2411d97b)
+
+### [1.0.0](https://git.odit.services/lfk/frontend/compare/0.19.0...1.0.0)
+
+> 19 April 2023
+
+- 🚀RELEASE v1.0.0 [`8da7578`](https://git.odit.services/lfk/frontend/commit/8da7578a0a46a3e97d8c870e29399f6e8821c9fa)
+- Merge pull request 'feature/175-request_pagination' (#176) from feature/175-request_pagination into dev [`e9ce964`](https://git.odit.services/lfk/frontend/commit/e9ce9644ff03f981cec6e9ad56aa5fdf0ff71ef4)
+- Donation paginated loading [`ccf8656`](https://git.odit.services/lfk/frontend/commit/ccf865687b34016931a702c0a9b98a0a18e2b03a)
+- Paginated scan loading [`cac34db`](https://git.odit.services/lfk/frontend/commit/cac34db1fd3bf5dc7c7be64b3a76ca4c8c77938d)
+- Implemented Async loading of cards via pagination (500 cards per request) [`c33dfcf`](https://git.odit.services/lfk/frontend/commit/c33dfcfddddfed0902f3fa9b1d8a1d3e1560262f)
+- Paginated runner loading (1000 per page) [`faf3893`](https://git.odit.services/lfk/frontend/commit/faf3893180bb735bea6f1ea58c896686b89949fe)
+- Allways set loaded to true [`52439aa`](https://git.odit.services/lfk/frontend/commit/52439aa5bc8cfb1d78d5dfce55b1a0df640ad8f5)
+- Bumped lfk client [`019e14a`](https://git.odit.services/lfk/frontend/commit/019e14ab1f99906f13d36c7148d0f4b7894072f2)
+- new license file version [CI SKIP] [`a6ce04c`](https://git.odit.services/lfk/frontend/commit/a6ce04c90386f16abf235cc7b2f95aeea5011c7d)
+
+#### [0.19.0](https://git.odit.services/lfk/frontend/compare/0.18.4...0.19.0)
+
+> 17 April 2023
+
+- 🚀RELEASE v0.19.0 [`94a64ca`](https://git.odit.services/lfk/frontend/commit/94a64ca69078c7fe2935eeb5f955fab95a79cb85)
+- Merge pull request 'feature/173-scanstation_configcodes' (#174) from feature/173-scanstation_configcodes into dev [`165c154`](https://git.odit.services/lfk/frontend/commit/165c1542338c58f2abf42fef2e7b84b40d1e2d9c)
+- I18n [`e60c09e`](https://git.odit.services/lfk/frontend/commit/e60c09e19c9cc20338906e84f4db4e009d926360)
+- Implemented config code generation [`4b63427`](https://git.odit.services/lfk/frontend/commit/4b6342727ee0ea38597750d8c99edc301f1ccc2d)
+- Styling [`4834d14`](https://git.odit.services/lfk/frontend/commit/4834d1484c3fb6ecd4a1b56aa9fbb8125c641a62)
+- Adjusted size on smaller devices [`318547d`](https://git.odit.services/lfk/frontend/commit/318547db46045e41de64d5688368e85cd6fb8035)
+- Lockfile [`947d01c`](https://git.odit.services/lfk/frontend/commit/947d01cf7fc7fe2ee88c56e017b0d663f1f3b4f9)
+- Barcode placeholder [`cb5fa52`](https://git.odit.services/lfk/frontend/commit/cb5fa52cd9a97490b50fb0c02c26615b49650c08)
+- Added bwip-js for barcode generation [`3563394`](https://git.odit.services/lfk/frontend/commit/3563394fb33d661890327e2ae08c400830b37844)
+
+#### [0.18.4](https://git.odit.services/lfk/frontend/compare/0.18.3...0.18.4)
+
+> 15 April 2023
+
+- 🚀RELEASE v0.18.4 [`269d7a7`](https://git.odit.services/lfk/frontend/commit/269d7a7defdde059ef2bb5103262cf734e9babe9)
+- Hide address2 in orgs by default [`e95f233`](https://git.odit.services/lfk/frontend/commit/e95f2333b0b958ed00c0e097b43aac2e70ad0d38)
+
+#### [0.18.3](https://git.odit.services/lfk/frontend/compare/0.18.2...0.18.3)
+
+> 15 April 2023
+
+- 🚀RELEASE v0.18.3 [`950217e`](https://git.odit.services/lfk/frontend/commit/950217e0a350f9999b879475edf41f2f11c48179)
+- Dont show adress 2 in runner overview [`5e65fb3`](https://git.odit.services/lfk/frontend/commit/5e65fb33013c3dad38e7ad6740b017ae206f278f)
+
+#### [0.18.2](https://git.odit.services/lfk/frontend/compare/0.18.1...0.18.2)
+
+> 15 April 2023
+
+- 🚀RELEASE v0.18.2 [`2a294cd`](https://git.odit.services/lfk/frontend/commit/2a294cde040044bbebfb9c8b34b6c91b27772741)
+- Added timestamps to scanoverview [`cffbd17`](https://git.odit.services/lfk/frontend/commit/cffbd17dc77054048cc9b14891f960f9a3fd18cb)
+- Push in releaseit [`e95420d`](https://git.odit.services/lfk/frontend/commit/e95420d79c3227c0ca0cf0c0b599970c2b7d690e)
+
 #### [0.18.1](https://git.odit.services/lfk/frontend/compare/0.18.0...0.18.1)
 
+> 15 April 2023
+
+- 🚀RELEASE v0.18.1 [`00de8c3`](https://git.odit.services/lfk/frontend/commit/00de8c3d75e90cd4614f42111f5f45bedde64130)
 - Missing scanstation translations [`30e3396`](https://git.odit.services/lfk/frontend/commit/30e33968978bf33cedb31bcbf63fac273e1664f5)
 - fix: button onclick a11y [`9fe53b0`](https://git.odit.services/lfk/frontend/commit/9fe53b0b9c71e8a6b4aa3f317327ffe729df0834)
 - fix(ConfirmStatsClientDeletion): ScanStationService -> StatsClientService [`5291e04`](https://git.odit.services/lfk/frontend/commit/5291e049a1d2e880fbe277095da91b70d4812c3f)

index.html

@@ -13,7 +13,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.18.1-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-1.1.0-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.18.1",
+	"version": "1.1.0",
 	"type": "module",
 	"scripts": {
 		"i18n-order": "node order.js",
@@ -26,7 +26,7 @@
 			"commit": true,
 			"requireCleanWorkingDir": false,
 			"commitMessage": "🚀RELEASE v${version}",
-			"push": false,
+			"push": true,
 			"tag": true,
 			"tagName": null,
 			"tagAnnotation": "v${version}"
@@ -39,9 +39,10 @@
 		}
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "0.14.3",
+		"@odit/lfk-client-js": "1.1.0",
 		"@paralleldrive/cuid2": "^2.2.0",
 		"@tanstack/svelte-table": "^8.8.5",
+		"bwip-js": "^3.4.0",
 		"check-password-strength": "2.0.7",
 		"csvtojson": "2.0.10",
 		"gridjs": "3.4.0",

pnpm-lock.yaml

@@ -2,14 +2,17 @@ lockfileVersion: '6.0'
 
 dependencies:
   '@odit/lfk-client-js':
-    specifier: 0.14.3
+    specifier: 1.1.0
-    version: 0.14.3
+    version: 1.1.0
   '@paralleldrive/cuid2':
     specifier: ^2.2.0
     version: 2.2.0
   '@tanstack/svelte-table':
     specifier: ^8.8.5
     version: 8.8.5(svelte@3.58.0)
+  bwip-js:
+    specifier: ^3.4.0
+    version: 3.4.0
   check-password-strength:
     specifier: 2.0.7
     version: 2.0.7
@@ -507,8 +510,8 @@ packages:
       '@octokit/openapi-types': 16.0.0
     dev: true
 
-  /@odit/lfk-client-js@0.14.3:
+  /@odit/lfk-client-js@1.1.0:
-    resolution: {integrity: sha512-oOZ9jjzqcbMA0Sfwxn4q9+8hHckMU2IhAn7v0OAS54zcnquYQANnY4RMEoNIyXd0oEe1z8QewBjyBvFEDg6BmA==}
+    resolution: {integrity: sha512-yhjsi7YMzL9/fJ7o06yszzw15iZhao3VmX0G9oqZWFwYJd1M2td3Lvm76mXNzTVlbdG6W0W3+eEjcalBdo51Pg==}
     dev: false
 
   /@odit/license-exporter@0.0.12:
@@ -847,6 +850,11 @@ packages:
       run-applescript: 5.0.0
     dev: true
 
+  /bwip-js@3.4.0:
+    resolution: {integrity: sha512-Gx9LIBhmEFmNH4FJsS+Rs+bG5hUcs+OBemEEQ2ZTLz8tue0PA/lM692Gf2yuYJ2yUpLGtK9tAexs85tXBPG/ww==}
+    hasBin: true
+    dev: false
+
   /bytes@3.1.2:
     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
     engines: {node: '>= 0.8'}

src/components/cards/CardsOverview.svelte

@@ -32,7 +32,7 @@
   export let original_data = {};
   export let current_cards = [];
   export const addCards = (cards) => {
-    console.log(cards)
+    console.log(cards);
     current_cards = current_cards.concat(...cards);
     options.update((options) => ({
       ...options,
@@ -155,15 +155,27 @@
     }).showToast();
   }
 
-  onMount(() => {
+  onMount(async () => {
-    RunnerCardService.runnerCardControllerGetAll().then((val) => {
+    let page = 0;
-      current_cards = val;
+    while (page >= 0) {
+      const cards = await RunnerCardService.runnerCardControllerGetAll(
+        page,
+        500
+      );
+      if (cards.length == 0) {
+        page = -2;
+      }
+
+      current_cards = current_cards.concat(...cards);
       options.update((options) => ({
         ...options,
         data: current_cards,
       }));
+
       dataLoaded = true;
-    });
+      page++;
+    }
+    console.log("All cards loaded");
   });
 </script>
 
@@ -229,7 +241,7 @@
               ...options,
               data: current_cards,
             }));
-            $table.resetRowSelection()
+            $table.resetRowSelection();
           }}
         >
           {$_("delete-cards")}
@@ -249,7 +261,10 @@
           </svg>
         </button>
       {/if}
-      <GenerateRunnerCards cards_show={selected.length>0} bind:generate_cards={selectedCards} />
+      <GenerateRunnerCards
+        cards_show={selected.length > 0}
+        bind:generate_cards={selectedCards}
+      />
     </div>
     <div class="overflow-x-auto">
       <table class="w-full">

src/components/dashboard/MainDashContent.svelte

@@ -35,7 +35,9 @@
       <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">
+    <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}
@@ -59,18 +61,67 @@
         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"
+          height="24"
           xmlns="http://www.w3.org/2000/svg"
-          ><polyline points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg
+          viewBox="0 0 24 24"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            fill="currentColor"
+            d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
+          /></svg
+        >
+      </StatCard>
+      <StatCard
+        title={$_("total-donors")}
+        value={stats.total_donors}
+        href="/donors/"
+      >
+        <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="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
+          /></svg
+        >
+      </StatCard>
+      <StatCard
+        title={$_("total-donation-count")}
+        value={stats.total_donations}
+        href="/donations/"
+      >
+        <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="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+          /></svg
+        >
+      </StatCard>
+      <StatCard
+        title={$_("average-donation")}
+        value={`${(stats.average_donation / 100).toFixed(2)} €`}
+        href="/donations/"
+      >
+        <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="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+          /></svg
         >
       </StatCard>
       <StatCard
@@ -105,6 +156,22 @@
           /></svg
         >
       </StatCard>
+      <StatCard
+        title={$_("average-distance")}
+        value={`${(stats.average_distance / 1000).toFixed(2)} 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}

src/components/donations/DonationsOverview.svelte

@@ -5,18 +5,16 @@
   import Toastify from "toastify-js";
   import DonationsEmptyState from "./DonationsEmptyState.svelte";
   import AddDonationPaymentModal from "./AddDonationPaymentModal.svelte";
+  import { onMount } from "svelte";
   $: searchvalue = "";
   $: active_deletes = [];
+  $: dataLoaded = false;
   export let current_donations = [];
   export let payment_modal_open = false;
   export let editable = {};
   export let original_data = {};
   export let paid_amount_input = 0;
-  const donations_promise = DonationService.donationControllerGetAll().then(
+
-    (val) => {
-      current_donations = val;
-    }
-  );
   function should_display_based_on_id(id) {
     if (searchvalue.toString().slice(-1) === "*") {
       return id.toString().startsWith(searchvalue.replace("*", ""));
@@ -26,210 +24,250 @@
   function open_payment_modal(donation) {
     editable = Object.assign({}, donation);
     original_data = Object.assign({}, donation);
-    paid_amount_input = (donation.paidAmount/100).toFixed(2);
+    paid_amount_input = (donation.paidAmount / 100).toFixed(2);
     payment_modal_open = true;
   }
+
+  onMount(async () => {
+    let page = 0;
+    while (page >= 0) {
+      const donations = await DonationService.donationControllerGetAll(
+        page,
+        500
+      );
+      if (donations.length == 0) {
+        page = -2;
+      }
+
+      current_donations = current_donations.concat(...donations);
+
+      dataLoaded = true;
+      page++;
+    }
+    console.log("All donations loaded");
+  });
 </script>
 
-<AddDonationPaymentModal bind:current_donations bind:original_data bind:editable bind:paid_amount_input bind:payment_modal_open />
+<AddDonationPaymentModal
-{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
+  bind:current_donations
-  {#await donations_promise}
+  bind:original_data
+  bind:editable
+  bind:paid_amount_input
+  bind:payment_modal_open
+/>
+{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
+  {#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">donations are being loaded</p>
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
-  {:then}
+  {:else if current_donations.length === 0}
-    {#if current_donations.length === 0}
+    <DonationsEmptyState />
-      <DonationsEmptyState />
+  {:else}
-    {:else}
+    <input
-      <input
+      type="search"
-        type="search"
+      bind:value={searchvalue}
-        bind:value={searchvalue}
+      placeholder={$_("datatable.search")}
-        placeholder={$_('datatable.search')}
+      aria-label={$_("datatable.search")}
-        aria-label={$_('datatable.search')}
+      class="mb-4"
-        class="mb-4" />
+    />
-      <div
+    <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-        <table class="divide-y divide-gray-200 w-full">
+    >
-          <thead class="bg-gray-50">
+      <table class="divide-y divide-gray-200 w-full">
-            <tr>
+        <thead class="bg-gray-50">
-              <th
+          <tr>
-                scope="col"
+            <th
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              scope="col"
-                {$_('donor')}
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              </th>
+            >
-              <th
+              {$_("donor")}
-                scope="col"
+            </th>
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th
-                {$_('runner')}
+              scope="col"
-              </th>
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              <th
+            >
-                scope="col"
+              {$_("runner")}
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            </th>
-                {$_('amount-per-kilometer')}
+            <th
-              </th>
+              scope="col"
-              <th
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                scope="col"
+            >
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              {$_("amount-per-kilometer")}
-                {$_('donation-amount')}
+            </th>
-              </th>
+            <th
-              <th
+              scope="col"
-                scope="col"
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            >
-                {$_('paid-amount')}
+              {$_("donation-amount")}
-              </th>
+            </th>
-              <th
+            <th
-                scope="col"
+              scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                {$_('status')}
+            >
-              </th>
+              {$_("paid-amount")}
-              <th scope="col" class="relative px-6 py-3">
+            </th>
-                <span class="sr-only">{$_('action')}</span>
+            <th
-              </th>
+              scope="col"
-            </tr>
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-          </thead>
+            >
-          <tbody class="divide-y divide-gray-200">
+              {$_("status")}
-            {#each current_donations as donation}
+            </th>
-              {#if donation.donor.firstname
+            <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_donations as donation}
+            {#if donation.donor.firstname
+              .toLowerCase()
+              .includes(searchvalue.toLowerCase()) || donation.donor.lastname
                 .toLowerCase()
-                .includes(
+                .includes(searchvalue.toLowerCase()) || donation.runner?.firstname
-                  searchvalue.toLowerCase()
+                .toLowerCase()
-                ) ||  donation.donor.lastname
+                .includes(searchvalue.toLowerCase()) || donation.runner?.lastname
-                  .toLowerCase()
+                .toLowerCase()
-                  .includes(
+                .includes(searchvalue.toLowerCase()) || should_display_based_on_id(donation.id)}
-                    searchvalue.toLowerCase()
+              <tr data-rowid="donation_{donation.id}">
-                  ) || donation.runner?.firstname
+                <td class="px-6 py-4 whitespace-nowrap">
-                  .toLowerCase()
+                  <div class="flex items-center">
-                  .includes(
+                    <a
-                    searchvalue.toLowerCase()
+                      href="../donors/{donation.donor.id}"
-                  ) || donation.runner?.lastname
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                  .toLowerCase()
+                      >{donation.donor.firstname}
-                  .includes(
+                      {donation.donor.middlename || ""}
-                    searchvalue.toLowerCase()
+                      {donation.donor.lastname}</a
-                  ) || should_display_based_on_id(donation.id)}
+                    >
-                <tr data-rowid="donation_{donation.id}">
+                  </div>
-                  <td class="px-6 py-4 whitespace-nowrap">
+                </td>
-                    <div class="flex items-center">
+                <td class="px-6 py-4 whitespace-nowrap">
+                  {#if donation.runner}
+                    <div class="text-sm font-medium text-gray-900">
                       <a
-                        href="../donors/{donation.donor.id}"
+                        href="../runners/{donation.runner.id}"
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.donor.firstname}
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                        {donation.donor.middlename || ''}
+                        >{donation.runner.firstname}
-                        {donation.donor.lastname}</a>
+                        {donation.runner.middlename || ""}
+                        {donation.runner.lastname}</a
+                      >
                     </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#if donation.runner}
-                      <div class="text-sm font-medium text-gray-900">
-                        <a
-                          href="../runners/{donation.runner.id}"
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.runner.firstname}
-                          {donation.runner.middlename || ''}
-                          {donation.runner.lastname}</a>
-                      </div>
-                    {:else}
-                      <div class="text-sm font-medium text-gray-900">
-                        {$_('fixed-donation')}
-                      </div>
-                    {/if}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#if donation.amountPerDistance}
-                      <div class="text-sm font-medium text-gray-900">
-                        {(donation.amountPerDistance / 100)
-                          .toFixed(2)
-                          .toLocaleString('de-DE', { valute: 'EUR' })}€
-                      </div>
-                    {:else}
-                      <div class="text-sm font-medium text-gray-900">
-                        {$_('fixed-donation')}
-                      </div>
-                    {/if}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="text-sm font-medium text-gray-900">
-                      {(donation.amount / 100)
-                        .toFixed(2)
-                        .toLocaleString('de-DE', { valute: 'EUR' })}€
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="text-sm font-medium text-gray-900">
-                      {(donation.paidAmount / 100)
-                        .toFixed(2)
-                        .toLocaleString('de-DE', { valute: 'EUR' })}€
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#if donation.status =="PAID"}
-                      <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('paid')}</span>
-                    {:else}
-                      <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('open')}</span>
-                    {/if}
-                  </td>
-                  {#if active_deletes[donation.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {
-                          active_deletes[donation.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                      <button
-                        on:click={() => {
-                          DonationService.donationControllerRemove(donation.id, false).then(
-                            (resp) => {
-                              current_donations = current_donations.filter(
-                                (obj) => obj.id !== donation.id
-                              );
-                              Toastify({
-                                text: $_('donation-deleted'),
-                                duration: 500,
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            }
-                          );
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-                    </td>
                   {:else}
-                    <td
+                    <div class="text-sm font-medium text-gray-900">
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      {$_("fixed-donation")}
-                      <button
+                    </div>
-                        on:click={() => {open_payment_modal(donation);}}
-                        class="text-[#025a21] hover:text-green-900 mr-4">{$_('enter-payment')}</button>
-                      <a
-                        href="./{donation.id}"
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
-                        <button
-                          on:click={() => {
-                            active_deletes[donation.id] = true;
-                          }}
-                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-                      {/if}
-                    </td>
                   {/if}
-                </tr>
+                </td>
-              {/if}
+                <td class="px-6 py-4 whitespace-nowrap">
-            {/each}
+                  {#if donation.amountPerDistance}
-          </tbody>
+                    <div class="text-sm font-medium text-gray-900">
-        </table>
+                      {(donation.amountPerDistance / 100)
-      </div>
+                        .toFixed(2)
-    {/if}
+                        .toLocaleString("de-DE", { valute: "EUR" })}€
-  {:catch error}
+                    </div>
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+                  {:else}
-      <span class="inline-block align-middle mr-8">
+                    <div class="text-sm font-medium text-gray-900">
-        <b class="capitalize">{$_('general_promise_error')}</b>
+                      {$_("fixed-donation")}
-        {error}
+                    </div>
-      </span>
+                  {/if}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm font-medium text-gray-900">
+                    {(donation.amount / 100)
+                      .toFixed(2)
+                      .toLocaleString("de-DE", { valute: "EUR" })}€
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm font-medium text-gray-900">
+                    {(donation.paidAmount / 100)
+                      .toFixed(2)
+                      .toLocaleString("de-DE", { valute: "EUR" })}€
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  {#if donation.status == "PAID"}
+                    <span
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+                      >{$_("paid")}</span
+                    >
+                  {:else}
+                    <span
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+                      >{$_("open")}</span
+                    >
+                  {/if}
+                </td>
+                {#if active_deletes[donation.id] === true}
+                  <td
+                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                  >
+                    <button
+                      on:click={() => {
+                        active_deletes[donation.id] = false;
+                      }}
+                      tabindex="0"
+                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                      >{$_("cancel-delete")}</button
+                    >
+                    <button
+                      on:click={() => {
+                        DonationService.donationControllerRemove(
+                          donation.id,
+                          false
+                        ).then((resp) => {
+                          current_donations = current_donations.filter(
+                            (obj) => obj.id !== donation.id
+                          );
+                          Toastify({
+                            text: $_("donation-deleted"),
+                            duration: 500,
+                            backgroundColor:
+                              "linear-gradient(to right, #00b09b, #96c93d)",
+                          }).showToast();
+                        });
+                      }}
+                      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"
+                  >
+                    <button
+                      on:click={() => {
+                        open_payment_modal(donation);
+                      }}
+                      class="text-[#025a21] hover:text-green-900 mr-4"
+                      >{$_("enter-payment")}</button
+                    >
+                    <a
+                      href="./{donation.id}"
+                      class="text-indigo-600 hover:text-indigo-900"
+                      >{$_("details")}</a
+                    >
+                    {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
+                      <button
+                        on:click={() => {
+                          active_deletes[donation.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>
-  {/await}
+  {/if}
 {/if}

src/components/donors/DonorsOverview.svelte

@@ -119,7 +119,7 @@
                     {/if}
                     {#if donor.address.address1 !== null}
                       {donor.address.address1}<br />
-                      {donor.address.address2 || ''}<br />
+                      <!-- {donor.address.address2 || ''}<br /> -->
                       {donor.address.postalcode}
                       {donor.address.city}
                       {donor.address.country}

src/components/orgs/OrgOverview.svelte

@@ -132,7 +132,7 @@
                         <div class="text-sm font-medium text-gray-900">
                           {#if o.address.address1 !== null}
                             {o.address.address1}<br />
-                            {o.address.address2 || ''}<br />
+                            <!-- {o.address.address2 || ''}<br /> -->
                             {o.address.postalcode}
                             {o.address.city}
                             {o.address.country}

src/components/runners/RunnersOverview.svelte

@@ -50,7 +50,6 @@
     }));
   };
 
-
   //Section table
   const columns = [
     {
@@ -157,16 +156,7 @@
     }).showToast();
   }
 
-  onMount(() => {
+  onMount(async () => {
-    RunnerService.runnerControllerGetAll().then((val) => {
-      current_runners = val;
-      dataLoaded = true;
-
-      options.update((options) => ({
-        ...options,
-        data: current_runners,
-      }));
-    });
     RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
       teams = val;
     });
@@ -175,6 +165,24 @@
         orgs = val;
       }
     );
+
+    let page = 0;
+    while (page >= 0) {
+      const runners = await RunnerService.runnerControllerGetAll(page, 1000);
+      if (runners.length == 0) {
+        page = -2;
+      }
+
+      current_runners = current_runners.concat(...runners);
+      options.update((options) => ({
+        ...options,
+        data: current_runners,
+      }));
+
+      dataLoaded = true;
+      page++;
+    }
+    console.log("All runners loaded");
   });
 </script>
 

src/components/scans/ScansOverview.svelte

@@ -30,6 +30,7 @@
     $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
 
   $: active_delete = undefined;
+  $: dataLoaded = false;
   export let current_scans = [];
   export const addScans = (scans) => {
     current_scans = current_scans.concat(...scans);
@@ -39,15 +40,6 @@
     }));
   };
 
-  const scans_promise = ScanService.scanControllerGetAll().then((val) => {
-    current_scans = val;
-    // handler.setRows(val);
-    current_scans = val;
-    options.update((options) => ({
-      ...options,
-      data: current_scans,
-    }));
-  });
   let allTracks = [];
   TrackService.trackControllerGetAll().then((val) => {
     allTracks = val;
@@ -95,6 +87,14 @@
       },
       enableColumnFilter: false,
     },
+    {
+      accessorKey: "timestamp",
+      header: () => $_("timestamp"),
+      cell: (info) => {
+        return new Date(parseInt(info.getValue()) * 1000).toLocaleString();
+      },
+      enableColumnFilter: false,
+    },
     {
       accessorKey: "distance",
       header: () => $_("distance"),
@@ -175,6 +175,26 @@
       backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
     }).showToast();
   }
+
+  onMount(async () => {
+    let page = 0;
+    while (page >= 0) {
+      const scans = await ScanService.scanControllerGetAll(page, 500);
+      if (scans.length == 0) {
+        page = -2;
+      }
+
+      current_scans = current_scans.concat(...scans);
+      options.update((options) => ({
+        ...options,
+        data: current_scans,
+      }));
+
+      dataLoaded = true;
+      page++;
+    }
+    console.log("All scans loaded");
+  });
 </script>
 
 <DeleteScanModal
@@ -185,7 +205,7 @@
   }}
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
-  {#await scans_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"
@@ -193,105 +213,96 @@
       <p class="font-bold">{$_("scans-are-being-loaded")}</p>
       <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
-  {:then}
+  {:else if current_scans.length === 0}
-    {#if current_scans.length === 0}
+    <ScansEmptyState />
-      <ScansEmptyState />
+  {:else}
-    {:else}
+    {#if selected.length > 0}
-      {#if selected.length > 0}
+      <button
-        <button
+        type="button"
-          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 inline-flex"
-          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+        id="options-menu"
-          id="options-menu"
+        on:click={async () => {
-          on:click={async () => {
+          const prom = [];
-            const prom = [];
+          for (const scan of selectedScans) {
-            for (const scan of selectedScans) {
+            prom.push(ScanService.scanControllerRemove(scan.id, true));
-              prom.push(ScanService.scanControllerRemove(scan.id, true));
+          }
-            }
+          await Promise.all(prom);
-            await Promise.all(prom);
+          for (const scan of selectedScans) {
-            for (const scan of selectedScans) {
+            current_scans = current_scans.filter((r) => r.id !== scan.id);
-              current_scans = current_scans.filter((r) => r.id !== scan.id);
+          }
-            }
+          options.update((options) => ({
-            options.update((options) => ({
+            ...options,
-              ...options,
+            data: current_scans,
-              data: current_scans,
+          }));
-            }));
+          $table.resetRowSelection();
-            $table.resetRowSelection();
+          Toastify({
-            Toastify({
+            text: $_("scan-deleted"),
-              text: $_("scan-deleted"),
+            duration: 3500,
-              duration: 3500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
-            }).showToast();
+        }}
-          }}
+      >
+        {$_("delete-scans")}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-5 h-5"
         >
-          {$_("delete-scans")}
+          <path
-          <svg
+            stroke-linecap="round"
-            xmlns="http://www.w3.org/2000/svg"
+            stroke-linejoin="round"
-            fill="none"
+            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-            viewBox="0 0 24 24"
+          />
-            stroke-width="1.5"
+        </svg>
-            stroke="currentColor"
+      </button>
-            class="w-5 h-5"
+    {/if}
-          >
+    <div class="overflow-x-auto">
-            <path
+      <table class="w-full">
-              stroke-linecap="round"
+        <thead>
-              stroke-linejoin="round"
+          {#each $table.getHeaderGroups() as headerGroup}
-              d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+            <tr class="select-none">
-            />
+              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
-          </svg>
+                <InputElement
-        </button>
+                  type="checkbox"
-      {/if}
+                  checked={$table.getIsAllRowsSelected()}
-      <div class="overflow-x-auto">
+                  indeterminate={$table.getIsSomeRowsSelected()}
-        <table class="w-full">
+                  on:change={() => $table.toggleAllRowsSelected()}
-          <thead>
+                />
-            {#each $table.getHeaderGroups() as headerGroup}
+              </th>
-              <tr class="select-none">
+              {#each headerGroup.headers as header}
-                <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
+                <TableHeader {header} />
-                  <InputElement
+              {/each}
-                    type="checkbox"
+            </tr>
-                    checked={$table.getIsAllRowsSelected()}
+          {/each}
-                    indeterminate={$table.getIsSomeRowsSelected()}
+        </thead>
-                    on:change={() => $table.toggleAllRowsSelected()}
+        <tbody>
-                  />
+          {#each $table.getRowModel().rows as row}
-                </th>
+            <tr>
-                {#each headerGroup.headers as header}
+              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
-                  <TableHeader {header} />
+                <InputElement
-                {/each}
+                  type="checkbox"
-              </tr>
+                  checked={row.getIsSelected()}
-            {/each}
+                  on:change={() => row.toggleSelected()}
-          </thead>
+                />
-          <tbody>
+              </td>
-            {#each $table.getRowModel().rows as row}
+              {#each row.getVisibleCells() as cell}
-              <tr>
+                <td>
-                <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+                  <svelte:component
-                  <InputElement
+                    this={flexRender(
-                    type="checkbox"
+                      cell.column.columnDef.cell,
-                    checked={row.getIsSelected()}
+                      cell.getContext()
-                    on:change={() => row.toggleSelected()}
+                    )}
                   />
                 </td>
-                {#each row.getVisibleCells() as cell}
+              {/each}
-                  <td>
+            </tr>
-                    <svelte:component
+          {/each}
-                      this={flexRender(
+        </tbody>
-                        cell.column.columnDef.cell,
+      </table>
-                        cell.getContext()
-                      )}
-                    />
-                  </td>
-                {/each}
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-      <TableBottom {table} {selected} />
-    {/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}
+    <TableBottom {table} {selected} />
+  {/if}
 {/if}

src/components/scanstations/CopyScanStationTokenModal.svelte

@@ -1,14 +1,18 @@
 <script>
   import { _ } from "svelte-i18n";
-
   import Toastify from "toastify-js";
   import { tick, createEventDispatcher } from "svelte";
+  import bwipjs from "bwip-js";
+
   export let copy_modal_open;
   export let new_station;
   const dispatch = createEventDispatcher();
   let valueCopy = null;
   let areaDom;
   let copied = false;
+  $: is_qrcode = false;
+  $: barcode = textToBase64Barcode(new_station.key, is_qrcode);
+
   function close() {
     copy_modal_open = false;
   }
@@ -36,10 +40,30 @@
           "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;
   }
+
+  function textToBase64Barcode(text, is_qrcode) {
+    const canvas = document.createElement("canvas");
+    let bcid = "code128";
+    if (is_qrcode) {
+      bcid = "qrcode";
+    }
+    let codeconfig = {
+      bcid,
+      text: `${text}`,
+      scale: 4,
+      includetext: true,
+      textxalign: "center",
+      backgroundcolor: "ffffff",
+    };
+    if (bcid == "code128") {
+      codeconfig.height = 10;
+    }
+    bwipjs.toCanvas(canvas, codeconfig);
+    return canvas.toDataURL("image/png");
+  }
 </script>
 
 {#if copy_modal_open}
@@ -131,6 +155,44 @@
               </div>
             </div>
           </div>
+          <div class="mx-auto text-center items-center">
+            <h2 class="text-lg leading-6 font-medium text-gray-900">
+              {$_("config-codes")}
+            </h2>
+            <span class="flex items-center text-center">
+              <p class="text-md text-gray-900 mr-3">Format:</p>
+              <label for="codeswitch" class="text-md text-gray-900 mr-3"
+                >Code128</label
+              >
+              <input
+                id="codeswitch"
+                type="checkbox"
+                bind:checked={is_qrcode}
+                class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200"
+              />
+              <label for="codeswitch" class="text-md text-gray-900 ml-3"
+                >QR-Code</label
+              >
+            </span>
+            <h3 class="leading-6 font-medium text-gray-900">
+              {$_("api-endpoint")}
+            </h3>
+            <img
+              class:w-[50%]={is_qrcode}
+              class:w-full={!is_qrcode}
+              class="md:w-auto mb-2 mx-auto"
+              alt="Registrierungscode"
+              src={textToBase64Barcode(config.baseurl, is_qrcode)}
+            />
+            <h3 class="leading-6 font-medium text-gray-900">{$_("token")}</h3>
+            <img
+              class:w-[50%]={is_qrcode}
+              class:w-full={!is_qrcode}
+              class="md:w-auto mb-2 mx-auto"
+              alt="Registrierungscode"
+              src={barcode}
+            />
+          </div>
         </div>
         <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
           <button

src/locales/de.json

@@ -39,10 +39,13 @@
     "amount": "Anzahl",
     "amount-per-kilometer": "Betrag pro Kilometer",
     "apartment-suite-etc": "Apartment, Wohnung, etc.",
+    "api-endpoint": "API-Endpunkt",
     "application_name": "Lauf für Kaya! - Admin",
     "applying-changes": "Änderungen anwenden",
     "attention": "Achtung!",
     "author": "Autor:in",
+    "average-distance": "Durchschnittliche Strecke/Läufer:in",
+    "average-donation": "Durchschnittliches Sponsoring",
     "bitte-bestaetige-diese-laeufer-fuer-den-import": "Bitte die Läufer:innen für den Import bestätigen.",
     "by": "von",
     "cancel": "Abbrechen",
@@ -68,6 +71,7 @@
     "click-to-copy-token-to-clipboard": "Klicke auf den Token, um ihn in deine Zwischenablage zu kopieren",
     "close": "Schließen",
     "code": "Code",
+    "config-codes": "Konfigurations-Codes",
     "configure-the-tracks-and-minimum-lap-times": "Bearbeite die Tracks und ihre minimale Rundenzeit",
     "confirm": "Bestätigen",
     "confirm-delete": "Löschung Bestätigen",
@@ -428,10 +432,13 @@
     "this-card-is": "Diese Karte ist",
     "this-might-take-a-moment": "Das könnte einen kleinen Moment dauern",
     "this-scanstation-is": "Diese Station ist",
+    "timestamp": "Timestamp",
     "token": "Token",
     "total-distance": "gelaufene Strecke",
     "total-donation-amount": "Gesamtbetrag",
+    "total-donation-count": "Gesamte Sponsorings",
     "total-donations": "Spendensumme",
+    "total-donors": "gesamte Sponsor:innen",
     "total-paid-amount": "Gezahlter Gesamtbetrag",
     "total-scans": "gesamte Scans",
     "total_donation_amount_in_eur": "Gesamtbetrag in €",

src/locales/en.json

@@ -39,10 +39,13 @@
     "amount": "Amount",
     "amount-per-kilometer": "Amount per kilometer",
     "apartment-suite-etc": "Apartment, suite, etc.",
+    "api-endpoint": "API-Endpoint",
     "application_name": "Lauf für Kaya! - Admin",
     "applying-changes": "Applying Changes",
     "attention": "Attention!",
     "author": "Author",
+    "average-distance": "average distance",
+    "average-donation": "average donation",
     "bitte-bestaetige-diese-laeufer-fuer-den-import": "Please confirm these runners for import.",
     "by": "by",
     "cancel": "Cancel",
@@ -68,6 +71,7 @@
     "click-to-copy-token-to-clipboard": "Click to copy the token to your clipboard",
     "close": "Close",
     "code": "Code",
+    "config-codes": "Config codes",
     "configure-the-tracks-and-minimum-lap-times": "configure the tracks & minimum lap times",
     "confirm": "Confirm",
     "confirm-delete": "Confirm Delete",
@@ -428,10 +432,13 @@
     "this-card-is": "This card is",
     "this-might-take-a-moment": "This might take a moment 👀",
     "this-scanstation-is": "This scanstation is",
+    "timestamp": "timestamp",
     "token": "Token",
     "total-distance": "total distance",
     "total-donation-amount": "total donation amount",
+    "total-donation-count": "total donations (count)",
     "total-donations": "total donations",
+    "total-donors": "total donors",
     "total-paid-amount": "Total paid amount",
     "total-scans": "total scans",
     "total_donation_amount_in_eur": "Total donation amount in €",