From a6892c1011ba837a564df14dd5ac00bf16451546 Mon Sep 17 00:00:00 2001
From: David Bauer <89662560+davbauer@users.noreply.github.com>
Date: Fri, 20 Oct 2023 21:09:21 +0200
Subject: [PATCH] Added timestamp to live backend and fixed UI

---
 backend/classes/WebSocketManager.ts             |  4 ++--
 backend/functions/errorLog.ts                   |  2 +-
 backend/functions/infoLog.ts                    |  2 +-
 src/lib/api/models/BackendLogs.ts               | 11 ++++++-----
 src/lib/api/services/ServiceWebsocket.ts        |  3 ++-
 src/lib/components/BackendTerminalWindow.svelte | 13 ++++++-------
 6 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/backend/classes/WebSocketManager.ts b/backend/classes/WebSocketManager.ts
index 9352353..a3bc26e 100644
--- 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
index 5a1e235..2551667 100644
--- 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
index 6847abd..1732cd5 100644
--- 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
index 2a98caf..40a8482 100644
--- 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
index 1226302..c687bca 100644
--- 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
index 37c0bd2..05ada62 100644
--- 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>