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

fix device route for new API

Browse source
This commit is contained in:
Chris Bisset 2025-05-22 04:07:22 +00:00
parent 38e0de2696
commit adef58f27d
5 changed files with 85 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/lib/common/classes.ts
View file

@ -7,6 +7,9 @@ export class Device {
public forcedTags: string[] = [];
public validTags: string[] = [];
public invalidTags: string[] = [];
public approvedRoutes: string[] = [];
public availableRoutes: string[] = [];
public subnetRoutes: string[] = [];
public user: { name: string } = { name: '' };
public online?: boolean;

58
src/lib/devices/DeviceCard/DeviceRoutes.svelte
View file

@ -1,67 +1,21 @@
<script lang="ts">
import { getDeviceRoutes, modifyDeviceRoutes } from './DeviceRoutesAPI.svelte';
import { Device, Route } from '$lib/common/classes';
import { onMount } from 'svelte';
import { modifyDeviceRoutes } from './DeviceRoutes/DeviceRouteAPI.svelte';
import { Device } from '$lib/common/classes';
import DeviceRoute from './DeviceRoutes/DeviceRoute.svelte';
import { getDevices } from '$lib/common/apiFunctions.svelte';
import { alertStore } from '$lib/common/stores';
export let device = new Device();
let routesList: Route[] = [];
let routeID = 0;
onMount(async () => {
getDeviceRoutesAction();
});
function getDeviceRoutesAction() {
getDeviceRoutes(device.id)
.then((routes) => {
routesList = routes;
})
.catch((error) => {
$alertStore = error;
});
}
function modifyDeviceRoutesAction() {
modifyDeviceRoutes(device.id, routesList, routeID)
.then((response) => {
getDeviceRoutesAction();
})
.catch((error) => {
$alertStore = error;
});
}
</script>
<th>Device Routes</th>
<td
><ul class="list-disc list-inside">
{#each routesList as route, index}
{#each device.availableRoutes as route}
<li>
{route.prefix}
{#if route.enabled}
<button
on:click={() => {
routesList[index].enabled = false;
routeID = route.id;
modifyDeviceRoutesAction();
}}
type="button"
class="btn btn-xs tooltip capitalize bg-success text-success-content mx-1"
data-tip="press to disable route">active</button
>
{:else}
<button
on:click={() => {
routesList[index].enabled = true;
routeID = route.id
modifyDeviceRoutesAction();
}}
type="button"
class="btn btn-xs tooltip capitalize bg-secondary text-secondary-content mx-1"
data-tip="press to enable route">pending</button
>
{/if}
<DeviceRoute {route} {device}></DeviceRoute>
</li>
{/each}
</ul></td

41
src/lib/devices/DeviceCard/DeviceRoutes/DeviceRoute.svelte Normal file
View file

@ -0,0 +1,41 @@
<script>
import { getDevices } from '$lib/common/apiFunctions.svelte';
import { Device } from '$lib/common/classes';
import { alertStore } from '$lib/common/stores';
import { approveDeviceRoute } from './DeviceRouteAPI.svelte';
export let route = ""
export let device = new Device();
let routeDisabled = false;
function approveRouteAction() {
approveDeviceRoute(device.id, [route])
.then(() => {
// refresh users after editing
getDevices();
})
.catch((error) => {
$alertStore = error;
});
}
</script>
{route}
{#if device.approvedRoutes.includes(route)}
<button type="button" class="btn btn-xs tooltip capitalize bg-success text-success-content mx-1">active</button>
{:else}
<button
on:click={() => {
routeDisabled = true;
approveRouteAction();
routeDisabled = false;
}}
type="button"
class="btn btn-xs tooltip capitalize bg-secondary text-secondary-content mx-1" class:disabled={routeDisabled}
data-tip="click to enable route">pending</button
>
{/if}
{#if device.subnetRoutes.includes(route)}
<button type="button" class="btn btn-xs tooltip capitalize bg-secondary text-secondary-content mx-1">subnet</button>
{/if}

35
src/lib/devices/DeviceCard/DeviceRoutes/DeviceRouteAPI.svelte Normal file
View file

@ -0,0 +1,35 @@
<script context="module" lang="ts">
import type { Route } from '$lib/common/classes';
export async function approveDeviceRoute(deviceID: string, routes: [string]): Promise<any> {
// variables in local storage
let headscaleURL = localStorage.getItem('headscaleURL') || '';
let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
let endpointURL = `/api/v1/node/${deviceID}/approve_routes`;
await fetch(headscaleURL + endpointURL, {
method: 'POST',
headers: {
Accept: 'application/json',
Authorization: `Bearer ${headscaleAPIKey}`
},
body: JSON.stringify({
routes: routes
})
})
.then((response) => {
if (response.ok) {
// return the api data
return response;
} else {
return response.text().then((text) => {
throw JSON.parse(text).message;
});
}
})
.catch((error) => {
throw error;
});
}
</script>

84
src/lib/devices/DeviceCard/DeviceRoutesAPI.svelte
View file

@ -1,84 +0,0 @@
<script context="module" lang="ts">
import type { Route } from '$lib/common/classes';
export async function getDeviceRoutes(deviceID: string): Promise<Route[]> {
// variables in local storage
let headscaleURL = localStorage.getItem('headscaleURL') || '';
let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
// endpoint url for getting users
let endpointURL = `/api/v1/node/${deviceID}/routes`;
//returning variables
let headscaleRouteList: Route[] = [];
let headscaleDeviceResponse: Response = new Response();
await fetch(headscaleURL + endpointURL, {
method: 'GET',
headers: {
Accept: 'application/json',
Authorization: `Bearer ${headscaleAPIKey}`
}
})
.then((response) => {
if (response.ok) {
// return the api data
headscaleDeviceResponse = response;
} else {
return response.text().then((text) => {
throw JSON.parse(text).message;
});
}
})
.catch((error) => {
throw error;
});
await headscaleDeviceResponse.json().then((data) => {
headscaleRouteList = data.routes;
});
return headscaleRouteList;
}
export async function modifyDeviceRoutes(deviceID: string, routeList: Route[], routeID: number): Promise<any> {
// variables in local storage
let headscaleURL = localStorage.getItem('headscaleURL') || '';
let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
let endpointURL = '';
routeList.forEach((route) => {
if (route.id == routeID) {
endpointURL = `/api/v1/routes/${routeID}/`;
if (route.enabled) {
endpointURL += 'enable';
} else {
endpointURL += 'disable';
}
}
});
//returning variables
let headscaleDeviceResponse: Response = new Response();
await fetch(headscaleURL + endpointURL, {
method: 'POST',
headers: {
Accept: 'application/json',
Authorization: `Bearer ${headscaleAPIKey}`
}
})
.then((response) => {
if (response.ok) {
// return the api data
headscaleDeviceResponse = response;
} else {
return response.text().then((text) => {
throw JSON.parse(text).message;
});
}
})
.catch((error) => {
throw error;
});
}
</script>