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-03-20 22:13:41 +01:00
parent 050a146ae0
commit 0a6cf619b0
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
14 changed files with 1324 additions and 1490 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/cards/CardStatus.svelte
View File

@ -5,12 +5,12 @@
{#if enabled} {#if enabled}
<span <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
>{$_("enabled")}</span >{$_("enabled")}</span
> >
{:else} {:else}
<span <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
>{$_("disabled")}</span >{$_("disabled")}</span
> >
{/if} {/if}

799
src/components/contacts/ContactDetail.svelte
View File

@ -1,414 +1,399 @@
<script> <script>
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import store from "../../store"; import store from "../../store";
import { import {
GroupContactService, GroupContactService,
RunnerTeamService, RunnerTeamService,
RunnerOrganizationService, RunnerOrganizationService,
} from "@odit/lfk-client-js"; } from "@odit/lfk-client-js";
import PromiseError from "../base/PromiseError.svelte"; import PromiseError from "../base/PromiseError.svelte";
import isEmail from "validator/es/lib/isEmail"; import isEmail from "validator/es/lib/isEmail";
import toast from "svelte-french-toast"; import toast from "svelte-french-toast";
let data_loaded = false; let data_loaded = false;
let orgs = []; let orgs = [];
let teams = []; let teams = [];
export let params; export let params;
$: delete_triggered = false; $: delete_triggered = false;
$: original_data = {}; $: original_data = {};
$: editable = {}; $: editable = {};
$: changes_performed = !( $: changes_performed = !(
JSON.stringify(original_data) === JSON.stringify(editable) JSON.stringify(original_data) === JSON.stringify(editable)
); );
$: isEmailValid = $: isEmailValid =
(editable.email || "") === "" || (editable.email || "") === "" ||
(editable.email && isEmail(editable.email || "")); (editable.email && isEmail(editable.email || ""));
$: isFirstnameValid = editable.firstname !== ""; $: isFirstnameValid = editable.firstname !== "";
$: isLastnameValid = editable.lastname !== ""; $: isLastnameValid = editable.lastname !== "";
$: save_enabled = $: save_enabled =
changes_performed && changes_performed &&
isFirstnameValid && isFirstnameValid &&
isLastnameValid && isLastnameValid &&
isEmailValid && isEmailValid &&
isPhoneValidOrEmpty && isPhoneValidOrEmpty &&
((isAddress1Valid && iszipcodevalid && iscityvalid) || ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
editable.address_checked === false); editable.address_checked === false);
const promise = GroupContactService.groupContactControllerGetOne( const promise = GroupContactService.groupContactControllerGetOne(
params.contact params.contact
).then((data) => { ).then((data) => {
data_loaded = true; data_loaded = true;
original_data = Object.assign(original_data, data); original_data = Object.assign(original_data, data);
editable = Object.assign(editable, original_data); editable = Object.assign(editable, original_data);
editable.groups = editable.groups.map((g) => g.id); editable.groups = editable.groups.map((g) => g.id);
original_data.groups = original_data.groups.map((g) => g.id); original_data.groups = original_data.groups.map((g) => g.id);
editable.address_checked = editable.address.address1 !== null; editable.address_checked = editable.address.address1 !== null;
original_data.address_checked = editable.address.address1 !== null; original_data.address_checked = editable.address.address1 !== null;
if (editable.address_checked === false) { if (editable.address_checked === false) {
editable.address = { editable.address = {
address1: "", address1: "",
address2: "", address2: "",
city: "", city: "",
postalcode: "", postalcode: "",
country: "", country: "",
}; };
} }
}); });
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => { RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
orgs = val; orgs = val;
}); });
RunnerTeamService.runnerTeamControllerGetAll().then((val) => { RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
teams = val; teams = val;
}); });
$: isPhoneValidOrEmpty = $: isPhoneValidOrEmpty =
editable.phone?.includes("+") || editable.phone?.includes("+") ||
editable.phone === "" || editable.phone === "" ||
editable.phone === null; editable.phone === null;
$: isAddress1Valid = editable.address?.address1?.trim().length !== 0; $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
$: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0; $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
$: iscityvalid = editable.address?.city?.trim().length !== 0; $: iscityvalid = editable.address?.city?.trim().length !== 0;
function submit() { function submit() {
if (data_loaded === true && save_enabled) { if (data_loaded === true && save_enabled) {
toast.loading($_("contact-is-being-updated")); toast.loading($_("contact-is-being-updated"));
editable.address.country = "DE"; editable.address.country = "DE";
if (editable.address_checked === false) { if (editable.address_checked === false) {
editable.address = null; editable.address = null;
} }
if (editable.email) editable.email = editable.email; if (editable.email) editable.email = editable.email;
if (editable.phone) editable.phone = editable.phone; if (editable.phone) editable.phone = editable.phone;
if (editable.middlename) editable.middlename = editable.middlename; if (editable.middlename) editable.middlename = editable.middlename;
GroupContactService.groupContactControllerPut(original_data.id, editable) GroupContactService.groupContactControllerPut(original_data.id, editable)
.then((resp) => { .then((resp) => {
Object.assign(original_data, editable); Object.assign(original_data, editable);
original_data = original_data; original_data = original_data;
toast.dismiss(); toast.dismiss();
toast.success($_("updated-contact")); toast.success($_("updated-contact"));
}) })
.catch((err) => {}); .catch((err) => {});
} else { } else {
} }
} }
function deleteContact() { function deleteContact() {
GroupContactService.groupContactControllerRemove(original_data.id, true) GroupContactService.groupContactControllerRemove(original_data.id, true)
.then((resp) => { .then((resp) => {
location.replace("./"); location.replace("./");
}) })
.catch((err) => {}); .catch((err) => {});
} }
</script> </script>
{#await promise} {#await promise}
{$_("loading-contact-details")} {$_("loading-contact-details")}
{:then} {:then}
<section class="container p-5 select-none"> <section class="container p-5 select-none">
<div class="flex flex-row mb-4"> <div class="flex flex-row mb-4">
<div class="w-full"> <div class="w-full">
<nav class="w-full flex"> <nav class="w-full flex">
<ol class="list-none flex flex-row items-center justify-start"> <ol class="list-none flex flex-row items-center justify-start">
<li class="flex items-center"> <li class="flex items-center">
<svg <a class="mr-2" href="./"
fill="currentColor" ><svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="24"
width="24" height="24"
height="24" viewBox="0 0 24 24"
><path fill="none" d="M0 0h24v24H0z" /> fill="none"
<path stroke="currentColor"
d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" stroke-width="2"
/></svg stroke-linecap="round"
> stroke-linejoin="round"
</li> class="inline-block"
<li class="flex items-center ml-2"> ><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
<a class="mr-2" href="./">{$_("contacts")}</a><svg >
stroke="currentColor" {$_("contacts")}</a
fill="none" >
stroke-width="2" </li>
viewBox="0 0 24 24" </ol>
stroke-linecap="round" </nav>
stroke-linejoin="round" </div>
class="h-3 w-3 mr-2 stroke-current" </div>
height="1em" <div class="mb-8 text-3xl font-extrabold leading-tight">
width="1em" {original_data.firstname}
xmlns="http://www.w3.org/2000/svg" {original_data.middlename || ""}
><line x1="5" y1="12" x2="19" y2="12" /> {original_data.lastname}
<polyline points="12 5 19 12 12 19" /></svg <div data-id="contact_actions_${editable.id}">
> {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:DELETE")}
</li> {#if delete_triggered}
<li class="flex items-center"> <button
<span class="mr-2" on:click={deleteContact}
>{original_data.firstname} 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"
{original_data.middlename || ""} >{$_("confirm-deletion")}</button
{original_data.lastname}</span >
> <button
</li> on:click={() => {
</ol> delete_triggered = !delete_triggered;
</nav> }}
</div> 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"
</div> >{$_("cancel")}</button
<div class="mb-8 text-3xl font-extrabold leading-tight"> >
<div data-id="contact_actions_${editable.id}"> {/if}
{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:DELETE")} {#if !delete_triggered}
{#if delete_triggered} <button
<button on:click={() => {
on:click={deleteContact} delete_triggered = true;
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 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:w-auto sm:text-sm"
<button >{$_("delete-contact")}</button
on:click={() => { >
delete_triggered = !delete_triggered; {/if}
}} {/if}
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" {#if !delete_triggered}
>{$_("cancel")}</button <button
> disabled={!save_enabled}
{/if} class:opacity-50={!save_enabled}
{#if !delete_triggered} type="button"
<button on:click={submit}
on:click={() => { 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"
delete_triggered = true; >{$_("save-changes")}</button
}} >
type="button" {/if}
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" </div>
>{$_("delete-contact")}</button </div>
> <!-- -->
{/if} <div class="text-sm w-full">
{/if} <label for="firstname" class="font-medium text-gray-700"
{#if !delete_triggered} >{$_("first-name")}</label
<button >
disabled={!save_enabled} <input
class:opacity-50={!save_enabled} autocomplete="off"
type="button" placeholder={$_("first-name")}
on:click={submit} type="text"
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" class:border-red-500={!isFirstnameValid}
>{$_("save-changes")}</button class:focus:border-red-500={!isFirstnameValid}
> class:focus:ring-red-500={!isFirstnameValid}
{/if} bind:value={editable.firstname}
</div> name="firstname"
</div> class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
<!-- --> />
<div class="text-sm w-full"> {#if !isFirstnameValid}
<label for="firstname" class="font-medium text-gray-700" <span
>{$_("first-name")}</label class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
> >
<input {$_("first-name-is-required")}
autocomplete="off" </span>
placeholder={$_("first-name")} {/if}
type="text" </div>
class:border-red-500={!isFirstnameValid} <div class="text-sm w-full">
class:focus:border-red-500={!isFirstnameValid} <label for="middlename" class="font-medium text-gray-700"
class:focus:ring-red-500={!isFirstnameValid} >{$_("middle-name")}</label
bind:value={editable.firstname} >
name="firstname" <input
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" autocomplete="off"
/> placeholder={$_("middle-name")}
{#if !isFirstnameValid} type="text"
<span bind:value={editable.middlename}
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1" name="middlename"
> class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
{$_("first-name-is-required")} />
</span> </div>
{/if} <div class="text-sm w-full">
</div> <label for="lastname" class="font-medium text-gray-700"
<div class="text-sm w-full"> >{$_("last-name")}</label
<label for="middlename" class="font-medium text-gray-700" >
>{$_("middle-name")}</label <input
> autocomplete="off"
<input placeholder={$_("last-name")}
autocomplete="off" type="text"
placeholder={$_("middle-name")} bind:value={editable.lastname}
type="text" class:border-red-500={!isLastnameValid}
bind:value={editable.middlename} class:focus:border-red-500={!isLastnameValid}
name="middlename" class:focus:ring-red-500={!isLastnameValid}
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" name="lastname"
/> class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
</div> />
<div class="text-sm w-full"> {#if !isLastnameValid}
<label for="lastname" class="font-medium text-gray-700" <span
>{$_("last-name")}</label class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
> >
<input {$_("last-name-is-required")}
autocomplete="off" </span>
placeholder={$_("last-name")} {/if}
type="text" </div>
bind:value={editable.lastname} <div class="text-sm w-full">
class:border-red-500={!isLastnameValid} <label for="email" class="font-medium text-gray-700"
class:focus:border-red-500={!isLastnameValid} >{$_("e-mail-adress")}</label
class:focus:ring-red-500={!isLastnameValid} >
name="lastname" <input
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" autocomplete="off"
/> placeholder={$_("e-mail-adress")}
{#if !isLastnameValid} type="email"
<span bind:value={editable.email}
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1" class:border-red-500={!isEmailValid}
> class:focus:border-red-500={!isEmailValid}
{$_("last-name-is-required")} class:focus:ring-red-500={!isEmailValid}
</span> name="email"
{/if} class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
</div> />
<div class="text-sm w-full"> {#if !isEmailValid}
<label for="email" class="font-medium text-gray-700" <span
>{$_("e-mail-adress")}</label class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
> >
<input {$_("valid-email-is-required")}
autocomplete="off" </span>
placeholder={$_("e-mail-adress")} {/if}
type="email" </div>
bind:value={editable.email} <div class="text-sm w-full">
class:border-red-500={!isEmailValid} <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
class:focus:border-red-500={!isEmailValid} <input
class:focus:ring-red-500={!isEmailValid} autocomplete="off"
name="email" placeholder={$_("phone")}
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" type="tel"
/> class:border-red-500={!isPhoneValidOrEmpty}
{#if !isEmailValid} class:focus:border-red-500={!isPhoneValidOrEmpty}
<span class:focus:ring-red-500={!isPhoneValidOrEmpty}
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1" bind:value={editable.phone}
> name="phone"
{$_("valid-email-is-required")} class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
</span> />
{/if} {#if !isPhoneValidOrEmpty}
</div> <span
<div class="text-sm w-full"> class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
<label for="phone" class="font-medium text-gray-700">{$_("phone")}</label> >
<input {$_("valid-international-phone-number-is-required")}
autocomplete="off" </span>
placeholder={$_("phone")} {/if}
type="tel" </div>
class:border-red-500={!isPhoneValidOrEmpty} <div class="text-sm w-full">
class:focus:border-red-500={!isPhoneValidOrEmpty} <span class="font-medium text-gray-700">{$_("groups")}</span>
class:focus:ring-red-500={!isPhoneValidOrEmpty} <select
bind:value={editable.phone} bind:value={editable.groups}
name="phone" name="team"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" multiple
/> class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
{#if !isPhoneValidOrEmpty} >
<span {#each teams as team}
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1" <option value={team.id}>
> {team.parentGroup.name}
{$_("valid-international-phone-number-is-required")} &gt;
</span> {team.name}
{/if} </option>
</div> {/each}
<div class="text-sm w-full"> {#each orgs as org}
<span class="font-medium text-gray-700">{$_("groups")}</span> <option value={org.id}>{org.name}</option>
<select {/each}
bind:value={editable.groups} </select>
name="team" </div>
multiple <!-- -->
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" <div class="flex items-start mt-2">
> <div class="flex items-center h-5">
{#each teams as team} <input
<option value={team.id}> bind:checked={editable.address_checked}
{team.parentGroup.name} id="comments"
&gt; name="comments"
{team.name} type="checkbox"
</option> class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
{/each} />
{#each orgs as org} </div>
<option value={org.id}>{org.name}</option> <div class="ml-3 text-sm">
{/each} <label for="comments" class="font-medium text-gray-700"
</select> >{$_("address")}</label
</div> >
<!-- --> </div>
<div class="flex items-start mt-2"> </div>
<div class="flex items-center h-5"> {#if editable.address_checked === true}
<input <div class="col-span-6">
bind:checked={editable.address_checked} <label for="address1" class="block text-sm font-medium text-gray-700"
id="comments" >{$_("address")}</label
name="comments" >
type="checkbox" <input
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" autocomplete="off"
/> placeholder="Address"
</div> class:border-red-500={!isAddress1Valid}
<div class="ml-3 text-sm"> class:focus:border-red-500={!isAddress1Valid}
<label for="comments" class="font-medium text-gray-700" class:focus:ring-red-500={!isAddress1Valid}
>{$_("address")}</label bind:value={editable.address.address1}
> type="text"
</div> name="address1"
</div> class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
{#if editable.address_checked === true} />
<div class="col-span-6"> {#if !isAddress1Valid}
<label for="address1" class="block text-sm font-medium text-gray-700" <span
>{$_("address")}</label class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
> >
<input {$_("address-is-required")}
autocomplete="off" </span>
placeholder="Address" {/if}
class:border-red-500={!isAddress1Valid} </div>
class:focus:border-red-500={!isAddress1Valid} <div class="col-span-6">
class:focus:ring-red-500={!isAddress1Valid} <label for="address2" class="block text-sm font-medium text-gray-700"
bind:value={editable.address.address1} >{$_("apartment-suite-etc")}</label
type="text" >
name="address1" <input
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" autocomplete="off"
/> placeholder={$_("apartment-suite-etc")}
{#if !isAddress1Valid} bind:value={editable.address.address2}
<span type="text"
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1" name="address2"
> class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
{$_("address-is-required")} />
</span> </div>
{/if} <div class="col-span-6">
</div> <label for="zipcode" class="block text-sm font-medium text-gray-700"
<div class="col-span-6"> >{$_("zip-postal-code")}</label
<label for="address2" class="block text-sm font-medium text-gray-700" >
>{$_("apartment-suite-etc")}</label <input
> autocomplete="off"
<input placeholder={$_("zip-postal-code")}
autocomplete="off" class:border-red-500={!iszipcodevalid}
placeholder={$_("apartment-suite-etc")} class:focus:border-red-500={!iszipcodevalid}
bind:value={editable.address.address2} class:focus:ring-red-500={!iszipcodevalid}
type="text" bind:value={editable.address.postalcode}
name="address2" type="text"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" name="zipcode"
/> class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
</div> />
<div class="col-span-6"> {#if !iszipcodevalid}
<label for="zipcode" class="block text-sm font-medium text-gray-700" <span
>{$_("zip-postal-code")}</label class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
> >
<input {$_("valid-zipcode-postal-code-is-required")}
autocomplete="off" </span>
placeholder={$_("zip-postal-code")} {/if}
class:border-red-500={!iszipcodevalid} </div>
class:focus:border-red-500={!iszipcodevalid} <div class="col-span-6">
class:focus:ring-red-500={!iszipcodevalid} <label for="city" class="block text-sm font-medium text-gray-700"
bind:value={editable.address.postalcode} >{$_("city")}</label
type="text" >
name="zipcode" <input
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" autocomplete="off"
/> placeholder={$_("city")}
{#if !iszipcodevalid} class:border-red-500={!iscityvalid}
<span class:focus:border-red-500={!iscityvalid}
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1" class:focus:ring-red-500={!iscityvalid}
> bind:value={editable.address.city}
{$_("valid-zipcode-postal-code-is-required")} type="text"
</span> name="city"
{/if} class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
</div> />
<div class="col-span-6"> {#if !iscityvalid}
<label for="city" class="block text-sm font-medium text-gray-700" <span
>{$_("city")}</label class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
> >
<input {$_("valid-city-is-required")}
autocomplete="off" </span>
placeholder={$_("city")} {/if}
class:border-red-500={!iscityvalid} </div>
class:focus:border-red-500={!iscityvalid} {/if}
class:focus:ring-red-500={!iscityvalid} </section>
bind:value={editable.address.city}
type="text"
name="city"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
/>
{#if !iscityvalid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
>
{$_("valid-city-is-required")}
</span>
{/if}
</div>
{/if}
</section>
{:catch error} {:catch error}
<PromiseError {error} /> <PromiseError {error} />
{/await} {/await}

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

@ -1,365 +1,352 @@
<script> <script>
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import store from "../../store"; import store from "../../store";
import { import {
DonationService, DonationService,
DonorService, DonorService,
RunnerService, RunnerService,
} from "@odit/lfk-client-js"; } from "@odit/lfk-client-js";
import toast from 'svelte-french-toast' import toast from "svelte-french-toast";
import PromiseError from "../base/PromiseError.svelte"; import PromiseError from "../base/PromiseError.svelte";
import Select from "svelte-select"; import Select from "svelte-select";
let data_loaded = false; let data_loaded = false;
export let params; export let params;
$: delete_triggered = false; $: delete_triggered = false;
$: original_data = {}; $: original_data = {};
$: editable = {}; $: editable = {};
$: donor = {}; $: donor = {};
$: runner = {}; $: runner = {};
$: current_donors = []; $: current_donors = [];
$: current_runners = []; $: current_runners = [];
$: amount_input = 0; $: amount_input = 0;
$: is_amount_valid = amount_input > 0; $: is_amount_valid = amount_input > 0;
$: paid_amount_input = 0; $: paid_amount_input = 0;
$: is_paid_amount_valid = paid_amount_input > 0; $: is_paid_amount_valid = paid_amount_input > 0;
$: is_everything_set = $: is_everything_set =
editable.donor != null && editable.donor != null &&
((original_data.responseType == "DISTANCEDONATION" && ((original_data.responseType == "DISTANCEDONATION" &&
editable?.runner != null) || editable?.runner != null) ||
original_data.responseType !== "DISTANCEDONATION"); original_data.responseType !== "DISTANCEDONATION");
$: changes_performed = $: changes_performed =
!(JSON.stringify(original_data) === JSON.stringify(editable)) || !(JSON.stringify(original_data) === JSON.stringify(editable)) ||
(original_data.responseType == "DISTANCEDONATION" && (original_data.responseType == "DISTANCEDONATION" &&
!(Math.floor(amount_input * 100) === original_data.amountPerDistance)) || !(Math.floor(amount_input * 100) === original_data.amountPerDistance)) ||
(original_data.responseType !== "DISTANCEDONATION" && (original_data.responseType !== "DISTANCEDONATION" &&
!(Math.floor(amount_input * 100) === original_data.amount)) || !(Math.floor(amount_input * 100) === original_data.amount)) ||
!(Math.floor(paid_amount_input * 100) === original_data.paidAmount); !(Math.floor(paid_amount_input * 100) === original_data.paidAmount);
$: save_enabled = changes_performed && is_amount_valid && is_everything_set; $: save_enabled = changes_performed && is_amount_valid && is_everything_set;
const promise = DonationService.donationControllerGetOne( const promise = DonationService.donationControllerGetOne(
params.donationid params.donationid
).then((data) => { ).then((data) => {
data_loaded = true; data_loaded = true;
original_data = Object.assign({}, data); original_data = Object.assign({}, data);
editable = Object.assign({}, original_data); editable = Object.assign({}, original_data);
paid_amount_input = data.paidAmount / 100; paid_amount_input = data.paidAmount / 100;
if (data.responseType == "DISTANCEDONATION") { if (data.responseType == "DISTANCEDONATION") {
amount_input = data.amountPerDistance / 100; amount_input = data.amountPerDistance / 100;
RunnerService.runnerControllerGetAll().then((val) => { RunnerService.runnerControllerGetAll().then((val) => {
current_runners = val.map((r) => { current_runners = val.map((r) => {
return { label: getDonorLabel(r), value: r }; return { label: getDonorLabel(r), value: r };
}); });
runner = current_runners.find((g) => g.value.id == editable.runner.id); runner = current_runners.find((g) => g.value.id == editable.runner.id);
}); });
} else { } else {
amount_input = data.amount / 100; amount_input = data.amount / 100;
} }
DonorService.donorControllerGetAll().then((val) => { DonorService.donorControllerGetAll().then((val) => {
current_donors = val.map((r) => { current_donors = val.map((r) => {
return { label: getDonorLabel(r), value: r }; return { label: getDonorLabel(r), value: r };
}); });
donor = current_donors.find((g) => g.value.id == editable.donor.id); donor = current_donors.find((g) => g.value.id == editable.donor.id);
}); });
}); });
const getDonorLabel = (option) => const getDonorLabel = (option) =>
option.firstname + " " + (option.middlename || "") + " " + option.lastname; option.firstname + " " + (option.middlename || "") + " " + option.lastname;
const filterDonors = (label, filterText, option) => const filterDonors = (label, filterText, option) =>
label.toLowerCase().includes(filterText.toLowerCase()) || label.toLowerCase().includes(filterText.toLowerCase()) ||
option.value.id.toString().startsWith(filterText.toLowerCase()); option.value.id.toString().startsWith(filterText.toLowerCase());
function submit() { function submit() {
if (data_loaded === true && save_enabled) { if (data_loaded === true && save_enabled) {
toast($_("updating-donation")); toast($_("updating-donation"));
let postdata = {}; let postdata = {};
editable.paidAmount = paid_amount_input * 100; editable.paidAmount = paid_amount_input * 100;
if (original_data.responseType === "DISTANCEDONATION") { if (original_data.responseType === "DISTANCEDONATION") {
editable.amountPerDistance = Math.floor(amount_input * 100); editable.amountPerDistance = Math.floor(amount_input * 100);
postdata = Object.assign(postdata, editable); postdata = Object.assign(postdata, editable);
postdata.runner = postdata.runner.id; postdata.runner = postdata.runner.id;
postdata.donor = postdata.donor.id; postdata.donor = postdata.donor.id;
DonationService.donationControllerPutDistance( DonationService.donationControllerPutDistance(
original_data.id, original_data.id,
postdata postdata
) )
.then((resp) => { .then((resp) => {
Object.assign(original_data, editable); Object.assign(original_data, editable);
original_data = original_data; original_data = original_data;
toast.success($_("donation-updated")); toast.success($_("donation-updated"));
}) })
.catch((err) => {}); .catch((err) => {});
} else { } else {
editable.amount = Math.floor(amount_input * 100); editable.amount = Math.floor(amount_input * 100);
postdata = Object.assign(postdata, editable); postdata = Object.assign(postdata, editable);
postdata.donor = postdata.donor.id; postdata.donor = postdata.donor.id;
DonationService.donationControllerPutFixed(original_data.id, postdata) DonationService.donationControllerPutFixed(original_data.id, postdata)
.then((resp) => { .then((resp) => {
Object.assign(original_data, editable); Object.assign(original_data, editable);
original_data = original_data; original_data = original_data;
toast.success($_("donation-updated")); toast.success($_("donation-updated"));
}) })
.catch((err) => {}); .catch((err) => {});
} }
} else { } else {
} }
} }
function deleteDonation() { function deleteDonation() {
DonationService.donationControllerRemove(original_data.id, false) DonationService.donationControllerRemove(original_data.id, false)
.then((resp) => { .then((resp) => {
toast($_("donation-deleted")); toast($_("donation-deleted"));
location.replace("./"); location.replace("./");
}) })
.catch((err) => { .catch((err) => {
modal_open = true; modal_open = true;
delete_donor = original_data; delete_donor = original_data;
}); });
} }
</script> </script>
{#await promise} {#await promise}
{$_("loading-donation-details")} {$_("loading-donation-details")}
{:then} {:then}
<section class="container p-5 select-none"> <section class="container p-5 select-none">
<div class="flex flex-row mb-4"> <div class="flex flex-row mb-4">
<div class="w-full"> <div class="w-full">
<nav class="w-full flex"> <nav class="w-full flex">
<ol class="list-none flex flex-row items-center justify-start"> <ol class="list-none flex flex-row items-center justify-start">
<li class="flex items-center"> <li class="flex items-center">
<svg <a class="mr-2" href="./"
fill="currentColor" ><svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="24"
width="24" height="24"
height="24" viewBox="0 0 24 24"
><path fill="none" d="M0 0h24v24H0z" /> fill="none"
<path stroke="currentColor"
d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z" stroke-width="2"
/></svg stroke-linecap="round"
> stroke-linejoin="round"
</li> class="inline-block"
<li class="flex items-center ml-2"> ><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
<a class="mr-2" href="./">{$_("donations")}</a><svg >
stroke="currentColor" {$_("donations")}</a
fill="none" >
stroke-width="2" </li>
viewBox="0 0 24 24" </ol>
stroke-linecap="round" </nav>
stroke-linejoin="round" </div>
class="h-3 w-3 mr-2 stroke-current" </div>
height="1em" <div class="mb-8 text-3xl font-extrabold leading-tight">
width="1em" {original_data.donor.firstname}
xmlns="http://www.w3.org/2000/svg" {original_data.donor.middlename || ""}
><line x1="5" y1="12" x2="19" y2="12" /> {original_data.donor.lastname}
<polyline points="12 5 19 12 12 19" /></svg &gt;
> {#if original_data.responseType == "DISTANCEDONATION"}
</li> {original_data.runner.firstname}
<li class="flex items-center"> {original_data.runner.middlename || ""}
<span class="mr-2">{original_data.id}</span> {original_data.runner.lastname}
</li> {:else}
</ol> {$_("fixed-donation")}:
</nav> {amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
</div> {/if}
</div> [#{original_data.id}]
<div class="mb-8 text-3xl font-extrabold leading-tight"> <div data-id="donation_actions_${original_data.id}">
{original_data.donor.firstname} {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
{original_data.donor.middlename || ""} {#if delete_triggered}
{original_data.donor.lastname} <button
&gt; on:click={deleteDonation}
{#if original_data.responseType == "DISTANCEDONATION"} 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"
{original_data.runner.firstname} >{$_("confirm-deletion")}</button
{original_data.runner.middlename || ""} >
{original_data.runner.lastname} <button
{:else} on:click={() => {
{$_("fixed-donation")}: delete_triggered = !delete_triggered;
{amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€ }}
{/if} 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"
<div data-id="donation_actions_${original_data.id}"> >{$_("cancel")}</button
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")} >
{#if delete_triggered} {/if}
<button {#if !delete_triggered}
on:click={deleteDonation} <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:w-auto sm:text-sm" on:click={() => {
>{$_("confirm-deletion")}</button delete_triggered = true;
> }}
<button type="button"
on:click={() => { 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_triggered = !delete_triggered; >{$_("delete-donation")}</button
}} >
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" {/if}
>{$_("cancel")}</button {/if}
> {#if !delete_triggered}
{/if} <button
{#if !delete_triggered} disabled={!save_enabled}
<button class:opacity-50={!save_enabled}
on:click={() => { type="button"
delete_triggered = true; 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:w-auto sm:text-sm"
type="button" >{$_("save-changes")}</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:w-auto sm:text-sm" >
>{$_("delete-donation")}</button {/if}
> </div>
{/if} </div>
{/if} <!-- -->
{#if !delete_triggered} <div>
<button <span class="font-medium text-gray-700"
disabled={!save_enabled} >{$_("total-donation-amount")}:</span
class:opacity-50={!save_enabled} >
type="button" <span
on:click={submit} >{(editable.amount / 100)
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" .toFixed(2)
>{$_("save-changes")}</button .toLocaleString("de-DE", { valute: "EUR" })}€</span
> >
{/if} |
</div> <span class="font-medium text-gray-700">{$_("paid-amount")}:</span>
</div> <span
<!-- --> >{(editable.paidAmount / 100)
<div> .toFixed(2)
<span class="font-medium text-gray-700" .toLocaleString("de-DE", { valute: "EUR" })}€</span
>{$_("total-donation-amount")}:</span >
> |
<span <span class="font-medium text-gray-700">{$_("status")}:</span>
>{(editable.amount / 100) {#if editable.status == "PAID"}
.toFixed(2) <span
.toLocaleString("de-DE", { valute: "EUR" })}€</span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
> >{$_("paid")}</span
| >
<span class="font-medium text-gray-700">{$_("paid-amount")}:</span> {:else}
<span <span
>{(editable.paidAmount / 100) class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
.toFixed(2) >{$_("open")}</span
.toLocaleString("de-DE", { valute: "EUR" })}€</span >
> {/if}
| </div>
<span class="font-medium text-gray-700">{$_("status")}:</span> <br />
{#if editable.status == "PAID"} <div class=" w-full">
<span <label for="donor" class="block font-medium text-gray-700"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800" >{$_("donor")}</label
>{$_("paid")}</span >
> <Select
{:else} containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
<span itemFilter={(label, filterText, option) =>
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800" filterDonors(label, filterText, option)}
>{$_("open")}</span items={current_donors}
> showChevron={true}
{/if} placeholder={$_("search-for-donor-name-or-id")}
</div> noOptionsMessage={$_("no-donors-found")}
<br /> bind:selectedValue={donor}
<div class=" w-full"> on:select={(selectedValue) => {
<label for="donor" class="block font-medium text-gray-700" editable.donor = selectedValue.detail.value;
>{$_("donor")}</label editable.donor.donationAmount = original_data.donor.donationAmount;
> editable.donor.paidDonationAmount =
<Select original_data.donor.paidDonationAmount;
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" }}
itemFilter={(label, filterText, option) => on:clear={() => (editable.donor = null)}
filterDonors(label, filterText, option)} />
items={current_donors} </div>
showChevron={true} {#if original_data.responseType == "DISTANCEDONATION"}
placeholder={$_("search-for-donor-name-or-id")} <div class=" w-full">
noOptionsMessage={$_("no-donors-found")} <label for="donor" class="block font-medium text-gray-700"
bind:selectedValue={donor} >{$_("runner")}</label
on:select={(selectedValue) => { >
editable.donor = selectedValue.detail.value; <Select
editable.donor.donationAmount = original_data.donor.donationAmount; containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
editable.donor.paidDonationAmount = itemFilter={(label, filterText, option) =>
original_data.donor.paidDonationAmount; filterDonors(label, filterText, option)}
}} items={current_runners}
on:clear={() => (editable.donor = null)} showChevron={true}
/> placeholder={$_("search-for-runner-by-name-or-id")}
</div> noOptionsMessage={$_("no-runners-found")}
{#if original_data.responseType == "DISTANCEDONATION"} bind:selectedValue={runner}
<div class=" w-full"> on:select={(selectedValue) =>
<label for="donor" class="block font-medium text-gray-700" (editable.runner = selectedValue.detail.value)}
>{$_("runner")}</label on:clear={() => (editable.runner = null)}
> />
<Select </div>
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" {/if}
itemFilter={(label, filterText, option) => <div class=" w-full">
filterDonors(label, filterText, option)} <label for="lastname" class="font-medium text-gray-700">
items={current_runners} {#if original_data.responseType == "DISTANCEDONATION"}
showChevron={true} {$_("amount-per-kilometer")}
placeholder={$_("search-for-runner-by-name-or-id")} {:else}{$_("donation-amount")}{/if}
noOptionsMessage={$_("no-runners-found")} </label>
bind:selectedValue={runner} <div class="mt-1 flex rounded-md shadow-sm">
on:select={(selectedValue) => <input
(editable.runner = selectedValue.detail.value)} autocomplete="off"
on:clear={() => (editable.runner = null)} class:border-red-500={!is_amount_valid}
/> class:focus:border-red-500={!is_amount_valid}
</div> class:focus:ring-red-500={!is_amount_valid}
{/if} bind:value={amount_input}
<div class=" w-full"> type="number"
<label for="lastname" class="font-medium text-gray-700"> step="0.01"
{#if original_data.responseType == "DISTANCEDONATION"} name="donation_amount_eur"
{$_("amount-per-kilometer")} class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 p-2"
{:else}{$_("donation-amount")}{/if} placeholder="2.00"
</label> />
<div class="mt-1 flex rounded-md shadow-sm"> <span
<input class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500"
autocomplete="off" >€</span
class:border-red-500={!is_amount_valid} >
class:focus:border-red-500={!is_amount_valid} </div>
class:focus:ring-red-500={!is_amount_valid} {#if !is_amount_valid}
bind:value={amount_input} <span
type="number" class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
step="0.01" >
name="donation_amount_eur" {$_("donation-amount-must-be-greater-that-0-00eur")}
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 p-2" </span>
placeholder="2.00" {/if}
/> </div>
<span <div class="w-full">
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500" <label for="token" class="block text-sm font-medium text-gray-700"
>€</span >{$_("paid-amount")}</label
> >
</div> <div
{#if !is_amount_valid} class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full"
<span >
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1" <input
> autocomplete="off"
{$_("donation-amount-must-be-greater-that-0-00eur")} class:border-red-500={!is_amount_valid}
</span> class:focus:border-red-500={!is_amount_valid}
{/if} class:focus:ring-red-500={!is_amount_valid}
</div> bind:value={paid_amount_input}
<div class="w-full"> type="number"
<label for="token" class="block text-sm font-medium text-gray-700" step="0.01"
>{$_("paid-amount")}</label 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 p-2"
<div placeholder="2.00"
class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full" />
> <button
<input on:click={() => {
autocomplete="off" paid_amount_input = paid_amount_input = (
class:border-red-500={!is_amount_valid} original_data.amount / 100
class:focus:border-red-500={!is_amount_valid} ).toFixed(2);
class:focus:ring-red-500={!is_amount_valid} }}
bind:value={paid_amount_input} class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm"
type="number" >MAX</button
step="0.01" >
name="donation_amount_eur" <span
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm p-2" class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
placeholder="2.00" >€</span
/> >
<button </div>
on:click={() => { {#if !is_paid_amount_valid}
paid_amount_input = paid_amount_input = ( <span
original_data.amount / 100 class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
).toFixed(2); >
}} {$_("payment-amount-must-be-greater-than-0-00eur")}
class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm" </span>
>MAX</button {/if}
> </div>
<span </section>
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
>€</span
>
</div>
{#if !is_paid_amount_valid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
>
{$_("payment-amount-must-be-greater-than-0-00eur")}
</span>
{/if}
</div>
</section>
{:catch error} {:catch error}
<PromiseError {error} /> <PromiseError {error} />
{/await} {/await}

4
src/components/donations/DonationStatus.svelte
View File

@ -5,12 +5,12 @@
{#if status == "PAID"} {#if status == "PAID"}
<span <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
>{$_("paid")}</span >{$_("paid")}</span
> >
{:else} {:else}
<span <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
>{$_("open")}</span >{$_("open")}</span
> >
{/if} {/if}

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

@ -101,40 +101,7 @@
<nav class="w-full flex"> <nav class="w-full flex">
<ol class="list-none flex flex-row items-center justify-start"> <ol class="list-none flex flex-row items-center justify-start">
<li class="flex items-center"> <li class="flex items-center">
<svg <a class="mr-2" href="./"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline-block"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg> {$_("donors")}</a>
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
><path fill="none" d="M0 0h24v24H0z" />
<path
d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
/></svg
>
</li>
<li class="flex items-center ml-2">
<a class="mr-2" href="./">{$_("donors")}</a><svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="h-3 w-3 mr-2 stroke-current"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
><line x1="5" y1="12" x2="19" y2="12" />
<polyline points="12 5 19 12 12 19" /></svg
>
</li>
<li class="flex items-center">
<span class="mr-2"
>{original_data.firstname}
{original_data.middlename || ""}
{original_data.lastname}</span
>
</li> </li>
</ol> </ol>
</nav> </nav>
@ -215,7 +182,7 @@
{:else} {:else}
<a <a
href="../donations/{d.id}" href="../donations/{d.id}"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-700 text-white mr-1"
>{$_("fixed-donation")}: >{$_("fixed-donation")}:
{(d.amount / 100) {(d.amount / 100)
.toFixed(2) .toFixed(2)

2
src/components/donors/DonorDonations.svelte
View File

@ -18,7 +18,7 @@
{:else} {:else}
<a <a
href="../donations/{donation.id}" href="../donations/{donation.id}"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-700 text-white mr-1"
>{$_("fixed-donation")}: >{$_("fixed-donation")}:
{(donation.amount / 100) {(donation.amount / 100)
.toFixed(2) .toFixed(2)

77
src/components/orgs/OrgDetail.svelte
View File

@ -152,75 +152,30 @@
<div class="w-full"> <div class="w-full">
<nav class="w-full flex"> <nav class="w-full flex">
<ol class="list-none flex flex-row items-center justify-start"> <ol class="list-none flex flex-row items-center justify-start">
<li class="mr-2 flex items-center">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="h-3 w-3 stroke-current"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" /></svg
>
</li>
<li class="flex items-center"> <li class="flex items-center">
<a class="mr-2" href="/">{$_("home")}</a><svg <a class="mr-2" href="./"
stroke="currentColor" ><svg
fill="none" xmlns="http://www.w3.org/2000/svg"
stroke-width="2" width="24"
viewBox="0 0 24 24" height="24"
stroke-linecap="round" viewBox="0 0 24 24"
stroke-linejoin="round" fill="none"
class="h-3 w-3 mr-2 stroke-current" stroke="currentColor"
height="1em" stroke-width="2"
width="1em" stroke-linecap="round"
xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round"
><line x1="5" y1="12" x2="19" y2="12" /> class="inline-block"
<polyline points="12 5 19 12 12 19" /></svg ><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
>
{$_("organizations")}</a
> >
</li> </li>
<li class="mr-2 flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
><path fill="none" d="M0 0h24v24H0z" />
<path
d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z"
/></svg
>
</li>
<li class="flex items-center">
<a class="mr-2" href="./">{$_("organizations")}</a><svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="h-3 w-3 mr-2 stroke-current"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
><line x1="5" y1="12" x2="19" y2="12" />
<polyline points="12 5 19 12 12 19" /></svg
>
</li>
<li class="flex items-center">
<span class="mr-2">Org-Details #{params.orgid}</span>
</li>
</ol> </ol>
</nav> </nav>
</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_object.name} {original_object.name} [#{params.orgid}]
<span data-id="org_actions_${editable.id}"> <span data-id="org_actions_${editable.id}">
<GenerateSponsoringContracts <GenerateSponsoringContracts
bind:sponsoring_contracts_show bind:sponsoring_contracts_show

2
src/components/presets/Table.svelte
View File

@ -66,7 +66,7 @@
</td> </td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<span <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
> >
Active Active
</span> </span>

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

@ -100,40 +100,21 @@
<nav class="w-full flex"> <nav class="w-full flex">
<ol class="list-none flex flex-row items-center justify-start"> <ol class="list-none flex flex-row items-center justify-start">
<li class="flex items-center"> <li class="flex items-center">
<svg <a class="mr-2" href="./"
xmlns="http://www.w3.org/2000/svg" ><svg
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
class="flex-shrink-0 w-5 h-5 mr-2" width="24"
fill="currentColor" height="24"
width="24" viewBox="0 0 24 24"
height="24" fill="none"
><path fill="none" d="M0 0h24v24H0z" /> stroke="currentColor"
<path stroke-width="2"
d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" stroke-linecap="round"
/></svg stroke-linejoin="round"
> class="inline-block"
</li> ><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
<li class="flex items-center"> >
<a class="mr-2" href="./">{$_("runners")}</a><svg {$_("runners")}</a
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="h-3 w-3 mr-2 stroke-current"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
><line x1="5" y1="12" x2="19" y2="12" />
<polyline points="12 5 19 12 12 19" /></svg
>
</li>
<li class="flex items-center">
<span class="mr-2"
>{original_data.firstname}
{original_data.middlename || ""}
{original_data.lastname}</span
> >
</li> </li>
</ol> </ol>
@ -143,7 +124,7 @@
<div class="mb-8 text-3xl font-extrabold leading-tight"> <div class="mb-8 text-3xl font-extrabold leading-tight">
{original_data.firstname} {original_data.firstname}
{original_data.middlename || ""} {original_data.middlename || ""}
{original_data.lastname} {original_data.lastname} [#{params.runnerid}]
<span <span
class="grid md:grid-cols-3 gap-1 md:gap-2" class="grid md:grid-cols-3 gap-1 md:gap-2"
data-id="runner_actions_${editable.id}" data-id="runner_actions_${editable.id}"

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

@ -1,288 +1,273 @@
<script> <script>
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import store from "../../store"; import store from "../../store";
import { RunnerService, ScanService } from "@odit/lfk-client-js"; import { RunnerService, ScanService } from "@odit/lfk-client-js";
import PromiseError from "../base/PromiseError.svelte"; import PromiseError from "../base/PromiseError.svelte";
import Select from "svelte-select"; import Select from "svelte-select";
let data_loaded = false; let data_loaded = false;
export let params; export let params;
$: delete_triggered = false; $: delete_triggered = false;
$: original_data = {}; $: original_data = {};
$: editable = {}; $: editable = {};
$: current_runners = []; $: current_runners = [];
$: is_distance_valid = editable.distance > 0; $: is_distance_valid = editable.distance > 0;
$: is_everything_set = $: is_everything_set =
editable.runner != null && editable.runner != null &&
((original_data.responseType === "TRACKSCAN" && editable.track != null) || ((original_data.responseType === "TRACKSCAN" && editable.track != null) ||
original_data.responseType !== "TRACKSCAN"); original_data.responseType !== "TRACKSCAN");
$: runner = {}; $: runner = {};
$: changes_performed = !( $: changes_performed = !(
JSON.stringify(original_data) === JSON.stringify(editable) JSON.stringify(original_data) === JSON.stringify(editable)
); );
$: save_enabled = changes_performed && is_everything_set && is_distance_valid; $: save_enabled = changes_performed && is_everything_set && is_distance_valid;
const promise = ScanService.scanControllerGetOne(params.scanid).then( const promise = ScanService.scanControllerGetOne(params.scanid).then(
(data) => { (data) => {
data_loaded = true; data_loaded = true;
original_data = Object.assign(original_data, data); original_data = Object.assign(original_data, data);
original_data.runner = original_data.runner.id; original_data.runner = original_data.runner.id;
editable = Object.assign(editable, original_data); editable = Object.assign(editable, original_data);
RunnerService.runnerControllerGetAll().then((val) => { RunnerService.runnerControllerGetAll().then((val) => {
current_runners = val.map((r) => { current_runners = val.map((r) => {
return { label: getRunnerLabel(r), value: r }; return { label: getRunnerLabel(r), value: r };
}); });
runner = current_runners.find((r) => r.value.id == editable.runner); runner = current_runners.find((r) => r.value.id == editable.runner);
}); });
} }
); );
const getRunnerLabel = (option) => const getRunnerLabel = (option) =>
option.firstname + " " + (option.middlename || "") + " " + option.lastname; option.firstname + " " + (option.middlename || "") + " " + option.lastname;
const filterRunners = (label, filterText, option) => const filterRunners = (label, filterText, option) =>
label.toLowerCase().includes(filterText.toLowerCase()) || label.toLowerCase().includes(filterText.toLowerCase()) ||
option.value.id.toString().startsWith(filterText.toLowerCase()); option.value.id.toString().startsWith(filterText.toLowerCase());
function submit() { function submit() {
if (data_loaded === true && save_enabled) { if (data_loaded === true && save_enabled) {
toast($_("scan-is-being-updated")); toast($_("scan-is-being-updated"));
let postdata = {}; let postdata = {};
if (original_data.responseType === "TRACKSCAN") { if (original_data.responseType === "TRACKSCAN") {
postdata = Object.assign(postdata, editable); postdata = Object.assign(postdata, editable);
postdata.track = postdata.track.id; postdata.track = postdata.track.id;
ScanService.scanControllerPutTrackScan(original_data.id, postdata) ScanService.scanControllerPutTrackScan(original_data.id, postdata)
.then((resp) => { .then((resp) => {
Object.assign(original_data, editable); Object.assign(original_data, editable);
original_data = original_data; original_data = original_data;
toast.success($_("updated-scan")); toast.success($_("updated-scan"));
}) })
.catch((err) => {}); .catch((err) => {});
} else { } else {
postdata = Object.assign(postdata, editable); postdata = Object.assign(postdata, editable);
ScanService.scanControllerPut(original_data.id, postdata) ScanService.scanControllerPut(original_data.id, postdata)
.then((resp) => { .then((resp) => {
Object.assign(original_data, editable); Object.assign(original_data, editable);
original_data = original_data; original_data = original_data;
toast.success($_("updated-scan")); toast.success($_("updated-scan"));
}) })
.catch((err) => {}); .catch((err) => {});
} }
} else { } else {
} }
} }
function deleteScan() { function deleteScan() {
ScanService.scanControllerRemove(original_data.id, false) ScanService.scanControllerRemove(original_data.id, false)
.then((resp) => { .then((resp) => {
toast($_("deleted-scan")); toast($_("deleted-scan"));
location.replace("./"); location.replace("./");
}) })
.catch((err) => { .catch((err) => {
modal_open = true; modal_open = true;
delete_scan = original_data; delete_scan = original_data;
}); });
} }
function format_laptime(laptime) { function format_laptime(laptime) {
if (laptime == 0 || laptime == null) { if (laptime == 0 || laptime == null) {
return $_("first-scan-of-the-day"); return $_("first-scan-of-the-day");
} }
if (laptime < 60) { if (laptime < 60) {
return `${laptime}s`; return `${laptime}s`;
} }
if (laptime < 3600) { if (laptime < 3600) {
return `${Math.floor(laptime / 60)}min ${ return `${Math.floor(laptime / 60)}min ${
laptime - Math.floor(laptime / 60) * 60 laptime - Math.floor(laptime / 60) * 60
}s`; }s`;
} }
return `${Math.floor(laptime / 3600)}h ${ return `${Math.floor(laptime / 3600)}h ${
laptime - Math.floor(laptime / 3600) * 3600 laptime - Math.floor(laptime / 3600) * 3600
}min ${ }min ${
laptime - laptime -
Math.floor(laptime / 3600) * 3600 - Math.floor(laptime / 3600) * 3600 -
Math.floor(laptime / 60) * 60 Math.floor(laptime / 60) * 60
}`; }`;
} }
</script> </script>
{#await promise} {#await promise}
Loading scan details Loading scan details
{:then} {:then}
<section class="container p-5 select-none"> <section class="container p-5 select-none">
<div class="flex flex-row mb-4"> <div class="flex flex-row mb-4">
<div class="w-full"> <div class="w-full">
<nav class="w-full flex"> <nav class="w-full flex">
<ol class="list-none flex flex-row items-center justify-start"> <ol class="list-none flex flex-row items-center justify-start">
<li class="flex items-center"> <li class="flex items-center">
<svg <a class="mr-2" href="./"
fill="currentColor" ><svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="24"
width="24" height="24"
height="24" viewBox="0 0 24 24"
><path fill="none"
fill="currentColor" stroke="currentColor"
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" stroke-width="2"
/></svg stroke-linecap="round"
> stroke-linejoin="round"
</li> class="inline-block"
<li class="flex items-center ml-2"> ><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
<a class="mr-2" href="./">Scans</a><svg > Scans</a
stroke="currentColor" >
fill="none" </li>
stroke-width="2" </ol>
viewBox="0 0 24 24" </nav>
stroke-linecap="round" </div>
stroke-linejoin="round" </div>
class="h-3 w-3 mr-2 stroke-current" <div class="mb-8 text-3xl font-extrabold leading-tight">
height="1em" {runner.value?.firstname}
width="1em" {runner.value?.middlename || ""}
xmlns="http://www.w3.org/2000/svg" {runner.value?.lastname}
><line x1="5" y1="12" x2="19" y2="12" /> - Scan #{original_data.id}
<polyline points="12 5 19 12 12 19" /></svg <div data-id="donation_actions_${original_data.id}">
> {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
</li> {#if delete_triggered}
<li class="flex items-center"> <button
<span class="mr-2">#{original_data.id}</span> on:click={deleteScan}
</li> 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"
</ol> >{$_("confirm-deletion")}</button
</nav> >
</div> <button
</div> on:click={() => {
<div class="mb-8 text-3xl font-extrabold leading-tight"> delete_triggered = !delete_triggered;
{runner.value?.firstname} }}
{runner.value?.middlename || ""} 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"
{runner.value?.lastname} >{$_("cancel")}</button
#{original_data.id} >
<div data-id="donation_actions_${original_data.id}"> {/if}
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")} {#if !delete_triggered}
{#if delete_triggered} <button
<button on:click={() => {
on:click={deleteScan} delete_triggered = true;
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 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:w-auto sm:text-sm"
<button >{$_("delete-scan")}</button
on:click={() => { >
delete_triggered = !delete_triggered; {/if}
}} {/if}
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" {#if !delete_triggered}
>{$_("cancel")}</button <button
> disabled={!save_enabled}
{/if} class:opacity-50={!save_enabled}
{#if !delete_triggered} type="button"
<button on:click={submit}
on:click={() => { 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"
delete_triggered = true; >{$_("save-changes")}</button
}} >
type="button" {/if}
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" </div>
>{$_("delete-scan")}</button </div>
> <!-- -->
{/if} <div class="w-full inline-flex">
{/if} <label for="valid" class="block font-medium text-gray-700"
{#if !delete_triggered} >{$_("status")}:
<button </label>
disabled={!save_enabled} &nbsp;
class:opacity-50={!save_enabled} <input
type="button" id="valid"
on:click={submit} on:change={() => {
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" editable.valid = !editable.valid;
>{$_("save-changes")}</button }}
> name="valid"
{/if} type="checkbox"
</div> checked={editable.valid}
</div> class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded"
<!-- --> />
<div class="w-full inline-flex"> &nbsp;
<label for="valid" class="block font-medium text-gray-700" <p class="font-medium">
>{$_("status")}: {#if editable.valid}{$_("valid")}{:else}{$_("invalid")}{/if}
</label> </p>
&nbsp; </div>
<input {#if editable.responseType === "TRACKSCAN"}
id="valid" <div class="w-full inline-flex">
on:change={() => { <label for="valid" class="block font-semibold text-gray-700"
editable.valid = !editable.valid; >{$_("track")}:
}} </label>
name="valid" <a
type="checkbox" href="../tracks"
checked={editable.valid} class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded" >{editable.track.name}
/> </a>
&nbsp; </div>
<p class="font-medium"> <div class="w-full inline-flex pb-3">
{#if editable.valid}{$_("valid")}{:else}{$_("invalid")}{/if} <label for="valid" class="block font-semibold text-gray-700"
</p> >{$_("laptime")}: {format_laptime(editable.laptime)}
</div> </label>
{#if editable.responseType === "TRACKSCAN"} </div>
<div class="w-full inline-flex"> {/if}
<label for="valid" class="block font-semibold text-gray-700" <div class=" w-full">
>{$_("track")}: <label for="runner" class="block font-medium text-gray-700"
</label> >{$_("runner")}</label
<a >
href="../tracks" <Select
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current" containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
>{editable.track.name} itemFilter={(label, filterText, option) =>
</a> filterRunners(label, filterText, option)}
</div> items={current_runners}
<div class="w-full inline-flex pb-3"> showChevron={true}
<label for="valid" class="block font-semibold text-gray-700" isDisabled={editable.responseType === "TRACKSCAN"}
>{$_("laptime")}: {format_laptime(editable.laptime)} placeholder={$_("search-for-runner-by-name-or-id")}
</label> noOptionsMessage={$_("no-runners-found")}
</div> bind:selectedValue={runner}
{/if} on:select={(selectedValue) => {
<div class=" w-full"> editable.runner = selectedValue.detail.value.id;
<label for="runner" class="block font-medium text-gray-700" }}
>{$_("runner")}</label on:clear={() => (editable.runner = null)}
> />
<Select </div>
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" <div class=" w-full">
itemFilter={(label, filterText, option) => <label
filterRunners(label, filterText, option)} for="scan_distance"
items={current_runners} class="block text-sm font-medium text-gray-700"
showChevron={true} >
isDisabled={editable.responseType === "TRACKSCAN"} {$_("distance")}</label
placeholder={$_("search-for-runner-by-name-or-id")} >
noOptionsMessage={$_("no-runners-found")} <div class="mt-1 flex rounded-md shadow-sm">
bind:selectedValue={runner} <input
on:select={(selectedValue) => { autocomplete="off"
editable.runner = selectedValue.detail.value.id; class:border-red-500={!is_distance_valid}
}} class:focus:border-red-500={!is_distance_valid}
on:clear={() => (editable.runner = null)} class:focus:ring-red-500={!is_distance_valid}
/> bind:value={editable.distance}
</div> disabled={editable.responseType === "TRACKSCAN"}
<div class=" w-full"> type="number"
<label step="1"
for="scan_distance" name="scan_distance"
class="block text-sm font-medium text-gray-700" 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"
> placeholder="400"
{$_("distance")}</label />
> <span
<div class="mt-1 flex rounded-md shadow-sm"> class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
<input >m</span
autocomplete="off" >
class:border-red-500={!is_distance_valid} </div>
class:focus:border-red-500={!is_distance_valid} {#if !is_distance_valid}
class:focus:ring-red-500={!is_distance_valid} <span
bind:value={editable.distance} class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
disabled={editable.responseType === "TRACKSCAN"} >
type="number" {$_("the-scans-distance-must-be-greater-than-0m")}
step="1" </span>
name="scan_distance" {/if}
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" </div>
placeholder="400" </section>
/>
<span
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
>m</span
>
</div>
{#if !is_distance_valid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
>
{$_("the-scans-distance-must-be-greater-than-0m")}
</span>
{/if}
</div>
</section>
{:catch error} {:catch error}
<PromiseError {error} /> <PromiseError {error} />
{/await} {/await}

4
src/components/scans/ScanValid.svelte
View File

@ -5,12 +5,12 @@
{#if valid} {#if valid}
<span <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
>{$_("valid")}</span >{$_("valid")}</span
> >
{:else} {:else}
<span <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
>{$_("invalid")}</span >{$_("invalid")}</span
> >
{/if} {/if}

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

@ -1,203 +1,190 @@
<script> <script>
import { t, _ } from "svelte-i18n"; import { t, _ } from "svelte-i18n";
import store from "../../store"; import store from "../../store";
import { ScanStationService, TrackService } from "@odit/lfk-client-js"; import { ScanStationService, TrackService } from "@odit/lfk-client-js";
import PromiseError from "../base/PromiseError.svelte"; import PromiseError from "../base/PromiseError.svelte";
import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte"; import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
import Select from "svelte-select"; import Select from "svelte-select";
let data_loaded = false; let data_loaded = false;
let modal_open; let modal_open;
let delete_station; let delete_station;
export let params; export let params;
$: delete_triggered = false; $: delete_triggered = false;
$: original_data = {}; $: original_data = {};
$: editable = {}; $: editable = {};
$: tracks = []; $: tracks = [];
$: track = {}; $: track = {};
$: changes_performed = !( $: changes_performed = !(
JSON.stringify(original_data) === JSON.stringify(editable) JSON.stringify(original_data) === JSON.stringify(editable)
); );
$: save_enabled = changes_performed; $: save_enabled = changes_performed;
const promise = ScanStationService.scanStationControllerGetOne( const promise = ScanStationService.scanStationControllerGetOne(
params.stationid params.stationid
).then((data) => { ).then((data) => {
data_loaded = true; data_loaded = true;
data.track = data.track.id; data.track = data.track.id;
original_data = Object.assign(original_data, data); original_data = Object.assign(original_data, data);
editable = Object.assign(editable, original_data); editable = Object.assign(editable, original_data);
TrackService.trackControllerGetAll().then((val) => { TrackService.trackControllerGetAll().then((val) => {
tracks = val.map((t) => { tracks = val.map((t) => {
return { label: t.name || `#{t.id}`, value: t }; return { label: t.name || `#{t.id}`, value: t };
}); });
track = tracks.find((t) => t.value.id == editable.track); track = tracks.find((t) => t.value.id == editable.track);
}); });
}); });
function submit() { function submit() {
if (data_loaded === true && save_enabled) { if (data_loaded === true && save_enabled) {
toast($_("station-is-being-updated")); toast($_("station-is-being-updated"));
ScanStationService.scanStationControllerPut(original_data.id, editable) ScanStationService.scanStationControllerPut(original_data.id, editable)
.then((resp) => { .then((resp) => {
Object.assign(original_data, editable); Object.assign(original_data, editable);
original_data = original_data; original_data = original_data;
toast.success($_("updated-station")); toast.success($_("updated-station"));
}) })
.catch((err) => {}); .catch((err) => {});
} else { } else {
} }
} }
function deleteStation() { function deleteStation() {
ScanStationService.scanStationControllerRemove(original_data.id, false) ScanStationService.scanStationControllerRemove(original_data.id, false)
.then((resp) => { .then((resp) => {
toast($_("station-deleted")); toast($_("station-deleted"));
location.replace("./"); location.replace("./");
}) })
.catch((err) => { .catch((err) => {
modal_open = true; modal_open = true;
delete_station = original_data; delete_station = original_data;
}); });
} }
</script> </script>
<ConfirmScanStationDeletion bind:modal_open bind:delete_station /> <ConfirmScanStationDeletion bind:modal_open bind:delete_station />
{#await promise} {#await promise}
{$_("loading-station-details")} {$_("loading-station-details")}
{:then} {:then}
<section class="container p-5 select-none"> <section class="container p-5 select-none">
<div class="flex flex-row mb-4"> <div class="flex flex-row mb-4">
<div class="w-full"> <div class="w-full">
<nav class="w-full flex"> <nav class="w-full flex">
<ol class="list-none flex flex-row items-center justify-start"> <ol class="list-none flex flex-row items-center justify-start">
<li class="flex items-center"> <li class="flex items-center">
<svg <a class="mr-2" href="./"
fill="currentColor" ><svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="24"
width="24" height="24"
height="24" viewBox="0 0 24 24"
><path fill="none" d="M0 0h24v24H0z" /> fill="none"
<path stroke="currentColor"
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" stroke-width="2"
/></svg stroke-linecap="round"
> stroke-linejoin="round"
</li> class="inline-block"
<li class="flex items-center ml-2"> ><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
<a class="mr-2" href="./">{$_("scanstation")}</a><svg >
stroke="currentColor" {$_("scanstations")}</a
fill="none" >
stroke-width="2" </li>
viewBox="0 0 24 24" </ol>
stroke-linecap="round" </nav>
stroke-linejoin="round" </div>
class="h-3 w-3 mr-2 stroke-current" </div>
height="1em" <div class="mb-8 text-3xl font-extrabold leading-tight">
width="1em" {$_("scanstation")} #{original_data.id}<br>"{original_data.description}"
xmlns="http://www.w3.org/2000/svg" <div data-id="stations_actions_${editable.id}">
><line x1="5" y1="12" x2="19" y2="12" /> {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
<polyline points="12 5 19 12 12 19" /></svg {#if delete_triggered}
> <button
</li> on:click={deleteStation}
<li class="flex items-center"> 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"
<span class="mr-2">#{original_data.id}</span> >{$_("confirm-deletion")}</button
</li> >
</ol> <button
</nav> on:click={() => {
</div> delete_triggered = !delete_triggered;
</div> }}
<div class="mb-8 text-3xl font-extrabold leading-tight"> 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"
<div data-id="stations_actions_${editable.id}"> >{$_("cancel")}</button
{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")} >
{#if delete_triggered} {/if}
<button {#if !delete_triggered}
on:click={deleteStation} <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:w-auto sm:text-sm" on:click={() => {
>{$_("confirm-deletion")}</button delete_triggered = true;
> }}
<button type="button"
on:click={() => { 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_triggered = !delete_triggered; >{$_("delete-station")}</button
}} >
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" {/if}
>{$_("cancel")}</button {/if}
> {#if !delete_triggered}
{/if} <button
{#if !delete_triggered} disabled={!save_enabled}
<button class:opacity-50={!save_enabled}
on:click={() => { type="button"
delete_triggered = true; 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:w-auto sm:text-sm"
type="button" >{$_("save-changes")}</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:w-auto sm:text-sm" >
>{$_("delete-station")}</button {/if}
> </div>
{/if} </div>
{/if} <!-- -->
{#if !delete_triggered} <div class="mt-2 text-sm w-full">
<button <label for="track" class="block text-sm font-semibold text-gray-700"
disabled={!save_enabled} >Track</label
class:opacity-50={!save_enabled} >
type="button" <Select
on:click={submit} containerClasses="rounded-l-md focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
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" itemFilter={(label, filterText, option) =>
>{$_("save-changes")}</button label.toLowerCase().includes(filterText.toLowerCase()) ||
> option.value.id.toString().startsWith(filterText.toLowerCase())}
{/if} items={tracks}
</div> showChevron={true}
</div> placeholder="Search for a track (by name or id)."
<!-- --> noOptionsMessage="No track found"
<div class="text-sm w-full"> bind:selectedValue={track}
<label for="track" class="block text-sm font-medium text-gray-700" on:select={(selectedValue) =>
>Track</label (editable.track = selectedValue.detail.value.id)}
> on:clear={() => (track = null)}
<Select />
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" </div>
itemFilter={(label, filterText, option) => <div class="mt-2 text-sm w-full">
label.toLowerCase().includes(filterText.toLowerCase()) || <label for="description" class="font-semibold text-gray-700"
option.value.id.toString().startsWith(filterText.toLowerCase())} >{$_("description")}</label
items={tracks} >
showChevron={true} <input
placeholder="Search for a track (by name or id)." autocomplete="off"
noOptionsMessage="No track found" placeholder={$_("description")}
bind:selectedValue={track} type="text"
on:select={(selectedValue) => bind:value={editable.description}
(editable.track = selectedValue.detail.value.id)} name="description"
on:clear={() => (track = null)} class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
/> />
</div> </div>
<div class="text-sm w-full"> <div class="mt-2 text-sm w-full">
<label for="description" class="font-medium text-gray-700" <label for="enabled" class="font-semibold text-gray-700"
>{$_("description")}</label >{$_("enabled")}</label
> >
<input <br />
autocomplete="off" <p class="text-gray-500">
placeholder={$_("description")} <input
type="text" id="enabled"
bind:value={editable.description} on:change={() => {
name="description" editable.enabled = !editable.enabled;
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2" }}
/> name="enabled"
</div> type="checkbox"
<div class="text-sm w-full"> checked={editable.enabled}
<label for="enabled" class="ml-1 font-medium text-gray-700" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
>{$_("enabled")}</label />
> {$_("this-scanstation-is")}
<br /> {#if editable.enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}
<p class="text-gray-500"> </p>
<input </div>
id="enabled" </section>
on:change={() => {
editable.enabled = !editable.enabled;
}}
name="enabled"
type="checkbox"
checked={editable.enabled}
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
/>
{$_("this-scanstation-is")}
{#if editable.enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}
</p>
</div>
</section>
{:catch error} {:catch error}
<PromiseError {error} /> <PromiseError {error} />
{/await} {/await}

4
src/components/scanstations/ScanStations.svelte
View File

@ -132,12 +132,12 @@
<div class="flex items-center"> <div class="flex items-center">
{#if s.enabled} {#if s.enabled}
<span <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
>{$_("active")}</span >{$_("active")}</span
> >
{:else} {:else}
<span <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
>{$_("inactive")}</span >{$_("inactive")}</span
> >
{/if} {/if}

217
src/components/statsclients/StatsClientDetail.svelte
View File

@ -1,123 +1,110 @@
<script> <script>
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import store from "../../store"; import store from "../../store";
import PromiseError from "../base/PromiseError.svelte"; import PromiseError from "../base/PromiseError.svelte";
import ConfirmStatsClientDeletion from "./ConfirmStatsClientDeletion.svelte"; import ConfirmStatsClientDeletion from "./ConfirmStatsClientDeletion.svelte";
import { StatsClientService } from "@odit/lfk-client-js"; import { StatsClientService } from "@odit/lfk-client-js";
import toast from "svelte-french-toast"; import toast from "svelte-french-toast";
let data_loaded = false; let data_loaded = false;
let modal_open; let modal_open;
let delete_client; let delete_client;
export let params; export let params;
$: delete_triggered = false; $: delete_triggered = false;
$: original_data = {}; $: original_data = {};
const promise = StatsClientService.statsClientControllerGetOne( const promise = StatsClientService.statsClientControllerGetOne(
params.clientid params.clientid
).then((data) => { ).then((data) => {
data_loaded = true; data_loaded = true;
original_data = Object.assign(original_data, data); original_data = Object.assign(original_data, data);
}); });
function deleteClient() { function deleteClient() {
StatsClientService.statsClientControllerRemove(original_data.id, false) StatsClientService.statsClientControllerRemove(original_data.id, false)
.then((resp) => { .then((resp) => {
toast($_("statsclient-deleted")); toast($_("statsclient-deleted"));
location.replace("./"); location.replace("./");
}) })
.catch((err) => { .catch((err) => {
modal_open = true; modal_open = true;
delete_client = original_data; delete_client = original_data;
}); });
} }
</script> </script>
<ConfirmStatsClientDeletion bind:modal_open bind:delete_client /> <ConfirmStatsClientDeletion bind:modal_open bind:delete_client />
{#await promise} {#await promise}
{$_("loading-statsclient-details")} {$_("loading-statsclient-details")}
{:then} {:then}
<section class="container p-5 select-none"> <section class="container p-5 select-none">
<div class="flex flex-row mb-4"> <div class="flex flex-row mb-4">
<div class="w-full"> <div class="w-full">
<nav class="w-full flex"> <nav class="w-full flex">
<ol class="list-none flex flex-row items-center justify-start"> <ol class="list-none flex flex-row items-center justify-start">
<li class="flex items-center"> <li class="flex items-center">
<svg <a class="mr-2" href="./"
fill="currentColor" ><svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="24"
width="24" height="24"
height="24" viewBox="0 0 24 24"
><path fill="none" d="M0 0h24v24H0z" /> fill="none"
<path stroke="currentColor"
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" stroke-width="2"
/></svg stroke-linecap="round"
> stroke-linejoin="round"
</li> class="inline-block"
<li class="flex items-center ml-2"> ><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
<a class="mr-2" href="./">{$_("statsclient")}</a><svg >
stroke="currentColor" {$_("statsclients")}</a
fill="none" >
stroke-width="2" </li>
viewBox="0 0 24 24" </ol>
stroke-linecap="round" </nav>
stroke-linejoin="round" </div>
class="h-3 w-3 mr-2 stroke-current" </div>
height="1em" <div class="mb-8 text-3xl font-extrabold leading-tight">
width="1em" {$_("statsclient")} #{original_data.id}
xmlns="http://www.w3.org/2000/svg" <div data-id="stations_actions_${original_data.id}">
><line x1="5" y1="12" x2="19" y2="12" /> {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:DELETE")}
<polyline points="12 5 19 12 12 19" /></svg {#if delete_triggered}
> <button
</li> on:click={deleteClient}
<li class="flex items-center"> 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"
<span class="mr-2">#{original_data.id}</span> >{$_("confirm-deletion")}</button
</li> >
</ol> <button
</nav> on:click={() => {
</div> delete_triggered = !delete_triggered;
</div> }}
<div class="mb-8 text-3xl font-extrabold leading-tight"> 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"
<div data-id="stations_actions_${original_data.id}"> >{$_("cancel")}</button
{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:DELETE")} >
{#if delete_triggered} {/if}
<button {#if !delete_triggered}
on:click={deleteClient} <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:w-auto sm:text-sm" on:click={() => {
>{$_("confirm-deletion")}</button delete_triggered = true;
> }}
<button type="button"
on:click={() => { 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_triggered = !delete_triggered; >{$_("delete-statsclient")}</button
}} >
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" {/if}
>{$_("cancel")}</button {/if}
> </div>
{/if} </div>
{#if !delete_triggered} <!-- -->
<button <div class="text-sm w-full">
on:click={() => { <label for="description" class="font-medium text-gray-700"
delete_triggered = true; >{$_("description")}</label
}} >
type="button" <p
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" name="description"
>{$_("delete-statsclient")}</button class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
> >
{/if} {original_data.description}
{/if} </p>
</div> </div>
</div> </section>
<!-- -->
<div class="text-sm w-full">
<label for="description" class="font-medium text-gray-700"
>{$_("description")}</label
>
<p
name="description"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
>
{original_data.description}
</p>
</div>
</section>
{:catch error} {:catch error}
<PromiseError {error} /> <PromiseError {error} />
{/await} {/await}