fix device route for new API

Author: routerino

src/lib/common/classes.ts

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

src/lib/devices/DeviceCard/DeviceRoutes.svelte

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

src/lib/devices/DeviceCard/DeviceRoutes/DeviceRoute.svelte

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

src/lib/devices/DeviceCard/DeviceRoutes/DeviceRouteAPI.svelte

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