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

refactor getDevices to reduce code repetition

Browse source
This commit is contained in:
Christopher Bisset 2022-07-30 12:45:20 +10:00
parent e1e3180a41
commit f7ea6d236e
9 changed files with 24 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
<script context="module" lang="ts">
import { Device, PreAuthKey, Route, User } from '$lib/common/classes';
import { headscaleDeviceStore, alertStore, apiTestStore } from '$lib/common/stores.js'
export async function getUsers(): Promise<any> {
// variables in local storage
@ -101,7 +102,6 @@
});
}
export async function removeUser(currentUsername: string): Promise<any> {
// variables in local storage
let headscaleURL = localStorage.getItem('headscaleURL') || '';
@ -163,10 +163,12 @@
});
}
export async function getDevices(sortKey: string, sortDirection: string): Promise<any> {
export async function getDevices() {
// variables in local storage
let headscaleURL = localStorage.getItem('headscaleURL') || '';
let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
let sortKey = localStorage.getItem('headscaleDeviceSort');
let sortDirection = localStorage.getItem('headscaleDeviceSortDirection');
// endpoint url for getting users
let endpointURL = '/api/v1/machine';
@ -193,17 +195,17 @@
}
})
.catch((error) => {
throw error;
apiTestStore.set(error);
});
await headscaleDeviceResponse.json().then((data) => {
if(sortDirection == 'ascending') {
headscaleDevices = data.machines.sort((a: Device, b: Device) => (a[sortKey as keyof Device] < b[sortKey as keyof Device]) ? -1 : 1);
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);
headscaleDevices = data.machines.sort((a: Device, b: Device) => (a[sortKey as keyof Device] > b[sortKey as keyof Device] ? -1 : 1));
}
});
return headscaleDevices;
headscaleDeviceStore.set(headscaleDevices)
}
export async function getDeviceRoutes(deviceID: string): Promise<Route> {
@ -251,7 +253,7 @@
let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
// endpoint url for getting users
let endpointURL = '/api/v1/machine/' + deviceID + '/routes?routes=' + route.replace('/','%2F');
let endpointURL = '/api/v1/machine/' + deviceID + '/routes?routes=' + route.replace('/', '%2F');
//returning variables
let headscaleDeviceResponse: Response = new Response();
@ -412,9 +414,7 @@
});
}
export async function moveDevice(deviceID: string, user: string): Promise<any> {
// variables in local storage
let headscaleURL = localStorage.getItem('headscaleURL') || '';
let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
@ -444,7 +444,6 @@
}
export async function renameDevice(deviceID: string, name: string): Promise<any> {
// variables in local storage
let headscaleURL = localStorage.getItem('headscaleURL') || '';
let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
@ -473,7 +472,6 @@
});
}
export async function removeDevice(deviceID: string): Promise<any> {
// variables in local storage
let headscaleURL = localStorage.getItem('headscaleURL') || '';

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

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

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

@ -1,6 +1,6 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { headscaleUserStore, headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore } from '$lib/common/stores';
import { headscaleUserStore, headscaleDeviceStore } 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,13 +21,7 @@
newDeviceCardVisible = false;
newDeviceKey = '';
// refresh devices after editing
getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
.then((devices) => {
$headscaleDeviceStore = devices;
})
.catch((error) => {
$alertStore = error;
});
getDevices();
})
.catch((error) => {
$alertStore = error;
@ -52,7 +46,7 @@
<div in:fade class="m-2">
<p>Install Tailscale with the client pointing to your domain (see <a target="_blank" class="link link-primary" href="https://github.com/juanfont/headscale/tree/main/docs">headscale client documentation</a>). Log in using the tray icon, and your browser should give you instructions with a key.</p>
<div class="m-2"><code>headscale -n NAMESPACE nodes register --key &lt;your device key&gt;</code></div>
<div class = "my-2"><p>Copy the key below:</p></div>
<div class="my-2"><p>Copy the key below:</p></div>
<form class="flex flex-wrap" bind:this={newDeviceForm} on:submit|preventDefault={newDeviceAction}>
<div class="flex-none mr-4">
<label class="block text-secondary text-sm font-bold mb-2" for="text">Device Key</label>

8
src/lib/devices/DeviceCard/DeviceTags.svelte
View file

@ -12,13 +12,7 @@
updateTags(device.id, tagList).then((response) => {
// refresh devices after editing
getDevices()
.then((devices) => {
$headscaleDeviceStore = devices;
})
.catch((error) => {
$alertStore = error;
});
getDevices();
})
.catch((error) => {
$alertStore = error;

10
src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
View file

@ -2,7 +2,7 @@
import { updateTags, getDevices } from '$lib/common/apiFunctions.svelte';
import { Device } from '$lib/common/classes';
import { fade } from 'svelte/transition';
import { headscaleDeviceStore, alertStore } from '$lib/common/stores.js';
import { headscaleDeviceStore, alertStore} from '$lib/common/stores.js';
let editingTag = false;
let newTag = '';
@ -19,13 +19,7 @@
editingTag = false;
newTag = '';
// refresh devices after editing
getDevices()
.then((devices) => {
$headscaleDeviceStore = devices;
})
.catch((error) => {
$alertStore = error;
});
getDevices();
})
.catch((error) => {
$alertStore = error;

10
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, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore, alertStore } from '$lib/common/stores';
import { headscaleUserStore, headscaleDeviceStore, alertStore } from '$lib/common/stores';
import { moveDevice, getDevices } from '$lib/common/apiFunctions.svelte';
export let device = new Device();
@ -13,13 +13,7 @@
.then((response) => {
deviceMoving = false;
// refresh devices after editing
getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
.then((devices) => {
$headscaleDeviceStore = devices;
})
.catch((error) => {
$alertStore = error;
});
getDevices();
})
.catch((error) => {
$alertStore = error;

10
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, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore, alertStore } from '$lib/common/stores.js';
import { headscaleDeviceStore, alertStore } from '$lib/common/stores.js';
import { Device } from '$lib/common/classes';
export let device = new Device();
@ -12,13 +12,7 @@
.then((response) => {
cardDeleting = false;
// refresh Devices after editing
getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
.then((Devices) => {
$headscaleDeviceStore = Devices;
})
.catch((error) => {
$alertStore = error;
});
getDevices();
})
.catch((error) => {
$alertStore = error;

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

@ -1,22 +1,14 @@
<script lang="ts">
import { getDevices } from '$lib/common/apiFunctions.svelte';
import { headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore, alertStore } from '$lib/common/stores';
import { headscaleDeviceStore, 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;
});
getDevices();
}
</script>

11
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, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore } from '$lib/common/stores.js';
import { apiTestStore, headscaleUserStore, headscaleDeviceStore } from '$lib/common/stores.js';
import { getUsers, getDevices } from '$lib/common/apiFunctions.svelte';
import { base } from '$app/paths';
@ -31,14 +31,7 @@
$apiTestStore = 'failed';
});
// attempt to pull list of devices
getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
.then((devices) => {
$headscaleDeviceStore = devices;
$apiTestStore = 'succeeded';
})
.catch(() => {
$apiTestStore = 'failed';
});
getDevices();
// load the page
componentLoaded = true;
});