Check network connection and background colorchange

config.xml

@@ -3,7 +3,7 @@
     <name>gabinete digital</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
-    <content src="index.html" />
+    <content original-src="index.html" src="http://localhost:8100" />
     <access origin="*" />
     <allow-navigation href="http://*/*" />
     <allow-navigation href="https://*/*" />

src/app/app.module.ts

@@ -34,6 +34,7 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
 // import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
 import {MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
 import { NgxMatDateFormats, NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
+import { Network } from '@ionic-native/network/ngx';
 
 
 import {
@@ -100,6 +101,7 @@ import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
     WebsocketService,
     ChatService,
     ScreenOrientation,
+    Network
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

src/app/home/home.page.ts

@@ -14,6 +14,7 @@ import { ToDayEventStorage } from '../store/to-day-event-storage.service';
 import { DocumentCounterService } from 'src/app/OtherService/document-counter.service'
 import { PermissionService } from '../OtherService/permission.service';
 import { TotalDocumentService, TotalDocumentStore } from '../store/total-document.service';
+import { NetworkService } from '../services/network.service';
 
 
 // import * as Sentry from "@sentry/browser";
@@ -74,6 +75,7 @@ export class HomePage implements OnInit {
     private platform: Platform,
     private activeroute: ActivatedRoute,
     public documentCounterService: DocumentCounterService,
+    private network: NetworkService,
     public p: PermissionService) {
 
     this.router.events.subscribe((val) => {
@@ -87,7 +89,8 @@ export class HomePage implements OnInit {
   }
 
   ngOnInit() {
-
+    /* this.network.checkNetworkConnection;
+    this.network.checkNetworkDisconnection; */
     console.log('Active route ', this.router.url)
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
       console.log('Notifications not supported')
@@ -99,6 +102,8 @@ export class HomePage implements OnInit {
 
   }
 
+  
+
   mobilefirstConnect() {
 
     if(window['WLAuthorizationManager']) {

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

@@ -55,6 +55,7 @@ export class SynchroService {
 	}
 
 	private onopen = () =>{
+    document.body.style.setProperty(`--color`, "#0782C9");
     console.log('open ======================= welcome to socket server')
 
 	}
@@ -85,6 +86,7 @@ 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");
         this.connect()
 			}
 		}, 100);

src/global.scss

@@ -730,8 +730,11 @@ app-header-no-search  .ion-toolbar{
     overflow-y: auto !important;
 } */
 
+:root {
+    --color : #0782C9;
+    }
 
-body, .blue-background{ background: #0782C9 !important;}
+body, .blue-background{ background: var(--color) !important;}
 
 @media only screen and (min-width: 1365px) {