File

src/app/sys-check/report/report.component.ts

Implements

OnInit

Metadata

styleUrls ./report.component.css,
../sys-check.component.css
templateUrl ./report.component.html

Index

Properties
Methods

Constructor

constructor(bs: BackendService, ds: SysCheckDataService, saveDialog: MatDialog, snackBar: MatSnackBar)
Parameters :
Name Type Optional
bs BackendService No
ds SysCheckDataService No
saveDialog MatDialog No
snackBar MatSnackBar No

Methods

ngOnInit
ngOnInit()
Returns : void
saveReport
saveReport()
Returns : void

Properties

csvReport
Type : string
Default value : ''
Public ds
Type : SysCheckDataService
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>

./report.component.css

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.component.css

.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
Component
Html element with directive

result-matching ""

    No results matching ""