Merge pull request 'feature/13-runner-management' (#42) from feature/13-runner-management into dev

Reviewed-on: #42
close #13

.gitignore

@@ -7,4 +7,5 @@ public/env.js
 public/sw.js
 public/index.html
 public/workbox-*.js
-svelte.config.js
+svelte.config.js
+public/index.html

package.json

@@ -13,6 +13,7 @@
 	},
 	"dependencies": {
 		"@odit/lfk-client-js": "0.3.0",
+		"csvtojson": "^2.0.10",
 		"filepond": "4.25.1",
 		"gridjs": "3.2.2",
 		"localforage": "1.9.0",
@@ -23,7 +24,8 @@
 		"tailwindcss": "2.0.2",
 		"tinro": "0.5.8",
 		"toastify-js": "1.9.3",
-		"validator": "13.5.2"
+		"validator": "13.5.2",
+		"xlsx": "^0.16.9"
 	},
 	"devDependencies": {
 		"@odit/license-exporter": "0.0.9",

public/index.html

@@ -1 +0,0 @@
-<!-- this is configured with dev scripts -->

src/App.svelte

@@ -48,6 +48,7 @@
   OpenAPI.BASE = config.baseurl;
   import { register as registerSW } from "./swmodule";
   import TeamDetail from "./components/TeamDetail.svelte";
+  import RunnerDetail from "./components/RunnerDetail.svelte";
   store.init();
   registerSW();
 </script>
@@ -81,8 +82,13 @@
           </Route>
           <Route path="/:trackid" let:params />
         </Route>
-        <Route path="/runners">
-          <Runners />
+        <Route path="/runners/*">
+          <Route path="/">
+            <Runners />
+          </Route>
+          <Route path="/:runnerid" let:params>
+            <RunnerDetail {params} />
+          </Route>
         </Route>
         <Route path="/teams/*">
           <Route path="/">

src/components/AddRunnerModal.svelte

@@ -2,7 +2,11 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  import { RunnerService, RunnerTeamService } from "@odit/lfk-client-js";
+  import {
+    RunnerService,
+    RunnerTeamService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import isMobilePhone from "validator/es/lib/isMobilePhone";
   import Toastify from "toastify-js";
@@ -14,9 +18,13 @@
   let middlename_input;
   let phone_input;
   let email_input;
-  let groups = [];
+  let teams = [];
   RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    groups = val;
+    teams = val;
+  });
+  let orgs = [];
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    orgs = val;
   });
   function focus(el) {
     el.focus();
@@ -146,11 +154,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 Runner
+                {$_('create-a-new-runner')}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  Please provide the required information to add a new runner.
+                  {$_('please-provide-the-required-information-to-add-a-new-runner')}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
@@ -215,13 +223,20 @@
                 <div class="col-span-6">
                   <label
                     for="team"
-                    class="block text-sm font-medium text-gray-700">Team</label>
+                    class="block text-sm font-medium text-gray-700">{$_('team')}</label>
                   <select
                     name="team"
                     bind:value={selected_team}
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
-                    {#each groups as g}
-                      <option value={g.id}>{g.name}</option>
+                    {#each teams as team}
+                      <option value={team.id}>
+                        {team.parentGroup.name}
+                        &gt;
+                        {team.name}
+                      </option>
+                    {/each}
+                    {#each orgs as org}
+                      <option value={org.id}>{org.name}</option>
                     {/each}
                   </select>
                 </div>
@@ -243,8 +258,7 @@
                   {#if !isPhoneValidOrEmpty}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      the provided phone number is invalid.<br />please enter a
-                      valid international number...
+                      {$_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
                     </span>
                   {/if}
                 </div>

src/components/ImportRunnerModal.svelte

@@ -0,0 +1,286 @@
+<script>
+  import csv from "csvtojson";
+  import { read as readXlsx, utils as xlsx_utils } from "xlsx";
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import Toastify from "toastify-js";
+  import { ImportService } from "@odit/lfk-client-js";
+  import { createEventDispatcher } from "svelte";
+  export let opened_from;
+  export let passed_org;
+  export let passed_orgs;
+  export let passed_team;
+  export let import_modal_open;
+  $: searchvalue = "";
+  const dispatch = createEventDispatcher();
+  function cancelModal() {
+    import_modal_open = false;
+    dispatch("cancel");
+  }
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        import_modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        //
+      }
+    };
+  })();
+  let selected_org;
+  let files;
+  let recent_processed = true;
+  $: json_output = [];
+  $: {
+    if (files) {
+      if (
+        files[0].type ===
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+      ) {
+        const reader = new FileReader();
+        reader.addEventListener("load", async (e) => {
+          const data = new Uint8Array(e.target.result);
+          const out = readXlsx(data, { type: "array" });
+          json_output = xlsx_utils.sheet_to_json(
+            out.Sheets[Object.keys(out.Sheets)[0]]
+          );
+        });
+        reader.readAsArrayBuffer(files[0]);
+      } else {
+        const reader = new FileReader();
+        reader.addEventListener("load", async (e) => {
+          json_output = await csv({
+            delimiter: [";", ","],
+            trim: true,
+          }).fromString(e.target.result);
+        });
+        reader.readAsText(files[0]);
+      }
+    }
+  }
+  function importAction() {
+    if (recent_processed === true) {
+      const toast = Toastify({
+        text: "Runners are being imported...",
+        duration: -1,
+      }).showToast();
+      recent_processed = false;
+      const mapped = json_output.map(function (runner) {
+        return {
+          firstname: runner[`${$_("csv_import__firstname")}`],
+          middlename: runner[`${$_("csv_import__middlename")}`],
+          lastname: runner[`${$_("csv_import__lastname")}`],
+          team:
+            runner[`${$_("csv_import__team")}`] ||
+            runner[`${$_("csv_import__class")}`],
+        };
+      });
+      let org = 0;
+      if (opened_from === "OrgDetail") {
+        org = passed_org.id;
+      }
+      if (opened_from === "OrgOverview") {
+        org = parseInt(selected_org);
+      }
+      if (opened_from === "OrgOverview" || opened_from === "OrgDetail") {
+        ImportService.importControllerPostOrgsJson(org, mapped)
+          .then((resp) => {
+            toast.hideToast();
+            recent_processed = true;
+            Toastify({
+              text: "Import finished",
+              duration: 500,
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            }).showToast();
+            cancelModal();
+          })
+          .catch((err) => {
+            toast.hideToast();
+            recent_processed = true;
+          });
+      }
+      if (opened_from === "TeamDetail") {
+        ImportService.importControllerPostTeamsJson(passed_team.id, mapped)
+          .then((resp) => {
+            toast.hideToast();
+            recent_processed = true;
+            Toastify({
+              text: "Import finished",
+              duration: 500,
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            }).showToast();
+            cancelModal();
+          })
+          .catch((err) => {
+            toast.hideToast();
+            recent_processed = true;
+          });
+      }
+    }
+  }
+</script>
+
+{#if import_modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      import_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">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden 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
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="h-6 w-6 text-blue-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>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
+              <h3 class="text-lg leading-6 font-bold mt-2 text-gray-900">
+                {$_('runner-import')}
+              </h3>
+            </div>
+          </div>
+          <div class="mt-5 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
+            {#if json_output.length === 0}
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_('please-provide-the-required-csv-xlsx-file')}
+                </p>
+              </div>
+              <div class="overflow-hidden relative mt-4 mb-4">
+                <input
+                  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                  bind:files
+                  type="file" />
+              </div>
+            {/if}
+            {#if json_output.length > 0}
+              {#if opened_from === 'OrgOverview'}
+                <p>{$_('import__target-organization')}</p>
+                <select
+                  name="team"
+                  bind:value={selected_org}
+                  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">
+                  {#each passed_orgs as o}
+                    <option value={o.id}>{o.name}</option>
+                  {/each}
+                </select>
+                <p>{$_('bitte-bestaetige-diese-laeufer-fuer-den-import')}</p>
+              {/if}
+              {#if opened_from === 'OrgDetail'}
+                <p>
+                  {$_('runnerimport_verify_runners_org', {
+                    values: { org_name: passed_org.name },
+                  })}
+                </p>
+              {/if}
+              <input
+                type="search"
+                bind:value={searchvalue}
+                placeholder={$_('datatable.search')}
+                aria-label={$_('datatable.search')}
+                class="p-2 w-full" />
+              <div class="relative w-full mt-4 mb-4">
+                <div class="w-full overflow-x-auto">
+                  <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">
+                          {$_('csv_import__firstname')}
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          {$_('csv_import__middlename')}
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          {$_('csv_import__lastname')}
+                        </th>
+                        {#if opened_from !== 'TeamDetail'}
+                          <th
+                            scope="col"
+                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            {$_('csv_import__team')}
+                          </th>
+                        {/if}
+                      </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-200">
+                      {#each json_output as runner}
+                        {#if Object.values(runner)
+                          .toString()
+                          .toLowerCase()
+                          .includes(searchvalue)}
+                          <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                              {runner[`${$_('csv_import__firstname')}`]}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                              {runner[`${$_('csv_import__middlename')}`] || ''}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                              {runner[`${$_('csv_import__lastname')}`]}
+                            </td>
+                            {#if opened_from !== 'TeamDetail'}
+                              <td class="px-6 py-4 whitespace-nowrap">
+                                {runner[`${$_('csv_import__team')}`] || runner[`${$_('csv_import__class')}`] || '---'}
+                              </td>
+                            {/if}
+                          </tr>
+                        {/if}
+                      {/each}
+                    </tbody>
+                  </table>
+                </div>
+                <button
+                  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">
+                  {$_('import-runners')}
+                </button>
+                <button
+                  on:click={() => {
+                    json_output = [];
+                    cancelModal();
+                  }}
+                  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">
+                  {$_('cancel')}
+                </button>
+              </div>
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/OrgDetail.svelte

@@ -4,6 +4,7 @@
   import Toastify from "toastify-js";
   import store from "../store";
   import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+  import ImportRunnerModal from "./ImportRunnerModal.svelte";
   import PromiseError from "./PromiseError.svelte";
   $: delete_triggered = false;
   $: save_enabled = !data_changed;
@@ -64,14 +65,33 @@
     } else {
     }
   }
+  export let import_modal_open = false;
 </script>
 
+<ImportRunnerModal
+  on:cancelDelete={(event) => {
+    import_modal_open = false;
+  }}
+  passed_orgs={[]}
+  passed_org={orgdata}
+  opened_from="OrgDetail"
+  bind:import_modal_open />
 <ConfirmOrgDeletion bind:modal_open bind:delete_org />
 {#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_${orgdata.id}">
+        {#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('USER:DELETE')}
           {#if delete_triggered}
             <button

src/components/Orgs.svelte

@@ -4,8 +4,9 @@
   import AddOrgModal from "./AddOrgModal.svelte";
   export let modal_open = false;
   import OrgOverview from "./OrgOverview.svelte";
-  console.log(store.state.jwtinfo.userdetails.permissions);
+  import ImportRunnerModal from "./ImportRunnerModal.svelte";
   let current_organizations = [];
+  export let import_modal_open = false;
 </script>
 
 <section class="container p-5">
@@ -21,6 +22,16 @@
         {$_('create-organization')}
       </button>
     {/if}
+    {#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}
   </span>
   <p class="mb-8 text-lg text-gray-500">manage runner organizations</p>
   <OrgOverview bind:current_organizations />
@@ -28,4 +39,12 @@
 
 {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
   <AddOrgModal bind:current_organizations bind:modal_open />
+  <ImportRunnerModal
+    on:cancelDelete={(event) => {
+      import_modal_open = false;
+    }}
+    passed_org={{}}
+    passed_orgs={current_organizations}
+    opened_from="OrgOverview"
+    bind:import_modal_open />
 {/if}

src/components/RunnerDetail.svelte

@@ -0,0 +1,264 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import lodashIsEqual from "lodash.isequal";
+  import store from "../store";
+  import {
+    RunnerService,
+    RunnerTeamService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import PromiseError from "./PromiseError.svelte";
+  import isEmail from "validator/es/lib/isEmail";
+  let data_loaded = false;
+  export let params;
+  const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
+  $: delete_triggered = false;
+  $: original_data = {};
+  $: editable = {};
+  $: changes_performed = !lodashIsEqual(original_data, editable);
+  $: isEmailValid =
+    (editable.email || "") === "" ||
+    (editable.email && isEmail(editable.email || ""));
+  $: isFirstnameValid = editable.firstname !== "";
+  $: isLastnameValid = editable.lastname !== "";
+  $: save_enabled =
+    changes_performed && isFirstnameValid && isLastnameValid && isEmailValid;
+  runner_promise.then((data) => {
+    data_loaded = true;
+    original_data = Object.assign(original_data, data);
+    original_data.group = original_data.group.id;
+    editable = Object.assign(editable, original_data);
+  });
+  let orgs = [];
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    orgs = val;
+  });
+  let teams = [];
+  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+    teams = val;
+  });
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      Toastify({
+        text: $_("updating-runner"),
+        duration: 2500,
+      }).showToast();
+      RunnerService.runnerControllerPut(original_data.id, editable)
+        .then((resp) => {
+          Object.assign(original_data, editable);
+          original_data = editable;
+          Object.assign(original_data, editable);
+          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}
+  <!--  -->
+{: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}
+          {#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
+        bind:value={editable.group}
+        name="team"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+        {#each teams as team}
+          <option value={team.id}>
+            {team.parentGroup.name}
+            &gt;
+            {team.name}
+          </option>
+        {/each}
+        {#each orgs as org}
+          <option value={org.id}>{org.name}</option>
+        {/each}
+      </select>
+    </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}

src/components/Runners.svelte

@@ -2,15 +2,17 @@
   import { _ } from "svelte-i18n";
   import store from "../store";
   import AddRunnerModal from "./AddRunnerModal.svelte";
+  import ImportRunnerModal from "./ImportRunnerModal.svelte";
   import RunnersOverview from "./RunnersOverview.svelte";
-  export let modal_open = false;
   let current_runners = [];
+  export let modal_open = false;
+  export let import_modal_open = false;
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
     {$_('runners')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:CREATE')}
       <button
         on:click={() => {
           modal_open = true;
@@ -19,12 +21,28 @@
         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
       </button>
+      <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">
+        Läufer importieren
+      </button>
     {/if}
   </span>
-  <p class="mb-8 text-lg text-gray-500">läuft bei ihnen</p>
   <RunnersOverview bind:current_runners />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:CREATE')}
   <AddRunnerModal bind:current_runners bind:modal_open />
+  <ImportRunnerModal
+    on:cancelDelete={(event) => {
+      import_modal_open = false;
+    }}
+    passed_team={{}}
+    passed_orgs={[]}
+    passed_org={{}}
+    opened_from="RunnerOverview"
+    bind:import_modal_open />
 {/if}

src/components/RunnersOverview.svelte

@@ -37,25 +37,25 @@
               <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">
-                Contact Information
+                {$_('contact-information')}
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Group
+                {$_('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
+                {$_('distance-in-km')}
               </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>
@@ -69,8 +69,7 @@
                   <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">
+                        <div class="text-sm font-medium text-gray-900">
                           {runner.firstname}
                           {runner.middlename || ''}
                           {runner.lastname}
@@ -111,8 +110,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
@@ -126,7 +124,7 @@
                             active_deletes[runner.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}

src/components/TeamDetail.svelte

@@ -6,6 +6,7 @@
   import { _ } from "svelte-i18n";
   import Toastify from "toastify-js";
   import store from "../store";
+  import ImportRunnerModal from "./ImportRunnerModal.svelte";
   import PromiseError from "./PromiseError.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
   export let params;
@@ -16,6 +17,7 @@
     [],
     false,
   ];
+  export let import_modal_open = false;
   $: delete_triggered = false;
   $: save_enabled = !data_changed;
   $: data_loaded = false;
@@ -71,12 +73,31 @@
   }
 </script>
 
+<ImportRunnerModal
+  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}">
+        {#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

src/locales/de.json

@@ -2,10 +2,17 @@
     "404message": "Die gesuchte Seite wurde leider nicht gefunden.",
     "404title": "Fehler 404",
     "about": "Über",
-    "application_name": "Lauf für Kaya! \n- Admin",
+    "application_name": "Lauf für Kaya! - Admin",
+    "bitte-bestaetige-diese-laeufer-fuer-den-import": "Bitte die Läufer für den import bestätigen.",
     "by": "von",
+    "cancel": "Abbrechen",
     "cannot-reset-your-password-directly": "Schade. \nWir können das Passwort leider nicht direkt zurücksetzen.\nBitte sende uns eine Mail in der du deine Identität bestätigst.",
     "credits": "",
+    "csv_import__class": "Klasse",
+    "csv_import__firstname": "Vorname",
+    "csv_import__lastname": "Nachname",
+    "csv_import__middlename": "Mittelname",
+    "csv_import__team": "Team",
     "dashboard-greeting": "Moin",
     "datatable": {
         "search": "🔍 Suche ...",
@@ -27,6 +34,8 @@
     "goback": "Zur Startseite",
     "hallo": "hallo",
     "icon-image-credits": "Wir möchten uns außerdem für die verwendeten Icons und Bilder bedanken bei:",
+    "import-runners": "Läufer importieren",
+    "import__target-organization": "Ziel Organisation",
     "invalid-mail-reset": "Das ist keine gültige E-Mail",
     "lfk-is-os": "Das \"Lauf für Kaya!\" Frontend ist (wie alle anderen Projekte für den \"LfK!\" auch) ein OpenSource Projekt.",
     "log_in": "Anmelden",
@@ -34,8 +43,11 @@
     "login_is_checked": "Login wird überprüft",
     "oss_credit_description": "Wir verwenden eine Menge Open Source-Software bei diesen Projekten und möchten uns bei den folgenden Projekten und Mitwirkenden bedanken, die dazu beitragen, Open Source großartig zu machen!",
     "password": "Passwort",
+    "please-provide-the-required-csv-xlsx-file": "Bitte eine CSV oder XLSX Datei hochladen.",
     "register": "Registrieren",
     "reset-my-password": "Passwort zurücksetzen",
+    "runner-import": "Läufer Import",
+    "runnerimport_verify_runners_org": "Bitte die Läufer für den Import in die Organisation \"{org_name}\" bestätigen",
     "runners": "Läufer",
     "send-a-mail-to-lfk-odit-services": "Sende eine Mail an lfk@odit.services",
     "settings": "Einstellungen",

src/locales/en.json

@@ -7,6 +7,7 @@
     "address": "Address",
     "application_name": "Lauf für Kaya! - Admin",
     "author": "Author",
+    "bitte-bestaetige-diese-laeufer-fuer-den-import": "Please confirm these runners for import",
     "browse": "Browse",
     "by": "by",
     "cancel": "Cancel",
@@ -14,14 +15,22 @@
     "changelog": "Changelog",
     "close": "Close",
     "confirm-delete": "Confirm Delete",
+    "confirm-deletion": "Confirm Deletion",
     "contact": "Contact",
+    "contact-information": "Contact Information",
     "count_organizations": "# Organizations",
     "count_teams": "# Teams",
     "create": "Create",
+    "create-a-new-runner": "Create a new Runner",
     "create-a-new-track": "Create a new Track",
     "create-organization": "Create Organization",
     "create-user": "Create User",
     "credits": "Credits",
+    "csv_import__class": "Class",
+    "csv_import__firstname": "Firstname",
+    "csv_import__lastname": "Lastname",
+    "csv_import__middlename": "Middlename",
+    "csv_import__team": "Team",
     "dashboard-greeting": "hello there",
     "dashboard-title": "Dashboard",
     "datatable": {
@@ -39,10 +48,14 @@
         "no_matching_records_found": "No matching records found",
         "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
     },
+    "delete": "Delete",
     "delete-organization": "Delete Organization",
+    "delete-runner": "Delete Runner",
     "delete-team": "Delete Team",
     "delete-user": "Delete User",
     "dependency_name": "Name",
+    "distance": "Distance",
+    "distance-in-km": "Distance in km",
     "dont-have-your-email-connected": "Don't have your email connected?",
     "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
     "drag-and-drop-your-files-or": "Drag & Drop your files or",
@@ -76,9 +89,12 @@
     "general-stats": "General Stats",
     "general_promise_error": "😢 Error",
     "goback": "Go Home",
+    "group": "Group",
     "groups": "Groups",
     "hallo": "hello",
     "icon-image-credits": "We also want to thank these projects for illustrations and icons:",
+    "import-runners": "Import runners",
+    "import__target-organization": "Target Organization",
     "installed-version": "Installed version",
     "invalid-mail-reset": "the provided email is invalid",
     "last-name": "Last name",
@@ -94,6 +110,7 @@
     "manage-admin-users": "manage admin users",
     "middle-name": "Middle name",
     "minimum-lap-time-in-s": "minimum lap time in s",
+    "name": "Name",
     "no-license-text-could-be-found": "No license text could be found 😢",
     "no-tracks-added-yet": "there are no tracks added yet.",
     "organization": "Organization",
@@ -102,20 +119,28 @@
     "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
     "password": "Password",
     "password-is-required": "Password is required",
+    "phone": "Phone",
+    "please-provide-the-required-csv-xlsx-file": "Please provide the required csv/ xlsx file",
+    "please-provide-the-required-information-to-add-a-new-runner": "Please provide the required information to add a new runner.",
     "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
     "profile-picture": "Profile Picture",
     "read-license": "Read License",
     "register": "Register",
     "repo_link": "Link",
     "reset-my-password": "Reset my password",
+    "runner-import": "Runner Import",
+    "runner-updated": "Runner updated!",
+    "runnerimport_verify_runners_org": "Please confirm these runners for import into the organization \"{org_name}\"",
     "runners": "Runners",
     "save-changes": "Save Changes",
     "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
     "settings": "Settings",
     "signout": "Sign out",
     "stats-are-being-loaded": "stats are being loaded...",
+    "team": "Team",
     "team-name": "Team name",
     "teams": "Teams",
+    "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number": "the provided phone number is invalid.<br />please enter a valid international number...",
     "this-might-take-a-moment": "This might take a moment 👀",
     "total-distance": "total distance",
     "total-donations": "total donations",
@@ -126,6 +151,7 @@
     "track-length-in-m": "Track Length in m",
     "track-name": "Track name",
     "tracks": "Tracks",
+    "updating-runner": "Updating runner...",
     "updating-user": "updating user...",
     "user-updated": "User updated",
     "username": "Username",

svelte.config.js

@@ -1 +0,0 @@
-// this is configured with dev scripts