TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-03-23 21:20:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

Updated logs viewer component

Browse Source 
- now by default last 50 lines are showed
- added copy to clipboard button
- added loading spinner to indicate to users when the logs are loading

app.get('/api/logs') is now app.post to allow for additional parameters (such as lines to retrieve)
This commit is contained in:
Isaac Grynsztein
2020-07-03 03:46:58 -04:00
parent 3732d13562
commit a9f197e46d
11 changed files with 45 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/components/logs-viewer/logs-viewer.component.html
View File

@@ -1,3 +1,21 @@
<div style="height: 100%">
<textarea style="height: 100%" matInput readonly [(ngModel)]="logs" placeholder="Logs will appear here" i18n-placeholder="Logs placeholder"></textarea>
<div *ngIf="logs_loading" style="position: absolute; top: 40%; left: 50%">
<mat-spinner [diameter]="32"></mat-spinner>
</div>
<textarea style="height: 275px" matInput readonly [(ngModel)]="logs" placeholder="Logs will appear here" i18n-placeholder="Logs placeholder"></textarea>
<div>
<button style="margin-top: 12px;" [cdkCopyToClipboard]="logs" (click)="copiedLogsToClipboard()" mat-flat-button color="primary"><ng-container i18n="Copy to clipboard button text">Copy to clipboard</ng-container></button>
<div style="float: right">
<ng-container i18n="Label for lines select in logger view">Lines:</ng-container>&nbsp;
<mat-form-field style="width: 75px;">
<mat-select (selectionChange)="getLogs()" [(ngModel)]="requested_lines">
<mat-option [value]="10">10</mat-option>
<mat-option [value]="25">25</mat-option>
<mat-option [value]="50">50</mat-option>
<mat-option [value]="100">100</mat-option>
<mat-option [value]="0">All</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>

14
src/app/components/logs-viewer/logs-viewer.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { PostsService } from '../../posts.services';
@Component({
@@ -9,7 +9,8 @@ import { PostsService } from '../../posts.services';
export class LogsViewerComponent implements OnInit {
logs: string = null;
requested_lines = 50;
logs_loading = false;
constructor(private postsService: PostsService) { }
ngOnInit(): void {
@@ -17,16 +18,23 @@ export class LogsViewerComponent implements OnInit {
}
getLogs() {
this.postsService.getLogs().subscribe(res => {
if (!this.logs) { this.logs_loading = true; } // only show loading spinner at the first load
this.postsService.getLogs(this.requested_lines !== 0 ? this.requested_lines : null).subscribe(res => {
this.logs_loading = false;
if (res['logs']) {
this.logs = res['logs'];
} else {
this.postsService.openSnackBar('Failed to retrieve logs!');
}
}, err => {
this.logs_loading = false;
console.error(err);
this.postsService.openSnackBar('Failed to retrieve logs!');
});
}
copiedLogsToClipboard() {
this.postsService.openSnackBar('Logs copied to clipboard!');
}
}