TTA 115 time tracker doesnt notifies the user when they lost internet connection or have a slow connection

src/app/app.component.html

@@ -1 +1,13 @@
+<app-internet-connection-status listen="true">
+
+	<ng-container *fast>
+	</ng-container>
+
+	<ng-container *slow>
+	</ng-container>
+
+    <ng-container *offline>
+	</ng-container>
+
+</app-internet-connection-status>
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -95,6 +95,11 @@ import { SearchUserComponent } from './modules/shared/components/search-user/sea
 import { TimeRangeCustomComponent } from './modules/reports/components/time-range-custom/time-range-custom.component';
 import { TimeRangeHeaderComponent } from './modules/reports/components/time-range-custom/time-range-header/time-range-header.component';
 import { TimeRangeOptionsComponent } from './modules/reports/components/time-range-custom/time-range-options/time-range-options.component';
+import { InternetConnectionStatusComponent } from './modules/internet-connection-status/internet-connection-status.component';
+import { FastDirective} from './modules/internet-connection-status/internet-connection-directives/fast.directive';
+import { SlowDirective} from './modules/internet-connection-status/internet-connection-directives/slow.directive';
+import { OfflineDirective} from './modules/internet-connection-status/internet-connection-directives/offline.directive';
+import { ConnectionDirective } from './modules/internet-connection-status/internet-connection-directives/connection.directive';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -154,6 +159,11 @@ const maskConfig: Partial<IConfig> = {
     TimeRangeCustomComponent,
     TimeRangeHeaderComponent,
     TimeRangeOptionsComponent,
+    InternetConnectionStatusComponent,
+    SlowDirective,
+    FastDirective,
+    OfflineDirective,
+    ConnectionDirective
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

src/app/modules/activities-management/store/activity-management.effects.ts

@@ -9,13 +9,15 @@ import { ToastrService } from 'ngx-toastr';
 import * as actions from './activity-management.actions';
 import { Activity, ActivityStatus } from './../../shared/models/activity.model';
 import { ActivityService } from './../services/activity.service';
+import { StatusNetworkService } from '../../shared/services/status-network.service';
 
 @Injectable()
 export class ActivityEffects {
   constructor(
     private actions$: Actions,
     private activityService: ActivityService,
-    private toastrService: ToastrService
+    private toastrService: ToastrService,
+    private statusNetworkService: StatusNetworkService
   ) { }
 
   @Effect()
@@ -27,7 +29,7 @@ export class ActivityEffects {
           return new actions.LoadActivitiesSuccess(activities);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.LoadActivitiesFail(error));
         })
       )
@@ -45,7 +47,7 @@ export class ActivityEffects {
           return new actions.CreateActivitySuccess(activityData);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.CreateActivityFail(error));
         })
       )
@@ -66,7 +68,7 @@ export class ActivityEffects {
           return new actions.ArchiveActivitySuccess(activity);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.ArchiveActivityFail(error));
         })
       )
@@ -84,7 +86,7 @@ export class ActivityEffects {
           return new actions.UpdateActivitySuccess(activityData);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.UpdateActivityFail(error));
         })
       )
@@ -106,7 +108,7 @@ export class ActivityEffects {
           return new actions.UnarchiveActivitySuccess(activityData);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.UnarchiveActivityFail(error));
         })
       )

src/app/modules/customer-management/components/projects-type/services/project-type.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
-
 import { environment } from '../../../../../../environments/environment';
 import { ProjectType } from '../../../../shared/models';
 

src/app/modules/customer-management/components/projects-type/store/project-type.effects.ts

@@ -9,13 +9,15 @@ import * as actions from './project-type.actions';
 import { ProjectType } from '../../../../shared/models';
 import { ProjectTypeService } from '../services/project-type.service';
 import { ToastrService } from 'ngx-toastr';
+import { StatusNetworkService } from '../../../../shared/services/status-network.service';
 
 @Injectable()
 export class ProjectTypeEffects {
   constructor(
     private actions$: Actions,
     private projectTypeService: ProjectTypeService,
-    private toastrService: ToastrService
+    private toastrService: ToastrService,
+    private statusNetworkService: StatusNetworkService
   ) { }
 
   @Effect()
@@ -27,7 +29,7 @@ export class ProjectTypeEffects {
           return new actions.LoadProjectTypesSuccess(projectTypes);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.LoadProjectTypesFail(error));
         })
       )
@@ -45,7 +47,7 @@ export class ProjectTypeEffects {
           return new actions.CreateProjectTypeSuccess(projectTypeData);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.CreateProjectTypeFail(error));
         })
       )
@@ -63,7 +65,7 @@ export class ProjectTypeEffects {
           return new actions.DeleteProjectTypeSuccess(protectTypeId);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.DeleteProjectTypeFail(error));
         })
       )
@@ -81,7 +83,7 @@ export class ProjectTypeEffects {
           return new actions.UpdateProjectTypeSuccess(projectTypeData);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.UpdateProjectTypeFail(error));
         })
       )

src/app/modules/customer-management/components/projects/components/store/project.effects.ts

@@ -8,13 +8,15 @@ import { ProjectService } from '../services/project.service';
 import * as actions from './project.actions';
 import { ToastrService } from 'ngx-toastr';
 import { Status } from 'src/app/modules/shared/models';
+import { StatusNetworkService } from '../../../../../shared/services/status-network.service';
 
 @Injectable()
 export class ProjectEffects {
   constructor(
     private actions$: Actions,
     private projectService: ProjectService,
-    private toastrService: ToastrService
+    private toastrService: ToastrService,
+    private statusNetworkService: StatusNetworkService
   ) { }
 
   @Effect()
@@ -26,7 +28,7 @@ export class ProjectEffects {
           return new actions.LoadProjectsSuccess(projects);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.LoadProjectsFail(error));
         })
       )
@@ -42,7 +44,7 @@ export class ProjectEffects {
           return new actions.LoadCustomerProjectsSuccess(project);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.LoadCustomerProjectsFail(error));
         })
       )
@@ -58,7 +60,7 @@ export class ProjectEffects {
           return new actions.LoadRecentProjectsSuccess(projects);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.LoadRecentProjectsFail(error));
         })
       )
@@ -76,7 +78,7 @@ export class ProjectEffects {
           return new actions.CreateProjectSuccess(projectData);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.CreateProjectFail(error));
         })
       )
@@ -94,7 +96,7 @@ export class ProjectEffects {
           return new actions.UpdateProjectSuccess(projectData);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.UpdateProjectFail(error));
         })
       )
@@ -112,7 +114,7 @@ export class ProjectEffects {
           return new actions.DeleteProjectSuccess(projectId);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.DeleteProjectFail(error));
         })
       )
@@ -133,7 +135,7 @@ export class ProjectEffects {
           return new actions.UnarchiveProjectSuccess(projectData);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.UnarchiveProjectFail(error));
         })
       )

src/app/modules/customer-management/store/customer-management.effects.ts

@@ -9,13 +9,15 @@ import { ToastrService } from 'ngx-toastr';
 import { CustomerService } from '../services/customer.service';
 import * as actions from './customer-management.actions';
 import { Status } from '../../shared/models/customer.model';
+import { StatusNetworkService } from '../../shared/services/status-network.service';
 
 @Injectable()
 export class CustomerEffects {
   constructor(
     private actions$: Actions,
     private customerService: CustomerService,
-    private toastrService: ToastrService
+    private toastrService: ToastrService,
+    private statusNetworkService: StatusNetworkService
   ) { }
 
   @Effect()
@@ -27,7 +29,7 @@ export class CustomerEffects {
           return new actions.LoadCustomersSuccess(customers);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.LoadCustomersFail(error));
         }
         )
@@ -46,7 +48,7 @@ export class CustomerEffects {
           return new actions.CreateCustomerSuccess(customerData);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.CreateCustomerFail(error));
         })
       )
@@ -64,7 +66,7 @@ export class CustomerEffects {
           return new actions.DeleteCustomerSuccesss(customerId);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.DeleteCustomerFail(error));
         })
       )
@@ -82,7 +84,7 @@ export class CustomerEffects {
           return new actions.UpdateCustomerSuccess(customerData);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.UpdateCustomerFail(error));
         })
       )
@@ -104,7 +106,7 @@ export class CustomerEffects {
           return new actions.UpdateCustomerSuccess(customerData);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
+          this.statusNetworkService.checkTypeError({error, isError: true});
           return of(new actions.UpdateCustomerFail(error));
         })
       )

src/app/modules/internet-connection-status/internet-connection-directives/connection.directive.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed } from '@angular/core/testing';
+import { ConnectionDirective } from './connection.directive';
+
+describe('ConnectionDirective', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ConnectionDirective]
+      });
+  });
+
+  it('should create an instance', () => {
+    const directive = new ConnectionDirective('slowSrc', 'fastSrc', 'offlineSrc', undefined);
+    expect(directive).toBeTruthy();
+  });
+});

src/app/modules/internet-connection-status/internet-connection-directives/connection.directive.ts

@@ -0,0 +1,34 @@
+import { Directive, Attribute, ElementRef, OnInit } from '@angular/core';
+
+@Directive({
+    selector: '[appConnection]'
+})
+
+export class ConnectionDirective implements OnInit {
+    constructor(
+        @Attribute('slowSrc') private slowSrc,
+        @Attribute('fastSrc') private fastSrc,
+        @Attribute('offlineSrc') private offlineSrc,
+        private host: ElementRef<HTMLImageElement>
+    ) {
+    }
+
+    ngOnInit() {
+        const { effectiveType } = navigator.connection;
+        let networkSatus;
+        if (!(/\fast-5g|3g|4g/.test(effectiveType)) || !(/\slow-2g|2g/.test(effectiveType))){
+            networkSatus = this.offlineSrc;
+        }
+
+        if (/\fast-5g|3g|4g/.test(effectiveType)) {
+            networkSatus = this.fastSrc;
+        }
+
+        if (/\slow-2g|2g/.test(effectiveType))  {
+            networkSatus = this.slowSrc;
+        }
+
+        this.host.nativeElement.setAttribute('src', networkSatus);
+    }
+
+}

src/app/modules/internet-connection-status/internet-connection-directives/fast.directive.spec.ts

@@ -0,0 +1,14 @@
+import { TestBed } from '@angular/core/testing';
+import { FastDirective } from './fast.directive';
+
+describe('FastDirective', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [FastDirective]
+        });
+    });
+    it('should create an instance', () => {
+    const directive = new FastDirective(undefined);
+    expect(directive).toBeTruthy();
+    });
+});

src/app/modules/internet-connection-status/internet-connection-directives/fast.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: '[appFast]'
+})
+
+export class FastDirective {
+
+    constructor(public tpl: TemplateRef<any>) { }
+
+}

src/app/modules/internet-connection-status/internet-connection-directives/offline.directive.spec.ts

@@ -0,0 +1,14 @@
+import { TestBed } from '@angular/core/testing';
+import { OfflineDirective } from './offline.directive';
+
+describe('FastDirective', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [OfflineDirective]
+        });
+    });
+    it('should create an instance', () => {
+    const directive = new OfflineDirective(undefined);
+    expect(directive).toBeTruthy();
+    });
+});