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">
|
<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>
|
||||||
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
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 {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,
|
||||||
|
Loading…
Reference in New Issue
Block a user