Fix: tweak how auto-scrolling of logs works

This commit is contained in:
shamoon 2024-01-16 23:00:18 -08:00
parent 1a84f6a20e
commit 648dc709fd
2 changed files with 10 additions and 9 deletions

View File

@ -3,8 +3,8 @@
i18n-title i18n-title
info="Review the log files for the application and for email checking." info="Review the log files for the application and for email checking."
i18n-info> i18n-info>
<div class="form-check form-switch" (click)="toggleAutoRefresh()"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval"> <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" (click)="toggleAutoRefresh()" [attr.checked]="autoRefreshInterval">
<label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label> <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
</div> </div>
</pngx-page-header> </pngx-page-header>

View File

@ -2,9 +2,9 @@ import {
Component, Component,
ElementRef, ElementRef,
OnInit, OnInit,
AfterViewChecked,
ViewChild, ViewChild,
OnDestroy, OnDestroy,
ChangeDetectorRef,
} from '@angular/core' } from '@angular/core'
import { Subject, takeUntil } from 'rxjs' import { Subject, takeUntil } from 'rxjs'
import { LogService } from 'src/app/services/rest/log.service' import { LogService } from 'src/app/services/rest/log.service'
@ -14,8 +14,11 @@ import { LogService } from 'src/app/services/rest/log.service'
templateUrl: './logs.component.html', templateUrl: './logs.component.html',
styleUrls: ['./logs.component.scss'], styleUrls: ['./logs.component.scss'],
}) })
export class LogsComponent implements OnInit, AfterViewChecked, OnDestroy { export class LogsComponent implements OnInit, OnDestroy {
constructor(private logService: LogService) {} constructor(
private logService: LogService,
private changedetectorRef: ChangeDetectorRef
) {}
public logs: string[] = [] public logs: string[] = []
@ -47,10 +50,6 @@ export class LogsComponent implements OnInit, AfterViewChecked, OnDestroy {
}) })
} }
ngAfterViewChecked() {
this.scrollToBottom()
}
ngOnDestroy(): void { ngOnDestroy(): void {
this.unsubscribeNotifier.next(true) this.unsubscribeNotifier.next(true)
this.unsubscribeNotifier.complete() this.unsubscribeNotifier.complete()
@ -66,6 +65,7 @@ export class LogsComponent implements OnInit, AfterViewChecked, OnDestroy {
next: (result) => { next: (result) => {
this.logs = result this.logs = result
this.isLoading = false this.isLoading = false
this.scrollToBottom()
}, },
error: () => { error: () => {
this.logs = [] this.logs = []
@ -89,6 +89,7 @@ export class LogsComponent implements OnInit, AfterViewChecked, OnDestroy {
} }
scrollToBottom(): void { scrollToBottom(): void {
this.changedetectorRef.detectChanges()
this.logContainer?.nativeElement.scroll({ this.logContainer?.nativeElement.scroll({
top: this.logContainer.nativeElement.scrollHeight, top: this.logContainer.nativeElement.scrollHeight,
left: 0, left: 0,