build: Add build process for newgui (#7351)

2021-02-15 14:52:28 +01:00
parent d117b4b570
commit b2c9e7b07b
123 changed files with 38050 additions and 17178 deletions
@@ -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 class="grid-container" fxLayout="row" fxLayoutGap="16px grid" fxLayoutAlign="stretch">-->
+<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
+  <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start center">
+    <img src="assets/logo-horizontal.svg" width="150px" />
+    <span>Tech UI</span>
+  </div>
+</div>
+<div class="progress">
+  <mat-progress-bar mode="determinate" value="{{progressValue}}" [@progressBar]="isLoading ? 'start' : 'done'">
+  </mat-progress-bar>
+</div>
+<div fxLayout="column" fxLayoutGap="16px" class="grid-container" [@loading]="isLoading ? 'start' : 'done'">
+  <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="space-between stretch">
+    <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>
+</div>
@@ -0,0 +1,13 @@
+.header {
+  margin: 15px 3vw 12px 3vw;
+  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+}
+
+.progress {
+  margin: 0 3vw 0 3vw;
+}
+
+.grid-container {
+  margin: 10px calc(10px + 3.3vw);
+  min-width: 600px;
+}
@@ -0,0 +1,34 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+import { HttpClientModule } from '@angular/common/http';
+import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [DashboardComponent],
+      imports: [
+        HttpClientModule,
+        NoopAnimationsModule,
+        BrowserAnimationsModule,
+      ],
+      providers: [DashboardComponent]
+    }).compileComponents();
+
+    component = TestBed.inject(DashboardComponent);
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,117 @@
+import { Component, OnInit, AfterViewInit, ViewChild, AfterViewChecked } from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+} from '@angular/animations';
+import { SystemConfigService } from '../services/system-config.service';
+import { StType } from '../type';
+import { FilterService } from '../services/filter.service';
+import { ProgressService } from '../services/progress.service';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { MessageService } from '../services/message.service';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { DialogComponent } from '../dialog/dialog.component';
+import { FolderService } from '../services/folder.service';
+import { DeviceService } from '../services/device.service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss'],
+  providers: [FilterService],
+  animations: [
+    trigger('loading', [
+      state('start', style({
+        marginTop: '20px',
+      })),
+      state('done', style({
+        marginTop: '0px',
+      })),
+      transition('start => done', [
+        animate('0.2s 0.2s')
+      ]),
+      transition('done => start', [
+        animate('0.2s 0.2s')
+      ]),
+    ]),
+    trigger('progressBar', [
+      state('start', style({
+        opacity: 100,
+        visibility: 'visible'
+      })),
+      state('done', style({
+        opacity: 0,
+        visibility: 'hidden'
+      })),
+      transition('start => done', [
+        animate('0.35s')
+      ]),
+      transition('done => start', [
+        animate('0.35s')
+      ]),
+    ]),
+  ]
+})
+export class DashboardComponent implements OnInit, AfterViewInit {
+  @ViewChild(MatProgressBar) progressBar: MatProgressBar;
+  folderChart: StType = StType.Folder;
+  deviceChart: StType = StType.Device;
+  progressValue: number = 0;
+  isLoading = true;
+  private dialogRef: MatDialogRef<DialogComponent>;
+
+
+  constructor(
+    private systemConfigService: SystemConfigService,
+    private folderService: FolderService,
+    private deviceService: DeviceService,
+    private progressService: ProgressService,
+    private messageService: MessageService,
+    public dialog: MatDialog
+  ) { }
+
+  ngOnInit() {
+    // Request data from Rest API
+    this.systemConfigService.getSystemConfig().subscribe(
+      _ => {
+        // Request devices and folders for charts and lists
+        this.folderService.requestFolders();
+        this.deviceService.requestDevices();
+      }
+    );
+
+  }
+
+  ngAfterViewInit() {
+    this.isLoading = true;
+
+    // Listen for progress service changes
+    let t = setInterval(() => {
+      if (this.progressService.isComplete()) {
+        clearInterval(t);
+        this.progressValue = 100;
+        this.isLoading = false;
+      }
+      this.progressValue = this.progressService.percentValue;
+    }, 100);
+
+    // Listen for messages from other services/components
+    this.messageService.messageAdded$
+      .subscribe(
+        _ => {
+          // Open dialog
+          if (!this.dialogRef)
+            this.dialogRef = this.dialog.open(DialogComponent);
+
+          this.dialogRef.afterClosed().subscribe(
+            _ => {
+              this.dialogRef = null;
+              this.messageService.clear();
+            }
+          );
+        });
+  }
+}