several button improvements

frontend/src/lib/components/DeviceCard.svelte

@@ -3,6 +3,8 @@
 	import DeviceCardNic from './DeviceCardNic.svelte';
 	import { scale } from 'svelte/transition';
 	import type { Device } from '$lib/types/device';
+	import Fa from 'svelte-fa';
+	import { faCircleArrowDown, faCircleArrowUp, faLock } from '@fortawesome/free-solid-svg-icons';
 
 	export let device: Device;
 
@@ -30,7 +32,28 @@
 			<!-- TODO: change to nic array once backend supports it -->
 			<DeviceCardNic {device} />
 		</ul>
-		<div class="card-actions">
+		<div class="flex flex-row flex-wrap gap-2">
+			{#if device.wake_cron_enabled}
+				<div class="tooltip" data-tip="Wake cron">
+					<span class="badge badge-success gap-1 p-3"
+						><Fa icon={faCircleArrowUp} />{device.wake_cron}</span
+					>
+				</div>
+			{/if}
+			{#if device.shutdown_cron_enabled}
+				<div class="tooltip" data-tip="Shutdown cron">
+					<span class="badge badge-error gap-1 p-3"
+						><Fa icon={faCircleArrowDown} />{device.shutdown_cron}</span
+					>
+				</div>
+			{/if}
+			{#if device.password}
+				<div class="tooltip" data-tip="Wake password">
+					<span class="badge gap-1 p-3"><Fa icon={faLock} />Password</span>
+				</div>
+			{/if}
+		</div>
+		<div class="card-actions mt-auto">
 			<span class="tooltip" data-tip="Last status change: {device.updated}">
 				{formatDistance(parseISO(device.updated), now, {
 					includeSeconds: true,

frontend/src/lib/components/DeviceCardNic.svelte

@@ -53,37 +53,42 @@
 	}
 </script>
 
-<li>
+<li
+	class:disabled={device.status === 'online' && device.shutdown_cmd === ''}
+	class:tooltip={device.status === 'online' && device.shutdown_cmd === ''}
+	data-tip={device.status === 'online' && device.shutdown_cmd === ''
+		? 'No shutdown command set'
+		: null}
+>
 	<div
 		class="flex items-start p-2 gap-4"
-		class:hover:bg-inherit={device.status === 'online' && device.shutdown_cmd === ''}
-		class:hover:cursor-default={device.status === 'online' && device.shutdown_cmd === ''}
-		on:click={handleClick}
-		on:keydown={handleClick}
+		on:click={device.status === 'online' && device.shutdown_cmd === '' ? null : handleClick}
+		on:keydown={device.status === 'online' && device.shutdown_cmd === '' ? null : handleClick}
 		role="none"
 	>
-		<div>
-			{#if device.status === 'offline'}
-				<button class="btn btn-error flex-shrink"><Fa icon={faPowerOff} /></button>
-			{:else if device.status === 'online'}
-				<button class="btn btn-success flex-shrink"><Fa icon={faPowerOff} /></button>
-			{:else if device.status === 'pending'}
-				<button class="btn btn-warning flex-shrink">
-					<span class="countdown font-mono">
-						<span style="--value:{minutes};" />:
-						<span style="--value:{seconds};" />
-					</span>
-				</button>
-			{:else}
-				<button class="btn btn-warning flex-shrink">
-					<span class="loading loading-ring loading-sm" />
-				</button>
-			{/if}
-		</div>
+		{#if device.status === 'offline'}
+			<button class="btn btn-error flex-shrink"><Fa icon={faPowerOff} /></button>
+		{:else if device.status === 'online'}
+			<button
+				class="btn btn-success flex-shrink"
+				class:cursor-not-allowed={device.shutdown_cmd === ''}><Fa icon={faPowerOff} /></button
+			>
+		{:else if device.status === 'pending'}
+			<button class="btn btn-warning flex-shrink">
+				<span class="countdown font-mono">
+					<span style="--value:{minutes};" />:
+					<span style="--value:{seconds};" />
+				</span>
+			</button>
+		{:else}
+			<button class="btn btn-warning flex-shrink">
+				<span class="loading loading-ring loading-sm" />
+			</button>
+		{/if}
 		<div class="grow">
 			<div class="text-lg font-bold leading-4">{device.ip}</div>
-			<div class="">{device.mac}</div>
-			<div class="flex flex-wrap gap-4">
+			<div>{device.mac}</div>
+			<div class="flex flex-wrap gap-x-4 gap-y-0">
 				{#if device?.expand?.ports}
 					{#each device?.expand?.ports as port}
 						<span class="flex items-center gap-1 break-all">
@@ -101,3 +106,9 @@
 		</div>
 	</div>
 </li>
+
+<style>
+	li.disabled {
+		color: inherit;
+	}
+</style>

frontend/src/lib/components/DeviceForm.svelte

@@ -259,7 +259,12 @@
 			<div class="form-control flex flex-row flex-wrap gap-4">
 				<div>
 					<label class="label" for="wake-cron">
-						<span class="label-text">Wake cron</span>
+						<span class="label-text"
+							>Wake cron
+							{#if device.wake_cron_enabled}
+								<span class="text-error">*</span>
+							{/if}
+						</span>
 					</label>
 					<input
 						id="wake-cron"
@@ -268,6 +273,7 @@
 						class="input w-80"
 						bind:value={device.wake_cron}
 						disabled={!device.wake_cron_enabled}
+						required={device.wake_cron_enabled}
 					/>
 				</div>
 				<div class="flex flex-col">
@@ -327,7 +333,12 @@
 			<div class="form-control flex flex-row flex-wrap gap-4">
 				<div>
 					<label class="label" for="shutdown-cron">
-						<span class="label-text">Shutdown cron</span>
+						<span class="label-text"
+							>Shutdown cron
+							{#if device.shutdown_cron_enabled}
+								<span class="text-error">*</span>
+							{/if}
+						</span>
 					</label>
 					<input
 						id="shutdown-cron"
@@ -336,6 +347,7 @@
 						class="input w-80"
 						bind:value={device.shutdown_cron}
 						disabled={!device.shutdown_cron_enabled}
+						required={device.shutdown_cron_enabled}
 					/>
 				</div>
 				<div class="flex flex-col">

frontend/src/lib/components/DeviceFormPort.svelte

@@ -32,7 +32,7 @@
 </script>
 
 {#if device.expand.ports[index]}
-	<div class="card bg-base-100 shadow-xl" transition:scale={{ delay: 0, duration: 200 }}>
+	<div class="card bg-base-100 shadow-sm" transition:scale={{ delay: 0, duration: 200 }}>
 		<div class="card-body p-3">
 			<div class="flex flex-row gap-2">
 				<div>

frontend/src/lib/components/Navbar.svelte

@@ -185,7 +185,7 @@
 	</div>
 	<div class="justify-end ms-auto">
 		{#if $pocketbase.authStore?.model !== null}
-			<a class="btn btn-sm btn-success me-4" href="/device/new">
+			<a class="btn btn-success me-4" href="/device/new">
 				<Fa icon={faPlus} />
 				New
 			</a>

frontend/src/lib/components/NetworkScan.svelte

@@ -8,7 +8,8 @@
 	import {
 		faMagnifyingGlass,
 		faPlus,
-		faTriangleExclamation
+		faTriangleExclamation,
+		faX
 	} from '@fortawesome/free-solid-svg-icons';
 	import type { SettingsPrivate } from '$lib/types/settings';
 	import type { ScanResponse, ScannedDevice } from '$lib/types/scan';
@@ -17,6 +18,7 @@
 	let saveErrTimeout: number;
 	let scanErrMsg = '';
 	let scanErrTimeout: number;
+	let scanRange = '';
 	let scanRunning = false;
 	let scanResponse: ScanResponse = {
 		netmask: '',
@@ -31,14 +33,22 @@
 				.getList(1, 1)
 				.then((res) => {
 					settingsPriv.set(res.items[0] as SettingsPrivate);
+					scanRange = $settingsPriv.scan_range;
 				});
+		} else {
+			scanRange = $settingsPriv.scan_range;
 		}
 	});
 
 	function saveSettings() {
 		$pocketbase
 			.collection('settings_private')
-			.update($settingsPriv.id, $settingsPriv)
+			.update($settingsPriv.id, {
+				scan_range: scanRange
+			})
+			.then((res) => {
+				settingsPriv.set(res as SettingsPrivate);
+			})
 			.catch((err) => {
 				clearTimeout(saveErrTimeout);
 				saveErrTimeout = setTimeout(() => {
@@ -126,14 +136,22 @@
 							class="input input-bordered join-item"
 							type="text"
 							placeholder="192.168.1.0/24"
-							bind:value={$settingsPriv.scan_range}
+							bind:value={scanRange}
 						/>
 						<button class="btn join-item" on:click={() => saveSettings()}>Save</button>
 					</div>
 				</div>
 				<div>
 					<div>
-						{#if scanRunning}
+						{#if !$settingsPriv.scan_range}
+							<button class="btn btn-error" disabled>
+								<Fa icon={faX} /> No scan range
+							</button>
+						{:else if scanRange !== $settingsPriv.scan_range}
+							<button class="btn btn-error" disabled>
+								<Fa icon={faX} /> Unsaved changes
+							</button>
+						{:else if scanRunning}
 							<button class="btn no-animation">
 								<span class="loading loading-spinner" />
 								Scan running

frontend/src/routes/device/new/+page.svelte

@@ -26,7 +26,7 @@
 
 <h1 class="text-3xl font-bold mb-8">New device</h1>
 <div class="flex justify-center mb-6">
-	<ul class="menu menu-horizontal bg-base-300 rounded-box">
+	<ul class="menu menu-horizontal bg-base-300 rounded-box gap-1">
 		{#each tabs as tab}
 			<li>
 				<button