Advanced Scan detail

ref #92

src/components/scans/AddScanModal.svelte

@@ -3,8 +3,6 @@
   import { clickOutside } from "../base/outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import {
-    DonationService,
-    DonorService,
     RunnerService,
     ScanService,
   } from "@odit/lfk-client-js";

src/components/scans/ScanDetail.svelte

@@ -16,6 +16,7 @@
   $: original_data = {};
   $: editable = {};
   $: current_runners = [];
+  $: is_distance_valid = editable.distance > 0;
   $: is_everything_set =
     editable.donor != null &&
     ((original_data.responseType == "TRACKSCAN" && editable?.runner != null) ||
@@ -23,7 +24,7 @@
   $: changes_performed = !(
     JSON.stringify(original_data) === JSON.stringify(editable)
   );
-  $: save_enabled = changes_performed && is_everything_set;
+  $: save_enabled = changes_performed && is_everything_set && is_distance_valid;
   const runner_promise = RunnerService.runnerControllerGetAll().then((val) => {
     current_runners = val;
   });
@@ -99,7 +100,7 @@
   }
 </script>
 
-{#await donor_promise && runner_promise && promise}
+{#await runner_promise && promise}
   Loading scan details
 {:then}
   <section class="container p-5 select-none">
@@ -180,8 +181,10 @@
       </span>
     </div>
     <!--  -->
-    <div class="w-full">
-      <label for="valid" class="block font-medium text-gray-700">Status</label>
+    <div class="w-full inline-flex">
+      <label for="valid" class="block font-medium text-gray-700">Status:
+      </label>
+      &nbsp;
       <input
         id="valid"
         on:change={() => {
@@ -190,15 +193,33 @@
         name="valid"
         type="checkbox"
         checked={editable.valid}
-        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-      {#if editable.valid}
-        <span
-          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Invalid</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}
+        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>
+      |
+      <label for="valid" class="block font-semibold text-gray-700">Station: </label>
+      <a
+        href="../scanstations/{editable.station.id}"
+        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">#{editable.station.id}
+      </a>
+      |
+      <label for="valid" class="block font-semibold text-gray-700">Card: </label>
+      <a
+        href="TODO:"
+        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">#{editable.card.id}
+      </a>
+    </div>
+    {/if}
     <div class=" w-full">
       <label
         for="runner"
@@ -210,12 +231,40 @@
         itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
         items={current_runners}
         showChevron={true}
-        isDisabled={(editable.responseType === "TRACKSCAN")}
+        isDisabled={editable.responseType === 'TRACKSCAN'}
         placeholder={$_('search-for-runner-by-name-or-id')}
         noOptionsMessage={$_('no-runners-found')}
         bind:selectedValue={editable.runner}
         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 scan's distance must be greater than 0m
+        </span>
+      {/if}
+    </div>
   </section>
 {:catch error}
   <PromiseError {error} />