src/components/orgs/OrgDetail.svelte

@@ -24,7 +24,8 @@
   $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
   $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
   $: iscityvalid = editable.address?.city?.trim().length !== 0;
-
+  $: sponsoring_contracts_download_open = false;
+  
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
     params.orgid
   ).then((value) => {
@@ -54,6 +55,14 @@
   });
   let modal_open = false;
   let delete_org = {};
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
   function deleteOrganization() {
     RunnerOrganizationService.runnerOrganizationControllerRemove(
       original_object.id,
@@ -100,6 +109,55 @@
     }
   }
   export let import_modal_open = false;
+  async function generateSponsoringContract(locale) {
+    sponsoring_contracts_download_open = false;
+    const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+      original_object.id
+    );
+    const toast = Toastify({
+      text: $_("generating-pdf"),
+      duration: -1,
+    }).showToast();
+    fetch(
+      `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(runners),
+      }
+    )
+      .then((response) => {
+        if (response.status != "200") {
+          toast.hideToast();
+          Toastify({
+            text: $_("pdf-generation-failed"),
+            duration: 3500,
+            backgroundColor:
+              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+          }).showToast();
+        } else {
+          return response.blob();
+        }
+      })
+      .then((blob) => {
+        const url = window.URL.createObjectURL(blob);
+        let a = document.createElement("a");
+        a.href = url;
+        a.download = "Sponsorings_" + original_object.name + ".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) => {});
+  }
 </script>
 
 <ImportRunnerModal
@@ -118,57 +176,54 @@
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_object.name}
       <span data-id="org_actions_${editable.id}">
-        <button
+        <div id="sponsoring:dropdown" class="relative inline-block">
-          on:click={async () => {
+          <div>
-            const locale = getLocaleFromNavigator();
+            <button
-            const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(original_object.id);
+              on:click={() => {
-            const toast = Toastify({
+                sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-              text: $_('generating-pdf'),
+              }}
-              duration: -1,
+              type="button"
-            }).showToast();
+              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"
-            fetch(
+              id="options-menu"
-              `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+              aria-haspopup="true"
-              {
+              aria-expanded="true">
-                method: 'POST',
+              {$_('generate-sponsoring-contracts')}
-                headers: {
+              <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>
-                  'Content-Type': 'application/json',
+            </button>
-                },
+          </div>
-                body: JSON.stringify(runners),
+          {#if sponsoring_contracts_download_open}
-              }
+            <div
-            )
+              class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-              .then((response) => {
+              id="sponsoring:dropdown:menu">
-                if (response.status != '200') {
+              <div
-                  toast.hideToast();
+                class="py-1"
-                  Toastify({
+                role="menu"
-                    text: $_('pdf-generation-failed'),
+                aria-orientation="vertical"
-                    duration: 3500,
+                aria-labelledby="options-menu">
-                    backgroundColor:
+                <span
-                      'linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)',
+                  class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                  }).showToast();
+                <button
-                } else {
+                  on:click={() => {
-                  return response.blob();
+                    generateSponsoringContract('de');
-                }
+                  }}
-              })
+                  type="submit"
-              .then((blob) => {
+                  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 inline-flex"
-                const url = window.URL.createObjectURL(blob);
+                  role="menuitem">
-                let a = document.createElement('a');
+                  {$_('german')}
-                a.href = url;
+                </button>
-                a.download = 'Sponsorings_' + original_object.name + '.pdf';
+                <button
-                document.body.appendChild(a);
+                  on:click={() => {
-                a.click();
+                    generateSponsoringContract('en');
-                a.remove();
+                  }}
-                toast.hideToast();
+                  type="submit"
-                Toastify({
+                  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 inline-flex"
-                  text: $_('pdf-successfully-generated'),
+                  role="menuitem">
-                  duration: 3500,
+                  {$_('english')}
-                  backgroundColor:
+                </button>
-                    'linear-gradient(to right, #00b09b, #96c93d)',
+              </div>
-                }).showToast();
+            </div>
-              })
+          {/if}
-              .catch((err) => {});
+        </div>
-          }}
-          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">{$_('generate-sponsoring-contracts')}</button>
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
           <button
             on:click={() => {

src/components/orgs/OrgOverview.svelte

@@ -9,6 +9,7 @@
   import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
+  $: sponsoring_contracts_download_open = false;
   export let current_organizations = [];
 
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
@@ -16,6 +17,72 @@
       current_organizations = val;
     }
   );
+
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
+
+  async function generateSponsoringContract(locale) {
+    sponsoring_contracts_download_open = false;
+    const orgs = current_organizations.filter((r) => r.is_selected === true);
+    const toast = Toastify({
+      text: $_("generating-pdfs"),
+      duration: -1,
+    }).showToast();
+    let count = 0;
+    for await (const o of orgs) {
+      const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+        o.id
+      );
+      fetch(
+        `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(runners),
+        }
+      )
+        .then((response) => {
+          if (response.status != "200") {
+            toast.hideToast();
+            Toastify({
+              text: $_("pdf-generation-failed"),
+              duration: 3500,
+              backgroundColor:
+                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+            }).showToast();
+          } else {
+            return response.blob();
+          }
+        })
+        .then((blob) => {
+          count++;
+          const url = window.URL.createObjectURL(blob);
+          let a = document.createElement("a");
+          a.href = url;
+          a.download = "Sponsorings_" + o.name + ".pdf";
+          document.body.appendChild(a);
+          a.click();
+          a.remove();
+          if (count === orgs.length) {
+            toast.hideToast();
+            Toastify({
+              text: $_("pdfs-successfully-generated"),
+              duration: 3500,
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            }).showToast();
+          }
+        })
+        .catch((err) => {});
+    }
+  }
 </script>
 
 <ConfirmOrgDeletion
@@ -45,66 +112,54 @@
         class="gridjs-input gridjs-search-input mb-4" />
       <div class="h-12">
         {#if current_organizations.some((r) => r.is_selected === true)}
-          <button
+        <div id="sponsoring:dropdown" class="relative inline-block">
-            on:click={async () => {
+          <div>
-              const locale = getLocaleFromNavigator();
+            <button
-              const orgs = current_organizations.filter((r) => r.is_selected === true);
+              on:click={() => {
-              const toast = Toastify({
+                sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-                text: $_('generating-pdfs'),
+              }}
-                duration: -1,
+              type="button"
-              }).showToast();
+              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"
-              let count = 0;
+              id="options-menu"
-              for await (const o of orgs) {
+              aria-haspopup="true"
-                const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(o.id);
+              aria-expanded="true">
-                fetch(
+              {$_('generate-sponsoring-contracts')}
-                  `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+              <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>
-                    method: 'POST',
+          </div>
-                    headers: {
+          {#if sponsoring_contracts_download_open}
-                      'Content-Type': 'application/json',
+            <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"
-                    body: JSON.stringify(runners),
+              id="sponsoring:dropdown:menu">
-                  }
+              <div
-                )
+                class="py-1"
-                  .then((response) => {
+                role="menu"
-                    if (response.status != '200') {
+                aria-orientation="vertical"
-                      toast.hideToast();
+                aria-labelledby="options-menu">
-                      Toastify({
+                <span
-                        text: $_('pdf-generation-failed'),
+                  class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                        duration: 3500,
+                <button
-                        backgroundColor:
+                  on:click={() => {
-                          'linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)',
+                    generateSponsoringContract('de');
-                      }).showToast();
+                  }}
-                    } else {
+                  type="submit"
-                      return response.blob();
+                  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 inline-flex"
-                    }
+                  role="menuitem">
-                  })
+                  {$_('german')}
-                  .then((blob) => {
+                </button>
-                    count++;
+                <button
-                    const url = window.URL.createObjectURL(blob);
+                  on:click={() => {
-                    let a = document.createElement('a');
+                    generateSponsoringContract('en');
-                    a.href = url;
+                  }}
-                    a.download = 'Sponsorings_' + o.name + '.pdf';
+                  type="submit"
-                    document.body.appendChild(a);
+                  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 inline-flex"
-                    a.click();
+                  role="menuitem">
-                    a.remove();
+                  {$_('english')}
-                    if (count === orgs.length) {
+                </button>
-                      toast.hideToast();
+              </div>
-                      Toastify({
+            </div>
-                        text: $_('pdfs-successfully-generated'),
+          {/if}
-                        duration: 3500,
+        </div>
-                        backgroundColor:
-                          'linear-gradient(to right, #00b09b, #96c93d)',
-                      }).showToast();
-                    }
-                  })
-                  .catch((err) => {});
-              }
-            }}
-            type="button"
-            class="w-full inline-flex 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:w-auto sm:text-sm">
-            {$_('generate-sponsoring-contracts')}
-          </button>
         {/if}
       </div>
       <div

src/components/runners/RunnerDetail.svelte

@@ -14,6 +14,7 @@
   export let params;
   const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
   $: delete_triggered = false;
+  $: sponsoring_contracts_download_open = false;
   $: original_data_pdf = {};
   $: original_data = {};
   $: editable = {};
@@ -32,6 +33,14 @@
     original_data.group = original_data.group.id;
     editable = Object.assign(editable, original_data);
   });
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
   let orgs = [];
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
     orgs = val;
@@ -68,6 +77,59 @@
       })
       .catch((err) => {});
   }
+  function generateSponsoringContract(locale) {
+    sponsoring_contracts_download_open = false;
+    const toast = Toastify({
+      text: $_("generating-pdf"),
+      duration: -1,
+    }).showToast();
+    fetch(
+      `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify([original_data_pdf]),
+      }
+    )
+      .then((response) => {
+        if (response.status != "200") {
+          toast.hideToast();
+          Toastify({
+            text: $_("pdf-generation-failed"),
+            duration: 3500,
+            backgroundColor:
+              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+          }).showToast();
+        } else {
+          return response.blob();
+        }
+      })
+      .then((blob) => {
+        const url = window.URL.createObjectURL(blob);
+        let a = document.createElement("a");
+        a.href = url;
+        a.download =
+          "Sponsoring_" +
+          original_data.firstname +
+          (original_data.middlename || "") +
+          original_data.lastname +
+          ".pdf";
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        toast.hideToast();
+        Toastify({
+          text: $_("pdf-successfully-generated"),
+          duration: 3500,
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }).showToast();
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
 </script>
 
 {#await runner_promise}
@@ -132,58 +194,54 @@
               }}
               class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
           {/if}
-          <button
+          <div id="sponsoring:dropdown" class="relative inline-block">
-            on:click={() => {
+            <div>
-              const locale = getLocaleFromNavigator();
+              <button
-              const toast = Toastify({
+                on:click={() => {
-                text: $_('generating-pdf'),
+                  sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-                duration: -1,
+                }}
-              }).showToast();
+                type="button"
-              fetch(
+                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"
-                `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                id="options-menu"
-                {
+                aria-haspopup="true"
-                  method: 'POST',
+                aria-expanded="true">
-                  headers: {
+                {$_('generate-sponsoring-contract')}
-                    'Content-Type': 'application/json',
+                <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>
-                  body: JSON.stringify([original_data_pdf]),
+            </div>
-                }
+            {#if sponsoring_contracts_download_open}
-              )
+              <div
-                .then((response) => {
+                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-                  if (response.status != '200') {
+                id="sponsoring:dropdown:menu">
-                    toast.hideToast();
+                <div
-                    Toastify({
+                  class="py-1"
-                      text: $_('pdf-generation-failed'),
+                  role="menu"
-                      duration: 3500,
+                  aria-orientation="vertical"
-                      backgroundColor:
+                  aria-labelledby="options-menu">
-                        'linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)',
+                  <span
-                    }).showToast();
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                  } else {
+                  <button
-                    return response.blob();
+                    on:click={() => {
-                  }
+                      generateSponsoringContract('de');
-                })
+                    }}
-                .then((blob) => {
+                    type="submit"
-                  const url = window.URL.createObjectURL(blob);
+                    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 inline-flex"
-                  let a = document.createElement('a');
+                    role="menuitem">
-                  a.href = url;
+                    {$_('german')}
-                  a.download = 'Sponsoring_' + original_data.firstname + (original_data.middlename || '') + original_data.lastname + '.pdf';
+                  </button>
-                  document.body.appendChild(a);
+                  <button
-                  a.click();
+                    on:click={() => {
-                  a.remove();
+                      generateSponsoringContract('en');
-                  toast.hideToast();
+                    }}
-                  Toastify({
+                    type="submit"
-                    text: $_('pdf-successfully-generated'),
+                    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 inline-flex"
-                    duration: 3500,
+                    role="menuitem">
-                    backgroundColor:
+                    {$_('english')}
-                      'linear-gradient(to right, #00b09b, #96c93d)',
+                  </button>
-                  }).showToast();
+                </div>
-                })
+              </div>
-                .catch((err) => {
+            {/if}
-                  console.error(err);
+          </div>
-                });
-            }}
-            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">{$_('generate-sponsoring-contract')}</button>
           {#if !delete_triggered}
             <button
               on:click={() => {

src/components/runners/RunnersOverview.svelte

@@ -20,6 +20,7 @@
   $: filter__teams = selectedFilter_teams || [];
   $: filter__orgs = selectedFilter || [];
   $: filterGroupIDs = filter__teams.concat(filter__orgs).map((i) => i.value);
+  $: sponsoring_contracts_download_open = false;
   $: teams = [];
   $: orgs = [];
   $: mappedteams = teams.map(function (g) {
@@ -30,6 +31,14 @@
       return { value: g.id, label: g.name };
     })
     .concat(mappedteams);
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
   RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
     teams = val;
   });
@@ -42,6 +51,56 @@
     }
     return id.toString() === searchvalue;
   }
+  function generateSponsoringContract(locale) {
+    sponsoring_contracts_download_open = false;
+    const toast = Toastify({
+      text: $_("generating-pdf"),
+      duration: -1,
+    }).showToast();
+    fetch(
+      `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(
+          current_runners.filter((r) => r.is_selected === true)
+        ),
+      }
+    )
+      .then((response) => {
+        if (response.status != "200") {
+          toast.hideToast();
+          Toastify({
+            text: $_("pdf-generation-failed"),
+            duration: 3500,
+            backgroundColor:
+              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+          }).showToast();
+        } else {
+          return response.blob();
+        }
+      })
+      .then((blob) => {
+        const url = window.URL.createObjectURL(blob);
+        let a = document.createElement("a");
+        a.href = url;
+        a.download = "Sponsoring.pdf";
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        toast.hideToast();
+        Toastify({
+          text: $_("pdf-successfully-generated"),
+          duration: 3500,
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }).showToast();
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
 </script>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
@@ -78,62 +137,64 @@
       </div>
       <div class="h-12">
         {#if current_runners.some((r) => r.is_selected === true)}
-          <button
+          <div id="sponsoring:dropdown" class="relative inline-block">
-            on:click={() => {
+            <div>
-              const locale = getLocaleFromNavigator();
+              <button
-              const toast = Toastify({
+                on:click={() => {
-                text: $_('generating-pdf'),
+                  sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-                duration: -1,
+                }}
-              }).showToast();
+                type="button"
-              fetch(
+                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"
-                `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                id="options-menu"
-                {
+                aria-haspopup="true"
-                  method: 'POST',
+                aria-expanded="true">
-                  headers: {
+                {$_('generate-sponsoring-contracts')}
-                    'Content-Type': 'application/json',
+                <svg
-                  },
+                  xmlns="http://www.w3.org/2000/svg"
-                  body: JSON.stringify(
+                  width="24"
-                    current_runners.filter((r) => r.is_selected === true)
+                  height="24"
-                  ),
+                  viewBox="0 0 24 24"
-                }
+                  class="-mr-1 ml-2 h-5 w-5"><path
-              )
+                    fill="none"
-                .then((response) => {
+                    d="M0 0h24v24H0z" />
-                  if (response.status != '200') {
+                  <path
-                    toast.hideToast();
+                    fill="currentColor"
-                    Toastify({
+                    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>
-                      text: $_('pdf-generation-failed'),
+              </button>
-                      duration: 3500,
+            </div>
-                      backgroundColor:
+            {#if sponsoring_contracts_download_open}
-                        'linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)',
+              <div
-                    }).showToast();
+                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-                  } else {
+                id="sponsoring:dropdown:menu">
-                    return response.blob();
+                <div
-                  }
+                  class="py-1"
-                })
+                  role="menu"
-                .then((blob) => {
+                  aria-orientation="vertical"
-                  const url = window.URL.createObjectURL(blob);
+                  aria-labelledby="options-menu">
-                  let a = document.createElement('a');
+                  <span
-                  a.href = url;
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                  a.download = 'Sponsoring.pdf';
+                  <button
-                  document.body.appendChild(a);
+                    on:click={() => {
-                  a.click();
+                      generateSponsoringContract('de');
-                  a.remove();
+                    }}
-                  toast.hideToast();
+                    type="submit"
-                  Toastify({
+                    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 inline-flex"
-                    text: $_('pdf-successfully-generated'),
+                    role="menuitem">
-                    duration: 3500,
+                    {$_('german')}
-                    backgroundColor:
+                  </button>
-                      'linear-gradient(to right, #00b09b, #96c93d)',
+                  <button
-                  }).showToast();
+                    on:click={() => {
-                })
+                      generateSponsoringContract('en');
-                .catch((err) => {
+                    }}
-                  console.error(err);
+                    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 inline-flex"
-            }}
+                    role="menuitem">
-            type="button"
+                    {$_('english')}
-            class="w-full inline-flex 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:w-auto sm:text-sm">
+                  </button>
-            {$_('generate-sponsoring-contracts')}
+                </div>
-          </button>
+              </div>
+            {/if}
+          </div>
         {/if}
       </div>
       <div

src/components/teams/TeamDetail.svelte

@@ -24,6 +24,7 @@
   $: save_enabled = !data_changed;
   $: data_loaded = false;
   $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
+  $: sponsoring_contracts_download_open = false;
   //
   const promise = RunnerTeamService.runnerTeamControllerGetOne(
     params.teamid
@@ -43,6 +44,14 @@
   GroupContactService.groupContactControllerGetAll().then((val) => {
     contacts = val;
   });
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
   function deleteTeam() {
     RunnerTeamService.runnerTeamControllerRemove(original.id, false)
       .then((resp) => {
@@ -82,6 +91,55 @@
         .catch((err) => {});
     }
   }
+  async function generateSponsoringContract(locale) {
+    sponsoring_contracts_download_open = false;
+    const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+      teamdata.id
+    );
+    const toast = Toastify({
+      text: $_("generating-pdf"),
+      duration: -1,
+    }).showToast();
+    fetch(
+      `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(runners),
+      }
+    )
+      .then((response) => {
+        if (response.status != "200") {
+          toast.hideToast();
+          Toastify({
+            text: $_("pdf-generation-failed"),
+            duration: 3500,
+            backgroundColor:
+              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+          }).showToast();
+        } else {
+          return response.blob();
+        }
+      })
+      .then((blob) => {
+        const url = window.URL.createObjectURL(blob);
+        let a = document.createElement("a");
+        a.href = url;
+        a.download = "Sponsorings_" + teamdata.name + ".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) => {});
+  }
 </script>
 
 <ImportRunnerModal
@@ -100,57 +158,54 @@
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original.name}
       <span data-id="org_actions_${teamdata.id}">
-        <button
+        <div id="sponsoring:dropdown" class="relative inline-block">
-          on:click={async () => {
+          <div>
-            const locale = getLocaleFromNavigator();
+            <button
-            const runners = await RunnerTeamService.runnerTeamControllerGetRunners(teamdata.id);
+              on:click={() => {
-            const toast = Toastify({
+                sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-              text: $_('generating-pdf'),
+              }}
-              duration: -1,
+              type="button"
-            }).showToast();
+              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"
-            fetch(
+              id="options-menu"
-              `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+              aria-haspopup="true"
-              {
+              aria-expanded="true">
-                method: 'POST',
+              {$_('generate-sponsoring-contracts')}
-                headers: {
+              <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>
-                  'Content-Type': 'application/json',
+            </button>
-                },
+          </div>
-                body: JSON.stringify(runners),
+          {#if sponsoring_contracts_download_open}
-              }
+            <div
-            )
+              class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-              .then((response) => {
+              id="sponsoring:dropdown:menu">
-                if (response.status != '200') {
+              <div
-                  toast.hideToast();
+                class="py-1"
-                  Toastify({
+                role="menu"
-                    text: $_('pdf-generation-failed'),
+                aria-orientation="vertical"
-                    duration: 3500,
+                aria-labelledby="options-menu">
-                    backgroundColor:
+                <span
-                      'linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)',
+                  class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                  }).showToast();
+                <button
-                } else {
+                  on:click={() => {
-                  return response.blob();
+                    generateSponsoringContract('de');
-                }
+                  }}
-              })
+                  type="submit"
-              .then((blob) => {
+                  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 inline-flex"
-                const url = window.URL.createObjectURL(blob);
+                  role="menuitem">
-                let a = document.createElement('a');
+                  {$_('german')}
-                a.href = url;
+                </button>
-                a.download = 'Sponsorings_' + teamdata.name + '.pdf';
+                <button
-                document.body.appendChild(a);
+                  on:click={() => {
-                a.click();
+                    generateSponsoringContract('en');
-                a.remove();
+                  }}
-                toast.hideToast();
+                  type="submit"
-                Toastify({
+                  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 inline-flex"
-                  text: $_('pdf-successfully-generated'),
+                  role="menuitem">
-                  duration: 3500,
+                  {$_('english')}
-                  backgroundColor:
+                </button>
-                    'linear-gradient(to right, #00b09b, #96c93d)',
+              </div>
-                }).showToast();
+            </div>
-              })
+          {/if}
-              .catch((err) => {});
+        </div>
-          }}
-          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">{$_('generate-sponsoring-contracts')}</button>
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
           <button
             on:click={() => {
@@ -293,7 +348,9 @@
       </select>
     </div>
     <div class="text-sm w-full">
-      <label for="org" class="font-medium text-gray-700">{$_('organization')}</label>
+      <label
+        for="org"
+        class="font-medium text-gray-700">{$_('organization')}</label>
       <select
         name="org"
         bind:value={teamdata.parentGroup}

src/components/teams/TeamsOverview.svelte

@@ -8,6 +8,7 @@
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
+  $: sponsoring_contracts_download_open = false;
   export let current_teams = [];
   let modal_open = false;
   let delete_team = {};
@@ -17,6 +18,70 @@
   teams_promise.then((data) => {
     usersstore.set(data);
   });
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
+  async function generateSponsoringContract(locale) {
+    sponsoring_contracts_download_open = false;
+    const teams = current_teams.filter((r) => r.is_selected === true);
+    const toast = Toastify({
+      text: $_("generating-pdfs"),
+      duration: -1,
+    }).showToast();
+    let count = 0;
+    for await (const t of teams) {
+      count++;
+      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+        t.id
+      );
+      fetch(
+        `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(runners),
+        }
+      )
+        .then((response) => {
+          if (response.status != "200") {
+            toast.hideToast();
+            Toastify({
+              text: $_("pdf-generation-failed"),
+              duration: 3500,
+              backgroundColor:
+                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+            }).showToast();
+          } else {
+            return response.blob();
+          }
+        })
+        .then((blob) => {
+          const url = window.URL.createObjectURL(blob);
+          let a = document.createElement("a");
+          a.href = url;
+          a.download = "Sponsorings_" + t.name + ".pdf";
+          document.body.appendChild(a);
+          a.click();
+          a.remove();
+          if (count === teams.length) {
+            toast.hideToast();
+            Toastify({
+              text: $_("pdfs-successfully-generated"),
+              duration: 3500,
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            }).showToast();
+          }
+        })
+        .catch((err) => {});
+    }
+  }
 </script>
 
 <ConfirmTeamDeletion
@@ -46,66 +111,54 @@
         class="gridjs-input gridjs-search-input mb-4" />
       <div class="h-12">
         {#if current_teams.some((r) => r.is_selected === true)}
-          <button
+        <div id="sponsoring:dropdown" class="relative inline-block">
-            on:click={async () => {
+          <div>
-              const locale = getLocaleFromNavigator();
+            <button
-              const teams = current_teams.filter((r) => r.is_selected === true);
+              on:click={() => {
-              const toast = Toastify({
+                sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-                text: $_('generating-pdfs'),
+              }}
-                duration: -1,
+              type="button"
-              }).showToast();
+              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"
-              let count = 0;
+              id="options-menu"
-              for await (const t of teams) {
+              aria-haspopup="true"
-                count++;
+              aria-expanded="true">
-                const runners = await RunnerTeamService.runnerTeamControllerGetRunners(t.id);
+              {$_('generate-sponsoring-contracts')}
-                fetch(
+              <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>
-                  `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+            </button>
-                  {
+          </div>
-                    method: 'POST',
+          {#if sponsoring_contracts_download_open}
-                    headers: {
+            <div
-                      'Content-Type': 'application/json',
+              class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-                    },
+              id="sponsoring:dropdown:menu">
-                    body: JSON.stringify(runners),
+              <div
-                  }
+                class="py-1"
-                )
+                role="menu"
-                  .then((response) => {
+                aria-orientation="vertical"
-                    if (response.status != '200') {
+                aria-labelledby="options-menu">
-                      toast.hideToast();
+                <span
-                      Toastify({
+                  class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                        text: $_('pdf-generation-failed'),
+                <button
-                        duration: 3500,
+                  on:click={() => {
-                        backgroundColor:
+                    generateSponsoringContract('de');
-                          'linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)',
+                  }}
-                      }).showToast();
+                  type="submit"
-                    } else {
+                  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 inline-flex"
-                      return response.blob();
+                  role="menuitem">
-                    }
+                  {$_('german')}
-                  })
+                </button>
-                  .then((blob) => {
+                <button
-                    const url = window.URL.createObjectURL(blob);
+                  on:click={() => {
-                    let a = document.createElement('a');
+                    generateSponsoringContract('en');
-                    a.href = url;
+                  }}
-                    a.download = 'Sponsorings_' + t.name + '.pdf';
+                  type="submit"
-                    document.body.appendChild(a);
+                  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 inline-flex"
-                    a.click();
+                  role="menuitem">
-                    a.remove();
+                  {$_('english')}
-                    if (count === teams.length) {
+                </button>
-                      toast.hideToast();
+              </div>
-                      Toastify({
+            </div>
-                        text: $_('pdfs-successfully-generated'),
+          {/if}
-                        duration: 3500,
+        </div>
-                        backgroundColor:
-                          'linear-gradient(to right, #00b09b, #96c93d)',
-                      }).showToast();
-                    }
-                  })
-                  .catch((err) => {});
-              }
-            }}
-            type="button"
-            class="w-full inline-flex 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:w-auto sm:text-sm">
-            {$_('generate-sponsoring-contracts')}
-          </button>
         {/if}
       </div>
       <div

src/locales/de.json

@@ -128,6 +128,7 @@
     "edit": "Bearbeiten",
     "edit-permissions": "Berechtigungen bearbeiten",
     "email_address_or_username": "E-Mail-Adresse/ Benutzername",
+    "english": "Englisch",
     "error_on_login": "😢Fehler beim Login",
     "erteilte": "Direkt erteilte",
     "everything-is-more-fun-together": "Im Team macht's mehr Spaß 🏃‍♂️🏃‍♀️🏃‍♂️",
@@ -145,6 +146,7 @@
     "generating-pdf": "Pdf wird generiert...",
     "generating-pdfs": "PDFs werden generiert...",
     "generic-ui-logic-error": "Etwas ist in der Benutzeroberfläche schiefgelaufen.",
+    "german": "Deutsch",
     "go-to-login": "Zum Login",
     "goback": "Zur Startseite",
     "granted": "Gewährt",
@@ -249,6 +251,7 @@
     "save-changes": "Änderungen speichern",
     "search-for-permission": "Berechtigungen durchsuchen",
     "select-all": "Alle auswählen",
+    "select-language": "Sprache auswählen",
     "send-a-mail-to-lfk-odit-services": "Sende eine Mail an lfk@odit.services",
     "set-the-user-active-inactive": "Den Benutzer auf (in)aktiv setzen",
     "settings": "Einstellungen",

src/locales/en.json

@@ -128,6 +128,7 @@
     "edit": "Edit",
     "edit-permissions": "edit permissions",
     "email_address_or_username": "Email / username",
+    "english": "English",
     "error_on_login": "Error on login",
     "erteilte": "Directly granted",
     "everything-is-more-fun-together": "everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️",
@@ -145,6 +146,7 @@
     "generating-pdf": "generating PDF...",
     "generating-pdfs": "generating PDFs...",
     "generic-ui-logic-error": "Something went wrong in the UI logic",
+    "german": "German",
     "go-to-login": "Go To Login",
     "goback": "Go Home",
     "granted": "granted",
@@ -249,6 +251,7 @@
     "save-changes": "Save Changes",
     "search-for-permission": "Search for permission",
     "select-all": "select all",
+    "select-language": "Select language",
     "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
     "set-the-user-active-inactive": "set the user active/ inactive",
     "settings": "Settings",