chore(openBrowser): more detailed error logs

.github/workflows/release.yml

@@ -10,6 +10,7 @@ permissions:
 
 jobs:
   release:
+    name: Create Release
     runs-on: ubuntu-latest
 
     steps:
@@ -23,6 +24,7 @@ jobs:
           body_path: CHANGELOG.md
 
   build:
+    name: Build and Upload Assets
     needs: release
     runs-on: ubuntu-latest
     strategy:
@@ -63,5 +65,5 @@ jobs:
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: plg-mudics-${{ matrix.block }}
+          file: ${{ matrix.block }}/plg-mudics-${{ matrix.block }}
           tag: ${{ github.ref_name }}

README.md

@@ -1 +1,3 @@
 # PLG-MuDiCS
+
+![Lines of Code](https://tokei.rs/b1/github/PLG-Development/PLG-MuDiCS?category=code)

control/frontend/src/components/Notification.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { fade } from "svelte/transition";
+    import Button from "./Button.svelte";
+	import { X } from "lucide-svelte";
+	import { notifications } from "../ts/stores/notification";
+	import { get_shifted_color } from "../ts/stores/ui_behavior";
+</script>
+
+<div class="fixed flex flex-col gap-2 {true ? "top-[41%]": "top-2"} right-2 left-2 md:top-auto md:left-auto md:bottom-2 md:w-100 z-50">
+    {#each $notifications as n (n.id)}
+        <div
+            transition:fade={{ duration: 200 }}
+            class="p-2 pl-4 pb-3 rounded-lg shadow-xl/30 text-white flex flex-col gap-2 overflow-hidden relative border-1 border-black/20 {n.className}"
+            class:bg-red-900={n.type === "error"}
+            class:bg-green-900={n.type === "success"}
+            class:bg-sky-900={n.type === "info"}
+            style="--dur: {n.duration}ms"
+        >
+            <div class="flex flex-row justify-between">
+                <span class="text-xl font-bold flex items-center">{n.title}</span>
+                <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 class="whitespace-break-spaces">{n.message}</span>
+
+            <div class="absolute inset-x-0 bottom-0 h-1 bg-white/25">
+                <div
+                    class="block h-full w-full bg-white/80 origin-left animate-progress-bar"
+                ></div>
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style>
+    @keyframes progress {
+        from {
+            transform: scaleX(0);
+        }
+        to {
+            transform: scaleX(1);
+        }
+    }
+    .animate-progress-bar {
+        animation: progress var(--dur) linear forwards;
+        transform-origin: left;
+    }
+</style>

control/frontend/src/components/OnlineState.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
+	import { display_status_to_info, type DisplayStatus } from "../ts/types";
+
 	let { selected, status, className = "" } = $props<{
 		selected: boolean;
-		status: string;
+		status: DisplayStatus;
         className?: string;
 	}>();
 
-	function get_text_color(selected: boolean, status: string) {
+	function get_text_color(selected: boolean, status: DisplayStatus) {
 		switch (status) {
-			case 'Online':
+			case 'app_online':
 				return selected ? 'text-green-700' : 'text-green-400';
-			case 'Lädt':
+			case 'app_offline':
 				return selected ? 'text-amber-700' : 'text-amber-400';
-			case 'Offline':
+			case 'host_offline':
 				return selected ? 'text-red-700' : 'text-red-400';
 			default:
 				return selected ? 'text-stone-700' : 'text-stone-400';
@@ -20,5 +22,5 @@
 </script>
 
 <div class="{get_text_color(selected, status)} {className} transition-colors duration-100">
-	{status}
+	{display_status_to_info(status)}
 </div>

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

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import '../app.css';
+	import Notification from '../components/Notification.svelte';
 
 	let { children } = $props();
 </script>
 
 {@render children()}
+
+<Notification />

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

@@ -6,7 +6,7 @@
 	import DisplayView from '../components/DisplayView.svelte';
 	import SplashScreen from './../../../../shared/splash_screen.html?raw';
 	import PopUp from '../components/PopUp.svelte';
-	import type { PopupContent } from '../ts/types';
+	import { display_status_to_info, type PopupContent } from '../ts/types';
 	import TextInput from '../components/TextInput.svelte';
 	import {
 		add_display,
@@ -17,6 +17,10 @@
 		remove_display
 	} from '../ts/stores/displays';
 	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))$/;
@@ -45,14 +49,15 @@
 		return true;
 	}
 
-	function finalize_add_edit_display(existing_display_id: string|null) {
+	async function finalize_add_edit_display(existing_display_id: string | null) {
 		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;
 		if (!!existing_display_id) {
 			edit_display_data(existing_display_id, ip, mac, name);
 		} else {
-			add_display(ip, mac, name, 'Online');
+			const status = await ping_ip(text_inputs_valid.ip.value);
+			add_display(ip, mac, name, status);
 		}
 		popup_close_function();
 	}
@@ -101,6 +106,10 @@
 			closable: true
 		};
 	};
+
+	onMount(() => {
+		on_start();
+	});
 </script>
 
 {#snippet remove_display_popup(display_id: string)}
@@ -153,8 +162,18 @@
 			className="grow"
 		/>
 		<div class="flex items-end shrink-0">
-			<Button disabled={!text_inputs_valid.ip.valid} className="px-4 gap-2" bg="bg-stone-750"
+			<Button
-				><Radio /> Ping</Button
+				disabled={!text_inputs_valid.ip.valid}
+				className="px-4 gap-2"
+				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)}`
+					);
+				}}><Radio /> Ping</Button
 			>
 		</div>
 	</div>

control/frontend/src/tailwind.config.js

@@ -213,5 +213,8 @@ module.exports = {
 
     'hover:bg-red-400',
     'active:bg-red-500',
+
+    'hover:bg-stone-600/70',
+    'active:bg-stone-500/80',
   ],
 }

control/frontend/src/ts/api_handler.ts

@@ -1,14 +1,16 @@
-import type { FolderElement } from "./types";
+import { notifications } from "./stores/notification";
+import { to_display_status, type DisplayStatus, type FolderElement } from "./types";
 import { get_uuid } from "./utils";
 
 export async function get_screenshot(ip: string) {
     const options = { method: 'PATCH' };
-    return await request(ip, '/takeScreenshot', options);
+    return await request_display(ip, '/takeScreenshot', options);
 }
 
-export async function open_file(ip: string, path_to_file: string) {
+export async function open_file(ip: string, path_to_file: string): Promise<boolean> {
     const options = { method: 'PATCH', headers: { 'content-type': 'application/octet-stream' } };
-    const raw_response = await request(ip, `/file${path_to_file}`, options);
+    const raw_response = await request_display(ip, `/file${path_to_file}`, options);
+    return !!raw_response;
 }
 
 export async function get_file_data(ip: string, path: string): Promise<FolderElement[]> {
@@ -34,7 +36,8 @@ export async function get_file_data(ip: string, path: string): Promise<FolderEle
 done
 ` })
     };
-    const raw_response = await request(ip, '/shellCommand', options);
+    const raw_response = await request_display(ip, '/shellCommand', options);
+    if (!raw_response) return [];
     const response: FileInfo[] = raw_response.stdout.trim()
         .split("\n")
         .filter(Boolean)
@@ -62,22 +65,53 @@ done
 
 
 
+export async function ping_ip(ip: string): Promise<DisplayStatus> {
+    const raw_response = await request_control(`/ping?ip=${ip}`, { method: 'GET' });
+    if (!raw_response) return null;
+    return raw_response.status ? to_display_status(raw_response.status) : null;
+}
 
-async function request(ip: string, api_route: string, options: { method: string, headers?: Record<string, string>, body?: any }) {
+
+
+
+async function request_display(ip: string, api_route: string, options: { method: string, headers?: Record<string, string>, body?: any }): Promise<null | any> {
+    const url = `http://${ip}:1323/api${api_route}`;
+    return await raw_request(url, options);
+}
+
+async function request_control(api_route: string, options: { method: string, headers?: Record<string, string>, body?: any }): Promise<null | any> {
+    const url = `${window.location.origin}/api${api_route}`;
+    return await raw_request(url, options);
+}
+
+
+async function raw_request(url: string, options: { method: string, headers?: Record<string, string>, body?: any }): Promise<null | any> {
     try {
-        const url = `http://${ip}:1323/api${api_route}?t=${Date.now()}`;
+        const cache_buster = `${url.includes('?') ? '&' : '?'}=${Date.now()}`;
-        console.log(url)
+        console.log(url + cache_buster)
-        const response = await fetch(url, options);
+        const response = await fetch(url + cache_buster, options);
         if (!response.ok) {
             console.error(`HTTP error! Status: ${response.status}`);
+            notifications.push("error", `HTTP-Fehler bei API-Anfrage`, `${url}\nHTTP-Status: ${response.status}`);
         }
         const contentType = response.headers.get("content-type") || "";
         if (!contentType.includes("application/json")) {
             return await response.blob();
         } else {
-            return await response.json();
+            const json = await response.json();
+            if (json.error && json.error !== '') {
+                notifications.push("error", `Interner Fehler bei API-Anfrage`, `${url}\nJSON: ${JSON.stringify(json)}`);
             }
-    } catch (error) {
+            return json;
+        }
+    } catch (error: any) {
+        if (error instanceof TypeError && /fetch|NetworkError/i.test(error.message)) {
+            console.log("Request failed - Is the targeted device online?")
+        } else {
+            console.log(typeof error, error instanceof TypeError, error.message);
             console.error(error);
+            notifications.push("error", `Fehler bei API-Anfrage`, `${url}\nFehler: ${error}`);
+        }
+        return null;
     }
 }

control/frontend/src/ts/main.ts

@@ -1,4 +1,23 @@
-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, update_all_display_files } 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);
+    update_all_display_files('/');
 }
 
+
+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

@@ -1,8 +1,9 @@
 import { get, writable, type Writable } from "svelte/store";
-import type { Display, DisplayGroup } from "../types";
+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(),
@@ -17,7 +18,7 @@ export function is_display_name_taken(name: string): boolean {
     );
 }
 
-export function add_display(ip: string, mac: string | null, name: string, status: string) {
+export function add_display(ip: string, mac: string | null, name: string, status: DisplayStatus) {
     displays.update((displays: DisplayGroup[]) => {
         displays[0].data.push({ id: get_uuid(), ip, preview_url: null, preview_timeout_id: null, mac, name, status });
         return displays;
@@ -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) => ({
-            ...group,
-            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) => ({
-                ...group,
-                data: group.data.map((display) => {
             if (display.id !== display_id) return display;
             if (display.preview_url) {
                 URL.revokeObjectURL(display.preview_url);
             }
             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);
+}
+
 
 
 
@@ -164,6 +166,6 @@ function add_testing_displays() {
     //     add_display("127.0.0.1", "00:1A:2B:3C:4D:5E", name, "Offline");
     // }
 
-    add_display("127.0.0.1", "00:1A:2B:3C:4D:5E", "PC", "Offline");
+    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");
 }

control/frontend/src/ts/stores/files.ts

@@ -1,9 +1,11 @@
 import { get, writable, type Writable } from "svelte/store";
-import type { FolderElement } from "../types";
+import type { Display, FolderElement } from "../types";
-import { displays } from "./displays";
+import { displays, update_displays_with_map } from "./displays";
 import { selected_display_ids, selected_file_ids } from "./select";
 import { get_file_data } from "../api_handler";
 import { get_uuid } from "../utils";
+import type { Folder } from "lucide-svelte";
+import { notifications } from "./notification";
 
 export const all_files: Writable<Record<string, Record<string, FolderElement[]>>> = writable<Record<string, Record<string, FolderElement[]>>>({});
 // {
@@ -28,6 +30,7 @@ export function change_file_path(new_path: string) {
     selected_file_ids.update(() => {
         return [];
     })
+    setTimeout(async () => { await update_all_display_files(new_path) }, 0);
 }
 
 export function get_display_ids_where_file_is_missing(path: string, file: FolderElement, selected_display_ids: string[], all_files: Record<string, Record<string, FolderElement[]>>): string[][] {
@@ -53,36 +56,111 @@ export function get_display_ids_where_file_is_missing(path: string, file: Folder
     return [missing, colliding];
 }
 
+export async function update_all_display_files(path: string) {
+    for (const display_group of get(displays)) {
+        for (const display of display_group.data) {
+            await update_folder_elements_recursively(display, path);
+        }
+    }
+}
 
-export function updates_files_on_display(display_id: string, new_folder_elements: FolderElement[], file_path: string) {
+async function update_folder_elements_recursively(display: Display, file_path: string = '/'): Promise<number> {
-    all_files.update((files) => {
+    const new_folder_elements = await get_file_data(display.ip, file_path);
+    all_files.update((files: Record<string, Record<string, FolderElement[]>>) => {
         if (!files.hasOwnProperty(file_path)) {
             files[file_path] = {};
         }
-        for (const new_folder_element of new_folder_elements) {
+        if (!files[file_path].hasOwnProperty(display.id)) {
-            new_folder_element.id = get_uuid();
+            files[file_path][display.id] = [];
-        }
-        files[file_path][display_id] = new_folder_elements;
-        return files;
-    });
         }
 
-async function get_files_on_all_displays(current_file_path: string) {
+        const existing_folder_elements = files[file_path].hasOwnProperty(display.id) ? files[file_path][display.id] : [];
-    for (const display_group of get(displays)) {
+
-        for (const display of display_group.data) {
+        const diff = get_folder_elements_difference(existing_folder_elements, new_folder_elements);
-            const new_folder_elements = await get_file_data(display.ip, current_file_path);
+        files[file_path][display.id].push(...diff.new);
-            updates_files_on_display(display.id, new_folder_elements, current_file_path)
+        return remove_folder_elements_recursively(files, display, diff.deleted, file_path);
-            console.log(new_folder_elements)
+    })
+
+    let folder_size = 0;
+    for (const element of new_folder_elements) {
+        if (element.type === 'inode/directory') {
+            const folder_content_size = await update_folder_elements_recursively(display, file_path + element.name + '/');
+            folder_size += folder_content_size;
+            // Update foldersize
+            all_files.update((files: Record<string, Record<string, FolderElement[]>>) => {
+                for (const current_folder_element of files[file_path][display.id]) {
+                    if (current_folder_element.id === element.id) {
+                        current_folder_element.size = folder_content_size;
                     }
                 }
+                return files;
+            })
+        } else {
+            folder_size += element.size;
         }
+    }
+    return folder_size;
+}
+
+function remove_folder_elements_recursively(files: Record<string, Record<string, FolderElement[]>>, display: Display, folder_elements: FolderElement[], file_path: string): Record<string, Record<string, FolderElement[]>> {
+    if (!files.hasOwnProperty(file_path) || !files[file_path].hasOwnProperty(display.id)) {
+        console.error("File remove path does not exist:", files, display, folder_elements, file_path);
+        notifications.push("error", "Fehler beim Aktualisieren der Dateien", `File remove path does not exist: ${file_path} display_ip: ${display.ip}`);
+        return {};
+    }
+    for (const folder_element of folder_elements) {
+        files[file_path][display.id] = files[file_path][display.id].filter((f) => f.id !== folder_element.id);
+
+        if (folder_element.type === 'inode/directory') {
+            const new_file_path = file_path + folder_element.name + '/';
+            if (!files.hasOwnProperty(new_file_path) || !files[new_file_path].hasOwnProperty(display.id)) {
+                console.error("File remove path does not exist (recursion):", files, display, folder_elements, file_path, new_file_path);
+                notifications.push("error", "Fehler beim Aktualisieren der Dateien", `File remove path does not exist (recursion): ${new_file_path} display_ip: ${display.ip}`);
+                return {};
+            }
+            const sub_folder = files[new_file_path][display.id];
+            remove_folder_elements_recursively(files, display, sub_folder, new_file_path);
+        }
+    }
+
+    return files;
+}
+
+function get_folder_elements_difference(old_elements: FolderElement[], new_elements: FolderElement[]): { deleted: FolderElement[], new: FolderElement[] } {
+    const old_hashes = new Set(old_elements.map(e => e.hash));
+    const new_hashes = new Set(new_elements.map(e => e.hash));
+
+    const only_in_old = old_elements.filter(e => !new_hashes.has(e.hash));
+    const only_in_new = new_elements.filter(e => !old_hashes.has(e.hash));
+    return { deleted: only_in_old, new: only_in_new };
+}
+
+
+
+// export function updates_files_on_display(display_id: string, new_folder_elements: FolderElement[], file_path: string) {
+//     all_files.update((files) => {
+//         if (!files.hasOwnProperty(file_path)) {
+//             files[file_path] = {};
+//         }
+//         files[file_path][display_id] = new_folder_elements;
+//         return files;
+//     });
+// }
+
+// async function get_files_on_all_displays(current_file_path: string) {
+//     for (const display_group of get(displays)) {
+//         for (const display of display_group.data) {
+//             const new_folder_elements = await get_file_data(display.ip, current_file_path);
+//             updates_files_on_display(display.id, new_folder_elements, current_file_path)
+//             console.log(new_folder_elements)
+//         }
+//     }
+// }
 
 
 export function get_current_folder_elements(all_files: Record<string, Record<string, FolderElement[]>>, current_file_path: string, selected_display_ids: string[]) {
-    if (!all_files.hasOwnProperty(current_file_path)) {
+    if (!all_files.hasOwnProperty(current_file_path)) return [];
-        setTimeout(async () => { await get_files_on_all_displays(current_file_path) }, 0);
+
-        return [];
-    }
     const files_on_display_array = all_files[current_file_path];
     const files: FolderElement[] = [];
     for (const key of Object.keys(files_on_display_array)) {
@@ -123,120 +201,3 @@ function sort_files(files: FolderElement[]) {
     return files;
 }
 
-
-
-
-
-
-add_test_files();
-export function add_test_files() {
-    // updates_files_on_display(get(displays)[0].data[0].id, [
-    //     {
-    //         hash: "ok",
-    //         thumbnail: null,
-    //         name: "ok.png",
-    //         type: "image/png",
-    //         date_created: new Date("2022-09-10"),
-    //         size: "32 KB"
-    //     },
-    //     {
-    //         hash: "schön",
-    //         thumbnail: null,
-    //         name: "schön.png",
-    //         type: "image/png",
-    //         date_created: new Date("2023-09-10"),
-    //         size: "2 GB"
-    //     },
-    //     {
-    //         hash: "lang",
-    //         thumbnail: null,
-    //         name: "langer Bildname der wirklich gar nicht mehr aufhört, sodass man mal gut testen kann, wie die UI darauf reagiert.odp",
-    //         type: "application/vnd.oasis.opendocument.presentation",
-    //         date_created: new Date("2028-09-10"),
-    //         size: "324 KB"
-    //     },
-    //     {
-    //         hash: "Schön hier aber waren Sie mal in Baden Würtemberg?",
-    //         thumbnail: null,
-    //         name: "Schön hier aber waren Sie mal in Baden Würtemberg?.mp4",
-    //         type: "video/mp4",
-    //         date_created: new Date("2024-09-10"),
-    //         size: "32 KB"
-    //     },
-    //     {
-    //         hash: "lan4234g",
-    //         thumbnail: null,
-    //         name: "Ein schöner Ordner",
-    //         type: 'inode/directory',
-    //         date_created: new Date("2025-01-02"),
-    //         size: "324 TB"
-    //     },
-    //     {
-    //         hash: "Schön hi23424er aber waren Sie mal in Baden Würtemberg?",
-    //         thumbnail: null,
-    //         name: "Ein hässlicher Ordner",
-    //         type: 'inode/directory',
-    //         date_created: new Date("2025-10-22"),
-    //         size: "1 B"
-    //     },
-    // ], '/');
-
-
-    // updates_files_on_display(get(displays)[0].data[0].id, [
-    //     {
-    //         hash: "ok",
-    //         thumbnail: null,
-    //         name: "ok.png",
-    //         type: "image/png",
-    //         date_created: new Date("2022-09-10"),
-    //         size: "32 KB"
-    //     },
-    //     {
-    //         hash: "schön",
-    //         thumbnail: null,
-    //         name: "schön.png",
-    //         type: "image/png",
-    //         date_created: new Date("2023-09-10"),
-    //         size: "2 GB"
-    //     },
-    // ], '/Ein hässlicher Ordner/');
-
-    // updates_files_on_display(get(displays)[0].data[0].id, [
-    //     {
-    //         hash: "nö",
-    //         thumbnail: null,
-    //         name: "nö.png",
-    //         type: "image/png",
-    //         date_created: new Date("2022-09-10"),
-    //         size: "32 KB"
-    //     },
-    //     {
-    //         hash: "na gut",
-    //         thumbnail: null,
-    //         name: "na gut.png",
-    //         type: "image/png",
-    //         date_created: new Date("2023-09-10"),
-    //         size: "2 GB"
-    //     },
-    // ], '/Ein schöner Ordner/');
-
-
-
-    // updates_files_on_display(get(displays)[0].data[1].id, [
-    //     {
-    //         hash: "okk",
-    //         thumbnail: null,
-    //         name: "ok.png",
-    //         type: "image/png",
-    //         date_created: new Date("2022-09-10"),
-    //         size: "32 KB"
-    //     },
-    //     {
-    //         hash: "schön",
-    //         thumbnail: null,
-    //         name: "schön.png",
-    //         type: "image/png",
-    //         date_created: new Date("2023-09-10"),
-    //         size: "2 GB"
-    //     },], '/');
-}

control/frontend/src/ts/stores/notification.ts

@@ -0,0 +1,28 @@
+import { get, writable } from "svelte/store";
+
+export type Notification = {
+  id: number;
+  title: string;
+  message: string;
+  duration: number;
+  className: string;
+  type?: "error" | "success" | "info";
+};
+
+function createNotifications() {
+  const { subscribe, update } = writable<Notification[]>([]);
+
+  function push(type: "error" | "success" | "info", title: string, message: string = "", className: string = "") {
+    const id = Date.now();
+    const duration = type === "error" ? 8000 : 4000;
+    update((n) => [...n, { id, title, message, duration, className, type }]);
+    setTimeout(() => {
+      update((n) => n.filter((x) => x.id !== id));
+    }, duration);
+  }
+  const remove = (id: number) => update(n => n.filter(x => x.id !== id));
+
+  return { subscribe, push, remove };
+}
+
+export const notifications = createNotifications();

control/frontend/src/ts/types.ts

@@ -63,7 +63,7 @@ export type Display = {
     preview_timeout_id: number | null;
     mac: string | null;
     name: string;
-    status: string;
+    status: DisplayStatus;
 }
 
 export type DisplayGroup = {
@@ -89,3 +89,24 @@ export type PopupContent = {
     title_icon?: typeof X | null;
     closable?: boolean;
 }
+
+export type DisplayStatus = "host_offline" | "app_offline" | "app_online" | null;
+
+export function to_display_status(value: string): DisplayStatus {
+    return ["host_offline", "app_offline", "app_online"].includes(value)
+        ? (value as DisplayStatus)
+        : null;
+}
+
+export function display_status_to_info(status: DisplayStatus): string {
+    switch (status) {
+        case 'app_online':
+            return 'Online';
+        case 'app_offline':
+            return 'Lädt';
+        case 'host_offline':
+            return 'Offline';
+        case null:
+            return '???';
+    }
+}

control/go.mod

@@ -2,9 +2,7 @@ module plg-mudics/control
 
 go 1.24.5
 
-require (
+require github.com/labstack/echo/v4 v4.13.4
-	github.com/labstack/echo/v4 v4.13.4
-)
 
 require (
 	github.com/labstack/gommon v0.4.2 // indirect

control/go.sum

@@ -1,3 +1,5 @@
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/labstack/echo/v4 v4.13.4 h1:oTZZW+T3s9gAu5L8vmzihV7/lkXGZuITzTQkTEhcXEA=
 github.com/labstack/echo/v4 v4.13.4/go.mod h1:g63b33BZ5vZzcIUF8AtRH40DrTlXnx4UMC8rBdndmjQ=
 github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
@@ -6,6 +8,10 @@ github.com/mattn/go-colorable v0.1.14 h1:9A9LHSqF/7dyVVX6g0U9cwm9pG3kP9gSzcuIPHP
 github.com/mattn/go-colorable v0.1.14/go.mod h1:6LmQG8QLFO4G5z1gPvYEzlUgJ2wF+stgPZH1UqBm1s8=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
@@ -21,3 +27,5 @@ golang.org/x/text v0.25.0 h1:qVyWApTSYLk/drJRO5mDlNYskwQznZmkpV2c8q9zls4=
 golang.org/x/text v0.25.0/go.mod h1:WEdwpYrmk1qmdHvhkSTNPm3app7v4rsT8F2UD6+VHIA=
 golang.org/x/time v0.11.0 h1:/bpjEDfN9tkoN/ryeYHnv5hcMlc8ncjMcM4XBk5NWV0=
 golang.org/x/time v0.11.0/go.mod h1:CDIdPxbZBQxdj6cxyCIdrNogrJKMJ7pr37NYpMcMDSg=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

display/go.mod

@@ -3,13 +3,13 @@ module plg-mudics/display
 go 1.24.4
 
 require (
+	github.com/a-h/templ v0.3.960
 	github.com/labstack/echo/v4 v4.13.4
 	github.com/micmonay/keybd_event v1.1.2
 )
 
 require (
 	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
-	github.com/a-h/templ v0.3.924 // indirect
 	github.com/andybalholm/brotli v1.1.0 // indirect
 	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
 	github.com/cli/browser v1.3.0 // indirect
@@ -21,13 +21,14 @@ require (
 	github.com/natefinch/atomic v1.0.1 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
-	golang.org/x/crypto v0.38.0 // indirect
+	golang.org/x/crypto v0.40.0 // indirect
-	golang.org/x/mod v0.24.0 // indirect
+	golang.org/x/mod v0.26.0 // indirect
-	golang.org/x/net v0.40.0 // indirect
+	golang.org/x/net v0.42.0 // indirect
-	golang.org/x/sync v0.14.0 // indirect
+	golang.org/x/sync v0.16.0 // indirect
-	golang.org/x/sys v0.33.0 // indirect
+	golang.org/x/sys v0.34.0 // indirect
-	golang.org/x/text v0.25.0 // indirect
+	golang.org/x/text v0.27.0 // indirect
-	golang.org/x/tools v0.32.0 // indirect
+	golang.org/x/time v0.11.0 // indirect
+	golang.org/x/tools v0.35.0 // indirect
 )
 
 tool github.com/a-h/templ/cmd/templ

display/go.sum

@@ -1,7 +1,7 @@
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
-github.com/a-h/templ v0.3.924 h1:t5gZqTneXqvehpNZsgtnlOscnBboNh9aASBH2MgV/0k=
+github.com/a-h/templ v0.3.960 h1:trshEpGa8clF5cdI39iY4ZrZG8Z/QixyzEyUnA7feTM=
-github.com/a-h/templ v0.3.924/go.mod h1:FFAu4dI//ESmEN7PQkJ7E7QfnSEMdcnu7QrAY8Dn334=
+github.com/a-h/templ v0.3.960/go.mod h1:oCZcnKRf5jjsGpf2yELzQfodLphd2mwecwG4Crk5HBo=
 github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
 github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
 github.com/cenkalti/backoff/v4 v4.3.0 h1:MyRJ/UdXutAwSAT+s3wNd7MfTIcy71VQueUuFK343L8=
@@ -14,6 +14,8 @@ github.com/fatih/color v1.16.0 h1:zmkK9Ngbjj+K0yRhTVONQh1p/HknKYSlNT+vZCzyokM=
 github.com/fatih/color v1.16.0/go.mod h1:fL2Sau1YI5c0pdGEVCbKQbLXB6edEj1ZgiY4NijnWvE=
 github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
 github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/labstack/echo/v4 v4.13.4 h1:oTZZW+T3s9gAu5L8vmzihV7/lkXGZuITzTQkTEhcXEA=
 github.com/labstack/echo/v4 v4.13.4/go.mod h1:g63b33BZ5vZzcIUF8AtRH40DrTlXnx4UMC8rBdndmjQ=
 github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
@@ -34,20 +36,22 @@ github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6Kllzaw
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
-golang.org/x/crypto v0.38.0 h1:jt+WWG8IZlBnVbomuhg2Mdq0+BBQaHbtqHEFEigjUV8=
+golang.org/x/crypto v0.40.0 h1:r4x+VvoG5Fm+eJcxMaY8CQM7Lb0l1lsmjGBQ6s8BfKM=
-golang.org/x/crypto v0.38.0/go.mod h1:MvrbAqul58NNYPKnOra203SB9vpuZW0e+RRZV+Ggqjw=
+golang.org/x/crypto v0.40.0/go.mod h1:Qr1vMER5WyS2dfPHAlsOj01wgLbsyWtFn/aY+5+ZdxY=
-golang.org/x/mod v0.24.0 h1:ZfthKaKaT4NrhGVZHO1/WDTwGES4De8KtWO0SIbNJMU=
+golang.org/x/mod v0.26.0 h1:EGMPT//Ezu+ylkCijjPc+f4Aih7sZvaAr+O3EHBxvZg=
-golang.org/x/mod v0.24.0/go.mod h1:IXM97Txy2VM4PJ3gI61r1YEk/gAj6zAHN3AdZt6S9Ww=
+golang.org/x/mod v0.26.0/go.mod h1:/j6NAhSk8iQ723BGAUyoAcn7SlD7s15Dp9Nd/SfeaFQ=
-golang.org/x/net v0.40.0 h1:79Xs7wF06Gbdcg4kdCCIQArK11Z1hr5POQ6+fIYHNuY=
+golang.org/x/net v0.42.0 h1:jzkYrhi3YQWD6MLBJcsklgQsoAcw89EcZbJw8Z614hs=
-golang.org/x/net v0.40.0/go.mod h1:y0hY0exeL2Pku80/zKK7tpntoX23cqL3Oa6njdgRtds=
+golang.org/x/net v0.42.0/go.mod h1:FF1RA5d3u7nAYA4z2TkclSCKh68eSXtiFwcWQpPXdt8=
-golang.org/x/sync v0.14.0 h1:woo0S4Yywslg6hp4eUFjTVOyKt0RookbpAHG4c1HmhQ=
+golang.org/x/sync v0.16.0 h1:ycBJEhp9p4vXvUZNszeOq0kGTPghopOL8q0fq3vstxw=
-golang.org/x/sync v0.14.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
+golang.org/x/sync v0.16.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.33.0 h1:q3i8TbbEz+JRD9ywIRlyRAQbM0qF7hu24q3teo2hbuw=
+golang.org/x/sys v0.34.0 h1:H5Y5sJ2L2JRdyv7ROF1he/lPdvFsd0mJHFw2ThKHxLA=
-golang.org/x/sys v0.33.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/sys v0.34.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
-golang.org/x/text v0.25.0 h1:qVyWApTSYLk/drJRO5mDlNYskwQznZmkpV2c8q9zls4=
+golang.org/x/text v0.27.0 h1:4fGWRpyh641NLlecmyl4LOe6yDdfaYNrGb2zdfo4JV4=
-golang.org/x/text v0.25.0/go.mod h1:WEdwpYrmk1qmdHvhkSTNPm3app7v4rsT8F2UD6+VHIA=
+golang.org/x/text v0.27.0/go.mod h1:1D28KMCvyooCX9hBiosv5Tz/+YLxj0j7XhWjpSUF7CU=
-golang.org/x/tools v0.32.0 h1:Q7N1vhpkQv7ybVzLFtTjvQya2ewbwNDZzUgfXGqtMWU=
+golang.org/x/time v0.11.0 h1:/bpjEDfN9tkoN/ryeYHnv5hcMlc8ncjMcM4XBk5NWV0=
-golang.org/x/tools v0.32.0/go.mod h1:ZxrU41P/wAbZD8EDa6dDCa6XfpkhJ7HFMjHJXfBDu8s=
+golang.org/x/time v0.11.0/go.mod h1:CDIdPxbZBQxdj6cxyCIdrNogrJKMJ7pr37NYpMcMDSg=
+golang.org/x/tools v0.35.0 h1:mBffYraMEf7aa0sB+NuKnuCy8qI/9Bughn8dC2Gu5r0=
+golang.org/x/tools v0.35.0/go.mod h1:NKdj5HkL/73byiZSJjqJgKn3ep7KjFkBOkR/Hps3VPw=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

go.work.sum

@@ -1,7 +1,24 @@
 github.com/a-h/htmlformat v0.0.0-20250209131833-673be874c677/go.mod h1:FMIm5afKmEfarNbIXOaPHFY8X7fo+fRQB6I9MPG2nB0=
+github.com/a-h/templ v0.3.960 h1:trshEpGa8clF5cdI39iY4ZrZG8Z/QixyzEyUnA7feTM=
+github.com/a-h/templ v0.3.960/go.mod h1:oCZcnKRf5jjsGpf2yELzQfodLphd2mwecwG4Crk5HBo=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/rs/cors v1.11.0/go.mod h1:XyqrcTp5zjWr1wsJ8PIRZssZ8b/WMcMf71DJnit4EMU=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
+golang.org/x/crypto v0.40.0 h1:r4x+VvoG5Fm+eJcxMaY8CQM7Lb0l1lsmjGBQ6s8BfKM=
+golang.org/x/crypto v0.40.0/go.mod h1:Qr1vMER5WyS2dfPHAlsOj01wgLbsyWtFn/aY+5+ZdxY=
+golang.org/x/mod v0.25.0/go.mod h1:IXM97Txy2VM4PJ3gI61r1YEk/gAj6zAHN3AdZt6S9Ww=
+golang.org/x/mod v0.26.0/go.mod h1:/j6NAhSk8iQ723BGAUyoAcn7SlD7s15Dp9Nd/SfeaFQ=
+golang.org/x/net v0.41.0/go.mod h1:B/K4NNqkfmg07DQYrbwvSluqCJOOXwUjeb/5lOisjbA=
+golang.org/x/net v0.42.0 h1:jzkYrhi3YQWD6MLBJcsklgQsoAcw89EcZbJw8Z614hs=
+golang.org/x/net v0.42.0/go.mod h1:FF1RA5d3u7nAYA4z2TkclSCKh68eSXtiFwcWQpPXdt8=
+golang.org/x/sync v0.16.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
+golang.org/x/sys v0.34.0 h1:H5Y5sJ2L2JRdyv7ROF1he/lPdvFsd0mJHFw2ThKHxLA=
+golang.org/x/sys v0.34.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
 golang.org/x/telemetry v0.0.0-20240521205824-bda55230c457/go.mod h1:pRgIJT+bRLFKnoM1ldnzKoxTIn14Yxz928LQRYYgIN0=
+golang.org/x/telemetry v0.0.0-20250710130107-8d8967aff50b/go.mod h1:4ZwOYna0/zsOKwuR5X/m0QFOJpSZvAxFfkQT+Erd9D4=
 golang.org/x/term v0.32.0/go.mod h1:uZG1FhGx848Sqfsq4/DlJr3xGGsYMu/L5GW4abiaEPQ=
-golang.org/x/time v0.11.0/go.mod h1:CDIdPxbZBQxdj6cxyCIdrNogrJKMJ7pr37NYpMcMDSg=
+golang.org/x/term v0.33.0/go.mod h1:s18+ql9tYWp1IfpV9DmCtQDDSRBUjKaw9M1eAv5UeF0=
+golang.org/x/text v0.27.0 h1:4fGWRpyh641NLlecmyl4LOe6yDdfaYNrGb2zdfo4JV4=
+golang.org/x/text v0.27.0/go.mod h1:1D28KMCvyooCX9hBiosv5Tz/+YLxj0j7XhWjpSUF7CU=
+golang.org/x/tools v0.34.0/go.mod h1:pAP9OwEaY1CAW3HOmg3hLZC5Z0CCmzjAF2UQMSqNARg=
+golang.org/x/tools v0.35.0/go.mod h1:NKdj5HkL/73byiZSJjqJgKn3ep7KjFkBOkR/Hps3VPw=

shared/open_browser.go

@@ -23,13 +23,15 @@ func OpenBrowserWindow(url string, fullscreen bool, temp bool) error {
 		args = append(args, arg)
 	}
 
+	errs := []string{}
 	for _, bin := range bins {
 		cmd := exec.Command(bin, args...)
 		commandOutput := RunShellCommand(cmd)
 		if commandOutput.ExitCode == 0 {
 			return nil
 		}
+		errs = append(errs, commandOutput.Stderr)
 	}
 
-	return errors.New("chromium not found in PATH")
+	return errors.New("failed to open browser window: " + fmt.Sprint(errs))
 }