diff --git a/package-lock.json b/package-lock.json index 2d1cb0b4a..8711b8d0b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ebf89a84b..1f74c691e 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.component.html b/src/app/app.component.html index 9af6f4b83..2e52e9df0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,2 +1 @@ -

{{title}}

- \ No newline at end of file + \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 38bbc2bcd..d198fcdfa 100644 --- a/src/app/app.component.ts +++ b/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() { } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c185ec010..61c8165a7 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html new file mode 100644 index 000000000..d8a9ed489 --- /dev/null +++ b/src/app/dashboard/dashboard.component.html @@ -0,0 +1,21 @@ +
+
+

Tech UI

+
+
+ + Folders + + +
+
+ + Devices + + +
+ +
+
+
\ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss new file mode 100644 index 000000000..0b6973a09 --- /dev/null +++ b/src/app/dashboard/dashboard.component.scss @@ -0,0 +1,3 @@ +.grid-container { + margin: 20px; +} \ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts new file mode 100644 index 000000000..980c24fd0 --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts new file mode 100644 index 000000000..270957fd0 --- /dev/null +++ b/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') + ); + } +} diff --git a/src/app/system-config.service.ts b/src/app/system-config.service.ts index 130acd01e..365d66078 100644 --- a/src/app/system-config.service.ts +++ b/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 { @@ -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; } } \ No newline at end of file