From 6afc50eb812c68377c048c2a488af35d3a0ef1c2 Mon Sep 17 00:00:00 2001
From: Sami Abuzakuk <mrzaiko@Host-005.lan>
Date: Sat, 11 Oct 2025 12:38:19 +0200
Subject: [PATCH] Add frontend support for script execution

---
 frontend/src/lib/api.ts                       |  22 +-
 frontend/src/routes/scripts/+page.svelte      |   4 +-
 frontend/src/routes/scripts/[id]/+page.svelte | 209 +++++++++++++++---
 3 files changed, 197 insertions(+), 38 deletions(-)

diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index d1266c4..236b0d8 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -20,6 +20,8 @@ export interface Log {
 	id: number;
 	script_id: number;
 	message: string;
+	error_message: string;
+	error_code: number;
 	created_at?: string;
 }
 export interface Script {
@@ -27,6 +29,7 @@ export interface Script {
 	name: string;
 	script_content?: string;
 	created_at?: string;
+	enabled: boolean;
 }
 
 // Fetch all scripts
@@ -39,7 +42,9 @@ export async function fetchScripts(): Promise<Script[]> {
 }
 
 // Add a new script
-export async function addScript(script: Omit<Script, 'id' | 'created_at'>): Promise<Script> {
+export async function addScript(
+	script: Omit<Script, 'id' | 'created_at' | 'enabled'>
+): Promise<Script> {
 	const response = await fetch(`${API_URL}/script`, {
 		method: 'POST',
 		headers: {
@@ -87,13 +92,13 @@ export async function fetchLogs(scriptId: number): Promise<Log[]> {
 }
 
 // Add a new log to a specific script
-export async function addLog(scriptId: number, message: string): Promise<Log> {
+export async function addLog(scriptId: number, log: Log): Promise<Log> {
 	const response = await fetch(`${API_URL}/script/${scriptId}/log`, {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json'
 		},
-		body: JSON.stringify({ message })
+		body: JSON.stringify(log)
 	});
 	if (!response.ok) {
 		throw new Error('Failed to add log');
@@ -101,6 +106,17 @@ export async function addLog(scriptId: number, message: string): Promise<Log> {
 	return response.json();
 }
 
+// Execute a script by ID
+export async function executeScript(scriptId: number): Promise<{ message: string }> {
+	const response = await fetch(`${API_URL}/script/${scriptId}/execute`, {
+		method: 'POST'
+	});
+	if (!response.ok) {
+		throw new Error('Failed to execute script');
+	}
+	return response.json();
+}
+
 // Delete a log from a specific script
 export async function deleteLog(scriptId: number, logId: number): Promise<void> {
 	const response = await fetch(`${API_URL}/script/${scriptId}/log/${logId}`, {
diff --git a/frontend/src/routes/scripts/+page.svelte b/frontend/src/routes/scripts/+page.svelte
index 26a4e5f..e56b76f 100644
--- a/frontend/src/routes/scripts/+page.svelte
+++ b/frontend/src/routes/scripts/+page.svelte
@@ -27,7 +27,9 @@
 		{#each scripts as script (script.id)}
 			<a
 				href={`/scripts/${script.id}`}
-				class="block p-4 border rounded shadow bg-white hover:bg-gray-100"
+				class="block p-4 border rounded bg-white hover:bg-gray-100 {script.enabled
+					? 'shadow-lg shadow-green-500/50'
+					: 'shadow-lg shadow-red-500/50'}"
 			>
 				<h2 class="text-lg font-semibold text-gray-800">{script.name}</h2>
 			</a>
diff --git a/frontend/src/routes/scripts/[id]/+page.svelte b/frontend/src/routes/scripts/[id]/+page.svelte
index 4f8e865..84f8bf8 100644
--- a/frontend/src/routes/scripts/[id]/+page.svelte
+++ b/frontend/src/routes/scripts/[id]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { updateScript, deleteScript, addLog, deleteLog } from '$lib/api';
+	import { updateScript, deleteScript, addLog, deleteLog, executeScript } from '$lib/api';
 	import type { Script, Log } from '$lib/api';
 	import CodeMirror from 'svelte-codemirror-editor';
 	import { python } from '@codemirror/lang-python';
@@ -9,17 +9,44 @@
 	let logs: Log[] = data.logs;
 	let updatedTitle: string = script.name || '';
 	let updatedContent: string = script.script_content || '';
+	let updatedEnabled: boolean = script.enabled || false;
+
 	let isEditMode: boolean = false;
 
-	let newLogMessage: string = '';
+	let newLog: Omit<Log, 'id' | 'script_id'> = {
+		message: '',
+		error_code: 0,
+		error_message: ''
+	};
+
+	let selectedLog: Log | null = null;
+
+	function openLogPopup(log: Log) {
+		selectedLog = log;
+	}
+
+	function closeLogPopup() {
+		selectedLog = null;
+	}
+
 	// Notifications are now handled globally via the layout
 
+	async function handleExecuteScript() {
+		try {
+			await executeScript(script.id);
+			window.showNotification('success', 'Script executed successfully!');
+		} catch (err) {
+			window.showNotification('error', 'Failed to execute script. ' + err);
+		}
+	}
+
 	async function handleUpdateScript() {
 		if (script) {
 			try {
 				const updatedScript = await updateScript(script.id, {
 					name: updatedTitle,
-					script_content: updatedContent
+					script_content: updatedContent,
+					enabled: updatedEnabled
 				});
 				script = updatedScript;
 				window.showNotification('success', 'Script updated successfully!');
@@ -31,11 +58,15 @@
 	}
 
 	async function handleAddLog() {
-		if (newLogMessage.trim()) {
+		if (newLog.message.trim()) {
 			try {
-				const newLog = await addLog(script.id, newLogMessage);
-				logs = [newLog, ...logs];
-				newLogMessage = '';
+				const addedLog = await addLog(script.id, newLog);
+				logs = [addedLog, ...logs];
+				newLog = {
+					message: '',
+					error_code: 0,
+					error_message: ''
+				};
 				window.showNotification('success', 'Log added successfully!');
 			} catch (err) {
 				window.showNotification('error', 'Failed to add log. ' + err);
@@ -77,7 +108,19 @@
 				required
 				class="text-2xl font-bold mb-4 w-full p-2 border rounded"
 			/>
+
 			<CodeMirror bind:value={updatedContent} lang={python()} />
+
+			<div class="mt-4 flex items-center space-x-2">
+				<input
+					id="enabled"
+					type="checkbox"
+					bind:checked={updatedEnabled}
+					class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring focus:ring-blue-200"
+				/>
+				<label for="enabled" class="text-sm font-medium text-gray-700">Enabled</label>
+			</div>
+
 			<button
 				class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
 				on:click={handleUpdateScript}
@@ -98,51 +141,149 @@
 			<h1 class="text-2xl font-bold mb-4">{script.name}</h1>
 			<pre
 				class="w-full p-2 border rounded font-mono text-sm bg-gray-100">{script.script_content}</pre>
-			<button
-				class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-				on:click={() => (isEditMode = true)}
-			>
-				Edit Script
-			</button>
-			<button
-				class="mt-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
-				on:click={handleDeleteScript}
-			>
-				Delete Script
-			</button>
+			<div class="mt-4 flex items-center space-x-2">
+				<span class="text-sm font-medium text-gray-700">Enabled:</span>
+				<span
+					class="px-2 py-1 text-xs font-semibold rounded"
+					class:bg-green-100={script.enabled}
+					class:bg-red-100={!script.enabled}
+					class:text-green-700={script.enabled}
+					class:text-red-700={!script.enabled}
+				>
+					{script.enabled ? 'Yes' : 'No'}
+				</span>
+			</div>
+			<div class="mt-4 flex justify-between">
+				<div class="flex space-x-2">
+					<button
+						class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+						on:click={handleExecuteScript}
+						aria-label="Execute the script"
+					>
+						Execute Script
+					</button>
+					<button
+						class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+						on:click={() => (isEditMode = true)}
+					>
+						Edit Script
+					</button>
+				</div>
+				<button
+					class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+					on:click={handleDeleteScript}
+				>
+					Delete Script
+				</button>
+			</div>
 		{/if}
 	{/if}
 
 	<section class="mt-8">
 		<h2 class="text-xl font-bold mb-4">Logs</h2>
-		<form on:submit|preventDefault={handleAddLog} class="mb-4">
-			<input
-				type="text"
-				bind:value={newLogMessage}
-				placeholder="Enter new log message"
-				class="w-full p-2 border rounded mb-2"
-				required
-			/>
+		<!--- --
+		<form on:submit|preventDefault={handleAddLog} class="mb-4 space-y-4">
+			<div>
+				<label for="logMessage" class="block text-sm font-medium">Log Message</label>
+				<input
+					id="logMessage"
+					type="text"
+					bind:value={newLog.message}
+					placeholder="Enter new log message"
+					class="w-full p-2 border rounded"
+					required
+				/>
+			</div>
+			<div>
+				<label for="errorCode" class="block text-sm font-medium">Error Code</label>
+				<input
+					id="errorCode"
+					type="number"
+					bind:value={newLog.error_code}
+					placeholder="Enter error code (0 for no error)"
+					class="w-full p-2 border rounded"
+					required
+				/>
+			</div>
+			<div>
+				<label for="errorMessage" class="block text-sm font-medium">Error Message</label>
+				<textarea
+					id="errorMessage"
+					type="text"
+					bind:value={newLog.error_message}
+					placeholder="Enter error message (optional)"
+					class="w-full p-2 border rounded"
+				>
+				</textarea>
+			</div>
 			<button type="submit" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
 				Add Log
 			</button>
 		</form>
+		-->
 		<ul class="space-y-4">
 			{#each logs as log (log.id)}
-				<li class="p-4 border rounded bg-gray-50 flex justify-between items-center">
-					<div>
-						<p class="text-sm text-gray-700">{log.message}</p>
-						<p class="text-xs text-gray-500">{log.created_at}</p>
-					</div>
+				<li
+					class="p-2 rounded flex justify-between items-center border-s-slate-400 border-1"
+					class:bg-red-100={log.error_code !== 0}
+					class:bg-gray-50={log.error_code === 0}
+				>
+					<button class="p-2 w-full" on:click={() => openLogPopup(log)}>
+						<div class="z">
+							<p class="text-sm text-left">
+								{log.error_code !== 0
+									? log.error_message.split('\n')[0]
+									: log.message.split('\n')[0]}
+							</p>
+							<p class="text-xs text-gray-500 text-left">{log.created_at}</p>
+						</div>
+					</button>
 					<button
-						class="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600"
-						on:click={() => handleDeleteLog(log.id)}
+						class="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600 block"
+						on:click|stopPropagation={() => handleDeleteLog(log.id)}
 					>
 						Delete
 					</button>
 				</li>
 			{/each}
 		</ul>
+
+		{#if selectedLog}
+			<div
+				class="fixed inset-0 bg-opacity-30 backdrop-blur-sm flex items-center justify-center z-50"
+			>
+				<div class="bg-white p-6 rounded shadow-lg w-3/4 max-w-2xl">
+					<h3 class="text-lg font-bold mb-4">Log Details</h3>
+					<div class="mb-4">
+						<p class="font-semibold">Message:</p>
+						<pre
+							class="whitespace-pre-wrap bg-gray-100 p-2 rounded border">{selectedLog.message}</pre>
+					</div>
+					<div class="mb-4">
+						<p class="font-semibold">Error Code:</p>
+						<pre
+							class="whitespace-pre-wrap bg-gray-100 p-2 rounded border">{selectedLog.error_code}</pre>
+					</div>
+					<div class="mb-4">
+						<p class="font-semibold">Error Message:</p>
+						<pre
+							class="whitespace-pre-wrap bg-gray-100 p-2 rounded border">{selectedLog.error_message ||
+								'N/A'}</pre>
+					</div>
+					<div class="mb-4">
+						<p class="font-semibold">Created At:</p>
+						<pre
+							class="whitespace-pre-wrap bg-gray-100 p-2 rounded border">{selectedLog.created_at}</pre>
+					</div>
+					<button
+						class="mt-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+						on:click={closeLogPopup}
+					>
+						Close
+					</button>
+				</div>
+			</div>
+		{/if}
 	</section>
 </main>