Merge pull request 'Scan management feature/92-scan_mgnt' (#101) from feature/92-scan_mgnt into dev

Reviewed-on: #101

package.json

@@ -13,7 +13,7 @@
 	},
 	"license": "CC-BY-NC-SA-4.0",
 	"dependencies": {
-		"@odit/lfk-client-js": "0.4.5",
+		"@odit/lfk-client-js": "0.6.3",
 		"csvtojson": "^2.0.10",
 		"gridjs": "3.3.0",
 		"localforage": "1.9.0",
@@ -21,7 +21,7 @@
 		"marked": "^2.0.0",
 		"svelte-focus-trap": "1.0.1",
 		"svelte-i18n": "3.3.2",
-		"svelte-select": "^3.16.1",
+		"svelte-select": "^3.17.0",
 		"tailwindcss": "2.0.3",
 		"tinro": "0.5.12",
 		"toastify-js": "1.9.3",

src/App.svelte

@@ -69,9 +69,11 @@
   import Donations from "./components/donations/Donations.svelte";
   import DonationDetail from "./components/donations/DonationDetail.svelte";
   import GroupDetail from "./components/groups/GroupDetail.svelte";
-import ScanStationsOverview from "./components/scanstations/ScanStationsOverview.svelte";
-import ScanStations from "./components/scanstations/ScanStations.svelte";
-import ScanStationDetail from "./components/scanstations/ScanStationDetail.svelte";
+  import ScanStationsOverview from "./components/scanstations/ScanStationsOverview.svelte";
+  import ScanStations from "./components/scanstations/ScanStations.svelte";
+  import ScanStationDetail from "./components/scanstations/ScanStationDetail.svelte";
+  import Scans from "./components/scans/Scans.svelte";
+import ScanDetail from "./components/scans/ScanDetail.svelte";
   store.init();
   registerSW();
 </script>
@@ -183,6 +185,14 @@ import ScanStationDetail from "./components/scanstations/ScanStationDetail.svelt
             <DonationDetail {params} />
           </Route>
         </Route>
+        <Route path="/scans/*">
+          <Route path="/">
+            <Scans />
+          </Route>
+          <Route path="/:scanid" let:params>
+            <ScanDetail {params} />
+          </Route>
+        </Route>
         <Route path="/scanstations/*">
           <Route path="/">
             <ScanStations />

src/components/dashboard/Dashboard.svelte

@@ -172,21 +172,41 @@
           <span>{$_('tracks')}</span>
         </a>
       {/if}
-      <a
-        class:bg-gray-100={$router.path === '/contacts/'}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/contacts/">
-        <svg
-          fill="currentColor"
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          width="24"
-          height="24"><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
-        <span>{$_('contacts')}</span>
-      </a>
+      {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:GET')}
+        <a
+          class:bg-gray-100={$router.path === '/scans/'}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/scans/">
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            width="24"
+            height="24"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
+          <span>Scans</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:GET')}
+        <a
+          class:bg-gray-100={$router.path === '/contacts/'}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/contacts/">
+          <svg
+            fill="currentColor"
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
+          <span>{$_('contacts')}</span>
+        </a>
+      {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes('STATION:GET')}
         <a
           class:bg-gray-100={$router.path === '/scanstations/'}
@@ -198,7 +218,12 @@
             width="24"
             height="24"
             viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"/></svg>
+            xmlns="http://www.w3.org/2000/svg"><path
+              fill="none"
+              d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
           <span>{$_('scanstations')}</span>
         </a>
       {/if}

src/components/scans/AddScanModal.svelte

@@ -0,0 +1,195 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import {
+    RunnerService,
+    ScanService,
+  } from "@odit/lfk-client-js";
+  import Select from "svelte-select";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let current_scans;
+  const getRunnerLabel = (option) =>
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+  const filterRunners = (label, filterText, option) =>
+    label.toLowerCase().includes(filterText.toLowerCase()) ||
+    option.value.toString().startsWith(filterText.toLowerCase());
+  function focus(el) {
+    el.focus();
+  }
+  $: runner = 0;
+  $: runners = [];
+  RunnerService.runnerControllerGetAll().then((val) => {
+    runners = val.map(r => {return {label: getRunnerLabel(r), value: r}});
+  });
+  $: distance_input = 0;
+  $: processed_last_submit = true;
+  $: is_distance_valid = distance_input > 0;
+  $: createbtnenabled = is_distance_valid;
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: $_('adding-scan'),
+        duration: -1,
+      }).showToast();
+      let postdata = {
+        runner,
+        distance: distance_input,
+      };
+      ScanService.scanControllerPost(postdata)
+        .then((result) => {
+          runner = 0;
+          distance_input = 0;
+          modal_open = false;
+          //
+          Toastify({
+            text: $_('scan-added'),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_scans.push(result);
+          current_scans = current_scans;
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <svg
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  fill="currentColor"
+                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                {$_('create-a-new-scan-fixed-only')}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_('please-provide-the-nessecary-information-to-create-a-new-scan')}
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="donor"
+                    class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
+                  <Select
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
+                    items={runners}
+                    showChevron={true}
+                    placeholder={$_('search-for-runner-by-name-or-id')}
+                    noOptionsMessage={$_('no-runners-found')}
+                    on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
+                    on:clear={() => (runner = null)} />
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="donation_amount_eur"
+                    class="block text-sm font-medium text-gray-700">
+                    Distance</label>
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <input
+                      autocomplete="off"
+                      class:border-red-500={!is_distance_valid}
+                      class:focus:border-red-500={!is_distance_valid}
+                      class:focus:ring-red-500={!is_distance_valid}
+                      bind:value={distance_input}
+                      type="number"
+                      step="1"
+                      name="donation_amount_eur"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      placeholder="400" />
+                    <span
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
+                  </div>
+                  {#if !is_distance_valid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('the-scans-distance-must-be-greater-than-0m')}
+                    </span>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            on:click={submit}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('create')}
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/scans/ScanDetail.svelte

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

src/components/scans/Scans.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import store from "../../store";
+  import AddScanModal from "./AddScanModal.svelte";
+  import ScansOverview from "./ScansOverview.svelte";
+  $: current_scans = [];
+  export let modal_open = false;
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_('scans')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
+      <button
+        on:click={() => {
+          modal_open = true;
+        }}
+        type="button"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+       {$_('add-scan')}
+      </button>
+    {/if}
+  </span>
+  <ScansOverview bind:current_scans />
+</section>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
+  <AddScanModal bind:current_scans bind:modal_open />
+{/if}

src/components/scans/ScansEmptyState.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import scans_empty from "./scans.svg";
+</script>
+
+<div class="text-center items-center justify-center">
+  <p class="mb-16 text-lg text-gray-500">
+    <img class="w-full" style="height:15rem" src={scans_empty} alt="" />
+    <span class="font-bold">{$_('there-are-no-scans-yet')}</span><br />
+    <span>{$_('add-your-fist-scan')}</span>
+  </p>
+</div>

src/components/scans/ScansOverview.svelte

@@ -0,0 +1,201 @@
+<script>
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import {
+    ScanService,
+  } from "@odit/lfk-client-js";
+  import store from "../../store";
+  import Toastify from "toastify-js";
+  import ScansEmptyState from "./ScansEmptyState.svelte";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  export let current_scans = [];
+  const scans_promise = ScanService.scanControllerGetAll().then((val) => {
+    current_scans = val;
+  });
+  function should_display_based_on_id(id) {
+    if (searchvalue.toString().slice(-1) === "*") {
+      return id.toString().startsWith(searchvalue.replace("*", ""));
+    }
+    return id.toString() === searchvalue;
+  }
+  function format_laptime(laptime){
+    if(laptime == 0 || laptime == null){return $_('first-scan-of-the-day')}
+    if(laptime < 60){return `${laptime}s`}
+    if(laptime < 3600){return `${Math.floor(laptime / 60)}min ${laptime - (Math.floor(laptime / 60)*60)}s`}
+    return `${Math.floor(laptime / 3600)}h ${laptime - (Math.floor(laptime / 3600)*3600)}min ${laptime - (Math.floor(laptime / 3600)*3600) - (Math.floor(laptime / 60)*60)}`
+  }
+</script>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:GET')}
+  {#await scans_promise}
+    <div
+      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+      role="alert">
+      <p class="font-bold">{$_('scans-are-being-loaded')}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then}
+    {#if current_scans.length === 0}
+      <ScansEmptyState />
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('runner')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('distance-track')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('laptime')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('status')}
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">{$_('action')}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each current_scans as scan}
+              {#if scan.track?.name
+                .toLowerCase()
+                .includes(
+                  searchvalue.toLowerCase()
+                ) || scan.runner?.firstname
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || scan.runner?.middlename
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || scan.runner?.lastname
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || should_display_based_on_id(scan.id)}
+                <tr data-rowid="scan_{scan.id}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <a
+                        href="../runners/{scan.runner.id}"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{scan.runner.firstname}
+                        {scan.runner.middlename || ''}
+                        {scan.runner.lastname}</a>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm font-medium text-gray-900">
+                      {#if scan.distance < 1000}
+                        {scan.distance}m
+                      {:else}{scan.distance / 1000}km{/if}
+                      {#if scan.track}
+                        <a
+                          href="../tracks"
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{scan.track.name}
+                        </a>
+                      {/if}
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    {#if scan.responseType === "TRACKSCAN"}
+                      <div class="text-sm font-medium text-gray-900">
+                        {format_laptime(scan.lapTime)}
+                      </div>
+                    {:else}
+                      <div class="text-sm font-medium text-gray-900">
+                        {$_('scan-with-fixed-distance')}
+                      </div>
+                    {/if}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      {#if scan.valid}
+                        <span
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('valid')}</span>
+                      {:else}
+                        <span
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('invalid')}</span>
+                      {/if}
+                    </div>
+                  </td>
+
+                  {#if active_deletes[scan.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[scan.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                      <button
+                        on:click={() => {
+                          ScanService.scanControllerRemove(scan.id, false).then(
+                            (resp) => {
+                              current_scans = current_scans.filter(
+                                (obj) => obj.id !== scan.id
+                              );
+                              Toastify({
+                                text: 'Scan deleted',
+                                duration: 500,
+                                backgroundColor:
+                                  'linear-gradient(to right, #00b09b, #96c93d)',
+                              }).showToast();
+                            }
+                          );
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                    </td>
+                  {:else}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <a
+                        href="./{scan.id}"
+                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[scan.id] = true;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:catch error}
+    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+      <span class="inline-block align-middle mr-8">
+        <b class="capitalize">{$_('general_promise_error')}</b>
+        {error}
+      </span>
+    </div>
+  {/await}
+{/if}

src/components/scans/scans.svg

@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="598.11" height="535.11"><path d="M3.35 120.07a4.6 4.6 0 00-3.18 5.66l76.72 273.98a4.6 4.6 0 005.65 3.18l282.82-79.19a4.6 4.6 0 003.18-5.66L291.82 44.07a4.6 4.6 0 00-5.65-3.19z" fill="#e6e6e6"/><path d="M86.1 389.95l269.5-75.46-72.99-260.67-269.5 75.46z" fill="#fff"/><path d="M48.74 164.1c-1.8.5-2.54 3.48-1.65 6.65s3.07 5.33 4.87 4.83l122.91-34.42c1.8-.5 2.54-3.49 1.66-6.65s-3.08-5.34-4.87-4.84zM58.64 199.44c-1.8.5-2.54 3.5-1.65 6.66s3.07 5.34 4.87 4.83l122.91-34.42c1.8-.5 2.54-3.49 1.65-6.65s-3.07-5.34-4.86-4.83zM68.42 234.39c-1.8.5-2.54 3.49-1.65 6.66s3.07 5.33 4.87 4.83l122.92-34.42c1.8-.5 2.54-3.5 1.65-6.66s-3.07-5.33-4.87-4.83zM78.32 269.74c-1.8.5-2.54 3.49-1.65 6.66s3.07 5.33 4.87 4.83l122.92-34.42c1.8-.5 2.54-3.49 1.65-6.66s-3.07-5.33-4.87-4.83zM234.04 112.61a5.97 5.97 0 103.21 11.5l22.98-6.44a5.97 5.97 0 00-3.22-11.49zM243.74 147.28a5.97 5.97 0 103.22 11.49l22.98-6.43a5.97 5.97 0 00-3.22-11.5zM253.45 181.95a5.97 5.97 0 103.22 11.49l22.98-6.44a5.97 5.97 0 00-3.22-11.49zM263.16 216.61a5.97 5.97 0 003.21 11.5l22.98-6.44a5.97 5.97 0 00-3.21-11.49z" fill="#e6e6e6"/><path d="M272.43 276.7a7.6 7.6 0 104.1 14.64l29.28-8.2a7.6 7.6 0 00-4.1-14.64z" fill="#6c63ff"/><path fill="#e6e6e6" d="M85.9 307.81l216.66-60.67.54 1.93-216.67 60.67z"/><path fill="#a0616a" d="M520.2 506.07l-17.38 4.2-24.47-65.02 25.65-6.2 16.2 67.02z"/><path d="M472.85 535.11l-.12-.48a22.23 22.23 0 0116.37-26.8l34-8.23 5.33 22.08z" fill="#2f2e41"/><path fill="#a0616a" d="M443.28 517.91H425.4l-8.5-68.96h26.38v68.96z"/><path d="M447.6 535.01h-57.18v-.5a22.2 22.2 0 0122.2-22.2h34.99zM416.88 490.99l-17.36-206.87 71.86-13.25.28-.05 21.03 13.52-7.32 76.14 33.7 118.7-29.1 7.65-33.75-110.08-7.73-33.48-3.96 43.5 2.94 107.28z" fill="#2f2e41"/><path d="M397.3 288.81l-.2-.24 24.84-186.96.03-.24.17-.18c.37-.36 9.07-8.96 18.02-8.96 1.3 0 2.52-.03 3.7-.06 6.85-.18 12.26-.32 18.69 6.1 6.55 6.56 27.92 30.47 27.92 63.23 0 31.7 2.88 130.22 2.91 131.21l.04 1.4-1.16-.76c-.3-.19-29.03-18.49-53.14-1.48-7.53 5.32-14.3 7.18-20.09 7.18-13.47 0-21.62-10.1-21.73-10.24z" fill="#6c63ff"/><circle cx="737.3" cy="227.82" r="35.82" transform="rotate(-28.66 229.78 725.57)" fill="#a0616a"/><path d="M381.53 328.99a14.66 14.66 0 00.85-22.47l20.34-47.97-26.63 4.9-15.23 44.8A14.74 14.74 0 00381.53 329z" fill="#a0616a"/><path d="M361.88 291.67l6.55-13.83a2.7 2.7 0 01-.97-1c-6.12-10.6 30.84-98.67 33.3-104.51-.37-3.18-4.25-36.85-1.41-48.2 3.34-13.35 10.2-19.58 22.93-20.81 14.04-1.32 17.83 17.75 17.86 17.94l.02 49.02-16.12 56.43-36.75 74.97z" fill="#6c63ff"/><path d="M440.94 58.87c-4.3.56-7.54-3.83-9.04-7.9s-2.64-8.78-6.38-10.98c-5.1-3-11.62.61-17.45-.38-6.59-1.11-10.87-8.1-11.2-14.76s2.31-13.1 4.92-19.24l.9 7.64A15.16 15.16 0 01409.33 0l-1.17 11.22c.73-6.29 7.5-11.16 13.7-9.85l-.19 6.68c7.6-.9 15.28-1.81 22.91-1.12s15.31 3.1 21.1 8.13c8.64 7.51 11.8 19.89 10.74 31.3s-5.77 22.13-10.68 32.48c-1.23 2.6-2.94 5.54-5.8 5.88-2.58.3-4.93-1.86-5.73-4.32s-.41-5.14.07-7.69c.72-3.84 1.63-7.77.95-11.63s-3.45-7.66-7.33-8.13-7.86 3.97-6 7.4z" fill="#2f2e41"/><path fill="#3f3d56" d="M597.73 535.1H339.99v-2.11h258.12l-.38 2.1z"/></svg>

src/locales/en.json

@@ -6,6 +6,7 @@
     "active": "Active",
     "add-donation": "Add donation",
     "add-donor": "add donor",
+    "add-scan": "Add scan",
     "add-user-group": "Add User Group",
     "add-your-first-contact": "Add your first contact",
     "add-your-first-donor": "add your first donor",
@@ -15,6 +16,8 @@
     "add-your-first-team": "Add your first team",
     "add-your-first-track": "Add your first track.",
     "add-your-first-user": "Add your first user",
+    "add-your-fist-scan": "Add your fist scan",
+    "adding-scan": "Adding Scan",
     "address": "Address",
     "address-is-required": "Address is required",
     "all-associated-donations-will-get-deleted-as-well": "All associated donations will get deleted as well",
@@ -60,6 +63,7 @@
     "create-a-new-fixed-donation": "Create a new fixed donation",
     "create-a-new-organization": "Create a new Organization",
     "create-a-new-runner": "Create a new Runner",
+    "create-a-new-scan-fixed-only": "Create a new scan (fixed only)",
     "create-a-new-team": "Create a new team",
     "create-a-new-track": "Create a new Track",
     "create-a-new-user": "Create a new User",
@@ -98,8 +102,10 @@
     "delete-group": "Delete Group",
     "delete-organization": "Delete Organization",
     "delete-runner": "Delete Runner",
+    "delete-scan": "Delete scan",
     "delete-team": "Delete Team",
     "delete-user": "Delete User",
+    "deleted-scan": "Deleted scan",
     "dependency_name": "Name",
     "description": "description",
     "description-optional": "Description (optional)",
@@ -108,6 +114,7 @@
     "distance": "Distance",
     "distance-donation": "distance donation",
     "distance-in-km": "Distance in km",
+    "distance-track": "Distance (+Track)",
     "do-you-want-to-delete-the-organization-delete_org-name": "Do you want to delete the organization {orgname}?",
     "do-you-want-to-delete-the-team-delete_team-name": "Do you want to delete the team {teamname}?",
     "do-you-want-to-delete-this-donor-with-all-related-donations": "Do you want to delete this donor with all related donations",
@@ -136,6 +143,7 @@
     "filter-by-organization-team": "Filter by Organization/ Team",
     "first-name": "First name",
     "first-name-is-required": "First Name is required",
+    "first-scan-of-the-day": "First scan of the day.",
     "fixed-donation": "fixed donation",
     "forgot_password": "Forgot your password?",
     "geerbte": "inherited",
@@ -166,9 +174,11 @@
     "inactive": "Inactive",
     "installed-version": "Installed version",
     "internal-error": "Internal Error",
+    "invalid": "Invalid",
     "invalid-mail-reset": "the provided email is invalid",
     "laeufer-hinzufuegen": "Add runner",
     "laeufer-importieren": "Läufer importieren",
+    "laptime": "Laptime",
     "last-name": "Last name",
     "last-name-is-required": "Last Name is required",
     "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
@@ -226,6 +236,7 @@
     "please-provide-a-password": "Please provide a password...",
     "please-provide-the-nessecary-information-to-add-a-new-donor": "Please provide the nessecary information to add a new donor",
     "please-provide-the-nessecary-information-to-create-a-new-donation": "Please provide the nessecary information to create a new donation",
+    "please-provide-the-nessecary-information-to-create-a-new-scan": "Please provide the nessecary information to create a new scan.",
     "please-provide-the-required-csv-xlsx-file": "Please provide the required csv/ xlsx file",
     "please-provide-the-required-information-for-creating-a-new-user-group": "Please provide the required information for creating a new user group.",
     "please-provide-the-required-information-to-add-a-new-contact": "Please provide the required information to add a new contact.",
@@ -255,6 +266,11 @@
     "runners-are-being-loaded": "runners are being loaded...",
     "save": "Save",
     "save-changes": "Save Changes",
+    "scan-added": "Scan added",
+    "scan-is-being-updated": "Scan is being updated",
+    "scan-with-fixed-distance": "Scan with fixed distance",
+    "scans": "Scans",
+    "scans-are-being-loaded": "Scans are being loaded",
     "search-for-an-organization-by-name-or-id": "Search for an organization (by name or id)",
     "search-for-an-organization-or-team-by-name-or-id": "Search for an organization or team (by name or id)",
     "search-for-donor-name-or-id": "Search for donor (by name or id)",
@@ -276,11 +292,13 @@
     "teams": "Teams",
     "teams-are-being-loaded": "teams are being loaded...",
     "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...",
+    "the-scans-distance-must-be-greater-than-0m": "The scan's distance must be greater than 0m",
     "there-are-no-contacts-added-yet": "There are no contacts added yet.",
     "there-are-no-donors-yet": "There are no donors yet",
     "there-are-no-groups-yet": "There are no groups yet",
     "there-are-no-organizations-added-yet": "There are no organizations added yet.",
     "there-are-no-runners-added-yet": "There are no runners added yet.",
+    "there-are-no-scans-yet": "There are no scans yet",
     "there-are-no-teams-added-yet": "There are no teams added yet.",
     "there-are-no-users-added-yet": "There are no users added yet.",
     "this-might-take-a-moment": "This might take a moment 👀",
@@ -288,6 +306,7 @@
     "total-donation-amount": "total donation amount",
     "total-donations": "total donations",
     "total-scans": "total scans",
+    "track": "Track",
     "track-added": "Track added",
     "track-data-is-being-loaded": "Track data is being loaded",
     "track-is-being-added": "Track is being added...",
@@ -299,6 +318,7 @@
     "updated-contact": "Updated contact!",
     "updated-donor": "updated donor",
     "updated-organization": "updated organization",
+    "updated-scan": "updated scan",
     "updateing-group": "updateing group...",
     "updating-organization": "updating organization",
     "updating-permissions": "updating permissions...",
@@ -310,6 +330,7 @@
     "user-updated": "User updated",
     "username": "Username",
     "users": "Users",
+    "valid": "Valid",
     "valid-city-is-required": "Valid city is required",
     "valid-email-is-required": "valid email is required",
     "valid-international-phone-number-is-required": "valid international phone number is required...",