From b26ed52ec16aa3317b55ff0c3de2743a28b222a7 Mon Sep 17 00:00:00 2001
From: mechtelm <mechtel@iqb.hu-berlin.de>
Date: Fri, 7 Feb 2020 19:28:45 +0100
Subject: [PATCH] system-check: minor layout-stuff
---
package-lock.json | 6 ++--
.../environment-check.component.html | 20 +++++++++++++
.../environment-check.component.ts | 6 ++--
.../network-check.component.html | 11 +------
src/app/sys-check/report/report.component.ts | 29 ++++++++++++++++---
src/app/sys-check/sys-check.component.html | 13 ++++-----
6 files changed, 58 insertions(+), 27 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 9f668abd..3d5abe16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5813,9 +5813,9 @@
"dev": true
},
"iqb-components": {
- "version": "1.4.7",
- "resolved": "https://registry.npmjs.org/iqb-components/-/iqb-components-1.4.7.tgz",
- "integrity": "sha512-mOPwBhzC1Pd5TXdrMgpFnoepFiAmN807TEoU3tQZQpPT4TVR03K33noc05gh4ljR7FPvGjVtaUvFxpRiIibXyA==",
+ "version": "1.6.1",
+ "resolved": "https://registry.npmjs.org/iqb-components/-/iqb-components-1.6.1.tgz",
+ "integrity": "sha512-plAWvMTwCaJPVNgq1dlb76lNQKqniGS9Yiz7VGJCd1Z/8DgFDiemCtLd2UVqNJ7sQDdpx2k3JEztuTk1S2fA9w==",
"requires": {
"tslib": "^1.9.0"
}
diff --git a/src/app/sys-check/environment-check/environment-check.component.html b/src/app/sys-check/environment-check/environment-check.component.html
index e69de29b..f74a29e8 100644
--- a/src/app/sys-check/environment-check/environment-check.component.html
+++ b/src/app/sys-check/environment-check/environment-check.component.html
@@ -0,0 +1,20 @@
+<mat-card>
+
+ <mat-card-header>
+ <mat-card-title>
+ Computer/Browser
+ </mat-card-title>
+ </mat-card-header>
+
+ <mat-card-content>
+ <table fxFlex="100%">
+ <tbody>
+ <tr *ngFor="let ed of data">
+ <td>{{ed.label}}</td>
+ <td> {{ed.value}}</td>
+ </tr>
+ </tbody>
+ </table>
+ </mat-card-content>
+
+</mat-card>
diff --git a/src/app/sys-check/environment-check/environment-check.component.ts b/src/app/sys-check/environment-check/environment-check.component.ts
index 45a60ad5..faae98b4 100644
--- a/src/app/sys-check/environment-check/environment-check.component.ts
+++ b/src/app/sys-check/environment-check/environment-check.component.ts
@@ -9,6 +9,7 @@ import { ReportEntry } from '../sys-check.interfaces';
export class EnvironmentCheckComponent implements OnInit {
private report: Map<string, ReportEntry> = new Map<string, ReportEntry>();
+ private data: ReportEntry[] = [];
private rating = {
browser: {
@@ -44,7 +45,8 @@ export class EnvironmentCheckComponent implements OnInit {
const report = Array.from(this.report.values())
.sort((item1: ReportEntry, item2: ReportEntry) => (item1.label > item2.label) ? 1 : -1);
- this.ds.environmentData$.next(Object.values(report));
+ this.data = Object.values(report);
+ this.ds.environmentData$.next(this.data);
}
private reportPush(key: string, value: string, warning: boolean = false) {
@@ -56,7 +58,7 @@ export class EnvironmentCheckComponent implements OnInit {
const userAgent = window.navigator.userAgent;
// tslint:disable-next-line:max-line-length
- const regex = /(MSIE|Trident|(?!Gecko.+)Firefox|(?!AppleWebKit.+Chrome.+)Safari(?!.+Edge)|(?!AppleWebKit.+)Chrome(?!.+Edge)|(?!AppleWebKit.+Chrome.+Safari.+)Edge|AppleWebKit(?!.+Chrome|.+Safari)|Gecko(?!.+Firefox))(?: \/)([\d.apre]+)/;
+ const regex = /(MSIE|Trident|(?!Gecko.+)Firefox|(?!AppleWebKit.+Chrome.+)Safari(?!.+Edge)|(?!AppleWebKit.+)Chrome(?!.+Edge)|(?!AppleWebKit.+Chrome.+Safari.+)Edge|AppleWebKit(?!.+Chrome|.+Safari)|Gecko(?!.+Firefox))(?: |\/)([\d\.apre]+)/;
// credit due to: https://gist.github.com/ticky/3909462#gistcomment-2245669
const deviceInfoSplits = regex.exec(userAgent);
const helperRegex = /[^.]*/;
diff --git a/src/app/sys-check/network-check/network-check.component.html b/src/app/sys-check/network-check/network-check.component.html
index e21512aa..599cf55f 100644
--- a/src/app/sys-check/network-check/network-check.component.html
+++ b/src/app/sys-check/network-check/network-check.component.html
@@ -1,5 +1,4 @@
-<mat-card [ngStyle]="{display: measureNetwork ? 'block' : 'none'}">
-
+<mat-card>
<mat-card-header>
<mat-card-title>
Netzwerk
@@ -20,11 +19,6 @@
</mat-card-header>
<mat-card-content>
-
- <div class="spinner-container-local" *ngIf="!status.done">
- <mat-spinner></mat-spinner>
- </div>
-
<div fxLayout="row">
<div fxFlex="50%">
@@ -46,9 +40,6 @@
</div>
</div>
-
- <div *ngIf="!detectedNetworkInformations.available" style="color:red">Ihr Browser ist veraltet und verfügt über kein erweitertes Netzwerk-Profil.</div>
-
</mat-card-content>
</mat-card>
diff --git a/src/app/sys-check/report/report.component.ts b/src/app/sys-check/report/report.component.ts
index fe6bee01..795b91b5 100644
--- a/src/app/sys-check/report/report.component.ts
+++ b/src/app/sys-check/report/report.component.ts
@@ -4,6 +4,7 @@ import {Component, Input} from '@angular/core';
import {SaveReportComponent} from './save-report/save-report.component';
import {MatDialog, MatSnackBar} from '@angular/material';
import {ReportEntry} from "../sys-check.interfaces";
+import {Subscription} from "rxjs";
@Component({
selector: 'iqb-report',
@@ -21,16 +22,21 @@ export class ReportComponent {
csvReport = '';
+ private eDataSubscription: Subscription;
+ private nDataSubscription: Subscription;
+ private qDataSubscription: Subscription;
+ private uDataSubscription: Subscription;
+
constructor(
private bs: BackendService,
private ds: SyscheckDataService,
private saveDialog: MatDialog,
private snackBar: MatSnackBar
) {
- this.ds.environmentData$.subscribe(rd => {this.environmentData = rd; });
- this.ds.networkData$.subscribe(rd => {this.networkData = rd; });
- this.ds.questionnaireData$.subscribe(rd => this.questionnaireData = rd);
- this.ds.unitData$.subscribe(rd => this.unitData = rd);
+ this.eDataSubscription = this.ds.environmentData$.subscribe(rd => {this.environmentData = rd; });
+ this.nDataSubscription = this.ds.networkData$.subscribe(rd => {this.networkData = rd; });
+ this.qDataSubscription = this.ds.questionnaireData$.subscribe(rd => this.questionnaireData = rd);
+ this.uDataSubscription = this.ds.unitData$.subscribe(rd => this.unitData = rd);
}
saveReport() {
@@ -76,4 +82,19 @@ export class ReportComponent {
isReady() {
return (typeof this.ds.task$.getValue() === 'undefined') && !this.ds.taskQueue.length;
}
+
+ ngOnDestroy() {
+ if (this.eDataSubscription) {
+ this.eDataSubscription.unsubscribe();
+ }
+ if (this.nDataSubscription) {
+ this.nDataSubscription.unsubscribe();
+ }
+ if (this.qDataSubscription) {
+ this.qDataSubscription.unsubscribe();
+ }
+ if (this.uDataSubscription) {
+ this.uDataSubscription.unsubscribe();
+ }
+ }
}
diff --git a/src/app/sys-check/sys-check.component.html b/src/app/sys-check/sys-check.component.html
index 13ed2b95..60d97212 100644
--- a/src/app/sys-check/sys-check.component.html
+++ b/src/app/sys-check/sys-check.component.html
@@ -1,25 +1,22 @@
<div class="logo">
<a [routerLink]="['/']">
- <img src="assets/IQB-LogoA.png" matTooltip="Startseite"/>
+ <img src="assets/IQB-LogoA.png" matTooltip="Startseite" alt="iqb-logo"/>
</a>
</div>
<div class="pagetitle">{{title}}</div>
<div class="page-body">
+ <div fxLayout="row wrap" fxLayoutAlign="center stretch">
+ <iqb-environment-check fxFlex="0 0 25%"></iqb-environment-check>
+ <iqb-network-check fxFlex="0 0 75%" [measureNetwork]="checks.network"></iqb-network-check>
+ </div>
- <iqb-network-check [measureNetwork]="checks.network" [ngClass]="{toprow: checks.network}"></iqb-network-check>
<div fxLayout="column" fxLayout.gt-md="row" class="cardbox" [ngClass]="{toprow: !checks.network}">
-
<iqb-unit-check fxFlex="100%" [fxFlex.gt-md]="(checks.unit && checks.questions) ? '75%' : '100%'" *ngIf="checks.unit"></iqb-unit-check>
-
<iqb-questionnaire fxFlex="100%" [fxFlex.gt-md]="(checks.unit && checks.questions) ? '25%' : '100%'" *ngIf="checks.questions"></iqb-questionnaire>
-
</div>
- <iqb-environment-check *ngIf="checks.environment"></iqb-environment-check>
-
<iqb-report [canSave]="checks.report"></iqb-report>
-
</div>
--
GitLab