Basic list of installed software

src/app/components/installed-software/installed-software.component.html

@@ -3,34 +3,20 @@
       <h1>Installed software</h1>
     </div>
     <div class="default-content">
-      <!-- <div class="example-container mat-elevation-z8">
+      <div class="example-container mat-elevation-z8">
         <mat-table #table [dataSource]="dataSource">
   
-          <ng-container matColumnDef="id">
-            <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
-            <mat-cell *matCellDef="let row;"> {{row.id}} </mat-cell>
-          </ng-container>
-  
           <ng-container matColumnDef="name">
             <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
-            <mat-cell *matCellDef="let row;"> <a [routerLink]="['/server', row.id, 'projects']" class="table-link">{{row.name}}</a></mat-cell>
-          </ng-container>
-  
-          <ng-container matColumnDef="ip">
-            <mat-header-cell *matHeaderCellDef> IP </mat-header-cell>
-            <mat-cell *matCellDef="let row;"> {{row.ip}} </mat-cell>
-          </ng-container>
-  
-          <ng-container matColumnDef="port">
-            <mat-header-cell *matHeaderCellDef> Port </mat-header-cell>
-            <mat-cell *matCellDef="let row;"> {{row.port}} </mat-cell>
+            <mat-cell *matCellDef="let row;">{{ row.name }}</mat-cell>
           </ng-container>
   
           <ng-container matColumnDef="actions">
-            <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
+            <mat-header-cell *matHeaderCellDef></mat-header-cell>
             <mat-cell *matCellDef="let row;" style="text-align: right">
-              <button mat-icon-button (click)="deleteServer(row)">
-                <mat-icon aria-label="Remove server">delete</mat-icon>
+              <button mat-button color="primary" (click)="install(row)" disabled="row.installed">
+                <ng-container *ngIf="row.installed">Installed</ng-container>
+                <ng-container *ngIf="!row.installed">Install</ng-container>
               </button>
             </mat-cell>
           </ng-container>
@@ -40,9 +26,6 @@
         </mat-table>
       </div>
   
-      <div class="buttons-bar">
-        <button mat-raised-button color="primary" (click)="createModal()">Add server</button>
-      </div> -->
     </div>
   </div>
   

src/app/components/installed-software/installed-software.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { InstalledSoftwareService } from '../../services/installed-software.service';
+import { DataSource } from '@angular/cdk/table';
+import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'app-installed-software',
@@ -6,10 +9,29 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./installed-software.component.scss']
 })
 export class InstalledSoftwareComponent implements OnInit {
+  dataSource: InstalledSoftwareDataSource;
+  displayedColumns = ['name', 'actions'];
 
-  constructor() { }
+  constructor(
+    private installedSoftwareService: InstalledSoftwareService
+  ) { }
 
   ngOnInit() {
+    this.dataSource = new InstalledSoftwareDataSource(this.installedSoftwareService);
   }
 
 }
+
+export class InstalledSoftwareDataSource extends DataSource<any> {
+  constructor(private installedSoftwareService: InstalledSoftwareService) {
+    super();
+  }
+
+  connect(): Observable<any[]> {
+    const installed = this.installedSoftwareService.list();
+    return of(installed);
+  }
+
+  disconnect() {}
+
+}

src/app/services/installed-software.service.ts

@@ -1,9 +1,31 @@
 import { Injectable } from '@angular/core';
+import { ElectronService } from 'ngx-electron';
 
 @Injectable({
   providedIn: 'root'
 })
 export class InstalledSoftwareService {
+  private software = [{
+    name: 'ls',
+    commands: ['ls']
+  }, {
+    name: 'telnet',
+    commands: ['telnet']
+  }]
 
-  constructor() { }
+  constructor(
+    private electronService: ElectronService
+  ) { }
+
+  list() {
+    const installedSoftware = this.electronService.remote.require('./installed-software.js')
+      .getInstalledSoftware(this.software);
+    
+    return this.software.map((software) => {
+      return {
+        name: software.name,
+        installed: installedSoftware[software.name].length > 0
+      }
+    });
+  }
 }