From eaffbc0f922c71890a1b7e50b8466d2983d98a8e Mon Sep 17 00:00:00 2001 From: Jesse Lucas Date: Mon, 16 Mar 2020 12:11:27 -0400 Subject: [PATCH] refactor chart and list component structure --- src/app/app.module.ts | 25 ++++++++++++------- .../device-chart/device-chart.component.html | 1 + .../device-chart/device-chart.component.scss} | 0 .../device-chart.component.spec.ts | 25 +++++++++++++++++++ .../device-chart/device-chart.component.ts | 15 +++++++++++ .../donut-chart/donut-chart.component.html | 0 .../donut-chart/donut-chart.component.scss} | 0 .../donut-chart/donut-chart.component.spec.ts | 0 .../donut-chart/donut-chart.component.ts | 2 +- .../folder-chart/folder-chart.component.html | 1 + .../folder-chart/folder-chart.component.scss | 0 .../folder-chart.component.spec.ts | 25 +++++++++++++++++++ .../folder-chart/folder-chart.component.ts | 15 +++++++++++ .../device-list/device-list-datasource.ts | 4 +-- .../device-list/device-list.component.html | 0 .../device-list/device-list.component.scss | 0 .../device-list/device-list.component.spec.ts | 0 .../device-list/device-list.component.ts | 5 ++-- .../folder-list/folder-list-datasource.ts | 4 +-- .../folder-list/folder-list.component.html | 0 .../folder-list/folder-list.component.scss | 0 .../folder-list/folder-list.component.spec.ts | 0 .../folder-list/folder-list.component.ts | 4 +-- .../status-list/status-list.component.html | 0 .../status-list/status-list.component.scss | 0 .../status-list/status-list.component.spec.ts | 0 .../status-list/status-list.component.ts | 2 +- 27 files changed, 108 insertions(+), 20 deletions(-) create mode 100644 src/app/chart/device-chart/device-chart.component.html rename src/app/{donut-chart/donut-chart.component.scss => chart/device-chart/device-chart.component.scss} (100%) create mode 100644 src/app/chart/device-chart/device-chart.component.spec.ts create mode 100644 src/app/chart/device-chart/device-chart.component.ts rename src/app/{ => chart}/donut-chart/donut-chart.component.html (100%) rename src/app/{status-list/status-list.component.scss => chart/donut-chart/donut-chart.component.scss} (100%) rename src/app/{ => chart}/donut-chart/donut-chart.component.spec.ts (100%) rename src/app/{ => chart}/donut-chart/donut-chart.component.ts (96%) create mode 100644 src/app/chart/folder-chart/folder-chart.component.html create mode 100644 src/app/chart/folder-chart/folder-chart.component.scss create mode 100644 src/app/chart/folder-chart/folder-chart.component.spec.ts create mode 100644 src/app/chart/folder-chart/folder-chart.component.ts rename src/app/{ => list}/device-list/device-list-datasource.ts (95%) rename src/app/{ => list}/device-list/device-list.component.html (100%) rename src/app/{ => list}/device-list/device-list.component.scss (100%) rename src/app/{ => list}/device-list/device-list.component.spec.ts (100%) rename src/app/{ => list}/device-list/device-list.component.ts (90%) rename src/app/{ => list}/folder-list/folder-list-datasource.ts (95%) rename src/app/{ => list}/folder-list/folder-list.component.html (100%) rename src/app/{ => list}/folder-list/folder-list.component.scss (100%) rename src/app/{ => list}/folder-list/folder-list.component.spec.ts (100%) rename src/app/{ => list}/folder-list/folder-list.component.ts (92%) rename src/app/{ => list}/status-list/status-list.component.html (100%) create mode 100644 src/app/list/status-list/status-list.component.scss rename src/app/{ => list}/status-list/status-list.component.spec.ts (100%) rename src/app/{ => list}/status-list/status-list.component.ts (91%) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index fb6a0084e..fac7f6fcd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,22 +6,27 @@ import { MatTableModule } from '@angular/material/table'; import { MatPaginatorModule } from '@angular/material/paginator'; import { MatSortModule } from '@angular/material/sort'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { MatCardModule } from '@angular/material/card'; +import { FlexLayoutModule } from '@angular/flex-layout'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; + import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { StatusListComponent } from './status-list/status-list.component'; -import { FolderListComponent } from './folder-list/folder-list.component'; -import { DeviceListComponent } from './device-list/device-list.component'; +import { StatusListComponent } from './list/status-list/status-list.component'; +import { FolderListComponent } from './list/folder-list/folder-list.component'; +import { DeviceListComponent } from './list/device-list/device-list.component'; +import { DonutChartComponent } from './chart/donut-chart/donut-chart.component'; +import { DeviceChartComponent } from './chart/device-chart/device-chart.component'; +import { FolderChartComponent } from './chart/folder-chart/folder-chart.component'; +import { DashboardComponent } from './dashboard/dashboard.component'; import { StatusToggleComponent } from './status-toggle/status-toggle.component'; + import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; import { InMemoryConfigDataService } from './in-memory-config-data.service'; + import { deviceID } from './api-utils'; import { environment } from '../environments/environment'; -import { DashboardComponent } from './dashboard/dashboard.component'; -import { MatCardModule } from '@angular/material/card'; -import { FlexLayoutModule } from '@angular/flex-layout'; -import { DonutChartComponent } from './donut-chart/donut-chart.component'; @NgModule({ declarations: [ @@ -32,6 +37,8 @@ import { DonutChartComponent } from './donut-chart/donut-chart.component'; StatusToggleComponent, DashboardComponent, DonutChartComponent, + DeviceChartComponent, + FolderChartComponent, ], imports: [ BrowserModule, @@ -41,6 +48,8 @@ import { DonutChartComponent } from './donut-chart/donut-chart.component'; MatPaginatorModule, MatSortModule, MatButtonToggleModule, + MatCardModule, + FlexLayoutModule, HttpClientModule, HttpClientXsrfModule.withOptions({ headerName: 'X-CSRF-Token-' + deviceID(), @@ -48,8 +57,6 @@ import { DonutChartComponent } from './donut-chart/donut-chart.component'; }), environment.production ? [] : HttpClientInMemoryWebApiModule.forRoot(InMemoryConfigDataService, { delay: 200 }), - MatCardModule, - FlexLayoutModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/chart/device-chart/device-chart.component.html b/src/app/chart/device-chart/device-chart.component.html new file mode 100644 index 000000000..d66130b49 --- /dev/null +++ b/src/app/chart/device-chart/device-chart.component.html @@ -0,0 +1 @@ +

device-chart works!

diff --git a/src/app/donut-chart/donut-chart.component.scss b/src/app/chart/device-chart/device-chart.component.scss similarity index 100% rename from src/app/donut-chart/donut-chart.component.scss rename to src/app/chart/device-chart/device-chart.component.scss diff --git a/src/app/chart/device-chart/device-chart.component.spec.ts b/src/app/chart/device-chart/device-chart.component.spec.ts new file mode 100644 index 000000000..9f40493dc --- /dev/null +++ b/src/app/chart/device-chart/device-chart.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeviceChartComponent } from './device-chart.component'; + +describe('DeviceChartComponent', () => { + let component: DeviceChartComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DeviceChartComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DeviceChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/chart/device-chart/device-chart.component.ts b/src/app/chart/device-chart/device-chart.component.ts new file mode 100644 index 000000000..d58849e79 --- /dev/null +++ b/src/app/chart/device-chart/device-chart.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-device-chart', + templateUrl: './device-chart.component.html', + styleUrls: ['./device-chart.component.scss'] +}) +export class DeviceChartComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/donut-chart/donut-chart.component.html b/src/app/chart/donut-chart/donut-chart.component.html similarity index 100% rename from src/app/donut-chart/donut-chart.component.html rename to src/app/chart/donut-chart/donut-chart.component.html diff --git a/src/app/status-list/status-list.component.scss b/src/app/chart/donut-chart/donut-chart.component.scss similarity index 100% rename from src/app/status-list/status-list.component.scss rename to src/app/chart/donut-chart/donut-chart.component.scss diff --git a/src/app/donut-chart/donut-chart.component.spec.ts b/src/app/chart/donut-chart/donut-chart.component.spec.ts similarity index 100% rename from src/app/donut-chart/donut-chart.component.spec.ts rename to src/app/chart/donut-chart/donut-chart.component.spec.ts diff --git a/src/app/donut-chart/donut-chart.component.ts b/src/app/chart/donut-chart/donut-chart.component.ts similarity index 96% rename from src/app/donut-chart/donut-chart.component.ts rename to src/app/chart/donut-chart/donut-chart.component.ts index ba70adb24..8b4f687e8 100644 --- a/src/app/donut-chart/donut-chart.component.ts +++ b/src/app/chart/donut-chart/donut-chart.component.ts @@ -26,7 +26,7 @@ export class DonutChartComponent implements OnInit { data: { labels: ["Up to Date", "Syncing", "Waiting to Sync", "Out of Sync", "Failed Items"], datasets: [{ - data: [1, 2, 3, 0, 0], + data: [100, 200, 300, 0, 0], backgroundColor: [ '#56C568', 'rgba(54, 162, 235, 1)', diff --git a/src/app/chart/folder-chart/folder-chart.component.html b/src/app/chart/folder-chart/folder-chart.component.html new file mode 100644 index 000000000..f193f5720 --- /dev/null +++ b/src/app/chart/folder-chart/folder-chart.component.html @@ -0,0 +1 @@ +

folder-chart works!

diff --git a/src/app/chart/folder-chart/folder-chart.component.scss b/src/app/chart/folder-chart/folder-chart.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/chart/folder-chart/folder-chart.component.spec.ts b/src/app/chart/folder-chart/folder-chart.component.spec.ts new file mode 100644 index 000000000..1a9754940 --- /dev/null +++ b/src/app/chart/folder-chart/folder-chart.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FolderChartComponent } from './folder-chart.component'; + +describe('FolderChartComponent', () => { + let component: FolderChartComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FolderChartComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FolderChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/chart/folder-chart/folder-chart.component.ts b/src/app/chart/folder-chart/folder-chart.component.ts new file mode 100644 index 000000000..ab43ff1f0 --- /dev/null +++ b/src/app/chart/folder-chart/folder-chart.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-folder-chart', + templateUrl: './folder-chart.component.html', + styleUrls: ['./folder-chart.component.scss'] +}) +export class FolderChartComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/device-list/device-list-datasource.ts b/src/app/list/device-list/device-list-datasource.ts similarity index 95% rename from src/app/device-list/device-list-datasource.ts rename to src/app/list/device-list/device-list-datasource.ts index 95d3a6796..d2cbc6724 100644 --- a/src/app/device-list/device-list-datasource.ts +++ b/src/app/list/device-list/device-list-datasource.ts @@ -4,8 +4,8 @@ import { MatSort } from '@angular/material/sort'; import { map } from 'rxjs/operators'; import { Observable, of as observableOf, merge } from 'rxjs'; -import { Device } from '../device'; -import { SystemConfigService } from '../system-config.service'; +import { Device } from '../../device'; +import { SystemConfigService } from '../../system-config.service'; /** * Data source for the DeviceList view. This class should diff --git a/src/app/device-list/device-list.component.html b/src/app/list/device-list/device-list.component.html similarity index 100% rename from src/app/device-list/device-list.component.html rename to src/app/list/device-list/device-list.component.html diff --git a/src/app/device-list/device-list.component.scss b/src/app/list/device-list/device-list.component.scss similarity index 100% rename from src/app/device-list/device-list.component.scss rename to src/app/list/device-list/device-list.component.scss diff --git a/src/app/device-list/device-list.component.spec.ts b/src/app/list/device-list/device-list.component.spec.ts similarity index 100% rename from src/app/device-list/device-list.component.spec.ts rename to src/app/list/device-list/device-list.component.spec.ts diff --git a/src/app/device-list/device-list.component.ts b/src/app/list/device-list/device-list.component.ts similarity index 90% rename from src/app/device-list/device-list.component.ts rename to src/app/list/device-list/device-list.component.ts index 73971924b..8ee6edddd 100644 --- a/src/app/device-list/device-list.component.ts +++ b/src/app/list/device-list/device-list.component.ts @@ -4,9 +4,8 @@ import { MatSort } from '@angular/material/sort'; import { MatTable } from '@angular/material/table'; import { DeviceListDataSource } from './device-list-datasource'; -import { Device } from '../device'; -import { SystemConfigService } from '../system-config.service'; -import { flatMap } from 'rxjs/operators'; +import { Device } from '../../device'; +import { SystemConfigService } from '../../system-config.service'; @Component({ diff --git a/src/app/folder-list/folder-list-datasource.ts b/src/app/list/folder-list/folder-list-datasource.ts similarity index 95% rename from src/app/folder-list/folder-list-datasource.ts rename to src/app/list/folder-list/folder-list-datasource.ts index 741bb788e..1f9379a77 100644 --- a/src/app/folder-list/folder-list-datasource.ts +++ b/src/app/list/folder-list/folder-list-datasource.ts @@ -4,8 +4,8 @@ import { MatSort } from '@angular/material/sort'; import { map } from 'rxjs/operators'; import { Observable, of as observableOf, merge } from 'rxjs'; -import { Folder } from '../folder'; -import { SystemConfigService } from '../system-config.service'; +import { Folder } from '../../folder'; +import { SystemConfigService } from '../../system-config.service'; /** * Data source for the FolderList view. This class should diff --git a/src/app/folder-list/folder-list.component.html b/src/app/list/folder-list/folder-list.component.html similarity index 100% rename from src/app/folder-list/folder-list.component.html rename to src/app/list/folder-list/folder-list.component.html diff --git a/src/app/folder-list/folder-list.component.scss b/src/app/list/folder-list/folder-list.component.scss similarity index 100% rename from src/app/folder-list/folder-list.component.scss rename to src/app/list/folder-list/folder-list.component.scss diff --git a/src/app/folder-list/folder-list.component.spec.ts b/src/app/list/folder-list/folder-list.component.spec.ts similarity index 100% rename from src/app/folder-list/folder-list.component.spec.ts rename to src/app/list/folder-list/folder-list.component.spec.ts diff --git a/src/app/folder-list/folder-list.component.ts b/src/app/list/folder-list/folder-list.component.ts similarity index 92% rename from src/app/folder-list/folder-list.component.ts rename to src/app/list/folder-list/folder-list.component.ts index ac18ee0c5..f0b446e20 100644 --- a/src/app/folder-list/folder-list.component.ts +++ b/src/app/list/folder-list/folder-list.component.ts @@ -4,8 +4,8 @@ import { MatSort } from '@angular/material/sort'; import { MatTable } from '@angular/material/table'; import { FolderListDataSource } from './folder-list-datasource'; -import { Folder } from '../folder'; -import { SystemConfigService } from '../system-config.service'; +import { Folder } from '../../folder'; +import { SystemConfigService } from '../../system-config.service'; @Component({ diff --git a/src/app/status-list/status-list.component.html b/src/app/list/status-list/status-list.component.html similarity index 100% rename from src/app/status-list/status-list.component.html rename to src/app/list/status-list/status-list.component.html diff --git a/src/app/list/status-list/status-list.component.scss b/src/app/list/status-list/status-list.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/status-list/status-list.component.spec.ts b/src/app/list/status-list/status-list.component.spec.ts similarity index 100% rename from src/app/status-list/status-list.component.spec.ts rename to src/app/list/status-list/status-list.component.spec.ts diff --git a/src/app/status-list/status-list.component.ts b/src/app/list/status-list/status-list.component.ts similarity index 91% rename from src/app/status-list/status-list.component.ts rename to src/app/list/status-list/status-list.component.ts index 39cd5ee1b..6869b8533 100644 --- a/src/app/status-list/status-list.component.ts +++ b/src/app/list/status-list/status-list.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Status } from '../status'; +import { Status } from '../../status'; @Component({