From a18d48665e7919145f7b76fc37f8cf95daf19724 Mon Sep 17 00:00:00 2001
From: Sinan997 <sinanozturk997@gmail.com>
Date: Tue, 26 Mar 2024 17:58:40 +0300
Subject: [PATCH] add network status component to template

---
 .../apps/dev-app/src/app/app.module.ts        |  2 +-
 .../services/internet-connection-service.ts   | 22 ++---
 .../internet-connection-status.component.ts   | 83 +++++++++++--------
 .../app/angular/src/app/app.component.ts      |  1 +
 templates/app/angular/src/app/app.module.ts   |  3 +-
 5 files changed, 64 insertions(+), 47 deletions(-)

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 b2dc1ba780..f144639db4 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
@@ -39,7 +39,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     ThemeLeptonXModule.forRoot(),
     SideMenuLayoutModule.forRoot(),
     AccountLayoutModule.forRoot(),
-    InternetConnectionStatusComponent
+    InternetConnectionStatusComponent,
   ],
   providers: [APP_ROUTE_PROVIDER],
   declarations: [AppComponent],
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 d74e65d036..5a8ad4bd63 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
@@ -5,28 +5,28 @@ import { BehaviorSubject } from 'rxjs';
 @Injectable({
   providedIn: 'root',
 })
-export class InternetConnectionService{
-  readonly document = inject(DOCUMENT)
+export class InternetConnectionService {
+  readonly document = inject(DOCUMENT);
   readonly window = this.document.defaultView;
   readonly navigator = this.window.navigator;
 
-  private status$ = new BehaviorSubject<boolean>(this.navigator.onLine)
+  private status$ = new BehaviorSubject<boolean>(this.navigator.onLine);
 
   private status = signal(this.navigator.onLine);
 
-  networkStatus = computed(() => this.status())
-  
-  constructor(){
+  networkStatus = computed(() => this.status());
+
+  constructor() {
     this.window.addEventListener('offline', () => this.setStatus(false));
     this.window.addEventListener('online', () => this.setStatus(true));
   }
 
-  setStatus(val:boolean){
-    this.status.set(val)
-    this.status$.next(val)
+  setStatus(val: boolean) {
+    this.status.set(val);
+    this.status$.next(val);
   }
 
-  get networkStatus$(){
-    return this.status$.asObservable()
+  get networkStatus$() {
+    return this.status$.asObservable();
   }
 }
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 e649555f40..928d27053a 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,47 +1,62 @@
-import { Component, computed, inject  } from '@angular/core';
-import { NgIf } from '@angular/common'
-import { InternetConnectionService , LocalizationModule } from '@abp/ng.core';
+import { Component, inject } from '@angular/core';
+import { InternetConnectionService, LocalizationModule } from '@abp/ng.core';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'abp-internet-status',
   standalone: true,
-  imports:[NgIf, LocalizationModule],
+  imports: [LocalizationModule, NgbTooltip],
   template: `
-    <div class="status-icon" *ngIf="!isOnline()">
-      <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 }
+    @if (!isOnline()) {
+      <div class="status-icon">
+        <i
+          ngbTooltip="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}"
+          container="body"
+          placement="left-top" 
+          class="fa fa-circle text-blinking blink"
+        >
+        </i>
+      </div>
     }
+  `,
+  styles: [
+    `
+      .blink {
+        animation: blinker 0.9s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
+      }
+      @keyframes blinker {
+        0% {
+          color: #c1c1c1;
+        }
+        70% {
+          color: #dc3545;
+        }
+        100% {
+          color: #dc3545;
+        }
+      }
 
-    .text-blinking{
-      font-size:1.2rem;
-    }
+      .text-blinking {
+        font-size: 1.2rem;
+      }
 
-    .status-icon{
-      position: fixed;
-      z-index: 999999;
-      top: 10px;
-      right: 10px;
-    }
+      .status-icon {
+        position: fixed;
+        z-index: 999999;
+        top: 10px;
+        right: 10px;
+      }
 
-    @media (width < 768px){
-      .status-icon{
-        top: 26px;
-        right: 134px;
+      @media (width < 768px) {
+        .status-icon {
+          top: 26px;
+          right: 134px;
+        }
       }
-    }
-  `]
+    `,
+  ],
 })
-export class InternetConnectionStatusComponent{
+export class InternetConnectionStatusComponent {
   internetConnectionService = inject(InternetConnectionService);
-  isOnline = this.internetConnectionService.networkStatus
+  isOnline = this.internetConnectionService.networkStatus;
 }
diff --git a/templates/app/angular/src/app/app.component.ts b/templates/app/angular/src/app/app.component.ts
index a26e745334..44a504b978 100644
--- a/templates/app/angular/src/app/app.component.ts
+++ b/templates/app/angular/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 {}
diff --git a/templates/app/angular/src/app/app.module.ts b/templates/app/angular/src/app/app.module.ts
index 34d59b4ec4..e09d7502fe 100644
--- a/templates/app/angular/src/app/app.module.ts
+++ b/templates/app/angular/src/app/app.module.ts
@@ -6,7 +6,7 @@ import { SettingManagementConfigModule } from '@abp/ng.setting-management/config
 import { TenantManagementConfigModule } from '@abp/ng.tenant-management/config';
 import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
 import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { InternetConnectionStatusComponent, ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -36,6 +36,7 @@ import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account';
     ThemeLeptonXModule.forRoot(),
     SideMenuLayoutModule.forRoot(),
     FeatureManagementModule.forRoot(),
+    InternetConnectionStatusComponent
   ],
   declarations: [AppComponent],
   providers: [APP_ROUTE_PROVIDER],