start of toggle to switch between devices and folders data table

src/app/app.module.ts

@@ -8,11 +8,15 @@ import { StatusListComponent } from './status-list/status-list.component';
 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 { StatusToggleComponent } from './status-toggle/status-toggle.component';
+
 
 @NgModule({
   declarations: [
     AppComponent,
     StatusListComponent,
+    StatusToggleComponent,
   ],
   imports: [
     BrowserModule,
@@ -21,6 +25,7 @@ import { MatSortModule } from '@angular/material/sort';
     MatTableModule,
     MatPaginatorModule,
     MatSortModule,
+    MatButtonToggleModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/device.ts

@@ -0,0 +1,6 @@
+export interface Device {
+    id: string;
+    name: string;
+
+    // TODO add additional properties
+}

src/app/mock-config-data.ts

@@ -1,4 +1,5 @@
 import { Folder } from './folder';
+import { Device } from './device';
 
 export const FOLDERS: Folder[] = [
     { id: 'GXWxf-3zgnU', label: 'Downloads' },
@@ -6,4 +7,11 @@ export const FOLDERS: Folder[] = [
     { id: 'QXWxf-3zgnU', label: 'Photos' },
     { id: 'RXWxf-3zgnU', label: 'Movies' },
     { id: 'SXWxf-3zgnU', label: 'Folder 5' },
+];
+
+export const DEVICES: Device[] = [
+    { id: '001', name: 'macbook' },
+    { id: '002', name: 'bedroom computer' },
+    { id: '003', name: 'server in closet' },
+    { id: '004', name: 'random' },
 ];

src/app/status-list/status-list-folder-datasource.ts

@@ -1,23 +1,22 @@
 import { DataSource } from '@angular/cdk/collections';
 import { MatPaginator } from '@angular/material/paginator';
 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 { FOLDERS } from '../mock-folders';
 
 /**
  * Data source for the StatusList view. This class should
  * encapsulate all logic for fetching and manipulating the displayed data
  * (including sorting, pagination, and filtering).
  */
-export class StatusListFolderDataSource extends DataSource<Folder> {
-  data: Folder[] = FOLDERS;
+export class StatusListFolderDataSource extends DataSource<any> {
+  data: any[];
   paginator: MatPaginator;
   sort: MatSort;
 
-  constructor(private systemConfigService: SystemConfigService) {
+  constructor() {
     super();
   }
 

src/app/status-list/status-list.component.html

@@ -1,3 +1,4 @@
+<app-status-toggle></app-status-toggle>
 <div class="mat-elevation-z8">
   <table mat-table class="full-width-table" matSort aria-label="Elements">
     <!-- Id Column -->

src/app/status-list/status-list.component.ts

@@ -2,10 +2,12 @@ import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable } from '@angular/material/table';
+
 import { StatusListFolderDataSource } from './status-list-folder-datasource';
 import { Folder } from '../folder';
 import { SystemConfigService } from '../system-config.service';
 
+
 @Component({
   selector: 'app-status-list',
   templateUrl: './status-list.component.html',
@@ -23,7 +25,12 @@ export class StatusListComponent implements AfterViewInit, OnInit {
   constructor(private systemConfigService: SystemConfigService) { };
 
   ngOnInit() {
-    this.dataSource = new StatusListFolderDataSource(this.systemConfigService);
+    this.dataSource = new StatusListFolderDataSource();
+    this.systemConfigService.getDevices().subscribe(
+      data => {
+        this.dataSource.data = data;
+      }
+    );
   }
 
   ngAfterViewInit() {

src/app/status-toggle/status-toggle.component.html

@@ -0,0 +1,4 @@
+<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
+    <mat-button-toggle value="folders">Folders</mat-button-toggle>
+    <mat-button-toggle value="devices">Devices</mat-button-toggle>
+</mat-button-toggle-group>

src/app/status-toggle/status-toggle.component.spec.ts

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

src/app/status-toggle/status-toggle.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-status-toggle',
+  templateUrl: './status-toggle.component.html',
+  styleUrls: ['./status-toggle.component.scss']
+})
+export class StatusToggleComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/system-config.service.ts

@@ -3,7 +3,8 @@ import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 import { Folder } from './folder';
-import { FOLDERS } from './mock-folders';
+import { Device } from './device';
+import { FOLDERS, DEVICES } from './mock-config-data';
 
 @Injectable({
   providedIn: 'root'
@@ -15,4 +16,9 @@ export class SystemConfigService {
   getFolders(): Observable<Folder[]> {
     return of(FOLDERS);
   }
+
+  getDevices(): Observable<Device[]> {
+    return of(DEVICES);
+  }
+
 }