Add network status component.

- Tracks status uof user's network connection.
This commit is contained in:
Spencer Ofwiti 2021-04-06 10:32:52 +03:00
parent 4006369793
commit a50bc2f50a
7 changed files with 80 additions and 27 deletions

View File

@ -1,9 +1,2 @@
<nav class="navbar navbar-dark bg-dark">
<h1 class="navbar-brand">
<strong *ngIf="noInternetConnection" style="color: red;">OFFLINE </strong>
<img *ngIf="noInternetConnection" width="20rem" src="assets/images/no-wifi.svg" alt="Internet Disconnected">
<strong *ngIf="!noInternetConnection" style="color: lawngreen;">ONLINE </strong>
<img *ngIf="!noInternetConnection" width="20rem" src="assets/images/wifi.svg" alt="Internet Connected">
</h1>
</nav>
<app-network-status></app-network-status>
<router-outlet (activate)="onResize(mediaQuery)"></router-outlet>

View File

@ -14,7 +14,6 @@ export class AppComponent implements OnInit {
readyStateTarget: number = 3;
readyState: number = 0;
mediaQuery = window.matchMedia('(max-width: 768px)');
noInternetConnection: boolean;
constructor(
private authService: AuthService,
@ -23,7 +22,6 @@ export class AppComponent implements OnInit {
private errorDialogService: ErrorDialogService,
private swUpdate: SwUpdate
) {
this.handleNetworkChange();
(async () => {
await this.authService.mutableKeyStore.loadKeyring();
this.authService.getPublicKeys()
@ -82,13 +80,4 @@ export class AppComponent implements OnInit {
const conversion = event.detail.tx;
await this.transactionService.setConversion(conversion, 100);
}
handleNetworkChange(): void {
if (navigator.onLine) {
this.noInternetConnection = false;
} else {
this.noInternetConnection = true;
}
console.log(this.noInternetConnection);
}
}

View File

@ -0,0 +1,13 @@
<nav class="navbar navbar-dark bg-dark">
<h1 class="navbar-brand">
<div *ngIf="noInternetConnection; then offlineBlock else onlineBlock"></div>
<ng-template #offlineBlock>
<strong style="color: red;">OFFLINE </strong>
<img width="20rem" src="assets/images/no-wifi.svg" alt="Internet Disconnected">
</ng-template>
<ng-template #onlineBlock>
<strong style="color: lawngreen;">ONLINE </strong>
<img width="20rem" src="assets/images/wifi.svg" alt="Internet Connected">
</ng-template>
</h1>
</nav>

View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NetworkStatusComponent } from './network-status.component';
describe('NetworkStatusComponent', () => {
let component: NetworkStatusComponent;
let fixture: ComponentFixture<NetworkStatusComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ NetworkStatusComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(NetworkStatusComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,30 @@
import {Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef} from '@angular/core';
@Component({
selector: 'app-network-status',
templateUrl: './network-status.component.html',
styleUrls: ['./network-status.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class NetworkStatusComponent implements OnInit {
noInternetConnection: boolean = !navigator.onLine;
constructor(
private cdr: ChangeDetectorRef,
) {
this.handleNetworkChange();
}
ngOnInit(): void {
}
handleNetworkChange(): void {
setTimeout(() => {
if (!navigator.onLine !== this.noInternetConnection) {
this.noInternetConnection = !navigator.onLine;
this.cdr.detectChanges();
}
this.handleNetworkChange();
}, 5000);
}
}

View File

@ -10,6 +10,7 @@ import {MatIconModule} from '@angular/material/icon';
import {TokenRatioPipe} from '@app/shared/_pipes/token-ratio.pipe';
import { ErrorDialogComponent } from './error-dialog/error-dialog.component';
import {MatDialogModule} from '@angular/material/dialog';
import { NetworkStatusComponent } from './network-status/network-status.component';
@ -21,15 +22,17 @@ import {MatDialogModule} from '@angular/material/dialog';
MenuSelectionDirective,
MenuToggleDirective,
TokenRatioPipe,
ErrorDialogComponent
],
exports: [
TopbarComponent,
FooterComponent,
SidebarComponent,
MenuSelectionDirective,
TokenRatioPipe
ErrorDialogComponent,
NetworkStatusComponent
],
exports: [
TopbarComponent,
FooterComponent,
SidebarComponent,
MenuSelectionDirective,
TokenRatioPipe,
NetworkStatusComponent
],
imports: [
CommonModule,
RouterModule,