Add frontend support for user

frontend/src/routes/scripts/[id]/+page.svelte

@@ -2,30 +2,49 @@
 	import {
 		updateScript,
 		deleteScript,
-		addLog,
 		deleteLog,
 		executeScript,
+		fetchScriptById,
 		fetchLogs
 	} from '$lib/api';
 	import type { Script, Log } from '$lib/api';
 	import CodeMirror from 'svelte-codemirror-editor';
 	import { python } from '@codemirror/lang-python';
+	import { onMount } from 'svelte';
 
-	export let data: { script: Script; logs: Log[] };
-	let script: Script = data.script;
-	let logs: Log[] = data.logs;
-	let updatedTitle: string = script.name || '';
-	let updatedContent: string = script.script_content || '';
-	let updatedEnabled: boolean = script.enabled || false;
+	export let params: { id: string };
+	let script: Script = null;
+	let logs: Log[] = [];
+	let updatedTitle: string = '';
+	let updatedContent: string = '';
+	let updatedEnabled: boolean = false;
+	let loading: boolean = true;
+	let errorMsg: string | null = null;
+
+	onMount(async () => {
+		try {
+			const fetchedScript = await fetchScriptById(parseInt(params.id));
+			if (!fetchedScript) {
+				errorMsg = 'Script not found';
+				loading = false;
+				return;
+			}
+			script = fetchedScript;
+			updatedTitle = script.name || '';
+			updatedContent = script.script_content || '';
+			updatedEnabled = script.enabled || false;
+			const fetchedLogs: Log[] = (await fetchLogs(script.id)).sort(
+				(a, b) => new Date(b.created_at!).getTime() - new Date(a.created_at!).getTime()
+			);
+			logs = fetchedLogs;
+		} catch (err) {
+			errorMsg = 'Failed to fetch script data - ' + err;
+		}
+		loading = false;
+	});
 
 	let isEditMode: boolean = false;
 
-	let newLog: Omit<Log, 'id' | 'script_id'> = {
-		message: '',
-		error_code: 0,
-		error_message: ''
-	};
-
 	let selectedLog: Log | null = null;
 
 	function openLogPopup(log: Log) {
@@ -66,23 +85,6 @@
 		}
 	}
 
-	async function handleAddLog() {
-		if (newLog.message.trim()) {
-			try {
-				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);
-			}
-		}
-	}
-
 	async function handleDeleteLog(logId: number) {
 		try {
 			await deleteLog(script.id, logId);
@@ -109,7 +111,11 @@
 <main class="p-4">
 	<!-- Removed local notification container as notifications are now global -->
 
-	{#if script}
+	{#if loading}
+		<p>Loading...</p>
+	{:else if errorMsg}
+		<p class="text-red-500">{errorMsg}</p>
+	{:else if script}
 		{#if isEditMode}
 			<input
 				type="text"
@@ -190,46 +196,6 @@
 
 	<section class="mt-8">
 		<h2 class="text-xl font-bold mb-4">Logs</h2>
-		<!--- --
-		<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