diff --git a/package-lock.json b/package-lock.json index ab600f7..22a1ca2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8402,6 +8402,14 @@ "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", "dev": true }, + "ng-connection-service": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/ng-connection-service/-/ng-connection-service-1.0.4.tgz", + "integrity": "sha512-WrZfK+hUzrJS77ItxXI08rUN6Av77W3+LsaJEPufyo2wRe7Tn8xG18FHHEbbgqKkJeDT/yGJBH2xOaT+1jb22g==", + "requires": { + "tslib": "^1.9.0" + } + }, "ngx-bootstrap": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.2.0.tgz", diff --git a/package.json b/package.json index 0a577d8..7b6d12d 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "jquery": "^3.4.1", "js-sha256": "^0.9.0", "lodash": "^4.17.15", + "ng-connection-service": "^1.0.4", "ngx-bootstrap": "^5.2.0", "popper.js": "^1.16.0", "rxjs": "~6.4.0", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 459968a..b79b78a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,7 @@ import { Component } from '@angular/core'; +import { ConnectionService } from 'ng-connection-service'; +import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; +import { InternetConnectionComponent } from './shared/internet-connection/internet-connection.component'; @Component({ selector: 'app-root', @@ -7,4 +10,26 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'autoservicio-axion'; + status = 'ONLINE'; + isConnected = true; + modalRef: BsModalRef; + + constructor( + private connectionService: ConnectionService, + private modalService: BsModalService, + ) { + this.connectionService.monitor().subscribe(isConnected => { + this.isConnected = isConnected; + if (this.isConnected && this.modalRef) { + this.modalRef.hide() + } + else { + this.modalRef = this.modalService.show(InternetConnectionComponent, { + backdrop: false, + ignoreBackdropClick: true, + class: 'modal-dialog-centered' + }); + } + }) + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2670aee..98288b9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,6 +11,7 @@ import { AdminComponent } from './modules/admin/admin.component'; import { FooterComponent } from './shared/footer/footer.component'; import { SharedModule } from './modules/shared/shared.module'; import { ModalModule } from 'ngx-bootstrap/modal'; +import { InternetConnectionComponent } from './shared/internet-connection/internet-connection.component'; @NgModule({ declarations: [ @@ -19,6 +20,7 @@ import { ModalModule } from 'ngx-bootstrap/modal'; SplitPipe, AdminComponent, FooterComponent, + InternetConnectionComponent, ], imports: [ BrowserModule, @@ -31,6 +33,7 @@ import { ModalModule } from 'ngx-bootstrap/modal'; ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), SharedModule.forRoot(), ], - bootstrap: [AppComponent] + bootstrap: [AppComponent], + entryComponents: [InternetConnectionComponent] }) export class AppModule { } diff --git a/src/app/shared/internet-connection/internet-connection.component.html b/src/app/shared/internet-connection/internet-connection.component.html new file mode 100644 index 0000000..7b1a7b1 --- /dev/null +++ b/src/app/shared/internet-connection/internet-connection.component.html @@ -0,0 +1,5 @@ +
+
+ No hay conexión a internet +
+
diff --git a/src/app/shared/internet-connection/internet-connection.component.scss b/src/app/shared/internet-connection/internet-connection.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/internet-connection/internet-connection.component.spec.ts b/src/app/shared/internet-connection/internet-connection.component.spec.ts new file mode 100644 index 0000000..7e6961b --- /dev/null +++ b/src/app/shared/internet-connection/internet-connection.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InternetConnectionComponent } from './internet-connection.component'; + +describe('InternetConnectionComponent', () => { + let component: InternetConnectionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InternetConnectionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InternetConnectionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/internet-connection/internet-connection.component.ts b/src/app/shared/internet-connection/internet-connection.component.ts new file mode 100644 index 0000000..75a5658 --- /dev/null +++ b/src/app/shared/internet-connection/internet-connection.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-internet-connection', + templateUrl: './internet-connection.component.html', + styleUrls: ['./internet-connection.component.scss'] +}) +export class InternetConnectionComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/assets/img/no-internet.svg b/src/assets/img/no-internet.svg new file mode 100644 index 0000000..aa406eb --- /dev/null +++ b/src/assets/img/no-internet.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + +