fix: Change log font and add colors

This commit is contained in:
mrv777 2024-11-04 09:34:29 -06:00
parent da2d2557e8
commit ce2111c6b7
3 changed files with 30 additions and 5 deletions

View File

@ -48,7 +48,7 @@
</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>

View File

@ -8,6 +8,14 @@
>div {
max-width: 100%;
line-break: anywhere;
font-family: 'Courier New', Courier, monospace;
}
}
}
.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; }

View File

@ -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();
}