Bumped pnpm to 8

close #168

.dockerignore

@@ -1 +1,2 @@
-public/env.sample.js
+public/env.sample.js
+.pnpm-store

.drone.yml

@@ -19,6 +19,13 @@ get:
   path: odit-git-bot
   name: sshkey
 
+---
+kind: secret
+name: npm_url
+get:
+  path: odit-npm-cache
+  name: url
+
 ---
 kind: pipeline
 type: kubernetes
@@ -29,8 +36,12 @@ steps:
     depends_on: ["clone"]
     image: registry.odit.services/hub/library/node:19.7.0-alpine3.16
     commands:
-      - yarn
-      - yarn licenses:export
+      - npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8
+      - pnpm i
+      - pnpm licenses:export
+    environment:
+      NPM_REGISTRY_URL:
+        from_secret: npm_url
   - name: push new licenses file to repo
     depends_on: ["run full license export"]
     image: appleboy/drone-git-push
@@ -51,10 +62,8 @@ steps:
       password:
         from_secret: docker_password
       build_args:
-        - NPM_REGISTRY_DOMAIN:
-          from_secret: npmjs_domain
-        - NPM_REGISTRY_TOKEN:
-          from_secret: npmjs_token
+        - NPM_REGISTRY_URL:
+          from_secret: npm_url
       repo: lfk/frontend
       tags:
         - dev
@@ -80,10 +89,8 @@ steps:
       password:
         from_secret: docker_password
       build_args:
-        - NPM_REGISTRY_DOMAIN:
-          from_secret: npmjs_domain
-        - NPM_REGISTRY_TOKEN:
-          from_secret: npmjs_token
+        - NPM_REGISTRY_URL:
+          from_secret: npm_url
       repo: lfk/frontend
       tags:
         - "${DRONE_TAG}"

.gitignore

@@ -2,4 +2,5 @@ node_modules
 *.map
 public/env.js
 public/index.html
-/dist
+/dist
+.pnpm-store

CHANGELOG.md

@@ -2,8 +2,56 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.17.3](https://git.odit.services/lfk/frontend/compare/0.17.2...0.17.3)
+
+- dependency fixes [`3ea7a01`](https://git.odit.services/lfk/frontend/commit/3ea7a015a9beba3c2e4d3eb966f24ff6d4ac786e)
+- set pnpm to @7 [`4432941`](https://git.odit.services/lfk/frontend/commit/44329413ed2ca23f74e86db041b2c25b2b1c2a2b)
+
+#### [0.17.2](https://git.odit.services/lfk/frontend/compare/0.17.1...0.17.2)
+
+> 15 March 2023
+
+- new license file version [CI SKIP] [`00359d2`](https://git.odit.services/lfk/frontend/commit/00359d25c1bd3efdd6365bf284b3c07634049399)
+- 🚀RELEASE v0.17.2 [`46db68a`](https://git.odit.services/lfk/frontend/commit/46db68ab229dc740dfff8835ef916f2c2e629b27)
+- improved ThFilterGroup style [`f917018`](https://git.odit.services/lfk/frontend/commit/f917018fd92a8a5b034f735ac8b6e41995044317)
+
+#### [0.17.1](https://git.odit.services/lfk/frontend/compare/0.17.0...0.17.1)
+
+> 15 March 2023
+
+- Revert "package dependency fixes, bumps, lockfile update" [`d8a3063`](https://git.odit.services/lfk/frontend/commit/d8a30637351e164599e07a6473d9a1d2b08d245d)
+- 🚀RELEASE v0.17.1 [`7b420c4`](https://git.odit.services/lfk/frontend/commit/7b420c430d27bf0fc85a4297780164a593fc1be3)
+
+#### [0.17.0](https://git.odit.services/lfk/frontend/compare/0.16.5...0.17.0)
+
+> 15 March 2023
+
+- new license file version [CI SKIP] [`61328d2`](https://git.odit.services/lfk/frontend/commit/61328d20ed2cfd1df7d3c32767f9c64154879d6d)
+- wip: pnpm + node version [`732b2f0`](https://git.odit.services/lfk/frontend/commit/732b2f061e465bd08cf34c58d8cd6b021ba25dce)
+- package dependency fixes, bumps, lockfile update [`2c73b98`](https://git.odit.services/lfk/frontend/commit/2c73b9862d401dac15021eed3f7847d46132a8ed)
+- Fixed runners not showing up [`75bc89c`](https://git.odit.services/lfk/frontend/commit/75bc89ca3020c48f490c7602374616bd9461e78f)
+- add ThFilterRunner [`3a3e2f7`](https://git.odit.services/lfk/frontend/commit/3a3e2f71575d3a0e39a5e13b05cff932b8683ac9)
+- fix styling for table filters th border [`bea57aa`](https://git.odit.services/lfk/frontend/commit/bea57aa03acaaaa4b1860b30228dd5d1298317f8)
+- You can now create cards from runners by searching via #runnerid [`e8a0ad6`](https://git.odit.services/lfk/frontend/commit/e8a0ad6647ab39252865f62b755f27c34ac2d243)
+- remodelled for early return [`b869b5f`](https://git.odit.services/lfk/frontend/commit/b869b5fd2a01955fb21f936fa38eb5a9648e7de3)
+- 🚀RELEASE v0.17.0 [`6491af1`](https://git.odit.services/lfk/frontend/commit/6491af19e375cbeba7ddd94e463b4dfe308a70a8)
+- Wow this api is fun [`32a9074`](https://git.odit.services/lfk/frontend/commit/32a9074963cce3328f14b1f981ddd5ee49df0008)
+- Fixed double space in label [`92b89cc`](https://git.odit.services/lfk/frontend/commit/92b89cc4d88c9d5625c2ddf7c81c98494f7f5271)
+- UsersOverview: drop pfp [`30991d5`](https://git.odit.services/lfk/frontend/commit/30991d5364a09d517b2115a7e9ea3fbf1fe2e57d)
+- Switched license generation to cache registry and pnpm [`0a6d92a`](https://git.odit.services/lfk/frontend/commit/0a6d92a1f3c5562f11562c433b3a04e3eaae3da4)
+- Pinned pnpm in dockerfile, thx @philipp [`3a576d1`](https://git.odit.services/lfk/frontend/commit/3a576d1073ee503b68100e01054a1756bab62805)
+- Pinned ci node version [`b30b98b`](https://git.odit.services/lfk/frontend/commit/b30b98b521eda2bc7fc055097546f716e90d92ef)
+- Fixed pnpm being called without being installed [`43d82a2`](https://git.odit.services/lfk/frontend/commit/43d82a2af04af49c2169f78a0d0f27ef7e4d7558)
+- Merge pull request 'bugfix/162-create_card_modal' (#163) from bugfix/162-create_card_modal into dev [`6a4495b`](https://git.odit.services/lfk/frontend/commit/6a4495b8131a31cd48a608c2275e80494d0a0fb4)
+- Removed unused log [`268b1b1`](https://git.odit.services/lfk/frontend/commit/268b1b1d9830de196d1d95345d7a2467bbf19eb6)
+- Merge pull request 'filter by runner full names + "#<ID>"' (#160) from feature/159-cardsoverview-filter-for-runner-full-names-and-id into dev [`0625937`](https://git.odit.services/lfk/frontend/commit/0625937068f0786078ffd29b9c8bb54949350b6c)
+- UsersOverview: change profilepic scaling [`5cc8b08`](https://git.odit.services/lfk/frontend/commit/5cc8b0811cf290f97a4399b23c5ea4d961a5a91c)
+
 #### [0.16.5](https://git.odit.services/lfk/frontend/compare/0.16.4...0.16.5)
 
+> 14 March 2023
+
+- 🚀RELEASE v0.16.5 [`3680533`](https://git.odit.services/lfk/frontend/commit/3680533eefef042fc77246dd3d374aafe10c428f)
 - new license file version [CI SKIP] [`405dfa0`](https://git.odit.services/lfk/frontend/commit/405dfa0c34ba87fc450c22e0e9974f92c4cdeffe)
 
 #### [0.16.4](https://git.odit.services/lfk/frontend/compare/0.16.3...0.16.4)
@@ -1281,7 +1329,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - init [`32357ec`](https://git.odit.services/lfk/frontend/commit/32357ece0a7195ea1135c9c3e4c6c84323f95b4d)
 - tmp [`1b7173c`](https://git.odit.services/lfk/frontend/commit/1b7173cda9134ee8058a00bdc030defa80d46bfc)
 - Login - move to env.js import [`8ef0b21`](https://git.odit.services/lfk/frontend/commit/8ef0b21819309752c573d0485f6514152fb684e6)
--  initial commit [`4bb3bae`](https://git.odit.services/lfk/frontend/commit/4bb3bae4e6fc89c35a8a2b36b7cd6e6d47958eae)
+- initial commit [`4bb3bae`](https://git.odit.services/lfk/frontend/commit/4bb3bae4e6fc89c35a8a2b36b7cd6e6d47958eae)
 - Initial license export [`4c96b9a`](https://git.odit.services/lfk/frontend/commit/4c96b9a3e04dbb7c021c71aa8828a29248509fbe)
 - 🚚 move to tinro svelte router [`a50ea15`](https://git.odit.services/lfk/frontend/commit/a50ea15b38023b867a9f7757e973184cbcdd2457)
 - new Dashboard [`7270ce9`](https://git.odit.services/lfk/frontend/commit/7270ce9d32869abd4f6ac65ab7c2c87363633cbe)

Dockerfile

@@ -1,11 +1,14 @@
 FROM registry.odit.services/hub/library/node:19.7.0-alpine3.16 as build
+ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
-COPY package.json ./
-RUN npx pnpm@7.5.1 i
-COPY package.json pnpm-lock.yaml *.config.js postcss.config.cjs tailwind.config.js vite.config.js index.html ./
+
+COPY package.json pnpm-lock.yaml *.config.js *.config.cjs index.html ./
+RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8 && pnpm i
+
 COPY src ./src
 COPY public ./public
-RUN npm run build
+RUN pnpm build
+
 # final image
 FROM registry.odit.services/library/nginx-brotli:3.15 as final
 COPY --from=build /app/dist /usr/share/nginx/html

index.html

@@ -13,7 +13,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.16.5-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.17.3-RELEASE_INFO</span>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <script src="/env.js"></script>
   <script type="module" src="/src/main.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.16.5",
+	"version": "0.17.3",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "vite",
@@ -10,17 +10,16 @@
 	},
 	"license": "CC-BY-NC-SA-4.0",
 	"devDependencies": {
-		"@odit/lfk-client-js": "0.13.3",
-		"@odit/license-exporter": "0.0.12",
 		"@sveltejs/vite-plugin-svelte": "1.0.0-next.6",
+		"@odit/license-exporter": "0.0.12",
 		"@types/html-minifier": "4.0.2",
 		"auto-changelog": "2.4.0",
 		"autoprefixer": "10.4.14",
 		"html-minifier": "4.0.0",
 		"postcss": "8.4.21",
-		"release-it": "15.8.0",
-		"svelte": "3.56.0",
+		"release-it": "14.6.1",
 		"svelte-preprocess": "4.7.0",
+		"svelte-select": "3.17.0",
 		"tailwindcss": "3.2.7",
 		"vite": "2.1.5"
 	},
@@ -42,22 +41,23 @@
 		}
 	},
 	"dependencies": {
-		"@paralleldrive/cuid2": "^2.2.0",
-		"localforage": "1.10.0",
 		"tinro": "0.6.12",
 		"toastify-js": "1.12.0",
-		"svelte-focus-trap": "1.2.0",
-		"svelte-i18n": "3.6.0",
-		"svelte-select": "3.17.0",
-		"xlsx": "0.18.5",
 		"validator": "13.9.0",
-		"marked": "2.0.3",
-		"check-password-strength": "2.0.2",
+		"xlsx": "0.16.9",
+		"@odit/lfk-client-js": "0.14.0",
+		"@vincjo/datatables": "^1.4.0",
+		"check-password-strength": "2.0.7",
 		"csvtojson": "2.0.10",
 		"gridjs": "3.4.0",
-		"@vincjo/datatables": "^1.4.0"
+		"localforage": "1.10.0",
+		"marked": "2.0.3",
+		"svelte": "3.37.0",
+		"svelte-focus-trap": "1.2.0",
+		"svelte-i18n": "3.3.9",
+		"@paralleldrive/cuid2": "^2.2.0"
 	},
 	"volta": {
 		"node": "19.7.0"
 	}
-}
+}

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/runners/ThFilterGroup.svelte

@@ -5,7 +5,7 @@
   let selected = "all";
 </script>
 
-<th>
+<th style="border-bottom: 1px solid #ddd;">
   <select
     on:input={() => {
       setTimeout(() => {

src/components/scans/ScansOverview.svelte

@@ -1,125 +1,147 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import {
-    ScanService,
-  } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
+  import { ScanService, TrackService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
   import ScansEmptyState from "./ScansEmptyState.svelte";
-  $: searchvalue = "";
+  import ThFilterRunner from "./ThFilterRunner.svelte";
+  import ThFilterTrack from "./ThFilterTrack.svelte";
   $: active_deletes = [];
   export let current_scans = [];
+  const handler = new DataHandler(current_scans, { rowsPerPage: 20 });
+  const rows = handler.getRows();
   const scans_promise = ScanService.scanControllerGetAll().then((val) => {
     current_scans = val;
+    handler.setRows(val);
   });
-  function should_display_based_on_id(id) {
-    if (searchvalue.toString().slice(-1) === "*") {
-      return id.toString().startsWith(searchvalue.replace("*", ""));
+  $: allTracks = [];
+  TrackService.trackControllerGetAll().then((val) => {
+    allTracks = val;
+  });
+  function format_laptime(laptime) {
+    if (laptime == 0 || laptime == null) {
+      return $_("first-scan-of-the-day");
     }
-    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)}`
+    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')}
+{#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>
+      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?.lastname
-                  .toLowerCase()
-                  .includes(
-                    searchvalue.toLowerCase()
-                  ) || should_display_based_on_id(scan.id)}
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+      >
+        <Datatable {handler}>
+          <table class="divide-y divide-gray-200 w-full">
+            <thead class="bg-gray-50">
+              <tr>
+                <Th {handler} orderBy="id">ID</Th>
+                <Th {handler}>
+                  {$_("runner")}
+                </Th>
+                <Th {handler}>
+                  {$_("distance")}
+                </Th>
+                <Th {handler}>
+                  {$_("track")}
+                </Th>
+                <Th {handler}>
+                  {$_("laptime")}
+                </Th>
+                <Th {handler}>
+                  {$_("status")}
+                </Th>
+                <th
+                  scope="col"
+                  class="relative px-6 py-3"
+                  style="border-bottom: 1px solid #ddd;"
+                >
+                  {$_("action")}
+                </th>
+              </tr>
+              <tr>
+                <ThFilter {handler} filterBy="id" />
+                <ThFilterRunner {handler} />
+                <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;" />
+                <!-- TODO: filter status -->
+                <th style="border-bottom: 1px solid #ddd;" />
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200">
+              {#each $rows as scan}
                 <tr data-rowid="scan_{scan.id}">
+                  <td class="px-6 py-4 whitespace-nowrap text-left">
+                    <div class="text-sm font-medium text-gray-900">
+                      {scan.id}
+                    </div>
+                  </td>
                   <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>
+                        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">
+                  <td class="px-6 py-4 whitespace-nowrap text-left">
                     <div class="text-sm font-medium text-gray-900">
                       {#if scan.distance < 1000}
                         {scan.distance}m
                       {:else}{scan.distance / 1000}km{/if}
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-left">
+                    <div class="text-sm font-medium text-gray-900">
                       {#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}
+                          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">
+                  <td class="px-6 py-4 whitespace-nowrap text-left">
                     {#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')}
+                        {$_("scan-with-fixed-distance")}
                       </div>
                     {/if}
                   </td>
@@ -127,23 +149,30 @@
                     <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>
+                          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>
+                          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">
+                      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>
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                        >{$_("cancel-delete")}</button
+                      >
                       <button
                         on:click={() => {
                           ScanService.scanControllerRemove(scan.id, false).then(
@@ -152,44 +181,51 @@
                                 (obj) => obj.id !== scan.id
                               );
                               Toastify({
-                                text: 'Scan deleted',
+                                text: "Scan deleted",
                                 duration: 500,
                                 backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
+                                  "linear-gradient(to right, #00b09b, #96c93d)",
                               }).showToast();
                             }
                           );
                         }}
                         tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                        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">
+                      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')}
+                        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>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                          >{$_("delete")}</button
+                        >
                       {/if}
                     </td>
                   {/if}
                 </tr>
-              {/if}
-            {/each}
-          </tbody>
-        </table>
+              {/each}
+            </tbody>
+          </table>
+        </Datatable>
       </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>
+        <b class="capitalize">{$_("general_promise_error")}</b>
         {error}
       </span>
     </div>

src/components/scans/ThFilterRunner.svelte

@@ -0,0 +1,50 @@
+<script>
+  export let handler;
+  let filterValue = "";
+</script>
+
+<th>
+  <input
+    on:input={() => {
+      setTimeout(() => {
+        const v = filterValue.toLowerCase();
+        handler.filter(v, (c) => {
+          if (v.startsWith("#")) {
+            return `#${c.runner?.id}`;
+          }
+          if (c.runner) {
+            let runnerName = `${c.runner.firstname} ${c.runner.lastname}`;
+            if (c.runner.middlename) {
+              runnerName = `${c.runner.firstname} ${c.runner.middlename} ${c.runner.lastname}`;
+            }
+            runnerName = runnerName.toLowerCase();
+            return runnerName;
+          }
+          return "";
+        });
+      }, 150);
+    }}
+    placeholder="Filter"
+    bind:value={filterValue}
+    type="text"
+    name="runnerfilter"
+    id="runnerfilter"
+  />
+</th>
+
+<style>
+  th {
+    border-bottom: 1px solid #e0e0e0;
+  }
+  input {
+    margin: -1px 0 0 0;
+    padding: 0;
+    width: 100%;
+    height: 24px;
+    border: none;
+    text-align: left;
+    background: inherit;
+    outline: 0;
+    font-size: 14px;
+  }
+</style>

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>