feat: add custom clickable links to ports #374 #222

backend/migrations/1703234320_updated_ports.go

@@ -0,0 +1,52 @@
+package migrations
+
+import (
+	"encoding/json"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/models/schema"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("cti4l8f4mz8df3r")
+		if err != nil {
+			return err
+		}
+
+		// add
+		new_link := &schema.SchemaField{}
+		json.Unmarshal([]byte(`{
+			"system": false,
+			"id": "i3uvw7ij",
+			"name": "link",
+			"type": "url",
+			"required": false,
+			"presentable": false,
+			"unique": false,
+			"options": {
+				"exceptDomains": null,
+				"onlyDomains": null
+			}
+		}`), new_link)
+		collection.Schema.AddField(new_link)
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("cti4l8f4mz8df3r")
+		if err != nil {
+			return err
+		}
+
+		// remove
+		collection.Schema.RemoveField("i3uvw7ij")
+
+		return dao.SaveCollection(collection)
+	})
+}

frontend/src/lib/components/DeviceCardNic.svelte

@@ -132,15 +132,23 @@
 		<div class="grow">
 			<div class="text-lg font-bold leading-4">{device.ip}</div>
 			<div>{device.mac}</div>
-			<div class="flex flex-wrap gap-x-4 gap-y-0">
+			<div class="flex flex-wrap gap-x-4">
 				{#if device?.expand?.ports}
 					{#each device?.expand?.ports.sort((a, b) => a.number - b.number) as port}
 						<span class="flex items-center gap-1 break-all">
 							{#if port.status}
 								<Fa icon={faCircle} class="text-success" />
-								{port.name} ({port.number})
 							{:else}
 								<Fa icon={faCircle} class="text-error" />
+							{/if}
+							{#if port.link}
+								<a
+									href={port.link}
+									target="_blank"
+									class="underline"
+									on:click={(e) => e.stopPropagation()}>{port.name} ({port.number})</a
+								>
+							{:else}
 								{port.name} ({port.number})
 							{/if}
 						</span>

frontend/src/lib/components/DeviceFormPort.svelte

@@ -60,6 +60,18 @@
 					/>
 				</div>
 			</div>
+			<div>
+				<label class="label p-0" for="port-link-{index}">
+					<span class="label-text">{$LL.device.link()}</span>
+				</label>
+				<input
+					id="port-link-{index}"
+					type="url"
+					placeholder="https:// ..."
+					class="input input-sm input-bordered w-full"
+					bind:value={device.expand.ports[index].link}
+				/>
+			</div>
 			<div class="card-actions justify-end">
 				<button
 					class="btn btn-xs btn-outline btn-error"

frontend/src/lib/types/device.ts

@@ -34,6 +34,7 @@ export type Device = RecordModel & {
 export type Port = RecordModel & {
 	name: string;
 	number: number;
+	link: string;
 };
 
 export type Group = RecordModel & {