adding dashbord

pdb-js/src/app/dashboard-page/dashboard-page.component.html

@@ -0,0 +1,26 @@
+
+<div class="toolbar">
+  <button mat-stroked-button (click)="createNewDashboard()">New</button>
+</div>
+<div *ngIf="loading">
+  loading
+</div>
+<div *ngIf="!loading">
+  <table mat-table [dataSource]="dataSource" >
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"><a [routerLink]="['/dashboard', element.id]">{{element.name}}</a></td>
+    </ng-container>
+    <!-- Description Column -->
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef>Description</th>
+      <td mat-cell *matCellDef="let element">{{element.description}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+</div>
+

pdb-js/src/app/dashboard-page/dashboard-page.component.scss

@@ -0,0 +1,8 @@
+
+:host {
+  height: calc(100% - 29px);
+  position: absolute;
+  width: 100%;
+  padding: 0.5em;
+}
+

pdb-js/src/app/dashboard-page/dashboard-page.component.spec.ts

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

pdb-js/src/app/dashboard-page/dashboard-page.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Dashboard, DashboardCreationData, DashboardList, DashboardService } from '../dashboard.service';
+import { NewDashboardComponent } from './new-dashboard/new-dashboard.component';
+
+@Component({
+  selector: 'app-dashboard-page',
+  templateUrl: './dashboard-page.component.html',
+  styleUrls: ['./dashboard-page.component.scss']
+})
+export class DashboardPageComponent implements OnInit {
+
+  displayedColumns: string[] = ['name', 'description'];
+  dataSource: Dashboard[] = [];
+  loading = true;
+
+  constructor(public dialog: MatDialog, private dashboardService: DashboardService){
+
+  }
+
+  ngOnInit(): void {
+      this.refreshTable();
+  }
+
+  refreshTable(){
+
+    this.loading = true;
+    this.dashboardService.getDashboards().subscribe((dashboardList: DashboardList) => {
+      this.dataSource = dashboardList.dashboards;
+      this.loading = false;
+    });
+  }
+
+  createNewDashboard() {
+    const dialogRef = this.dialog.open(NewDashboardComponent, {
+      data: {name: "", description: ""},
+      hasBackdrop: true
+    });
+
+    dialogRef.afterClosed().subscribe((result: DashboardCreationData) => {
+      console.log('The dialog was closed with result ', JSON.stringify(result));
+      this.dashboardService.createDashboard(result).subscribe(result => {
+        console.log(result);
+
+        this.refreshTable();
+      });
+    });
+  }
+}

pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html

@@ -0,0 +1,22 @@
+<style>
+  :host {
+    display: flex;
+    flex-direction: column;
+  }
+  pdb-visualization-page {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 150px);
+    flex-grow: 1;
+  }
+  div[mat-dialog-actions] {
+  }
+</style>
+<h1 mat-dialog-title>Add Plot</h1>
+
+<pdb-visualization-page mat-dialog-content></pdb-visualization-page>
+
+<div mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button mat-dialog-close (click)="onSaveClick()" cdkFocusInitial>Save</button>
+</div>

pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.spec.ts

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

pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-add-plot-dialog',
+  templateUrl: './add-plot-dialog.component.html',
+  styleUrls: ['./add-plot-dialog.component.scss']
+})
+export class AddPlotDialogComponent {
+
+
+  constructor(public dialogRef: MatDialogRef<string>){
+  }
+
+  onSaveClick(): void {
+    this.dialogRef.close("todo");
+  }
+}

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html

@@ -0,0 +1,11 @@
+<h1 mat-dialog-title>Add Text</h1>
+<div mat-dialog-content>
+  <mat-form-field appearance="fill">
+    <mat-label>Text</mat-label>
+    <textarea matInput [(ngModel)]="text"></textarea>
+  </mat-form-field>
+</div>
+<div mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button mat-dialog-close (click)="onSaveClick()" cdkFocusInitial>Save</button>
+</div>

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.scss

@@ -0,0 +1,3 @@
+textarea {
+  height: 5em;
+}

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.spec.ts

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

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-add-text-dialog',
+  templateUrl: './add-text-dialog.component.html',
+  styleUrls: ['./add-text-dialog.component.scss']
+})
+export class AddTextDialogComponent {
+  text = "";
+
+  constructor(public dialogRef: MatDialogRef<string>){
+  }
+
+  onSaveClick(): void {
+    this.dialogRef.close(this.text);
+  }
+}

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -0,0 +1,14 @@
+<div *ngIf="dashboard === undefined" class="spinner">
+  <mat-spinner></mat-spinner>
+</div>
+<div *ngIf="dashboard !== undefined" class="content">
+  <div class="toolbar">
+    <button mat-stroked-button  (click)="addText()">Add Text</button>
+    <button mat-stroked-button (click)="addPlot()">Add Plot</button>
+    <button mat-stroked-button (click)="save()">Save Dashboard</button>
+  </div>
+  <h1>{{dashboard.name}}</h1>
+  <p>{{dashboard.description}}</p>
+
+  <app-text-widget *ngFor="let textWidget of dashboard.texts" [text]="textWidget.text"></app-text-widget>
+</div>

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.scss

@@ -0,0 +1,15 @@
+:host {
+  width: 100%;
+  height: 100%;
+  
+}
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.content {
+  padding: 0.5em;
+}

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.spec.ts

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

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { ActivatedRoute } from '@angular/router';
+import { Dashboard, DashboardService, TextWidget } from 'src/app/dashboard.service';
+import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component';
+import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+
+  dashboard?: Dashboard = undefined;
+
+  constructor(private route: ActivatedRoute,  private service: DashboardService, private dialog: MatDialog, private snackBar: MatSnackBar) {}
+
+  ngOnInit(): void {
+      this.service.getDashboard(<string>this.route.snapshot.paramMap.get("id")).subscribe((dashboard: Dashboard) => {
+        this.dashboard = dashboard;
+      });
+  }
+
+  addText() {
+    this.dialog.open(AddTextDialogComponent,{
+      width: '600px'
+    }).afterClosed().subscribe((text: string) => {
+      this.dashboard!.texts.push(new TextWidget('MEDIUM', text)); 
+    });
+  }
+
+  addPlot() {
+    this.dialog.open(AddPlotDialogComponent,{
+      width: 'calc(100% - 1em)',
+      //height: 'calc(100% - 1em)'
+    }).afterClosed().subscribe((text: string) => {
+      //this.dashboard!.texts.push(new TextWidget('MEDIUM', text)); 
+    });
+  }
+
+  save() {
+    this.service.saveDashboard(this.dashboard!).subscribe({
+      'complete': () => {
+        this.snackBar.open("saved dashboard","", {
+          duration: 5000,
+          verticalPosition: 'top'
+        });
+      }
+    });
+  }
+}

pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html

@@ -0,0 +1,7 @@
+<style>
+  :host {
+    display: block;
+    margin-top: 1em;
+  }
+</style>
+<p *ngFor="let line of lines()">{{line}}</p>

pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.spec.ts

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

pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-text-widget',
+  templateUrl: './text-widget.component.html'
+})
+export class TextWidgetComponent {
+  @Input()
+  text = "";
+
+  lines(): string[]{
+    return this.text.split(/\r?\n/);
+  }
+}

pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.html

@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>Create a new dashboard</h1>
+<div mat-dialog-content>
+  <mat-form-field appearance="fill">
+    <mat-label>Name</mat-label>
+    <input matInput [(ngModel)]="data.name">
+  </mat-form-field>
+  <mat-form-field appearance="fill">
+    <mat-label>Description</mat-label>
+    <textarea matInput [(ngModel)]="data.description"></textarea>
+  </mat-form-field>
+</div>
+<div mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button mat-dialog-close (click)="onSaveClick()" cdkFocusInitial>Save</button>
+</div>

pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.scss

@@ -0,0 +1,4 @@
+
+div[mat-dialog-content] {
+  overflow: hidden;
+}

pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.spec.ts

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

pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts

@@ -0,0 +1,18 @@
+import { Component, Inject } from '@angular/core';
+import {MatDialog, MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import { DashboardCreationData } from 'src/app/dashboard.service';
+
+@Component({
+  selector: 'app-new-dashboard',
+  templateUrl: './new-dashboard.component.html',
+  styleUrls: ['./new-dashboard.component.scss']
+})
+export class NewDashboardComponent {
+  constructor(public dialogRef: MatDialogRef<NewDashboardComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DashboardCreationData,){
+  }
+
+  onSaveClick(): void {
+    this.dialogRef.close(this.data);
+  }
+}