From 0eadb21f91c2a9f89ecb31f60da20a67d7955b44 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Tue, 4 Jul 2023 18:28:42 +0300 Subject: [PATCH] connection-status-feature --- .../Localization/Resources/AbpUi/en.json | 3 +- .../Localization/Resources/AbpUi/tr.json | 3 +- .../apps/dev-app/src/app/app.component.ts | 1 + .../apps/dev-app/src/app/app.module.ts | 3 +- .../packages/core/src/lib/services/index.ts | 1 + .../services/internet-connection-service.ts | 53 +++++++++++++++++++ .../theme-shared/src/lib/components/index.ts | 1 + .../internet-connection-status.component.ts | 52 ++++++++++++++++++ 8 files changed, 114 insertions(+), 3 deletions(-) create mode 100644 npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts diff --git a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json index b97ca73d1d..35e9e8978a 100644 --- a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json +++ b/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." } } diff --git a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json index 9dc46b85a8..74c712baef 100644 --- a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json +++ b/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." } } diff --git a/npm/ng-packs/apps/dev-app/src/app/app.component.ts b/npm/ng-packs/apps/dev-app/src/app/app.component.ts index a26e745334..44a504b978 100644 --- a/npm/ng-packs/apps/dev-app/src/app/app.component.ts +++ b/npm/ng-packs/apps/dev-app/src/app/app.component.ts @@ -5,6 +5,7 @@ import { Component } from '@angular/core'; template: ` + `, }) export class AppComponent {} diff --git a/npm/ng-packs/apps/dev-app/src/app/app.module.ts b/npm/ng-packs/apps/dev-app/src/app/app.module.ts index 7e903dff0d..b2dc1ba780 100644 --- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts +++ b/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], diff --git a/npm/ng-packs/packages/core/src/lib/services/index.ts b/npm/ng-packs/packages/core/src/lib/services/index.ts index 8ccf802cb7..9b193ab67f 100644 --- a/npm/ng-packs/packages/core/src/lib/services/index.ts +++ b/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' diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts new file mode 100644 index 0000000000..952752d1f8 --- /dev/null +++ b/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({ 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 }) + } + +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts index 238bc19589..3adc055b8c 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts +++ b/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' diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts new file mode 100644 index 0000000000..2a75d8c8b7 --- /dev/null +++ b/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: ` +
+ + +
+ `, + 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$() + } + +}