From e1e3180a41814c8ffc5c29db246caecd597fa8ff Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Sat, 30 Jul 2022 12:14:00 +1000
Subject: [PATCH] added sort function

---
 src/lib/common/Stores.svelte                  |  4 +-
 src/lib/devices/DeviceCard/MoveDevice.svelte  |  4 +-
 .../devices/DeviceCard/RemoveDevice.svelte    |  4 +-
 src/lib/devices/SortDevices.svelte            | 56 ++++++++++++++++---
 4 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/lib/common/Stores.svelte b/src/lib/common/Stores.svelte
index ea120e5..b2ff9b4 100644
--- a/src/lib/common/Stores.svelte
+++ b/src/lib/common/Stores.svelte
@@ -13,8 +13,8 @@
 		// 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));
+		headscaleDeviceSortDirectionStore.set(localStorage.getItem('headscaleDeviceSortDirection') || 'ascending');
+		headscaleDeviceSortDirectionStore.subscribe((val) => localStorage.setItem('headscaleDeviceSortDirection', val));
 
 		// stores URL and API key
 		headscaleURLStore.set(localStorage.getItem('headscaleURL') || '');
diff --git a/src/lib/devices/DeviceCard/MoveDevice.svelte b/src/lib/devices/DeviceCard/MoveDevice.svelte
index 6edf8b5..73b3874 100644
--- a/src/lib/devices/DeviceCard/MoveDevice.svelte
+++ b/src/lib/devices/DeviceCard/MoveDevice.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { fade } from 'svelte/transition';
 	import { Device } from '$lib/common/classes';
-	import { headscaleUserStore, headscaleDeviceStore, alertStore } from '$lib/common/stores';
+	import { headscaleUserStore, headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore, alertStore } from '$lib/common/stores';
 	import { moveDevice, getDevices } from '$lib/common/apiFunctions.svelte';
 
 	export let device = new Device();
@@ -13,7 +13,7 @@
 			.then((response) => {
 				deviceMoving = false;
 				// refresh devices after editing
-				getDevices()
+				getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
 					.then((devices) => {
 						$headscaleDeviceStore = devices;
 					})
diff --git a/src/lib/devices/DeviceCard/RemoveDevice.svelte b/src/lib/devices/DeviceCard/RemoveDevice.svelte
index d032b01..470ad7d 100644
--- a/src/lib/devices/DeviceCard/RemoveDevice.svelte
+++ b/src/lib/devices/DeviceCard/RemoveDevice.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { getDevices, removeDevice } from '$lib/common/apiFunctions.svelte';
-	import { headscaleDeviceStore, alertStore } from '$lib/common/stores.js';
+	import { headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore, alertStore } from '$lib/common/stores.js';
 	import { Device } from '$lib/common/classes';
 
 	export let device = new Device();
@@ -12,7 +12,7 @@
 			.then((response) => {
 				cardDeleting = false;
 				// refresh Devices after editing
-				getDevices()
+				getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
 					.then((Devices) => {
 						$headscaleDeviceStore = Devices;
 					})
diff --git a/src/lib/devices/SortDevices.svelte b/src/lib/devices/SortDevices.svelte
index 9f1f309..bfe2a12 100644
--- a/src/lib/devices/SortDevices.svelte
+++ b/src/lib/devices/SortDevices.svelte
@@ -1,9 +1,49 @@
-<span class="btn-group">
-	<!-- adjust icon -->
-	<span><svg xmlns="http://www.w3.org/2000/svg" class="h-6 mx-1 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-		<path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-	</svg></span>
-	<button class="btn btn-xs btn-active">ID</button>
-	<button class="btn btn-xs capitalize">Device Name</button>
-	<button class="btn btn-xs capitalize">Last Seen</button>
+<script lang="ts">
+	import { getDevices } from '$lib/common/apiFunctions.svelte';
+
+	import { headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore, alertStore } from '$lib/common/stores';
+
+	function sortAction() {
+		console.log('hi');
+		if ($headscaleDeviceSortDirectionStore == 'ascending') {
+			$headscaleDeviceSortDirectionStore = 'descending';
+		} else {
+			$headscaleDeviceSortDirectionStore = 'ascending';
+		}
+		getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
+			.then((devices) => {
+				$headscaleDeviceStore = devices;
+			})
+			.catch((error) => {
+				$alertStore = error;
+			});
+	}
+</script>
+
+<span class="flex">
+	<button
+		on:click={() => {
+			sortAction();
+		}}
+		class="mx-1"
+	>
+		{#if $headscaleDeviceSortDirectionStore == 'ascending'}
+			<!-- ascending sort icon -->
+
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
+			</svg>
+		{:else}
+			<!-- descending sort icon -->
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" />
+			</svg>
+		{/if}
+	</button>
+
+	<span class="btn-group">
+		<button class="btn btn-xs btn-active">ID</button>
+		<button class="btn btn-xs capitalize">Device Name</button>
+		<button class="btn btn-xs capitalize">Last Seen</button>
+	</span>
 </span>