andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

adding dashbord

Browse Source
This commit is contained in:
Andreas Huber
2023-02-26 08:18:53 +01:00
parent eb9904a30b
commit a2945d2d9b
44 changed files with 928 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html Normal file
View File

@@ -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>

0
pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.scss Normal file
View File

23
pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.spec.ts Normal file
View File

@@ -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();
});
});

18
pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts Normal file
View File

@@ -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");
}
}

11
pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html Normal file
View File

@@ -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>

3
pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.scss Normal file
View File

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

23
pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.spec.ts Normal file
View File

@@ -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();
});
});

18
pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts Normal file
View File

@@ -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);
}
}

14
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html Normal file
View File

@@ -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>

15
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.scss Normal file
View File

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

23
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.spec.ts Normal file
View File

@@ -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();
});
});

53
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts Normal file
View File

@@ -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'
});
}
});
}
}

7
pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html Normal file
View File

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

0
pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.scss Normal file
View File

23
pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.spec.ts Normal file
View File

@@ -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();
});
});

14
pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts Normal file
View File

@@ -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/);
}
}