Outputs methods implementation and navbar daemon methods implementation

app/main.ts

@@ -33,7 +33,7 @@ function createWindow(): BrowserWindow {
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       nodeIntegration: false,
-      allowRunningInsecureContent: true,
+      allowRunningInsecureContent: (serve),
       contextIsolation: true,
       devTools: true
     },

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

@@ -709,6 +709,14 @@ export class DaemonService {
       console.warn("Daemon not running");
       return;
     }
+    if (this.stopping) {
+      console.warn("Daemon already stopping");
+      return;
+    }
+    if (this.starting) {
+      console.warn("Daemon is starting");
+      return;
+    }
     this.stopping = true;
     this.onDaemonStopStart.emit();
 

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

@@ -51,6 +51,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   public cards: Card[];
+  public firstLoading: boolean = true;
 
   constructor(
     private router: Router,private daemonService: DaemonService, 
@@ -234,7 +235,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
     if (!this.daemonRunning && !this.daemonService.starting) {
       return [];
     }
-    if (this.isLoading || this.daemonService.starting) {
+    if (this.firstLoading || this.daemonService.starting) {
       return this.createLoadingCards();
     }
     return [
@@ -326,6 +327,8 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
     }
     
     this.isLoading = false;
+    this.firstLoading = false;
+
   }
 
   public async isBlockchainPruned(): Promise<boolean> {

src/app/pages/outputs/outputs.component.html

@@ -10,6 +10,60 @@
       </ul>
     </div>
 </div>
+<div *ngIf="daemonRunning" class="tab-content" id="pills-tabContent">
+  <div class="tab-pane fade show active" id="pills-outputs-overview" role="tabpanel" aria-labelledby="pills-outputs-overview-tab" tabindex="0">
     
+    <table
+      [hidden]="getOutsOuts.length == 0"
+      id="outsTable"
+      data-toggle="outsTable"
+      data-toolbar="#toolbar"
+      data-height="460"
+      >
+      <thead>
+      <tr>
+          <th data-field="height">Height</th>
+          <th data-field="key">Key</th>
+          <th data-field="mask">Mask</th>
+          <th data-field="txId">Tx ID</th>
+          <th data-field="unlocked">Unlocked</th>
+      </tr>
+      </thead>
+    </table>
+  </div>
+  
+  <div class="tab-pane fade" id="pills-is-key-image-spent" role="tabpanel" aria-labelledby="pills-is-key-image-spent-tab" tabindex="0">
+    <div *ngIf="isKeyImageSpentError != ''" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
+      <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;
+      <div>
+        {{ isKeyImageSpentError }}
+      </div>
+    </div>
+
+    <div class="row g-5 p-2">
+      <div class="cold-md-7 col-lg-12">
+        <div class="row gy-3">
+          <h4 class="mb-3">Check if outputs have been spent using the key image associated with the output</h4>
+
+          <div class="col-sm-12">
+            <label for="key-images" class="form-label">Key images</label>
+            <textarea [(ngModel)]="keyImages" [ngModelOptions]="{standalone: true}" type="text" class="form-control" id="key-images" placeholder="" 
+            rows="15" cols="15" ></textarea>
+            <div class="invalid-feedback">
+              Invalid key images.
+            </div>
+        </div>
+
+        </div>
+      </div>
+
+      <hr class="my-4">
+
+      <button *ngIf="!gettingKeyImages" class="w-100 btn btn-primary btn-lg" type="button" (click)="isKeyImageSpent()">Is Key Image Spent</button>
+      <button *ngIf="gettingKeyImages" class="w-100 btn btn-primary btn-lg" type="button" disabled>Checking Key Images ...</button>
+
+    </div>
+  </div>
+</div>
 <app-daemon-not-running></app-daemon-not-running>
 <app-daemon-stopping></app-daemon-stopping>

src/app/pages/outputs/outputs.component.ts

@@ -1,7 +1,8 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, NgZone } from '@angular/core';
 import { NavbarLink } from '../../shared/components/navbar/navbar.model';
 import { DaemonService } from '../../core/services/daemon/daemon.service';
 import { NavbarService } from '../../shared/components/navbar/navbar.service';
+import { Output } from '../../../common';
 
 @Component({
   selector: 'app-outputs',
@@ -11,16 +12,92 @@ import { NavbarService } from '../../shared/components/navbar/navbar.service';
 export class OutputsComponent implements AfterViewInit {
   public readonly navbarLinks: NavbarLink[];
 
-  constructor(private daemonService: DaemonService, private navbarService: NavbarService) {
+  public daemonRunning: boolean = false;
+
+  public getOutsJsonString: string = '';
+  public getOutsGetTxId: boolean = false;
+
+  public keyImages: string = '';
+  public isKeyImageSpentError: string = '';
+  public isKeyImageSpentResult?: boolean;
+  public gettingKeyImages: boolean = false;
+
+  constructor(private daemonService: DaemonService, private navbarService: NavbarService, private ngZone: NgZone) {
     this.navbarLinks = [
       new NavbarLink('pills-outputs-overview-tab', '#pills-outputs-overview', 'outputs-overview', true, 'Overview'),
       new NavbarLink('pills-outputs-histogram-tab', '#pills-outputs-histogram', 'outputs-histogram', false, 'Histogram'),
       new NavbarLink('pills-outputs-distribution-tab', '#pills-outputs-distribution', 'outputs-distribution', false, 'Distribution'),
       new NavbarLink('pills-is-key-image-spent-tab', '#pills-is-key-image-spent', 'is-key-image-spent', false, 'Is Key Image Spent')
     ];
+
+    this.daemonService.isRunning().then((value) => {
+      this.daemonRunning = value;
+    })
   }
 
   ngAfterViewInit(): void {
       this.navbarService.setLinks(this.navbarLinks);
+      this.ngZone.run(() => {
+        //const $ = require('jquery');
+        //const bootstrapTable = require('bootstrap-table');
+        
+        const $table = $('#outsTable');
+        $table.bootstrapTable({
+          
+        });
+        $table.bootstrapTable('refreshOptions', {
+          classes: 'table table-bordered table-hover table-dark table-striped'
+        });
+        $table.bootstrapTable('showLoading');      
+        this.load();
+      });
+  }
+
+  public get getOutsOuts() {
+    try {
+      const _outs: any[] = JSON.parse(this.getOutsJsonString);
+      const outs: Output[] = [];
+
+      _outs.forEach((_out) => outs.push(Output.parse(_out)));
+
+      return outs;
+    }
+    catch(error) {
+      return []
+    }
+  }
+
+  public validOuts(): boolean {
+    try {
+      const _outs: any[] = JSON.parse(this.getOutsJsonString);
+
+      if (!Array.isArray(_outs)) {
+        return false;
+      }
+
+      _outs.forEach((_out) => Output.parse(_out));
+
+      return true;
+    } catch(error) {
+      return false;
+    }
+  }
+
+  public async getOuts() {
+    const $table = $('#outsTable');
+    $table.bootstrapTable({});
+
+    const outs = await this.daemonService.getOuts(this.getOutsOuts, this.getOutsGetTxId);
+
+    $table.bootstrapTable('load', outs)
+
+  }
+
+  public async isKeyImageSpent(): Promise<void> {
+    
+  }
+
+  public async load() {
+    await this.getOuts();
   }
 }

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

@@ -25,22 +25,22 @@
 
   <ul class="navbar-nav flex-row">
     <li *ngIf="!running && !stopping && !starting" class="nav-item text-nowrap">
-      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Start daemon">
+      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Start daemon" (click)="startDaemon()">
         <i class="bi bi-play-fill"></i>
       </button>
     </li>
     <li *ngIf="running && !stopping && !starting" class="nav-item text-nowrap">
-      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Stop daemon">
+      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Stop daemon" (click)="stopDaemon()">
         <i class="bi bi-stop-fill"></i>
       </button>
     </li>
     <li *ngIf="running && !stopping && !starting" class="nav-item text-nowrap">
-      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Restart daemon">
+      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Restart daemon" (click)="restartDaemon()">
         <i class="bi bi-arrow-clockwise"></i>
       </button>
     </li>
     <li class="nav-item text-nowrap">
-      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" aria-label="Quit" [disabled]="stopping || starting">
+      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" aria-label="Quit" [disabled]="stopping || starting" (click)="quit()">
         <i class="bi bi-power"></i>
       </button>
     </li>

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

@@ -43,4 +43,30 @@ export class NavbarComponent {
     });
 
   }
+
+  public async startDaemon(): Promise<void> {
+    try {
+      await this.daemonService.startDaemon();
+    } catch(error) {
+      console.error(error);
+    }
+  }
+
+  public async stopDaemon(): Promise<void> {
+    try {
+      await this.daemonService.stopDaemon();
+    } catch(error) {
+      console.error(error);
+    }
+  }
+
+  public async restartDaemon(): Promise<void> {
+    await this.stopDaemon();
+
+    await this.startDaemon();
+  }
+
+  public async quit(): Promise<void> {
+
+  }
 }

src/common/Output.ts

@@ -13,4 +13,8 @@ export class Output {
             'index': this.index
         }
     }
+
+    public static parse(out: any): Output {
+      return new Output(out.amount, out.index);
+    }
 }

src/index.html

@@ -9,6 +9,9 @@
   <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
 </head>
 <body>
+  <script>
+    const global = globalThis;
+  </script>
   <app-root></app-root>
 </body>
 </html>