start of dashboard component with flexbox

package-lock.json

@@ -373,6 +373,11 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.0.5.tgz",
       "integrity": "sha512-7VznrYjaAIzeq/zQ7v6tbeoOI7JJKgChKwG7s8jRoEpENu+w2pRlRdyQul88iJLsXgObR+/TfBNm/K+G4cqAFw=="
     },
+    "@angular/flex-layout": {
+      "version": "9.0.0-beta.29",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-9.0.0-beta.29.tgz",
+      "integrity": "sha512-93sxR+kYfYMOdnlWL0Q77FZ428gg8XnBu0YZm6GsCdkw/vLggIT/G1ZAqHlCPIODt6pxmCJ5KXh4ShvniIYDsA=="
+    },
     "@angular/forms": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.0.5.tgz",

package.json

@@ -16,6 +16,7 @@
     "@angular/common": "~9.0.5",
     "@angular/compiler": "~9.0.5",
     "@angular/core": "~9.0.5",
+    "@angular/flex-layout": "^9.0.0-beta.29",
     "@angular/forms": "~9.0.5",
     "@angular/material": "^9.1.2",
     "@angular/platform-browser": "~9.0.5",

src/app/app.component.html

@@ -1,2 +1 @@
-<h1>{{title}}</h1>
-<app-status-list></app-status-list>
+<app-dashboard></app-dashboard>

src/app/app.component.ts

@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import { SystemConfigService } from './system-config.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -7,16 +6,5 @@ import { SystemConfigService } from './system-config.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'Tech UI';
-
-  constructor(private systemConfigService: SystemConfigService) { }
-
-  ngOnInit(): void {
-    console.log("app component init");
-    this.systemConfigService.getSystemConfig().subscribe(
-      x => console.log('Observer got a next value: ' + x),
-      err => console.error('Observer got an error: ' + err),
-      () => console.log('Observer got a complete notification')
-    );
-  }
+  constructor() { }
 }

src/app/app.module.ts

@@ -14,11 +14,13 @@ 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 { StatusToggleComponent } from './status-toggle/status-toggle.component';
-import { DeviceListDataSource } from './device-list/device-list-datasource';
 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 { environment } from '../environments/environment';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { MatCardModule } from '@angular/material/card';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @NgModule({
   declarations: [
@@ -27,6 +29,7 @@ import { environment } from '../environments/environment'
     FolderListComponent,
     DeviceListComponent,
     StatusToggleComponent,
+    DashboardComponent,
   ],
   imports: [
     BrowserModule,
@@ -42,7 +45,9 @@ import { environment } from '../environments/environment'
       cookieName: 'CSRF-Token-' + deviceID(),
     }),
     environment.production ?
-      [] : HttpClientInMemoryWebApiModule.forRoot(InMemoryConfigDataService)
+      [] : HttpClientInMemoryWebApiModule.forRoot(InMemoryConfigDataService),
+    MatCardModule,
+    FlexLayoutModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/dashboard/dashboard.component.html

@@ -0,0 +1,21 @@
+<div class="grid-container" gdAreas="header header | folders devices | status-list status-list | footer footer"
+  gdGap="16px" gdRows="auto auto auto">
+  <div gdArea="header">
+    <h1>Tech UI</h1>
+  </div>
+  <div gdArea="folders">
+    <mat-card>
+      <mat-card-title>Folders</mat-card-title>
+      <mat-card-content></mat-card-content>
+    </mat-card>
+  </div>
+  <div gdArea="devices">
+    <mat-card>
+      <mat-card-title>Devices</mat-card-title>
+      <mat-card-content></mat-card-content>
+    </mat-card>
+  </div>
+  <app-status-list gdArea="status-list"></app-status-list>
+  <div gdArea="footer">
+  </div>
+</div>

src/app/dashboard/dashboard.component.scss

@@ -0,0 +1,3 @@
+.grid-container {
+  margin: 20px;
+}

src/app/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,40 @@
+import { LayoutModule } from '@angular/cdk/layout';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [DashboardComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatCardModule,
+        MatGridListModule,
+        MatIconModule,
+        MatMenuModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/dashboard.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { SystemConfigService } from '../system-config.service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent {
+  constructor(private systemConfigService: SystemConfigService) { }
+
+  ngOnInit() {
+    this.systemConfigService.getSystemConfig().subscribe(
+      x => console.log('Observer got a next value: ' + x),
+      err => console.error('Observer got an error: ' + err),
+      () => console.log('Observer got a complete notification')
+    );
+  }
+}

src/app/system-config.service.ts

@@ -24,15 +24,10 @@ export class SystemConfigService {
   private systemConfigUrl = environment.production ? apiURL + 'rest/system/config' : 'api/config';
   private httpOptions;
 
-  private checkInterval: Number = 200;
+  private checkInterval: number = 200;
 
   constructor(private http: HttpClient, private cookieService: CookieService) {
-    const csrfHeader = this.cookieService.getCSRFHeader();
-    this.httpOptions = {
-      headers: new HttpHeaders({
-        csrfHeader
-      })
-    }
+    this.httpOptions = { headers: new HttpHeaders(this.cookieService.getCSRFHeader()) };
   }
 
   getSystemConfig(): Observable<any> {
@@ -67,7 +62,7 @@ export class SystemConfigService {
         let t = setInterval(() => {
           if (check())
             clearInterval(t);
-        }, 200);
+        }, this.checkInterval);
 
         check(); // try right away
       }
@@ -91,16 +86,11 @@ export class SystemConfigService {
         let t = setInterval(() => {
           if (check())
             clearInterval(t);
-        }, 200);
+        }, this.checkInterval);
 
         check() // try right away
       }
     });
     return deviceObserverable;
-    // return from(this.devices);
-    if (this.devices) {
-      this.devicesSubject.next(this.devices);
-    }
-    return this.devicesSubject;
   }
 }