Added timestamp to live backend and fixed UI

davbauer · Oct 20, 2023 · a6892c1 · a6892c1
1 parent 6e316dc
commit a6892c1
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 17 deletions.
diff --git a/backend/classes/WebSocketManager.ts b/backend/classes/WebSocketManager.ts
@@ -46,8 +46,8 @@ export default class WebSocketManager {
 		this.sendEvent('enabledPowergridStateUpdate', { state });
 	}
 
-	public static sendEventBackendTerminal(type: string, msg: string) {
-		this.sendEvent('backendTerminalUpdate', { type, msg });
+	public static sendEventBackendTerminal(type: string, msg: string, ts: string) {
+		this.sendEvent('backendTerminalUpdate', { type, msg, ts });
 	}
 
 	public static sendEvent(eventType: string, data: any): void {

diff --git a/backend/functions/errorLog.ts b/backend/functions/errorLog.ts
@@ -3,5 +3,5 @@ import WebSocketManager from '../classes/WebSocketManager.js';
 export default function (input: any) {
 	const ts = new Date().toLocaleString('en-US');
 	console.error(`[ERR] ${ts} -> ${input}`);
-	WebSocketManager.sendEventBackendTerminal('error', input);
+	WebSocketManager.sendEventBackendTerminal('error', input, ts);
 }
diff --git a/backend/functions/infoLog.ts b/backend/functions/infoLog.ts
@@ -3,5 +3,5 @@ import WebSocketManager from '../classes/WebSocketManager';
 export default function (input: any) {
 	const ts = new Date().toLocaleString('en-US');
 	console.info(`[INFO] ${ts} -> ${input}`);
-	WebSocketManager.sendEventBackendTerminal('info', input);
+	WebSocketManager.sendEventBackendTerminal('info', input, ts);
 }
diff --git a/src/lib/api/models/BackendLogs.ts b/src/lib/api/models/BackendLogs.ts
@@ -1,7 +1,8 @@
 export default interface BackendLogs {
-	count: number;
-	items: {
-		type: string;
-		msg: string;
-	}[];
+    count: number;
+    items: {
+        type: string;
+        msg: string;
+        ts: string
+    }[];
 }
diff --git a/src/lib/api/services/ServiceWebsocket.ts b/src/lib/api/services/ServiceWebsocket.ts
@@ -43,10 +43,11 @@ export default class {
 				case 'backendTerminalUpdate':
 					const type = message.data.type as string;
 					const msg = message.data.msg as string;
+					const ts = message.data.ts as string;
 
 					backendLogs.update((currentLogs: BackendLogs) => {
 						const newCount = currentLogs.count + 1;
-						const newLog = { type, msg };
+						const newLog = { type, msg, ts };
 						const updatedLogs = [...currentLogs.items, newLog];
 						if (updatedLogs.length > 300) {
 							updatedLogs.splice(0, updatedLogs.length - 300);

diff --git a/src/lib/components/BackendTerminalWindow.svelte b/src/lib/components/BackendTerminalWindow.svelte
@@ -14,14 +14,13 @@
 		<form method="dialog">
 			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
 		</form>
-		<h3 class="font-bold text-lg">Backend</h3>
-		<div class="mockup-code text-left w-full my-10">
+		<h3 class="font-bold text-lg text-center pb-5">Backend</h3>
+		<div class="mockup-window border bg-base-200">
 			{#each [...$backendLogs.items].reverse() as log, index (log)}
-				<pre
-					data-prefix={$backendLogs.count - index}
-					class={log.type === 'error' ? 'text-warning' : ''}>
-                    <code>{log.msg}</code>
-                </pre>
+				<p class="py-1 px-5 font-mono {log.type === 'error' ? 'text-warning' : 'text-info'}">
+					<span class="opacity-60">{log.ts} {$backendLogs.count - index}</span>
+					{log.msg}
+				</p>
 			{/each}
 		</div>
 	</div>