feat: auto open device link after wake

backend/migrations/1737552965_updated_devices.go

@@ -0,0 +1,45 @@
+package migrations
+
+import (
+	"github.com/pocketbase/pocketbase/core"
+	m "github.com/pocketbase/pocketbase/migrations"
+)
+
+func init() {
+	m.Register(func(app core.App) error {
+		collection, err := app.FindCollectionByNameOrId("z5lghx2r3tm45n1")
+		if err != nil {
+			return err
+		}
+
+		// add field
+		if err := collection.Fields.AddMarshaledJSONAt(8, []byte(`{
+			"hidden": false,
+			"id": "select355930381",
+			"maxSelect": 1,
+			"name": "link_open",
+			"presentable": false,
+			"required": false,
+			"system": false,
+			"type": "select",
+			"values": [
+				"same_tab",
+				"new_tab"
+			]
+		}`)); err != nil {
+			return err
+		}
+
+		return app.Save(collection)
+	}, func(app core.App) error {
+		collection, err := app.FindCollectionByNameOrId("z5lghx2r3tm45n1")
+		if err != nil {
+			return err
+		}
+
+		// remove field
+		collection.Fields.RemoveById("select355930381")
+
+		return app.Save(collection)
+	})
+}

frontend/src/lib/components/DeviceCard.svelte

@@ -161,7 +161,6 @@
 			<p>{device.description}</p>
 		{/if}
 		<ul class="menu rounded-box bg-base-200">
-			<!-- TODO: change to nic array once backend supports it -->
 			<DeviceCardNic {device} />
 		</ul>
 		{#if device.wake_cron_enabled || device.shutdown_cron_enabled || device.password}

frontend/src/lib/components/DeviceCardNic.svelte

@@ -44,7 +44,6 @@
 		}
 	}
 
-	// TODO: change wake and shutdown to nic based routes, not device based
 	function wake() {
 		fetch(`${backendUrl}api/upsnap/wake/${device.id}`, {
 			headers: {
@@ -52,9 +51,17 @@
 			}
 		})
 			.then((resp) => resp.json())
-			.then((data) => {
+			.then(async (data) => {
 				device = data as Device;
-				countdown(Date.parse(device.updated));
+				await countdown(Date.parse(device.updated));
+				if (device.status === 'online' && device.link && device.link_open !== '') {
+					console.log('here');
+					if (device.link_open === 'new_tab') {
+						window.open(device.link, '_blank');
+					} else {
+						window.open(device.link, '_self');
+					}
+				}
 			})
 			.catch((err) => {
 				toast.error(err.message);
@@ -78,15 +85,29 @@
 	}
 
 	function countdown(updated: number) {
-		timeout = 120;
+		return new Promise((resolve, reject) => {
-		const end = updated + 2 * 60 * 1000;
+			try {
-		interval = setInterval(() => {
+				timeout = 120;
-			timeout = Math.round((end - Date.now()) / 1000);
+				const end = updated + 2 * 60 * 1000;
-			if (timeout <= 0 || device.status !== 'pending') {
+
-				clearInterval(interval);
+				if (interval) {
-				interval = 0;
+					clearInterval(interval);
+					interval = 0;
+				}
+
+				interval = setInterval(() => {
+					timeout = Math.round((end - Date.now()) / 1000);
+
+					if (timeout <= 0 || device.status !== 'pending') {
+						clearInterval(interval);
+						interval = 0;
+						resolve(interval);
+					}
+				}, 1000);
+			} catch (error) {
+				reject(error);
 			}
-		}, 1000);
+		});
 	}
 
 	function handleClick() {

frontend/src/lib/components/DeviceForm.svelte

@@ -290,13 +290,33 @@
 			<p class="my-2">
 				{$LL.device.link_desc()}
 			</p>
-			<div class="form-control w-full">
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-				<input
+				<div class="form-control w-full">
-					type="url"
+					<label class="label" for="device-link">
-					placeholder="https:// ..."
+						<div class="label-text">{$LL.device.link()}</div>
-					class="input w-full max-w-xs"
+					</label>
-					bind:value={device.link}
+					<input
-				/>
+						id="device-link"
+						type="url"
+						placeholder="https:// ..."
+						class="input w-full max-w-xs"
+						bind:value={device.link}
+					/>
+				</div>
+				<label class="form-control w-full max-w-xs">
+					<label class="label" for="device-link-open">
+						<div class="label-text">{$LL.device.link_open()}</div>
+					</label>
+					<select
+						id="device-link-open"
+						class="select select-bordered"
+						bind:value={device.link_open}
+					>
+						<option value="">{$LL.device.link_open_no()}</option>
+						<option value="same_tab">{$LL.device.link_open_same_tab()}</option>
+						<option value="new_tab">{$LL.device.link_open_new_tab()}</option>
+					</select>
+				</label>
 			</div>
 		</div>
 	</div>

frontend/src/lib/i18n/de/index.ts

@@ -66,6 +66,10 @@ const de = {
 		link: 'Link',
 		link_desc:
 			'Macht Ihren Gerätenamen zu einem anklickbaren Link, ideal zum Beispiel für die Verknüpfung eines Dashboards.',
+		link_open: 'Automatisch Link öffnen',
+		link_open_no: 'Nein',
+		link_open_same_tab: 'Selber Tab',
+		link_open_new_tab: 'Neuer Tab',
 		ping: 'Ping',
 		ping_desc:
 			'Du kannst einen benutzerdefinierten Shell-Befehl verwenden, um festzustellen, ob das Gerät eingeschaltet ist. Der Befehl sollte einen Exit-Code von <span class="badge">0</span> zurückgeben, um anzuzeigen, dass das Gerät eingeschaltet ist. Jeder andere Exit-Code setzt den Status auf offline.',

frontend/src/lib/i18n/en/index.ts

@@ -64,6 +64,10 @@ const en = {
 		link: 'Link',
 		link_desc:
 			'Makes your device name a clickable link, perfect for linking a dashboard for example.',
+		link_open: 'Automatically open link',
+		link_open_no: 'No',
+		link_open_same_tab: 'Same tab',
+		link_open_new_tab: 'New tab',
 		ping: 'Ping',
 		ping_desc:
 			'You can use a custom shell command to see if the device is powered on. The command should return an exit code of <span class="badge">0</span> to indicate that the device is powered on, any other exit code will mark the device as powered off.',

frontend/src/lib/i18n/es/index.ts

@@ -66,6 +66,10 @@ const es = {
 		link: 'Link',
 		link_desc:
 			'Permite que el nombre de su dispositivo sea un enlace. Perfecto para dashboard, por ejemplo.',
+		link_open: 'Abrir enlace automáticamente',
+		link_open_no: 'No',
+		link_open_same_tab: 'Misma pestaña',
+		link_open_new_tab: 'Nueva pestaña',
 		ping: 'Ping',
 		ping_desc:
 			'Puede utilizar un comando de shell personalizado para ver si el dispositivo está conectado. El comando debe devolver un código de salida de <span class="badge">0</span> para indicar que el dispositivo está encendido; cualquier otro código de salida marcará el dispositivo como apagado.',

frontend/src/lib/i18n/fr/index.ts

@@ -67,6 +67,10 @@ const fr = {
 		link: 'Lien',
 		link_desc:
 			'Rend le nom de votre appareil cliquable, parfait pour y lier un tableau de bord par exemple.',
+		link_open: 'Ouvrir automatiquement un lien',
+		link_open_no: 'No',
+		link_open_same_tab: 'Même onglet',
+		link_open_new_tab: 'Nouvel onglet',
 		ping: 'Ping',
 		ping_desc:
 			"Vous pouvez utiliser une commande shell personnalisée pour vérifier si l'appareil est sous tension. La commande doit renvoyer un code de sortie de <span class='badge'>0</span> pour indiquer que l'appareil est sous tension, tout autre code de sortie indiquera que l'appareil est hors tension.",

frontend/src/lib/i18n/i18n-types.ts

@@ -274,6 +274,22 @@ type RootTranslation = {
 		 * M​a​k​e​s​ ​y​o​u​r​ ​d​e​v​i​c​e​ ​n​a​m​e​ ​a​ ​c​l​i​c​k​a​b​l​e​ ​l​i​n​k​,​ ​p​e​r​f​e​c​t​ ​f​o​r​ ​l​i​n​k​i​n​g​ ​a​ ​d​a​s​h​b​o​a​r​d​ ​f​o​r​ ​e​x​a​m​p​l​e​.
 		 */
 		link_desc: string;
+		/**
+		 * A​u​t​o​m​a​t​i​c​a​l​l​y​ ​o​p​e​n​ ​l​i​n​k
+		 */
+		link_open: string;
+		/**
+		 * N​o
+		 */
+		link_open_no: string;
+		/**
+		 * S​a​m​e​ ​t​a​b
+		 */
+		link_open_same_tab: string;
+		/**
+		 * N​e​w​ ​t​a​b
+		 */
+		link_open_new_tab: string;
 		/**
 		 * P​i​n​g
 		 */
@@ -1053,6 +1069,22 @@ export type TranslationFunctions = {
 		 * Makes your device name a clickable link, perfect for linking a dashboard for example.
 		 */
 		link_desc: () => LocalizedString;
+		/**
+		 * Automatically open link
+		 */
+		link_open: () => LocalizedString;
+		/**
+		 * No
+		 */
+		link_open_no: () => LocalizedString;
+		/**
+		 * Same tab
+		 */
+		link_open_same_tab: () => LocalizedString;
+		/**
+		 * New tab
+		 */
+		link_open_new_tab: () => LocalizedString;
 		/**
 		 * Ping
 		 */

frontend/src/lib/i18n/it/index.ts

@@ -66,6 +66,10 @@ const it = {
 		link: 'Collegamento',
 		link_desc:
 			'Rende il nome del tuo dispositivo un collegamento, perfetto per collegare ad esempio un sito.',
+		link_open: 'Aprire automaticamente il link',
+		link_open_no: 'No',
+		link_open_same_tab: 'Stessa scheda',
+		link_open_new_tab: 'Nuova scheda',
 		ping: 'Ping',
 		ping_desc:
 			'Puoi usare un comando personalizzato per controllare che il dispositivo sia acceso. Il comando deve ritornare un codice uguale a <span class="badge">0</span> per confermare che il dispositivo sia acceso, mentre qualunque altro codice indica che il dispositivo e\' spento.',

frontend/src/lib/i18n/ja/index.ts

@@ -64,6 +64,10 @@ const ja = {
 		link: 'リンク',
 		link_desc:
 			'デバイス名をクリック可能なリンクにします。たとえばダッシュボードへのリンクに最適です。',
+		link_open: '自動的にリンクを開く',
+		link_open_no: 'いいえ',
+		link_open_same_tab: '同じタブ',
+		link_open_new_tab: '新しいタブ',
 		ping: 'Ping',
 		ping_desc:
 			'デバイスがオンになっているか確認するためにカスタムシェルコマンドを使用できます。このコマンドは、デバイスがオンであることを示すには終了コード <span class="badge">0</span> を返す必要があります。その他の終了コードはオフとして扱われます。',

frontend/src/lib/i18n/nl/index.ts

@@ -66,6 +66,10 @@ const nl = {
 		link: 'Link',
 		link_desc:
 			'Maakt de apparaatsnaam een klikbare link, ideaal om bijvoorbeeld een dashboard te linken.',
+		link_open: 'Link automatisch openen',
+		link_open_no: 'Nee',
+		link_open_same_tab: 'Zelfde tab',
+		link_open_new_tab: 'Nieuw tabblad',
 		ping: 'Ping',
 		ping_desc:
 			'Je kunt een aangepaste shell-opdracht gebruiken om te zien of het apparaat aan staat. De opdracht moet een exitcode van <span class="badge">0</span> retourneren om aan te geven dat het apparaat aan is, elke andere exitcode markeert het apparaat als uitgeschakeld.',

frontend/src/lib/i18n/pt/index.ts

@@ -66,6 +66,10 @@ const pt = {
 		link: 'Link',
 		link_desc:
 			'Permite que o nome do seu dispositivo seja um link. Perfeito para dashboard, por exemplo.',
+		link_open: 'Abrir automaticamente a ligação',
+		link_open_no: 'Não',
+		link_open_same_tab: 'O mesmo separador',
+		link_open_new_tab: 'Novo separador',
 		ping: 'Ping',
 		ping_desc:
 			'Pode utilizar um comando shell personalizado para ver se o dispositivo está ligado. O comando deve devolver um código de saída de <span class="badge">0</span> para indicar que o dispositivo está ligado, qualquer outro código de saída marcará o dispositivo como desligado.',

frontend/src/lib/i18n/zh-TW/index.ts

@@ -64,6 +64,10 @@ const zh_TW = {
 		ports_number: '通訊埠編號',
 		link: '連結',
 		link_desc: '讓您的裝置名稱成為可點擊的連結，非常適合用來連結儀表板等。',
+		link_open: '自動開啟連結',
+		link_open_no: '毋',
+		link_open_same_tab: '同一個標籤',
+		link_open_new_tab: '新標籤',
 		ping: 'Ping',
 		ping_desc:
 			'你可以使用自定義的指令來檢查裝置是否開機。該指令應返回退出碼 <span class="badge">0</span> 以表示裝置已開機，任何其他退出碼將標記裝置為關機。',

frontend/src/lib/i18n/zh/index.ts

@@ -62,6 +62,10 @@ const zh = {
 		ports_number: '端口号',
 		link: '链接',
 		link_desc: '为您的设备名设置一个可点击的链接.',
+		link_open: '自动打开链接',
+		link_open_no: '没有',
+		link_open_same_tab: '同一标签',
+		link_open_new_tab: '新标签',
 		ping: 'Ping',
 		ping_desc:
 			'您可以使用自定义 shell 命令来查看设备是否已接通电源。该命令应返回 <span class="badge">0</span> 的退出代码，表示设备电源已打开，任何其他退出代码都将标记设备电源已关闭。',

frontend/src/lib/types/device.ts

@@ -9,6 +9,7 @@ export type Device = RecordModel & {
 	status: 'pending' | 'online' | 'offline' | '';
 	ports: string[];
 	link: URL;
+	link_open: '' | 'same_tab' | 'new_tab';
 	ping_cmd: string;
 	wake_cron: string;
 	wake_cron_enabled: boolean;