Merge branch 'dev' into feature/108_vite_migration
# Conflicts: # index.html # package.json # public/licenses.json # src/App.svelte # src/components/orgs/OrgOverview.svelte # src/components/teams/TeamsOverview.svelte
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
store.init();
|
||||
import { OpenAPI, AuthService } from "@odit/lfk-client-js";
|
||||
import Footer from "../general/Footer.svelte";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import Toastify from "toastify-js";
|
||||
// ------
|
||||
let username = config.default_username || "";
|
||||
@@ -36,10 +37,19 @@
|
||||
text: $_("login_is_checked"),
|
||||
duration: 500,
|
||||
}).showToast();
|
||||
AuthService.authControllerLogin({
|
||||
username,
|
||||
password,
|
||||
})
|
||||
let postdata = {};
|
||||
if (isEmail(username)) {
|
||||
postdata = {
|
||||
email: username,
|
||||
password,
|
||||
};
|
||||
} else {
|
||||
postdata = {
|
||||
username,
|
||||
password,
|
||||
};
|
||||
}
|
||||
AuthService.authControllerLogin(postdata)
|
||||
.then(async (result) => {
|
||||
await localForage.setItem("logindata", result);
|
||||
OpenAPI.TOKEN = result.access_token;
|
||||
|
||||
52
src/components/auth/PasswordStrength.svelte
Normal file
52
src/components/auth/PasswordStrength.svelte
Normal file
@@ -0,0 +1,52 @@
|
||||
<script context="module">
|
||||
import { passwordStrength } from "check-password-strength";
|
||||
export function password_strong_enough(password_change) {
|
||||
let strength = passwordStrength(password_change);
|
||||
return (
|
||||
strength?.contains.includes("lowercase") &&
|
||||
strength?.contains.includes("uppercase") &&
|
||||
strength?.contains.includes("number") &&
|
||||
strength?.length > 9
|
||||
);
|
||||
}
|
||||
export function password_strong_enough_and_equal(
|
||||
password_change,
|
||||
password_confirm
|
||||
) {
|
||||
return (
|
||||
password_strong_enough(password_change) &&
|
||||
password_change === password_confirm
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import { passwordStrength as Strength } from "check-password-strength";
|
||||
export let password_change;
|
||||
export let password_confirm;
|
||||
|
||||
$: strength = Strength(password_change);
|
||||
$: passwords_match =
|
||||
!password_confirm || password_confirm === password_change;
|
||||
</script>
|
||||
|
||||
<div class="ml-4">
|
||||
<ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
|
||||
{#if !strength.contains.includes('lowercase')}
|
||||
<li>{$_('must-contain-a-lowercase-letter')}</li>
|
||||
{/if}
|
||||
{#if !strength.contains.includes('uppercase')}
|
||||
<li>{$_('must-contain-a-uppercase-letter')}</li>
|
||||
{/if}
|
||||
{#if !strength.contains.includes('number')}
|
||||
<li>{$_('must-contain-a-number')}</li>
|
||||
{/if}
|
||||
{#if !(strength.length > 9)}
|
||||
<li>{$_('must-be-at-least-10-characters-long')}</li>
|
||||
{/if}
|
||||
{#if !(passwords_match == true)}
|
||||
<li>{$_('passwords-dont-match')}</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,38 +1,43 @@
|
||||
<script>
|
||||
import { AuthService } from "@odit/lfk-client-js";
|
||||
import { AuthService } from "@odit/lfk-client-js";
|
||||
import { _ } from "svelte-i18n";
|
||||
import Toastify from "toastify-js";
|
||||
import "toastify-js/src/toastify.css";
|
||||
import PasswordStrength, {
|
||||
password_strong_enough,
|
||||
} from "../auth/PasswordStrength.svelte";
|
||||
let state = "reset_in_progress";
|
||||
let password = "";
|
||||
export let params;
|
||||
function set_new_password() {
|
||||
if(password.trim() !== ""){
|
||||
Toastify({
|
||||
text: $_('password-reset-in-progress'),
|
||||
duration: 3500,
|
||||
}).showToast();
|
||||
AuthService.authControllerResetPassword(atob(params.resetkey),{ password })
|
||||
if (password.trim() !== "") {
|
||||
Toastify({
|
||||
text: $_("password-reset-in-progress"),
|
||||
duration: 3500,
|
||||
}).showToast();
|
||||
AuthService.authControllerResetPassword(atob(params.resetkey), {
|
||||
password,
|
||||
})
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_('password-reset-successful'),
|
||||
text: $_("password-reset-successful"),
|
||||
duration: 3500,
|
||||
}).showToast();
|
||||
state="reset_success";
|
||||
state = "reset_success";
|
||||
})
|
||||
.catch((err) => {
|
||||
state="reset_error";
|
||||
state = "reset_error";
|
||||
});
|
||||
} else {
|
||||
} else {
|
||||
Toastify({
|
||||
text: $_('please-provide-a-password'),
|
||||
text: $_("please-provide-a-password"),
|
||||
duration: 3500,
|
||||
}).showToast();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if state==="reset_success"}
|
||||
{#if state === 'reset_success'}
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<div class="max-w-md w-full py-12 px-6">
|
||||
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
||||
@@ -56,31 +61,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if state==="reset_error"}
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<div class="max-w-md w-full py-12 px-6">
|
||||
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
||||
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
||||
{$_('application_name')}
|
||||
</p>
|
||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
|
||||
{$_('password-reset-failed')}
|
||||
</p>
|
||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
|
||||
{$_('please-request-a-new-reset-mail')}
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
{:else if state === 'reset_error'}
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<div class="max-w-md w-full py-12 px-6">
|
||||
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
||||
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
||||
{$_('application_name')}
|
||||
</p>
|
||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
|
||||
{$_('password-reset-failed')}
|
||||
</p>
|
||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
|
||||
{$_('please-request-a-new-reset-mail')}
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
href="/forgot_password/"
|
||||
class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
|
||||
{$_('request-a-new-reset-mail')}
|
||||
</a>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
href="/forgot_password/"
|
||||
class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
|
||||
{$_('request-a-new-reset-mail')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if state==="reset_in_progress"}
|
||||
{:else if state === 'reset_in_progress'}
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<div class="max-w-md w-full py-12 px-6">
|
||||
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
||||
@@ -102,11 +107,14 @@
|
||||
placeholder={$_('new-password')}
|
||||
bind:value={password} />
|
||||
</div>
|
||||
<PasswordStrength bind:password_change={password} />
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<button
|
||||
on:click={set_new_password}
|
||||
disabled={!password_strong_enough(password)}
|
||||
class:opacity-50={!password_strong_enough(password)}
|
||||
type="submit"
|
||||
class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
|
||||
<span class="absolute left-0 inset-y pl-3">
|
||||
|
||||
240
src/components/cards/AddCardBulkModal.svelte
Normal file
240
src/components/cards/AddCardBulkModal.svelte
Normal file
@@ -0,0 +1,240 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
import { focusTrap } from "svelte-focus-trap";
|
||||
import { RunnerCardService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
export let bulk_modal_open;
|
||||
export let current_cards;
|
||||
function focus(el) {
|
||||
el.focus();
|
||||
}
|
||||
$: card_count = 0;
|
||||
$: is_card_count_valid = card_count > 0;
|
||||
$: processed_last_submit = true;
|
||||
$: createbtnenabled = is_card_count_valid;
|
||||
(() => {
|
||||
document.onkeydown = (e) => {
|
||||
e = e || window.event;
|
||||
if (e.key === "Escape") {
|
||||
bulk_modal_open = false;
|
||||
}
|
||||
if (e.keyCode === 13) {
|
||||
if (createbtnenabled === true) {
|
||||
createbtnenabled = false;
|
||||
submit_with_print();
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
function submit_without_print() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("creating-blanco-cards"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, false)
|
||||
.then((result) => {
|
||||
bulk_modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("created-blanco-cards"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {
|
||||
//
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function submit_with_print() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("creating-blanco-cards"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
|
||||
.then((result) => {
|
||||
bulk_modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("created-blanco-cards"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
current_cards = current_cards.concat(result);
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
fetch(
|
||||
`${config.baseurl}/documents/cards?&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(result),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Bulkcards.pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
//
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if bulk_modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
use:focusTrap
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
bulk_modal_open = false;
|
||||
}}>
|
||||
<div
|
||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||
<div
|
||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
<div
|
||||
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w- rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<svg
|
||||
class="h-6 w-6 text-blue-600"
|
||||
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
|
||||
fill="currentColor"
|
||||
d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
{$_('create-bulk-blanco-cards')}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
{$_('just-enter-how-many-you-want-and-the-system-will-create-them')}
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="amount"
|
||||
class="block text-sm font-medium text-gray-700">{$_('amount')}</label>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<input
|
||||
autocomplete="off"
|
||||
class:border-red-500={!is_card_count_valid}
|
||||
class:focus:border-red-500={!is_card_count_valid}
|
||||
class:focus:ring-red-500={!is_card_count_valid}
|
||||
bind:value={card_count}
|
||||
type="number"
|
||||
step="1"
|
||||
name="amount"
|
||||
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-gray-500 p-2"
|
||||
placeholder="400" />
|
||||
<span
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">{$_('cards')}</span>
|
||||
</div>
|
||||
{#if !is_card_count_valid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('you-must-create-at-least-one-card-or-cancel')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
disabled={!createbtnenabled}
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit_with_print}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('create-and-generate-pdf')}
|
||||
</button>
|
||||
<button
|
||||
disabled={!createbtnenabled}
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit_without_print}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('create-without-pdf')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
bulk_modal_open = false;
|
||||
}}
|
||||
type="button"
|
||||
class="mr-auto mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('cancel')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
170
src/components/cards/AddCardModal.svelte
Normal file
170
src/components/cards/AddCardModal.svelte
Normal file
@@ -0,0 +1,170 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
import { focusTrap } from "svelte-focus-trap";
|
||||
import {
|
||||
RunnerCardService,
|
||||
RunnerService,
|
||||
ScanService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Select from "svelte-select";
|
||||
import Toastify from "toastify-js";
|
||||
export let modal_open;
|
||||
export let current_cards;
|
||||
const getRunnerLabel = (option) =>
|
||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||
const filterRunners = (label, filterText, option) =>
|
||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
option.value.toString().startsWith(filterText.toLowerCase());
|
||||
function focus(el) {
|
||||
el.focus();
|
||||
}
|
||||
$: runner = 0;
|
||||
$: runners = [];
|
||||
$: enabled = true;
|
||||
$: processed_last_submit = true;
|
||||
RunnerService.runnerControllerGetAll().then((val) => {
|
||||
runners = val.map((r) => {
|
||||
return { label: getRunnerLabel(r), value: r };
|
||||
});
|
||||
});
|
||||
$: createbtnenabled = true;
|
||||
(() => {
|
||||
document.onkeydown = (e) => {
|
||||
e = e || window.event;
|
||||
if (e.key === "Escape") {
|
||||
modal_open = false;
|
||||
}
|
||||
if (e.keyCode === 13) {
|
||||
if (createbtnenabled === true) {
|
||||
createbtnenabled = false;
|
||||
submit();
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("adding-card"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
let postdata = {
|
||||
runner,
|
||||
enabled,
|
||||
};
|
||||
RunnerCardService.runnerCardControllerPost(postdata)
|
||||
.then((result) => {
|
||||
runner = 0;
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("card-added"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
current_cards.push(result);
|
||||
current_cards = current_cards;
|
||||
})
|
||||
.catch((err) => {
|
||||
//
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
use:focusTrap
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
modal_open = false;
|
||||
}}>
|
||||
<div
|
||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||
<div
|
||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
<div
|
||||
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<svg
|
||||
class="h-6 w-6 text-blue-600"
|
||||
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
|
||||
fill="currentColor"
|
||||
d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
{$_('create-a-new-card')}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
{$_('you-can-provide-a-runner-but-you-dont-have-to')}
|
||||
{$_('if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button')}
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="donor"
|
||||
class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
|
||||
<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-gray-500 rounded-md p-2"
|
||||
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
||||
items={runners}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-runners-found')}
|
||||
on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
|
||||
on:clear={() => (runner = null)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
disabled={!createbtnenabled}
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('create')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = false;
|
||||
}}
|
||||
type="button"
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('cancel')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
186
src/components/cards/CardDetailModal.svelte
Normal file
186
src/components/cards/CardDetailModal.svelte
Normal file
@@ -0,0 +1,186 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
import { focusTrap } from "svelte-focus-trap";
|
||||
import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
|
||||
import Select from "svelte-select";
|
||||
import Toastify from "toastify-js";
|
||||
export let edit_modal_open;
|
||||
export let current_cards;
|
||||
export let runner = {};
|
||||
export let editable = {};
|
||||
export let original_data = {};
|
||||
const getRunnerLabel = (option) =>
|
||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||
const filterRunners = (label, filterText, option) =>
|
||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
option.value.toString().startsWith(filterText.toLowerCase());
|
||||
function focus(el) {
|
||||
el.focus();
|
||||
}
|
||||
$: runners = [];
|
||||
$: enabled = true;
|
||||
$: processed_last_submit = true;
|
||||
RunnerService.runnerControllerGetAll().then((val) => {
|
||||
runners = val.map((r) => {
|
||||
return { label: getRunnerLabel(r), value: r };
|
||||
});
|
||||
});
|
||||
$: createbtnenabled = !(
|
||||
JSON.stringify(editable) === JSON.stringify(original_data)
|
||||
);
|
||||
(() => {
|
||||
document.onkeydown = (e) => {
|
||||
e = e || window.event;
|
||||
if (e.key === "Escape") {
|
||||
edit_modal_open = false;
|
||||
}
|
||||
if (e.keyCode === 13) {
|
||||
if (createbtnenabled === true) {
|
||||
createbtnenabled = false;
|
||||
submit();
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("updating-card"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
RunnerCardService.runnerCardControllerPut(original_data.id, editable)
|
||||
.then((result) => {
|
||||
let id = original_data.id;
|
||||
runner = {};
|
||||
editable = {};
|
||||
original_data = {};
|
||||
edit_modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("card-updated"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
current_cards[current_cards.findIndex((c) => c.id === id)] = result;
|
||||
current_cards = current_cards;
|
||||
})
|
||||
.catch((err) => {
|
||||
//
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if edit_modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
use:focusTrap
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
edit_modal_open = false;
|
||||
}}>
|
||||
<div
|
||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||
<div
|
||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
<div
|
||||
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<svg
|
||||
class="h-6 w-6 text-blue-600"
|
||||
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
|
||||
fill="currentColor"
|
||||
d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
{$_('edit-a-card')}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
{$_('you-can-provide-a-runner-but-you-dont-have-to')}
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="runner"
|
||||
class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
|
||||
<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-gray-500 rounded-md p-2"
|
||||
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
||||
items={runners}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-runners-found')}
|
||||
bind:selectedValue={runner}
|
||||
on:select={(selectedValue) => (editable.runner = selectedValue.detail.value.id)}
|
||||
on:clear={() => (editable.runner = null)} />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<p class="text-gray-500">
|
||||
<input
|
||||
id="enabled"
|
||||
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-card-is')}
|
||||
{#if editable.enabled}
|
||||
{$_('enabled')}
|
||||
{:else}{$_('disabled')}{/if}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
disabled={!createbtnenabled}
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('save-changes')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
edit_modal_open = false;
|
||||
}}
|
||||
type="button"
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('cancel')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
40
src/components/cards/Cards.svelte
Normal file
40
src/components/cards/Cards.svelte
Normal file
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import store from "../../store";
|
||||
import AddCardBulkModal from "./AddCardBulkModal.svelte";
|
||||
import AddCardModal from "./AddCardModal.svelte";
|
||||
import CardsOverview from "./CardsOverview.svelte";
|
||||
$: current_cards = [];
|
||||
export let modal_open = false;
|
||||
export let bulk_modal_open = false;
|
||||
</script>
|
||||
|
||||
<section class="container p-5">
|
||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||
{$_('cards')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:CREATE')}
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = true;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('add-card')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
bulk_modal_open = true;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('create-bulk-cards')}
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
<CardsOverview bind:current_cards />
|
||||
</section>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:CREATE')}
|
||||
<AddCardModal bind:current_cards bind:modal_open />
|
||||
<AddCardBulkModal bind:current_cards bind:bulk_modal_open />
|
||||
{/if}
|
||||
12
src/components/cards/CardsEmptyState.svelte
Normal file
12
src/components/cards/CardsEmptyState.svelte
Normal file
@@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import cards_empty from "./cards.svg";
|
||||
</script>
|
||||
|
||||
<div class="text-center items-center justify-center">
|
||||
<p class="mb-16 text-lg text-gray-500">
|
||||
<img class="m-auto" style="height:15rem" src={cards_empty} alt="" />
|
||||
<span class="font-bold">{$_('there-are-no-cards-yet')}</span><br />
|
||||
<span>{$_('add-your-first-card')}</span>
|
||||
</p>
|
||||
</div>
|
||||
237
src/components/cards/CardsOverview.svelte
Normal file
237
src/components/cards/CardsOverview.svelte
Normal file
@@ -0,0 +1,237 @@
|
||||
<script>
|
||||
import { getLocaleFromNavigator, json, _ } from "svelte-i18n";
|
||||
import { RunnerCardService } from "@odit/lfk-client-js";
|
||||
import store from "../../store";
|
||||
import Toastify from "toastify-js";
|
||||
import CardsEmptyState from "./CardsEmptyState.svelte";
|
||||
import CardDetailModal from "./CardDetailModal.svelte";
|
||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
export let edit_modal_open = false;
|
||||
export let runner = {};
|
||||
export let editable = {};
|
||||
export let original_data = {};
|
||||
export let current_cards = [];
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
$: cards_show = current_cards.some(
|
||||
(r) => r.is_selected === true
|
||||
);
|
||||
$: generate_cards = current_cards.filter((r) => r.is_selected === true);
|
||||
const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
|
||||
(val) => {
|
||||
current_cards = val;
|
||||
}
|
||||
);
|
||||
function should_display_based_on_id(id) {
|
||||
if (searchvalue.toString().slice(-1) === "*") {
|
||||
return id.toString().startsWith(searchvalue.replace("*", ""));
|
||||
}
|
||||
return id.toString() === searchvalue;
|
||||
}
|
||||
const getRunnerLabel = (option) =>
|
||||
option?.firstname + " " + (option?.middlename || "") + " " + (option?.lastname || "{$_('non-blanko')}");
|
||||
function open_edit_modal(card) {
|
||||
if(card.runner?.id){
|
||||
runner = Object.assign(
|
||||
{ runner },
|
||||
{ label: getRunnerLabel(card.runner), value: card.runner }
|
||||
);
|
||||
card.runner = card.runner.id;
|
||||
}
|
||||
else{
|
||||
card.runner=null;
|
||||
runner = null
|
||||
}
|
||||
editable = Object.assign(editable, card);
|
||||
original_data = Object.assign(original_data, card);
|
||||
edit_modal_open = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
|
||||
<CardDetailModal
|
||||
bind:current_cards
|
||||
bind:edit_modal_open
|
||||
bind:runner
|
||||
bind:editable
|
||||
bind:original_data />
|
||||
{/if}
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
|
||||
{#await cards_promise}
|
||||
<div
|
||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||
role="alert">
|
||||
<p class="font-bold">{$_('loading-cards')}</p>
|
||||
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||
</div>
|
||||
{:then}
|
||||
{#if current_cards.length === 0}
|
||||
<CardsEmptyState />
|
||||
{:else}
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_('datatable.search')}
|
||||
aria-label={$_('datatable.search')}
|
||||
class="gridjs-input gridjs-search-input mb-4" />
|
||||
<div class="h-12">
|
||||
<GenerateRunnerCards
|
||||
bind:cards_show
|
||||
bind:generate_cards />
|
||||
</div>
|
||||
<div
|
||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
||||
<table class="divide-y divide-gray-200 w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<span
|
||||
on:click={() => {
|
||||
const newstate = !current_cards.some((r) => r.is_selected === true);
|
||||
current_cards = current_cards.map((r) => {
|
||||
r.is_selected = newstate;
|
||||
return r;
|
||||
});
|
||||
}}
|
||||
class="underline cursor-pointer select-none">{#if current_cards.some((r) => r.is_selected === true)}
|
||||
{$_('deselect-all')}
|
||||
{:else}{$_('select-all')}{/if}
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('code')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('runner')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('status')}
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">{$_('action')}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{#each current_cards as card}
|
||||
{#if card.code
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || card.runner?.firstname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || card.runner?.middlename
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || card.runner?.lastname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || should_display_based_on_id(card.id)}
|
||||
<tr data-rowid="card_{card.id}">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<input
|
||||
bind:checked={card.is_selected}
|
||||
type="checkbox"
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">{card.code}</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
{#if card.runner}
|
||||
<a
|
||||
href="../runners/{card.runner.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
|
||||
{card.runner.middlename || ''}
|
||||
{card.runner.lastname}</a>
|
||||
{:else}{$_('non-blanko')}{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
{#if card.enabled}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
|
||||
{:else}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{#if active_deletes[card.id] === true}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[card.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
RunnerCardService.runnerCardControllerRemove(card.id, false).then(
|
||||
(resp) => {
|
||||
current_cards = current_cards.filter(
|
||||
(obj) => obj.id !== card.id
|
||||
);
|
||||
Toastify({
|
||||
text: $_('card-deleted'),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
'linear-gradient(to right, #00b09b, #96c93d)',
|
||||
}).showToast();
|
||||
}
|
||||
);
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||
</td>
|
||||
{:else}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
on:click={() => {
|
||||
open_edit_modal(card);
|
||||
}}
|
||||
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[card.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||
{/if}
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||
<span class="inline-block align-middle mr-8">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
1
src/components/cards/cards.svg
Normal file
1
src/components/cards/cards.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 653.9 247.6"><path d="M272 211l-53 12s-11-2-1-17l4-4 27-14v-2l-6-41-2-16 17-17 4-3 44 41v1l-19 33z" fill="#ffb7b7"/><path d="M253 198l-54 13a6 6 0 01-5-7 16 16 0 012-5 48 48 0 016-9l28-14-4-24-1-12-2-8-2-16 21-19 22 21 22 20-3 5-3 7-17 30-3 6z" fill="#ffb7b7"/><path d="M346 190s-20-1-28-15a24 24 0 01-3-14l-8-17-11-23-30-4-2 1-21 19-7 6-10 9-49 44a37 37 0 01-7 9 50 50 0 01-9 7c-10 5-24 9-44 7L10 248 0 176l89-29 131-86 89 23 41 58z" fill="#ffb7b7"/><path d="M648 0H275a5 5 0 00-5 5v221a5 5 0 005 6h373a5 5 0 006-6V5a5 5 0 00-6-5z" fill="#fff"/><path d="M648 0H275a5 5 0 00-5 5v221a5 5 0 005 6h373a5 5 0 006-6V5a5 5 0 00-6-5zm4 226a4 4 0 01-4 4H275a4 4 0 01-3-4V5a4 4 0 013-3h373a4 4 0 014 3z" fill="#3f3d56"/><path d="M312 30a9 9 0 119-9 9 9 0 01-9 9zm0-17a8 8 0 107 8 8 8 0 00-7-8z" fill="#6c63ff"/><path d="M297 21a8 8 0 016-8 8 8 0 100 16 8 8 0 01-6-8zM349 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM368 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM386 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM415 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM434 130a7 7 0 01-7-7v-20a7 7 0 0113 0v20a7 7 0 01-6 7zM452 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM481 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM499 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM518 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM546 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM565 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM583 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7z" fill="#6c63ff"/><path d="M396 208h-99a5 5 0 110-10h99a5 5 0 010 10zM364 188h-35a5 5 0 110-10h35a5 5 0 110 10z" fill="#e6e6e6"/><path fill="#3f3d56" d="M271 46h381v2H271z"/><path opacity=".1" d="M228 203l-1-2 33-15 8-27-12-10 1-1 13 10-8 30-34 15zM196 199l-9 4-17 2a50 50 0 01-9 7l-16-1-26-1 88-74 18 4-29 59z"/><path d="M318 175l-8 1-47 4-29 1-38 18-9 4-70 8 95-81 11 2 20 5 22 5 18 1 24 1 20 1a13 13 0 0112 13c0 7-5 14-21 17z" fill="#ffb7b7"/><path d="M325 170s-7-2-9-9c-2-4-1-9 3-15l1 1c-3 6-4 10-3 14 2 5 9 7 9 7zM197 197l34-16v2l-33 16zM218 135l48-19v2l-41 16 35 6v2l-42-7z" opacity=".1"/></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -1,308 +1,327 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import localForage from "localforage";
|
||||
import store from "../../store";
|
||||
import { router } from "tinro";
|
||||
import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
|
||||
import { AuthService } from "@odit/lfk-client-js";
|
||||
$: navOpen = false;
|
||||
function logout() {
|
||||
localForage.clear();
|
||||
location.replace("/");
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="min-h-screen bg-gray-50">
|
||||
<nav
|
||||
class:-translate-x-full={!navOpen}
|
||||
class:translate-x-0={navOpen}
|
||||
class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0 bg-gray-50">
|
||||
<a href="/" class="flex items-center px-4 py-5">
|
||||
<img src="/lfk-logo.png" alt="Logo" class="h-10" />
|
||||
<h3 class="text-lg">Lauf für Kaya! Admin</h3>
|
||||
</a>
|
||||
<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor">
|
||||
<path
|
||||
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
|
||||
</svg>
|
||||
<span>{$_('dashboard-title')}</span>
|
||||
</a>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path.includes('/orgs/')}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/orgs/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
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="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
|
||||
<span>{$_('orgs')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/users/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/users/">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z" /></svg>
|
||||
<span>{$_('users')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/groups/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/groups/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"><path
|
||||
fill="currentColor"
|
||||
d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
|
||||
<span>{$_('user-groups')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/runners/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/runners/">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
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" /></svg>
|
||||
<span>{$_('runners')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/teams/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/teams/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"><path
|
||||
fill="currentColor"
|
||||
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
|
||||
<span>{$_('teams')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path.includes('/donors/')}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/donors/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
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>
|
||||
<span>{$_('donors')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path.includes('/donations/')}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/donations/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
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="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" /></svg>
|
||||
<span>{$_('donations')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('TRACK:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/tracks/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/tracks/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"><path
|
||||
fill="currentColor"
|
||||
d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
|
||||
<span>{$_('tracks')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/scans/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/scans/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
|
||||
<span>Scans</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/contacts/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/contacts/">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
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" /></svg>
|
||||
<span>{$_('contacts')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('STATION:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/scanstations/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/scanstations/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"><path
|
||||
fill="none"
|
||||
d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
|
||||
<span>{$_('scanstations')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/settings/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/settings/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span>{$_('settings')}</span>
|
||||
</a>
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/about/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/about/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 16v-4M12 8h.01" /></svg>
|
||||
<span>{$_('about')}</span>
|
||||
</a>
|
||||
<span
|
||||
tabindex="0"
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
on:click={() => {
|
||||
AuthService.authControllerLogout();
|
||||
logout();
|
||||
}}>
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z" /></svg>
|
||||
<span>{$_('logout')}</span>
|
||||
</span>
|
||||
</nav>
|
||||
</nav>
|
||||
<div class="ml-0 transition md:ml-60">
|
||||
<header
|
||||
on:click={() => {
|
||||
navOpen = true;
|
||||
}}
|
||||
class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden">
|
||||
<button class="block btn btn-light md:hidden">
|
||||
<span class="sr-only">Menu</span><svg
|
||||
class="w-4 h-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentcolor"><path
|
||||
fill-rule="evenodd"
|
||||
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4A1 1 0 013 5zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||||
clip-rule="evenodd" /></svg></button>
|
||||
</header>
|
||||
<slot>
|
||||
<NoComponentLoaded />
|
||||
</slot>
|
||||
</div>
|
||||
<div
|
||||
on:click={() => {
|
||||
navOpen = false;
|
||||
}}
|
||||
class:hidden={!navOpen}
|
||||
class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" />
|
||||
</section>
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import localForage from "localforage";
|
||||
import store from "../../store";
|
||||
import { router } from "tinro";
|
||||
import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
|
||||
import { AuthService } from "@odit/lfk-client-js";
|
||||
$: navOpen = false;
|
||||
function logout() {
|
||||
localForage.clear();
|
||||
location.replace("/");
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="min-h-screen bg-gray-50">
|
||||
<nav
|
||||
class:-translate-x-full={!navOpen}
|
||||
class:translate-x-0={navOpen}
|
||||
class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0 bg-gray-50">
|
||||
<a href="/" class="flex items-center px-4 py-5">
|
||||
<img src="/lfk-logo.png" alt="Logo" class="h-10" />
|
||||
<h3 class="text-lg">Lauf für Kaya! Admin</h3>
|
||||
</a>
|
||||
<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor">
|
||||
<path
|
||||
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
|
||||
</svg>
|
||||
<span>{$_('dashboard-title')}</span>
|
||||
</a>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path.includes('/orgs/')}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/orgs/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
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="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
|
||||
<span>{$_('orgs')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/users/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/users/">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z" /></svg>
|
||||
<span>{$_('users')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/groups/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/groups/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"><path
|
||||
fill="currentColor"
|
||||
d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
|
||||
<span>{$_('user-groups')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/runners/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/runners/">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
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" /></svg>
|
||||
<span>{$_('runners')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/teams/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/teams/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"><path
|
||||
fill="currentColor"
|
||||
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
|
||||
<span>{$_('teams')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path.includes('/donors/')}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/donors/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
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>
|
||||
<span>{$_('donors')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path.includes('/donations/')}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/donations/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
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="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" /></svg>
|
||||
<span>{$_('donations')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('TRACK:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/tracks/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/tracks/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"><path
|
||||
fill="currentColor"
|
||||
d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
|
||||
<span>{$_('tracks')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/cards/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/cards/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
|
||||
<span>{$_('cards')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/scans/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/scans/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
|
||||
<span>Scans</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/contacts/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/contacts/">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
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" /></svg>
|
||||
<span>{$_('contacts')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('STATION:GET')}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/scanstations/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/scanstations/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"><path
|
||||
fill="none"
|
||||
d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
|
||||
<span>{$_('scanstations')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/settings/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/settings/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span>{$_('settings')}</span>
|
||||
</a>
|
||||
<a
|
||||
class:bg-gray-100={$router.path === '/about/'}
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
href="/about/">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 16v-4M12 8h.01" /></svg>
|
||||
<span>{$_('about')}</span>
|
||||
</a>
|
||||
<span
|
||||
tabindex="0"
|
||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||
on:click={() => {
|
||||
AuthService.authControllerLogout();
|
||||
logout();
|
||||
}}>
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z" /></svg>
|
||||
<span>{$_('logout')}</span>
|
||||
</span>
|
||||
</nav>
|
||||
</nav>
|
||||
<div class="ml-0 transition md:ml-60">
|
||||
<header
|
||||
on:click={() => {
|
||||
navOpen = true;
|
||||
}}
|
||||
class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden">
|
||||
<button class="block btn btn-light md:hidden">
|
||||
<span class="sr-only">Menu</span><svg
|
||||
class="w-4 h-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentcolor"><path
|
||||
fill-rule="evenodd"
|
||||
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4A1 1 0 013 5zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||||
clip-rule="evenodd" /></svg></button>
|
||||
</header>
|
||||
<slot>
|
||||
<NoComponentLoaded />
|
||||
</slot>
|
||||
</div>
|
||||
<div
|
||||
on:click={() => {
|
||||
navOpen = false;
|
||||
}}
|
||||
class:hidden={!navOpen}
|
||||
class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" />
|
||||
</section>
|
||||
|
||||
@@ -74,20 +74,12 @@
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donation.donor.middlename
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donation.donor.lastname
|
||||
) || donation.donor.lastname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donation.runner?.firstname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donation.runner?.middlename
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donation.runner?.lastname
|
||||
|
||||
@@ -88,11 +88,7 @@
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donor.middlename
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donor.lastname
|
||||
) || donor.lastname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
|
||||
@@ -6,13 +6,15 @@
|
||||
let html = "";
|
||||
async function load() {
|
||||
let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
|
||||
if((await md.text()).includes("<meta")){
|
||||
let text = (await md.text()).toString();
|
||||
if(text.includes("<meta")){
|
||||
md.ok=false
|
||||
}
|
||||
if (!md.ok) {
|
||||
md = await fetch("/imprint_en.md");
|
||||
text = await md.text();
|
||||
}
|
||||
html = marked(await md.text());
|
||||
html = marked(text);
|
||||
}
|
||||
const promise = load();
|
||||
</script>
|
||||
|
||||
@@ -6,13 +6,15 @@
|
||||
let html = "";
|
||||
async function load() {
|
||||
let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
|
||||
if((await md.text()).includes("<meta")){
|
||||
let text = (await md.text()).toString();
|
||||
if(text.includes("<meta")){
|
||||
md.ok=false
|
||||
}
|
||||
if (!md.ok) {
|
||||
md = await fetch("/privacy_en.md");
|
||||
text = await md.text();
|
||||
}
|
||||
html = marked(await md.text());
|
||||
html = marked(text);
|
||||
}
|
||||
const promise = load();
|
||||
</script>
|
||||
|
||||
@@ -10,6 +10,9 @@
|
||||
import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import Select from "svelte-select";
|
||||
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
import { tick } from "svelte";
|
||||
$: delete_triggered = false;
|
||||
$: address_valid_or_none =
|
||||
(isAddress1Valid && iszipcodevalid && iscityvalid) ||
|
||||
@@ -18,6 +21,9 @@
|
||||
let original = "";
|
||||
let original_object = {};
|
||||
let contacts = [];
|
||||
let valueCopy = null;
|
||||
let areaDom;
|
||||
let copied = false;
|
||||
export let params;
|
||||
$: editable = {};
|
||||
$: contact = {};
|
||||
@@ -26,7 +32,10 @@
|
||||
$: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
|
||||
$: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
|
||||
$: iscityvalid = editable.address?.city?.trim().length !== 0;
|
||||
$: sponsoring_contracts_download_open = false;
|
||||
$: sponsoring_contracts_show = true;
|
||||
$: cards_show = true;
|
||||
$: generate_orgs = [original_object];
|
||||
$: registrationLink = `${config.baseurl}/selfservice/register/${editable.registrationKey}`;
|
||||
const getContactLabel = (option) =>
|
||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||
const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
|
||||
@@ -60,14 +69,6 @@
|
||||
});
|
||||
let modal_open = false;
|
||||
let delete_org = {};
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
|
||||
) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
}
|
||||
});
|
||||
function deleteOrganization() {
|
||||
RunnerOrganizationService.runnerOrganizationControllerRemove(
|
||||
original_object.id,
|
||||
@@ -102,6 +103,7 @@
|
||||
postdata
|
||||
)
|
||||
.then((resp) => {
|
||||
editable.registrationKey = resp.registrationKey;
|
||||
original_object = Object.assign({}, editable);
|
||||
original = JSON.stringify(original_object);
|
||||
Toastify({
|
||||
@@ -114,58 +116,46 @@
|
||||
} else {
|
||||
}
|
||||
}
|
||||
export let import_modal_open = false;
|
||||
async function generateSponsoringContract(locale) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
|
||||
original_object.id
|
||||
);
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
fetch(
|
||||
`${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(runners),
|
||||
async function copy() {
|
||||
if(!editable.registrationKey){
|
||||
Toastify({
|
||||
text: $_('you-have-to-save-your-changes-to-generate-a-link'),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
return;
|
||||
}
|
||||
valueCopy = registrationLink;
|
||||
await tick();
|
||||
areaDom.focus();
|
||||
areaDom.select();
|
||||
try {
|
||||
const successful = document.execCommand("copy");
|
||||
if (!successful) {
|
||||
throw new Error();
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Sponsorings_" + original_object.name + ".pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {});
|
||||
Toastify({
|
||||
text: $_("copied-link-to-clipboard"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
copied = true;
|
||||
} catch (err) {
|
||||
Toastify({
|
||||
text: $_("error-whyile-copying-to-clipboard"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
}
|
||||
// we can notifi by event or storage about copy status
|
||||
valueCopy = null;
|
||||
}
|
||||
export let import_modal_open = false;
|
||||
</script>
|
||||
|
||||
{#if valueCopy != null}<textarea bind:this={areaDom}>{valueCopy}</textarea>{/if}
|
||||
<ImportRunnerModal
|
||||
on:cancelDelete={(event) => {
|
||||
import_modal_open = false;
|
||||
@@ -182,64 +172,10 @@
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
{original_object.name}
|
||||
<span data-id="org_actions_${editable.id}">
|
||||
<div id="sponsoring:dropdown" class="relative inline-block">
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true">
|
||||
{$_('generate-sponsoring-contracts')}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
class="-mr-1 ml-2 h-5 w-5"><path
|
||||
fill="none"
|
||||
d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
{#if sponsoring_contracts_download_open}
|
||||
<div
|
||||
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
|
||||
id="sponsoring:dropdown:menu">
|
||||
<div
|
||||
class="py-1"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu">
|
||||
<span
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('de');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('german')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('en');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('english')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<GenerateSponsoringContracts
|
||||
bind:sponsoring_contracts_show
|
||||
bind:generate_orgs />
|
||||
<GenerateRunnerCards bind:cards_show bind:generate_orgs />
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
|
||||
<button
|
||||
on:click={() => {
|
||||
@@ -382,99 +318,151 @@
|
||||
on:select={(selectedValue) => (editable.contact = selectedValue.detail.value)}
|
||||
on:clear={() => (editable.contact = null)} />
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="flex items-start mt-2">
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
bind:checked={editable.address_checked}
|
||||
id="comments"
|
||||
name="comments"
|
||||
type="checkbox"
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||
<div>
|
||||
<div class="flex items-start mt-2">
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
bind:checked={editable.registrationEnabled}
|
||||
id="comments"
|
||||
name="comments"
|
||||
type="checkbox"
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label
|
||||
for="comments"
|
||||
class="font-medium text-gray-700">{$_('selfservice-registration')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label
|
||||
for="comments"
|
||||
class="font-medium text-gray-700">{$_('address')}</label>
|
||||
<div>
|
||||
{#if editable.registrationEnabled}
|
||||
<div class="text-sm w-full">
|
||||
<div on:click={copy} class="inline-flex w-full">
|
||||
<p
|
||||
name="token"
|
||||
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-gray-500 p-2">
|
||||
{#if editable.registrationKey}
|
||||
{registrationLink}
|
||||
{:else}
|
||||
{$_('you-have-to-save-your-changes-to-generate-a-link')}
|
||||
{/if}
|
||||
</p>
|
||||
<div
|
||||
class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
{#if editable.registrationKey}
|
||||
<p class="text-gray-500 text-xs">
|
||||
{$_('click-to-copy-the-link-into-your-clipboard')}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- -->
|
||||
<div>
|
||||
<div class="flex items-start mt-2">
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
bind:checked={editable.address_checked}
|
||||
id="comments"
|
||||
name="comments"
|
||||
type="checkbox"
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label
|
||||
for="comments"
|
||||
class="font-medium text-gray-700">{$_('address')}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if editable.address_checked === true}
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address1"
|
||||
class="block text-sm font-medium text-gray-700">{$_('address')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Address"
|
||||
class:border-red-500={!isAddress1Valid}
|
||||
class:focus:border-red-500={!isAddress1Valid}
|
||||
class:focus:ring-red-500={!isAddress1Valid}
|
||||
bind:value={editable.address.address1}
|
||||
type="text"
|
||||
name="address1"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
{#if !isAddress1Valid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('address-is-required')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address2"
|
||||
class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('apartment-suite-etc')}
|
||||
bind:value={editable.address.address2}
|
||||
type="text"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="zipcode"
|
||||
class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('zip-postal-code')}
|
||||
class:border-red-500={!iszipcodevalid}
|
||||
class:focus:border-red-500={!iszipcodevalid}
|
||||
class:focus:ring-red-500={!iszipcodevalid}
|
||||
bind:value={editable.address.postalcode}
|
||||
type="text"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
{#if !iszipcodevalid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-zipcode-postal-code-is-required')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="city"
|
||||
class="block text-sm font-medium text-gray-700">{$_('city')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('city')}
|
||||
class:border-red-500={!iscityvalid}
|
||||
class:focus:border-red-500={!iscityvalid}
|
||||
class:focus:ring-red-500={!iscityvalid}
|
||||
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-gray-500 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}
|
||||
</div>
|
||||
</div>
|
||||
{#if editable.address_checked === true}
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address1"
|
||||
class="block text-sm font-medium text-gray-700">{$_('address')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Address"
|
||||
class:border-red-500={!isAddress1Valid}
|
||||
class:focus:border-red-500={!isAddress1Valid}
|
||||
class:focus:ring-red-500={!isAddress1Valid}
|
||||
bind:value={editable.address.address1}
|
||||
type="text"
|
||||
name="address1"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
{#if !isAddress1Valid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('address-is-required')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address2"
|
||||
class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('apartment-suite-etc')}
|
||||
bind:value={editable.address.address2}
|
||||
type="text"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="zipcode"
|
||||
class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('zip-postal-code')}
|
||||
class:border-red-500={!iszipcodevalid}
|
||||
class:focus:border-red-500={!iszipcodevalid}
|
||||
class:focus:ring-red-500={!iszipcodevalid}
|
||||
bind:value={editable.address.postalcode}
|
||||
type="text"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
{#if !iszipcodevalid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-zipcode-postal-code-is-required')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="city"
|
||||
class="block text-sm font-medium text-gray-700">{$_('city')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('city')}
|
||||
class:border-red-500={!iscityvalid}
|
||||
class:focus:border-red-500={!iscityvalid}
|
||||
class:focus:ring-red-500={!iscityvalid}
|
||||
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-gray-500 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>
|
||||
{:else}
|
||||
{#await promise}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script>
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
||||
let modal_open = false;
|
||||
let delete_org = {};
|
||||
import { RunnerOrganizationService } from "@odit/lfk-client-js";
|
||||
@@ -7,9 +8,12 @@
|
||||
import OrgsEmptyState from "./OrgsEmptyState.svelte";
|
||||
import Toastify from "toastify-js";
|
||||
import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
|
||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
$: sponsoring_contracts_download_open = false;
|
||||
$: sponsoring_contracts_show = current_organizations.some((r) => r.is_selected === true);
|
||||
$: cards_show = current_organizations.some((r) => r.is_selected === true);
|
||||
$: generate_orgs = current_organizations.filter((r) => r.is_selected === true);
|
||||
export let current_organizations = [];
|
||||
|
||||
const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
|
||||
@@ -17,72 +21,6 @@
|
||||
current_organizations = val;
|
||||
}
|
||||
);
|
||||
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
|
||||
) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
}
|
||||
});
|
||||
|
||||
async function generateSponsoringContract(locale) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
const orgs = current_organizations.filter((r) => r.is_selected === true);
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdfs"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
let count = 0;
|
||||
for (const o of orgs) {
|
||||
const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
|
||||
o.id
|
||||
);
|
||||
fetch(
|
||||
`${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(runners),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
count++;
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Sponsorings_" + o.name + ".pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === orgs.length) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ConfirmOrgDeletion
|
||||
@@ -111,56 +49,12 @@
|
||||
aria-label={$_('datatable.search')}
|
||||
class="gridjs-input gridjs-search-input mb-4" />
|
||||
<div class="h-12">
|
||||
{#if current_organizations.some((r) => r.is_selected === true)}
|
||||
<div id="sponsoring:dropdown" class="relative inline-block">
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true">
|
||||
{$_('generate-sponsoring-contracts')}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="-mr-1 ml-2 h-5 w-5"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{#if sponsoring_contracts_download_open}
|
||||
<div
|
||||
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
|
||||
id="sponsoring:dropdown:menu">
|
||||
<div
|
||||
class="py-1"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu">
|
||||
<span
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('de');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('german')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('en');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('english')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<GenerateSponsoringContracts
|
||||
bind:sponsoring_contracts_show
|
||||
bind:generate_orgs />
|
||||
<GenerateRunnerCards
|
||||
bind:cards_show
|
||||
bind:generate_orgs />
|
||||
</div>
|
||||
<div
|
||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
||||
|
||||
339
src/components/pdf_generation/GenerateRunnerCards.svelte
Normal file
339
src/components/pdf_generation/GenerateRunnerCards.svelte
Normal file
@@ -0,0 +1,339 @@
|
||||
<script>
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import {
|
||||
RunnerCardService,
|
||||
RunnerOrganizationService,
|
||||
RunnerTeamService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
export let cards_show = false;
|
||||
export let generate_cards = [];
|
||||
export let generate_runners = [];
|
||||
export let generate_orgs = [];
|
||||
export let generate_teams = [];
|
||||
$: cards_dropdown_open = false;
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
|
||||
e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
|
||||
) {
|
||||
cards_dropdown_open = false;
|
||||
}
|
||||
});
|
||||
|
||||
function generateRunnerCards(locale) {
|
||||
cards_dropdown_open = false;
|
||||
|
||||
if (generate_orgs.length > 0) {
|
||||
generateOrgCards(locale);
|
||||
} else if (generate_teams.length > 0) {
|
||||
generateTeamCards(locale);
|
||||
} else if (generate_runners.length > 0) {
|
||||
generateRunnersCards(locale);
|
||||
} else {
|
||||
generateCards(locale);
|
||||
}
|
||||
}
|
||||
|
||||
function generateCards(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
fetch(
|
||||
`${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(generate_cards),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Runnercards.pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
async function generateRunnersCards(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
||||
let cards = [];
|
||||
for (let runner of generate_runners) {
|
||||
let card = current_cards.find((c) => c.runner?.id == runner.id);
|
||||
if (!card) {
|
||||
card = await RunnerCardService.runnerCardControllerPost({
|
||||
runner: runner.id,
|
||||
});
|
||||
}
|
||||
cards.push(card);
|
||||
}
|
||||
fetch(
|
||||
`${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(cards),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Runnercards.pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
|
||||
async function generateTeamCards(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdfs"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
let count = 0;
|
||||
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
||||
for await (const t of generate_teams) {
|
||||
const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
|
||||
t.id
|
||||
);
|
||||
let cards = [];
|
||||
for (let runner of runners) {
|
||||
let card = current_cards.find((c) => c.runner?.id == runner.id);
|
||||
if (!card) {
|
||||
card = await RunnerCardService.runnerCardControllerPost({
|
||||
runner: runner.id,
|
||||
});
|
||||
}
|
||||
cards.push(card);
|
||||
}
|
||||
fetch(
|
||||
`${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(cards),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
count++;
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Sponsorings_" + t.name + ".pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === generate_teams.length) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
}
|
||||
|
||||
async function generateOrgCards(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
let count = 0;
|
||||
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
||||
for await (const o of generate_orgs) {
|
||||
const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
|
||||
o.id
|
||||
);
|
||||
let cards = [];
|
||||
for (let runner of runners) {
|
||||
let card = current_cards.find((c) => c.runner?.id == runner.id);
|
||||
if (!card) {
|
||||
card = await RunnerCardService.runnerCardControllerPost({
|
||||
runner: runner.id,
|
||||
});
|
||||
}
|
||||
cards.push(card);
|
||||
}
|
||||
fetch(
|
||||
`${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(cards),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
count++;
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Sponsorings_" + o.name + ".pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === generate_orgs.length) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if cards_show}
|
||||
<div id="cards:dropdown" class="relative inline-block">
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
cards_dropdown_open = !cards_dropdown_open;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true">
|
||||
{$_('generate-runnercards')}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
class="-mr-1 ml-2 h-5 w-5"><path
|
||||
fill="none"
|
||||
d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
{#if cards_dropdown_open}
|
||||
<div
|
||||
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
|
||||
id="cards:dropdown:menu">
|
||||
<div
|
||||
class="py-1"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu">
|
||||
<span
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateRunnerCards('de');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
|
||||
role="menuitem">
|
||||
{$_('german')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateRunnerCards('en');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
|
||||
role="menuitem">
|
||||
{$_('english')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
254
src/components/pdf_generation/GenerateSponsoringContracts.svelte
Normal file
254
src/components/pdf_generation/GenerateSponsoringContracts.svelte
Normal file
@@ -0,0 +1,254 @@
|
||||
<script>
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import {
|
||||
RunnerOrganizationService,
|
||||
RunnerTeamService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
export let sponsoring_contracts_show = false;
|
||||
export let generate_runners = [];
|
||||
export let generate_orgs = [];
|
||||
export let generate_teams = [];
|
||||
$: sponsoring_contracts_download_open = false;
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
|
||||
) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
}
|
||||
});
|
||||
|
||||
function generateSponsoringContract(locale) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
|
||||
if (generate_orgs.length > 0) {
|
||||
generateOrgContracts(locale);
|
||||
} else if (generate_teams.length > 0) {
|
||||
generateTeamContracts(locale);
|
||||
} else {
|
||||
generateRunnerContracts(locale);
|
||||
}
|
||||
}
|
||||
|
||||
async function generateTeamContracts(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdfs"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
let count = 0;
|
||||
for await (const t of generate_teams) {
|
||||
count++;
|
||||
const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
|
||||
t.id
|
||||
);
|
||||
fetch(
|
||||
`${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(runners),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Sponsorings_" + t.name + ".pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === generate_teams.length) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
}
|
||||
|
||||
async function generateOrgContracts(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
for await (const o of generate_orgs) {
|
||||
const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
|
||||
o.id
|
||||
);
|
||||
fetch(
|
||||
`${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(runners),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
count++;
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Sponsorings_" + o.name + ".pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === generate_orgs.length) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
}
|
||||
|
||||
function generateRunnerContracts(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
fetch(
|
||||
`${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(generate_runners),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Sponsoring.pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if sponsoring_contracts_show}
|
||||
<div id="sponsoring:dropdown" class="relative inline-block">
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true">
|
||||
{$_('generate-sponsoring-contracts')}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
class="-mr-1 ml-2 h-5 w-5"><path
|
||||
fill="none"
|
||||
d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
{#if sponsoring_contracts_download_open}
|
||||
<div
|
||||
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
|
||||
id="sponsoring:dropdown:menu">
|
||||
<div
|
||||
class="py-1"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu">
|
||||
<span
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('de');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
|
||||
role="menuitem">
|
||||
{$_('german')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('en');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
|
||||
role="menuitem">
|
||||
{$_('english')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -19,6 +19,11 @@
|
||||
export let current_runners;
|
||||
export let import_modal_open;
|
||||
$: searchvalue = "";
|
||||
$: importButtonEnabled =
|
||||
recent_processed &&
|
||||
(!(selected_org_or_team == "" || selected_org_or_team == null) ||
|
||||
!(passed_org?.id == null || passed_org?.id == 0) ||
|
||||
!(passed_team?.id == null || passed_team?.id == 0));
|
||||
const dispatch = createEventDispatcher();
|
||||
function cancelModal() {
|
||||
json_output = [];
|
||||
@@ -44,7 +49,10 @@
|
||||
groups = groups.concat(orgs);
|
||||
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
|
||||
const teams = val.map((r) => {
|
||||
return { label: `${r.parentGroup.name} > ${r.name}`, value: `TEAM_${r.id}` };
|
||||
return {
|
||||
label: `${r.parentGroup.name} > ${r.name}`,
|
||||
value: `TEAM_${r.id}`,
|
||||
};
|
||||
});
|
||||
groups = groups.concat(teams);
|
||||
});
|
||||
@@ -120,6 +128,13 @@
|
||||
.catch((err) => {
|
||||
toast.hideToast();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_("error-during-import"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
cancelModal();
|
||||
});
|
||||
}
|
||||
if (opened_from === "TeamDetail") {
|
||||
@@ -137,6 +152,13 @@
|
||||
.catch((err) => {
|
||||
toast.hideToast();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_("error-during-import"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
cancelModal();
|
||||
});
|
||||
}
|
||||
if (opened_from === "RunnerOverview") {
|
||||
@@ -160,6 +182,13 @@
|
||||
.catch((err) => {
|
||||
toast.hideToast();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_("error-during-import"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
cancelModal();
|
||||
});
|
||||
}
|
||||
if (selected_org_or_team.includes("TEAM_")) {
|
||||
@@ -182,6 +211,13 @@
|
||||
.catch((err) => {
|
||||
toast.hideToast();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_("error-during-import"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
cancelModal();
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -195,7 +231,7 @@
|
||||
use:focusTrap
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
import_modal_open = false;
|
||||
cancelModal();
|
||||
}}>
|
||||
<div
|
||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
@@ -349,6 +385,8 @@
|
||||
</table>
|
||||
</div>
|
||||
<button
|
||||
disabled={!importButtonEnabled}
|
||||
class:opacity-50={!importButtonEnabled}
|
||||
on:click={importAction}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
|
||||
@@ -1,398 +1,297 @@
|
||||
<script>
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import store from "../../store";
|
||||
import {
|
||||
RunnerService,
|
||||
RunnerTeamService,
|
||||
RunnerOrganizationService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import Select from "svelte-select";
|
||||
let data_loaded = false;
|
||||
export let params;
|
||||
const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
|
||||
$: delete_triggered = false;
|
||||
$: sponsoring_contracts_download_open = false;
|
||||
$: original_data_pdf = {};
|
||||
$: original_data = {};
|
||||
$: editable = {};
|
||||
$: group = {}
|
||||
$: changes_performed = !(JSON.stringify(original_data) == JSON.stringify(editable));
|
||||
$: isEmailValid =
|
||||
(editable.email || "") === "" ||
|
||||
(editable.email && isEmail(editable.email || ""));
|
||||
$: isFirstnameValid = editable.firstname !== "";
|
||||
$: isLastnameValid = editable.lastname !== "";
|
||||
$: save_enabled =
|
||||
changes_performed &&
|
||||
isFirstnameValid &&
|
||||
isLastnameValid &&
|
||||
isEmailValid &&
|
||||
editable.group != null;
|
||||
runner_promise.then((data) => {
|
||||
data_loaded = true;
|
||||
original_data_pdf = Object.assign(original_data_pdf, data);
|
||||
data.group = data.group.id;
|
||||
original_data = Object.assign(original_data, data);
|
||||
editable = Object.assign(editable, original_data);
|
||||
|
||||
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
|
||||
const orgs = val.map((r) => {
|
||||
return { label: r.name, value: r };
|
||||
});
|
||||
groups = groups.concat(orgs);
|
||||
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
|
||||
const teams = val.map((r) => {
|
||||
return { label: `${r.parentGroup.name} > ${r.name}`, value: r };
|
||||
});
|
||||
groups = groups.concat(teams);
|
||||
group = groups.find(g => g.value.id == editable.group)
|
||||
});
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
|
||||
) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
}
|
||||
});
|
||||
let groups = [];
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_("updating-runner"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
let postdata = {};
|
||||
postdata = Object.assign(postdata, editable);
|
||||
RunnerService.runnerControllerPut(original_data.id, postdata)
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = original_data;
|
||||
Toastify({
|
||||
text: $_("runner-updated"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
}
|
||||
}
|
||||
function deleteRunner() {
|
||||
RunnerService.runnerControllerRemove(original_data.id, true)
|
||||
.then((resp) => {
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
function generateSponsoringContract(locale) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
fetch(
|
||||
`${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify([original_data_pdf]),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download =
|
||||
"Sponsoring_" +
|
||||
original_data.firstname +
|
||||
(original_data.middlename || "") +
|
||||
original_data.lastname +
|
||||
".pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await runner_promise}
|
||||
{$_('loading-runners')}
|
||||
{:then}
|
||||
<section class="container p-5 select-none">
|
||||
<div class="flex flex-row mb-4">
|
||||
<div class="w-full">
|
||||
<nav class="w-full flex">
|
||||
<ol class="list-none flex flex-row items-center justify-start">
|
||||
<li class="flex items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
class="flex-shrink-0 w-5 h-5 mr-2"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
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" /></svg>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a class="mr-2" href="./">{$_('runners')}</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>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
{original_data.firstname}
|
||||
{original_data.middlename || ''}
|
||||
{original_data.lastname}
|
||||
<span data-id="runner_actions_${editable.id}">
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
|
||||
{#if delete_triggered}
|
||||
<button
|
||||
on:click={deleteRunner}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
delete_triggered = !delete_triggered;
|
||||
}}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
|
||||
{/if}
|
||||
<div id="sponsoring:dropdown" class="relative inline-block">
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true">
|
||||
{$_('generate-sponsoring-contract')}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
class="-mr-1 ml-2 h-5 w-5"><path
|
||||
fill="none"
|
||||
d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
{#if sponsoring_contracts_download_open}
|
||||
<div
|
||||
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
|
||||
id="sponsoring:dropdown:menu">
|
||||
<div
|
||||
class="py-1"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu">
|
||||
<span
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('de');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('german')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('en');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('english')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
on:click={() => {
|
||||
delete_triggered = true;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-runner')}</button>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
disabled={!save_enabled}
|
||||
class:opacity-50={!save_enabled}
|
||||
type="button"
|
||||
on:click={submit}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="firstname"
|
||||
class="font-medium text-gray-700">{$_('first-name')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('first-name')}
|
||||
type="text"
|
||||
class:border-red-500={!isFirstnameValid}
|
||||
class:focus:border-red-500={!isFirstnameValid}
|
||||
class:focus:ring-red-500={!isFirstnameValid}
|
||||
bind:value={editable.firstname}
|
||||
name="firstname"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
{#if !isFirstnameValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('first-name-is-required')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="middlename"
|
||||
class="font-medium text-gray-700">{$_('middle-name')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('middle-name')}
|
||||
type="text"
|
||||
bind:value={editable.middlename}
|
||||
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-gray-500 rounded-md p-2" />
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="lastname"
|
||||
class="font-medium text-gray-700">{$_('last-name')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('last-name')}
|
||||
type="text"
|
||||
bind:value={editable.lastname}
|
||||
class:border-red-500={!isLastnameValid}
|
||||
class:focus:border-red-500={!isLastnameValid}
|
||||
class:focus:ring-red-500={!isLastnameValid}
|
||||
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-gray-500 rounded-md p-2" />
|
||||
{#if !isLastnameValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('last-name-is-required')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="email"
|
||||
class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('e-mail-adress')}
|
||||
type="email"
|
||||
bind:value={editable.email}
|
||||
class:border-red-500={!isEmailValid}
|
||||
class:focus:border-red-500={!isEmailValid}
|
||||
class:focus:ring-red-500={!isEmailValid}
|
||||
name="email"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
{#if !isEmailValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-email-is-required')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('phone')}
|
||||
type="tel"
|
||||
bind:value={editable.phone}
|
||||
name="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-gray-500 rounded-md p-2" />
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<span class="font-medium text-gray-700">{$_('group')}</span>
|
||||
<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-gray-500 rounded-md p-2"
|
||||
itemFilter={(label, filterText, option) => label
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
filterText.toLowerCase()
|
||||
) || option.id.value.toString().startsWith(filterText.toLowerCase())}
|
||||
items={groups}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-organization-or-team-found')}
|
||||
bind:selectedValue={group}
|
||||
on:select={(selectedValue) => {editable.group = selectedValue.detail.value.id}}
|
||||
on:clear={() => (editable.group = null)} />
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<span class="font-medium text-gray-700">{$_('distance')}</span>
|
||||
<br />
|
||||
<span class="text-gray-700">{original_data.distance} km</span>
|
||||
</div>
|
||||
</section>
|
||||
{:catch error}
|
||||
<PromiseError {error} />
|
||||
{/await}
|
||||
<script>
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
import store from "../../store";
|
||||
import {
|
||||
RunnerService,
|
||||
RunnerTeamService,
|
||||
RunnerOrganizationService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import Select from "svelte-select";
|
||||
let data_loaded = false;
|
||||
export let params;
|
||||
const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
|
||||
$: delete_triggered = false;
|
||||
$: original_data_pdf = {};
|
||||
$: original_data = {};
|
||||
$: editable = {};
|
||||
$: group = {};
|
||||
$: changes_performed = !(
|
||||
JSON.stringify(original_data) == JSON.stringify(editable)
|
||||
);
|
||||
$: isEmailValid =
|
||||
(editable.email || "") === "" ||
|
||||
(editable.email && isEmail(editable.email || ""));
|
||||
$: isFirstnameValid = editable.firstname !== "";
|
||||
$: isLastnameValid = editable.lastname !== "";
|
||||
$: save_enabled =
|
||||
changes_performed &&
|
||||
isFirstnameValid &&
|
||||
isLastnameValid &&
|
||||
isEmailValid &&
|
||||
editable.group != null;
|
||||
$: sponsoring_contracts_show = true;
|
||||
$: cards_show = true;
|
||||
$: generate_runners = [original_data_pdf];
|
||||
runner_promise.then((data) => {
|
||||
data_loaded = true;
|
||||
original_data_pdf = Object.assign(original_data_pdf, data);
|
||||
data.group = data.group.id;
|
||||
original_data = Object.assign(original_data, data);
|
||||
editable = Object.assign(editable, original_data);
|
||||
|
||||
RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
|
||||
(val) => {
|
||||
const orgs = val.map((r) => {
|
||||
return { label: r.name, value: r };
|
||||
});
|
||||
groups = groups.concat(orgs);
|
||||
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
|
||||
const teams = val.map((r) => {
|
||||
return { label: `${r.parentGroup.name} > ${r.name}`, value: r };
|
||||
});
|
||||
groups = groups.concat(teams);
|
||||
group = groups.find((g) => g.value.id == editable.group);
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
let groups = [];
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_("updating-runner"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
let postdata = {};
|
||||
postdata = Object.assign(postdata, editable);
|
||||
RunnerService.runnerControllerPut(original_data.id, postdata)
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = original_data;
|
||||
Toastify({
|
||||
text: $_("runner-updated"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
}
|
||||
}
|
||||
function deleteRunner() {
|
||||
RunnerService.runnerControllerRemove(original_data.id, true)
|
||||
.then((resp) => {
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await runner_promise}
|
||||
{$_('loading-runners')}
|
||||
{:then}
|
||||
<section class="container p-5 select-none">
|
||||
<div class="flex flex-row mb-4">
|
||||
<div class="w-full">
|
||||
<nav class="w-full flex">
|
||||
<ol class="list-none flex flex-row items-center justify-start">
|
||||
<li class="flex items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
class="flex-shrink-0 w-5 h-5 mr-2"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
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" /></svg>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a class="mr-2" href="./">{$_('runners')}</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>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
{original_data.firstname}
|
||||
{original_data.middlename || ''}
|
||||
{original_data.lastname}
|
||||
<span data-id="runner_actions_${editable.id}">
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
|
||||
{#if delete_triggered}
|
||||
<button
|
||||
on:click={deleteRunner}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
delete_triggered = !delete_triggered;
|
||||
}}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
|
||||
{/if}
|
||||
<GenerateSponsoringContracts
|
||||
bind:sponsoring_contracts_show
|
||||
bind:generate_runners />
|
||||
<GenerateRunnerCards
|
||||
bind:sponsoring_contracts_show
|
||||
bind:generate_runners />
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
on:click={() => {
|
||||
delete_triggered = true;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-runner')}</button>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
disabled={!save_enabled}
|
||||
class:opacity-50={!save_enabled}
|
||||
type="button"
|
||||
on:click={submit}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="firstname"
|
||||
class="font-medium text-gray-700">{$_('first-name')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('first-name')}
|
||||
type="text"
|
||||
class:border-red-500={!isFirstnameValid}
|
||||
class:focus:border-red-500={!isFirstnameValid}
|
||||
class:focus:ring-red-500={!isFirstnameValid}
|
||||
bind:value={editable.firstname}
|
||||
name="firstname"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
{#if !isFirstnameValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('first-name-is-required')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="middlename"
|
||||
class="font-medium text-gray-700">{$_('middle-name')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('middle-name')}
|
||||
type="text"
|
||||
bind:value={editable.middlename}
|
||||
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-gray-500 rounded-md p-2" />
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="lastname"
|
||||
class="font-medium text-gray-700">{$_('last-name')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('last-name')}
|
||||
type="text"
|
||||
bind:value={editable.lastname}
|
||||
class:border-red-500={!isLastnameValid}
|
||||
class:focus:border-red-500={!isLastnameValid}
|
||||
class:focus:ring-red-500={!isLastnameValid}
|
||||
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-gray-500 rounded-md p-2" />
|
||||
{#if !isLastnameValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('last-name-is-required')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="email"
|
||||
class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('e-mail-adress')}
|
||||
type="email"
|
||||
bind:value={editable.email}
|
||||
class:border-red-500={!isEmailValid}
|
||||
class:focus:border-red-500={!isEmailValid}
|
||||
class:focus:ring-red-500={!isEmailValid}
|
||||
name="email"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
{#if !isEmailValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-email-is-required')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('phone')}
|
||||
type="tel"
|
||||
bind:value={editable.phone}
|
||||
name="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-gray-500 rounded-md p-2" />
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<span class="font-medium text-gray-700">{$_('group')}</span>
|
||||
<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-gray-500 rounded-md p-2"
|
||||
itemFilter={(label, filterText, option) => label
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
filterText.toLowerCase()
|
||||
) || option.id.value
|
||||
.toString()
|
||||
.startsWith(filterText.toLowerCase())}
|
||||
items={groups}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-organization-or-team-found')}
|
||||
bind:selectedValue={group}
|
||||
on:select={(selectedValue) => {
|
||||
editable.group = selectedValue.detail.value.id;
|
||||
}}
|
||||
on:clear={() => (editable.group = null)} />
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<span class="font-medium text-gray-700">{$_('distance')}</span>
|
||||
<br />
|
||||
<span class="text-gray-700">{original_data.distance} km</span>
|
||||
</div>
|
||||
</section>
|
||||
{:catch error}
|
||||
<PromiseError {error} />
|
||||
{/await}
|
||||
|
||||
@@ -1,364 +1,256 @@
|
||||
<script>
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import {
|
||||
RunnerService,
|
||||
RunnerTeamService,
|
||||
RunnerOrganizationService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import store from "../../store";
|
||||
import RunnersEmptyState from "./RunnersEmptyState.svelte";
|
||||
import Select from "svelte-select";
|
||||
import Toastify from "toastify-js";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
export let current_runners = [];
|
||||
const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
|
||||
current_runners = val;
|
||||
});
|
||||
$: selectedFilter_teams = null;
|
||||
$: selectedFilter = null;
|
||||
$: filter__teams = selectedFilter_teams || [];
|
||||
$: filter__orgs = selectedFilter || [];
|
||||
$: filterGroupIDs = filter__teams.concat(filter__orgs).map((i) => i.value);
|
||||
$: sponsoring_contracts_download_open = false;
|
||||
$: teams = [];
|
||||
$: orgs = [];
|
||||
$: mappedteams = teams.map(function (g) {
|
||||
return { value: g.id, label: g.parentGroup.name + " > " + g.name };
|
||||
});
|
||||
$: selectgroups = orgs
|
||||
.map(function (g) {
|
||||
return { value: g.id, label: g.name };
|
||||
})
|
||||
.concat(mappedteams);
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
|
||||
) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
}
|
||||
});
|
||||
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
|
||||
teams = val;
|
||||
});
|
||||
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
|
||||
orgs = val;
|
||||
});
|
||||
function should_display_based_on_id(id) {
|
||||
if (searchvalue.toString().slice(-1) === "*") {
|
||||
return id.toString().startsWith(searchvalue.replace("*", ""));
|
||||
}
|
||||
return id.toString() === searchvalue;
|
||||
}
|
||||
function generateSponsoringContract(locale) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
fetch(
|
||||
`${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(
|
||||
current_runners.filter((r) => r.is_selected === true)
|
||||
),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Sponsoring.pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
|
||||
{#await runners_promise}
|
||||
<div
|
||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||
role="alert">
|
||||
<p class="font-bold">{$_('runners-are-being-loaded')}</p>
|
||||
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||
</div>
|
||||
{:then}
|
||||
{#if current_runners.length === 0}
|
||||
<RunnersEmptyState />
|
||||
{:else}
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_('datatable.search')}
|
||||
aria-label={$_('datatable.search')}
|
||||
class="gridjs-input gridjs-search-input mb-4" />
|
||||
<div class="block mb-6">
|
||||
<label
|
||||
for="country"
|
||||
class="text-sm font-medium text-gray-700">{$_('filter-by-organization-team')}</label>
|
||||
<Select
|
||||
on:select={(event) => {
|
||||
selectedFilter = event.detail;
|
||||
}}
|
||||
selectedValue={selectedFilter}
|
||||
placeholder={$_('filter-by-organization-team')}
|
||||
containerClasses="mt-1 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
items={selectgroups}
|
||||
isMulti={true} />
|
||||
</div>
|
||||
<div class="h-12">
|
||||
{#if current_runners.some((r) => r.is_selected === true)}
|
||||
<div id="sponsoring:dropdown" class="relative inline-block">
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true">
|
||||
{$_('generate-sponsoring-contracts')}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
class="-mr-1 ml-2 h-5 w-5"><path
|
||||
fill="none"
|
||||
d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
{#if sponsoring_contracts_download_open}
|
||||
<div
|
||||
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
|
||||
id="sponsoring:dropdown:menu">
|
||||
<div
|
||||
class="py-1"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu">
|
||||
<span
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('de');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('german')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('en');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('english')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
||||
<table class="divide-y divide-gray-200 w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<span
|
||||
on:click={() => {
|
||||
const newstate = !current_runners.some((r) => r.is_selected === true);
|
||||
current_runners = current_runners.map((r) => {
|
||||
r.is_selected = newstate;
|
||||
return r;
|
||||
});
|
||||
}}
|
||||
class="underline cursor-pointer select-none">{#if current_runners.some((r) => r.is_selected === true)}
|
||||
{$_('deselect-all')}
|
||||
{:else}{$_('select-all')}{/if}
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('name')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('contact-information')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('group')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('distance-in-km')}
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">{$_('action')}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{#each current_runners as runner}
|
||||
{#if runner.firstname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || runner.middlename
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || runner.lastname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || should_display_based_on_id(runner.id)}
|
||||
{#if filterGroupIDs.includes(runner.group.id) || filterGroupIDs.includes(runner.group.parentGroup?.id) || filterGroupIDs.length === 0}
|
||||
<tr
|
||||
data-rowid="user_{runner.id}"
|
||||
data-groupid={runner.group.id}>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<input
|
||||
bind:checked={runner.is_selected}
|
||||
type="checkbox"
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{runner.firstname}
|
||||
{runner.middlename || ''}
|
||||
{runner.lastname}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#if runner.email}
|
||||
<div class="text-sm text-gray-500">{runner.email}</div>
|
||||
{/if}
|
||||
{#if runner.phone}
|
||||
<div class="text-sm text-gray-500">{runner.phone}</div>
|
||||
{/if}
|
||||
{#if runner.address.address1 !== null}
|
||||
{runner.address.address1}<br />
|
||||
{runner.address.address2 || ''}<br />
|
||||
{runner.address.postalcode}
|
||||
{runner.address.city}
|
||||
{runner.address.country}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#if runner.group.responseType === 'RUNNERTEAM'}
|
||||
<a
|
||||
href="../teams/{runner.group.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
|
||||
{/if}
|
||||
{#if runner.group.responseType === 'RUNNERORGANIZATION'}
|
||||
<a
|
||||
href="../orgs/{runner.group.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{runner.distance}
|
||||
</td>
|
||||
{#if active_deletes[runner.id] === true}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[runner.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
RunnerService.runnerControllerRemove(runner.id, true)
|
||||
.then((resp) => {
|
||||
current_runners = current_runners.filter((obj) => obj.id !== runner.id);
|
||||
})
|
||||
.catch((err) => {});
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||
</td>
|
||||
{:else}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<a
|
||||
href="./{runner.id}"
|
||||
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[runner.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||
{/if}
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||
<span class="inline-block align-middle mr-8">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
<script>
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import {
|
||||
RunnerService,
|
||||
RunnerTeamService,
|
||||
RunnerOrganizationService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import store from "../../store";
|
||||
import RunnersEmptyState from "./RunnersEmptyState.svelte";
|
||||
import Select from "svelte-select";
|
||||
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
export let current_runners = [];
|
||||
const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
|
||||
current_runners = val;
|
||||
});
|
||||
$: selectedFilter_teams = null;
|
||||
$: selectedFilter = null;
|
||||
$: filter__teams = selectedFilter_teams || [];
|
||||
$: filter__orgs = selectedFilter || [];
|
||||
$: filterGroupIDs = filter__teams.concat(filter__orgs).map((i) => i.value);
|
||||
$: sponsoring_contracts_show = current_runners.some(
|
||||
(r) => r.is_selected === true
|
||||
);
|
||||
$: cards_show = current_runners.some(
|
||||
(r) => r.is_selected === true
|
||||
);
|
||||
$: generate_runners = current_runners.filter((r) => r.is_selected === true);
|
||||
$: teams = [];
|
||||
$: orgs = [];
|
||||
$: mappedteams = teams.map(function (g) {
|
||||
return { value: g.id, label: g.parentGroup.name + " > " + g.name };
|
||||
});
|
||||
$: selectgroups = orgs
|
||||
.map(function (g) {
|
||||
return { value: g.id, label: g.name };
|
||||
})
|
||||
.concat(mappedteams);
|
||||
|
||||
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
|
||||
teams = val;
|
||||
});
|
||||
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
|
||||
orgs = val;
|
||||
});
|
||||
function should_display_based_on_id(id) {
|
||||
if (searchvalue.toString().slice(-1) === "*") {
|
||||
return id.toString().startsWith(searchvalue.replace("*", ""));
|
||||
}
|
||||
return id.toString() === searchvalue;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
|
||||
{#await runners_promise}
|
||||
<div
|
||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||
role="alert">
|
||||
<p class="font-bold">{$_('runners-are-being-loaded')}</p>
|
||||
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||
</div>
|
||||
{:then}
|
||||
{#if current_runners.length === 0}
|
||||
<RunnersEmptyState />
|
||||
{:else}
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_('datatable.search')}
|
||||
aria-label={$_('datatable.search')}
|
||||
class="gridjs-input gridjs-search-input mb-4" />
|
||||
<div class="block mb-6">
|
||||
<label
|
||||
for="country"
|
||||
class="text-sm font-medium text-gray-700">{$_('filter-by-organization-team')}</label>
|
||||
<Select
|
||||
on:select={(event) => {
|
||||
selectedFilter = event.detail;
|
||||
}}
|
||||
selectedValue={selectedFilter}
|
||||
placeholder={$_('filter-by-organization-team')}
|
||||
containerClasses="mt-1 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
items={selectgroups}
|
||||
isMulti={true} />
|
||||
</div>
|
||||
<div class="h-12">
|
||||
<GenerateSponsoringContracts
|
||||
bind:sponsoring_contracts_show
|
||||
bind:generate_runners />
|
||||
<GenerateRunnerCards
|
||||
bind:cards_show
|
||||
bind:generate_runners />
|
||||
</div>
|
||||
<div
|
||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
||||
<table class="divide-y divide-gray-200 w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<span
|
||||
on:click={() => {
|
||||
const newstate = !current_runners.some((r) => r.is_selected === true);
|
||||
current_runners = current_runners.map((r) => {
|
||||
r.is_selected = newstate;
|
||||
return r;
|
||||
});
|
||||
}}
|
||||
class="underline cursor-pointer select-none">{#if current_runners.some((r) => r.is_selected === true)}
|
||||
{$_('deselect-all')}
|
||||
{:else}{$_('select-all')}{/if}
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('name')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('contact-information')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('group')}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('distance-in-km')}
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">{$_('action')}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{#each current_runners as runner}
|
||||
{#if runner.firstname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || runner.lastname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || should_display_based_on_id(runner.id)}
|
||||
{#if filterGroupIDs.includes(runner.group.id) || filterGroupIDs.includes(runner.group.parentGroup?.id) || filterGroupIDs.length === 0}
|
||||
<tr
|
||||
data-rowid="user_{runner.id}"
|
||||
data-groupid={runner.group.id}>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<input
|
||||
bind:checked={runner.is_selected}
|
||||
type="checkbox"
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{runner.firstname}
|
||||
{runner.middlename || ''}
|
||||
{runner.lastname}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#if runner.email}
|
||||
<div class="text-sm text-gray-500">{runner.email}</div>
|
||||
{/if}
|
||||
{#if runner.phone}
|
||||
<div class="text-sm text-gray-500">{runner.phone}</div>
|
||||
{/if}
|
||||
{#if runner.address.address1 !== null}
|
||||
{runner.address.address1}<br />
|
||||
{runner.address.address2 || ''}<br />
|
||||
{runner.address.postalcode}
|
||||
{runner.address.city}
|
||||
{runner.address.country}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#if runner.group.responseType === 'RUNNERTEAM'}
|
||||
<a
|
||||
href="../teams/{runner.group.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
|
||||
{/if}
|
||||
{#if runner.group.responseType === 'RUNNERORGANIZATION'}
|
||||
<a
|
||||
href="../orgs/{runner.group.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{runner.distance}
|
||||
</td>
|
||||
{#if active_deletes[runner.id] === true}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[runner.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
RunnerService.runnerControllerRemove(runner.id, true)
|
||||
.then((resp) => {
|
||||
current_runners = current_runners.filter((obj) => obj.id !== runner.id);
|
||||
})
|
||||
.catch((err) => {});
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||
</td>
|
||||
{:else}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<a
|
||||
href="./{runner.id}"
|
||||
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[runner.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||
{/if}
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||
<span class="inline-block align-middle mr-8">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
|
||||
@@ -81,10 +81,6 @@
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || scan.runner?.firstname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || scan.runner?.middlename
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
|
||||
@@ -23,14 +23,14 @@
|
||||
throw new Error();
|
||||
}
|
||||
Toastify({
|
||||
text: $_('copied-token-to-clipboard'),
|
||||
text: $_("copied-token-to-clipboard"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
copied = true;
|
||||
} catch (err) {
|
||||
Toastify({
|
||||
text: $_('error-whyile-copying-to-clipboard'),
|
||||
text: $_("error-whyile-copying-to-clipboard"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
@@ -75,7 +75,9 @@
|
||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">{$_('token')}</h3>
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
{$_('token')}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
{$_('the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again')}
|
||||
@@ -86,7 +88,7 @@
|
||||
<div class="mt-2 mb-6">
|
||||
<label
|
||||
for="token"
|
||||
class="block text-sm font-medium text-gray-700">Token</label>
|
||||
class="block text-sm font-medium text-gray-700">{$_('token')}</label>
|
||||
<div on:click={copy} class="inline-flex">
|
||||
<p
|
||||
name="token"
|
||||
@@ -106,7 +108,9 @@
|
||||
d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-500 text-xs">{$_('click-to-copy-token-to-clipboard')}</p>
|
||||
<p class="text-gray-500 text-xs">
|
||||
{$_('click-to-copy-token-to-clipboard')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,9 @@
|
||||
import { MeService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import ConfirmProfileDeletion from "./ConfirmProfileDeletion.svelte";
|
||||
import PasswordStrength, {
|
||||
password_strong_enough_and_equal,
|
||||
} from "../auth/PasswordStrength.svelte";
|
||||
$: data_loaded = false;
|
||||
$: delete_triggered = false;
|
||||
$: original_data = {};
|
||||
@@ -15,8 +18,10 @@
|
||||
JSON.stringify(editable) === JSON.stringify(original_data)
|
||||
);
|
||||
$: save_enabled = changes_performed && isEmail(editable.email);
|
||||
$: update_password_enabled =
|
||||
password_change.length > 0 && password_change === password_confirm;
|
||||
$: update_password_enabled = password_strong_enough_and_equal(
|
||||
password_change,
|
||||
password_confirm
|
||||
);
|
||||
const user_promise = MeService.meControllerGet().then((data) => {
|
||||
data_loaded = true;
|
||||
data.groups = data.groups.map((g) => g.id);
|
||||
@@ -45,7 +50,7 @@
|
||||
function changePassword() {
|
||||
if (data_loaded === true && update_password_enabled) {
|
||||
Toastify({
|
||||
text: $_('changing-your-password'),
|
||||
text: $_("changing-your-password"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
let postdata = Object.assign({}, original_data);
|
||||
@@ -56,7 +61,7 @@
|
||||
password_change = "";
|
||||
postdata = {};
|
||||
Toastify({
|
||||
text: $_('password-changed'),
|
||||
text: $_("password-changed"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
@@ -242,10 +247,7 @@
|
||||
class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
||||
placeholder={$_('password')} />
|
||||
</div>
|
||||
{#if password_change != password_confirm && password_change.length > 0}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">{$_('passwords-dont-match')}</span>
|
||||
{/if}
|
||||
<PasswordStrength bind:password_change bind:password_confirm />
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<button
|
||||
@@ -257,9 +259,9 @@
|
||||
{$_('update-password')}
|
||||
</button>
|
||||
{#if update_password_enabled}
|
||||
<p>
|
||||
{$_('after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that')}
|
||||
</p>
|
||||
<p>
|
||||
{$_('after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that')}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,399 +1,297 @@
|
||||
<script>
|
||||
import {
|
||||
GroupContactService,
|
||||
RunnerOrganizationService,
|
||||
RunnerTeamService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import Toastify from "toastify-js";
|
||||
import store from "../../store";
|
||||
import Select from "svelte-select";
|
||||
import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
|
||||
import Teams from "./Teams.svelte";
|
||||
let [teamdata, original, delete_team, orgs, contacts, modal_open] = [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
[],
|
||||
[],
|
||||
false,
|
||||
];
|
||||
export let params;
|
||||
export let import_modal_open = false;
|
||||
$: delete_triggered = false;
|
||||
$: save_enabled = !data_changed && teamdata.parentGroup != null;
|
||||
$: data_loaded = false;
|
||||
$: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
|
||||
$: sponsoring_contracts_download_open = false;
|
||||
$: group = {};
|
||||
$: contact = {};
|
||||
//
|
||||
const getContactLabel = (option) =>
|
||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||
const promise = RunnerTeamService.runnerTeamControllerGetOne(
|
||||
params.teamid
|
||||
).then((value) => {
|
||||
data_loaded = true;
|
||||
teamdata = Object.assign(teamdata, value);
|
||||
original = Object.assign(original, value);
|
||||
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
|
||||
orgs = val.map((r) => {
|
||||
return { label: r.name, value: r };
|
||||
});
|
||||
group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
|
||||
});
|
||||
GroupContactService.groupContactControllerGetAll().then((val) => {
|
||||
contacts = val.map((r) => {
|
||||
return { label: getContactLabel(r), value: r };
|
||||
});
|
||||
if(teamdata.contact){
|
||||
contact = contacts.find((g) => g.value.id == teamdata.contact.id);
|
||||
}
|
||||
else{
|
||||
contact = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
|
||||
) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
}
|
||||
});
|
||||
function deleteTeam() {
|
||||
RunnerTeamService.runnerTeamControllerRemove(original.id, false)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: "Organization deleted",
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {
|
||||
modal_open = true;
|
||||
delete_team = original;
|
||||
});
|
||||
}
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: "updating team",
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
let postdata = teamdata;
|
||||
postdata.parentGroup = teamdata.parentGroup.id;
|
||||
postdata.contact = teamdata.contact?.id;
|
||||
RunnerTeamService.runnerTeamControllerPut(original.id, postdata)
|
||||
.then((resp) => {
|
||||
Object.assign(original, teamdata);
|
||||
original = original;
|
||||
Toastify({
|
||||
text: "updated team",
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
}
|
||||
async function generateSponsoringContract(locale) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
|
||||
teamdata.id
|
||||
);
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
fetch(
|
||||
`${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(runners),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Sponsorings_" + teamdata.name + ".pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
</script>
|
||||
|
||||
<ImportRunnerModal
|
||||
current_runners={[]}
|
||||
on:cancelDelete={(event) => {
|
||||
import_modal_open = false;
|
||||
}}
|
||||
passed_team={teamdata}
|
||||
passed_orgs={[]}
|
||||
passed_org={{}}
|
||||
opened_from="TeamDetail"
|
||||
bind:import_modal_open />
|
||||
<ConfirmTeamDeletion bind:modal_open bind:delete_team />
|
||||
{#if data_loaded}
|
||||
<section class="container p-5">
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
{original.name}
|
||||
<span data-id="org_actions_${teamdata.id}">
|
||||
<div id="sponsoring:dropdown" class="relative inline-block">
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true">
|
||||
{$_('generate-sponsoring-contracts')}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
class="-mr-1 ml-2 h-5 w-5"><path
|
||||
fill="none"
|
||||
d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
{#if sponsoring_contracts_download_open}
|
||||
<div
|
||||
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
|
||||
id="sponsoring:dropdown:menu">
|
||||
<div
|
||||
class="py-1"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu">
|
||||
<span
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('de');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('german')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('en');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('english')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
|
||||
<button
|
||||
on:click={() => {
|
||||
import_modal_open = true;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('import-runners')}
|
||||
</button>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
|
||||
{#if delete_triggered}
|
||||
<button
|
||||
on:click={deleteTeam}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-delete')}</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
delete_triggered = !delete_triggered;
|
||||
}}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
on:click={() => {
|
||||
delete_triggered = true;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-team')}</button>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
on:click={submit}
|
||||
disabled={!save_enabled}
|
||||
class:opacity-50={!save_enabled}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-row mb-4">
|
||||
<div class="w-full">
|
||||
<nav class="w-full flex">
|
||||
<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">
|
||||
<a class="mr-2" href="/">Home</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="mr-2 flex items-center">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"><path
|
||||
fill="currentColor"
|
||||
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a class="mr-2" href="./">Teams</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">Team-Details #{params.teamid}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label for="name" class="font-medium text-gray-700">Name</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Name"
|
||||
type="text"
|
||||
bind:value={teamdata.name}
|
||||
name="name"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="contact"
|
||||
class="font-medium text-gray-700">{$_('contact')}</label>
|
||||
<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-gray-500 rounded-md p-2"
|
||||
itemFilter={(label, filterText, option) => label
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
filterText.toLowerCase()
|
||||
) || option.value.id
|
||||
.toString()
|
||||
.startsWith(filterText.toLowerCase())}
|
||||
items={contacts}
|
||||
showChevron={true}
|
||||
placeholder={$_('no-contact-selected')}
|
||||
noOptionsMessage={$_('no-contact-found')}
|
||||
bind:selectedValue={contact}
|
||||
on:select={(selectedValue)=> teamdata.contact = selectedValue.detail.value}
|
||||
on:clear={() => (teamdata.contact = null)} />
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="org"
|
||||
class="font-medium text-gray-700">{$_('organization')}</label>
|
||||
<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-gray-500 rounded-md p-2"
|
||||
itemFilter={(label, filterText, option) => label
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
filterText.toLowerCase()
|
||||
) || option.id.value.toString().startsWith(filterText.toLowerCase())}
|
||||
items={orgs}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-an-organization-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-organizations-found')}
|
||||
bind:selectedValue={group}
|
||||
on:select={(selectedValue)=> teamdata.parentGroup = selectedValue.detail.value}
|
||||
on:clear={() => (teamdata.parentGroup = null)} />
|
||||
</div>
|
||||
</section>
|
||||
{:else}
|
||||
{#await promise}
|
||||
{$_('team-detail-is-being-loaded')}
|
||||
{:catch error}
|
||||
<PromiseError />
|
||||
{/await}
|
||||
{/if}
|
||||
<script>
|
||||
import {
|
||||
GroupContactService,
|
||||
RunnerOrganizationService,
|
||||
RunnerTeamService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import Toastify from "toastify-js";
|
||||
import store from "../../store";
|
||||
import Select from "svelte-select";
|
||||
import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
|
||||
import Teams from "./Teams.svelte";
|
||||
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
let [teamdata, original, delete_team, orgs, contacts, modal_open] = [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
[],
|
||||
[],
|
||||
false,
|
||||
];
|
||||
export let params;
|
||||
export let import_modal_open = false;
|
||||
$: delete_triggered = false;
|
||||
$: save_enabled = !data_changed && teamdata.parentGroup != null;
|
||||
$: data_loaded = false;
|
||||
$: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
|
||||
$: sponsoring_contracts_show = true;
|
||||
$: cards_show = true;
|
||||
$: generate_teams = [original];
|
||||
$: group = {};
|
||||
$: contact = {};
|
||||
//
|
||||
const getContactLabel = (option) =>
|
||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||
const promise = RunnerTeamService.runnerTeamControllerGetOne(
|
||||
params.teamid
|
||||
).then((value) => {
|
||||
data_loaded = true;
|
||||
teamdata = Object.assign(teamdata, value);
|
||||
original = Object.assign(original, value);
|
||||
RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
|
||||
(val) => {
|
||||
orgs = val.map((r) => {
|
||||
return { label: r.name, value: r };
|
||||
});
|
||||
group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
|
||||
}
|
||||
);
|
||||
GroupContactService.groupContactControllerGetAll().then((val) => {
|
||||
contacts = val.map((r) => {
|
||||
return { label: getContactLabel(r), value: r };
|
||||
});
|
||||
if (teamdata.contact) {
|
||||
contact = contacts.find((g) => g.value.id == teamdata.contact.id);
|
||||
} else {
|
||||
contact = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
function deleteTeam() {
|
||||
RunnerTeamService.runnerTeamControllerRemove(original.id, false)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: "Organization deleted",
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {
|
||||
modal_open = true;
|
||||
delete_team = original;
|
||||
});
|
||||
}
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: "updating team",
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
let postdata = teamdata;
|
||||
postdata.parentGroup = teamdata.parentGroup.id;
|
||||
postdata.contact = teamdata.contact?.id;
|
||||
RunnerTeamService.runnerTeamControllerPut(original.id, postdata)
|
||||
.then((resp) => {
|
||||
Object.assign(original, teamdata);
|
||||
original = original;
|
||||
Toastify({
|
||||
text: "updated team",
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ImportRunnerModal
|
||||
current_runners={[]}
|
||||
on:cancelDelete={(event) => {
|
||||
import_modal_open = false;
|
||||
}}
|
||||
passed_team={teamdata}
|
||||
passed_orgs={[]}
|
||||
passed_org={{}}
|
||||
opened_from="TeamDetail"
|
||||
bind:import_modal_open />
|
||||
<ConfirmTeamDeletion bind:modal_open bind:delete_team />
|
||||
{#if data_loaded}
|
||||
<section class="container p-5">
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
{original.name}
|
||||
<span data-id="org_actions_${teamdata.id}">
|
||||
<GenerateSponsoringContracts
|
||||
bind:sponsoring_contracts_show
|
||||
bind:generate_teams />
|
||||
<GenerateRunnerCards
|
||||
bind:cards_show
|
||||
bind:generate_teams />
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
|
||||
<button
|
||||
on:click={() => {
|
||||
import_modal_open = true;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('import-runners')}
|
||||
</button>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
|
||||
{#if delete_triggered}
|
||||
<button
|
||||
on:click={deleteTeam}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-delete')}</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
delete_triggered = !delete_triggered;
|
||||
}}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
on:click={() => {
|
||||
delete_triggered = true;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-team')}</button>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
on:click={submit}
|
||||
disabled={!save_enabled}
|
||||
class:opacity-50={!save_enabled}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-row mb-4">
|
||||
<div class="w-full">
|
||||
<nav class="w-full flex">
|
||||
<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">
|
||||
<a class="mr-2" href="/">Home</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="mr-2 flex items-center">
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 mr-2"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"><path
|
||||
fill="currentColor"
|
||||
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a class="mr-2" href="./">Teams</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">Team-Details #{params.teamid}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label for="name" class="font-medium text-gray-700">Name</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Name"
|
||||
type="text"
|
||||
bind:value={teamdata.name}
|
||||
name="name"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="contact"
|
||||
class="font-medium text-gray-700">{$_('contact')}</label>
|
||||
<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-gray-500 rounded-md p-2"
|
||||
itemFilter={(label, filterText, option) => label
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
filterText.toLowerCase()
|
||||
) || option.value.id
|
||||
.toString()
|
||||
.startsWith(filterText.toLowerCase())}
|
||||
items={contacts}
|
||||
showChevron={true}
|
||||
placeholder={$_('no-contact-selected')}
|
||||
noOptionsMessage={$_('no-contact-found')}
|
||||
bind:selectedValue={contact}
|
||||
on:select={(selectedValue) => (teamdata.contact = selectedValue.detail.value)}
|
||||
on:clear={() => (teamdata.contact = null)} />
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="org"
|
||||
class="font-medium text-gray-700">{$_('organization')}</label>
|
||||
<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-gray-500 rounded-md p-2"
|
||||
itemFilter={(label, filterText, option) => label
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
filterText.toLowerCase()
|
||||
) || option.id.value
|
||||
.toString()
|
||||
.startsWith(filterText.toLowerCase())}
|
||||
items={orgs}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-an-organization-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-organizations-found')}
|
||||
bind:selectedValue={group}
|
||||
on:select={(selectedValue) => (teamdata.parentGroup = selectedValue.detail.value)}
|
||||
on:clear={() => (teamdata.parentGroup = null)} />
|
||||
</div>
|
||||
</section>
|
||||
{:else}
|
||||
{#await promise}
|
||||
{$_('team-detail-is-being-loaded')}
|
||||
{:catch error}
|
||||
<PromiseError />
|
||||
{/await}
|
||||
{/if}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<section class="container p-5">
|
||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||
{$_('teams')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:CREATE')}
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = true;
|
||||
@@ -27,6 +27,6 @@
|
||||
<TeamsOverview bind:current_teams />
|
||||
</section>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:CREATE')}
|
||||
<AddTeamModal bind:current_teams bind:modal_open />
|
||||
{/if}
|
||||
|
||||
@@ -7,9 +7,17 @@
|
||||
import TeamsEmptyState from "./TeamsEmptyState.svelte";
|
||||
import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
$: sponsoring_contracts_download_open = false;
|
||||
$: sponsoring_contracts_show = current_teams.some(
|
||||
(r) => r.is_selected === true
|
||||
);
|
||||
$: cards_show = current_teams.some(
|
||||
(r) => r.is_selected === true
|
||||
);
|
||||
$: generate_teams = current_teams.filter((r) => r.is_selected === true);
|
||||
export let current_teams = [];
|
||||
let modal_open = false;
|
||||
let delete_team = {};
|
||||
@@ -19,70 +27,6 @@
|
||||
teams_promise.then((data) => {
|
||||
usersstore.set(data);
|
||||
});
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
|
||||
e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
|
||||
) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
}
|
||||
});
|
||||
async function generateSponsoringContract(locale) {
|
||||
sponsoring_contracts_download_open = false;
|
||||
const teams = current_teams.filter((r) => r.is_selected === true);
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdfs"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
let count = 0;
|
||||
for (const t of teams) {
|
||||
count++;
|
||||
const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
|
||||
t.id
|
||||
);
|
||||
fetch(
|
||||
`${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(runners),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "Sponsorings_" + t.name + ".pdf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === teams.length) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ConfirmTeamDeletion
|
||||
@@ -111,69 +55,12 @@
|
||||
aria-label={$_('datatable.search')}
|
||||
class="gridjs-input gridjs-search-input mb-4" />
|
||||
<div class="h-12">
|
||||
{#if current_teams.some((r) => r.is_selected === true)}
|
||||
<div id="sponsoring:dropdown" class="relative inline-block">
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true">
|
||||
{$_('generate-sponsoring-contracts')}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
class="-mr-1 ml-2 h-5 w-5"><path
|
||||
fill="none"
|
||||
d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
{#if sponsoring_contracts_download_open}
|
||||
<div
|
||||
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
|
||||
id="sponsoring:dropdown:menu"
|
||||
on:click_outside={() => {
|
||||
sponsoring_contracts_download_open = false;
|
||||
}}>
|
||||
<div
|
||||
class="py-1"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu">
|
||||
<span
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('de');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('german')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
generateSponsoringContract('en');
|
||||
}}
|
||||
type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
|
||||
role="menuitem">
|
||||
{$_('english')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<GenerateSponsoringContracts
|
||||
bind:sponsoring_contracts_show
|
||||
bind:generate_teams />
|
||||
<GenerateRunnerCards
|
||||
bind:cards_show
|
||||
bind:generate_teams />
|
||||
</div>
|
||||
<div
|
||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
import { UserService } from "@odit/lfk-client-js";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import Toastify from "toastify-js";
|
||||
import PasswordStrength, {
|
||||
password_strong_enough,
|
||||
} from "../auth/PasswordStrength.svelte";
|
||||
export let modal_open;
|
||||
export let current_users;
|
||||
let firstname_input;
|
||||
@@ -28,7 +31,10 @@
|
||||
$: isLastnameValid = lastname_input_value.trim().length !== 0;
|
||||
$: isFirstnameValid = firstname_input_value.trim().length !== 0;
|
||||
$: createbtnenabled =
|
||||
isFirstnameValid && isLastnameValid && isPasswordValid && isEmailValid;
|
||||
isFirstnameValid &&
|
||||
isLastnameValid &&
|
||||
password_strong_enough(password_input_value) &&
|
||||
isEmailValid;
|
||||
(function () {
|
||||
document.onkeydown = function (e) {
|
||||
e = e || window.event;
|
||||
@@ -203,12 +209,8 @@
|
||||
type="password"
|
||||
name="password"
|
||||
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-gray-500 rounded-md p-2" />
|
||||
{#if !isPasswordValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('password-is-required')}
|
||||
</span>
|
||||
{/if}
|
||||
<PasswordStrength
|
||||
bind:password_change={password_input_value} />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
|
||||
Reference in New Issue
Block a user