Rename folders

src/app/app.module.ts

@@ -13,12 +13,12 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StatusListComponent } from './list/status-list/status-list.component';
+import { StatusListComponent } from './lists/status-list/status-list.component';
-import { FolderListComponent } from './list/folder-list/folder-list.component';
+import { FolderListComponent } from './lists/folder-list/folder-list.component';
-import { DeviceListComponent } from './list/device-list/device-list.component';
+import { DeviceListComponent } from './lists/device-list/device-list.component';
-import { DonutChartComponent } from './chart/donut-chart/donut-chart.component';
+import { DonutChartComponent } from './charts/donut-chart/donut-chart.component';
-import { DeviceChartComponent } from './chart/device-chart/device-chart.component';
+import { DeviceChartComponent } from './charts/device-chart/device-chart.component';
-import { FolderChartComponent } from './chart/folder-chart/folder-chart.component';
+import { FolderChartComponent } from './charts/folder-chart/folder-chart.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { ListToggleComponent } from './list-toggle/list-toggle.component';
 
@@ -27,7 +27,7 @@ import { InMemoryConfigDataService } from './in-memory-config-data.service';
 
 import { deviceID } from './api-utils';
 import { environment } from '../environments/environment';
-import { ChartItemComponent } from './chart/chart-item/chart-item.component';
+import { ChartItemComponent } from './charts/chart-item/chart-item.component';
 
 @NgModule({
   declarations: [

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

@@ -1,6 +0,0 @@
-<mat-card class="{{elevation}}">
-    <mat-card-title>Devices</mat-card-title>
-    <mat-card-content>
-        <app-donut-chart [elementID]="chartID"></app-donut-chart>
-    </mat-card-content>
-</mat-card>

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

@@ -1,30 +0,0 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { cardElevation } from '../../style';
-import { SystemConfigService } from 'src/app/system-config.service';
-import { DonutChartComponent } from '../donut-chart/donut-chart.component';
-
-@Component({
-  selector: 'app-device-chart',
-  templateUrl: './device-chart.component.html',
-  styleUrls: ['./device-chart.component.scss']
-})
-export class DeviceChartComponent implements OnInit {
-  @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
-
-  chartID: string = 'devicesChart';
-  elevation: string = cardElevation;
-
-  constructor(private systemConfigService: SystemConfigService) { }
-
-  ngOnInit(): void {
-
-  }
-
-  ngAfterViewInit(): void {
-    this.systemConfigService.getDevices().subscribe(
-      devices => {
-        this.donutChart.data([0, 230, 32, 40]);
-      }
-    );
-  }
-}

src/app/charts/device-chart/device-chart.component.html

@@ -0,0 +1,12 @@
+<mat-card class="{{elevation}}">
+    <mat-card-title>Devices</mat-card-title>
+    <mat-card-content>
+        <div fxLayout="row" fxLayoutAlign="space-between start">
+            <app-donut-chart [elementID]="chartID"></app-donut-chart>
+            <div class="items" fxLayout="column" fxLayoutAlign="space-evenly end">
+                <app-chart-item *ngFor="let state of states | keyvalue" [state]="state.key" [count]="state.value">
+                </app-chart-item>
+            </div>
+        </div>
+    </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,46 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { cardElevation } from '../../style';
+import { DonutChartComponent } from '../donut-chart/donut-chart.component';
+import Folder from '../../folder'
+import { FolderService } from 'src/app/folder.service';
+
+@Component({
+  selector: 'app-device-chart',
+  templateUrl: './device-chart.component.html',
+  styleUrls: ['./device-chart.component.scss']
+})
+export class DeviceChartComponent implements OnInit {
+  @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
+  chartID: string = 'devicesChart';
+  elevation: string = cardElevation;
+  states: Map<string, number>;
+
+  constructor(private folderService: FolderService) {
+    this.states = new Map();
+  }
+
+  ngOnInit(): void {
+
+  }
+
+  ngAfterViewInit(): void {
+    // TODO switch to deviceService
+    this.folderService.getAll().subscribe(
+      folder => {
+        // TODO: Clear existing data
+        this.donutChart.data([10]);
+
+        // Get StateType and convert to string 
+        const stateType: Folder.StateType = Folder.getStateType(folder);
+        const state: string = Folder.stateTypeToString(stateType);
+
+        // Instantiate empty count states
+        if (!this.states.has(state)) {
+          this.states.set(state, 0);
+        }
+        const count: number = this.states.get(state) + 1;
+        this.states.set(state, count);
+      }
+    );
+  }
+}

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

@@ -26,7 +26,6 @@ export class FolderChartComponent implements OnInit {
   }
 
   ngAfterViewInit() {
-    // TODO: Find total number of folders
     this.folderService.getAll().subscribe(
       folder => {
         // TODO: Clear existing data
@@ -44,6 +43,5 @@ export class FolderChartComponent implements OnInit {
         this.states.set(state, count);
       }
     );
-
   }
 }