File
Implements
Methods
ngOnDestroy
|
ngOnDestroy()
|
|
|
updateChecks
|
updateChecks()
|
|
|
Public
data
|
Type : Observable<Array<string>>
|
Default value : of([])
|
|
Public
isLoading
|
Default value : true
|
|
Private
ngUnsubscribe
|
Default value : new Subject<void>()
|
|
import { CommonModule } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTooltip } from '@angular/material/tooltip';
import { RouterOutlet } from '@angular/router';
import { CobblerApiService } from 'cobbler-api';
import { Observable, of, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { UserService } from '../../services/user.service';
import Utils from '../../utils';
@Component({
selector: 'cobbler-check-sys',
templateUrl: './check-sys.component.html',
styleUrls: ['./check-sys.component.scss'],
standalone: true,
imports: [
RouterOutlet,
MatListModule,
CommonModule,
MatButton,
MatIconButton,
MatIcon,
MatTooltip,
MatProgressSpinner,
],
})
export class CheckSysComponent implements OnInit, OnDestroy {
// Unsubscribe
private ngUnsubscribe = new Subject<void>();
// Data
public data: Observable<Array<string>> = of([]);
public isLoading = true;
constructor(
public userService: UserService,
private cobblerApiService: CobblerApiService,
private _snackBar: MatSnackBar,
) {}
ngOnInit(): void {
this.updateChecks();
}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
updateChecks(): void {
this.isLoading = true;
this.cobblerApiService
.check(this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(
(data) => {
this.data = of(data);
this.isLoading = false;
},
(error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
this.isLoading = false;
},
);
}
}
<div class="right-column" id="dataScreen">
<router-outlet></router-outlet>
<div class="CheckSys-div">
<div class="title-table">
<div class="title-row">
<h1 class="title title-cell-text">CHECK</h1>
<span class="title-cell-button">
<button mat-icon-button (click)="this.updateChecks()">
<mat-icon>refresh</mat-icon>
</button>
</span>
</div>
</div>
<div class="list-group">
<mat-spinner *ngIf="isLoading" style="margin: 0 auto"></mat-spinner>
<ng-container *ngIf="!isLoading">
<mat-list>
<ng-template ngFor [ngForOf]="this.data | async" let-element>
<mat-list-item>{{ element }}</mat-list-item>
</ng-template>
</mat-list>
</ng-container>
</div>
</div>
</div>
.title-table {
display: table;
width: 100%;
}
.title-row {
display: table-cell;
width: 100%;
}
.title-cell-text {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.title-cell-button {
display: table-cell;
}
Legend
Html element with directive