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

wip

Browse Source
This commit is contained in:
Philipp Dormann 2025-04-28 10:24:07 +02:00
parent 8cb6093f0b
commit a21f61f3f3
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
2 changed files with 391 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
src/components/donations/AddDonationModal.svelte
View File

@ -21,6 +21,7 @@
$: runner = 0; $: runner = 0;
$: donors = []; $: donors = [];
$: runners = []; $: runners = [];
$: type = "distance";
$: is_fixed = false; $: is_fixed = false;
$: is_paid = false; $: is_paid = false;
$: amount_input = 0; $: amount_input = 0;
@ -100,16 +101,12 @@
} }
onMount(async () => { onMount(async () => {
donors = (await DonorService.donorControllerGetAll()).map( donors = (await DonorService.donorControllerGetAll()).map((r) => {
(r) => {
return { label: getDonorLabel(r), value: r }; return { label: getDonorLabel(r), value: r };
} });
); runners = (await RunnerService.runnerControllerGetAll()).map((r) => {
runners = (await RunnerService.runnerControllerGetAll()).map(
(r) => {
return { label: getDonorLabel(r), value: r }; return { label: getDonorLabel(r), value: r };
} });
);
}); });
</script> </script>
@ -126,7 +123,7 @@
> >
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> <div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div <div
class="absolute inset-0 bg-gray-500 opacity-75" class="absolute inset-0 bg-neutral-500 opacity-75"
data-id="modal_backdrop" data-id="modal_backdrop"
/> />
</div> </div>
@ -159,40 +156,97 @@
> >
</div> </div>
<div class="mt-3"> <div class="mt-3">
<h3 class="text-lg leading-6 font-medium text-gray-900"> <h3 class="text-lg leading-6 font-medium text-neutral-900">
{#if is_fixed} Sponsoring erstellen
{$_("create-a-new-fixed-donation")}
{:else}{$_("create-a-new-distance-donation")}{/if}
</h3> </h3>
<label class="content-center align-middle object-center"> <nav
<span class="text-base" class:text-gray-300={is_fixed} class="relative z-0 flex border border-neutral-200 rounded-xl overflow-hidden mb-2"
>{$_("distance-donation")}</span
> >
<input <button
class="toggle relative w-10 h-5 transition-all duration-200 ease-in-out bg-gray-400 rounded-full shadow-inner outline-none appearance-none align-middle" on:click={() => {
type="checkbox" type = "distance";
bind:checked={is_fixed} }}
/> type="button"
<span class="ml-2 text-base" class:text-gray-300={!is_fixed} id="bar-with-underline-item-1"
>{$_("fixed-donation")}</span class:donation_active_tab={type === "distance"}
class:donation_inactive_tab={type !== "distance"}
aria-selected={type === "distance"}
role="tab"
> >
</label> Spende pro km
<div class="mb-6"> </button>
<p class="text-sm text-gray-500"> <button
{$_( on:click={() => {
"please-provide-the-nessecary-information-to-create-a-new-donation" type = "fixed";
)} }}
</p> type="button"
</div> id="bar-with-underline-item-2"
class:donation_active_tab={type === "fixed"}
class:donation_inactive_tab={type !== "fixed"}
aria-selected={type === "fixed"}
role="tab"
>
Festbetrag
</button>
<button
on:click={() => {
type = "anonymous";
}}
type="button"
id="bar-with-underline-item-3"
class:donation_active_tab={type === "anonymous"}
class:donation_inactive_tab={type !== "anonymous"}
aria-selected={type === "anonymous"}
role="tab"
>
Anonyme Spende
</button>
</nav>
<div class="grid grid-cols-6 gap-2 lg:gap-6 text-left"> <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
{#if type === "anonymous"}
<div class="col-span-6">
<label
for="donation_amount_eur"
class="block text-sm font-medium text-neutral-900"
>
{$_("donation-amount")}</label
>
<div class="mt-1 flex rounded-md shadow-sm">
<input
autocomplete="off"
class:border-red-500={!is_amount_valid}
class:focus:border-red-500={!is_amount_valid}
class:focus:ring-red-500={!is_amount_valid}
bind:value={amount_input}
type="number"
step="0.01"
name="donation_amount_eur"
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
placeholder="2.00"
/>
<span
class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
>€</span
>
</div>
{#if !is_amount_valid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
>
{$_("donation-amount-must-be-greater-that-0-00eur")}
</span>
{/if}
</div>
{:else}
<div class="col-span-6"> <div class="col-span-6">
<label <label
for="donor" for="donor"
class="block text-sm font-medium text-gray-700" class="block text-sm font-medium text-neutral-900"
>{$_("donor")}</label >{$_("donor")}</label
> >
<Select <Select
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 rounded-md p-2"
itemFilter={(label, filterText, option) => itemFilter={(label, filterText, option) =>
filterDonors(label, filterText, option)} filterDonors(label, filterText, option)}
items={donors} items={donors}
@ -208,11 +262,11 @@
<div class="col-span-6"> <div class="col-span-6">
<label <label
for="donor" for="donor"
class="block text-sm font-medium text-gray-700" class="block text-sm font-medium text-neutral-900"
>{$_("runner")}</label >{$_("runner")}</label
> >
<Select <Select
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 rounded-md p-2"
itemFilter={(label, filterText, option) => itemFilter={(label, filterText, option) =>
filterDonors(label, filterText, option)} filterDonors(label, filterText, option)}
items={runners} items={runners}
@ -228,7 +282,7 @@
<div class="col-span-6"> <div class="col-span-6">
<label <label
for="donation_amount_eur" for="donation_amount_eur"
class="block text-sm font-medium text-gray-700" class="block text-sm font-medium text-neutral-900"
> >
{#if !is_fixed} {#if !is_fixed}
{$_("amount-per-kilometer")} {$_("amount-per-kilometer")}
@ -244,11 +298,11 @@
type="number" type="number"
step="0.01" step="0.01"
name="donation_amount_eur" name="donation_amount_eur"
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
placeholder="2.00" placeholder="2.00"
/> />
<span <span
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm" class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
>€</span >€</span
> >
</div> </div>
@ -264,16 +318,16 @@
<div class="col-span-6"> <div class="col-span-6">
<label <label
for="paid" for="paid"
class="block text-sm font-medium text-gray-700" class="block text-sm font-medium text-neutral-900"
>{$_("already-paid")}</label >{$_("already-paid")}</label
> >
<p class="text-gray-500"> <p class="text-neutral-500">
<input <input
id="paid" id="paid"
bind:checked={is_paid} bind:checked={is_paid}
name="paid" name="paid"
type="checkbox" type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-neutral-300 rounded"
/> />
<span class="align-text-bottom"> <span class="align-text-bottom">
{#if is_paid} {#if is_paid}
@ -285,11 +339,14 @@
</p> </p>
</div> </div>
{/if} {/if}
{/if}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10"> <div
class="bg-neutral-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10"
>
<button <button
disabled={!createbtnenabled} disabled={!createbtnenabled}
class:opacity-50={!createbtnenabled} class:opacity-50={!createbtnenabled}
@ -304,7 +361,7 @@
modal_open = false; modal_open = false;
}} }}
type="button" type="button"
class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block" class="w-full justify-center rounded-md border border-neutral-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-neutral-900 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
> >
{$_("cancel")} {$_("cancel")}
</button> </button>

6
src/style.css
View File

@ -25,3 +25,9 @@
#html5-qrcode-button-camera-stop { #html5-qrcode-button-camera-stop {
@apply px-2 inline-flex text-lg leading-5 font-semibold rounded-md border border-current bg-red-100 text-red-800 mb-2 cursor-pointer; @apply px-2 inline-flex text-lg leading-5 font-semibold rounded-md border border-current bg-red-100 text-red-800 mb-2 cursor-pointer;
} }
.donation_inactive_tab {
@apply min-w-0 flex-1 bg-white first:border-s-0 border-s border-b-2 border-neutral-200 py-4 px-4 text-neutral-800 hover:text-neutral-700 text-sm font-medium text-center overflow-hidden hover:bg-neutral-200 cursor-pointer focus:z-10 focus:outline-hidden focus:bg-neutral-200 disabled:opacity-50 disabled:pointer-events-none;
}
.donation_active_tab {
@apply min-w-0 flex-1 bg-blue-400 text-white first:border-s-0 border-s border-b-2 border-neutral-200 py-4 px-4 text-sm font-medium text-center overflow-hidden cursor-pointer focus:outline-hidden;
}