web background color change on network status

src/app/services/network.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NetworkService } from './network.service';
+
+describe('NavigationService', () => {
+  let service: NetworkService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NetworkService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/network.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Network } from '@ionic-native/network/ngx';
+import { Platform } from '@ionic/angular';
+import { fromEvent, merge, of, Observable } from 'rxjs';
+import { mapTo } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NetworkService {
+
+    constructor(
+        private network: Network) { }
+
+    checkNetworkConnection(){
+        this.network.onConnect().subscribe((value) => {
+            
+            document.body.style.setProperty(`--color`, "#0782C9");
+            
+            console.log('network connected!',value);
+          });
+    }
+
+    checkNetworkDisconnection(){
+        this.network.onDisconnect().subscribe((value) => {
+            document.body.style.setProperty(`--color`, "#eeeb30");
+            console.log('network was disconnected :-('),value;
+      
+          });
+    }
+}

src/app/services/socket/synchro.service.ts

@@ -56,6 +56,10 @@ export class SynchroService {
 
 	private onopen = () =>{
     document.body.style.setProperty(`--color`, "#0782C9");
+    document.body.style.setProperty(`--color2`, "#45BAFF");
+    document.body.style.setProperty(`--color3`, "#0782C9");
+    document.body.style.setProperty(`--color4`, "#0782c9f0");
+    document.body.style.setProperty(`--color5`, "#45BAFF");
     console.log('open ======================= welcome to socket server')
 
 	}
@@ -86,7 +90,11 @@ export class SynchroService {
 				// event.code is usually 1006 in this case
 				console.log('[close] Connection died');
         console.log('Reconnect')
-        document.body.style.setProperty(`--color`, "#eeeb30");
+        document.body.style.setProperty(`--color`, "#ffb703");
+        document.body.style.setProperty(`--color2`, "#ffb703");
+        document.body.style.setProperty(`--color3`, "#ffb703");
+        document.body.style.setProperty(`--color4`, "#ffb703");
+        document.body.style.setProperty(`--color5`, "#ffb703");
         this.connect()
 			}
 		}, 100);