File
Implements
Metadata
styleUrls |
./sys-check-starter.component.css |
templateUrl |
./sys-check-starter.component.html |
loading
|
Default value : false
|
|
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BackendService } from '../../backend.service';
import { MainDataService } from '../../maindata.service';
import { SysCheckInfo } from '../../app.interfaces';
@Component({
templateUrl: './sys-check-starter.component.html',
styleUrls: ['./sys-check-starter.component.css']
})
export class SysCheckStarterComponent implements OnInit {
checkConfigList: SysCheckInfo[] = [];
loading = false;
constructor(
public mds: MainDataService,
private bs: BackendService,
private router: Router
) { }
ngOnInit(): void {
setTimeout(() => {
this.mds.appSubTitle$.next('System-Check Auswahl');
this.loading = true;
this.mds.setSpinnerOn();
this.bs.getSysCheckInfo().subscribe(myConfigs => {
if (myConfigs) {
this.checkConfigList = myConfigs;
} else {
this.checkConfigList = [];
}
this.loading = false;
this.mds.setSpinnerOff();
});
});
}
buttonStartCheck(checkInfo: SysCheckInfo): void {
this.router.navigate([`/check/${checkInfo.workspaceId}/${checkInfo.name}`]);
}
}
<div fxLayout="row wrap" fxLayoutAlign="center stretch">
<mat-card fxFlex="0 2 500px">
<mat-card-title>{{mds.appTitle$ | async}}</mat-card-title>
<mat-card-subtitle>{{mds.appSubTitle$ | async}}</mat-card-subtitle>
<mat-card-content>
<p>Hier können Sie ermitteln, ob das Computersystem, das Sie gerade benutzen, für
die hier vorgesehenen Testungen geeignet ist.</p>
<p *ngIf="loading">
Bitte warten... Konfiguration wird geladen
</p>
<span *ngIf="!loading">
<p *ngIf="checkConfigList.length === 0">
Auf diesem Server ist aktuell kein System-Check verfügbar.
</p>
<p *ngIf="checkConfigList.length > 1">
Bitte wählen Sie einen Check aus!
</p>
<p *ngIf="checkConfigList.length === 1">
Bitte klicken Sie auf den Schalter, um den Check zu starten!
</p>
</span>
<div fxLayout="column" fxLayoutGap="10px" *ngIf="checkConfigList?.length > 0">
<button mat-raised-button color="primary" (click)="buttonStartCheck(c)"
*ngFor="let c of checkConfigList">
<div fxLayout="column">
<p class="check-title">{{c.label}}</p>
<p class="check-description">{{c.description}}</p>
</div>
</button>
</div>
</mat-card-content>
<mat-card-actions>
<button [routerLink]="['/']" mat-raised-button color="primary"><i class="material-icons">arrow_back</i> zurück zur Startseite</button>
</mat-card-actions>
</mat-card>
</div>
.check-title {
font-size: 16pt;
margin-top: 4px;
margin-bottom: 0;
white-space: pre-wrap;
word-break: break-word;
line-height: 130%;
}
.check-description {
font-size: 9pt;
margin-top: 8px;
color: lightgray;
height: 24px;
margin-bottom: 18px;
white-space: normal;
line-height: 16px;
}
Legend
Html element with directive