Add additional columns, styling and data to lists

src/app/api-utils.ts

@@ -6,5 +6,4 @@ export const deviceID = (): String => {
 }
 
 export const apiURL: String = '/'
-
 export const apiRetry: number = 3;

src/app/charts/chart/chart.component.ts

@@ -45,24 +45,20 @@ export class ChartComponent implements OnInit {
   ngAfterViewInit() {
     let totalCount: number = 0;
     this.service.getAll().subscribe(
-      folder => {
+      t => {
         // Count the number of folders and set chart
         totalCount++;
         this.donutChart.count = totalCount;
 
         // Get StateType and convert to string 
-        let stateType;
-        let state: string;
+        const stateType = t.stateType;
+        const state = t.state;
         let color;
         switch (this.type) {
           case Type.Folder:
-            stateType = Folder.getStateType(folder);
-            state = Folder.stateTypeToString(stateType);
-            color = Folder.stateTypeToColor(stateType);
+            color = Folder.stateTypeToColor(t.stateType);
             break;
           case Type.Device:
-            stateType = Device.getStateType(folder);
-            state = Device.stateTypeToString(stateType);
             color = Device.stateTypeToColor(stateType);
             break;
         }

src/app/device.ts

@@ -3,7 +3,8 @@ import { colors } from './style';
 interface Device {
     deviceID: string;
     name: string;
-    state: Device.StateType;
+    stateType: Device.StateType;
+    state: string;
     paused: boolean;
     connected: boolean;
     completion: number;
@@ -70,7 +71,7 @@ namespace Device {
 
     export function getStateType(d: Device): StateType {
         // StateType Unknown is set in DeviceService
-        if (d.state === StateType.Unknown) {
+        if (d.stateType === StateType.Unknown) {
             return StateType.Unknown;
         }
 

src/app/folder.ts

@@ -6,8 +6,11 @@ interface Folder {
     label: string;
     devices: Device[];
     status: Folder.Status;
+    stateType: Folder.StateType;
+    state: string;
     paused: boolean;
     completion: number;
+    path: string;
 }
 
 namespace Folder {

src/app/list-toggle/list-toggle.component.html

@@ -1,4 +1,4 @@
-<mat-button-toggle-group name="fontStyle" aria-label="Font Style" value="folders">
+<mat-button-toggle-group class="tui-button-toggle" name="fontStyle" aria-label="Font Style" value="folders">
     <mat-button-toggle value="folders" (click)="onSelect(listType.Folder)">Folders</mat-button-toggle>
     <mat-button-toggle value="devices" (click)="onSelect(listType.Device)">Devices</mat-button-toggle>
 </mat-button-toggle-group>

src/app/lists/device-list/device-list-datasource.ts

@@ -1,82 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-
-import { map } from 'rxjs/operators';
-import { Observable, of as observableOf, merge, Subject } from 'rxjs';
-import Device from '../../device';
-import { SystemConfigService } from '../../services/system-config.service';
-
-/**
- * Data source for the DeviceList view. This class should
- * encapsulate all logic for fetching and manipulating the displayed data
- * (including sorting, pagination, and filtering).
- */
-export class DeviceListDataSource extends DataSource<Device> {
-  data: Device[];
-  dataSubject: Subject<Device[]>;
-  paginator: MatPaginator;
-  sort: MatSort;
-
-  constructor(private systemConfigService: SystemConfigService) {
-    super();
-  }
-
-  /**
-   * Connect this data source to the table. The table will only update when
-   * the returned stream emits new items.
-   * @returns A stream of the items to be rendered.
-   */
-  connect(): Observable<Device[]> {
-    // Combine everything that affects the rendered data into one update
-    // st
-    const dataMutations = [
-      this.dataSubject,
-      observableOf(this.data),
-      this.paginator.page,
-      this.sort.sortChange
-    ];
-
-    return merge(...dataMutations).pipe(map(() => {
-      return this.getPagedData(this.getSortedData([...this.data]));
-    }));
-  }
-
-  /**
-   *  Called when the table is being destroyed. Use this function, to clean up
-   * any open connections or free any held resources that were set up during connect.
-   */
-  disconnect() { }
-
-  /**
-   * Paginate the data (client-side). If you're using server-side pagination,
-   * this would be replaced by requesting the appropriate data from the server.
-   */
-  private getPagedData(data: Device[]) {
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  /**
-   * Sort the data (client-side). If you're using server-side sorting,
-   * this would be replaced by requesting the appropriate data from the server.
-   */
-  private getSortedData(data: Device[]) {
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    return data.sort((a, b) => {
-      const isAsc = this.sort.direction === 'asc';
-      switch (this.sort.active) {
-        case 'name': return compare(a.name, b.name, isAsc);
-        case 'id': return compare(+a.deviceID, +b.deviceID, isAsc);
-        default: return 0;
-      }
-    });
-  }
-}
-
-function compare(a: string | number, b: string | number, isAsc: boolean) {
-  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-}

src/app/lists/device-list/device-list.component.html

@@ -11,6 +11,12 @@
     <td mat-cell *matCellDef="let row">{{row.name}}</td>
   </ng-container>
 
+  <!-- Status Column -->
+  <ng-container matColumnDef="state">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
+    <td mat-cell *matCellDef="let row">{{row.state}}</td>
+  </ng-container>
+
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

src/app/lists/device-list/device-list.component.ts

@@ -18,7 +18,7 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
   dataSource: MatTableDataSource<Device>;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['id', 'name'];
+  displayedColumns = ['id', 'name', 'state'];
 
   constructor(private systemConfigService: SystemConfigService) { };
 

src/app/lists/folder-list/folder-list.component.html

@@ -9,12 +9,24 @@
         <td mat-cell *matCellDef="let row">{{row.id}}</td>
     </ng-container>
 
-    <!-- Name Column -->
+    <!-- Label Column -->
     <ng-container matColumnDef="label">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
         <td mat-cell *matCellDef="let row">{{row.label}}</td>
     </ng-container>
 
+    <!-- Path Column -->
+    <ng-container matColumnDef="path">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Path</th>
+        <td mat-cell *matCellDef="let row">{{row.path}}</td>
+    </ng-container>
+
+    <!-- Status Column -->
+    <ng-container matColumnDef="state">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
+        <td mat-cell *matCellDef="let row">{{row.state}}</td>
+    </ng-container>
+
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

src/app/lists/folder-list/folder-list.component.ts

@@ -23,7 +23,7 @@ export class FolderListComponent implements AfterViewInit, OnInit {
   }
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['id', 'label'];
+  displayedColumns = ['id', 'label', 'path', 'state'];
 
   constructor(private systemConfigService: SystemConfigService) { };
 

src/app/lists/status-list/status-list.component.html

@@ -1,7 +1,7 @@
 <div class="{{elevation}} tui-card">
     <div fxLayout="row" fxLayoutAlign="space-between start">
         <div class="tui-card-title">{{title | uppercase}}</div>
-        <app-list-toggle (listTypeEvent)="onToggle($event)" class="tui-card-content"></app-list-toggle>
+        <app-list-toggle (listTypeEvent)="onToggle($event)" class="tui-card-toggle"></app-list-toggle>
     </div>
     <div class="tui-card-content">
         <app-folder-list *ngIf="currentListType===listType.Folder"></app-folder-list>

src/app/lists/status-list/status-list.component.scss

@@ -0,0 +1,7 @@
+.tui-card-toggle {
+    padding: 16px 16px 0 16px;
+}
+
+.tui-card-content {
+    padding-top: 0;
+}

src/app/services/device.service.ts

@@ -35,7 +35,7 @@ export class DeviceService {
     if (this.sysConns.connections[device.deviceID] === undefined) {
       console.log(this.sysConns.connections)
       console.log("connections undefined", device.deviceID);
-      device.state = Device.StateType.Unknown;
+      device.stateType = Device.StateType.Unknown;
     } else {
       // Set connected
       device.connected = this.sysConns.connections[device.deviceID].connected;
@@ -49,6 +49,8 @@ export class DeviceService {
     this.dbCompletionService.getDeviceCompletion(device.deviceID).subscribe(
       c => {
         device.completion = c.completion;
+        device.stateType = Device.getStateType(device);
+        device.state = Device.stateTypeToString(device.stateType);
         observer.next(device);
 
         // recursively get the status of the next folder

src/app/services/folder.service.ts

@@ -26,6 +26,8 @@ export class FolderService {
     this.dbStatusService.getFolderStatus(folder.id).subscribe(
       status => {
         folder.status = status;
+        folder.stateType = Folder.getStateType(folder);
+        folder.state = Folder.stateTypeToString(folder.stateType);
         observer.next(folder);
 
         // recursively get the status of the next folder

src/styles.scss

@@ -52,11 +52,10 @@ $tech-ui-typography: mat-typography-config(
 // Be sure that you only ever include this mixin once!
 @include mat-core($tech-ui-typography);
 
-
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$tech-ui-primary: mat-palette($mat-indigo);
+$tech-ui-primary: mat-palette($mat-blue);
 $tech-ui-accent: mat-palette($mat-blue, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
@@ -93,4 +92,8 @@ html, body {
 
 .tui-card-content {
     padding: 16px;
-}
+}
+
+.tui-button-toggle .mat-button-toggle-appearance-standard .mat-button-toggle-label-content  {
+    line-height: 34px;
+}