feat: added basic overview table

Thymis-io · Jan 16, 2024 · cf24c45 · cf24c45
1 parent 8ad185f
commit cf24c45
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 11 deletions.
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -1,2 +1,40 @@
 <script lang="ts">
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	$: devices = data.devices;
 </script>
+
+<div class="border rounded-lg p-4 pb-2 bg-surface-100">
+	<table class="table-auto w-full text-left">
+		<thead>
+			<tr class="">
+				<th class="border-b border-slate-100 p-2">Name</th>
+				<th class="border-b border-slate-100 p-2">Hostname</th>
+				<th class="border-b border-slate-100 p-2">Tags</th>
+				<th class="border-b border-slate-100 p-2">Actions</th>
+				<th class="border-b border-slate-100 p-2">Status</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each devices as device}
+				<tr>
+					<td class="border-t border-slate-200 p-2">{device.displayName}</td>
+					<td class="border-t border-slate-200 p-2">{device.hostname}</td>
+					<td class="border-t border-slate-200 p-2">
+						{#each device.tags as tag, i}
+							<a class="underline" href="/config?tag={tag}">{tag}</a
+							>{#if i < device.tags.length - 1}{', '}{/if}
+						{/each}
+					</td>
+					<td class="border-t border-slate-200 p-2">
+						<a class="btn variant-filled" href="/config?device={device.hostname}">Edit</a>
+						<a class="btn variant-filled">Download Image</a>
+					</td>
+					<td class="border-t border-slate-200 p-2">Online</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
diff --git a/frontend/src/routes/config/+page.ts b/frontend/src/routes/config/+page.ts
@@ -2,17 +2,17 @@ import type { PageLoad } from './$types';
 
 type SettingTypes =
 	| {
-			type: 'bool';
-			value: boolean;
-	  }
+		type: 'bool';
+		value: boolean;
+	}
 	| {
-			type: 'string';
-			value: string;
-	  }
+		type: 'string';
+		value: string;
+	}
 	| {
-			type: 'path';
-			value: string;
-	  };
+		type: 'path';
+		value: string;
+	};
 
 type Setting = SettingTypes & {
 	name: string;
@@ -30,14 +30,14 @@ type State = {
 };
 
 export const load = (async ({ fetch }) => {
-	const stateResponse = await fetch('http://0.0.0.0:8000/state', {
+	const stateResponse = await fetch('http://localhost:8000/state', {
 		method: 'GET',
 		headers: {
 			'content-type': 'application/json'
 		}
 	});
 	const state = (await stateResponse.json()) as State;
-	const availableModulesResponse = await fetch('http://0.0.0.0:8000/available_modules', {
+	const availableModulesResponse = await fetch('http://localhost:8000/available_modules', {
 		method: 'GET',
 		headers: {
 			'content-type': 'application/json'