Martchus
/
syncthing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Combine folder and device chart component into chart component

This commit is contained in:
Jesse Lucas 2020-03-30 13:44:54 -04:00
parent 933a57af7a
commit 6af2657d7e
14 changed files with 111 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.module.ts
View File

@ -18,8 +18,6 @@ import { StatusListComponent } from './lists/status-list/status-list.component';
import { FolderListComponent } from './lists/folder-list/folder-list.component';
import { DeviceListComponent } from './lists/device-list/device-list.component';
import { DonutChartComponent } from './charts/donut-chart/donut-chart.component';
import { DeviceChartComponent } from './charts/device-chart/device-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';
@ -29,6 +27,7 @@ import { InMemoryConfigDataService } from './services/in-memory-config-data.serv
import { deviceID } from './api-utils';
import { environment } from '../environments/environment';
import { ChartItemComponent } from './charts/chart-item/chart-item.component';
import { ChartComponent } from './charts/chart/chart.component';
@NgModule({
declarations: [
@ -39,8 +38,7 @@ import { ChartItemComponent } from './charts/chart-item/chart-item.component';
ListToggleComponent,
DashboardComponent,
DonutChartComponent,
DeviceChartComponent,
FolderChartComponent,
ChartComponent,
ChartItemComponent,
],
imports: [

4
src/app/chart.ts Normal file
View File

@ -0,0 +1,4 @@
export const enum ChartType {
Folder = 0,
Device
}

2
src/app/charts/device-chart/device-chart.component.html → src/app/charts/chart/chart.component.html
View File

@ -1,5 +1,5 @@
<div class="{{elevation}} tui-card">
<div class="tui-card-title">{{title}}</div>
<div class="tui-card-title">{{title | uppercase}}</div>
<div class="tui-card-content">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<app-donut-chart [elementID]="chartID" fxFlex="30" [title]="title"></app-donut-chart>

0
src/app/charts/device-chart/device-chart.component.scss → src/app/charts/chart/chart.component.scss
View File

12
src/app/charts/folder-chart/folder-chart.component.spec.ts → src/app/charts/chart/chart.component.spec.ts
View File

@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FolderChartComponent } from './folder-chart.component';
import { ChartComponent } from './chart.component';
describe('FolderChartComponent', () => {
let component: FolderChartComponent;
let fixture: ComponentFixture<FolderChartComponent>;
describe('ChartComponent', () => {
let component: ChartComponent;
let fixture: ComponentFixture<ChartComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FolderChartComponent ]
declarations: [ ChartComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FolderChartComponent);
fixture = TestBed.createComponent(ChartComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

91
src/app/charts/chart/chart.component.ts Normal file
View File

@ -0,0 +1,91 @@
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import Folder from '../../folder'
import { cardElevation } from '../../style'
import { FolderService } from 'src/app/services/folder.service';
import { DonutChartComponent } from '../donut-chart/donut-chart.component';
import { DeviceService } from 'src/app/services/device.service';
import Device from 'src/app/device';
import { ChartType } from '../../chart';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements OnInit {
@ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
@Input() type: ChartType;
title: string;
chartID: string;
states: { label: string, count: number, color: string }[] = [];
elevation: string = cardElevation;
service: any;
namespace: any;
constructor(private folderService: FolderService, private deviceServce: DeviceService) { }
ngOnInit(): void {
switch (this.type) {
case ChartType.Folder:
this.title = "Folders";
this.chartID = 'foldersChart';
this.service = this.folderService;
break;
case ChartType.Device:
this.title = "Devices";
this.chartID = 'devicesChart';
this.service = this.deviceServce;
break;
}
}
ngAfterViewInit() {
let totalCount: number = 0;
this.service.getAll().subscribe(
folder => {
// Count the number of folders and set chart
totalCount++;
this.donutChart.count = totalCount;
// Get StateType and convert to string
let stateType;
let state: string;
let color;
switch (this.type) {
case ChartType.Folder:
stateType = Folder.getStateType(folder);
state = Folder.stateTypeToString(stateType);
color = Folder.stateTypeToColor(stateType);
break;
case ChartType.Device:
stateType = Device.getStateType(folder);
state = Device.stateTypeToString(stateType);
color = Device.stateTypeToColor(stateType);
break;
}
// Check if state exists
let found: boolean = false;
this.states.forEach(s => {
if (s.label === state) {
s.count = s.count + 1;
found = true;
}
});
if (!found) {
console.log(color, "look!!!")
this.states.push({ label: state, count: 1, color: color });
}
this.donutChart.updateData(this.states);
},
err => console.error('Observer got an error: ' + err),
() => {
}
);
}
}

25
src/app/charts/device-chart/device-chart.component.spec.ts
View File

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DeviceChartComponent } from './device-chart.component';
describe('DeviceChartComponent', () => {
let component: DeviceChartComponent;
let fixture: ComponentFixture<DeviceChartComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DeviceChartComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DeviceChartComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

53
src/app/charts/device-chart/device-chart.component.ts
View File

@ -1,53 +0,0 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { cardElevation } from '../../style';
import { DonutChartComponent } from '../donut-chart/donut-chart.component';
import { DeviceService } from 'src/app/services/device.service';
import Device from '../../device';
@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: { label: string, count: number, color: string }[] = [];
title: string = "Devices";
constructor(private deviceService: DeviceService) { }
ngOnInit(): void { }
ngAfterViewInit(): void {
let totalCount: number = 0;
this.deviceService.getAll().subscribe(
device => {
// Count the number of folders and set chart
totalCount++;
this.donutChart.count = totalCount;
// Get StateType and convert to string
const stateType: Device.StateType = Device.getStateType(device);
const state: string = Device.stateTypeToString(stateType);
const color: string = Device.stateTypeToColor(stateType);
// Check if state exists
let found: boolean = false;
this.states.forEach(s => {
if (s.label === state) {
s.count = s.count + 1;
found = true;
}
});
if (!found) {
this.states.push({ label: state, count: 1, color: color });
}
this.donutChart.updateData(this.states);
}
);
}
}

12
src/app/charts/folder-chart/folder-chart.component.html
View File

@ -1,12 +0,0 @@
<div class="{{elevation}} tui-card">
<div class="tui-card-title">{{title}}</div>
<div class="tui-card-content">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<app-donut-chart [elementID]="chartID" fxFlex="30" [title]="title"></app-donut-chart>
<div class="items" fxLayout="column" fxLayoutAlign="start end" fxFlex="70">
<app-chart-item *ngFor="let state of states" [state]="state.label" [count]="state.count">
</app-chart-item>
</div>
</div>
</div>
</div>

0
src/app/charts/folder-chart/folder-chart.component.scss
View File

59
src/app/charts/folder-chart/folder-chart.component.ts
View File

@ -1,59 +0,0 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import Folder from '../../folder'
import { cardElevation } from '../../style'
import { FolderService } from 'src/app/services/folder.service';
import { DonutChartComponent } from '../donut-chart/donut-chart.component';
@Component({
selector: 'app-folder-chart',
templateUrl: './folder-chart.component.html',
styleUrls: ['./folder-chart.component.scss']
})
export class FolderChartComponent implements OnInit {
@ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
chartID: string = 'foldersChart';
states: { label: string, count: number, color: string }[] = [];
elevation: string = cardElevation;
title: string = "Folders";
constructor(private folderService: FolderService) { }
ngOnInit(): void {
// for (let state in Folder.StateType) { }
}
ngAfterViewInit() {
let totalCount: number = 0;
this.folderService.getAll().subscribe(
folder => {
// Count the number of folders and set chart
totalCount++;
this.donutChart.count = totalCount;
// Get StateType and convert to string
const stateType: Folder.StateType = Folder.getStateType(folder);
const state: string = Folder.stateTypeToString(stateType);
const color: string = Folder.stateTypeToColor(stateType);
// Check if state exists
let found: boolean = false;
this.states.forEach(s => {
if (s.label === state) {
s.count = s.count + 1;
found = true;
}
});
if (!found) {
console.log(color, "look!!!")
this.states.push({ label: state, count: 1, color: color });
}
this.donutChart.updateData(this.states);
},
err => console.error('Observer got an error: ' + err),
() => {
}
);
}
}

4
src/app/dashboard/dashboard.component.html
View File

@ -4,8 +4,8 @@
<div fxLayout="column" fxLayoutGap="16px" class="grid-container">
<h1>Tech UI</h1>
<div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="space-between stretch">
<app-folder-chart fxFlex="50"></app-folder-chart>
<app-device-chart fxFlex="50"></app-device-chart>
<app-chart [type]=folderChart fxFlex="50"></app-chart>
<app-chart [type]=deviceChart fxFlex="50"></app-chart>
</div>
<app-status-list gdArea="status-list"></app-status-list>
<div></div>

4
src/app/dashboard/dashboard.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { SystemConfigService } from '../services/system-config.service';
import { ChartType } from '../chart';
@Component({
selector: 'app-dashboard',
@ -7,7 +8,8 @@ import { SystemConfigService } from '../services/system-config.service';
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent {
folderChart: ChartType = ChartType.Folder;
deviceChart: ChartType = ChartType.Device;
constructor(private systemConfigService: SystemConfigService) { }

3
src/styles.scss
View File

@ -87,7 +87,8 @@ html, body {
.tui-card-title {
padding: 16px 16px 0 16px;
font-size: mat-font-size($tech-ui-typography, subheading-2)
font-size: mat-font-size($tech-ui-typography, subheading-2);
color: #0891D1;
}
.tui-card-content {