From 0eadb21f91c2a9f89ecb31f60da20a67d7955b44 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Tue, 4 Jul 2023 18:28:42 +0300 Subject: [PATCH 1/5] 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$() + } + +} From aba0abf6c8a45a9a2a40dc78b185e8b8e9bab761 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Wed, 5 Jul 2023 10:14:14 +0300 Subject: [PATCH 2/5] fixed lint error on async pipe --- .../services/internet-connection-service.ts | 47 +++---------------- .../internet-connection-status.component.ts | 15 ++---- 2 files changed, 11 insertions(+), 51 deletions(-) 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 index 952752d1f8..a6ca923dd1 100644 --- 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 @@ -1,6 +1,5 @@ import { Injectable } from '@angular/core'; -import { InternalStore } from '../utils/internal-store-utils'; -import { fromEvent, merge, of, Subscription } from 'rxjs'; +import { fromEvent, merge, of } from 'rxjs'; import { map } from 'rxjs/operators'; export interface InternetConnectionState{ @@ -11,43 +10,9 @@ export interface InternetConnectionState{ 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 }) - } - + networkStatus$ = merge( + of(null), + fromEvent(window, 'offline'), + fromEvent(window, 'online') + ).pipe(map(() => navigator.onLine)) } 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 index 2a75d8c8b7..7582c24afc 100644 --- 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 @@ -1,6 +1,6 @@ -import { Component, OnInit, inject } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { CommonModule } from '@angular/common' -import { of } from 'rxjs'; +import { map } from 'rxjs'; import { InternetConnectionService, LocalizationModule } from '@abp/ng.core'; @Component({ @@ -8,7 +8,7 @@ import { InternetConnectionService, LocalizationModule } from '@abp/ng.core'; standalone: true, imports:[CommonModule,LocalizationModule], template: ` -
+
@@ -41,12 +41,7 @@ import { InternetConnectionService, LocalizationModule } from '@abp/ng.core'; } `] }) -export class InternetConnectionStatusComponent implements OnInit{ - internetConnection$ = of(true); +export class InternetConnectionStatusComponent{ internetConnectionService = inject(InternetConnectionService) - - ngOnInit(): void { - this.internetConnection$ = this.internetConnectionService.getStatus$() - } - + isOffline$ = this.internetConnectionService.networkStatus$.pipe(map((val) => !val)); } From 96d9bfecde9165ba398c845ac6417895897a1082 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Wed, 5 Jul 2023 11:28:22 +0300 Subject: [PATCH 3/5] remove unnecessary interface --- .../core/src/lib/services/internet-connection-service.ts | 4 ---- 1 file changed, 4 deletions(-) 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 index a6ca923dd1..5a97bc120c 100644 --- 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 @@ -2,10 +2,6 @@ import { Injectable } from '@angular/core'; import { fromEvent, merge, of } from 'rxjs'; import { map } from 'rxjs/operators'; -export interface InternetConnectionState{ - status: boolean; -} - @Injectable({ providedIn: 'root', }) From 70e1927f537ddd7bd86af82e103bb7e013a85e52 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Wed, 5 Jul 2023 15:15:52 +0300 Subject: [PATCH 4/5] sending navigator.onLine instead of null --- .../core/src/lib/services/internet-connection-service.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 index 5a97bc120c..a38f429d64 100644 --- 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 @@ -1,4 +1,5 @@ -import { Injectable } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; +import { Injectable, inject } from '@angular/core'; import { fromEvent, merge, of } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -6,8 +7,11 @@ import { map } from 'rxjs/operators'; providedIn: 'root', }) export class InternetConnectionService{ + protected readonly window = inject(DOCUMENT).defaultView; + protected readonly navigator = this.window.navigator; + networkStatus$ = merge( - of(null), + of(navigator.onLine), fromEvent(window, 'offline'), fromEvent(window, 'online') ).pipe(map(() => navigator.onLine)) From 691e7592695f081d200f058cd8795ddb02b42bc0 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Thu, 6 Jul 2023 10:02:00 +0300 Subject: [PATCH 5/5] change place in mobile --- .../internet-connection-status.component.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 index 7582c24afc..c944e67ac1 100644 --- 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 @@ -36,12 +36,13 @@ import { InternetConnectionService, LocalizationModule } from '@abp/ng.core'; @media (width < 768px){ .status-icon{ - top: 80px; + top: 26px; + right: 134px; } } `] }) -export class InternetConnectionStatusComponent{ +export class InternetConnectionStatusComponent{ internetConnectionService = inject(InternetConnectionService) isOffline$ = this.internetConnectionService.networkStatus$.pipe(map((val) => !val)); }