From a6617a892e2adf6b83ee310dcbb77fcffcd82acc Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Sat, 30 Jul 2022 11:51:47 +1000
Subject: [PATCH] added stores for sort type and direction

---
 src/lib/common/Stores.svelte                  | 22 ++++++++++++-------
 src/lib/common/apiFunctions.svelte            | 10 ++++++---
 src/lib/common/commonFunctions.svelte         |  3 +++
 src/lib/common/stores.js                      |  5 ++++-
 src/lib/devices/CreateDevice.svelte           |  4 ++--
 .../devices/DeviceCard/RenameDevice.svelte    |  4 ++--
 src/routes/devices.html.svelte                |  4 ++--
 7 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/common/commonFunctions.svelte

diff --git a/src/lib/common/Stores.svelte b/src/lib/common/Stores.svelte
index d6ab38e..ea120e5 100644
--- a/src/lib/common/Stores.svelte
+++ b/src/lib/common/Stores.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import { headscaleThemeStore } from '$lib/common/stores.js';
+	import { headscaleDeviceSortStore, headscaleDeviceSortDirectionStore, headscaleThemeStore } from '$lib/common/stores.js';
 	import { headscaleURLStore } from '$lib/common/stores.js';
 	import { headscaleAPIKeyStore } from '$lib/common/stores.js';
 	import { preAuthHideStore } from '$lib/common/stores.js';
@@ -8,17 +8,23 @@
 	onMount(async () => {
 		// stores headscale theme
 		headscaleThemeStore.set(localStorage.getItem('headscaleTheme') || 'hsui');
+		headscaleThemeStore.subscribe((val) => localStorage.setItem('headscaleTheme', val));
+
+		// stores device sort preferences
+		headscaleDeviceSortStore.set(localStorage.getItem('headscaleDeviceSort') || 'id');
+		headscaleDeviceSortStore.subscribe((val) => localStorage.setItem('headscaleDeviceSort', val));
+		headscaleDeviceSortStore.set(localStorage.getItem('headscaleDeviceSortDirection') || 'ascending');
+		headscaleDeviceSortStore.subscribe((val) => localStorage.setItem('headscaleDeviceSortDirection', val));
 
 		// stores URL and API key
 		headscaleURLStore.set(localStorage.getItem('headscaleURL') || '');
-		headscaleAPIKeyStore.set(localStorage.getItem('headscaleAPIKey') || '');
-
-		preAuthHideStore.set((localStorage.getItem('headscalePreAuthHide') || 'false') == 'true');
-
-		// subscribe to store's state and update the local storage where needed
-		headscaleThemeStore.subscribe((val) => localStorage.setItem('headscaleTheme', val));
-		preAuthHideStore.subscribe((val) => localStorage.setItem('headscalePreAuthHide', val ? 'true' : 'false'));
 		headscaleURLStore.subscribe((val) => localStorage.setItem('headscaleURL', val));
+		headscaleAPIKeyStore.set(localStorage.getItem('headscaleAPIKey') || '');
 		headscaleAPIKeyStore.subscribe((val) => localStorage.setItem('headscaleAPIKey', val));
+
+		// stores whether preauthkeys get hidden when expired/used
+		preAuthHideStore.set((localStorage.getItem('headscalePreAuthHide') || 'false') == 'true');
+		preAuthHideStore.subscribe((val) => localStorage.setItem('headscalePreAuthHide', val ? 'true' : 'false'));
+		
 	});
 </script>
diff --git a/src/lib/common/apiFunctions.svelte b/src/lib/common/apiFunctions.svelte
index 9ff0d56..c0e83fe 100644
--- a/src/lib/common/apiFunctions.svelte
+++ b/src/lib/common/apiFunctions.svelte
@@ -163,7 +163,7 @@
 			});
 	}
 
-	export async function getDevices(): Promise<any> {
+	export async function getDevices(sortKey: string, sortDirection: string): Promise<any> {
 		// variables in local storage
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';
 		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
@@ -172,7 +172,7 @@
 		let endpointURL = '/api/v1/machine';
 
 		//returning variables
-		let headscaleDevices = new Device();
+		let headscaleDevices = [new Device()];
 		let headscaleDeviceResponse: Response = new Response();
 
 		await fetch(headscaleURL + endpointURL, {
@@ -197,7 +197,11 @@
 			});
 
 		await headscaleDeviceResponse.json().then((data) => {
-			headscaleDevices = data.machines;
+			if(sortDirection == 'ascending') {
+				headscaleDevices = data.machines.sort((a: Device, b: Device) => (a[sortKey as keyof Device] < b[sortKey as keyof Device]) ? -1 : 1);
+			} else {
+				headscaleDevices = data.machines.sort((a: Device, b: Device) => (a[sortKey as keyof Device] > b[sortKey as keyof Device]) ? -1 : 1);
+			}
 		});
 		return headscaleDevices;
 	}
diff --git a/src/lib/common/commonFunctions.svelte b/src/lib/common/commonFunctions.svelte
new file mode 100644
index 0000000..7b4684d
--- /dev/null
+++ b/src/lib/common/commonFunctions.svelte
@@ -0,0 +1,3 @@
+<script context="module" lang="ts">
+  
+</script>
\ No newline at end of file
diff --git a/src/lib/common/stores.js b/src/lib/common/stores.js
index f4976e8..1e6c328 100644
--- a/src/lib/common/stores.js
+++ b/src/lib/common/stores.js
@@ -14,4 +14,7 @@ export const headscaleAPIKeyStore = writable('');
 export const preAuthHideStore = writable(false);
 // stores user and device data
 export const headscaleUserStore = writable([new User()]);
-export const headscaleDeviceStore = writable([new Device()]);
\ No newline at end of file
+export const headscaleDeviceStore = writable([new Device()]);
+// stores sorting preferences
+export const headscaleDeviceSortStore = writable('id');
+export const headscaleDeviceSortDirectionStore = writable('ascending');
\ No newline at end of file
diff --git a/src/lib/devices/CreateDevice.svelte b/src/lib/devices/CreateDevice.svelte
index cabdca2..a48786d 100644
--- a/src/lib/devices/CreateDevice.svelte
+++ b/src/lib/devices/CreateDevice.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import { headscaleUserStore, headscaleDeviceStore } from '$lib/common/stores';
+	import { headscaleUserStore, headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore } from '$lib/common/stores';
 	import { getDevices, newDevice } from '$lib/common/apiFunctions.svelte';
 	import { alertStore } from '$lib/common/stores.js';
 	import { base } from '$app/paths';
@@ -21,7 +21,7 @@
 					newDeviceCardVisible = false;
 					newDeviceKey = '';
 					// refresh devices after editing
-					getDevices()
+					getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
 						.then((devices) => {
 							$headscaleDeviceStore = devices;
 						})
diff --git a/src/lib/devices/DeviceCard/RenameDevice.svelte b/src/lib/devices/DeviceCard/RenameDevice.svelte
index 327f7ce..a049799 100644
--- a/src/lib/devices/DeviceCard/RenameDevice.svelte
+++ b/src/lib/devices/DeviceCard/RenameDevice.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fade, slide } from 'svelte/transition';
 	import { getDevices, renameDevice } from '$lib/common/apiFunctions.svelte';
-	import { headscaleDeviceStore, alertStore } from '$lib/common/stores.js';
+	import { headscaleDeviceStore, alertStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore } from '$lib/common/stores.js';
 	import { Device } from '$lib/common/classes';
 
 	let editUserForm: HTMLFormElement;
@@ -20,7 +20,7 @@
 				.then((response) => {
 					cardEditing = false;
 					// refresh users after editing
-					getDevices()
+					getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
 						.then((devices) => {
 							$headscaleDeviceStore = devices;
 						})
diff --git a/src/routes/devices.html.svelte b/src/routes/devices.html.svelte
index 223db18..80aace7 100644
--- a/src/routes/devices.html.svelte
+++ b/src/routes/devices.html.svelte
@@ -5,7 +5,7 @@
 	import SortDevices from '$lib/devices/SortDevices.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import { apiTestStore, headscaleUserStore, headscaleDeviceStore } from '$lib/common/stores.js';
+	import { apiTestStore, headscaleUserStore, headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore } from '$lib/common/stores.js';
 	import { getUsers, getDevices } from '$lib/common/apiFunctions.svelte';
 	import { base } from '$app/paths';
 
@@ -31,7 +31,7 @@
 				$apiTestStore = 'failed';
 			});
 		// attempt to pull list of devices
-		getDevices()
+		getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
 			.then((devices) => {
 				$headscaleDeviceStore = devices;
 				$apiTestStore = 'succeeded';