enable routing functionality

src/lib/common/apiFunctions.svelte

@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-	import { Device, PreAuthKey, User } from '$lib/common/classes';
+	import { Device, PreAuthKey, Route, User } from '$lib/common/classes';
 
 	export async function getUsers(): Promise<any> {
 		// variables in local storage
@@ -169,6 +169,78 @@
 		return headscaleDevices;
 	}
 
+	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/machine/' + deviceID + '/routes';
+
+		//returning variables
+		let headscaleRoute = new 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) => {
+			headscaleRoute = data.routes;
+		});
+		return headscaleRoute;
+	}
+
+	export async function enableDeviceRoute(deviceID: string, route: string): Promise<any> {
+		// variables in local storage
+		let headscaleURL = localStorage.getItem('headscaleURL') || '';
+		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
+
+		// endpoint url for getting users
+		let endpointURL = '/api/v1/machine/' + deviceID + '/routes?routes=' + route.replace('/','%2F');
+
+		//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;
+			});
+	}
+
 	export async function getPreauthKeys(userName: string): Promise<PreAuthKey[]> {
 		// variables in local storage
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';

src/lib/common/classes.ts

@@ -10,6 +10,15 @@ export class Device {
   }
 }
 
+export class Route {
+  advertisedRoutes: string[] = [''];
+  enabledRoutes: string[] = [''];
+
+  public constructor(init?: Partial<Route>) {
+    Object.assign(this, init);
+  }
+}
+
 export class PreAuthKey {
   public namespace: string = '';
   public id: string = '';

src/lib/devices/DeviceCard.svelte

@@ -61,7 +61,7 @@
 							<MoveDevice {device} />
 						</tr>
 						<tr>
-							<DeviceRoutes />
+							<DeviceRoutes {device} />
 						</tr>
 					</tbody>
 				</table>

src/lib/devices/DeviceCard/DeviceRoutes.svelte

@@ -1,2 +1,49 @@
+<script lang="ts">
+	import { getDeviceRoutes, enableDeviceRoute } from '$lib/common/apiFunctions.svelte';
+	import { Device, Route } from '$lib/common/classes';
+	import { onMount } from 'svelte';
+	import { alertStore } from '$lib/common/stores';
+
+	export let device = new Device();
+	let routesList = new Route();
+
+	onMount(async () => {
+		getDeviceRoutesAction();
+	});
+
+	function getDeviceRoutesAction() {
+		getDeviceRoutes(device.id)
+			.then((routes) => {
+				routesList = routes;
+			})
+			.catch((error) => {
+				$alertStore = error;
+			});
+	}
+
+  function enableDeviceRouteAction(route: string) {
+    enableDeviceRoute(device.id, route)
+			.then((response) => {
+				getDeviceRoutesAction();
+			})
+			.catch((error) => {
+				$alertStore = error;
+			});
+  }
+</script>
+
 <th>Device Routes</th>
-<td>blah</td>
+<td
+	><ul class="list-disc list-inside">
+		{#each routesList.advertisedRoutes as route}
+			<li>
+				{route}
+				{#if routesList.enabledRoutes.includes(route)}
+					<div class="btn btn-xs capitalize bg-success text-success-content mx-1">active</div>
+				{:else}
+					<button on:click={() => {enableDeviceRouteAction(route)}} type="button" class="btn btn-xs tooltip capitalize bg-secondary text-secondary-content mx-1" data-tip="press to enable route">pending</button>
+				{/if}
+			</li>
+		{/each}
+	</ul></td
+>