Add network status component.
- Tracks status uof user's network connection.
This commit is contained in:
parent
4006369793
commit
a50bc2f50a
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
13
src/app/shared/network-status/network-status.component.html
Normal file
13
src/app/shared/network-status/network-status.component.html
Normal 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>
|
@ -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();
|
||||
});
|
||||
});
|
30
src/app/shared/network-status/network-status.component.ts
Normal file
30
src/app/shared/network-status/network-status.component.ts
Normal 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);
|
||||
}
|
||||
}
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user