lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

feat: improve fonts + button positions

Browse Source
This commit is contained in:
Philipp Dormann 2025-03-20 21:29:10 +01:00
parent 975f145444
commit c37fb98bed
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
9 changed files with 1259 additions and 1387 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/dashboard/Dashboard.svelte
View File

@ -25,7 +25,7 @@
<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation"> <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
<a <a
class:activenav={$router.path === "/"} class:activenav={$router.path === "/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/" href="/"
> >
<svg <svg
@ -43,7 +43,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
<a <a
class:activenav={$router.path === "/runners/"} class:activenav={$router.path === "/runners/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/runners/" href="/runners/"
> >
<svg <svg
@ -64,7 +64,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
<a <a
class:activenav={$router.path === "/teams/"} class:activenav={$router.path === "/teams/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/teams/" href="/teams/"
> >
<svg <svg
@ -85,7 +85,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
<a <a
class:activenav={$router.path.includes("/orgs/")} class:activenav={$router.path.includes("/orgs/")}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/orgs/" href="/orgs/"
> >
<svg <svg
@ -106,7 +106,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
<a <a
class:activenav={$router.path.includes("/donors/")} class:activenav={$router.path.includes("/donors/")}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/donors/" href="/donors/"
> >
<svg <svg
@ -127,7 +127,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
<a <a
class:activenav={$router.path.includes("/donations/")} class:activenav={$router.path.includes("/donations/")}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/donations/" href="/donations/"
> >
<svg <svg
@ -148,7 +148,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")}
<a <a
class:activenav={$router.path === "/tracks/"} class:activenav={$router.path === "/tracks/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/tracks/" href="/tracks/"
> >
<svg <svg
@ -169,7 +169,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
<a <a
class:activenav={$router.path === "/cards/"} class:activenav={$router.path === "/cards/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/cards/" href="/cards/"
> >
<svg <svg
@ -192,7 +192,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
<a <a
class:activenav={$router.path === "/scans/"} class:activenav={$router.path === "/scans/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/scans/" href="/scans/"
> >
<svg <svg
@ -214,7 +214,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
<a <a
class:activenav={$router.path === "/contacts/"} class:activenav={$router.path === "/contacts/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/contacts/" href="/contacts/"
> >
<svg <svg
@ -235,7 +235,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
<a <a
class:activenav={$router.path === "/scanstations/"} class:activenav={$router.path === "/scanstations/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/scanstations/" href="/scanstations/"
> >
<svg <svg
@ -257,7 +257,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
<a <a
class:activenav={$router.path === "/statsclients/"} class:activenav={$router.path === "/statsclients/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/statsclients/" href="/statsclients/"
> >
<svg <svg
@ -279,7 +279,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
<a <a
class:activenav={$router.path === "/users/"} class:activenav={$router.path === "/users/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/users/" href="/users/"
> >
<svg <svg
@ -300,7 +300,7 @@
{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
<a <a
class:activenav={$router.path === "/groups/"} class:activenav={$router.path === "/groups/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/groups/" href="/groups/"
> >
<svg <svg
@ -320,7 +320,7 @@
{/if} {/if}
<a <a
class:activenav={$router.path === "/settings/"} class:activenav={$router.path === "/settings/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/settings/" href="/settings/"
> >
<svg <svg
@ -339,7 +339,7 @@
</a> </a>
<a <a
class:activenav={$router.path === "/about/"} class:activenav={$router.path === "/about/"}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
href="/about/" href="/about/"
> >
<svg <svg
@ -358,7 +358,7 @@
</a> </a>
<button <button
tabindex="0" tabindex="0"
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full" class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
on:click={() => { on:click={() => {
AuthService.authControllerLogout(); AuthService.authControllerLogout();
logout(); logout();

12
src/components/donations/DonationDetail.svelte
View File

@ -173,19 +173,19 @@
{$_("fixed-donation")}: {$_("fixed-donation")}:
{amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€ {amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
{/if} {/if}
<span data-id="donation_actions_${original_data.id}"> <div data-id="donation_actions_${original_data.id}">
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")} {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
{#if delete_triggered} {#if delete_triggered}
<button <button
on:click={deleteDonation} on:click={deleteDonation}
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
>{$_("confirm-deletion")}</button >{$_("confirm-deletion")}</button
> >
<button <button
on:click={() => { on:click={() => {
delete_triggered = !delete_triggered; delete_triggered = !delete_triggered;
}} }}
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
>{$_("cancel")}</button >{$_("cancel")}</button
> >
{/if} {/if}
@ -195,7 +195,7 @@
delete_triggered = true; delete_triggered = true;
}} }}
type="button" type="button"
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
>{$_("delete-donation")}</button >{$_("delete-donation")}</button
> >
{/if} {/if}
@ -206,11 +206,11 @@
class:opacity-50={!save_enabled} class:opacity-50={!save_enabled}
type="button" type="button"
on:click={submit} on:click={submit}
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
>{$_("save-changes")}</button >{$_("save-changes")}</button
> >
{/if} {/if}
</span> </div>
</div> </div>
<!-- --> <!-- -->
<div> <div>

13
src/components/donors/DonorDetail.svelte
View File

@ -144,19 +144,20 @@
{original_data.firstname} {original_data.firstname}
{original_data.middlename || ""} {original_data.middlename || ""}
{original_data.lastname} {original_data.lastname}
<span data-id="donor_actions_${editable.id}"> <div data-id="donor_actions_${editable.id}">
<p class="text-base">Aktionen</p>
{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:DELETE")} {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:DELETE")}
{#if delete_triggered} {#if delete_triggered}
<button <button
on:click={deleteDonor} on:click={deleteDonor}
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
>{$_("confirm-deletion")}</button >{$_("confirm-deletion")}</button
> >
<button <button
on:click={() => { on:click={() => {
delete_triggered = !delete_triggered; delete_triggered = !delete_triggered;
}} }}
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
>{$_("cancel")}</button >{$_("cancel")}</button
> >
{/if} {/if}
@ -166,7 +167,7 @@
delete_triggered = true; delete_triggered = true;
}} }}
type="button" type="button"
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
>{$_("delete-donor")}</button >{$_("delete-donor")}</button
> >
{/if} {/if}
@ -177,11 +178,11 @@
class:opacity-50={!save_enabled} class:opacity-50={!save_enabled}
type="button" type="button"
on:click={submit} on:click={submit}
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
>{$_("save-changes")}</button >{$_("save-changes")}</button
> >
{/if} {/if}
</span> </div>
</div> </div>
<!-- --> <!-- -->
<div> <div>

116
src/components/pdf_generation/GenerateRunnerCards.svelte
View File

@ -1,33 +1,27 @@
<script> <script>
import { getLocaleFromNavigator, _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { import {
RunnerCardService, RunnerCardService,
RunnerOrganizationService, RunnerOrganizationService,
RunnerTeamService, RunnerTeamService,
} from "@odit/lfk-client-js"; } from "@odit/lfk-client-js";
import toast from 'svelte-french-toast' import toast from "svelte-french-toast";
import DocumentServer from "./DocumentServer.ts" import DocumentServer from "./DocumentServer.ts";
import { init } from "@paralleldrive/cuid2"; import { init } from "@paralleldrive/cuid2";
const createId = init({ length: 10, fingerprint: "lfk-frontend" }); const createId = init({ length: 10, fingerprint: "lfk-frontend" });
const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key); const documentServer = new DocumentServer(
config.baseurl_documentserver,
config.documentserver_key
);
export let cards_show = false; export let cards_show = false;
export let generate_cards = []; export let generate_cards = [];
export let generate_runners = []; export let generate_runners = [];
export let generate_orgs = []; export let generate_orgs = [];
export let generate_teams = []; export let generate_teams = [];
$: cards_dropdown_open = false;
document.addEventListener("click", function (e) {
if (
e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
) {
cards_dropdown_open = false;
}
});
function download (blob, fileName){ function download(blob, fileName) {
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
let a = document.createElement("a"); let a = document.createElement("a");
a.href = url; a.href = url;
@ -40,8 +34,6 @@
} }
function generateRunnerCards(locale) { function generateRunnerCards(locale) {
cards_dropdown_open = false;
if (generate_orgs.length > 0) { if (generate_orgs.length > 0) {
generateOrgCards(locale); generateOrgCards(locale);
} else if (generate_teams.length > 0) { } else if (generate_teams.length > 0) {
@ -55,7 +47,8 @@
function generateCards(locale) { function generateCards(locale) {
toast.loading($_("generating-pdf")); toast.loading($_("generating-pdf"));
documentServer.generateCards(generate_cards, locale) documentServer
.generateCards(generate_cards, locale)
.then((blob) => { .then((blob) => {
download(blob, `${$_("runnercards")}-${locale}-${createId()}.pdf`); download(blob, `${$_("runnercards")}-${locale}-${createId()}.pdf`);
}) })
@ -77,7 +70,8 @@
} }
cards.push(card); cards.push(card);
} }
documentServer.generateCards(cards, locale) documentServer
.generateCards(cards, locale)
.then((blob) => { .then((blob) => {
let fileName = `${$_("runnercards")}-${locale}-${createId()}.pdf`; let fileName = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
if (generate_runners.length == 1) { if (generate_runners.length == 1) {
@ -108,11 +102,13 @@
} }
cards.push(card); cards.push(card);
} }
documentServer.generateCards(cards, locale) documentServer
.generateCards(cards, locale)
.then((blob) => { .then((blob) => {
download(blob, `${$_("runnercards")}_${ download(
t.name blob,
}-${locale}-${createId()}.pdf`) `${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`
);
}) })
.catch((err) => {}); .catch((err) => {});
} }
@ -141,11 +137,13 @@
} }
cards.push(card); cards.push(card);
} }
await documentServer.generateCards(cards, locale) await documentServer
.generateCards(cards, locale)
.then((blob) => { .then((blob) => {
download(blob, `${$_("runnercards")}_${ download(
o.name blob,
}_direct-${locale}-${createId()}.pdf`) `${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`
);
}) })
.catch((err) => {}); .catch((err) => {});
for (const t of o.teams) { for (const t of o.teams) {
@ -163,11 +161,15 @@
} }
cards.push(card); cards.push(card);
} }
await documentServer.generateCards(cards, locale) await documentServer
.generateCards(cards, locale)
.then((blob) => { .then((blob) => {
download(blob, `${$_("runnercards")}_${o.name}_${ download(
blob,
`${$_("runnercards")}_${o.name}_${
t.name t.name
}-${locale}-${createId()}.pdf`) }-${locale}-${createId()}.pdf`
);
}) })
.catch((err) => {}); .catch((err) => {});
} }
@ -176,69 +178,25 @@
</script> </script>
{#if cards_show} {#if cards_show}
<div id="cards:dropdown" class="relative inline-block">
<div> <div>
<button <p class="text-base">{$_("generate-runnercards")}</p>
on:click={() => { <div class="inline-flex rounded-lg shadow-2xs">
cards_dropdown_open = !cards_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-runnercards")}
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="-mr-1 ml-2 h-5 w-5"
><path 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 cards_dropdown_open}
<div
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
id="cards:dropdown:menu"
>
<div
class="py-1"
role="menu"
aria-orientation="vertical"
aria-labelledby="options-menu"
>
<span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
>{$_("select-language")}</span
>
<button <button
on:click={() => { on:click={() => {
generateRunnerCards("de"); generateRunnerCards("de");
}} }}
type="submit" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
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")} DE
</button> </button>
<button <button
on:click={() => { on:click={() => {
generateRunnerCards("en"); generateRunnerCards("en");
}} }}
type="submit" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
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")} EN
</button> </button>
</div> </div>
</div> </div>
{/if}
</div>
{/if} {/if}

110
src/components/pdf_generation/GenerateRunnerCertificates.svelte
View File

@ -9,26 +9,17 @@
import toast from "svelte-french-toast"; import toast from "svelte-french-toast";
import DocumentServer from "./DocumentServer"; import DocumentServer from "./DocumentServer";
const createId = init({ length: 10, fingerprint: "lfk-frontend" }); const createId = init({ length: 10, fingerprint: "lfk-frontend" });
const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key); const documentServer = new DocumentServer(
config.baseurl_documentserver,
config.documentserver_key
);
export let certificates_show = false; export let certificates_show = false;
export let generate_runners = []; export let generate_runners = [];
export let generate_orgs = []; export let generate_orgs = [];
export let generate_teams = []; 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) { function generateCertificates(locale) {
certificates_dropdown_open = false;
if (generate_orgs.length > 0) { if (generate_orgs.length > 0) {
generateOrgCertificates(locale); generateOrgCertificates(locale);
} else if (generate_teams.length > 0) { } else if (generate_teams.length > 0) {
@ -37,7 +28,7 @@
generateRunnerCertificates(locale); generateRunnerCertificates(locale);
} }
} }
function download (blob, fileName){ function download(blob, fileName) {
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
let a = document.createElement("a"); let a = document.createElement("a");
a.href = url; a.href = url;
@ -59,9 +50,10 @@
current_donations.filter((d) => d.runner?.id == runner.id) || []; current_donations.filter((d) => d.runner?.id == runner.id) || [];
certificateRunners.push(runner); certificateRunners.push(runner);
} }
documentServer.generateCertificates(certificateRunners, locale) documentServer
.generateCertificates(certificateRunners, locale)
.then((blob) => { .then((blob) => {
let fileName = `${$_("certificates")}-${locale}.pdf` let fileName = `${$_("certificates")}-${locale}.pdf`;
if (generate_runners.length == 1) { if (generate_runners.length == 1) {
fileName = `${$_("certificates")}_${ fileName = `${$_("certificates")}_${
generate_runners[0].firstname generate_runners[0].firstname
@ -87,12 +79,14 @@
current_donations.filter((d) => d.runner?.id == runner.id) || []; current_donations.filter((d) => d.runner?.id == runner.id) || [];
certificateRunners.push(runner); certificateRunners.push(runner);
} }
documentServer.generateCertificates(certificateRunners, locale) documentServer
.generateCertificates(certificateRunners, locale)
.then((blob) => { .then((blob) => {
count++; count++;
download(blob, `${$_("certificates")}_${ download(
t.name blob,
}-${locale}-${createId()}.pdf`) `${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`
);
}) })
.catch((err) => {}); .catch((err) => {});
} }
@ -118,11 +112,13 @@
current_donations.filter((d) => d.runner?.id == runner.id) || []; current_donations.filter((d) => d.runner?.id == runner.id) || [];
certificateRunners.push(runner); certificateRunners.push(runner);
} }
await documentServer.generateCertificates(certificateRunners, locale) await documentServer
.generateCertificates(certificateRunners, locale)
.then((blob) => { .then((blob) => {
download(blob, `${$_("certificates")}_${ download(
o.name blob,
}-${locale}-${createId()}.pdf`) `${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`
);
}) })
.catch((err) => {}); .catch((err) => {});
for (const t of o.teams) { for (const t of o.teams) {
@ -136,11 +132,15 @@
current_donations.filter((d) => d.runner?.id == runner.id) || []; current_donations.filter((d) => d.runner?.id == runner.id) || [];
certificateRunners.push(runner); certificateRunners.push(runner);
} }
await documentServer.generateCertificates(certificateRunners, locale) await documentServer
.generateCertificates(certificateRunners, locale)
.then((blob) => { .then((blob) => {
download(blob, `${$_("certificates")}_${o.name}_${ download(
blob,
`${$_("certificates")}_${o.name}_${
t.name t.name
}-${locale}-${createId()}.pdf`) }-${locale}-${createId()}.pdf`
);
if ( if (
count === o.teams.length && count === o.teams.length &&
count_orgs === generate_orgs.length count_orgs === generate_orgs.length
@ -156,69 +156,25 @@
</script> </script>
{#if certificates_show} {#if certificates_show}
<div id="certificates:dropdown" class="relative inline-block">
<div> <div>
<button <p class="text-base">{$_("generate-runner-certificates")}</p>
on:click={() => { <div class="inline-flex rounded-lg shadow-2xs">
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 z-10"
id="certificates:dropdown:menu"
>
<div
class="py-1"
role="menu"
aria-orientation="vertical"
aria-labelledby="options-menu"
>
<span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
>{$_("select-language")}</span
>
<button <button
on:click={() => { on:click={() => {
generateCertificates("de"); generateCertificates("de");
}} }}
type="submit" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
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")} DE
</button> </button>
<button <button
on:click={() => { on:click={() => {
generateCertificates("en"); generateCertificates("en");
}} }}
type="submit" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
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")} EN
</button> </button>
</div> </div>
</div> </div>
{/if}
</div>
{/if} {/if}

115
src/components/pdf_generation/GenerateSponsoringContracts.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import { getLocaleFromNavigator, _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { import {
RunnerOrganizationService, RunnerOrganizationService,
RunnerTeamService, RunnerTeamService,
@ -8,26 +8,17 @@
import { init } from "@paralleldrive/cuid2"; import { init } from "@paralleldrive/cuid2";
import toast from "svelte-french-toast"; import toast from "svelte-french-toast";
const createId = init({ length: 10, fingerprint: "lfk-frontend" }); const createId = init({ length: 10, fingerprint: "lfk-frontend" });
const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key); const documentServer = new DocumentServer(
config.baseurl_documentserver,
config.documentserver_key
);
export let sponsoring_contracts_show = false; export let sponsoring_contracts_show = false;
export let generate_runners = []; export let generate_runners = [];
export let generate_orgs = []; export let generate_orgs = [];
export let generate_teams = []; export let generate_teams = [];
$: sponsoring_contracts_download_open = false;
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 generateSponsoringContract(locale) { function generateSponsoringContract(locale) {
sponsoring_contracts_download_open = false;
if (generate_orgs.length > 0) { if (generate_orgs.length > 0) {
generateOrgContracts(locale); generateOrgContracts(locale);
} else if (generate_teams.length > 0) { } else if (generate_teams.length > 0) {
@ -36,7 +27,7 @@
generateRunnerContracts(locale); generateRunnerContracts(locale);
} }
} }
function download (blob, fileName){ function download(blob, fileName) {
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
let a = document.createElement("a"); let a = document.createElement("a");
a.href = url; a.href = url;
@ -56,11 +47,13 @@
const runners = await RunnerTeamService.runnerTeamControllerGetRunners( const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
t.id t.id
); );
documentServer.generateContracts(runners, locale) documentServer
.generateContracts(runners, locale)
.then((blob) => { .then((blob) => {
download(blob, `${$_("sponsorings")}_${ download(
t.name blob,
}-${locale}-${createId()}.pdf`) `${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`
);
}) })
.catch((err) => {}); .catch((err) => {});
} }
@ -77,11 +70,13 @@
o.id, o.id,
true true
); );
await documentServer.generateContracts(runners, locale) await documentServer
.generateContracts(runners, locale)
.then((blob) => { .then((blob) => {
download(blob, `${$_("sponsorings")}_${ download(
o.name blob,
}_direct-${locale}-${createId()}.pdf`) `${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`
);
}) })
.catch((err) => {}); .catch((err) => {});
for (const t of o.teams) { for (const t of o.teams) {
@ -89,11 +84,15 @@
let runners = await RunnerTeamService.runnerTeamControllerGetRunners( let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
t.id t.id
); );
await documentServer.generateContracts(runners, locale) await documentServer
.generateContracts(runners, locale)
.then((blob) => { .then((blob) => {
download(blob, `${$_("sponsorings")}_${o.name}_${ download(
blob,
`${$_("sponsorings")}_${o.name}_${
t.name t.name
}-${locale}-${createId()}.pdf`) }-${locale}-${createId()}.pdf`
);
}) })
.catch((err) => {}); .catch((err) => {});
} }
@ -102,11 +101,12 @@
function generateRunnerContracts(locale) { function generateRunnerContracts(locale) {
toast.loading($_("generating-pdf")); toast.loading($_("generating-pdf"));
documentServer.generateContracts(generate_runners, locale) documentServer
.generateContracts(generate_runners, locale)
.then((blob) => { .then((blob) => {
let fileName = `${$_("sponsorings")}-${locale}-${createId()}.pdf` let fileName = `${$_("sponsorings")}-${locale}-${createId()}.pdf`;
if (generate_runners.length == 1) { if (generate_runners.length == 1) {
fileName= `${$_("sponsorings")}_${generate_runners[0].firstname}_${ fileName = `${$_("sponsorings")}_${generate_runners[0].firstname}_${
generate_runners[0].lastname generate_runners[0].lastname
}-${locale}-${createId()}.pdf`; }-${locale}-${createId()}.pdf`;
} }
@ -119,70 +119,25 @@
</script> </script>
{#if sponsoring_contracts_show} {#if sponsoring_contracts_show}
<div id="sponsoring:dropdown" class="relative inline-block">
<div> <div>
<button <p class="text-base">{$_("generate-sponsoring-contracts")}</p>
on:click={() => { <div class="inline-flex rounded-lg shadow-2xs">
sponsoring_contracts_download_open =
!sponsoring_contracts_download_open;
}}
type="button"
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
id="options-menu"
aria-haspopup="true"
aria-expanded="true"
>
{$_("generate-sponsoring-contracts")}
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="-mr-1 ml-2 h-5 w-5"
><path 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 sponsoring_contracts_download_open}
<div
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
id="sponsoring:dropdown:menu"
>
<div
class="py-1"
role="menu"
aria-orientation="vertical"
aria-labelledby="options-menu"
>
<span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
>{$_("select-language")}</span
>
<button <button
on:click={() => { on:click={() => {
generateSponsoringContract("de"); generateSponsoringContract("de");
}} }}
type="submit" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
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")} DE
</button> </button>
<button <button
on:click={() => { on:click={() => {
generateSponsoringContract("en"); generateSponsoringContract("en");
}} }}
type="submit" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
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")} EN
</button> </button>
</div> </div>
</div> </div>
{/if}
</div>
{/if} {/if}

33
src/components/runners/RunnerDetail.svelte
View File

@ -144,8 +144,22 @@
{original_data.firstname} {original_data.firstname}
{original_data.middlename || ""} {original_data.middlename || ""}
{original_data.lastname} {original_data.lastname}
<span data-id="runner_actions_${editable.id}"> <span
class="grid md:grid-cols-3 gap-1 md:gap-2"
data-id="runner_actions_${editable.id}"
>
{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")} {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
<GenerateSponsoringContracts
bind:sponsoring_contracts_show
bind:generate_runners
/>
<GenerateRunnerCards bind:cards_show bind:generate_runners />
<GenerateRunnerCertificates
bind:certificates_show
bind:generate_runners
/>
<div>
<p class="text-base">Aktionen</p>
{#if delete_triggered} {#if delete_triggered}
<button <button
on:click={deleteRunner} on:click={deleteRunner}
@ -159,17 +173,7 @@
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
>{$_("cancel")}</button >{$_("cancel")}</button
> >
{/if} {:else}
<GenerateSponsoringContracts
bind:sponsoring_contracts_show
bind:generate_runners
/>
<GenerateRunnerCards bind:cards_show bind:generate_runners />
<GenerateRunnerCertificates
bind:certificates_show
bind:generate_runners
/>
{#if !delete_triggered}
<button <button
on:click={() => { on:click={() => {
delete_triggered = true; delete_triggered = true;
@ -178,9 +182,6 @@
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
>{$_("delete-runner")}</button >{$_("delete-runner")}</button
> >
{/if}
{/if}
{#if !delete_triggered}
<button <button
disabled={!save_enabled} disabled={!save_enabled}
class:opacity-50={!save_enabled} class:opacity-50={!save_enabled}
@ -190,6 +191,8 @@
>{$_("save-changes")}</button >{$_("save-changes")}</button
> >
{/if} {/if}
</div>
{/if}
</span> </span>
</div> </div>
<!-- --> <!-- -->

12
src/components/scans/ScanDetail.svelte
View File

@ -151,19 +151,19 @@
{runner.value?.middlename || ""} {runner.value?.middlename || ""}
{runner.value?.lastname} {runner.value?.lastname}
#{original_data.id} #{original_data.id}
<span data-id="donation_actions_${original_data.id}"> <div data-id="donation_actions_${original_data.id}">
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")} {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
{#if delete_triggered} {#if delete_triggered}
<button <button
on:click={deleteScan} on:click={deleteScan}
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
>{$_("confirm-deletion")}</button >{$_("confirm-deletion")}</button
> >
<button <button
on:click={() => { on:click={() => {
delete_triggered = !delete_triggered; delete_triggered = !delete_triggered;
}} }}
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
>{$_("cancel")}</button >{$_("cancel")}</button
> >
{/if} {/if}
@ -173,7 +173,7 @@
delete_triggered = true; delete_triggered = true;
}} }}
type="button" type="button"
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
>{$_("delete-scan")}</button >{$_("delete-scan")}</button
> >
{/if} {/if}
@ -184,11 +184,11 @@
class:opacity-50={!save_enabled} class:opacity-50={!save_enabled}
type="button" type="button"
on:click={submit} on:click={submit}
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
>{$_("save-changes")}</button >{$_("save-changes")}</button
> >
{/if} {/if}
</span> </div>
</div> </div>
<!-- --> <!-- -->
<div class="w-full inline-flex"> <div class="w-full inline-flex">

5
src/components/scanstations/ScanStationDetail.svelte
View File

@ -105,8 +105,7 @@
</div> </div>
</div> </div>
<div class="mb-8 text-3xl font-extrabold leading-tight"> <div class="mb-8 text-3xl font-extrabold leading-tight">
#{original_data.id} <div data-id="stations_actions_${editable.id}">
<span data-id="stations_actions_${editable.id}">
{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")} {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
{#if delete_triggered} {#if delete_triggered}
<button <button
@ -143,7 +142,7 @@
>{$_("save-changes")}</button >{$_("save-changes")}</button
> >
{/if} {/if}
</span> </div>
</div> </div>
<!-- --> <!-- -->
<div class="text-sm w-full"> <div class="text-sm w-full">