From ce2111c6b73482f458937e4c5a6425175498b6a1 Mon Sep 17 00:00:00 2001
From: mrv777 <mrv777@users.noreply.github.com>
Date: Mon, 4 Nov 2024 09:34:29 -0600
Subject: [PATCH] fix: Change log font and add colors

---
 .../app/components/logs/logs.component.html   |  2 +-
 .../app/components/logs/logs.component.scss   | 12 +++++++++--
 .../src/app/components/logs/logs.component.ts | 21 +++++++++++++++++--
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/main/http_server/axe-os/src/app/components/logs/logs.component.html b/main/http_server/axe-os/src/app/components/logs/logs.component.html
index 4f677bfa6..45c09d6ea 100644
--- a/main/http_server/axe-os/src/app/components/logs/logs.component.html
+++ b/main/http_server/axe-os/src/app/components/logs/logs.component.html
@@ -48,7 +48,7 @@ <h2>Realtime Logs <button pButton (click)="toggleLogs()" style="margin-left: 15p
             </h2>
 
             <div *ngIf="showLogs" id="logs" #scrollContainer>
-                <div *ngFor="let log of logs">₿ {{log | ANSI}}</div>
+                <div *ngFor="let log of logs" [ngClass]="log.className">₿ {{log.text | ANSI}}</div>
             </div>
         </div>
     </div>
diff --git a/main/http_server/axe-os/src/app/components/logs/logs.component.scss b/main/http_server/axe-os/src/app/components/logs/logs.component.scss
index 8e42e74cc..00c29233d 100644
--- a/main/http_server/axe-os/src/app/components/logs/logs.component.scss
+++ b/main/http_server/axe-os/src/app/components/logs/logs.component.scss
@@ -8,6 +8,14 @@
     >div {
         max-width: 100%;
         line-break: anywhere;
-
+        font-family: 'Courier New', Courier, monospace;
     }
-}
\ No newline at end of file
+}
+
+.ansi-red { color: #ff0000; }
+.ansi-green { color: #00ff00; }
+.ansi-yellow { color: #ffff00; }
+.ansi-blue { color: #0000ff; }
+.ansi-magenta { color: #ff00ff; }
+.ansi-cyan { color: #00ffff; }
+.ansi-white { color: #ffffff; }
diff --git a/main/http_server/axe-os/src/app/components/logs/logs.component.ts b/main/http_server/axe-os/src/app/components/logs/logs.component.ts
index df7f072fd..8dd43c5cc 100644
--- a/main/http_server/axe-os/src/app/components/logs/logs.component.ts
+++ b/main/http_server/axe-os/src/app/components/logs/logs.component.ts
@@ -14,7 +14,7 @@ export class LogsComponent implements OnDestroy, AfterViewChecked {
   @ViewChild('scrollContainer') private scrollContainer!: ElementRef;
   public info$: Observable<ISystemInfo>;
 
-  public logs: string[] = [];
+  public logs: { className: string, text: string }[] = [];
 
   private websocketSubscription?: Subscription;
 
@@ -55,7 +55,24 @@ export class LogsComponent implements OnDestroy, AfterViewChecked {
     if (this.showLogs) {
       this.websocketSubscription = this.websocketService.ws$.subscribe({
         next: (val) => {
-          this.logs.push(val);
+          const matches = val.matchAll(/\[(\d+;\d+)m(.*?)(?=\[|\n|$)/g);
+          let className = 'ansi-white'; // default color
+          
+          for (const match of matches) {
+            const colorCode = match[1].split(';')[1];
+            switch (colorCode) {
+              case '31': className = 'ansi-red'; break;
+              case '32': className = 'ansi-green'; break;
+              case '33': className = 'ansi-yellow'; break;
+              case '34': className = 'ansi-blue'; break;
+              case '35': className = 'ansi-magenta'; break;
+              case '36': className = 'ansi-cyan'; break;
+              case '37': className = 'ansi-white'; break;
+            }
+          }
+          
+          this.logs.push({ className, text: val });
+          
           if (this.logs.length > 256) {
             this.logs.shift();
           }