Start/Stop Sync

angular.json

@@ -38,6 +38,7 @@
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/@popperjs/core/dist/umd/popper.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
               "node_modules/bootstrap-table/dist/bootstrap-table.min.js"
             ],

package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser": "17.3.12",
         "@angular/platform-browser-dynamic": "17.3.12",
         "@angular/router": "17.3.12",
+        "@popperjs/core": "2.11.8",
         "bootstrap": "5.3.3",
         "bootstrap-icons": "1.11.3",
         "bootstrap-table": "1.23.5",

package.json

@@ -69,6 +69,7 @@
     "@angular/platform-browser": "17.3.12",
     "@angular/platform-browser-dynamic": "17.3.12",
     "@angular/router": "17.3.12",
+    "@popperjs/core": "2.11.8",
     "bootstrap": "5.3.3",
     "bootstrap-icons": "1.11.3",
     "bootstrap-table": "1.23.5",

src/app/core/services/daemon/daemon.service.ts

@@ -139,8 +139,8 @@ export class DaemonService {
     this.settings = new DaemonSettings();
 
     window.electronAPI.onMoneroClose((event: any, code: number) => {
-      console.log(event);
-      console.log(code);
+      console.debug(event);
+      console.debug(code);
       this.onClose();
     });
   }
@@ -963,7 +963,6 @@ export class DaemonService {
     this.onDaemonStopStart.emit();
 
     const response = await this.callRpc(new StopDaemonRequest());
-    console.log(response);
 
     if (typeof response.status == 'string' && response.status != 'OK') {
       window.electronAPI.showNotification({

src/app/pages/detail/detail.component.ts

@@ -142,9 +142,14 @@ export class DetailComponent extends BasePageComponent implements AfterViewInit
   private get syncProgress(): string {
     const targetHeight = this.targetHeight;
     const height = this.height;
-    console.log(`Sync progress, height ${height},targetHeight ${targetHeight}`)
     
-    return `${(height*100/targetHeight).toFixed(2)} %`;
+    const progress = `${(height*100/targetHeight).toFixed(2)} %`;
+
+    if (height < targetHeight && progress == '100 %') {
+      return '99.99 %';
+    }
+
+    return progress;
   }
 
   private get wasBootstrapEverUsed(): boolean {

src/app/pages/mining/mining.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, NgZone } from '@angular/core';
+import { AfterContentInit, AfterViewInit, Component, NgZone } from '@angular/core';
 import { DaemonService, DaemonDataService } from '../../core/services';
 import { NavbarLink, NavbarService } from '../../shared/components';
 import { AddedAuxPow, AuxPoW, BlockTemplate, GeneratedBlocks, MiningStatus, MinerData, Chain } from '../../../common';
@@ -10,7 +10,7 @@ import { SimpleBootstrapCard } from '../../shared/utils';
   templateUrl: './mining.component.html',
   styleUrl: './mining.component.scss'
 })
-export class MiningComponent extends BasePageComponent implements AfterViewInit {
+export class MiningComponent extends BasePageComponent implements AfterViewInit, AfterContentInit {
 
   public get coreBusy(): boolean {
     return this.daemonData.info? !this.daemonData.info.synchronized : true;
@@ -153,8 +153,12 @@ export class MiningComponent extends BasePageComponent implements AfterViewInit
   }
 
   public ngAfterViewInit(): void {
-    console.log('DetailComponent AFTER VIEW INIT');
     this.loadTables();
+  }
+
+  public override ngAfterContentInit(): void {
+    super.ngAfterContentInit();
+
     this.cards = this.createCards();
   }
 

src/app/shared/components/navbar/navbar.component.html

@@ -23,30 +23,49 @@
     <strong>Monero Daemon</strong>
   </span>
 
+  <ul class="navbar-nav flex-row" style="margin-left: auto;">
+    &nbsp;
+
+    <li *ngIf="!quitting && running && syncDisabled && !starting && !restarting && !installing && !upgrading" class="nav-item text-nowrap">
+      <button [disabled]="enablingSync || syncDisabledByPeriodPolicy || syncDisabledByWifiPolicy" class="btn btn-outline-secondary px-3 text-white" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-title="Start Sync" aria-expanded="false" aria-label="Start Sync" (click)="startSync()">
+        <i class="bi bi-wifi"></i>
+      </button>
+      &nbsp;
+    </li>
+
+    <li *ngIf="!quitting && running && !syncDisabled && !starting && !restarting && !installing && !upgrading" class="nav-item text-nowrap">
+      <button [disabled]="disablingSync" class="btn btn-outline-secondary px-3 text-white" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-title="Stop Sync" aria-expanded="false" aria-label="Stop Sync" (click)="stopSync()">
+        <i class="bi bi-wifi-off"></i>
+      </button>
+      &nbsp;
+    </li>
+
+  </ul>
+
   <ul class="navbar-nav flex-row">
-    <li *ngIf="!quitting && !running && !stopping && !starting && !restarting && !installing && !upgrading && daemonConfigured" class="nav-item text-nowrap">
-      <button class="btn btn-outline-secondary px-3 text-white" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Start daemon" (click)="startDaemon()">
+    <li *ngIf="!quitting && !running && !stopping && !restarting && !installing && !upgrading && daemonConfigured" class="nav-item text-nowrap">
+      <button [disabled]="starting || enablingSync || disablingSync" class="btn btn-outline-secondary px-3 text-white" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-title="Start Daemon" aria-expanded="false" aria-label="Start daemon" (click)="startDaemon()">
         <i class="bi bi-play-fill"></i>
       </button>
       &nbsp;
     </li>
 
-    <li *ngIf="!quitting && running && !stopping && !starting && !restarting && !installing && !upgrading" class="nav-item text-nowrap">
-      <button class="btn btn-outline-secondary px-3 text-white" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Stop daemon" (click)="stopDaemon()">
+    <li *ngIf="!quitting && running && !starting && !restarting && !installing && !upgrading" class="nav-item text-nowrap">
+      <button [disabled]="stopping || disablingSync || enablingSync" class="btn btn-outline-secondary px-3 text-white" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-title="Stop Daemon" aria-expanded="false" aria-label="Stop daemon" (click)="stopDaemon()">
         <i class="bi bi-stop-fill"></i>
       </button>
       &nbsp;
     </li>
 
-    <li *ngIf="!quitting && running && !stopping && !starting && !installing && !upgrading" class="nav-item text-nowrap">
-      <button class="btn btn-outline-secondary px-3 text-white" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Restart daemon" (click)="restartDaemon()">
+    <li *ngIf="!quitting && running && !installing && !upgrading" class="nav-item text-nowrap">
+      <button [disabled]="stopping || starting || disablingSync || enablingSync" class="btn btn-outline-secondary px-3 text-white" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-title="Restart Daemon" aria-expanded="false" aria-label="Restart daemon" (click)="restartDaemon()">
         <i class="bi bi-arrow-clockwise"></i>
       </button>
       &nbsp;
     </li>
 
     <li class="nav-item text-nowrap">
-      <button class="btn btn-outline-secondary px-3 text-white" type="button" data-bs-toggle="offcanvas" aria-label="Quit" [disabled]="stopping || starting || quitting || restarting || upgrading || installing" (click)="quit()">
+      <button class="btn btn-outline-secondary px-3 text-white" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-title="Quit Daemon" aria-label="Quit" [disabled]="stopping || starting || quitting || restarting || upgrading || installing || enablingSync || disablingSync" (click)="quit()">
         <i class="bi bi-power"></i>
       </button>
       &nbsp;

src/app/shared/components/navbar/navbar.component.ts

@@ -1,17 +1,18 @@
-import { Component, NgZone, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, NgZone, OnDestroy } from '@angular/core';
 import { NavbarService } from './navbar.service';
 import { NavbarLink } from './navbar.model';
 import { DaemonService } from '../../../core/services/daemon/daemon.service';
-import { MoneroInstallerService } from '../../../core/services';
+import { DaemonDataService, MoneroInstallerService } from '../../../core/services';
 import { DaemonSettings } from '../../../../common';
 import { Subscription } from 'rxjs';
+import * as bootstrap from 'bootstrap';
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrl: './navbar.component.scss'
 })
-export class NavbarComponent implements OnDestroy {
+export class NavbarComponent implements AfterViewInit, OnDestroy {
 
   private _running: boolean = false;
 
@@ -51,38 +52,87 @@ export class NavbarComponent implements OnDestroy {
     return this.daemonSettings.monerodPath != '';
   }
 
+  public get syncDisabled(): boolean {
+    return this.syncDisabledByPeriodPolicy || this.syncDisabledByWifiPolicy || this.daemonService.settings.noSync;
+  }
+
+  public get syncDisabledByPeriodPolicy(): boolean {
+    return this.daemonData.syncDisabledByPeriodPolicy;
+  }
+
+  public get syncDisabledByWifiPolicy(): boolean {
+    return this.daemonData.syncDisabledByWifiPolicy;
+  }
+
+  public disablingSync: boolean = false;
+  public enablingSync: boolean = false;
+
   private daemonSettings: DaemonSettings = new DaemonSettings();
   private subscriptions: Subscription[] = [];
 
-  constructor(private navbarService: NavbarService, private daemonService: DaemonService, private installerService: MoneroInstallerService, private ngZone: NgZone) {
+  constructor(private navbarService: NavbarService, private daemonService: DaemonService, private daemonData: DaemonDataService, private installerService: MoneroInstallerService, private ngZone: NgZone) {
     const onSavedSettingsSub: Subscription = this.daemonService.onSavedSettings.subscribe((settings: DaemonSettings) => {
       this.daemonSettings = settings;
     });
 
     this.daemonService.getSettings().then((settings: DaemonSettings) => {
       this.daemonSettings = settings;
+      this.enableToolTips();
     }).catch((error: any) => {
       console.error(error);
+      this.enableToolTips();
     });
 
     this.daemonService.isRunning().then((running: boolean) => {
       this.ngZone.run(() => {
         this._running = running;
+        this.enableToolTips();
       });
     }).catch((error) => {
       console.error(error);
       this._running = false;
+      this.enableToolTips();
     });
 
     const onStatusChangedSub: Subscription = this.daemonService.onDaemonStatusChanged.subscribe((running: boolean) => {
       this.ngZone.run(() => {
         this._running = running;
+        this.enableToolTips();
       });
     });
 
     this.subscriptions.push(onSavedSettingsSub, onStatusChangedSub);
   }
 
+  private lastTooltips: bootstrap.Tooltip[] = [];
+
+  private disposeTooltips(): void {
+    this.lastTooltips.forEach((tooltip) => {
+      tooltip.hide();
+      tooltip.dispose();
+    });
+
+    this.lastTooltips = [];
+  }
+
+  private enableToolTips(): void {
+    setTimeout(() => {
+      this.disposeTooltips();
+
+      const tooltipTriggerList: Element[] = [] ;
+    
+      const queryResult = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+      
+      queryResult.forEach((el) => tooltipTriggerList.push(el));
+
+      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {
+        placement: 'bottom'
+      }));
+  
+      this.lastTooltips = tooltipList;
+    }, 0);
+  }
+
   public async startDaemon(): Promise<void> {
     try {
       await this.daemonService.startDaemon();
@@ -103,12 +153,43 @@ export class NavbarComponent implements OnDestroy {
     await this.daemonService.restartDaemon();
   }
 
+  public async startSync(): Promise<void> {
+    this.enablingSync = true;
+
+    try {
+      await this.daemonService.enableSync();
+    }
+    catch(error: any) {
+      console.error(error);
+    }
+
+    this.enablingSync = false;
+  }
+
+  public async stopSync(): Promise<void> {
+    this.disablingSync = true;
+
+    try {
+      await this.daemonService.disableSync();
+    }
+    catch(error: any) {
+      console.error(error);
+    }
+
+    this.disablingSync = false;
+  }
+
   public async quit(): Promise<void> {
     await this.daemonService.quit();
   }
 
+  public ngAfterViewInit(): void {
+    this.enableToolTips();
+  }
+
   public ngOnDestroy(): void {
     this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe());
     this.subscriptions = [];
+    this.disposeTooltips();
   }
 }