feat(control): shutdown

control/frontend/src/app.css

@@ -12,6 +12,20 @@
 	--color-stone-850: oklch(0.242 0.0065 45.171);
 }
 
+.button {
+	&.space {
+		@apply px-4;
+	}
+
+	&.error {
+		@apply text-red-400 hover:text-stone-100;
+
+		&:hover {
+			@apply bg-red-400;
+		}
+	}
+}
+
 main {
 	scrollbar-width: thin;
 	scrollbar-color: var(--color-stone-300) transparent;

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

@@ -292,3 +292,7 @@ async function run_shell_command(ip: string, command: string): Promise<RequestRe
 	};
 	return await request_display(ip, '/shellCommand', options);
 }
+
+export async function shutdown(ip: string): Promise<void> {
+	await run_shell_command(ip, 'shutdown -h now');
+}

control/frontend/src/routes/ControlView.svelte

@@ -15,7 +15,7 @@
 	import PopUp from '$lib/components/PopUp.svelte';
 	import type { PopupContent } from '$lib/ts/types';
 	import KeyInput from './KeyInput.svelte';
-	import { send_keyboard_input, show_blackscreen } from '$lib/ts/api_handler';
+	import { send_keyboard_input, show_blackscreen, shutdown } from '$lib/ts/api_handler';
 	import { get_display_by_id, run_on_all_selected_displays } from '$lib/ts/stores/displays';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import TipTapInput from './TipTapInput.svelte';
@@ -65,8 +65,34 @@
 			return 'mixed';
 		}
 	}
+
+	async function ask_shutdonw() {
+		popup_content = {
+			open: true,
+			snippet: ask_shutdonw_popup,
+			title: 'PC Herunterfahren',
+			title_icon: PowerOff,
+			closable: true
+		};
+	}
+
+	async function shutdown_action() {
+		popup_content.open = false;
+		await run_on_all_selected_displays((ip) => shutdown(ip), false);
+	}
 </script>
 
+{#snippet ask_shutdonw_popup()}
+	<p>Bist du sicher, dass du alle ausgewählten Displays herunterfahren möchtest?</p>
+
+	<div class="flex flex-row justify-end gap-2">
+		<Button className="button space" click_function={() => (popup_content.open = false)}>
+			Abbrechen
+		</Button>
+		<Button click_function={shutdown_action} className="button error space">Herunterfahren</Button>
+	</div>
+{/snippet}
+
 {#snippet send_keys_popup()}
 	<div class="overflow-hidden flex flex-col gap-2">
 		<div>
@@ -146,6 +172,7 @@
 						<Button
 							className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
 							disabled={all === 'off' || $selected_display_ids.length === 0}
+							click_function={ask_shutdonw}
 						>
 							<PowerOff /> PC herunterfahren</Button
 						>