🚀RELEASE v0.12.2

Merge pull request 'feature/110-virtual_list' (#124 ) from feature/110-virtual_list into dev
Reviewed-on: #124
2021-04-07 20:11:21 +02:00 · 2021-04-07 18:10:02 +00:00 · 2021-04-07 20:09:35 +02:00 · 2021-04-07 18:59:46 +02:00 · 2021-04-07 18:38:52 +02:00 · 2021-04-07 18:19:58 +02:00
16 changed files with 1031 additions and 566 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,15 +2,96 @@

 All notable changes to this project will be documented in this file. Dates are displayed in UTC.

+#### [0.12.2](https://git.odit.services/lfk/frontend/compare/0.12.1...0.12.2)
+
+- Merge pull request 'feature/110-virtual_list' (#124) from feature/110-virtual_list into dev [`e6ed066`](https://git.odit.services/lfk/frontend/commit/e6ed066e3ffabba6519f94d801d21a27819d0492)
+- wip on virtuallist [`6304116`](https://git.odit.services/lfk/frontend/commit/6304116edb7f5e3c7b67c15e0b1740d34c513155)
+- fixed height table [`4cad86c`](https://git.odit.services/lfk/frontend/commit/4cad86cf852468428d77103d052c6974b17c34c3)
+- pre-merge fixes [`37970d2`](https://git.odit.services/lfk/frontend/commit/37970d2be6b6502701914e41e5bfe2c418438480)
+- updated virtual scroll list [`1376788`](https://git.odit.services/lfk/frontend/commit/1376788016e767f006661f8c9e6747781f2dce55)
+
+#### [0.12.1](https://git.odit.services/lfk/frontend/compare/0.12.0...0.12.1)
+
+> 6 April 2021
+
+- 🚀RELEASE v0.12.1 [`834ff8f`](https://git.odit.services/lfk/frontend/commit/834ff8fa63178f36dcacf931c128ba67a3e7bd1b)
+- Merge pull request 'ImportRunnerModal Cancel Button feature/122-import_cancel' (#123) from feature/112-import_cancel into dev [`1f428a5`](https://git.odit.services/lfk/frontend/commit/1f428a535e3ae619cbf8db51d04255aac8dd8614)
+- Added cancel button for the first stage of runner import [`0c40966`](https://git.odit.services/lfk/frontend/commit/0c409669700d3a8096cc04716154b0fdca458fe5)
+- Escape now triggers foll modal close (including reset) instead of just hiding th modal [`9da071f`](https://git.odit.services/lfk/frontend/commit/9da071fe9ba067160334682bf00163e3630fe919)
+
+#### [0.12.0](https://git.odit.services/lfk/frontend/compare/0.11.0...0.12.0)
+
+> 5 April 2021
+
+- Merge pull request 'feature/108_vite_migration' (#118) from feature/108_vite_migration into dev [`#108`](https://git.odit.services/lfk/frontend/issues/108)
+- 🚀RELEASE v0.12.0 [`892a04f`](https://git.odit.services/lfk/frontend/commit/892a04f28930481715eb486b1ef4efeb98a6e999)
+- Fixed package version [`27cc972`](https://git.odit.services/lfk/frontend/commit/27cc9727f1d02d186c3ccadb06e5b4b1b1d6202d)
+- Merge pull request 'Implmented certificate generation feature/119-Certificate_generation' (#120) from feature/119-Certificate_generation into dev [`f0738d4`](https://git.odit.services/lfk/frontend/commit/f0738d451b02e4a298b5f9cb8ab0be16aed10a38)
+- The PFS Prefixes now get translated via i18n [`bfacfec`](https://git.odit.services/lfk/frontend/commit/bfacfec76511cae3015f52698fdcbd80a7a15981)
+- Sorted translations 🌍 [`9e6a8da`](https://git.odit.services/lfk/frontend/commit/9e6a8daf2c394cf17da532382ec7d049a0f89577)
+- added missing/ wrong translations + formatting! [`7c86a5e`](https://git.odit.services/lfk/frontend/commit/7c86a5eeb370a43451d180a09a501066b023b9a0)
+- Added i18n [`17f6f4e`](https://git.odit.services/lfk/frontend/commit/17f6f4e616bf57424ee12ad53b939429c02a0171)
+- Added basic certificate generation component [`af63ce6`](https://git.odit.services/lfk/frontend/commit/af63ce67ae7d8f8a70706c3bd6755197908996ff)
+- basic ViteJS migration [`ae79e9f`](https://git.odit.services/lfk/frontend/commit/ae79e9fea1963e977ef468e8e56f87d68916fadd)
+- Implemented generation for orgs [`2e3ac15`](https://git.odit.services/lfk/frontend/commit/2e3ac154be0bf0776cd00f7d510f41ec676ae690)
+- Implemented generation for teams [`2472640`](https://git.odit.services/lfk/frontend/commit/2472640755e3e41259a44127a875d00517a25842)
+- updated default entrypoint [`95c8fde`](https://git.odit.services/lfk/frontend/commit/95c8fde72fca5cd5a644d51a33dc88e0b59fce92)
+- ⏫📍 version bump + pin [`b065b4f`](https://git.odit.services/lfk/frontend/commit/b065b4ff218d07952fa45989e6e2ee7df13e07c1)
+- 🧹 reorder + fix package [`12433f7`](https://git.odit.services/lfk/frontend/commit/12433f7c236906fe2b29848a0acaa6be1724da56)
+- 🔨 re-added VS Code devcontainer config [`9318709`](https://git.odit.services/lfk/frontend/commit/93187099d32c506329b1437642aae985f2850689)
+- 🐳 new Dockerfiles [`0f32968`](https://git.odit.services/lfk/frontend/commit/0f32968fae8b55a13d387918211983d0e61f85ab)
+- 📃 added readme [`aa24b1d`](https://git.odit.services/lfk/frontend/commit/aa24b1dce5d6d73c8f42fc57f81b692350bf9665)
+- Copy-paste fix [`f47d5e3`](https://git.odit.services/lfk/frontend/commit/f47d5e347d97ee127fa0380620138a9672665cd5)
+- 🔨🔥 alpine based devcontainer with working yarn PnP [`777304f`](https://git.odit.services/lfk/frontend/commit/777304f2593df36f4e89d2ba7680add183ff062f)
+- Copy-paste fix [`7488a8b`](https://git.odit.services/lfk/frontend/commit/7488a8b597a148c309e1b4499d277fed7f3bf9f4)
+- You can now generate certificates from the runner overview [`bb9b779`](https://git.odit.services/lfk/frontend/commit/bb9b779cee909ab85ef52f13be0a917f1c0a9e62)
+- Cleaned up generation strings and added the schem for single runner generations for cards [`9c867e1`](https://git.odit.services/lfk/frontend/commit/9c867e106edd68784e6d19743519c1952a0f0bc7)
+- Changed the basic nameing generation for runenr certificate files [`d65d379`](https://git.odit.services/lfk/frontend/commit/d65d3793de869bcd6733a1bbdac378d0bc1128b3)
+- ⏫ version bumps [`d7fecfb`](https://git.odit.services/lfk/frontend/commit/d7fecfbd0bc01f1cd44dea3c3837e0cc44afab12)
+- Cleaned up generation strings and added the schem for single runner generations for sponsoring contracts [`22b09d1`](https://git.odit.services/lfk/frontend/commit/22b09d16d0acc2883e3448dad95ed0f4ea7c6aeb)
+- Certificate generation from org overview [`3177c6e`](https://git.odit.services/lfk/frontend/commit/3177c6eaa31636ed4546f4797775a0f0a930f5d1)
+- certificate pdf names now include their locale [`304f28a`](https://git.odit.services/lfk/frontend/commit/304f28a3c10bc4745aa5b7c80d7ba0e651540706)
+- Runnercard pdfs now include their locale [`3638d87`](https://git.odit.services/lfk/frontend/commit/3638d87bd2ff83618eefda5af18ba19e38e3c2eb)
+- 🐞 fix await for esNext [`a922776`](https://git.odit.services/lfk/frontend/commit/a9227768de29305b51d10c8a6e4fa1d39b7d998f)
+- Certificate generation from team overview [`18ec100`](https://git.odit.services/lfk/frontend/commit/18ec100c33a1fbab526187e769dbae54d9db0867)
+- Added certificate generation from runner overview and detail [`7b685d6`](https://git.odit.services/lfk/frontend/commit/7b685d6cad97d2f7f48c4b19bfc128e1355b70c4)
+- package cleanup [`6be2ee6`](https://git.odit.services/lfk/frontend/commit/6be2ee626addaf5113b4b4821bd99a276bf4f329)
+- sponsoring pdf names now include their locale [`0bae5bf`](https://git.odit.services/lfk/frontend/commit/0bae5bf32b8687057dca50cde21022ea8c3abee8)
+- ✨ update licenses.json [`e99e9e0`](https://git.odit.services/lfk/frontend/commit/e99e9e07089520d5a48021e10d2af7739656641a)
+- added windicss settings for VSCode [`008027d`](https://git.odit.services/lfk/frontend/commit/008027db0e2736a9bb9defd67178ab3fe580de04)
+- Certificate generation from team detail [`acd2f05`](https://git.odit.services/lfk/frontend/commit/acd2f0519d62e55dad8e9c3c41e77b6967212502)
+- ⚡💾 prevent env.js from being cached [`c5d1553`](https://git.odit.services/lfk/frontend/commit/c5d155396a92dfee6d592fb24a936ab521215f6d)
+- for await fix - ViteJS [`aec5e34`](https://git.odit.services/lfk/frontend/commit/aec5e3473e687415fbfd69c550d9b012e1b1be43)
+- Certificate generation from org detail [`e6ffc37`](https://git.odit.services/lfk/frontend/commit/e6ffc371e1ca2d4451e7dd4a3ca3c05564edb5fb)
+- 🧹 drop unused dependencies [`ce50fa2`](https://git.odit.services/lfk/frontend/commit/ce50fa2a62f8ff98e8be9c66432caeebb3952019)
+- 🐞 fix NGINX config [`5352410`](https://git.odit.services/lfk/frontend/commit/5352410d0c76fd14575d7beafc6a83f028062efe)
+- Fixed wrong permissiong getting checked [`b97a928`](https://git.odit.services/lfk/frontend/commit/b97a92860d71eb0384170e245a67fa3ea3fd8e85)
+- new license file version [CI SKIP] [`5cc4871`](https://git.odit.services/lfk/frontend/commit/5cc4871ec4be9f0af07738f6e3d44bdbe31cd25a)
+- ⏫ bump @odit/lfk-client-js@0.10.1 [`8b74d6d`](https://git.odit.services/lfk/frontend/commit/8b74d6d759c8481f012c201e2ea0d12b29ddef90)
+- 🔨 dev container open ⚡ [`ceb2146`](https://git.odit.services/lfk/frontend/commit/ceb2146c1b08bbe9250e4db7846e06bd89526c21)
+- ⏫ version bump: vite-plugin-windicss@0.12.2 [`8d006d8`](https://git.odit.services/lfk/frontend/commit/8d006d8c74d71c43a9031d58f5a8c7fc55ed95fc)
+- 🚚 move @svitejs/vite-plugin-svelte to @sveltejs/vite-plugin-svelte [`44b53da`](https://git.odit.services/lfk/frontend/commit/44b53da34516b00671b3e5060ba831e409ac3dd5)
+- ⏫ upgrade vite-plugin-windicss@0.12.1 [`ab45fc1`](https://git.odit.services/lfk/frontend/commit/ab45fc144eaf14f63d86ee53c1db4eefd88f9c7f)
+- 🐞 fix main.js linking [`467404b`](https://git.odit.services/lfk/frontend/commit/467404bfc87f3c08c5e227f194d71eea7cc48921)
+- 🐞 fix vite config for production system [`10a011d`](https://git.odit.services/lfk/frontend/commit/10a011d8426e475105ff5d2d5cf4adca2ef7625c)
+- fix dev script [`eb3ede9`](https://git.odit.services/lfk/frontend/commit/eb3ede9593e2e527df3e3a2f81c8e179bb555f51)
+- ⏫ bump vite to 2.1.3 [`0cd3e93`](https://git.odit.services/lfk/frontend/commit/0cd3e937d852eeabe43eb6298bfabe20834240b2)
+- Removed useless console.log [`d23dbaa`](https://git.odit.services/lfk/frontend/commit/d23dbaaf695a60fe5ebbc9945646a16b5fc45a16)
+- Removed useless console log [`48cfc15`](https://git.odit.services/lfk/frontend/commit/48cfc15cfb09096db1bd5ddbe9138b1a604d581f)
+
 #### [0.11.0](https://git.odit.services/lfk/frontend/compare/0.10.0...0.11.0)

- Merge pull request 'Generate and print bulk blank cards feature/116-download_blanc_cards' (#117) from feature/116-download_blanc_cards into dev [`25d8b86`](https://git.odit.services/lfk/frontend/commit/25d8b86efd89c442d1bf308a8743134820acfd1f)
+> 30 March 2021
+
 - Added button (including translations [`0614c76`](https://git.odit.services/lfk/frontend/commit/0614c76e924b18b512bab59933a26fec07cf483d)
 - Added button (including translations [`97e338f`](https://git.odit.services/lfk/frontend/commit/97e338f9d4f388596d550990457254c7fa1a3492)
 - Sorted translations [`89bb9c2`](https://git.odit.services/lfk/frontend/commit/89bb9c215e356e0940678f5cabd9e38bc203040e)
 - Added function for generating cards with pdf [`c8d6390`](https://git.odit.services/lfk/frontend/commit/c8d639024a5f2f72d6e30d2ce990b08bd71a5471)
+- 🚀RELEASE v0.11.0 [`f8ccf4f`](https://git.odit.services/lfk/frontend/commit/f8ccf4f5d8f68ecee31430029889b8ab1ecec682)
 - Fixed button styling [`08cb079`](https://git.odit.services/lfk/frontend/commit/08cb079e9798392e26515d559af2637e74deea97)
 - Now returning cards on creation with pdf [`1d999d4`](https://git.odit.services/lfk/frontend/commit/1d999d4910acb5efa21b3f9922cdb359babff404)
+- new license file version [CI SKIP] [`8f8b998`](https://git.odit.services/lfk/frontend/commit/8f8b9988ad94ee9f3729a3fe6fdb4c558828d892)
+- Merge pull request 'Generate and print bulk blank cards feature/116-download_blanc_cards' (#117) from feature/116-download_blanc_cards into dev [`25d8b86`](https://git.odit.services/lfk/frontend/commit/25d8b86efd89c442d1bf308a8743134820acfd1f)
 - Added comment [`636f018`](https://git.odit.services/lfk/frontend/commit/636f018daa33b99468a257bfc33477e1e644d081)
 - Bumped lfk client js version [`2d18686`](https://git.odit.services/lfk/frontend/commit/2d18686ce782a434ca7bd34c07c36a35b9497273)
 - Bumped lfk-client-js [`7dfaa75`](https://git.odit.services/lfk/frontend/commit/7dfaa7579a22b13194fcdd1c02b4437958261472)
--- a/index.html
+++ b/index.html
@@ -1,22 +1,22 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="/favicon.png" />
-  <link rel="manifest" href="/manifest.webmanifest">
-  <link rel="apple-touch-icon" href="/lfk-logo.png">
-  <meta name="theme-color" content="#FFFFFF">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="description" content="Lauf Für Kaya! - Admin" />
-  <title>Lauf für Kaya! - Admin</title>
-</head>
-
-<body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.8.4-RELEASE_INFO</span>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <script src="/env.js"></script>
-  <script type="module" src="/src/main.js"></script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.png" />
+  <link rel="manifest" href="/manifest.webmanifest">
+  <link rel="apple-touch-icon" href="/lfk-logo.png">
+  <meta name="theme-color" content="#FFFFFF">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Lauf Für Kaya! - Admin" />
+  <title>Lauf für Kaya! - Admin</title>
+</head>
+
+<body>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.12.2-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>
+</body>
+
 </html>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.8.4",
+	"version": "0.12.2",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "vite",
--- a/src/components/cards/CardsOverview.svelte
+++ b/src/components/cards/CardsOverview.svelte
@@ -1,5 +1,6 @@
 <script>
  import { getLocaleFromNavigator, json, _ } from "svelte-i18n";
+  import InfiniteLoading from 'svelte-infinite-loading';
  import { RunnerCardService } from "@odit/lfk-client-js";
  import store from "../../store";
  import Toastify from "toastify-js";
@@ -11,11 +12,21 @@
  export let editable = {};
  export let original_data = {};
  export let current_cards = [];
+  $: filtered_cards = current_cards.filter(function (c) {
+    if (
+      c.code.toLowerCase().includes(searchvalue_lowercase) ||
+      c.runner?.firstname.toLowerCase().includes(searchvalue_lowercase) ||
+      c.runner?.middlename.toLowerCase().includes(searchvalue_lowercase) ||
+      c.runner?.lastname.toLowerCase().includes(searchvalue_lowercase) ||
+      should_display_based_on_id(c.id)
+    ) {
+      return true;
+    }
+  });
  $: searchvalue = "";
+  $: searchvalue_lowercase = searchvalue.toLowerCase();
  $: active_deletes = [];
-  $: cards_show = current_cards.some(
-    (r) => r.is_selected === true
-  );
+  $: cards_show = current_cards.some((r) => r.is_selected === true);
  $: generate_cards = current_cards.filter((r) => r.is_selected === true);
  const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
    (val) => {
@@ -46,8 +57,38 @@
    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>
+  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
@@ -121,107 +162,111 @@
              </th>
            </tr>
          </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#each current_cards as card}
-              {#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" />
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <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>
+          <tbody class="divide-y divide-gray-200 virtual-wrapper"
+  on:scroll={updateScroll}
+  style="height: 70vh; width:100%"
+  bind:this={ele}
+          >
+    {#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" />
+        </td>
+        <td class="px-6 py-4 whitespace-nowrap">
+          <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;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                      <button
-                        on:click={() => {
-                          RunnerCardService.runnerCardControllerRemove(card.id, false).then(
-                            (resp) => {
-                              current_cards = current_cards.filter(
-                                (obj) => obj.id !== card.id
-                              );
-                              Toastify({
-                                text: $_('card-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_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>
-                  {/if}
-                </tr>
-              {/if}
-            {/each}
+        {#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;
+              }}
+              tabindex="0"
+              class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+            <button
+              on:click={() => {
+                RunnerCardService.runnerCardControllerRemove(card.id, false).then(
+                  (resp) => {
+                    current_cards = current_cards.filter(
+                      (obj) => obj.id !== card.id
+                    );
+                    Toastify({
+                      text: $_('card-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_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>
+        {/if}
+      </tr>
+    {/if}
+    {/each}
          </tbody>
        </table>
      </div>
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@@ -12,6 +12,7 @@
  import Select from "svelte-select";
  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
  import { tick } from "svelte";
  $: delete_triggered = false;
  $: address_valid_or_none =
@@ -34,6 +35,7 @@
  $: iscityvalid = editable.address?.city?.trim().length !== 0;
  $: sponsoring_contracts_show = true;
  $: cards_show = true;
+  $: certificates_show = true;
  $: generate_orgs = [original_object];
  $: registrationLink = `${config.baseurl}/selfservice/register/${editable.registrationKey}`;
  const getContactLabel = (option) =>
@@ -176,6 +178,7 @@
          bind:sponsoring_contracts_show
          bind:generate_orgs />
        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
+        <GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
          <button
            on:click={() => {
@@ -186,7 +189,7 @@
            {$_('import-runners')}
          </button>
        {/if}
-        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
          {#if delete_triggered}
            <button
              on:click={deleteOrganization}
--- a/src/components/orgs/OrgOverview.svelte
+++ b/src/components/orgs/OrgOverview.svelte
@@ -1,212 +1,219 @@
-<script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  let modal_open = false;
-  let delete_org = {};
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import store from "../../store";
-  import OrgsEmptyState from "./OrgsEmptyState.svelte";
-  import Toastify from "toastify-js";
-  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  $: searchvalue = "";
-  $: active_deletes = [];
-  $: sponsoring_contracts_show = current_organizations.some((r) => r.is_selected === true);
-  $: cards_show = current_organizations.some((r) => r.is_selected === true);
-  $: generate_orgs = current_organizations.filter((r) => r.is_selected === true);
-  export let current_organizations = [];
-
-  const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-    (val) => {
-      current_organizations = val;
-    }
-  );
-</script>
-
-<ConfirmOrgDeletion
-  on:cancelDelete={(event) => {
-    modal_open = false;
-    active_deletes[event.detail.id] = false;
-  }}
-  bind:modal_open
-  bind:delete_org />
-{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION: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">{$_('organizations-are-being-loaded')}</p>
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
-    </div>
-  {:then}
-    {#if current_organizations.length === 0}
-      <OrgsEmptyState />
-    {: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">
-        <GenerateSponsoringContracts
-            bind:sponsoring_contracts_show
-            bind:generate_orgs />
-        <GenerateRunnerCards
-            bind:cards_show
-            bind:generate_orgs />
-      </div>
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-        <table class="divide-y divide-gray-200 w-full">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                <span
-                  on:click={() => {
-                    const newstate = !current_organizations.some((r) => r.is_selected === true);
-                    current_organizations = current_organizations.map((r) => {
-                      r.is_selected = newstate;
-                      return r;
-                    });
-                  }}
-                  class="underline cursor-pointer select-none">{#if current_organizations.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">
-                {$_('address')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('contact')}
-              </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_organizations as o}
-              {#if Object.values(o)
-                .toString()
-                .toLowerCase()
-                .includes(searchvalue)}
-                <tr data-rowid="org_{o.id}">
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <input
-                      bind:checked={o.is_selected}
-                      type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {o.name}
-                        </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">
-                          {#if o.address.address1 !== null}
-                            {o.address.address1}<br />
-                            {o.address.address2 || ''}<br />
-                            {o.address.postalcode}
-                            {o.address.city}
-                            {o.address.country}
-                          {/if}
-                        </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">
-                          {#if o.contact}
-                            <a
-                              href="../contacts/{o.contact.id}"
-                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{o.contact.firstname}
-                              {o.contact.middlename || ''}
-                              {o.contact.lastname}</a>
-                          {:else}{$_('no-contact-specified')}{/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  {#if active_deletes[o.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {
-                          active_deletes[o.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                      <button
-                        on:click={() => {
-                          RunnerOrganizationService.runnerOrganizationControllerRemove(o.id, false)
-                            .then((resp) => {
-                              current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
-                              Toastify({
-                                text: 'Organization deleted',
-                                duration: 500,
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            })
-                            .catch((err) => {
-                              modal_open = true;
-                              delete_org = o;
-                            });
-                        }}
-                        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="./{o.id}"
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:DELETE')}
-                        <button
-                          on:click={() => {
-                            active_deletes[o.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}
+<script>
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  let modal_open = false;
+  let delete_org = {};
+  import { RunnerOrganizationService } from "@odit/lfk-client-js";
+  import store from "../../store";
+  import OrgsEmptyState from "./OrgsEmptyState.svelte";
+  import Toastify from "toastify-js";
+  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  $: sponsoring_contracts_show = current_organizations.some((r) => r.is_selected === true);
+  $: cards_show = current_organizations.some((r) => r.is_selected === true);
+  $: generate_orgs = current_organizations.some((r) => r.is_selected === true);
+  $: certificates_show = current_organizations.some(
+    (r) => r.is_selected === true
+  );
+  export let current_organizations = [];
+
+  const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+    (val) => {
+      current_organizations = val;
+    }
+  );
+</script>
+
+<ConfirmOrgDeletion
+  on:cancelDelete={(event) => {
+    modal_open = false;
+    active_deletes[event.detail.id] = false;
+  }}
+  bind:modal_open
+  bind:delete_org />
+{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION: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">{$_('organizations-are-being-loaded')}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then}
+    {#if current_organizations.length === 0}
+      <OrgsEmptyState />
+    {: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">
+        <GenerateSponsoringContracts
+            bind:sponsoring_contracts_show
+            bind:generate_orgs />
+        <GenerateRunnerCards
+            bind:cards_show
+            bind:generate_orgs />
+        <GenerateRunnerCertificates
+            bind:certificates_show
+            bind:generate_orgs />
+      </div>
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <span
+                  on:click={() => {
+                    const newstate = !current_organizations.some((r) => r.is_selected === true);
+                    current_organizations = current_organizations.map((r) => {
+                      r.is_selected = newstate;
+                      return r;
+                    });
+                  }}
+                  class="underline cursor-pointer select-none">{#if current_organizations.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">
+                {$_('address')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('contact')}
+              </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_organizations as o}
+              {#if Object.values(o)
+                .toString()
+                .toLowerCase()
+                .includes(searchvalue)}
+                <tr data-rowid="org_{o.id}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <input
+                      bind:checked={o.is_selected}
+                      type="checkbox"
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900">
+                          {o.name}
+                        </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">
+                          {#if o.address.address1 !== null}
+                            {o.address.address1}<br />
+                            {o.address.address2 || ''}<br />
+                            {o.address.postalcode}
+                            {o.address.city}
+                            {o.address.country}
+                          {/if}
+                        </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">
+                          {#if o.contact}
+                            <a
+                              href="../contacts/{o.contact.id}"
+                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{o.contact.firstname}
+                              {o.contact.middlename || ''}
+                              {o.contact.lastname}</a>
+                          {:else}{$_('no-contact-specified')}{/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  {#if active_deletes[o.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[o.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                      <button
+                        on:click={() => {
+                          RunnerOrganizationService.runnerOrganizationControllerRemove(o.id, false)
+                            .then((resp) => {
+                              current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
+                              Toastify({
+                                text: 'Organization deleted',
+                                duration: 500,
+                                backgroundColor:
+                                  'linear-gradient(to right, #00b09b, #96c93d)',
+                              }).showToast();
+                            })
+                            .catch((err) => {
+                              modal_open = true;
+                              delete_org = o;
+                            });
+                        }}
+                        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="./{o.id}"
+                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[o.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}
--- a/src/components/pdf_generation/GenerateRunnerCards.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCards.svelte
@@ -67,7 +67,7 @@
                const url = window.URL.createObjectURL(blob);
                let a = document.createElement("a");
                a.href = url;
-                a.download = "Runnercards.pdf";
+                a.download = `${$_('runnercards')}-${locale}.pdf`;
                document.body.appendChild(a);
                a.click();
                a.remove();
@@ -127,7 +127,12 @@
                const url = window.URL.createObjectURL(blob);
                let a = document.createElement("a");
                a.href = url;
-                a.download = "Runnercards.pdf";
+                if(generate_runners.length == 1){
+                    a.download = `${$_('runnercards')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
+                }
+                else{
+                    a.download = `Runnercards-${locale}.pdf`;
+                }
                document.body.appendChild(a);
                a.click();
                a.remove();
@@ -191,7 +196,7 @@
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.href = url;
-                    a.download = "Sponsorings_" + t.name + ".pdf";
+                    a.download = `${$_('runnercards')}_${t.name}-${locale}.pdf`;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
@@ -258,7 +263,7 @@
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.href = url;
-                    a.download = "Sponsorings_" + o.name + ".pdf";
+                    a.download = `${$_('runnercards')}_${o.name}-${locale}.pdf`;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
--- a/src/components/pdf_generation/GenerateRunnerCertificates.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCertificates.svelte
@@ -0,0 +1,277 @@
+<script>
+    import { _ } from "svelte-i18n";
+    import {
+        DonationService,
+        RunnerTeamService,
+        RunnerOrganizationService
+    } from "@odit/lfk-client-js";
+    import Toastify from "toastify-js";
+    export let certificates_show = false;
+    export let generate_runners = [];
+    export let generate_orgs = [];
+    export let generate_teams = [];
+    $: certificates_dropdown_open = false;
+    document.addEventListener("click", function (e) {
+        if (
+            e.target.parentNode?.parentNode?.id != "certificates:dropdown" &&
+            e.target.parentNode?.parentNode?.id != "certificates:dropdown:menu"
+        ) {
+            certificates_dropdown_open = false;
+        }
+    });
+
+    function generateCertificates(locale) {
+        certificates_dropdown_open = false;
+
+        if (generate_orgs.length > 0) {
+            generateOrgCertificates(locale);
+        } else if (generate_teams.length > 0) {
+            generateTeamCertificates(locale);
+        } else {
+            generateRunnerCertificates(locale);
+        }
+    }
+
+    async function generateRunnerCertificates(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        const current_donations = await DonationService.donationControllerGetAll();
+        let certificateRunners = [];
+        for (let runner of generate_runners) {
+            runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
+            certificateRunners.push(runner);
+        }
+        fetch(
+            `${config.baseurl}/documents/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(certificateRunners),
+            }
+        )
+            .then((response) => {
+                if (response.status != "200") {
+                    toast.hideToast();
+                    Toastify({
+                        text: $_("pdf-generation-failed"),
+                        duration: 3500,
+                        backgroundColor:
+                            "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                    }).showToast();
+                } else {
+                    return response.blob();
+                }
+            })
+            .then((blob) => {
+                const url = window.URL.createObjectURL(blob);
+                let a = document.createElement("a");
+                a.href = url;
+                if(generate_runners.length == 1){
+                    a.download = `${$_('certificates')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
+                }
+                else{
+                    a.download = `${$_('certificates')}-${locale}.pdf`;
+                }
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+                toast.hideToast();
+                Toastify({
+                    text: $_("pdf-successfully-generated"),
+                    duration: 3500,
+                    backgroundColor:
+                        "linear-gradient(to right, #00b09b, #96c93d)",
+                }).showToast();
+            })
+            .catch((err) => {});
+    }
+
+    async function generateTeamCertificates(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdfs"),
+            duration: -1,
+        }).showToast();
+        let count = 0;
+        const current_donations = await DonationService.donationControllerGetAll();
+        for (const t of generate_teams) {
+            const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+                t.id
+                );
+            let certificateRunners = [];
+            for (let runner of runners) {
+                runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
+                certificateRunners.push(runner);
+            }
+            fetch(
+                `${config.baseurl}/documents/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(certificateRunners),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdf-generation-failed"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                        }).showToast();
+                    } else {
+                        return response.blob();
+                    }
+                })
+                .then((blob) => {
+                    count++;
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = `${$_('certificates')}_${t.name}-${locale}.pdf`;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_teams.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
+    }
+
+    async function generateOrgCertificates(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        let count = 0;
+        const current_donations = await DonationService.donationControllerGetAll();
+        for (const o of generate_orgs) {
+            const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+                o.id
+            );
+            let certificateRunners = [];
+            for (let runner of runners) {
+                runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
+                certificateRunners.push(runner);
+            }
+            fetch(
+                `${config.baseurl}/documents/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(certificateRunners),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdf-generation-failed"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                        }).showToast();
+                    } else {
+                        return response.blob();
+                    }
+                })
+                .then((blob) => {
+                    count++;
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = `${$_('certificates')}_${o.name}-${locale}.pdf`;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_orgs.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
+    }
+</script>
+
+{#if certificates_show}
+    <div id="certificates:dropdown" class="relative inline-block">
+        <div>
+            <button
+                on:click={() => {
+                    certificates_dropdown_open = !certificates_dropdown_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">
+                {$_('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
+                        fill="none"
+                        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>
+            </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"
+                id="certificates:dropdown:menu">
+                <div
+                    class="py-1"
+                    role="menu"
+                    aria-orientation="vertical"
+                    aria-labelledby="options-menu">
+                    <span
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
+                    <button
+                        on:click={() => {
+                            generateCertificates('de');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('german')}
+                    </button>
+                    <button
+                        on:click={() => {
+                            generateCertificates('en');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('english')}
+                    </button>
+                </div>
+            </div>
+        {/if}
+    </div>
+{/if}
--- a/src/components/pdf_generation/GenerateSponsoringContracts.svelte
+++ b/src/components/pdf_generation/GenerateSponsoringContracts.svelte
@@ -69,7 +69,7 @@
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.href = url;
-                    a.download = "Sponsorings_" + t.name + ".pdf";
+                    a.download = `${$_('sponsorings')}_${t.name}-${locale}.pdf`;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
@@ -124,7 +124,7 @@
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.href = url;
-                    a.download = "Sponsorings_" + o.name + ".pdf";
+                    a.download = `${$_('sponsorings')}_${o.name}-${locale}.pdf`;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
@@ -174,7 +174,10 @@
                const url = window.URL.createObjectURL(blob);
                let a = document.createElement("a");
                a.href = url;
-                a.download = "Sponsoring.pdf";
+                if(generate_runners.length == 1){
+                    a.download = `${$_('sponsorings')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
+                }
+                a.download = `${$_('sponsorings')}-${locale}.pdf`;
                document.body.appendChild(a);
                a.click();
                a.remove();
--- a/src/components/runners/ImportRunnerModal.svelte
+++ b/src/components/runners/ImportRunnerModal.svelte
@@ -34,7 +34,7 @@
    document.onkeydown = (e) => {
      e = e || window.event;
      if (e.key === "Escape") {
-        import_modal_open = false;
+        cancelModal();
      }
      if (e.keyCode === 13) {
        //
@@ -281,6 +281,16 @@
                  bind:files
                  type="file" />
              </div>
+              <div class="overflow-hidden relative mt-4 mb-4">
+                <button
+                  on:click={() => {
+                    cancelModal();
+                  }}
+                  type="button"
+                  class="w-full 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 md:ml-40 mr-0 sm:ml-0 sm:w-auto sm:text-sm">
+                  {$_('cancel')}
+                </button>
+              </div>
            {/if}
            {#if json_output.length > 0}
              {#if opened_from === 'OrgOverview'}
--- a/src/components/runners/RunnerDetail.svelte
+++ b/src/components/runners/RunnerDetail.svelte
@@ -2,6 +2,7 @@
  import { getLocaleFromNavigator, _ } from "svelte-i18n";
  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
  import store from "../../store";
  import {
    RunnerService,
@@ -36,6 +37,7 @@
    editable.group != null;
  $: sponsoring_contracts_show = true;
  $: cards_show = true;
+  $: certificates_show = true;
  $: generate_runners = [original_data_pdf];
  runner_promise.then((data) => {
    data_loaded = true;
@@ -158,7 +160,10 @@
            bind:sponsoring_contracts_show
            bind:generate_runners />
          <GenerateRunnerCards
-            bind:sponsoring_contracts_show
+            bind:cards_show
+            bind:generate_runners />
+          <GenerateRunnerCertificates
+            bind:certificates_show
            bind:generate_runners />
          {#if !delete_triggered}
            <button
--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -10,6 +10,7 @@
  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 = "";
  $: active_deletes = [];
  export let current_runners = [];
@@ -27,6 +28,9 @@
  $: 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 = [];
@@ -92,6 +96,9 @@
        <GenerateRunnerCards
          bind:cards_show
          bind:generate_runners />
+        <GenerateRunnerCertificates
+          bind:certificates_show
+          bind:generate_runners />
      </div>
      <div
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
--- a/src/components/teams/TeamDetail.svelte
+++ b/src/components/teams/TeamDetail.svelte
@@ -14,6 +14,7 @@
  import Teams from "./Teams.svelte";
  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
  let [teamdata, original, delete_team, orgs, contacts, modal_open] = [
    {},
    {},
@@ -30,6 +31,7 @@
  $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
  $: sponsoring_contracts_show = true;
  $: cards_show = true;
+  $: certificates_show = true;
  $: generate_teams = [original];
  $: group = {};
  $: contact = {};
@@ -122,6 +124,9 @@
        <GenerateRunnerCards
          bind:cards_show
          bind:generate_teams />
+        <GenerateRunnerCertificates
+          bind:certificates_show
+          bind:generate_teams />
        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
          <button
            on:click={() => {
--- a/src/components/teams/TeamsOverview.svelte
+++ b/src/components/teams/TeamsOverview.svelte
@@ -1,217 +1,224 @@
-<script>
-  import { getLocaleFromNavigator, t, _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
-  import { RunnerTeamService } from "@odit/lfk-client-js";
-  const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
-  import store, { users as usersstore } from "../../store.js";
-  import TeamsEmptyState from "./TeamsEmptyState.svelte";
-  import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
-  import { clickOutside } from "../base/outsideclick";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  $: searchvalue = "";
-  $: active_deletes = [];
-  $: sponsoring_contracts_show = current_teams.some(
-    (r) => r.is_selected === true
-  );
-  $: cards_show = current_teams.some(
-    (r) => r.is_selected === true
-  );
-  $: generate_teams = current_teams.filter((r) => r.is_selected === true);
-  export let current_teams = [];
-  let modal_open = false;
-  let delete_team = {};
-  usersstore.subscribe((val) => {
-    current_teams = val;
-  });
-  teams_promise.then((data) => {
-    usersstore.set(data);
-  });
-</script>
-
-<ConfirmTeamDeletion
-  on:cancelDelete={(event) => {
-    modal_open = false;
-    active_deletes[event.detail.id] = false;
-  }}
-  bind:modal_open
-  bind:delete_team />
-{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
-  {#await teams_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">{$_('teams-are-being-loaded')}</p>
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
-    </div>
-  {:then}
-    {#if current_teams.length === 0}
-      <TeamsEmptyState />
-    {: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">
-        <GenerateSponsoringContracts
-          bind:sponsoring_contracts_show
-          bind:generate_teams />
-        <GenerateRunnerCards
-          bind:cards_show
-          bind:generate_teams />
-      </div>
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-        <table class="divide-y divide-gray-200 w-full">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                <span
-                  on:click={() => {
-                    const newstate = !current_teams.some((r) => r.is_selected === true);
-                    current_teams = current_teams.map((r) => {
-                      r.is_selected = newstate;
-                      return r;
-                    });
-                  }}
-                  class="underline cursor-pointer select-none">{#if current_teams.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">
-                {$_('organization')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('contact')}
-              </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_teams as t}
-              {#if Object.values(t)
-                .toString()
-                .toLowerCase()
-                .includes(searchvalue)}
-                <tr data-rowid="team_{t.id}">
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <input
-                      bind:checked={t.is_selected}
-                      type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {t.name}
-                        </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">
-                          {#if t.parentGroup}
-                            <a
-                              href="../orgs/{t.parentGroup.id}"
-                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{t.parentGroup.name}</a>
-                          {:else}{$_('no-organization-specified')}{/if}
-                        </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">
-                          {#if t.contact}
-                            <a
-                              href="../contacts/{t.contact.id}"
-                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{t.contact.firstname}
-                              {t.contact.middlename || ''}
-                              {t.contact.lastname}</a>
-                          {:else}{$_('no-contact-specified')}{/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  {#if active_deletes[t.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {
-                          active_deletes[t.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
-                        Delete</button>
-                      <button
-                        on:click={() => {
-                          RunnerTeamService.runnerTeamControllerRemove(t.id, false)
-                            .then((resp) => {
-                              current_teams = current_teams.filter((obj) => obj.id !== t.id);
-                              Toastify({
-                                text: $_('organization-deleted'),
-                                duration: 500,
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            })
-                            .catch((err) => {
-                              modal_open = true;
-                              delete_team = t;
-                            });
-                        }}
-                        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="./{t.id}"
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
-                        <button
-                          on:click={() => {
-                            active_deletes[t.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}
+<script>
+  import { getLocaleFromNavigator, t, _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import { RunnerTeamService } from "@odit/lfk-client-js";
+  const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
+  import store, { users as usersstore } from "../../store.js";
+  import TeamsEmptyState from "./TeamsEmptyState.svelte";
+  import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
+  import { clickOutside } from "../base/outsideclick";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  $: sponsoring_contracts_show = current_teams.some(
+    (r) => r.is_selected === true
+  );
+  $: cards_show = current_teams.some(
+    (r) => r.is_selected === true
+  );
+  $: certificates_show = current_teams.some(
+    (r) => r.is_selected === true
+  );
+  $: generate_teams = current_teams.filter((r) => r.is_selected === true);
+  export let current_teams = [];
+  let modal_open = false;
+  let delete_team = {};
+  usersstore.subscribe((val) => {
+    current_teams = val;
+  });
+  teams_promise.then((data) => {
+    usersstore.set(data);
+  });
+</script>
+
+<ConfirmTeamDeletion
+  on:cancelDelete={(event) => {
+    modal_open = false;
+    active_deletes[event.detail.id] = false;
+  }}
+  bind:modal_open
+  bind:delete_team />
+{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
+  {#await teams_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">{$_('teams-are-being-loaded')}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then}
+    {#if current_teams.length === 0}
+      <TeamsEmptyState />
+    {: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">
+        <GenerateSponsoringContracts
+          bind:sponsoring_contracts_show
+          bind:generate_teams />
+        <GenerateRunnerCards
+          bind:cards_show
+          bind:generate_teams />
+        <GenerateRunnerCertificates
+          bind:certificates_show
+          bind:generate_teams />
+      </div>
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <span
+                  on:click={() => {
+                    const newstate = !current_teams.some((r) => r.is_selected === true);
+                    current_teams = current_teams.map((r) => {
+                      r.is_selected = newstate;
+                      return r;
+                    });
+                  }}
+                  class="underline cursor-pointer select-none">{#if current_teams.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">
+                {$_('organization')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('contact')}
+              </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_teams as t}
+              {#if Object.values(t)
+                .toString()
+                .toLowerCase()
+                .includes(searchvalue)}
+                <tr data-rowid="team_{t.id}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <input
+                      bind:checked={t.is_selected}
+                      type="checkbox"
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900">
+                          {t.name}
+                        </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">
+                          {#if t.parentGroup}
+                            <a
+                              href="../orgs/{t.parentGroup.id}"
+                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{t.parentGroup.name}</a>
+                          {:else}{$_('no-organization-specified')}{/if}
+                        </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">
+                          {#if t.contact}
+                            <a
+                              href="../contacts/{t.contact.id}"
+                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{t.contact.firstname}
+                              {t.contact.middlename || ''}
+                              {t.contact.lastname}</a>
+                          {:else}{$_('no-contact-specified')}{/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  {#if active_deletes[t.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[t.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
+                        Delete</button>
+                      <button
+                        on:click={() => {
+                          RunnerTeamService.runnerTeamControllerRemove(t.id, false)
+                            .then((resp) => {
+                              current_teams = current_teams.filter((obj) => obj.id !== t.id);
+                              Toastify({
+                                text: $_('organization-deleted'),
+                                duration: 500,
+                                backgroundColor:
+                                  'linear-gradient(to right, #00b09b, #96c93d)',
+                              }).showToast();
+                            })
+                            .catch((err) => {
+                              modal_open = true;
+                              delete_team = t;
+                            });
+                        }}
+                        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="./{t.id}"
+                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[t.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}
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -50,6 +50,7 @@
    "card-deleted": "Karte gelöscht",
    "card-updated": "Karte aktualisiert",
    "cards": "Läuferkarten",
+    "certificates": "Urkunden",
    "change-your-password-here": "Hier kannst du dein Passwort ändern",
    "changing-your-password": "Passwort wird geändert",
    "city": "Stadt",
@@ -191,10 +192,12 @@
    "geerbte": "geerbte",
    "general-stats": "Allgemeine Statistiken",
    "general_promise_error": "😢 Ein unbekannter Fehler ist aufgetreten",
+    "generate-runner-certificate": "Urkunde generieren",
+    "generate-runner-certificates": "Urkunden generieren",
    "generate-runnercards": "Läuferkarten generieren",
    "generate-sponsoring-contract": "Sponsoringvertrag generieren",
    "generate-sponsoring-contracts": "Sponsoringverträge generieren",
-    "generating-pdf": "Pdf wird generiert...",
+    "generating-pdf": "PDF wird generiert...",
    "generating-pdfs": "PDFs werden generiert...",
    "generic-ui-logic-error": "Etwas ist in der Benutzeroberfläche schiefgelaufen.",
    "german": "Deutsch",
@@ -321,6 +324,7 @@
    "runner-import": "Läufer:innen Import",
    "runner-is-being-added": "Läufer:in wird hinzugefügt...",
    "runner-updated": "Läufer:in aktualisiert!",
+    "runnercards": "Laeuferkarten",
    "runnerimport_verify_runners_org": "Bitte die Läufer:innen für den Import in die Organisation \"{org_name}\" bestätigen",
    "runners": "Läufer",
    "runners-are-being-imported": "Läufer:innen werden importiert ...",
@@ -350,6 +354,7 @@
    "settings": "Einstellungen",
    "settings-for-your-profile": "Die Einstellungen deines Accounts",
    "something-about-the-group": "Infos zur Gruppe",
+    "sponsorings": "Sponsoringerklaerungen",
    "stats-are-being-loaded": "Die Statistiken werden geladen...",
    "status": "Status",
    "stuff-that-could-harm-your-profile": "Einstellungen, die deinem Profil nachhaltig schaden können",
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -50,6 +50,7 @@
    "card-deleted": "Card deleted",
    "card-updated": "Card updated",
    "cards": "Cards",
+    "certificates": "Certificates",
    "change-your-password-here": "Change your password here",
    "changing-your-password": "Changing your password",
    "city": "City",
@@ -191,6 +192,8 @@
    "geerbte": "inherited",
    "general-stats": "General Stats",
    "general_promise_error": "😢 Error",
+    "generate-runner-certificate": "Generate runner certificate",
+    "generate-runner-certificates": "Generate runner certificates",
    "generate-runnercards": "Generate Runnercards",
    "generate-sponsoring-contract": "generate sponsoring contract",
    "generate-sponsoring-contracts": "generate sponsoring contracts",
@@ -321,6 +324,7 @@
    "runner-import": "Runner Import",
    "runner-is-being-added": "Runner is being added...",
    "runner-updated": "Runner updated!",
+    "runnercards": "Runnercards",
    "runnerimport_verify_runners_org": "Please confirm these runners for import into the organization \"{org_name}\"",
    "runners": "Runners",
    "runners-are-being-imported": "Runners are being imported...",
@@ -350,6 +354,7 @@
    "settings": "Settings",
    "settings-for-your-profile": "Settings for your profile",
    "something-about-the-group": "Something about the group...",
+    "sponsorings": "Sponsorings",
    "stats-are-being-loaded": "stats are being loaded...",
    "status": "Status",
    "stuff-that-could-harm-your-profile": "Stuff that could harm your profile",
Author	SHA1	Message	Date
Nicolai Ort	6043bc4517	🚀RELEASE v0.12.2 Some checks failed continuous-integration/drone/push Build is failing Details	2021-04-07 20:11:21 +02:00
Nicolai Ort	e6ed066e3f	Merge pull request 'feature/110-virtual_list' (#124 ) from feature/110-virtual_list into dev Some checks failed continuous-integration/drone/push Build is failing Details Reviewed-on: #124	2021-04-07 18:10:02 +00:00
Nicolai Ort	ee4e8655b8	Merge branch 'dev' into feature/110-virtual_list	2021-04-07 20:09:35 +02:00
Philipp Dormann	37970d2be6	pre-merge fixes ref #110	2021-04-07 18:59:46 +02:00
Philipp Dormann	1376788016	updated virtual scroll list	2021-04-07 18:38:52 +02:00
Philipp Dormann	4cad86cf85	fixed height table	2021-04-07 18:19:58 +02:00
Philipp Dormann	6304116edb	wip on virtuallist	2021-04-06 22:16:24 +02:00
Nicolai Ort	834ff8fa63	🚀RELEASE v0.12.1 All checks were successful continuous-integration/drone/push Build is passing Details	2021-04-06 16:47:37 +02:00
Nicolai Ort	1f428a535e	Merge pull request 'ImportRunnerModal Cancel Button feature/122-import_cancel' (#123 ) from feature/112-import_cancel into dev All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #123	2021-04-06 14:42:37 +00:00
Nicolai Ort	0c40966970	Added cancel button for the first stage of runner import ref #112	2021-04-05 16:23:24 +02:00
Nicolai Ort	9da071fe9b	Escape now triggers foll modal close (including reset) instead of just hiding th modal ref #112	2021-04-05 16:14:43 +02:00
Nicolai Ort	892a04f289	🚀RELEASE v0.12.0 All checks were successful continuous-integration/drone/push Build is passing Details	2021-04-05 16:09:17 +02:00
Nicolai Ort	27cc9727f1	Fixed package version All checks were successful continuous-integration/drone/push Build is passing Details	2021-04-05 16:08:41 +02:00
Nicolai Ort	f0738d451b	Merge pull request 'Implmented certificate generation feature/119-Certificate_generation' (#120 ) from feature/119-Certificate_generation into dev All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #120	2021-04-05 14:05:38 +00:00
Nicolai Ort	9e6a8daf2c	Sorted translations 🌍 ref #119	2021-04-05 16:04:44 +02:00
Nicolai Ort	bfacfec765	The PFS Prefixes now get translated via i18n ref #119	2021-04-05 16:04:26 +02:00
Nicolai Ort	0bae5bf32b	sponsoring pdf names now include their locale ref #119	2021-04-05 15:37:12 +02:00
Nicolai Ort	22b09d16d0	Cleaned up generation strings and added the schem for single runner generations for sponsoring contracts ref #119	2021-04-05 15:36:01 +02:00
Nicolai Ort	9c867e106e	Cleaned up generation strings and added the schem for single runner generations for cards ref #119	2021-04-05 15:33:55 +02:00
Nicolai Ort	304f28a3c1	certificate pdf names now include their locale ref #119	2021-04-05 15:31:52 +02:00
Nicolai Ort	d65d3793de	Changed the basic nameing generation for runenr certificate files ref #119	2021-04-05 15:31:01 +02:00
Nicolai Ort	3638d87bd2	Runnercard pdfs now include their locale ref #119	2021-04-05 15:28:13 +02:00
Nicolai Ort	b97a92860d	Fixed wrong permissiong getting checked ref #119	2021-04-05 15:24:42 +02:00
Philipp Dormann	7c86a5eeb3	added missing/ wrong translations + formatting! ref #119	2021-04-05 12:02:18 +02:00
Nicolai Ort	d23dbaaf69	Removed useless console.log ref #119	2021-04-03 20:05:27 +02:00
Nicolai Ort	e6ffc371e1	Certificate generation from org detail ref #119	2021-04-03 20:03:57 +02:00
Nicolai Ort	3177c6eaa3	Certificate generation from org overview ref #119	2021-04-03 20:02:52 +02:00
Nicolai Ort	acd2f0519d	Certificate generation from team detail ref #119	2021-04-03 20:00:51 +02:00
Nicolai Ort	18ec100c33	Certificate generation from team overview ref #119	2021-04-03 19:59:34 +02:00
Nicolai Ort	fa55fce76e	Merge branch 'feature/119-Certificate_generation' of git.odit.services:lfk/frontend into feature/119-Certificate_generation	2021-04-03 19:59:20 +02:00
Nicolai Ort	f47d5e347d	Copy-paste fix ref #119	2021-04-03 19:59:18 +02:00
Nicolai Ort	7488a8b597	Copy-paste fix ref #119	2021-04-03 19:58:24 +02:00
Nicolai Ort	2e3ac154be	Implemented generation for orgs ref #119	2021-04-03 19:52:41 +02:00
Nicolai Ort	2472640755	Implemented generation for teams ref #119	2021-04-03 19:51:01 +02:00
Nicolai Ort	7b685d6cad	Added certificate generation from runner overview and detail ref #119	2021-04-03 19:48:31 +02:00
Nicolai Ort	17f6f4e616	Added i18n ref #119	2021-04-03 19:46:17 +02:00
Nicolai Ort	48cfc15cfb	Removed useless console log ref #119	2021-04-03 19:44:57 +02:00
Nicolai Ort	bb9b779cee	You can now generate certificates from the runner overview ref #119	2021-04-03 19:44:26 +02:00
Nicolai Ort	af63ce67ae	Added basic certificate generation component ref #119	2021-04-03 19:38:54 +02:00