diff --git a/src/app/charts/chart-item/chart-item.component.html b/src/app/charts/chart-item/chart-item.component.html
index ecd881fa1..204b72677 100644
--- a/src/app/charts/chart-item/chart-item.component.html
+++ b/src/app/charts/chart-item/chart-item.component.html
@@ -1,5 +1,5 @@
\ No newline at end of file
diff --git a/src/app/charts/chart-item/chart-item.component.ts b/src/app/charts/chart-item/chart-item.component.ts
index 601ba8626..6dbeb3bdc 100644
--- a/src/app/charts/chart-item/chart-item.component.ts
+++ b/src/app/charts/chart-item/chart-item.component.ts
@@ -1,16 +1,13 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
@Component({
selector: 'app-chart-item',
templateUrl: './chart-item.component.html',
styleUrls: ['./chart-item.component.scss']
})
-export class ChartItemComponent implements OnInit {
+export class ChartItemComponent {
@Input() state: string;
@Input() count: number;
+
constructor() { }
-
- ngOnInit(): void {
- }
-
}
diff --git a/src/app/charts/chart/chart.component.html b/src/app/charts/chart/chart.component.html
index 3b741f09c..960ea079b 100644
--- a/src/app/charts/chart/chart.component.html
+++ b/src/app/charts/chart/chart.component.html
@@ -4,7 +4,8 @@
diff --git a/src/app/charts/chart/chart.component.ts b/src/app/charts/chart/chart.component.ts
index f719e5a30..793870ad3 100644
--- a/src/app/charts/chart/chart.component.ts
+++ b/src/app/charts/chart/chart.component.ts
@@ -5,7 +5,8 @@ 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 { Type } from '../../type';
+import { StType } from '../../type';
+import { FilterService } from 'src/app/services/filter.service';
@@ -17,7 +18,7 @@ import { Type } from '../../type';
export class ChartComponent implements OnInit {
@ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
- @Input() type: Type;
+ @Input() type: StType;
title: string;
chartID: string;
states: { label: string, count: number, color: string }[] = [];
@@ -25,16 +26,25 @@ export class ChartComponent implements OnInit {
service: any;
namespace: any;
- constructor(private folderService: FolderService, private deviceServce: DeviceService) { }
+ constructor(
+ private folderService: FolderService,
+ private deviceServce: DeviceService,
+ private filterService: FilterService,
+ ) { }
+
+ onItemSelect(state: string) {
+ // Send chart item state to filter
+ this.filterService.changeFilter({ type: this.type, text: state });
+ }
ngOnInit(): void {
switch (this.type) {
- case Type.Folder:
+ case StType.Folder:
this.title = "Folders";
this.chartID = 'foldersChart';
this.service = this.folderService;
break;
- case Type.Device:
+ case StType.Device:
this.title = "Devices";
this.chartID = 'devicesChart';
this.service = this.deviceServce;
@@ -55,10 +65,10 @@ export class ChartComponent implements OnInit {
const state = t.state;
let color;
switch (this.type) {
- case Type.Folder:
+ case StType.Folder:
color = Folder.stateTypeToColor(t.stateType);
break;
- case Type.Device:
+ case StType.Device:
color = Device.stateTypeToColor(stateType);
break;
}
@@ -73,7 +83,6 @@ export class ChartComponent implements OnInit {
});
if (!found) {
- console.log(color, "look!!!")
this.states.push({ label: state, count: 1, color: color });
}
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 7a956f569..2ea56b163 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -1,15 +1,17 @@
import { Component, OnInit } from '@angular/core';
import { SystemConfigService } from '../services/system-config.service';
-import { Type } from '../type';
+import { StType } from '../type';
+import { FilterService } from '../services/filter.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
- styleUrls: ['./dashboard.component.scss']
+ styleUrls: ['./dashboard.component.scss'],
+ providers: [FilterService]
})
export class DashboardComponent {
- folderChart: Type = Type.Folder;
- deviceChart: Type = Type.Device;
+ folderChart: StType = StType.Folder;
+ deviceChart: StType = StType.Device;
constructor(private systemConfigService: SystemConfigService) { }
diff --git a/src/app/list-toggle/list-toggle.component.html b/src/app/list-toggle/list-toggle.component.html
index 51c58f0fb..bbd52d54f 100644
--- a/src/app/list-toggle/list-toggle.component.html
+++ b/src/app/list-toggle/list-toggle.component.html
@@ -1,4 +1,4 @@
-
+
Folders
Devices
\ No newline at end of file
diff --git a/src/app/list-toggle/list-toggle.component.ts b/src/app/list-toggle/list-toggle.component.ts
index e1f3e6a0e..cab39e70d 100644
--- a/src/app/list-toggle/list-toggle.component.ts
+++ b/src/app/list-toggle/list-toggle.component.ts
@@ -1,5 +1,5 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { Type } from '../type';
+import { StType } from '../type';
@@ -10,22 +10,15 @@ import { Type } from '../type';
})
export class ListToggleComponent implements OnInit {
- public listType = Type;
- @Output() listTypeEvent = new EventEmitter();
+ public listType = StType;
+ public toggleValue: string = "folders";
+ @Output() listTypeEvent = new EventEmitter();
constructor() { }
ngOnInit(): void {
}
- onSelect(t: Type): void {
+ onSelect(t: StType): void {
this.listTypeEvent.emit(t);
- switch (t) {
- case Type.Folder:
- console.log("folder action");
- break;
- case Type.Device:
- console.log("Device action");
- break;
- }
}
}
\ No newline at end of file
diff --git a/src/app/lists/device-list/device-list.component.html b/src/app/lists/device-list/device-list.component.html
index f831c6d45..5cc013d38 100644
--- a/src/app/lists/device-list/device-list.component.html
+++ b/src/app/lists/device-list/device-list.component.html
@@ -1,6 +1,6 @@
Filter
-
+
diff --git a/src/app/lists/device-list/device-list.component.ts b/src/app/lists/device-list/device-list.component.ts
index e23f74a9f..fc1c1af22 100644
--- a/src/app/lists/device-list/device-list.component.ts
+++ b/src/app/lists/device-list/device-list.component.ts
@@ -1,10 +1,12 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import Device from '../../device';
import { SystemConfigService } from '../../services/system-config.service';
+import { FilterService } from 'src/app/services/filter.service';
+import { StType } from 'src/app/type';
@Component({
selector: 'app-device-list',
@@ -16,11 +18,16 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable;
dataSource: MatTableDataSource;
+ filterValue: string = "";
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['id', 'name', 'state'];
- constructor(private systemConfigService: SystemConfigService) { };
+ constructor(
+ private systemConfigService: SystemConfigService,
+ private filterService: FilterService,
+ private cdr: ChangeDetectorRef,
+ ) { };
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
@@ -42,5 +49,15 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource;
+
+ // Listen for filter changes from other components
+ this.filterService.filterChanged$.subscribe(
+ input => {
+ if (input.type === StType.Device) {
+ this.dataSource.filter = input.text.trim().toLowerCase();
+ this.filterValue = input.text;
+ this.cdr.detectChanges();
+ }
+ });
}
}
\ No newline at end of file
diff --git a/src/app/lists/folder-list/folder-list.component.html b/src/app/lists/folder-list/folder-list.component.html
index aeee70087..476276877 100644
--- a/src/app/lists/folder-list/folder-list.component.html
+++ b/src/app/lists/folder-list/folder-list.component.html
@@ -1,6 +1,6 @@
Filter
-
+
diff --git a/src/app/lists/folder-list/folder-list.component.ts b/src/app/lists/folder-list/folder-list.component.ts
index faca8face..6c1185ff1 100644
--- a/src/app/lists/folder-list/folder-list.component.ts
+++ b/src/app/lists/folder-list/folder-list.component.ts
@@ -1,10 +1,12 @@
-import { AfterViewInit, Component, OnInit, ViewChild, Input } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import Folder from '../../folder';
import { SystemConfigService } from '../../services/system-config.service';
+import { FilterService } from 'src/app/services/filter.service';
+import { StType } from 'src/app/type';
@Component({
selector: 'app-folder-list',
@@ -16,11 +18,17 @@ export class FolderListComponent implements AfterViewInit, OnInit {
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable;
dataSource: MatTableDataSource;
+ filterValue: string = "";
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['id', 'label', 'path', 'state'];
- constructor(private systemConfigService: SystemConfigService) { };
+ constructor(
+ private systemConfigService: SystemConfigService,
+ private filterService: FilterService,
+ private cdr: ChangeDetectorRef,
+ ) {
+ };
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
@@ -42,5 +50,16 @@ export class FolderListComponent implements AfterViewInit, OnInit {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource;
+
+ // Listen for filter changes from other components
+ this.filterService.filterChanged$
+ .subscribe(
+ input => {
+ if (input.type === StType.Folder) {
+ this.dataSource.filter = input.text.trim().toLowerCase();
+ this.filterValue = input.text;
+ this.cdr.detectChanges();
+ }
+ });
}
}
\ No newline at end of file
diff --git a/src/app/lists/status-list/status-list.component.ts b/src/app/lists/status-list/status-list.component.ts
index eb849e88e..04aa42cc3 100644
--- a/src/app/lists/status-list/status-list.component.ts
+++ b/src/app/lists/status-list/status-list.component.ts
@@ -1,6 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import { Type } from '../../type';
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
+import { StType } from '../../type';
import { cardElevation } from '../../style';
+import { FilterService } from 'src/app/services/filter.service';
+import { ListToggleComponent } from 'src/app/list-toggle/list-toggle.component';
@Component({
@@ -8,18 +10,33 @@ import { cardElevation } from '../../style';
templateUrl: './status-list.component.html',
styleUrls: ['./status-list.component.scss']
})
-export class StatusListComponent implements OnInit {
- currentListType: Type = Type.Folder;
- listType = Type; // used in html
+export class StatusListComponent {
+ @ViewChild(ListToggleComponent) toggle: ListToggleComponent;
+ currentListType: StType = StType.Folder;
+ listType = StType; // used in html
elevation: string = cardElevation;
title: string = 'Status';
- constructor() { }
+ constructor(private filterService: FilterService) { }
- ngOnInit(): void {
+ ngAfterViewInit() {
+ // Listen for filter changes from other components
+ this.filterService.filterChanged$.subscribe(
+ input => {
+ this.currentListType = input.type;
+
+ switch (input.type) {
+ case StType.Folder:
+ this.toggle.toggleValue = "folders";
+ break;
+ case StType.Device:
+ this.toggle.toggleValue = "devices";
+ break;
+ }
+ });
}
- onToggle(t: Type) {
+ onToggle(t: StType) {
this.currentListType = t;
}
}
diff --git a/src/app/services/filter.service.spec.ts b/src/app/services/filter.service.spec.ts
new file mode 100644
index 000000000..279827c5c
--- /dev/null
+++ b/src/app/services/filter.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FilterService } from './filter.service';
+
+describe('FilterService', () => {
+ let service: FilterService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(FilterService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/services/filter.service.ts b/src/app/services/filter.service.ts
new file mode 100644
index 000000000..2cf2a2611
--- /dev/null
+++ b/src/app/services/filter.service.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { StType } from '../type';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+
+export interface FilterInput {
+ type: StType;
+ text: string
+}
+
+export class FilterService {
+
+ constructor() { }
+
+ private filterChangeSource = new BehaviorSubject({ type: StType.Folder, text: "" });
+
+ filterChanged$ = this.filterChangeSource.asObservable();
+
+ changeFilter(input: FilterInput) {
+ this.filterChangeSource.next(input);
+ }
+}
diff --git a/src/app/type.ts b/src/app/type.ts
index ac23f2e66..408bfb869 100644
--- a/src/app/type.ts
+++ b/src/app/type.ts
@@ -1,4 +1,4 @@
-export enum Type {
+export enum StType {
Folder = 1,
Device,
}
\ No newline at end of file