✨ translation keys

ref #69
2021-02-18 18:09:57 +01:00
parent 505ca6a58e
commit a588bc4631
29 changed files with 334 additions and 264 deletions
--- a/src/components/runners/AddRunnerModal.svelte
+++ b/src/components/runners/AddRunnerModal.svelte
@@ -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();
--- a/src/components/runners/ImportRunnerModal.svelte
+++ b/src/components/runners/ImportRunnerModal.svelte
@@ -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}
--- a/src/components/runners/Runners.svelte
+++ b/src/components/runners/Runners.svelte
@@ -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>
--- a/src/components/runners/RunnersEmptyState.svelte
+++ b/src/components/runners/RunnersEmptyState.svelte
@@ -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 /> -->
--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -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}