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

✨ translation keys

Browse Source 
ref #69
This commit is contained in:
Philipp Dormann
2021-02-18 18:09:57 +01:00
parent 505ca6a58e
commit a588bc4631
29 changed files with 334 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/base/NoComponentLoaded.svelte
View File

@@ -7,12 +7,12 @@
<div class="w-full bg-white flex items-center justify-center ">
<div class="max-w-sm m-8">
<div class="text-black text-5xl md:text-15xl font-black">
Internal Error
{$_('internal-error')}
</div>
<div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
<p
class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
Something went wrong in the UI logic
{$_('generic-ui-logic-error')}
</p>
<a
href="/"

26
src/components/contacts/AddContactModal.svelte
View File

@@ -185,7 +185,7 @@
</h3>
<div class="mt-2 mb-6">
<p class="text-sm text-gray-500">
Please provide the required information to add a new contact.
{$_('please-provide-the-required-information-to-add-a-new-contact')}
</p>
</div>
<div class="grid grid-cols-6 gap-6">
@@ -271,10 +271,10 @@
<div class="col-span-6">
<label
for="phone"
class="block text-sm font-medium text-gray-700">Phone</label>
class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
<input
autocomplete="off"
placeholder="Phone"
placeholder={$_('phone')}
class:border-red-500={!isPhoneValidOrEmpty}
class:focus:border-red-500={!isPhoneValidOrEmpty}
class:focus:ring-red-500={!isPhoneValidOrEmpty}
@@ -324,14 +324,14 @@
<div class="ml-3 text-sm">
<label
for="comments"
class="font-medium text-gray-700">Address</label>
class="font-medium text-gray-700">{$_('address')}</label>
</div>
</div>
{#if address_checked === true}
<div class="col-span-6">
<label
for="address1"
class="block text-sm font-medium text-gray-700">Address</label>
class="block text-sm font-medium text-gray-700">{$_('address')}</label>
<input
autocomplete="off"
placeholder="Address"
@@ -346,18 +346,17 @@
{#if !isAddress1Valid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Address is required
{$_('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>
class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
<input
autocomplete="off"
placeholder="Apartment, suite, etc."
placeholder={$_('apartment-suite-etc')}
bind:value={address_input2_value}
bind:this={address_input2}
type="text"
@@ -367,11 +366,10 @@
<div class="col-span-6">
<label
for="zipcode"
class="block text-sm font-medium text-gray-700">ZIP/
postal code</label>
class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
<input
autocomplete="off"
placeholder="ZIP/ postal code"
placeholder={$_('zip-postal-code')}
class:border-red-500={!iszipcodevalid}
class:focus:border-red-500={!iszipcodevalid}
class:focus:ring-red-500={!iszipcodevalid}
@@ -383,7 +381,7 @@
{#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
{$_('valid-zipcode-postal-code-is-required')}
</span>
{/if}
</div>
@@ -405,7 +403,7 @@
{#if !iscityvalid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Valid city is required
{$_('valid-city-is-required')}
</span>
{/if}
</div>

12
src/components/contacts/ContactsOverview.svelte
View File

@@ -19,7 +19,7 @@
<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">contacts are being loaded...</p>
<p class="font-bold">{$_('contacts-are-being-loaded')}</p>
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
</div>
{:then}
@@ -40,20 +40,20 @@
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
{$_('name')}
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Groups
{$_('groups')}
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Address
{$_('address')}
</th>
<th scope="col" class="relative px-6 py-3">
<span class="sr-only">Action</span>
<span class="sr-only">{$_('action')}</span>
</th>
</tr>
</thead>
@@ -132,7 +132,7 @@
(obj) => obj.id !== t.id
);
Toastify({
text: 'Contact deleted',
text: $_('contact-deleted'),
duration: 500,
backgroundColor:
'linear-gradient(to right, #00b09b, #96c93d)',

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

@@ -5,7 +5,6 @@
import { router } from "tinro";
import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
import { AuthService } from "@odit/lfk-client-js";
let dropdown1 = false;
$: navOpen = false;
function logout() {
localForage.clear();

4
src/components/dashboard/MainDashContent.svelte
View File

@@ -10,9 +10,9 @@
on:click={() => {
navOpen = false;
}}>
<!-- <div class="border-4 border-dashed rounded h-96" /> -->
<h1 class="text-3xl leading-tight">
<span class="font-extrabold">{$_('dashboard-title')}</span> <span>
<span class="font-extrabold">{$_('dashboard-title')}</span>
<span>
-
{$_('dashboard-greeting')},
<span

4
src/components/general/Settings.svelte
View File

@@ -1,6 +1,6 @@
<script>
import { _ } from "svelte-i18n";
import FormLayout from "../base/FormLayout.svelte";
import FormLayout from "../base/FormLayout.svelte";
</script>
<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
@@ -32,4 +32,4 @@ import FormLayout from "../base/FormLayout.svelte";
</div>
<FormLayout />
</div>
</div>
</div>

21
src/components/orgs/AddOrgModal.svelte
View File

@@ -32,7 +32,7 @@
if (processed_last_submit === true) {
processed_last_submit = false;
const toast = Toastify({
text: "Organization is being added...",
text: $_("organization-is-being-added"),
duration: -1,
}).showToast();
RunnerOrganizationService.runnerOrganizationControllerPost({
@@ -43,20 +43,16 @@
.then((result) => {
name = "";
modal_open = false;
//
Toastify({
text: "Organization added",
text: $_("organization-added"),
duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
current_organizations = current_organizations.concat([result]);
})
.catch((err) => {
//
})
.catch((err) => {})
.finally(() => {
processed_last_submit = true;
//
toast.hideToast();
});
}
@@ -101,23 +97,22 @@
</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 Organization
{$_('create-a-new-organization')}
</h3>
<div class="mt-2 mb-6">
<p class="text-sm text-gray-500">
Please provide the required information to add a new
organization.
{$_('please-provide-the-required-information-to-add-a-new-organization')}
</p>
</div>
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6">
<label
for="firstname"
class="block text-sm font-medium text-gray-700">Name</label>
class="block text-sm font-medium text-gray-700">{$_('name')}</label>
<input
use:focus
autocomplete="off"
placeholder="Name"
placeholder={$_('name')}
class:border-red-500={!isOrgnameValid}
class:focus:border-red-500={!isOrgnameValid}
class:focus:ring-red-500={!isOrgnameValid}
@@ -129,7 +124,7 @@
{#if !isOrgnameValid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Organization name is required
{$_('organization-name-is-required')}
</span>
{/if}
</div>

20
src/components/orgs/ConfirmOrgDeletion.svelte
View File

@@ -25,9 +25,7 @@
}).showToast();
location.replace("./");
})
.catch((err) => {
//
});
.catch((err) => {});
}
</script>
@@ -68,13 +66,17 @@
</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">
Attention!
{$_('attention')}
</h3>
<div class="mt-2 mb-6">
<p class="text-sm text-gray-500">
Do you want to delete the organization
{delete_org.name}?<br />All associated teams and runners will
be deleted too!
{$_(
'do-you-want-to-delete-the-organization-delete_org-name',
{
values: { orgname: delete_org.name },
}
)}<br />
{$_('all-associated-teams-and-runners-will-be-deleted-too')}
</p>
</div>
</div>
@@ -85,13 +87,13 @@
on:click={deleteOrg}
type="button"
class="w-full inline-flex 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 organization and associated teams+runners.
{$_('confirm-delete-organization-and-associated-teams-runners')}
</button>
<button
on:click={cancelDelete}
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, keep organization
{$_('cancel-keep-organization')}
</button>
</div>
</div>

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

@@ -41,21 +41,21 @@
)
.then((resp) => {
Toastify({
text: "Organization deleted",
text: $_("organization-deleted"),
duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
location.replace("./");
})
.catch((err) => {
modal_open = true;
delete_org = original;
});
modal_open = true;
delete_org = original;
});
}
function submit() {
if (data_loaded === true && save_enabled) {
Toastify({
text: "updating organization",
text: $_("updating-organization"),
duration: 2500,
}).showToast();
let postdata = orgdata;
@@ -68,9 +68,8 @@
Object.assign(original, orgdata);
original = orgdata;
Object.assign(original, orgdata);
//
Toastify({
text: "updated organization",
text: $_("updated-organization"),
duration: 2500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
@@ -158,7 +157,7 @@
<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
<a class="mr-2" href="/">{$_('home')}</a><svg
stroke="currentColor"
fill="none"
stroke-width="2"
@@ -185,7 +184,7 @@
d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
</li>
<li class="flex items-center">
<a class="mr-2" href="./">Orgs</a><svg
<a class="mr-2" href="./">{$_('organizations')}</a><svg
stroke="currentColor"
fill="none"
stroke-width="2"
@@ -210,10 +209,10 @@
</div>
</div>
<div class="text-sm w-full">
<label for="name" class="font-medium text-gray-700">Name</label>
<label for="name" class="font-medium text-gray-700">{$_('name')}</label>
<input
autocomplete="off"
placeholder="Name"
placeholder={$_('name')}
type="text"
bind:value={orgdata.name}
name="name"
@@ -252,7 +251,7 @@
</section>
{:else}
{#await promise}
organization detail is being loaded...
{$_('organization-detail-is-being-loaded')}
{:catch error}
<PromiseError />
{/await}

20
src/components/orgs/OrgOverview.svelte
View File

@@ -30,7 +30,7 @@
<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">organizations are being loaded...</p>
<p class="font-bold">{$_('organizations-are-being-loaded')}</p>
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
</div>
{:then}
@@ -51,20 +51,20 @@
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
{$_('name')}
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Address
{$_('address')}
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Contact
{$_('contact')}
</th>
<th scope="col" class="relative px-6 py-3">
<span class="sr-only">Action</span>
<span class="sr-only">{$_('action')}</span>
</th>
</tr>
</thead>
@@ -105,7 +105,7 @@
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{o.contact.firstname}
{o.contact.middlename || ''}
{o.contact.lastname}</a>
{:else}no contact specified{/if}
{:else}{$_('no-contact-specified')}{/if}
</div>
</div>
</div>
@@ -118,8 +118,7 @@
active_deletes[o.id] = false;
}}
tabindex="0"
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
Delete</button>
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
<button
on:click={() => {
RunnerOrganizationService.runnerOrganizationControllerRemove(o.id, false)
@@ -138,8 +137,7 @@
});
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
Delete</button>
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
</td>
{:else}
<td
@@ -153,7 +151,7 @@
active_deletes[o.id] = true;
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
{/if}
</td>
{/if}

1
src/components/orgs/Orgs.svelte
View File

@@ -33,7 +33,6 @@
</button>
{/if}
</span>
<p class="mb-8 text-lg text-gray-500">manage runner organizations</p>
<OrgOverview bind:current_organizations />
</section>

5
src/components/orgs/OrgsEmptyState.svelte
View File

@@ -9,8 +9,9 @@
<div class="text-center items-center justify-center">
<p class="mb-16 text-lg text-gray-500">
<img class="w-full h-44" src={org_empty} alt="" />
<span class="font-bold">There are no organizations added yet.</span><br />
<span>Add your first organization</span>
<span
class="font-bold">{$_('there-are-no-organizations-added-yet')}</span><br />
<span>{$_('add-your-first-organization')}</span>
</p>
</div>

20
src/components/runners/AddRunnerModal.svelte
View File

@@ -36,13 +36,15 @@
$: firstname_input_value = "";
$: processed_last_submit = true;
$: isPhoneValidOrEmpty =
phone_input_value.includes("+")&&isMobilePhone(
phone_input_value
.replaceAll("(", "")
.replaceAll(")", "")
.replaceAll("-", "")
.replaceAll(" ", "")
) || phone_input_value === "";
(phone_input_value.includes("+") &&
isMobilePhone(
phone_input_value
.replaceAll("(", "")
.replaceAll(")", "")
.replaceAll("-", "")
.replaceAll(" ", "")
)) ||
phone_input_value === "";
$: isEmailValidOrEmpty =
isEmail(email_input_value) || email_input_value === "";
$: isLastnameValid = lastname_input_value.trim().length !== 0;
@@ -70,7 +72,7 @@
if (processed_last_submit === true) {
processed_last_submit = false;
const toast = Toastify({
text: "Runner is being added...",
text: $_("runner-is-being-added"),
duration: -1,
}).showToast();
let postdata = {
@@ -96,7 +98,7 @@
modal_open = false;
//
Toastify({
text: "Runner added",
text: $_("runner-added"),
duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();

10
src/components/runners/ImportRunnerModal.svelte
View File

@@ -77,7 +77,7 @@
function importAction() {
if (recent_processed === true) {
const toast = Toastify({
text: "Runners are being imported...",
text: $_("runners-are-being-imported"),
duration: -1,
}).showToast();
recent_processed = false;
@@ -104,7 +104,7 @@
toast.hideToast();
recent_processed = true;
Toastify({
text: "Import finished",
text: $_("import-finished"),
duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
@@ -121,7 +121,7 @@
toast.hideToast();
recent_processed = true;
Toastify({
text: "Import finished",
text: $_("import-finished"),
duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
@@ -144,7 +144,7 @@
toast.hideToast();
recent_processed = true;
Toastify({
text: "Import finished",
text: $_("import-finished"),
duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
@@ -253,7 +253,7 @@
<p>{$_('bitte-bestaetige-diese-laeufer-fuer-den-import')}</p>
{/if}
{#if opened_from === 'RunnerOverview'}
<p>Group</p>
<p>{$_('group')}</p>
<select
name="team"
bind:value={selected_org_or_team}

4
src/components/runners/Runners.svelte
View File

@@ -19,7 +19,7 @@
}}
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">
Läufer hinzufügen
{$_('laeufer-hinzufuegen')}
</button>
<button
on:click={() => {
@@ -27,7 +27,7 @@
}}
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">
Läufer importieren
{$_('laeufer-importieren')}
</button>
{/if}
</span>

8
src/components/runners/RunnersEmptyState.svelte
View File

@@ -1,16 +1,12 @@
<script>
import { _ } from "svelte-i18n";
// import AddUserModal from "./AddUserModal.svelte";
import runners_empty from "./runners_empty.svg";
// let modal_open = false;
</script>
<div class="text-center items-center justify-center">
<p class="mb-16 text-lg text-gray-500">
<img class="w-full h-44" src={runners_empty} alt="" />
<span class="font-bold">There are no runners added yet.</span><br />
<span>Add your first runner</span>
<span class="font-bold">{$_('there-are-no-runners-added-yet')}</span><br />
<span>{$_('add-your-first-runner')}</span>
</p>
</div>
<!-- <AddUserModal bind:modal_open /> -->

207
src/components/runners/RunnersOverview.svelte
View File

@@ -1,10 +1,13 @@
<script>
import { _ } from "svelte-i18n";
import { RunnerService,RunnerTeamService,
RunnerOrganizationService, } from "@odit/lfk-client-js";
import {
RunnerService,
RunnerTeamService,
RunnerOrganizationService,
} from "@odit/lfk-client-js";
import store from "../../store";
import RunnersEmptyState from "./RunnersEmptyState.svelte";
import Select from 'svelte-select';
import Select from "svelte-select";
$: searchvalue = "";
$: active_deletes = [];
export let current_runners = [];
@@ -13,17 +16,19 @@
});
$: selectedFilter_teams = null;
$: selectedFilter = null;
$: filter__teams = selectedFilter_teams||[];
$: filter__orgs = selectedFilter||[];
$:filterGroupIDs=filter__teams.concat(filter__orgs).map(i=>i.value)
$: filter__teams = selectedFilter_teams || [];
$: filter__orgs = selectedFilter || [];
$: filterGroupIDs = filter__teams.concat(filter__orgs).map((i) => i.value);
$: 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)
$: 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;
});
@@ -31,10 +36,10 @@
orgs = val;
});
function should_display_based_on_id(id) {
if(searchvalue.toString().slice(-1)==="*"){
return id.toString().startsWith(searchvalue.replace("*",""))
if (searchvalue.toString().slice(-1) === "*") {
return id.toString().startsWith(searchvalue.replace("*", ""));
}
return id.toString()===searchvalue;
return id.toString() === searchvalue;
}
</script>
@@ -43,7 +48,7 @@
<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="font-bold">{$_('runners-are-being-loaded')}</p>
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
</div>
{:then}
@@ -57,10 +62,18 @@
aria-label={$_('datatable.search')}
class="gridjs-input gridjs-search-input mb-4" />
<div class="block mb-1">
<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}></Select>
<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="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
@@ -94,81 +107,95 @@
</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">
<div class="flex items-center">
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
{runner.firstname}
{runner.middlename || ''}
{runner.lastname}
{#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">
<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>
</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}
</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) => {
// error deleting user
});
}}
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">Edit</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>
<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}
</td>
{/if}
</tr>
<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">Edit</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}

6
src/components/teams/AddTeamModal.svelte
View File

@@ -110,11 +110,11 @@
</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 team
{$_('create-a-new-team')}
</h3>
<div class="mt-2 mb-6">
<p class="text-sm text-gray-500">
Please provide the required information to add a new team.
{$_('please-provide-the-required-information-to-add-a-new-team')}
</p>
</div>
<div class="grid grid-cols-6 gap-6">
@@ -137,7 +137,7 @@
{#if !isTeamNameValid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
team name is required
{$_('team-name-is-required')}
</span>
{/if}
</div>

16
src/components/teams/ConfirmTeamDeletion.svelte
View File

@@ -22,9 +22,7 @@
}).showToast();
location.replace("./");
})
.catch((err) => {
//
});
.catch((err) => {});
}
</script>
@@ -65,13 +63,13 @@
</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">
Attention!
{$_('attention')}
</h3>
<div class="mt-2 mb-6">
<p class="text-sm text-gray-500">
Do you want to delete the team
{delete_team.name}?<br />All associated runners will be
deleted too!
{$_('do-you-want-to-delete-the-team-delete_team-name', {
values: { teamname: delete_team.name },
})}<br />{$_('all-associated-runners-will-be-deleted-too')}
</p>
</div>
</div>
@@ -82,13 +80,13 @@
on:click={deleteTeam}
type="button"
class="w-full inline-flex 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 team and associated runners.
{$_('confirm-delete-team-and-associated-runners')}
</button>
<button
on:click={cancelDelete}
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, keep team
{$_('cancel-keep-team')}
</button>
</div>
</div>

8
src/components/teams/Teams.svelte
View File

@@ -4,7 +4,7 @@
import AddTeamModal from "./AddTeamModal.svelte";
export let modal_open = false;
import TeamsOverview from "./TeamsOverview.svelte";
let current_teams=[];
let current_teams = [];
</script>
<section class="container p-5">
@@ -17,11 +17,13 @@
}}
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 Team
{$_('create-team')}
</button>
{/if}
</span>
<p class="mb-8 text-lg text-gray-500">everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️</p>
<p class="mb-8 text-lg text-gray-500">
{$_('everything-is-more-fun-together')}
</p>
<TeamsOverview bind:current_teams />
</section>

4
src/components/teams/TeamsEmptyState.svelte
View File

@@ -9,8 +9,8 @@
<div class="text-center items-center justify-center">
<p class="mb-16 text-lg text-gray-500">
<img class="w-full h-44" src={team_empty} alt="" />
<span class="font-bold">There are no teams added yet.</span><br />
<span>Add your first team</span>
<span class="font-bold">{$_('there-are-no-teams-added-yet')}</span><br />
<span>{$_('add-your-first-team')}</span>
</p>
</div>

19
src/components/teams/TeamsOverview.svelte
View File

@@ -31,7 +31,7 @@
<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">teams are being loaded...</p>
<p class="font-bold">{$_('teams-are-being-loaded')}</p>
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
</div>
{:then}
@@ -52,7 +52,7 @@
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
{$_('name')}
</th>
<th
scope="col"
@@ -62,10 +62,10 @@
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Contact
{$_('contact')}
</th>
<th scope="col" class="relative px-6 py-3">
<span class="sr-only">Action</span>
<span class="sr-only">{$_('action')}</span>
</th>
</tr>
</thead>
@@ -93,7 +93,7 @@
<a
href="../orgs/{t.parentGroup.id}"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{t.parentGroup.name}</a>
{:else}no organization specified{/if}
{:else}{$_('no-organization-specified')}{/if}
</div>
</div>
</div>
@@ -108,7 +108,7 @@
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{t.contact.firstname}
{t.contact.middlename || ''}
{t.contact.lastname}</a>
{:else}no contact specified{/if}
{:else}{$_('no-contact-specified')}{/if}
</div>
</div>
</div>
@@ -129,7 +129,7 @@
.then((resp) => {
current_teams = current_teams.filter((obj) => obj.id !== t.id);
Toastify({
text: 'Organization deleted',
text: $_('organization-deleted'),
duration: 500,
backgroundColor:
'linear-gradient(to right, #00b09b, #96c93d)',
@@ -141,8 +141,7 @@
});
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
Delete</button>
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
</td>
{:else}
<td
@@ -156,7 +155,7 @@
active_deletes[t.id] = true;
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
{/if}
</td>
{/if}

14
src/components/tracks/AddTrackModal.svelte
View File

@@ -51,7 +51,6 @@
track_min_duration = 0;
tracklength = 0;
modal_open = false;
//
Toastify({
text: $_("track-added"),
duration: 500,
@@ -64,12 +63,9 @@
storeval.push(result);
tracksstore.set(storeval);
})
.catch((err) => {
//
})
.catch((err) => {})
.finally(() => {
processed_last_submit = true;
//
toast.hideToast();
});
}
@@ -142,7 +138,7 @@
{#if isTracknameValid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Track name must not be empty
{$_('track-name-must-not-be-empty')}
</span>
{/if}
</div>
@@ -167,7 +163,7 @@
{#if isTracklengthValid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Track length must be greater than 0
{$_('track-length-must-be-greater-than-0')}
</span>
{/if}
</div>
@@ -192,7 +188,7 @@
{#if !trackMintimevalid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
minimum lap time must be a positive number or 0
{$_('minimum-lap-time-must-be-a-positive-number-or-0')}
</span>
{/if}
</div>
@@ -215,7 +211,7 @@
}}
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
{$_('cancel')}
</button>
</div>
</div>

4
src/components/tracks/TracksOverview.svelte
View File

@@ -14,11 +14,11 @@
}}
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 Track
{$_('create-track')}
</button>
</span>
<p class="mb-8 text-lg text-gray-500">
configure the tracks & minimum lap times
{$_('configure-the-tracks-and-minimum-lap-times')}
</p>
<Tracks />
</section>

13
src/components/users/AddUserModal.svelte
View File

@@ -47,7 +47,7 @@
if (processed_last_submit === true) {
processed_last_submit = false;
const toast = Toastify({
text: "User is being added...",
text: $_("user-is-being-added"),
duration: -1,
}).showToast();
UserService.userControllerPost({
@@ -67,19 +67,16 @@
modal_open = false;
//
Toastify({
text: "User added",
text: $_("user-added"),
duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
current_users.push(result);
current_users = current_users;
})
.catch((err) => {
//
})
.catch((err) => {})
.finally(() => {
processed_last_submit = true;
//
toast.hideToast();
});
}
@@ -125,11 +122,11 @@
</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 User
{$_('create-a-new-user')}
</h3>
<div class="mt-2 mb-6">
<p class="text-sm text-gray-500">
Please provide the required information to add a new user.
{$_('please-provide-the-required-information-to-add-a-new-user')}
</p>
</div>
<div class="grid grid-cols-6 gap-6">

21
src/components/users/UserPermissions.svelte
View File

@@ -51,7 +51,7 @@
);
});
Toastify({
text: "Permissions updated!",
text: $_("permissions-updated"),
duration: 2500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
@@ -134,14 +134,14 @@
<polyline points="12 5 19 12 12 19" /></svg>
</li>
<li class="flex items-center">
<span class="mr-2">Permissions</span>
<span class="mr-2">{$_('permissions')}</span>
</li>
</ol>
</nav>
</div>
</div>
<div class="mb-8 text-3xl font-extrabold">
Permissions:
{$_('permissions')}:
{original_data.firstname}
{original_data.middlename || ''}
{original_data.lastname}
@@ -156,16 +156,21 @@
{:else}
<button
type="button"
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">Applying
Changes</button>
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('applying-changes')}</button>
{/if}
</span>
</div>
<!-- -->
<div class="flex flex-wrap -mx-1 overflow-hidden">
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">verfügbare</div>
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">erteilte</div>
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">geerbte</div>
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
{$_('verfuegbare')}
</div>
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
{$_('erteilte')}
</div>
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
{$_('geerbte')}
</div>
</div>
<!-- -->
<div class="flex flex-wrap -mx-1 overflow-hidden">

4
src/components/users/UsersEmptyState.svelte
View File

@@ -8,8 +8,8 @@
<div class="text-center items-center justify-center">
<p class="mb-16 text-lg text-gray-500">
<img class="w-full h-44" src={users_empty} alt="" />
<span class="font-bold">There are no users added yet.</span><br />
<span>Add your first user</span>
<span class="font-bold">{$_('there-are-no-users-added-yet')}</span><br />
<span>{$_('add-your-first-user')}</span>
</p>
</div>

37
src/components/users/UsersOverview.svelte
View File

@@ -6,10 +6,10 @@
import UsersEmptyState from "./UsersEmptyState.svelte";
$: searchvalue = "";
$: active_deletes = [];
export let current_users=[];
export let current_users = [];
$: advanced_search = false;
usersstore.subscribe((val) => {
current_users=val;
current_users = val;
});
users_promise.then((data) => {
usersstore.set(data);
@@ -31,12 +31,12 @@
<!-- {#if advanced_search}
advanced search
{:else} -->
<input
type="search"
bind:value={searchvalue}
placeholder={$_('datatable.search')}
aria-label={$_('datatable.search')}
class="gridjs-input gridjs-search-input mb-4" />
<input
type="search"
bind:value={searchvalue}
placeholder={$_('datatable.search')}
aria-label={$_('datatable.search')}
class="gridjs-input gridjs-search-input mb-4" />
<!-- {/if} -->
<!-- <button
on:click={() => {
@@ -56,20 +56,20 @@
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
{$_('name')}
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
{$_('status')}
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Groups
{$_('groups')}
</th>
<th scope="col" class="relative px-6 py-3">
<span class="sr-only">Action</span>
<span class="sr-only">{$_('action')}</span>
</th>
</tr>
</thead>
@@ -91,8 +91,7 @@
</div>
{/if}
<div class="ml-4">
<div
class="text-sm font-medium text-gray-900">
<div class="text-sm font-medium text-gray-900">
{u.firstname}
{u.middlename || ''}
{u.lastname}
@@ -127,21 +126,19 @@
active_deletes[u.id] = false;
}}
tabindex="0"
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
Delete</button>
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
<button
on:click={() => {
UserService.userControllerRemove(u.id, true)
.then((resp) => {
current_users=current_users.filter(obj=>obj.id!==u.id);
current_users = current_users.filter((obj) => obj.id !== u.id);
})
.catch((err) => {
// error deleting user
});
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
Delete</button>
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
</td>
{:else}
<td
@@ -155,7 +152,7 @@
active_deletes[u.id] = true;
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
{/if}
</td>
{/if}