chore(control): improve app startup and display status ping behavior

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

@@ -5,27 +5,60 @@ import { update_folder_elements_recursively } from './stores/files';
 import { db } from './database';
 
 const update_display_status_interval_seconds = 20;
+const update_display_loading_status_interval_seconds = 2;
 
-export async function on_start() {
+const loading_display_ids: string[] = [];
+
+export async function on_app_start() {
 	await db.files.clear();
 	await db.files_on_display.clear();
-	await update_all_display_status();
+	await update_all_display_status(false);
-	await setInterval(update_all_display_status, update_display_status_interval_seconds * 1000);
+	await setInterval(
+		() => update_all_display_status(false),
+		update_display_status_interval_seconds * 1000
+	);
+	await setInterval(
+		() => update_all_display_status(true),
+		update_display_loading_status_interval_seconds * 1000
+	);
 }
 
-async function update_all_display_status() {
+async function update_all_display_status(only_loading_displays: boolean) {
-	const all_displays: Display[] = await db.displays.toArray();
+	const not_loading_displays: Display[] = await db.displays
-	for (const display of all_displays) {
+		.filter((d) =>
+			only_loading_displays
+				? loading_display_ids.includes(d.id)
+				: !loading_display_ids.includes(d.id)
+		)
+		.toArray();
+	for (const display of not_loading_displays) {
+		await update_display_status(display);
+	}
+}
+
+export async function update_display_status(display: Display) {
 	const new_status = await ping_ip(display.ip);
-		if (new_status === null && display.status !== null) continue;
+	if (new_status === null && display.status !== null) return;
-		if (new_status === 'app_online' && display.status !== 'app_online') {
+	if (new_status !== display.status) {
+		// status change
+		if (new_status === 'app_offline') {
+			loading_display_ids.push(display.id);
+		} else {
+			remove_display_from_loading_displays(display.id);
+			if (new_status === 'app_online') {
 				on_display_start(display);
 			}
-		if (new_status !== display.status) {
+		}
 		display.status = new_status;
 		await db.displays.put(display); // save
 	}
 }
+
+export function remove_display_from_loading_displays(display_id: string) {
+	const index = loading_display_ids.indexOf(display_id);
+	if (index !== -1) {
+		loading_display_ids.splice(index, 1);
+	}
 }
 
 async function on_display_start(display: Display) {

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

@@ -12,6 +12,7 @@ import { get_screenshot } from '../api_handler';
 import { delete_and_deselect_unique_files_from_display } from './files';
 import { db } from '../database';
 import { dev } from '$app/environment';
+import { remove_display_from_loading_displays } from '../main';
 
 export const local_displays: Writable<DisplayIdGroup[]> = writable<DisplayIdGroup[]>([]);
 
@@ -25,8 +26,8 @@ export async function add_display(
 	mac: string | null,
 	name: string,
 	status: DisplayStatus
-) {
+): Promise<Display | null> {
-	if (await is_display_name_taken(name)) return;
+	if (await is_display_name_taken(name)) return null;
 	const new_id = get_uuid();
 	const group = await db.display_groups.toCollection().first();
 	let group_id: string;
@@ -38,7 +39,7 @@ export async function add_display(
 	}
 	const element_count_in_group = (await db.displays.where('group_id').equals(group_id).toArray())
 		.length;
-	await db.displays.put({
+	const display = {
 		id: new_id,
 		ip,
 		mac,
@@ -47,7 +48,9 @@ export async function add_display(
 		group_id: group_id,
 		name,
 		status
-	});
+	};
+	await db.displays.put(display);
+	return display;
 }
 
 export async function edit_display_data(
@@ -55,11 +58,12 @@ export async function edit_display_data(
 	ip: string,
 	mac: string | null,
 	name: string
-) {
+): Promise<Display | null> {
 	let display = await db.displays.get(display_id);
-	if (!display) return;
+	if (!display) return null;
 	display = { ...display, ip: ip, mac: mac, name: name };
 	await db.displays.put(display); // save
+	return display;
 }
 
 export async function remove_display(display_id: string) {
@@ -71,6 +75,7 @@ export async function remove_display(display_id: string) {
 	if (group_id && (await db.displays.where('group_id').equals(group_id).toArray()).length === 0) {
 		await db.display_groups.delete(group_id); // delete empty group
 	}
+	await remove_display_from_loading_displays(display_id);
 }
 
 export async function all_displays_of_group_selected(

control/frontend/src/routes/+page.svelte

@@ -5,7 +5,7 @@
 	import ControlView from './ControlView.svelte';
 	import DisplayView from './DisplayView.svelte';
 	import PopUp from '$lib/components/PopUp.svelte';
-	import { type PopupContent } from '$lib/ts/types';
+	import { type Display, type PopupContent } from '$lib/ts/types';
 	import TextInput from '$lib/components/TextInput.svelte';
 	import {
 		add_display,
@@ -17,7 +17,7 @@
 	import { notifications } from '$lib/ts/stores/notification';
 	import { ping_ip } from '$lib/ts/api_handler';
 	import { onMount } from 'svelte';
-	import { on_start } from '$lib/ts/main';
+	import { on_app_start, update_display_status } from '$lib/ts/main';
 	import { display_status_to_info } from '$lib/ts/utils';
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 
@@ -55,11 +55,15 @@
 		const ip = text_inputs_valid.ip.value;
 		const mac = text_inputs_valid.mac.value === '' ? null : text_inputs_valid.mac.value;
 		const name = text_inputs_valid.name.value;
+		let display: Display | null = null;
 		if (!!existing_display_id) {
-			await edit_display_data(existing_display_id, ip, mac, name);
+			display = await edit_display_data(existing_display_id, ip, mac, name);
 		} else {
 			const status = await ping_ip(text_inputs_valid.ip.value);
-			await add_display(ip, mac, name, status);
+			display = await add_display(ip, mac, name, status);
+		}
+		if (!!display) {
+			await update_display_status(display);
 		}
 	}
 
@@ -112,7 +116,7 @@
 		};
 	};
 
-	onMount(on_start);
+	onMount(on_app_start);
 </script>
 
 {#snippet remove_display_popup(display_id: string)}