Skip to content
Snippets Groups Projects
Commit 3184f582 authored by paflov's avatar paflov
Browse files

redesign without stepper pt ii 'radical refactoring'

parent d7b4708f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 91 additions and 44 deletions
src/app/sys-check/network-check/network-check.component.html
+ 31
− 22
View file @ 3184f582
<mat-card>
<div class="spinner-container" *ngIf="!testDone">
<mat-spinner></mat-spinner>
</div>
<mat-card-header>
<mat-card-title>Netzwerk</mat-card-title>
<mat-card-subtitle>
<div *ngIf="!testDone">
<p>{{this.status.message}}</p>
</div>
{{status.message}}
<div *ngIf="testDone">
<span *ngIf="status.done && (networkRating.overallRating !== 'N/A')">
<span [ngSwitch]="networkRating.overallRating">Ihre Verbindung zum Testserver ist
<span *ngSwitchCase="'insufficient'" style="color: red; font-weight: bold;">unzureichend <i class="material-icons">error</i></span>
<span *ngSwitchCase="'ok'" style="color: orange; font-weight: bold;">vorauss. ausreichend <i class="material-icons">warning</i></span>
<span *ngSwitchCase="'good'" style="color: green; font-weight: bold;">gut <i class="material-icons">check</i></span>
<span *ngSwitchCase="'unstable'" style="color: orangered; font-weight: bold;">sehr instabil <i class="material-icons">check</i></span>
</span>
</div>
<span *ngSwitchCase="'insufficient'" style="color: red; font-weight: bold;">unzureichend</span>
<span *ngSwitchCase="'ok'" style="color: orange; font-weight: bold;">vorauss. ausreichend</span>
<span *ngSwitchCase="'good'" style="color: green; font-weight: bold;">gut</span>
<span *ngSwitchCase="'unstable'" style="color: orangered; font-weight: bold;">sehr instabil</span>
</span>.
</span>
</mat-card-subtitle>
</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%">
<h4>Geschwindigkeit Download</h4>
<p *ngIf="status.avgDownloadSpeedBytesPerSecond >= 0">&#8960; {{ humanReadableBytes(status.avgDownloadSpeedBytesPerSecond, true) }}ps</p>
<p *ngIf="status.avgDownloadSpeedBytesPerSecond < 0">Test noch nicht gestartet</p>
<tc-speed-chart #downloadChart></tc-speed-chart>
</div>
<div fxFlex="50%">
<h4>Geschwindigkeit Upload</h4>
<p *ngIf="status.avgUploadSpeedBytesPerSecond >= 0">&#8960; {{ humanReadableBytes(status.avgUploadSpeedBytesPerSecond, true) }}ps</p>
<p *ngIf="status.avgUploadSpeedBytesPerSecond < 0">Test noch nicht gestartet</p>
<tc-speed-chart #uploadChart></tc-speed-chart>
</div>
</div>
<mat-divider></mat-divider>
<div fxLayout="row">
<div>
<h4>Netzwerkeigenschaften</h4>
<p *ngIf="!detectedNetworkInformations.available">Ihr Browser ist veraltet, daher konnten keine weiteren Netzwerkeigenschaften ermittelt werden.</p>
<p *ngIf="detectedNetworkInformations.available">Verbindung: {{detectedNetworkInformations.effectiveNetworkType}} {{detectedNetworkInformations.networkType}}</p>
<p *ngIf="detectedNetworkInformations.roundTripTimeMs">Network RoundTrip: {{detectedNetworkInformations.roundTripTimeMs}} Millisekunden</p>
<p *ngIf="detectedNetworkInformations.downlinkMegabitPerSecond">Network Downlink: {{detectedNetworkInformations.downlinkMegabitPerSecond}} mbps</p>
<table *ngIf="detectedNetworkInformations.available">
<tr>
<td>Verbindung</td>
<td>{{detectedNetworkInformations.networkType}}</td>
</tr>
<tr>
<td>Network RoundTrip</td>
<td>{{detectedNetworkInformations.roundTripTimeMs}}</td>
</tr>
<tr>
<td>Network Downlink: </td>
<td>{{detectedNetworkInformations.downlinkMegabitPerSecond}}</td>
</tr>
</table>
<div *ngIf="!detectedNetworkInformations.available">Ihr Browser ist veraltet, daher konnten keine weiteren Netzwerkeigenschaften ermittelt werden.</div>
</div>
</mat-card-content>
<mat-card-actions>
......
src/app/sys-check/network-check/network-check.component.ts
+ 11
− 11
View file @ 3184f582
......@@ -15,6 +15,7 @@ interface NetworkCheckStatus {
message: string;
avgUploadSpeedBytesPerSecond: number;
avgDownloadSpeedBytesPerSecond: number;
done: boolean;
}
interface BenchmarkDefinition {
......@@ -51,13 +52,13 @@ export class NetworkCheckComponent implements OnInit {
readonly benchmarkDefinitions = new Map<BenchmarkType, BenchmarkDefinition>([
[BenchmarkType.down, {
testSizes: [1024, 2048, 4096, 8192, 16384, 32768, 65536, 131072, 262144, 524288, 1048576, 2097152, 4194304],
testSizes: [1024], //, 2048, 4096, 8192, 16384, 32768, 65536, 131072, 262144, 524288, 1048576, 2097152, 4194304],
allowedDevianceBytesPerSecond: 100000,
allowedErrorsPerSequence: 0,
allowedSequenceRepetitions: 15
}],
[BenchmarkType.up, {
testSizes: [1024, 4096, 16384, 65536, 262144, 1048576, 4194304],
testSizes: [1024],// 4096, 16384, 65536, 262144, 1048576, 4194304],
allowedDevianceBytesPerSecond: 10000000,
allowedErrorsPerSequence: 0,
allowedSequenceRepetitions: 15
......@@ -65,11 +66,11 @@ export class NetworkCheckComponent implements OnInit {
]);
public status: NetworkCheckStatus = {
done: true,
message: 'Messung noch nicht gestartet',
avgUploadSpeedBytesPerSecond: -1,
avgDownloadSpeedBytesPerSecond: -1
};
public testDone = false;
private networkStats = new Map<BenchmarkType, number[]>([
[BenchmarkType.down, []],
......@@ -99,10 +100,9 @@ export class NetworkCheckComponent implements OnInit {
public startCheck() {
this.testDone = false;
this.status = {
message: 'Netzwerk-Analyse wird neu gestartet',
done: false,
message: 'Netzwerk-Analyse wird gestartet',
avgUploadSpeedBytesPerSecond: -1,
avgDownloadSpeedBytesPerSecond: -1
};
......@@ -127,8 +127,8 @@ export class NetworkCheckComponent implements OnInit {
const testSizes = this.benchmarkDefinitions.get(benchmarkType).testSizes;
const plotterSettings = {
css: 'border: 0px solid black; width: 100%; max-width: 400px',
width: 400,
css: 'border: 1px solid silver; margin: 2px; width: 100%;',
width: 800,
height: 140,
labelPadding: 4,
xAxisMaxValue: 16 + Math.max(...testSizes),
......@@ -216,10 +216,10 @@ export class NetworkCheckComponent implements OnInit {
const testRound = this.networkStats.get(benchmarkType).length + 1;
const testPackage = this.humanReadableBytes(requestSize);
if (benchmarkType === BenchmarkType.down) {
this.updateStatus(`Downloadgeschwindigkeit Testrunde ${testRound} - Testgröße: ${testPackage} bytes`);
this.updateStatus(`Downloadgeschwindigkeit Testrunde ${testRound} - Testgröße: ${testPackage}`);
return this.bs.benchmarkDownloadRequest(requestSize);
} else {
this.updateStatus(`Uploadgeschwindigkeit Testrunde ${testRound} - Testgröße: ${testPackage} bytes)`);
this.updateStatus(`Uploadgeschwindigkeit Testrunde ${testRound} - Testgröße: ${testPackage})`);
return this.bs.benchmarkUploadRequest(requestSize);
}
}
......@@ -275,7 +275,7 @@ export class NetworkCheckComponent implements OnInit {
}
this.updateStatus(`Die folgenden Netzwerkeigenschaften wurden festgestellt:`);
this.testDone = true;
this.status.done = true;
// send data for reporting
const reportEntry: ReportEntry[] = [];
......
src/app/sys-check/report/report.component.css deleted 100644 → 0
+ 0
− 0
View file @ d7b4708f
src/app/sys-check/report/report.component.ts
+ 2
− 3
View file @ 3184f582
......@@ -4,8 +4,7 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'iqb-report',
templateUrl: './report.component.html',
styleUrls: ['./report.component.css']
templateUrl: './report.component.html'
})
export class ReportComponent implements OnInit {
reportEnabled = false;
......@@ -19,7 +18,7 @@ export class ReportComponent implements OnInit {
}
ngOnInit() {
// this.ds.environmentData$.subscribe(rd => ); too early!
// this.ds.environmentData$.subscribe(rd => this.environmentData ); //too early!
this.ds.networkData$.subscribe(rd => {
this.networkData = rd;
this.environmentData = this.ds.environmentData$.getValue();
......
src/app/sys-check/run.component.css
+ 10
− 6
View file @ 3184f582
......@@ -2,13 +2,13 @@
overflow: auto;
}
.mat-mini-fab {
margin-right: 4px
}
/*.mat-mini-fab {*/
/* margin-right: 4px*/
/*}*/
.mat-mini-fab[disabled] {
background-color: grey;
}
/*.mat-mini-fab[disabled] {*/
/* background-color: grey;*/
/*}*/
.fullheight {
min-height: 90%;
......@@ -18,6 +18,10 @@
margin: 1em;
}
::ng-deep .mat-card-header-text {
margin-left: 0 !important;
}
/*mat-card-content {*/
/* padding: 16px*/
/*}*/
src/environments/environment.xx.ts 0 → 100644
+ 21
− 0
View file @ 3184f582
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false,
// testcenterUrl: 'https://www.iqb-testcenter.de/',
testcenterUrl: 'https://ocba2.iqb.hu-berlin.de/',
appName: 'IQB-Testcenter',
appPublisher: 'IQB - Institut zur Qualitätsentwicklung im Bildungswesen',
appVersion: '0 (dev)'
};
/*
* In development mode, to ignore zone related error stack frames such as
* `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
* import the following file, but please comment it out in production mode
* because it will have performance impact when throw error
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
src/styles.css
+ 16
− 2
View file @ 3184f582
......@@ -36,7 +36,6 @@
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
......@@ -44,11 +43,26 @@
right: 0;
}
.spinner-container-local {
z-index: 999;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
position: absolute;
}
iframe.unitHost {
width: 100%;
background-color: white;
border: none;
margin: 0px;
margin: 0;
}
p.unitMessage {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Impressum | Datenschutzerklärung