finish device searching

src/lib/common/apiFunctions.svelte

@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
 	import { Device, PreAuthKey, Route, User } from '$lib/common/classes';
 	import { deviceStore, userStore, apiTestStore } from '$lib/common/stores.js';
-	import { filterUsers } from './commonFunctions.svelte';
+	import { filterDevices, filterUsers } from './searching.svelte';
 
 	export async function getUsers(): Promise<any> {
 		// variables in local storage
@@ -224,6 +224,8 @@
 		// set the stores
 		apiTestStore.set('succeeded');
 		deviceStore.set(headscaleDevices);
+		// filter the store
+		filterDevices();
 	}
 
 	export async function getDeviceRoutes(deviceID: string): Promise<Route> {

src/lib/common/commonFunctions.svelte

@@ -1,22 +0,0 @@
-<script context="module" lang="ts">
-	import { userFilterStore, userStore, userSearchStore } from './stores';
-	import { get } from 'svelte/store';
-	import Fuse from 'fuse.js';
-	import type { User } from './classes';
-
-	export function filterUsers() {
-    // only run if we have search contents set
-		if (get(userSearchStore)) {
-			let options: Fuse.IFuseOptions<User> = {
-				keys: ['id', 'name']
-			};
-			let searcher = new Fuse(get(userStore), options);
-
-      // search using the searchstore term, and take the resultant array contents and set it to userFilterStore
-			userFilterStore.set(searcher.search(get(userSearchStore)).map((a) => a.item));
-		} else {
-      // if we have no search parameters, just copy across the whole object
-      userFilterStore.set(get(userStore));
-    }
-	}
-</script>

src/lib/common/searching.svelte

@@ -0,0 +1,38 @@
+<script context="module" lang="ts">
+	import { userFilterStore, userStore, userSearchStore, deviceFilterStore, deviceSearchStore, deviceStore } from './stores';
+	import { get } from 'svelte/store';
+	import Fuse from 'fuse.js';
+	import type { Device, User } from './classes';
+
+	export function filterUsers() {
+    // only run if we have search contents set
+		if (get(userSearchStore)) {
+			let options: Fuse.IFuseOptions<User> = {
+				keys: ['id', 'name']
+			};
+			let searcher = new Fuse(get(userStore), options);
+
+      // search using the searchstore term, and take the resultant array contents and set it to userFilterStore
+			userFilterStore.set(searcher.search(get(userSearchStore)).map((a) => a.item));
+		} else {
+      // if we have no search parameters, just copy across the whole object
+      userFilterStore.set(get(userStore));
+    }
+	}
+
+  export function filterDevices() {
+    // only run if we have search contents set
+		if (get(deviceSearchStore)) {
+			let options: Fuse.IFuseOptions<Device> = {
+				keys: ['id', 'givenName', 'name', 'forcedTags', 'validTags', 'namespace.name']
+			};
+			let searcher = new Fuse(get(deviceStore), options);
+
+      // search using the searchstore term, and take the resultant array contents and set it to userFilterStore
+			deviceFilterStore.set(searcher.search(get(deviceSearchStore)).map((a) => a.item));
+		} else {
+      // if we have no search parameters, just copy across the whole object
+      deviceFilterStore.set(get(deviceStore));
+    }
+	}
+</script>

src/lib/common/stores.js

@@ -16,8 +16,10 @@ export const preAuthHideStore = writable(false);
 export const userStore = writable([new User()]);
 export const userFilterStore = writable([new User()]);
 export const deviceStore = writable([new Device()]);
+export const deviceFilterStore = writable([new Device()]);
 // stores search state
 export const userSearchStore = writable('');
+export const deviceSearchStore = writable('');
 // stores sorting preferences
 export const deviceSortStore = writable('id');
 export const deviceSortDirectionStore = writable('ascending');

src/lib/devices/SearchDevices.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { filterDevices } from '$lib/common/searching.svelte';
+	import { deviceSearchStore } from '$lib/common/stores';
+
+	export let overrideSort = false;
+
+	// called when search changes
+	deviceSearchStore.subscribe((value) => {
+		if (value != '') {
+			overrideSort = true;
+		} else {
+			overrideSort = false;
+		}
+		filterDevices();
+	});
+</script>
+
+<!-- search icon -->
+<div class="flex">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-3 mr-1 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+	</svg> <input type="text" placeholder="search" bind:value={$deviceSearchStore} class="input input-bordered input-xs w-full max-w-xs" />
+</div>

src/lib/users/SearchUsers.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { filterUsers } from '$lib/common/commonFunctions.svelte';
+	import { filterUsers } from '$lib/common/searching.svelte';
 	import { userSearchStore } from '$lib/common/stores';
 
 	export let overrideSort = false;

src/routes/devices.html.svelte

@@ -1,13 +1,14 @@
 <!-- typescript -->
 <script lang="ts">
-	import DeviceCard from '$lib/devices/DeviceCard.svelte';
+	import { base } from '$app/paths';
+	import { getDevices, getUsers } from '$lib/common/apiFunctions.svelte';
+	import { apiTestStore, deviceFilterStore, deviceStore } from '$lib/common/stores.js';
 	import CreateDevice from '$lib/devices/CreateDevice.svelte';
+	import DeviceCard from '$lib/devices/DeviceCard.svelte';
+	import SearchDevices from '$lib/devices/SearchDevices.svelte';
 	import SortDevices from '$lib/devices/SortDevices.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import { apiTestStore, deviceStore } from '$lib/common/stores.js';
-	import { getUsers, getDevices } from '$lib/common/apiFunctions.svelte';
-	import { base } from '$app/paths';
 
 	let newDeviceCardVisible = false;
 
@@ -49,13 +50,16 @@
 								<button on:click={() => (newDeviceCardVisible = false)} class="btn btn-secondary btn-xs capitalize" type="button">- Hide New Device</button>
 							{/if}
 						</div></td
-					><td><SortDevices /></td></tr
+					><td><SortDevices /></td><td><SearchDevices /></td></tr
 				>
 			</table>
 
 			<CreateDevice bind:newDeviceCardVisible />
+
 			{#each $deviceStore as device}
-				<DeviceCard {device} />
+				{#if $deviceFilterStore.includes(device)}
+					<DeviceCard {device} />
+				{/if}
 			{/each}
 		{/if}
 		{#if $apiTestStore === 'failed'}