Merge pull request #17027 from abpframework/connection-status-feature

connection-status-feature

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

@@ -52,6 +52,7 @@
     "OthersGroup": "Other",
     "Today": "Today",
     "Apply": "Apply",
+    "InternetConnectionInfo": "The operation could not be performed. Your internet connection is not available at the moment.",
     "CopiedToTheClipboard": "Copied to the clipboard"
   }
 }

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

@@ -52,6 +52,7 @@
     "OthersGroup": "Diğer",
     "Today": "Bugün",
     "Apply": "Uygula",
+    "InternetConnectionInfo": "İşlem gerçekleştirilemedi. İnternet bağlantısı mevcut değil.",
     "CopiedToTheClipboard": "Panoya kopyalandı"
   }
 }

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,18 @@
+import { DOCUMENT } from '@angular/common';
+import { Injectable, inject } from '@angular/core';
+import { fromEvent, merge, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class InternetConnectionService{
+  protected readonly window = inject(DOCUMENT).defaultView;
+  protected readonly navigator = this.window.navigator;
+
+  networkStatus$ = merge(
+    of(navigator.onLine),
+    fromEvent(window, 'offline'),
+    fromEvent(window, 'online')
+  ).pipe(map(() => navigator.onLine))
+}

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,48 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common'
+import { map } 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="isOffline$ | 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: 26px;
+        right: 134px;
+      }
+    }
+  `]
+})
+export class  InternetConnectionStatusComponent{
+  internetConnectionService = inject(InternetConnectionService)
+  isOffline$ = this.internetConnectionService.networkStatus$.pipe(map((val) => !val));
+}