From 008835c24f833aebbecc53921b0901a76f25bf06 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 19 Mar 2023 12:38:09 +0100
Subject: [PATCH] ScansOverview: add ThFilterTrack

---
 src/components/scans/ScansOverview.svelte | 10 ++++++--
 src/components/scans/ThFilterTrack.svelte | 31 +++++++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/components/scans/ThFilterTrack.svelte

diff --git a/src/components/scans/ScansOverview.svelte b/src/components/scans/ScansOverview.svelte
index dd0880d6..03cd4045 100644
--- a/src/components/scans/ScansOverview.svelte
+++ b/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;" />
diff --git a/src/components/scans/ThFilterTrack.svelte b/src/components/scans/ThFilterTrack.svelte
new file mode 100644
index 00000000..c86c133c
--- /dev/null
+++ b/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>