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 897b62a1d7a8396d2bff7dd54d113b45e1126d9c..efa2ea6fc16e3eea65ccadd52ef554bbfd2c5b5f 100644 --- a/src/app/sys-check/environment-check/environment-check.component.html +++ b/src/app/sys-check/environment-check/environment-check.component.html @@ -1,9 +1,61 @@ - -<mat-card fxFlex="0 2 400px" fxLayout="column"> +<br> +<mat-card> <!-- <button (click)="goto()">Go To</button> --> <!-- <button mat-raised-button (click)="osInfo()">Press for screen size</button> --> - <div>{{ screenSize }} </div> - <br> - <div>{{ result[0] }} {{ result[1] }}</div> <!-- <button mat-raised-button (click)="removeSysInfo()">Hide info</button> --> -</mat-card> \ No newline at end of file + <mat-list> + <mat-list-item *ngIf="discoveredEnvRating.OSRating === 'Good'">OS is <span style="color: darkgreen; font-weight: bold;"> {{discoveredEnvRating.OSRating }} </span> <i class="material-icons networkCheck_inlineIcon">check</i> ({{ osName }}) </mat-list-item> + <mat-divider></mat-divider> + <mat-list-item *ngIf="discoveredEnvRating.OSRating === 'N/A'">OS is <span style="color: orange; font-weight: bold;"> {{discoveredEnvRating.OSRating }} </span> <i class="material-icons networkCheck_inlineIcon">warning</i> ({{ osName }}) </mat-list-item> + <mat-divider></mat-divider> + <mat-list-item *ngIf="discoveredEnvRating.OSRating === 'Not compatible'">OS is <span style="color: red; font-weight: bold;"> {{discoveredEnvRating.OSRating }} </span> <i class="material-icons networkCheck_inlineIcon">error</i> ({{ osName }}) </mat-list-item> + <mat-divider></mat-divider> + + <mat-list-item *ngIf="discoveredEnvRating.ResolutionRating === 'Good'">Resolution is <span style="color: darkgreen; font-weight: bold;"> {{discoveredEnvRating.ResolutionRating}} </span> <i class="material-icons networkCheck_inlineIcon">check</i> ({{ screenSize }})</mat-list-item> + <mat-divider></mat-divider> + <mat-list-item *ngIf="discoveredEnvRating.ResolutionRating === 'N/A'">Resolution is <span style="color: orange; font-weight: bold;"> {{discoveredEnvRating.ResolutionRating}} </span> <i class="material-icons networkCheck_inlineIcon">warning</i> ({{ screenSize }})</mat-list-item> + <mat-divider></mat-divider> + <mat-list-item *ngIf="discoveredEnvRating.ResolutionRating === 'Not compatible'">Resolution is <span style="color: red; font-weight: bold;"> {{discoveredEnvRating.ResolutionRating}} </span> <i class="material-icons networkCheck_inlineIcon">error</i> ({{ screenSize }})</mat-list-item> + <mat-divider></mat-divider> + + <mat-list-item *ngIf="discoveredEnvRating.BrowserRating === 'Good'">Browser is <span style="color: darkgreen; font-weight: bold;"> {{discoveredEnvRating.BrowserRating}} </span> <i class="material-icons networkCheck_inlineIcon">check</i>({{ result[0] }} {{ result[1] }})</mat-list-item> + <mat-list-item *ngIf="discoveredEnvRating.BrowserRating === 'N/A'">Browser is <span style="color: orange; font-weight: bold;"> {{discoveredEnvRating.BrowserRating}} </span> <i class="material-icons networkCheck_inlineIcon">warning</i>({{ result[0] }} {{ result[1] }})</mat-list-item> + <mat-list-item *ngIf="discoveredEnvRating.BrowserRating === 'Not compatible'">Browser is <span style="color: red; font-weight: bold;"> {{discoveredEnvRating.BrowserRating}} </span> <i class="material-icons networkCheck_inlineIcon">error</i>({{ result[0] }} {{ result[1] }})</mat-list-item> + </mat-list> + +</mat-card> +<br> + + + + + + + + + + + +<!-- <p *ngIf="discoveredEnvRating.ResolutionRating === 'Not compatible'"> + Ihre Verbindung zum Testserver ist: <span style="color: red; font-weight: bold;">unzureichend <i class="material-icons networkCheck_inlineIcon">error</i></span> + </p> + + <p *ngIf="networkRating === 'slow'"> + Ihre Verbindung zum Testserver ist: <span style="color: orange; font-weight: bold;">langsam <i class="material-icons networkCheck_inlineIcon">warning</i></span> + </p> + + <p *ngIf="networkRating === 'ok'"> + Ihre Verbindung zum Testserver ist: <span style="color: green; font-weight: bold;">ok <i class="material-icons networkCheck_inlineIcon">check</i></span> + </p> + + <p *ngIf="networkRating === 'fast'"> + Ihre Verbindung zum Testserver ist: <span style="color: green; font-weight: bold;">schnell <i class="material-icons networkCheck_inlineIcon">check</i></span> + </p> + + <p *ngIf="networkRating === 'very fast'"> + Ihre Verbindung zum Testserver ist: <span style="color: darkgreen; font-weight: bold;">sehr schnell <i class="material-icons networkCheck_inlineIcon">check</i></span> + </p> + + <p *ngIf="networkRating === 'wow'"> + Ihre Verbindung zum Testserver ist: <span style="color: darkgreen; font-weight: bold;">sehr schnell (wow!) <i class="material-icons networkCheck_inlineIcon">check</i></span> + </p> --> \ No newline at end of file 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 b25fc3dd10805dacda89b236ae5d9c946bdb61c7..807c23990d32a47da3b711c03fe494c66de583fa 100644 --- a/src/app/sys-check/environment-check/environment-check.component.ts +++ b/src/app/sys-check/environment-check/environment-check.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { SyscheckDataService } from '../syscheck-data.service'; +import { SyscheckDataService, EnvironmentRating, EnvironmentData } from '../syscheck-data.service'; +import { GeneratedFile } from '@angular/compiler'; + @Component({ selector: 'iqb-environment-check', @@ -7,12 +9,31 @@ import { SyscheckDataService } from '../syscheck-data.service'; styleUrls: ['./environment-check.component.css'] }) export class EnvironmentCheckComponent implements OnInit { + environmentRating: EnvironmentRating; screenSize: any; deviceInfo: any; + osName: any = "Unknown"; regex: any; helperRegex: any; isExisting: Array<string>; result: Array<string>; + + + discoveredEnvData: EnvironmentData = { + 'osName': '', + 'browserName': '', + 'browserVersion': '', + 'resolution': { + height: -1, + width: -1 + } + }; + discoveredEnvRating: EnvironmentRating = { + OSRating: 'N/A', + ResolutionRating: 'N/A', + BrowserRating: 'N/A' + }; + constructor( private ds: SyscheckDataService ) { } @@ -25,14 +46,42 @@ export class EnvironmentCheckComponent implements OnInit { this.isExisting = this.helperRegex.exec(this.isExisting[0]); this.result = this.isExisting[0].split("/"); this.screenSize = "Screen size is " + window.screen.width + " pixels by " + window.screen.height + " pixels"; + this.osName = window.navigator.platform; + + + + this.discoveredEnvData = { + osName: this.getOSVersion(), + browserName: this.result[0], + browserVersion: this.result[1], + resolution: { + height: window.screen.height, + width: window.screen.width + } + } + + this.discoveredEnvRating = this.ds.calculateEnvironmentRating(this.discoveredEnvData); + + this.ds.environmentData$.next(this.discoveredEnvData); + } - goto() { - this.ds.questionnaireAvailable$.next(true); + getOSVersion() { + if (window.navigator.userAgent.indexOf("Windows")!= -1) { + if (window.navigator.userAgent.indexOf("Windows NT 10.0")!= -1) this.osName="Windows 10"; + if (window.navigator.userAgent.indexOf("Windows NT 6.2") != -1) this.osName="Windows 8"; + if (window.navigator.userAgent.indexOf("Windows NT 6.1") != -1) this.osName="Windows 7"; + if (window.navigator.userAgent.indexOf("Windows NT 6.0") != -1) this.osName="Windows Vista"; + if (window.navigator.userAgent.indexOf("Windows NT 5.1") != -1) this.osName="Windows XP"; + if (window.navigator.userAgent.indexOf("Windows NT 5.0") != -1) this.osName="Windows 2000"; + } + if (window.navigator.userAgent.indexOf("Mac") != -1) this.osName="Mac/iOS"; + if (window.navigator.userAgent.indexOf("X11") != -1) this.osName="UNIX"; + if (window.navigator.userAgent.indexOf("Linux") != -1) this.osName="Linux"; + return this.osName; } - removeSysInfo() { - this.screenSize = ""; - this.result = []; + goto() { + this.ds.questionnaireAvailable$.next(true); } } diff --git a/src/app/sys-check/sys-check.module.ts b/src/app/sys-check/sys-check.module.ts index bb32ada5cc531b20204b43e9ddfcbd74a3a479e4..7f53a26f6689ad98e6ef06248c96fd1fae21bfb1 100644 --- a/src/app/sys-check/sys-check.module.ts +++ b/src/app/sys-check/sys-check.module.ts @@ -11,6 +11,9 @@ import { FlexLayoutModule } from '@angular/flex-layout'; import { MatButtonModule, MatCheckboxModule, MatMenuModule, MatTooltipModule, MatCardModule, MatStepperModule, MatToolbarModule, MatIconModule, MatDialogModule, MatFormFieldModule, MatInputModule, MatTabsModule, MatProgressSpinnerModule } from '@angular/material'; +import {MatDividerModule} from '@angular/material/divider'; +import {MatListModule} from '@angular/material/list'; + import { EnvironmentCheckComponent } from './environment-check/environment-check.component'; import { NetworkCheckComponent } from './network-check/network-check.component'; import { UnitCheckComponent } from './unit-check/unit-check.component'; @@ -25,7 +28,9 @@ import { ReportComponent } from './report/report.component'; SysCheckRoutingModule, MatProgressSpinnerModule, MatStepperModule, - MatButtonModule + MatButtonModule, + MatDividerModule, + MatListModule ], declarations: [ StartComponent, diff --git a/src/app/sys-check/syscheck-data.service.ts b/src/app/sys-check/syscheck-data.service.ts index e284a6c7f67f51f05e4084a035858b202225a205..7b7f08e0564057c41ed579b649fb6d8dccc1d1f8 100644 --- a/src/app/sys-check/syscheck-data.service.ts +++ b/src/app/sys-check/syscheck-data.service.ts @@ -1,6 +1,7 @@ import { CheckConfigData } from './backend.service'; import { BehaviorSubject } from 'rxjs'; import { Injectable } from '@angular/core'; +import { e } from '@angular/core/src/render3'; @Injectable({ providedIn: 'root' @@ -55,11 +56,37 @@ export class SyscheckDataService { } } -} + public calculateEnvironmentRating(ed: EnvironmentData): EnvironmentRating { + let ratings: EnvironmentRating = { + OSRating: 'N/A', + ResolutionRating: 'N/A', + BrowserRating: 'N/A' + }; + + if(ed.osName === "Windows 7" || ed.osName === "Windows 10" || ed.osName === "Windows 8" || ed.osName === "Mac/iOS") { + ratings.OSRating = 'Good'; + } else if (ed.osName === "Windows Vista" || ed.osName === "Linux" || ed.osName === "UNIX") { + ratings.OSRating = 'Possibly compatible'; + } else { + ratings.OSRating = 'Not compatible'; + } + + if(ed.browserName.indexOf("Chrome") || ed.browserName.indexOf("Mozilla")) + if(parseInt(ed.browserVersion) >= 60) { + ratings.BrowserRating = 'Good' + } + else { + ratings.BrowserRating = 'Not compatible' + } + + if(ed.resolution.width >= 1024 && ed.resolution.height >= 768) { + ratings.ResolutionRating = 'Good' + } else { + ratings.ResolutionRating = 'Not compatible' + } + return ratings; + } -export interface EnvironmentData { - osName: string; - osVersion: string; } export interface NetworkData { @@ -75,3 +102,21 @@ export interface NetworkRequestTestResult { } export type NetworkRating = 'N/A' | 'insufficient' | 'ok' | 'good'; + +export interface EnvironmentData { + osName: string; + // osVersion: string; + browserName: string; + browserVersion: string; + resolution: { + height: number; + width: number; + }; +} + +export interface EnvironmentRating { + OSRating: 'N/A' | 'Good'| 'Not compatible' | 'Possibly compatible'; + ResolutionRating: 'N/A' | 'Good'| 'Not compatible' | 'Possibly compatible'; + BrowserRating: 'N/A' | 'Good'| 'Not compatible' | 'Possibly compatible'; +} +