peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 20:47:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

web background color change on network status

Browse Source
This commit is contained in:
Eudes Inácio
2021-08-23 11:35:20 +01:00
parent ead0917460
commit bbf0412818
5 changed files with 63 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config.xml
+1 -1
View File
@@ -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 original-src="index.html" src="http://localhost:8100" />
<content src="index.html" />
<access origin="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
src/app/services/network.service.spec.ts
+16
View File
@@ -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
+31
View File
@@ -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
+9 -1
View File
@@ -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);
src/global.scss
+6 -2
View File
@@ -731,7 +731,11 @@ app-header-no-search .ion-toolbar{
} */
:root {
--color : #0782C9;
--color : hsl(202, 93%, 41%);
--color2: #45BAFF;
--color3: #0782C9;
--color4: #0782c9f0;
--color5: #45BAFF;
}
body, .blue-background{ background: var(--color) !important;}
@@ -739,7 +743,7 @@ body, .blue-background{ background: var(--color) !important;}
@media only screen and (min-width: 1365px) {
body{
background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;
background: linear-gradient(270deg, var(--color2) 0%, var(--color3) 23.44%, var(--color4) 78.13%, var(--color5) 100%) !important;
}
.blue-background {
background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;