From b1031e3115ce03ee68e10f3240f8e829f3f7cfde Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Thu, 18 Mar 2021 15:56:18 +0100
Subject: [PATCH] =?UTF-8?q?Switched=20the=20scanstation=20detail=20over=20?=
 =?UTF-8?q?to=20svelte=20select=F0=9F=91=80=F0=9F=91=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #98
---
 .../scanstations/AddScanStationModal.svelte   |  4 +-
 .../scanstations/ScanStationDetail.svelte     | 47 ++++++++++++-------
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/scanstations/AddScanStationModal.svelte b/src/components/scanstations/AddScanStationModal.svelte
index 207aa6ff..64603c54 100644
--- a/src/components/scanstations/AddScanStationModal.svelte
+++ b/src/components/scanstations/AddScanStationModal.svelte
@@ -140,8 +140,8 @@
                         .startsWith(filterText.toLowerCase())}
                     items={tracks}
                     showChevron={true}
-                    placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
-                    noOptionsMessage={$_('no-organization-or-team-found')}
+                    placeholder="Search for a track (by name or id)."
+                    noOptionsMessage="No track found"
                     on:select={(selectedValue) => (track = selectedValue.detail.value.id)}
                     on:clear={() => (track = null)} />
                 </div>
diff --git a/src/components/scanstations/ScanStationDetail.svelte b/src/components/scanstations/ScanStationDetail.svelte
index 64df533f..15b65af8 100644
--- a/src/components/scanstations/ScanStationDetail.svelte
+++ b/src/components/scanstations/ScanStationDetail.svelte
@@ -1,10 +1,11 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { t, _ } from "svelte-i18n";
   import store from "../../store";
   import { ScanStationService, TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import PromiseError from "../base/PromiseError.svelte";
   import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
+  import Select from "svelte-select";
   let data_loaded = false;
   let modal_open;
   let delete_station;
@@ -13,6 +14,7 @@
   $: original_data = {};
   $: editable = {};
   $: tracks = [];
+  $: track = {};
   $: changes_performed = !(
     JSON.stringify(original_data) === JSON.stringify(editable)
   );
@@ -24,14 +26,17 @@
     data.track = data.track.id;
     original_data = Object.assign(original_data, data);
     editable = Object.assign(editable, original_data);
-  });
-  TrackService.trackControllerGetAll().then((val) => {
-    tracks = val;
+    TrackService.trackControllerGetAll().then((val) => {
+      tracks = val.map((t) => {
+        return { label: t.name || `#{t.id}`, value: t };
+      });
+      track = tracks.find((t) => t.value.id == editable.track);
+    });
   });
   function submit() {
     if (data_loaded === true && save_enabled) {
       Toastify({
-        text: $_('station-is-being-updated'),
+        text: $_("station-is-being-updated"),
         duration: 2500,
       }).showToast();
       ScanStationService.scanStationControllerPut(original_data.id, editable)
@@ -39,7 +44,7 @@
           Object.assign(original_data, editable);
           original_data = original_data;
           Toastify({
-            text: $_('updated-station'),
+            text: $_("updated-station"),
             duration: 2500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -52,7 +57,7 @@
     ScanStationService.scanStationControllerRemove(original_data.id, false)
       .then((resp) => {
         Toastify({
-          text: $_('station-deleted'),
+          text: $_("station-deleted"),
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -82,7 +87,7 @@
                 width="24"
                 height="24"><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
+                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
             </li>
             <li class="flex items-center ml-2">
               <a class="mr-2" href="./">{$_('scanstation')}</a><svg
@@ -147,14 +152,22 @@
       <label
         for="track"
         class="block text-sm font-medium text-gray-700">Track</label>
-      <select
-        name="track"
-        bind:value={editable.track}
-        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 tracks as t}
-          <option value={t.id}>{t.name || t.distance}</option>
-        {/each}
-      </select>
+      <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) => label
+            .toLowerCase()
+            .includes(
+              filterText.toLowerCase()
+            ) || option.value.id
+            .toString()
+            .startsWith(filterText.toLowerCase())}
+        items={tracks}
+        showChevron={true}
+        placeholder="Search for a track (by name or id)."
+        noOptionsMessage="No track found"
+        bind:selectedValue={track}
+        on:select={(selectedValue) => (editable.track = selectedValue.detail.value.id)}
+        on:clear={() => (track = null)} />
     </div>
     <div class="text-sm w-full">
       <label
@@ -162,7 +175,7 @@
         class="font-medium text-gray-700">{$_('description')}</label>
       <input
         autocomplete="off"
-        placeholder="{$_('description')}"
+        placeholder={$_('description')}
         type="text"
         bind:value={editable.description}
         name="description"