File
Implements
Metadata
styleUrls |
./report.component.css, ../sys-check.component.css |
templateUrl |
./report.component.html |
csvReport
|
Type : string
|
Default value : ''
|
|
questionnaireDataWarnings
|
Type : ReportEntry[]
|
Default value : []
|
|
saved
|
Default value : false
|
|
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { BackendService } from '../backend.service';
import { SysCheckDataService } from '../sys-check-data.service';
import { SaveReportComponent } from './save-report/save-report.component';
import { ReportEntry } from '../sys-check.interfaces';
@Component({
templateUrl: './report.component.html',
styleUrls: ['./report.component.css', '../sys-check.component.css']
})
export class ReportComponent implements OnInit {
csvReport = '';
saved = false;
questionnaireDataWarnings: ReportEntry[] = [];
constructor(
private bs: BackendService,
public ds: SysCheckDataService,
private saveDialog: MatDialog,
private snackBar: MatSnackBar
) {
}
saveReport(): void {
const dialogRef = this.saveDialog.open(SaveReportComponent, {
width: '500px',
height: '600px'
});
dialogRef.afterClosed().subscribe(result => {
if (typeof result !== 'undefined') {
if (result !== false) {
const reportKey = result.get('key').value as string;
const reportTitle = result.get('title').value as string;
this.bs.saveReport(
this.ds.checkConfig.workspaceId,
this.ds.checkConfig.name,
{
keyPhrase: reportKey,
title: reportTitle,
environment: this.ds.environmentReport,
network: this.ds.networkReport,
questionnaire: this.ds.questionnaireReport,
unit: []
}
).subscribe((saveReportResult: boolean) => {
if (saveReportResult) {
this.snackBar.open('Bericht gespeichert.', '', { duration: 3000 });
this.saved = true;
} else {
this.snackBar.open('Konnte Bericht nicht speichern.', '', { duration: 3000 });
}
});
}
}
});
}
ngOnInit(): void {
setTimeout(() => {
this.ds.setNewCurrentStep('r');
this.questionnaireDataWarnings = [];
if (this.ds.checkConfig && this.ds.checkConfig.questions.length > 0) {
if (this.ds.questionnaireReport.length > 0) {
this.ds.questionnaireReport.forEach(re => {
if (re.warning) {
this.questionnaireDataWarnings.push(re);
}
});
} else {
this.questionnaireDataWarnings.push({
id: 'tütü',
type: 'yoyo',
label: 'keine Antworten registriert',
value: 'naja',
warning: true
});
}
}
});
}
}
<div class="sys-check-body">
<div fxLayout="row wrap" fxLayoutAlign="center stretch">
<mat-card fxFlex="0 0 700px">
<mat-card-header>
<mat-card-title>Bericht {{ saved ? ' - gespeichert' : ''}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p *ngIf="questionnaireDataWarnings.length > 0" style="color: goldenrod; font-weight: bold">{{'Bitte prüfen Sie die Eingaben (unvollständig):'| customtext:'syscheck_questionsRequiredMessage' | async}}</p>
<ul>
<li *ngFor="let qd of questionnaireDataWarnings">
{{qd.label}}
</li>
</ul>
<h2 *ngIf="ds.environmentReport.length > 0">Computer (Betriebssystem, Browser)</h2>
<ul>
<li *ngFor="let reportData of ds.environmentReport">
{{reportData.label}}: {{reportData.value}}
</li>
</ul>
<h2 *ngIf="ds.networkReport.length > 0">Netzwerk/Internetverbindung</h2>
<ul>
<li *ngFor="let reportData of ds.networkReport">
{{reportData.label}}: {{reportData.value}}
</li>
</ul>
<h2 *ngIf="ds.questionnaireReport.length > 0">Fragen</h2>
<ul>
<li *ngFor="let reportData of ds.questionnaireReport">
{{reportData.label}}: {{reportData.value}}
</li>
</ul>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" [disabled]="saved" (click)="saveReport()" class="save_button">Bericht senden</button>
<button mat-raised-button [routerLink]="['/r/check-starter']" class="save_button">{{saved ? 'Zurück' : 'System-Check Abbrechen'}}</button>
</mat-card-actions>
</mat-card>
</div>
</div>
table {
/*width: 400px;*/
/*flex-direction: column;*/
}
#report-cointainer {
/*display: flex;*/
}
table thead td {
font-size: 14px;
border-bottom: 1px solid silver;
padding-top: 0.4em
}
table tr td {
min-width: 160px
}
.sys-check-body {
position: absolute;
width: 100%;
}
mat-card {
margin: 10px;
}
#header {
position: absolute;
width: 100%;
padding-top: 10px;
color: white;
z-index: 444;
}
button {
margin-left: 15px;
}
#header .material-icons {
/* font-size: 2.0rem; */
position: relative;
top: -8px;
font-size: 36px;
padding: 2px;
}
Legend
Html element with directive