ScansOverview: add ThFilterTrack

src/components/cards/ThFilterRunner.svelte

@@ -49,7 +49,7 @@
     width: 100%;
     height: 24px;
     border: none;
-    text-align: center;
+    text-align: left;
     background: inherit;
     outline: 0;
     font-size: 14px;

src/components/cards/ThFilterStatus.svelte

@@ -37,7 +37,7 @@
     width: 100%;
     height: 24px;
     border: none;
-    text-align: center;
+    text-align: left;
     background: inherit;
     outline: 0;
     font-size: 14px;

src/components/scans/ScansOverview.svelte

@@ -1,11 +1,12 @@
 <script>
   import { _ } from "svelte-i18n";
   import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
-  import { ScanService } from "@odit/lfk-client-js";
+  import { ScanService, TrackService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
   import ScansEmptyState from "./ScansEmptyState.svelte";
   import ThFilterRunner from "./ThFilterRunner.svelte";
+  import ThFilterTrack from "./ThFilterTrack.svelte";
   $: active_deletes = [];
   export let current_scans = [];
   const handler = new DataHandler(current_scans, { rowsPerPage: 20 });
@@ -14,6 +15,10 @@
     current_scans = val;
     handler.setRows(val);
   });
+  $: allTracks = [];
+  TrackService.trackControllerGetAll().then((val) => {
+    allTracks = val;
+  });
   function format_laptime(laptime) {
     if (laptime == 0 || laptime == null) {
       return $_("first-scan-of-the-day");
@@ -84,7 +89,8 @@
                 <ThFilter {handler} filterBy="id" />
                 <ThFilterRunner {handler} />
                 <th style="border-bottom: 1px solid #ddd;" />
-                <th style="border-bottom: 1px solid #ddd;" />
+                <ThFilterTrack tracks={allTracks} {handler} />
+                <!-- <th style="border-bottom: 1px solid #ddd;" /> -->
                 <th style="border-bottom: 1px solid #ddd;" />
                 <th style="border-bottom: 1px solid #ddd;" />
                 <th style="border-bottom: 1px solid #ddd;" />

src/components/scans/ThFilterTrack.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let tracks;
+  export let handler;
+  let selected = "all";
+</script>
+
+<th style="border-bottom: 1px solid #ddd;">
+  <select
+    on:input={() => {
+      setTimeout(() => {
+        if (`${selected}`.trim()) {
+          const value = selected;
+          handler.filter(value, (scan) => {
+            // TODO: fix filter
+            if (scan.track.id === value || value === "all") return scan.track.id;
+            return "";
+          });
+        }
+      }, 50);
+    }}
+    bind:value={selected}
+    name="trackfilter"
+    id="trackfilter"
+  >
+    <option value="all">{$_("all")}</option>
+    {#each tracks as track}
+      <option value={track.id}>{track.name}</option>
+    {/each}
+  </select>
+</th>