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 sort function

Browse source
This commit is contained in:
Christopher Bisset 2022-07-30 12:14:00 +10:00
parent a6617a892e
commit e1e3180a41
4 changed files with 54 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

56
src/lib/devices/SortDevices.svelte
View file

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