add update_all_display_status interval, improve code structure

control/frontend/src/components/Notification.svelte

@@ -21,7 +21,7 @@
                 <Button click_function={() => notifications.remove(n.id)} className="p-2" bg="bg-stone-900/50" hover_bg="bg-stone-600/70" active_bg="bg-stone-500/80"><X/></Button>
             </div>
 
-            <span>{n.message}</span>
+            <span class="whitespace-break-spaces">{n.message}</span>
 
             <div class="absolute inset-x-0 bottom-0 h-1 bg-white/25">
                 <div

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

@@ -19,6 +19,8 @@
 	import { text } from '@sveltejs/kit';
 	import { notifications } from '../ts/stores/notification';
 	import { ping_ip } from '../ts/api_handler';
+	import { onMount } from 'svelte';
+	import { on_start } from '../ts/main';
 
 	const ip_regex =
 		/^(?:(?:10|127)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|192\.168\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|172\.(?:1[6-9]|2\d|3[0-1])\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d))$/;
@@ -104,6 +106,10 @@
 			closable: true
 		};
 	};
+
+	onMount(() => {
+		on_start();
+	});
 </script>
 
 {#snippet remove_display_popup(display_id: string)}
@@ -162,7 +168,11 @@
 				bg="bg-stone-750"
 				click_function={async () => {
 					const status = await ping_ip(text_inputs_valid.ip.value);
-					notifications.push('info', `Ping '${text_inputs_valid.ip.value}'`, `Aktueller Zustand: ${display_status_to_info(status)}`);
+					notifications.push(
+						'info',
+						`Ping '${text_inputs_valid.ip.value}'`,
+						`Aktueller Zustand: ${display_status_to_info(status)}`
+					);
 				}}><Radio /> Ping</Button
 			>
 		</div>

control/frontend/src/ts/main.ts

@@ -1,4 +1,22 @@
-export function on_start() {
+import { get } from "svelte/store";
+import { displays, update_displays_with_map } from "./stores/displays"
+import { ping_ip } from "./api_handler";
+import type { Display } from "./types";
+import { change_file_path } from "./stores/files";
 
+const update_display_status_interval_seconds = 20;
+
+export function on_start() {
+    update_all_display_status();
+    setInterval(update_all_display_status, update_display_status_interval_seconds * 1000);
 }
 
+
+async function update_all_display_status() {
+    update_displays_with_map(async (display: Display) => {
+        const new_status = await ping_ip(display.ip);
+        if (new_status === null && display.status !== null) return display;
+        return { ...display, status: new_status, };
+    });
+    console.log("Display Status updated")
+}

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

@@ -3,6 +3,7 @@ import type { Display, DisplayGroup, DisplayStatus } from "../types";
 import { is_selected, select, selected_display_ids } from "./select";
 import { get_uuid, image_content_hash } from "../utils";
 import { get_screenshot } from "../api_handler";
+import DisplayGroupObject from "../../components/DisplayGroupObject.svelte";
 
 export const displays: Writable<DisplayGroup[]> = writable<DisplayGroup[]>([{
     id: get_uuid(),
@@ -25,15 +26,10 @@ export function add_display(ip: string, mac: string | null, name: string, status
 }
 
 export function edit_display_data(display_id: string, ip: string, mac: string | null, name: string) {
-    displays.update((display_groups) =>
+    update_displays_with_map((display: Display) => {
-        display_groups.map((group) => ({
+        if (display.id !== display_id) return display;
-            ...group,
+        return { ...display, ip: ip, mac: mac, name: name };
-            data: group.data.map((display) => {
+    })
-                if (display.id !== display_id) return display;
-                return { ...display, ip: ip, mac: mac, name: name };
-            }),
-        }))
-    );
 }
 
 export function remove_display(display_id: string) {
@@ -137,23 +133,29 @@ export async function update_screenshot(display_id: string, check_type: "first_c
     }
 
     if (update_needed) {
-        displays.update((display_groups) =>
+        update_displays_with_map((display: Display) => {
-            display_groups.map((group) => ({
+            if (display.id !== display_id) return display;
-                ...group,
+            if (display.preview_url) {
-                data: group.data.map((display) => {
+                URL.revokeObjectURL(display.preview_url);
-                    if (display.id !== display_id) return display;
+            }
-                    if (display.preview_url) {
+            const new_url = URL.createObjectURL(new_blob);
-                        URL.revokeObjectURL(display.preview_url);
+            return { ...display, preview_url: new_url, preview_timeout_id: new_preview_timeout_id };
-                    }
+        })
-                    const new_url = URL.createObjectURL(new_blob);
-                    return { ...display, preview_url: new_url, preview_timeout_id: new_preview_timeout_id };
-                }),
-            }))
-        );
     }
 }
 
 
+export async function update_displays_with_map(update_function: (display: Display) => Display | Promise<Display>) {
+    const display_groups = get(displays);
+    const updated_groups = await Promise.all(
+        display_groups.map(async (group: DisplayGroup) => ({
+            ...group,
+            data: await Promise.all(group.data.map(update_function)),
+        }))
+    );
+    displays.set(updated_groups);
+}
+
 
 
 
@@ -165,5 +167,5 @@ function add_testing_displays() {
     // }
 
     add_display("127.0.0.1", "00:1A:2B:3C:4D:5E", "PC", "host_offline");
-    // add_display("192.168.178.111", "D4:81:D7:C0:DF:3C", "Laptop", "Online");
+    // add_display("192.168.178.111", "D4:81:D7:C0:DF:3C", "Laptop", "host_offline");
 }