Add

Mensaje de no hay conexion a internet

Add
Mensaje de no hay conexion a internet
Marcelo Puebla
1 parent 1cf92aac42
Showing 9 changed files with 112 additions and 1 deletions Show diff stats
package-lock.json
package.json
src/app/app.component.ts
src/app/app.module.ts
src/app/shared/internet-connection/internet-connection.component.html
src/app/shared/internet-connection/internet-connection.component.scss
src/app/shared/internet-connection/internet-connection.component.spec.ts
src/app/shared/internet-connection/internet-connection.component.ts
src/assets/img/no-internet.svg
@@ -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",
@@ -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",
 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 &#39;@angular/core&#39;;
 })
 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'
+        });
+      }
+    })
+  }
 }
@@ -11,6 +11,7 @@ import { AdminComponent } from &#39;./modules/admin/admin.component&#39;;
 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 &#39;ngx-bootstrap/modal&#39;;
     SplitPipe,
     AdminComponent,
     FooterComponent,
+    InternetConnectionComponent,
   ],
   imports: [
     BrowserModule,
@@ -31,6 +33,7 @@ import { ModalModule } from &#39;ngx-bootstrap/modal&#39;;
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
     SharedModule.forRoot(),
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  entryComponents: [InternetConnectionComponent]
 })
 export class AppModule { }
@@ -0,0 +1,5 @@
+<div class="bg-primary rounded text-white">
+  <div class="modal-body p-5 text-center">
+    <span class="h4">No hay conexión a internet</span>
+  </div>
+</div>
@@ -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<InternetConnectionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InternetConnectionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InternetConnectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -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() {
+  }
+
+}
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="52.8276mm" height="52.8282mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 3589 3589"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil2 {fill:#FEFEFE}
+    .fil0 {fill:#AA006B}
+    .fil1 {fill:white;fill-opacity:0.521569}
+   ]]>
+  </style>
+ </defs>
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_2654127631552">
+   <path class="fil0" d="M3309 3589l-3029 0c-154,0 -280,-125 -280,-280l0 -3029c0,-154 126,-280 280,-280l3029 0c154,0 280,126 280,280l0 3029c0,155 -125,280 -280,280z"/>
+   <path class="fil1" d="M81 83c51,-51 121,-83 199,-83l3029 0c154,0 280,126 280,280l0 3029c0,77 -31,147 -82,198m-3426 -3424l0 0 0 0z"/>
+  </g>
+  <path class="fil2" d="M1654 1168c-27,3 -51,4 -77,8 -123,24 -204,63 -300,132 -58,41 -129,120 -166,180 -26,45 -37,65 -58,115 -32,73 -56,200 -48,298 8,88 31,197 74,271 33,56 57,103 107,153 25,26 61,63 90,83 16,11 33,25 51,36 87,51 143,76 249,96 26,5 50,6 77,9 29,3 58,5 73,-12 17,-20 9,-48 -8,-59 -17,-10 -53,-7 -77,-9 -43,-3 -109,-17 -143,-30 -21,-9 -41,-15 -61,-25 -66,-34 -127,-70 -177,-125 -29,-32 -32,-31 -60,-70 -155,-215 -157,-505 -1,-720 87,-119 218,-209 365,-240 23,-4 51,-10 75,-11 22,-2 63,1 78,-9 19,-12 26,-40 9,-59 -14,-16 -44,-15 -72,-12z"/>
+  <path class="fil2" d="M1707 1472c-114,13 -178,28 -283,85 -36,20 -135,89 -155,122 -30,50 30,106 76,74 8,-6 18,-16 24,-22 73,-72 173,-119 274,-142 53,-12 114,-13 171,-9 99,7 207,52 270,97 26,19 53,39 76,62 7,7 14,15 27,19 54,18 97,-44 55,-90 -53,-57 -151,-119 -220,-147 -85,-34 -204,-62 -315,-49z"/>
+  <path class="fil2" d="M2565 1858l-147 213c-24,43 40,82 67,40 14,-21 29,-39 43,-61 28,-40 57,-81 86,-122 7,8 14,18 21,28l106 152c36,49 89,4 71,-35 -4,-9 -15,-23 -21,-31 -7,-10 -14,-20 -21,-31l-107 -153 127 -182c13,-18 38,-44 18,-72 -15,-21 -45,-25 -66,3 -12,17 -120,175 -129,182l-126 -181c-20,-29 -52,-24 -66,-3 -20,29 4,51 16,70 15,20 29,41 44,61l42 61c13,20 31,41 42,61z"/>
+  <path class="fil2" d="M1717 1685c-21,3 -36,4 -57,8 -19,5 -33,9 -51,15 -68,21 -113,53 -165,96 -66,55 -19,110 24,108 37,-1 47,-39 118,-77 62,-33 128,-49 216,-42 73,7 142,43 185,77 26,22 45,53 85,39 31,-10 50,-52 25,-84 -20,-24 -47,-42 -71,-60 -19,-15 -61,-36 -84,-46 -59,-24 -147,-46 -225,-34z"/>
+  <path class="fil2" d="M1745 1896c-52,6 -81,14 -118,37 -31,19 -73,45 -63,89 4,18 19,34 38,39 62,16 62,-66 175,-55 64,6 83,43 103,52 45,20 90,-21 75,-66 -10,-27 -57,-59 -83,-71 -34,-15 -80,-30 -127,-25z"/>
+  <path class="fil2" d="M1749 2144c-29,7 -47,32 -40,63 14,65 118,47 102,-25 -5,-25 -31,-45 -62,-38z"/>
+ </g>
+</svg>
...	...	@@ -8402,6 +8402,14 @@
8402	8402	"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
8403	8403	"dev": true
8404	8404	},
	8405	+ "ng-connection-service": {
	8406	+ "version": "1.0.4",
	8407	+ "resolved": "https://registry.npmjs.org/ng-connection-service/-/ng-connection-service-1.0.4.tgz",
	8408	+ "integrity": "sha512-WrZfK+hUzrJS77ItxXI08rUN6Av77W3+LsaJEPufyo2wRe7Tn8xG18FHHEbbgqKkJeDT/yGJBH2xOaT+1jb22g==",
	8409	+ "requires": {
	8410	+ "tslib": "^1.9.0"
	8411	+ }
	8412	+ },
8405	8413	"ngx-bootstrap": {
8406	8414	"version": "5.2.0",
8407	8415	"resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.2.0.tgz",
...	...	@@ -31,6 +31,7 @@
31	31	"jquery": "^3.4.1",
32	32	"js-sha256": "^0.9.0",
33	33	"lodash": "^4.17.15",
	34	+ "ng-connection-service": "^1.0.4",
34	35	"ngx-bootstrap": "^5.2.0",
35	36	"popper.js": "^1.16.0",
36	37	"rxjs": "~6.4.0",
1	1	import { Component } from '@angular/core';
	2	+import { ConnectionService } from 'ng-connection-service';
	3	+import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
	4	+import { InternetConnectionComponent } from './shared/internet-connection/internet-connection.component';
2	5
3	6	@Component({
4	7	selector: 'app-root',
...	...	@@ -7,4 +10,26 @@ import { Component } from '@angular/core';
7	10	})
8	11	export class AppComponent {
9	12	title = 'autoservicio-axion';
	13	+ status = 'ONLINE';
	14	+ isConnected = true;
	15	+ modalRef: BsModalRef;
	16	+
	17	+ constructor(
	18	+ private connectionService: ConnectionService,
	19	+ private modalService: BsModalService,
	20	+ ) {
	21	+ this.connectionService.monitor().subscribe(isConnected => {
	22	+ this.isConnected = isConnected;
	23	+ if (this.isConnected && this.modalRef) {
	24	+ this.modalRef.hide()
	25	+ }
	26	+ else {
	27	+ this.modalRef = this.modalService.show(InternetConnectionComponent, {
	28	+ backdrop: false,
	29	+ ignoreBackdropClick: true,
	30	+ class: 'modal-dialog-centered'
	31	+ });
	32	+ }
	33	+ })
	34	+ }
10	35	}
...	...	@@ -11,6 +11,7 @@ import { AdminComponent } from './modules/admin/admin.component';
11	11	import { FooterComponent } from './shared/footer/footer.component';
12	12	import { SharedModule } from './modules/shared/shared.module';
13	13	import { ModalModule } from 'ngx-bootstrap/modal';
	14	+import { InternetConnectionComponent } from './shared/internet-connection/internet-connection.component';
14	15
15	16	@NgModule({
16	17	declarations: [
...	...	@@ -19,6 +20,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
19	20	SplitPipe,
20	21	AdminComponent,
21	22	FooterComponent,
	23	+ InternetConnectionComponent,
22	24	],
23	25	imports: [
24	26	BrowserModule,
...	...	@@ -31,6 +33,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
31	33	ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
32	34	SharedModule.forRoot(),
33	35	],
34		- bootstrap: [AppComponent]
	36	+ bootstrap: [AppComponent],
	37	+ entryComponents: [InternetConnectionComponent]
35	38	})
36	39	export class AppModule { }
...	...	@@ -0,0 +1,5 @@
	1	+<div class="bg-primary rounded text-white">
	2	+ <div class="modal-body p-5 text-center">
	3	+ <span class="h4">No hay conexión a internet</span>
	4	+ </div>
	5	+</div>
...	...	@@ -0,0 +1,25 @@
	1	+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2	+
	3	+import { InternetConnectionComponent } from './internet-connection.component';
	4	+
	5	+describe('InternetConnectionComponent', () => {
	6	+ let component: InternetConnectionComponent;
	7	+ let fixture: ComponentFixture<InternetConnectionComponent>;
	8	+
	9	+ beforeEach(async(() => {
	10	+ TestBed.configureTestingModule({
	11	+ declarations: [ InternetConnectionComponent ]
	12	+ })
	13	+ .compileComponents();
	14	+ }));
	15	+
	16	+ beforeEach(() => {
	17	+ fixture = TestBed.createComponent(InternetConnectionComponent);
	18	+ component = fixture.componentInstance;
	19	+ fixture.detectChanges();
	20	+ });
	21	+
	22	+ it('should create', () => {
	23	+ expect(component).toBeTruthy();
	24	+ });
	25	+});
...	...	@@ -0,0 +1,15 @@
	1	+import { Component, OnInit } from '@angular/core';
	2	+
	3	+@Component({
	4	+ selector: 'app-internet-connection',
	5	+ templateUrl: './internet-connection.component.html',
	6	+ styleUrls: ['./internet-connection.component.scss']
	7	+})
	8	+export class InternetConnectionComponent implements OnInit {
	9	+
	10	+ constructor() { }
	11	+
	12	+ ngOnInit() {
	13	+ }
	14	+
	15	+}
...	...	@@ -0,0 +1,29 @@
	1	+<?xml version="1.0" encoding="UTF-8"?>
	2	+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	3	+<!-- Creator: CorelDRAW X7 -->
	4	+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="52.8276mm" height="52.8282mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
	5	+viewBox="0 0 3589 3589"
	6	+ xmlns:xlink="http://www.w3.org/1999/xlink">
	7	+ <defs>
	8	+ <style type="text/css">
	9	+ <![CDATA[
	10	+ .fil2 {fill:#FEFEFE}
	11	+ .fil0 {fill:#AA006B}
	12	+ .fil1 {fill:white;fill-opacity:0.521569}
	13	+ ]]>
	14	+ </style>
	15	+ </defs>
	16	+ <g id="Capa_x0020_1">
	17	+ <metadata id="CorelCorpID_0Corel-Layer"/>
	18	+ <g id="_2654127631552">
	19	+ <path class="fil0" d="M3309 3589l-3029 0c-154,0 -280,-125 -280,-280l0 -3029c0,-154 126,-280 280,-280l3029 0c154,0 280,126 280,280l0 3029c0,155 -125,280 -280,280z"/>
	20	+ <path class="fil1" d="M81 83c51,-51 121,-83 199,-83l3029 0c154,0 280,126 280,280l0 3029c0,77 -31,147 -82,198m-3426 -3424l0 0 0 0z"/>
	21	+ </g>
	22	+ <path class="fil2" d="M1654 1168c-27,3 -51,4 -77,8 -123,24 -204,63 -300,132 -58,41 -129,120 -166,180 -26,45 -37,65 -58,115 -32,73 -56,200 -48,298 8,88 31,197 74,271 33,56 57,103 107,153 25,26 61,63 90,83 16,11 33,25 51,36 87,51 143,76 249,96 26,5 50,6 77,9 29,3 58,5 73,-12 17,-20 9,-48 -8,-59 -17,-10 -53,-7 -77,-9 -43,-3 -109,-17 -143,-30 -21,-9 -41,-15 -61,-25 -66,-34 -127,-70 -177,-125 -29,-32 -32,-31 -60,-70 -155,-215 -157,-505 -1,-720 87,-119 218,-209 365,-240 23,-4 51,-10 75,-11 22,-2 63,1 78,-9 19,-12 26,-40 9,-59 -14,-16 -44,-15 -72,-12z"/>
	23	+ <path class="fil2" d="M1707 1472c-114,13 -178,28 -283,85 -36,20 -135,89 -155,122 -30,50 30,106 76,74 8,-6 18,-16 24,-22 73,-72 173,-119 274,-142 53,-12 114,-13 171,-9 99,7 207,52 270,97 26,19 53,39 76,62 7,7 14,15 27,19 54,18 97,-44 55,-90 -53,-57 -151,-119 -220,-147 -85,-34 -204,-62 -315,-49z"/>
	24	+ <path class="fil2" d="M2565 1858l-147 213c-24,43 40,82 67,40 14,-21 29,-39 43,-61 28,-40 57,-81 86,-122 7,8 14,18 21,28l106 152c36,49 89,4 71,-35 -4,-9 -15,-23 -21,-31 -7,-10 -14,-20 -21,-31l-107 -153 127 -182c13,-18 38,-44 18,-72 -15,-21 -45,-25 -66,3 -12,17 -120,175 -129,182l-126 -181c-20,-29 -52,-24 -66,-3 -20,29 4,51 16,70 15,20 29,41 44,61l42 61c13,20 31,41 42,61z"/>
	25	+ <path class="fil2" d="M1717 1685c-21,3 -36,4 -57,8 -19,5 -33,9 -51,15 -68,21 -113,53 -165,96 -66,55 -19,110 24,108 37,-1 47,-39 118,-77 62,-33 128,-49 216,-42 73,7 142,43 185,77 26,22 45,53 85,39 31,-10 50,-52 25,-84 -20,-24 -47,-42 -71,-60 -19,-15 -61,-36 -84,-46 -59,-24 -147,-46 -225,-34z"/>
	26	+ <path class="fil2" d="M1745 1896c-52,6 -81,14 -118,37 -31,19 -73,45 -63,89 4,18 19,34 38,39 62,16 62,-66 175,-55 64,6 83,43 103,52 45,20 90,-21 75,-66 -10,-27 -57,-59 -83,-71 -34,-15 -80,-30 -127,-25z"/>
	27	+ <path class="fil2" d="M1749 2144c-29,7 -47,32 -40,63 14,65 118,47 102,-25 -5,-25 -31,-45 -62,-38z"/>
	28	+ </g>
	29	+</svg>