added device view to navigation

src/lib/common/nav.svelte

@@ -45,6 +45,12 @@
 			</svg>
 			<span class="indent-4">User View</span>
 		</a>
+		<a href="/devices.html" class="nav-item">
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+			</svg>
+			<span class="indent-4">Device View</span>
+		</a>
 		<a href="/settings.html" class="nav-item">
 			<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path

src/lib/devices/DeviceCard.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { fade, slide } from 'svelte/transition';
+	export let device = { id: '', name: '', lastSeen: '', ipAddresses: [''] };
+	let cardExpanded = false;
+</script>
+
+<div in:fade class="grid grid-cols-1 divide-y p-2 max-w-screen-lg border-2 mx-4 border-gray-100 rounded-md text-sm text-gray-600 shadow">
+	<div on:click={() => (cardExpanded = !cardExpanded)} class="flex justify-between">
+		<span class="font-bold">{device.id}: {device.name}</span>
+		{#if !cardExpanded}
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+			</svg>
+		{:else}
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
+			</svg>
+		{/if}
+	</div>
+	{#if cardExpanded}
+		<div transition:slide class="pt-2 pl-2">
+			<p><span class="font-bold">Device Last Seen: </span><span class="font-normal">{new Date(device.lastSeen)}</span></p>
+			<p><span class="font-bold">IP Addresses: </span><span class="font-normal">{device.ipAddresses}</span></p>
+		</div>
+	{/if}
+</div>

src/routes/devices.html.svelte

@@ -0,0 +1,71 @@
+<!-- typescript -->
+<script lang="ts">
+	import DeviceCard from '$lib/devices/DeviceCard.svelte';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+
+	//
+	// Component Variables
+	//
+
+	// let's the page know if it's ready to load
+	let componentLoaded = false;
+
+	// page state variables
+	let headscaleAPITest = 'untested';
+
+	// endpoint url for getting users
+	let endpointURL = '/api/v1/machine';
+
+	let headscaleDevices = [{ id: '', name: '', lastSeen: '', ipAddresses: [''] }];
+
+	// We define the meat of our script in onMount as doing so forces client side rendering.
+	// Doing so also does not perform any actions until components are initialized
+	onMount(async () => {
+		// attempt to pull list of users
+		let headscaleURL = localStorage.getItem('headscaleURL') || '';
+		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
+		fetch(headscaleURL + endpointURL, {
+			method: 'GET',
+			headers: {
+				Accept: 'application/json',
+				Authorization: `Bearer ${headscaleAPIKey}`
+			}
+		})
+			.then((response) => {
+				if (response.ok) {
+					headscaleAPITest = 'succeeded';
+					// return the api data
+					response.json().then((data) => {
+						headscaleDevices = data.machines;
+					});
+				} else {
+					headscaleAPITest = 'failed';
+				}
+			})
+			.catch((error) => {
+				headscaleAPITest = 'failed';
+			});
+
+		// load the page
+		componentLoaded = true;
+	});
+</script>
+
+<!-- html -->
+{#if componentLoaded}
+	<div in:fade class="px-4 py-4">
+		<h1 class="text-2xl bold green-400 mb-4">Device View</h1>
+	</div>
+	{#if headscaleAPITest === 'succeeded'}
+		<!-- instantiate device based components -->
+		{#each headscaleDevices as device}
+			<DeviceCard device={device} />
+		{/each}
+	{/if}
+	{#if headscaleAPITest === 'failed'}
+		<div in:fade class="max-w-lg  mx-auto p-4 border-4 text-sm text-gray-600 shadow-lg text-center">
+			<p>API test did not succeed.<br />Headscale might be down or API settings may need to be set<br />change server settings in the <a href="/settings.html" class="hyperlink">settings</a> page</p>
+		</div>
+	{/if}
+{/if}