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"> <app-network-status></app-network-status>
<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>
<router-outlet (activate)="onResize(mediaQuery)"></router-outlet> <router-outlet (activate)="onResize(mediaQuery)"></router-outlet>

View File

@ -14,7 +14,6 @@ export class AppComponent implements OnInit {
readyStateTarget: number = 3; readyStateTarget: number = 3;
readyState: number = 0; readyState: number = 0;
mediaQuery = window.matchMedia('(max-width: 768px)'); mediaQuery = window.matchMedia('(max-width: 768px)');
noInternetConnection: boolean;
constructor( constructor(
private authService: AuthService, private authService: AuthService,
@ -23,7 +22,6 @@ export class AppComponent implements OnInit {
private errorDialogService: ErrorDialogService, private errorDialogService: ErrorDialogService,
private swUpdate: SwUpdate private swUpdate: SwUpdate
) { ) {
this.handleNetworkChange();
(async () => { (async () => {
await this.authService.mutableKeyStore.loadKeyring(); await this.authService.mutableKeyStore.loadKeyring();
this.authService.getPublicKeys() this.authService.getPublicKeys()
@ -82,13 +80,4 @@ export class AppComponent implements OnInit {
const conversion = event.detail.tx; const conversion = event.detail.tx;
await this.transactionService.setConversion(conversion, 100); 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 {TokenRatioPipe} from '@app/shared/_pipes/token-ratio.pipe';
import { ErrorDialogComponent } from './error-dialog/error-dialog.component'; import { ErrorDialogComponent } from './error-dialog/error-dialog.component';
import {MatDialogModule} from '@angular/material/dialog'; 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, MenuSelectionDirective,
MenuToggleDirective, MenuToggleDirective,
TokenRatioPipe, TokenRatioPipe,
ErrorDialogComponent ErrorDialogComponent,
], NetworkStatusComponent
exports: [
TopbarComponent,
FooterComponent,
SidebarComponent,
MenuSelectionDirective,
TokenRatioPipe
], ],
exports: [
TopbarComponent,
FooterComponent,
SidebarComponent,
MenuSelectionDirective,
TokenRatioPipe,
NetworkStatusComponent
],
imports: [ imports: [
CommonModule, CommonModule,
RouterModule, RouterModule,