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

edit dashboard and text widgets

Browse Source
This commit is contained in:
Andreas Huber
2023-03-11 10:39:28 +01:00
parent cb5b160d3c
commit e3945a4d33
10 changed files with 99 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pdb-js/src/app/dashboard-page/dashboard-page.component.html
View File

@@ -60,7 +60,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button (click)="delete(element)">
<img src="assets/img/recycle-bin.svg" class="icon-small" title="delete" />
<img src="assets/img/recycle-bin-line.svg" class="icon-small" title="delete" />
</button>
</td>
</ng-container>

2
pdb-js/src/app/dashboard-page/dashboard-page.component.ts
View File

@@ -58,8 +58,6 @@ export class DashboardPageComponent implements OnInit {
});
}
delete(dashboard: Dashboard){
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {

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

@@ -11,6 +11,6 @@
</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)="close()">Cancel</button>
<button class="save-button" mat-button mat-dialog-close (click)="onSaveClick()">Save</button>
</div>

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

@@ -1,5 +1,5 @@
import { Component, ElementRef, ViewChild } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-add-text-dialog',
@@ -10,7 +10,12 @@ export class AddTextDialogComponent {
@ViewChild('textElement') textElement!: ElementRef;
constructor(public dialogRef: MatDialogRef<string>){
constructor(public dialogRef: MatDialogRef<string|undefined>, @Inject(MAT_DIALOG_DATA) public data: {text: string}){
this.text = data.text;
}
close(): void {
this.dialogRef.close(undefined);
}

18
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
View File

@@ -26,6 +26,12 @@
display: flex;
flex-direction: column;
}
.editable .editable-hovered {
visibility: hidden;
}
.editable:hover .editable-hovered {
visibility: visible;
}
</style>
<div *ngIf="dashboard === undefined && !error" class="center">
@@ -39,10 +45,12 @@
<div class="toolbar">
<button mat-button (click)="addText()">Add Text</button>
<button mat-button (click)="addPlot()">Add Plot</button>
<button class="save-button" mat-button (click)="save()">Save Dashboard</button>
<button class="save-button" mat-button (click)="save()">Save</button>
</div>
<div class="editable">
<h1>{{dashboard.name}}<button mat-icon-button (click)="editNameAndDescription()" class="editable-hovered"><img src="/assets/img/edit-outline.svg"/></button></h1>
<p>{{dashboard.description}}</p>
</div>
<h1>{{dashboard.name}}</h1>
<p>{{dashboard.description}}</p>
<div cdkDropListGroup>
<!-- All lists in here will be connected. -->
@@ -53,12 +61,12 @@
[cdkDropListData]="column"
(cdkDropListDropped)="drop($event)">
<div
cdkDrag
cdkDrag
*ngFor="let id of column"
[attr.widget-id]="id">
<app-text-widget
*ngIf="isTextWidget(id)"
[text]="getTextWidget(id)!.text"></app-text-widget>
[data]="getTextWidget(id)!"></app-text-widget>
<app-plot-widget
*ngIf="isPlotWidget(id)"
[data]="getPlotWidget(id)!"></app-plot-widget>

37
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
View File

@@ -4,8 +4,9 @@ import { Component, ElementRef, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router';
import { BaseWidget, Dashboard, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
import { BaseWidget, Dashboard, DashboardCreationData, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
import { PlotConfig, PlotRequest, PlotResponse, PlotService, RenderOptions } from 'src/app/plot.service';
import { NewDashboardComponent } from '../new-dashboard/new-dashboard.component';
import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component';
import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component';
@@ -141,6 +142,7 @@ export class DashboardComponent implements OnInit {
addText() {
this.dialog.open(AddTextDialogComponent,{
data: {text:""},
width: '600px'
}).afterClosed().subscribe((text: string) => {
const widget = new TextWidget(crypto.randomUUID(),'MEDIUM', text);
@@ -184,7 +186,18 @@ export class DashboardComponent implements OnInit {
this.service.saveDashboard(this.dashboard!).subscribe({
'complete': () => {
this.snackBar.open("saved dashboard","", {
const successMessages = [
"dashboard saved",
"saving the dashboard was a complete success",
"dashboard state securely stored",
"the save was successful",
"done",
"success",
"saved"
];
const randomMessage = successMessages[Math.floor(Math.random()*successMessages.length)];
this.snackBar.open(randomMessage,"", {
duration: 5000,
verticalPosition: 'top'
});
@@ -192,6 +205,22 @@ export class DashboardComponent implements OnInit {
});
}
editNameAndDescription() {
const dialogRef = this.dialog.open(NewDashboardComponent, {
data: {name: this.dashboard!.name, description: this.dashboard!.description},
hasBackdrop: true
});
dialogRef.afterClosed().subscribe((result?: DashboardCreationData) => {
if (result) {
this.dashboard!.name = result.name;
this.dashboard!.description = result.description;
}
});
}
isTextWidget(id: string): boolean {
return this.getTextWidget(id) !== undefined;
}
@@ -220,8 +249,4 @@ export class DashboardComponent implements OnInit {
);
}
}
s(a: any){
return JSON.stringify(a);
}
}

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

@@ -1,8 +1,30 @@
<style>
:host {
display: block;
margin-top: 1em;
background-color: aliceblue;
}
.text-widget {
position: relative;
padding: 1em 0;
}
.text-widget:hover {
outline: solid 1px black;
border-radius: 3px;
}
.editable-hovered {
position: absolute;
right: 0;
top: 0;
}
.text-widget .editable-hovered {
visibility: hidden;
}
.text-widget:hover .editable-hovered {
visibility: visible;
}
</style>
<p *ngFor="let line of lines()">{{line}}</p>
<div class="text-widget">
<button mat-icon-button (click)="edit()" class="editable-hovered"><img src="/assets/img/edit-outline.svg"/></button>
<p *ngFor="let line of lines()">{{line}}</p>
</div>

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

@@ -1,4 +1,7 @@
import { Component, Input } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { TextWidget } from 'src/app/dashboard.service';
import { AddTextDialogComponent } from '../add-text-dialog/add-text-dialog.component';
@Component({
selector: 'app-text-widget',
@@ -6,9 +9,22 @@ import { Component, Input } from '@angular/core';
})
export class TextWidgetComponent {
@Input()
text = "";
data! : TextWidget;
constructor(private dialog: MatDialog){}
lines(): string[]{
return typeof this.text == 'string' ? this.text.split(/\r?\n/) : [];
return typeof this.data.text == 'string' ? this.data.text.split(/\r?\n/) : [];
}
edit() {
this.dialog.open(AddTextDialogComponent,{
data: {text : this.data.text},
width: '600px'
}).afterClosed().subscribe((text?: string) => {
if (text !== undefined) {
this.data.text = text;
}
});
}
}