Dynamic logs terminal size

This commit is contained in:
everoddandeven 2024-12-29 16:49:45 +01:00
parent 829fc9d102
commit 7e3d22dd07
4 changed files with 20 additions and 24 deletions

View file

@ -238,4 +238,21 @@ export abstract class BasePageComponent implements AfterContentInit, OnDestroy {
console.log(`old height: ${currentHeight}, left: ${left} new height: ${newHeight}`);
}
public scrollTableContentToBottom(): void {
setTimeout(() => {
const elements = document.getElementsByClassName('tab-content tab-grow');
if (elements.length === 0) {
console.warn("Could not find logs tab");
return;
}
let tabContent: HTMLDivElement = elements[0] as HTMLDivElement;
if (tabContent) {
tabContent.scrollTo(0, tabContent.scrollHeight);
}
}, 100);
}
}

View file

@ -21,13 +21,6 @@
<div *ngIf="lines.length > 0" class="terminal bg-dark text-light p-3 m-4" #logTerminal>
<div class="terminal-output" id="terminalOutput">
{{ logs }}
<!--
@for(line of lines; track line) {
<ng-container>
<div>{{ line }}</div>
</ng-container>
}
-->
</div>
</div>

View file

@ -1,5 +1,4 @@
.terminal {
max-height: 600px;
overflow-y: auto;
font-family: monospace;
border: 1px solid #333;

View file

@ -61,23 +61,10 @@ export class LogsComponent extends BasePageComponent implements AfterViewInit {
return this.initing ? '' : this.lines.join("\n");
}
private scrollToBottom(): void {
this.ngZone.run(() => {
setTimeout(() => {
const terminalOutput = <HTMLDivElement | null>document.getElementById('terminalOutput');
if (terminalOutput) {
terminalOutput.style.width = `${window.innerWidth}`;
//console.log(`scrolling from ${terminalOutput.offsetTop} to ${terminalOutput.scrollHeight}`)
terminalOutput.scrollBy(0, terminalOutput.scrollHeight)
}
}, 100);
});
}
private onLog(): void {
if (this.logTerminal) this.logTerminal.nativeElement.scrollTop = this.logTerminal.nativeElement.scrollHeight;
// Scorri automaticamente in basso
this.scrollToBottom();
this.scrollTableContentToBottom();
}
public trackByFn(index: number, item: string): number {
@ -90,11 +77,11 @@ export class LogsComponent extends BasePageComponent implements AfterViewInit {
public ngAfterViewInit(): void {
this.initing = true;
setTimeout(() => {
this.scrollToBottom();
this.scrollTableContentToBottom();
this.initing = false;
setTimeout(() => {
this.scrollToBottom();
this.scrollTableContentToBottom();
}, 500);
}, 500);
}