Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-07-18 00:46:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added stores for sort type and direction

Browse source
This commit is contained in:
Christopher Bisset 2022-07-30 11:51:47 +10:00
parent 7bfb35c011
commit a6617a892e
7 changed files with 34 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/lib/common/Stores.svelte
View file

@ -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>

10
src/lib/common/apiFunctions.svelte
View file

@ -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;
}

3
src/lib/common/commonFunctions.svelte Normal file
View file

@ -0,0 +1,3 @@
<script context="module" lang="ts">
</script>

5
src/lib/common/stores.js
View file

@ -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()]);
export const headscaleDeviceStore = writable([new Device()]);
// stores sorting preferences
export const headscaleDeviceSortStore = writable('id');
export const headscaleDeviceSortDirectionStore = writable('ascending');

4
src/lib/devices/CreateDevice.svelte
View file

@ -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;
})

4
src/lib/devices/DeviceCard/RenameDevice.svelte
View file

@ -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;
})

4
src/routes/devices.html.svelte
View file

@ -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';