various small changes

frontend/src/lib/components/DeviceCard.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">
-	import { formatDistanceToNow, parseISO } from 'date-fns';
+	import { formatDistance, parseISO } from 'date-fns';
 	import DeviceCardNic from './DeviceCardNic.svelte';
 	import { scale } from 'svelte/transition';
 	import type { Device } from '$lib/types/device';
 
 	export let device: Device;
+
+	// update device status change
+	let now = Date.now();
+	let interval: number;
+	$: {
+		clearInterval(interval);
+		interval = setInterval(() => {
+			now = Date.now();
+		}, 1000);
+	}
 </script>
 
 <div class="card bg-base-300 shadow-md rounded-3xl" transition:scale={{ delay: 0, duration: 200 }}>
@@ -22,7 +32,7 @@
 		</ul>
 		<div class="card-actions">
 			<span class="tooltip" data-tip="Last status change: {device.updated}">
-				{formatDistanceToNow(parseISO(device.updated), {
+				{formatDistance(parseISO(device.updated), now, {
 					includeSeconds: true,
 					addSuffix: true
 				})}

frontend/src/lib/components/DeviceForm.svelte

@@ -207,7 +207,7 @@
 			<div class="form-control w-full">
 				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
 					{#each device.expand.ports as _, index}
-						<DeviceFormPort bind:deviceClone={device} {index} bind:portErrMsg bind:portErrTimeout />
+						<DeviceFormPort bind:device {index} bind:portErrMsg bind:portErrTimeout />
 					{/each}
 				</div>
 				{#if portErrMsg !== ''}

frontend/src/lib/components/DeviceFormPort.svelte

@@ -6,7 +6,7 @@
 	import type { Device, Port } from '$lib/types/device';
 	import type { Record } from 'pocketbase';
 
-	export let deviceClone: Device;
+	export let device: Device;
 	export let index: number;
 	export let portErrMsg: string;
 	export let portErrTimeout: number;
@@ -17,7 +17,7 @@
 				.collection('ports')
 				.delete(port.id)
 				.then(() => {
-					deviceClone.ports = deviceClone.ports.filter((id) => id !== deviceClone.ports[index]);
+					device.ports = device.ports.filter((id) => id !== device.ports[index]);
 				})
 				.catch((err) => {
 					clearTimeout(portErrTimeout);
@@ -27,13 +27,11 @@
 					portErrMsg = err;
 				});
 		}
-		deviceClone.expand.ports = deviceClone.expand.ports.filter(
-			(p) => p !== deviceClone.expand.ports[index]
-		);
+		device.expand.ports = device.expand.ports.filter((p) => p !== device.expand.ports[index]);
 	}
 </script>
 
-{#if deviceClone.expand.ports[index]}
+{#if device.expand.ports[index]}
 	<div class="card bg-base-100 shadow-xl" transition:scale={{ delay: 0, duration: 200 }}>
 		<div class="card-body p-3">
 			<div class="flex flex-row gap-2">
@@ -46,7 +44,7 @@
 						type="text"
 						placeholder="ssh"
 						class="input input-sm input-bordered w-full"
-						bind:value={deviceClone.expand.ports[index].name}
+						bind:value={device.expand.ports[index].name}
 					/>
 				</div>
 				<div>
@@ -60,14 +58,14 @@
 						min="1"
 						max="65535"
 						class="input input-sm input-bordered w-full"
-						bind:value={deviceClone.expand.ports[index].number}
+						bind:value={device.expand.ports[index].number}
 					/>
 				</div>
 			</div>
 			<div class="card-actions justify-end">
 				<button
 					class="btn btn-xs btn-outline btn-error"
-					on:click={() => deletePort(deviceClone.expand.ports[index])}
+					on:click={() => deletePort(device.expand.ports[index])}
 					type="button"><Fa icon={faTrash} />Delete</button
 				>
 			</div>

frontend/src/routes/device/[id]/+page.svelte

@@ -6,7 +6,7 @@
 	import DeviceForm from '$lib/components/DeviceForm.svelte';
 	import type { Device, Port } from '$lib/types/device';
 
-	async function getDevice() {
+	async function getDevice(): Promise<Device> {
 		const resp = await $pocketbase
 			.collection('devices')
 			.getOne($page.params.id, { expand: 'ports,groups' });