connection-status-feature

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json

@@ -51,6 +51,7 @@
     "ManageYourAccount": "Manage your account",
     "OthersGroup": "Other",
     "Today": "Today",
-    "Apply": "Apply"
+    "Apply": "Apply",
+    "InternetConnectionInfo": "The operation could not be performed. Your internet connection is not available at the moment."
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json

@@ -51,6 +51,7 @@
     "ManageYourAccount": "Hesap yönetimi",
     "OthersGroup": "Diğer",
     "Today": "Bugün",
-    "Apply": "Uygula"
+    "Apply": "Uygula",
+    "InternetConnectionInfo": "İşlem gerçekleştirilemedi. İnternet bağlantısı mevcut değil."
   }
 }

npm/ng-packs/apps/dev-app/src/app/app.component.ts

@@ -5,6 +5,7 @@ import { Component } from '@angular/core';
   template: `
     <abp-loader-bar></abp-loader-bar>
     <abp-dynamic-layout></abp-dynamic-layout>
+    <abp-internet-status></abp-internet-status>
   `,
 })
 export class AppComponent {}

npm/ng-packs/apps/dev-app/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CoreModule } from '@abp/ng.core';
 import { registerLocale } from '@abp/ng.core/locale';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { InternetConnectionStatusComponent, ThemeSharedModule } from '@abp/ng.theme.shared';
 import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
 import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
 import { IdentityConfigModule } from '@abp/ng.identity/config';
@@ -39,6 +39,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     ThemeLeptonXModule.forRoot(),
     SideMenuLayoutModule.forRoot(),
     AccountLayoutModule.forRoot(),
+    InternetConnectionStatusComponent
   ],
   providers: [APP_ROUTE_PROVIDER],
   declarations: [AppComponent],

npm/ng-packs/packages/core/src/lib/services/index.ts

@@ -20,3 +20,4 @@ export * from './subscription.service';
 export * from './track-by.service';
 export * from './local-storage.service';
 export * from './window.service';
+export * from './internet-connection-service'

npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { InternalStore } from '../utils/internal-store-utils';
+import { fromEvent, merge, of, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export interface InternetConnectionState{
+  status: boolean;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class InternetConnectionService{
+  private store = new InternalStore<InternetConnectionState>({ status: true });
+  networkStatus$: Subscription = Subscription.EMPTY;
+
+  constructor() {
+    this.init()
+  }
+
+  private init(): void {
+    this.checkNetworkStatus();
+  }
+
+  private checkNetworkStatus() {
+    this.networkStatus$ = merge(
+      of(null),
+      fromEvent(window, 'offline'),
+      fromEvent(window, 'online')
+    )
+    .pipe(map(() => navigator.onLine))
+    .subscribe(status => {
+      this.setStatus(status)
+    });
+  }
+
+  getStatus(){
+    return this.store.state.status
+  }
+
+  getStatus$(){
+    return this.store.sliceState(({ status }) => status);
+  }
+
+  updateStatus$() {
+    return this.store.sliceUpdate(({ status }) => status);
+  }
+
+  setStatus(status: boolean){
+    this.store.patch({ status })
+  }
+
+}

npm/ng-packs/packages/theme-shared/src/lib/components/index.ts

@@ -14,3 +14,4 @@ export * from './password/password.component';
 export * from './card/index';
 export * from './checkbox/checkbox.component';
 export * from './form-input/form-input.component';
+export * from './internet-connection-status/internet-connection-status.component'

npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common'
+import { of } from 'rxjs';
+import { InternetConnectionService, LocalizationModule } from '@abp/ng.core';
+
+@Component({
+  selector: 'abp-internet-status',
+  standalone: true,
+  imports:[CommonModule,LocalizationModule],
+  template: `
+    <div class="status-icon" *ngIf="!(internetConnection$ | async)">
+      <i data-toggle="tooltip" title="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}" data-placement="left" class="fa fa-circle text-blinking blink">
+      </i>
+    </div>
+  `,
+  styles: [`
+    .blink {
+      animation: blinker 0.9s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
+    }
+    @keyframes blinker {  
+      0% { color:#c1c1c1 }
+      70% { color: #DC3545 }
+      100% { color: #DC3545 }
+    }
+
+    .text-blinking{
+      font-size:1.2rem;
+    }
+
+    .status-icon{
+      position: fixed;
+      z-index: 999999;
+      top: 10px;
+      right: 10px;
+    }
+
+    @media (width < 768px){
+      .status-icon{
+        top: 80px;
+      }
+    }
+  `]
+})
+export class InternetConnectionStatusComponent implements OnInit{
+  internetConnection$ = of(true);
+  internetConnectionService = inject(InternetConnectionService)
+
+  ngOnInit(): void {
+    this.internetConnection$ = this.internetConnectionService.getStatus$()
+  }
+  
+}