Commit 267cf108 authored by Christopher Mark Fullarton's avatar Christopher Mark Fullarton
Browse files

Uses bootstrap css variables for the connection quality indicator

parent 04ed50da
......@@ -25,13 +25,12 @@
<svg id="connectionQualityImage"
height="50px"
width="50px"
[style.fill]="connectionService.lowSpeed || !localStorageAvailable || !sessionStorageAvailable ? 'red' : connectionService.mediumSpeed ? 'orange' : !connectionService.serverAvailable ? '#9e9e9e' : 'green'"
[style.fill]="generateConnectionQualityColor()"
(click)="openConnectionQualityModal(connectionQualityModal)"
viewBox="0 0 128 128"
version="1.1"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
>
xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<path id="firstRow" d="M73.143,79.904c-2.585-1.189-5.692-2.014-9.139-2.01c-3.446-0.004-6.553,0.82-9.137,2.01 c-2.609,1.201-4.702,2.736-6.365,4.236l8.505,8.506c0.894-0.744,1.919-1.426,3.031-1.912c1.199-0.52,2.473-0.836,3.965-0.84 c1.564,0.004,2.891,0.352,4.139,0.918c1.047,0.475,2.007,1.137,2.855,1.842l8.515-8.514c-0.008-0.008-0.016-0.016-0.023-0.021 C77.832,82.629,75.736,81.096,73.143,79.904z"></path>
......
import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ConnectionService } from '../../service/connection/connection.service';
......@@ -85,6 +86,7 @@ export class HeaderComponent implements OnInit {
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
private sanitizer: DomSanitizer,
private router: Router,
private modalService: NgbModal,
public headerLabelService: HeaderLabelService,
......@@ -93,6 +95,16 @@ export class HeaderComponent implements OnInit {
) {
}
public generateConnectionQualityColor(): SafeStyle {
const colorCode = this.connectionService.lowSpeed ||
!this.localStorageAvailable ||
!this.sessionStorageAvailable ? 'var(--danger)' :
this.connectionService.mediumSpeed ? 'var(--danger)' :
!this.connectionService.serverAvailable ? 'var(--grey)' :
'var(--success)';
return this.sanitizeStyle(colorCode);
}
public ngOnInit(): void {
this.router.events.subscribe((url: any) => {
if (isPlatformBrowser(this.platformId)) {
......@@ -119,4 +131,9 @@ export class HeaderComponent implements OnInit {
this.modalService.open(content);
this.connectionService.calculateRTT();
}
private sanitizeStyle(value: string): SafeStyle {
value = value.replace(/\s/g, '');
return this.sanitizer.bypassSecurityTrustStyle(`${value}`);
}
}
......@@ -136,7 +136,6 @@ export class ConnectionService {
}
public calculateRTT(startTime = new Date().getTime()): void {
console.log('calculateRTT');
this.http.options(`${DefaultSettings.httpApiEndpoint}`).subscribe(
() => {
this.serverAvailable = true;
......
Markdown is supported
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