feat: update info message for ip field in form

HuakunShen · Jan 26, 2025 · 5938701 · 5938701
1 parent 7c04e19
commit 5938701
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 5 deletions.
diff --git a/apps/server/main.go b/apps/server/main.go
@@ -69,7 +69,7 @@ func main() {
 			if !ok {
 				return e.JSON(400, map[string]string{"message": "Failed to parse port"})
 			}
-                        targetIp:= requestedHost.GetString("ip")
+			targetIp := requestedHost.GetString("ip")
 			err = wol.WakeOnLan(mac, targetIp, strconv.Itoa(port))
 			if err != nil {
 				return e.JSON(400, map[string]string{"message": "Failed to wake host", "error": err.Error()})

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -23,7 +23,7 @@
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/bun": "^1.1.14",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^1.0.0-next.74",
+		"bits-ui": "^1.0.0-next.78",
 		"clsx": "^2.1.1",
 		"formsnap": "^2.0.0",
 		"lucide-svelte": "^0.469.0",

diff --git a/apps/web/src/lib/components/CreateHostForm.svelte b/apps/web/src/lib/components/CreateHostForm.svelte
@@ -10,6 +10,9 @@
 	import { pb } from '$lib/pb';
 	import { dev } from '$app/environment';
 	import { hostsStore } from '$lib/stores/hosts';
+	import * as Popover from '$lib/components/ui/popover/index';
+	import { Button } from './ui/button';
+	import { Icon, InfoIcon } from 'lucide-svelte';
 
 	const formSchema = z.object({
 		name: z.string().min(1, 'Name is required'),
@@ -70,8 +73,32 @@
 		<Form.Control>
 			{#snippet children({ props })}
 				<div class="flex flex-col gap-2">
-					<Form.Label>IP</Form.Label>
-					<Input {...props} name="ip" bind:value={$formData.ip} placeholder="e.g. 192.168.1.1" />
+					<Form.Label>Broadcast IP</Form.Label>
+					<div class="flex space-x-1">
+						<Input
+							{...props}
+							name="ip"
+							bind:value={$formData.ip}
+							placeholder="e.g. 255.255.255.255"
+						/>
+
+						<Popover.Root>
+							<Popover.Trigger>
+								<Button variant="secondary" size="icon"><InfoIcon /></Button>
+							</Popover.Trigger>
+							<Popover.Content>
+								<p>Use a broadcast IP address. Default should be <code>255.255.255.255</code></p>
+								<p>
+									If your computer is connected to multiple networks, then use a more specific
+									subnet broadcast ip
+								</p>
+								<p>
+									If the target host's ip is <code>192.168.1.123</code>, then use
+									<code>192.168.1.255</code>
+								</p>
+							</Popover.Content>
+						</Popover.Root>
+					</div>
 				</div>
 			{/snippet}
 		</Form.Control>

diff --git a/apps/web/src/lib/components/HostCard.svelte b/apps/web/src/lib/components/HostCard.svelte
@@ -24,7 +24,7 @@
 				Name: <span class="font-mono font-medium">{host.name}</span>
 			</p>
 			<p class="text-md font-bold">
-				IP Address: <span class="font-mono font-medium">{host.ip}</span>
+				Broadcast IP: <span class="font-mono font-medium">{host.ip}</span>
 			</p>
 			<p class="text-md font-bold">
 				Mac Address: <span class="font-mono font-medium">{host.mac}</span>

diff --git a/bun.lockb b/bun.lockb