chore(control): improve handling with offline displays

control/frontend/src/lib/ts/api_handler.ts

@@ -9,6 +9,9 @@ import {
 } from './types';
 import { dev } from '$app/environment';
 import { get_sanitized_file_url } from './utils';
+import { online_displays } from './stores/displays';
+import { get } from 'svelte/store';
+import { update_display_status } from './main';
 
 export async function get_screenshot(ip: string): Promise<Blob | null> {
 	const options = { method: 'PATCH' };
@@ -188,7 +191,23 @@ async function request_display(
 	supress_error_handling_http_codes: number[] = []
 ): Promise<RequestResponse> {
 	const url = `http://${ip}:1323/api${api_route}`;
-	return await request(url, options, supress_error_handling_http_codes);
+
+	const current_online_displays = get(online_displays);
+	if (!current_online_displays.map((d) => d.ip).includes(ip)) return { ok: false };
+
+	const response = await request(url, options, supress_error_handling_http_codes);
+	if (!response.ok && response.http_code === 408) {
+		// Network error -> device possibly not longer online -> test status and throw no error if its offline
+		const possible_displays = current_online_displays.filter((d) => d.ip === ip);
+		for (const display of possible_displays) {
+			const current_status = await update_display_status(display);
+			if (current_status === 'app_online') {
+				console.error(`No response from ${url}`)
+				notifications.push('error', "Netzwerk-Fehler bei API-Anfrage", `${url}`);
+			}
+		}
+	}
+	return response;
 }
 
 async function request_control(
@@ -245,6 +264,7 @@ async function request(
 			if (dev) {
 				console.warn('Request failed - Is the targeted device online?');
 			}
+			return { ok: false, http_code: 408 };
 		} else {
 			console.error(url, error);
 			notifications.push('error', `Fataler Fehler bei API-Anfrage`, `${url}\nFehler: ${error}`);

control/frontend/src/lib/ts/main.ts

@@ -1,6 +1,6 @@
 import { screenshot_loop } from './stores/displays';
 import { ping_ip } from './api_handler';
-import type { Display } from './types';
+import type { Display, DisplayStatus } from './types';
 import { update_folder_elements_recursively } from './stores/files';
 import { db } from './database';
 
@@ -37,9 +37,9 @@ async function update_all_display_status(only_loading_displays: boolean) {
 	}
 }
 
-export async function update_display_status(display: Display) {
+export async function update_display_status(display: Display): Promise<DisplayStatus> {
 	const new_status = await ping_ip(display.ip);
-	if (new_status === null && display.status !== null) return;
+	if (new_status === null && display.status !== null) return null;
 	if (new_status !== display.status) {
 		// status change
 		if (new_status === 'app_offline') {
@@ -53,6 +53,7 @@ export async function update_display_status(display: Display) {
 		display.status = new_status;
 		await db.displays.put(display); // save
 	}
+	return new_status;
 }
 
 export function remove_display_from_loading_displays(display_id: string) {

control/frontend/src/lib/ts/stores/displays.ts

@@ -14,6 +14,15 @@ import { db } from '../database';
 import { dev } from '$app/environment';
 import { remove_display_from_loading_displays } from '../main';
 import { preview_settings } from './ui_behavior';
+import { liveQuery } from 'dexie';
+
+export const online_displays: Writable<Display[]> = writable<Display[]>([]);
+
+export const online_displays_sub = liveQuery(() =>
+	db.displays.where('status').equals('app_online').toArray()
+).subscribe((value) => {
+	online_displays.set(value);
+});
 
 export const local_displays: Writable<DisplayIdGroup[]> = writable<DisplayIdGroup[]>([]);
 
@@ -204,7 +213,7 @@ export async function update_local_displays() {
 
 export async function update_db_displays() {
 	local_displays.update((groups) => groups.filter((g) => g.displays.length !== 0));
-	const filtered_local_display_groups = get(local_displays)
+	const filtered_local_display_groups = get(local_displays);
 	const db_display_group_ids = (await db.display_groups.toArray()).map((group) => group.id);
 	const local_display_group_ids = filtered_local_display_groups.map((group) => group.id);
 
@@ -242,6 +251,16 @@ export function set_new_display_order(display_id_group_id: string, new_data: Dis
 	});
 }
 
+export function no_active_display_selected(
+	selected_display_ids: string[],
+	online_displays: Display[]
+) {
+	const online_and_selected_displays = online_displays.filter((d) =>
+		selected_display_ids.includes(d.id)
+	);
+	return online_and_selected_displays.length === 0;
+}
+
 if (dev) {
 	setTimeout(add_testing_displays, 0);
 	async function add_testing_displays() {

control/frontend/src/routes/ControlView.svelte

@@ -23,7 +23,12 @@
 		startup,
 		show_html
 	} from '$lib/ts/api_handler';
-	import { get_display_by_id, run_on_all_selected_displays } from '$lib/ts/stores/displays';
+	import {
+		get_display_by_id,
+		no_active_display_selected,
+		online_displays,
+		run_on_all_selected_displays
+	} from '$lib/ts/stores/displays';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import TipTapInput from './TipTapInput.svelte';
 	import { db } from '$lib/ts/database';
@@ -217,7 +222,7 @@
 					<Button
 						title="Vorherige Folie (Pfeil nach Links)"
 						className="px-9"
-						disabled={$selected_display_ids.length === 0}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 						click_function={async () => {
 							await send_single_key_press('VK_LEFT');
 						}}><ArrowBigLeft /></Button
@@ -225,7 +230,7 @@
 					<Button
 						title="Nächste Folie (Pfeil nach Rechts)"
 						className="px-9"
-						disabled={$selected_display_ids.length === 0}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 						click_function={async () => {
 							await send_single_key_press('VK_RIGHT');
 						}}><ArrowBigRight /></Button
@@ -234,19 +239,20 @@
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
+					click_function={show_text_popup}
-					click_function={show_text_popup}><TextAlignStart /> Text Anzeigen</Button
+					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
+					><TextAlignStart /> Text Anzeigen</Button
 				>
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
+					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 					click_function={show_website_popup}><Globe /> Webseite Anzeigen</Button
 				>
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
+					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 					click_function={async () => {
 						await run_on_all_selected_displays((d) => show_blackscreen(d.ip));
 					}}><Presentation />Blackout</Button
@@ -261,7 +267,7 @@
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
+					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 					click_function={show_send_keys_popup}><Keyboard /> Tastatur-Eingaben Senden</Button
 				>
 			</div>
@@ -269,7 +275,8 @@
 				<div class="flex flex-col gap-2">
 					<Button
 						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-						disabled={$all_display_states === 'on' || $selected_display_ids.length === 0}
+						disabled={$all_display_states === 'on' ||
+							no_active_display_selected($selected_display_ids, $online_displays)}
 						click_function={startup_action}
 					>
 						<Power /> Bildschirm Hochfahren
@@ -277,7 +284,8 @@
 
 					<Button
 						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-						disabled={$all_display_states === 'off' || $selected_display_ids.length === 0}
+						disabled={$all_display_states === 'off' ||
+							no_active_display_selected($selected_display_ids, $online_displays)}
 						click_function={ask_shutdonw}
 					>
 						<PowerOff /> Bildschirm Herunterfahren</Button

control/frontend/src/routes/FileView.svelte

@@ -38,6 +38,7 @@
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery, type Observable } from 'dexie';
 	import { download_file, add_upload, add_sync_recursively } from '$lib/ts/file_transfer_handler';
+	import { no_active_display_selected, online_displays } from '$lib/ts/stores/displays';
 
 	let current_name: string = $state('');
 	let current_valid: boolean = $state(false);
@@ -321,7 +322,7 @@
 						title="Neuen Ordner erstellen (Neuen Ordner mit ausgewählten Objekten erstellen)"
 						className="px-3 flex"
 						click_function={show_new_folder_popup}
-						disabled={$selected_display_ids.length === 0}><FolderPlus /></Button
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}><FolderPlus /></Button
 					>
 					<div class="border border-stone-700 my-1"></div>
 					<Button
@@ -330,7 +331,7 @@
 						click_function={() => {
 							if (file_input) file_input.click();
 						}}
-						disabled={$selected_display_ids.length === 0}><Upload /></Button
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}><Upload /></Button
 					>
 					<Button
 						title="Ausgewählte Datei herunterladen"
@@ -349,7 +350,7 @@
 								$selected_display_ids,
 								$current_folder_elements ?? []
 							)}
-						disabled={$selected_display_ids.length === 0}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 						><RefreshCcw />
 						<span class="hidden 2xl:flex">Synchronisieren</span>
 					</Button>
@@ -363,7 +364,7 @@
 					<Button
 						title="Ausgewählte Datei(en) einfügen"
 						className="px-3 flex"
-						disabled={$selected_display_ids.length === 0}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 					>
 						<ClipboardPaste />
 					</Button>
@@ -387,7 +388,7 @@
 		</div>
 		<div class="min-h-0 h-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl">
 			<div class="flex flex-col gap-2 p-2 min-h-0 max-w-full">
-				{#if $selected_display_ids.length === 0}
+				{#if no_active_display_selected($selected_display_ids, $online_displays)}
 					<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
 						Es sind keine Bildschirme ausgewählt.
 					</span>