Add chart item component, StateType and getStateType to determine state from Folder

src/app/chart/chart-item/chart-item.component.html

@@ -1,4 +1,4 @@
 <div fxLayout="row" fxLayoutAlign="space-between start">
-    <div>color</div>
+    <div></div>
     <div>{{state}}</div>
 </div>

src/app/chart/folder-chart/folder-chart.component.html

@@ -1,6 +1,13 @@
 <mat-card class="{{elevation}}">
     <mat-card-title>Folders</mat-card-title>
     <mat-card-content>
+        <div fxLayout="row" fxLayoutAlign="space-between start">
             <app-donut-chart [elementID]="chartID"></app-donut-chart>
+            <div fxLayout="column" fxLayoutAlign="space-evenly end">
+                <app-chart-item></app-chart-item>
+                <app-chart-item></app-chart-item>
+                <app-chart-item></app-chart-item>
+            </div>
+        </div>
     </mat-card-content>
 </mat-card>

src/app/chart/folder-chart/folder-chart.component.ts

@@ -2,8 +2,6 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import Folder from '../../folder'
 import { cardElevation } from '../../style'
 import { FolderService } from 'src/app/folder.service';
-import { SystemConfigService } from 'src/app/system-config.service';
-import { DbStatusService } from 'src/app/db-status.service';
 import { DonutChartComponent } from '../donut-chart/donut-chart.component';
 
 @Component({
@@ -15,16 +13,13 @@ export class FolderChartComponent implements OnInit {
   @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
   chartID: string = 'foldersChart';
   elevation: string = cardElevation;
-  folderStates: Folder.stateType[];
 
-  constructor(
+  constructor(private folderService: FolderService) { }
-    private systemConfigService: SystemConfigService,
-    private folderService: FolderService,
-    private dbStatusService: DbStatusService
-  ) { }
 
   ngOnInit(): void {
-    //
+    for (let state in Folder.StateType) {
+      console.log(state);
+    }
   }
 
   ngAfterViewInit() {
@@ -34,8 +29,9 @@ export class FolderChartComponent implements OnInit {
         // TODO: Clear existing data
         this.donutChart.data([40]);
 
-        // state?
+        // Get StateType and convert to string 
-        const state: string = Folder.statusToString(folder);
+        const stateType: Folder.StateType = Folder.getStateType(folder);
+        const state: string = Folder.stateTypeToString(stateType);
         console.log("folder state?", state, folder);
       }
     );

src/app/folder.ts

@@ -9,27 +9,99 @@ interface Folder {
 }
 
 namespace Folder {
-    export enum stateType {
+    export enum StateType {
+        Paused = 1,
+        Unknown,
+        Unshared,
+        WaitingToScan,
+        Stopped,
+        Scanning,
+        Idle,
+        LocalAdditions,
+        WaitingToSync,
+        PreparingToSync,
+        Syncing,
+        OutOfSync,
+        FailedItems,
     }
 
-    export function statusToString(f: Folder): string {
+    /**
-        const fs: Folder.Status = f.status;
+     * stateTypeToString returns a string representation of
-        const state: string = fs.state;
+     * the StateType enum
+     * @param s StateType
+     */
+    export function stateTypeToString(s: StateType): string {
+        switch (s) {
+            case StateType.Paused:
+                return 'Paused';
+            case StateType.Unknown:
+                return 'Unknown';
+            case StateType.Unshared:
+                return 'Unshared';
+            case StateType.WaitingToSync:
+                return 'Waiting to Sync';
+            case StateType.Stopped:
+                return 'Stopped';
+            case StateType.Scanning:
+                return 'Scanning';
+            case StateType.Idle:
+                return 'Up to Date';
+            case StateType.LocalAdditions:
+                return 'Local Additions';
+            case StateType.WaitingToScan:
+                return 'Waiting to Scan';
+            case StateType.PreparingToSync:
+                return 'Preparing to Sync';
+            case StateType.Syncing:
+                return 'Syncing';
+            case StateType.OutOfSync:
+                return 'Out of Sync';
+            case StateType.FailedItems:
+                return 'Failed Items';
+        }
+    }
 
+    /**
+     * getStatusType looks at a folder and determines the correct
+     * StateType to return
+     * 
+     * Possible state values from API
+     * "idle", "scanning", "scan-waiting", "sync-waiting", "sync-preparing"
+     * "syncing", "error", "unknown"
+     * 
+     * @param f Folder
+     */
+    export function getStateType(f: Folder): StateType {
         if (f.paused) {
-            return 'paused';
+            return StateType.Paused;
         }
 
         if (!f.status || (Object.keys(f.status).length === 0)) {
-            return 'unknown';
+            return StateType.Unknown;
         }
 
-        if (state === 'error') {
+        const fs: Folder.Status = f.status;
-            return 'stopped'; // legacy, the state is called "stopped" in the GUI
+        const state: string = fs.state;
-        }
 
-        if (state !== 'idle') {
+        // Match API string to StateType
-            return state;
+        switch (state) {
+            case "idle":
+                return StateType.Idle;
+            case "scanning":
+                return StateType.Scanning;
+            case "scan-waiting":
+                return StateType.WaitingToScan;
+            case "sync-waiting":
+                return StateType.WaitingToSync;
+            case "sync-preparing":
+                return StateType.PreparingToSync;
+            case "syncing":
+                return StateType.Syncing;
+            case "error":
+                // legacy, the state is called "stopped" in the gui
+                return StateType.Stopped;
+            case "unknown":
+                return StateType.Unknown;
         }
 
         const needTotalItems = fs.needDeletes + fs.needDirectories +
@@ -38,21 +110,22 @@ namespace Folder {
             fs.receiveOnlyChangedFiles + fs.receiveOnlyChangedSymlinks;
 
         if (needTotalItems > 0) {
-            return 'outofsync';
+            return StateType.OutOfSync;
         }
         if (f.status.pullErrors > 0) {
-            return 'faileditems';
+            return StateType.FailedItems;
         }
         if (receiveOnlyTotalItems > 0) {
-            return 'localadditions';
+            return StateType.LocalAdditions;
         }
         if (f.devices.length <= 1) {
-            return 'unshared';
+            return StateType.Unshared;
         }
 
-        return state;
+        return StateType.Unknown;
     }
 
+
     export interface Status {
         globalBytes: number;
         globalDeleted: number;