diff --git a/pdb-js/src/app/dashboard-page/dashboard-page.component.html b/pdb-js/src/app/dashboard-page/dashboard-page.component.html index f75e1a3..5180498 100644 --- a/pdb-js/src/app/dashboard-page/dashboard-page.component.html +++ b/pdb-js/src/app/dashboard-page/dashboard-page.component.html @@ -60,7 +60,7 @@ diff --git a/pdb-js/src/app/dashboard-page/dashboard-page.component.ts b/pdb-js/src/app/dashboard-page/dashboard-page.component.ts index b62a6b0..84398e5 100644 --- a/pdb-js/src/app/dashboard-page/dashboard-page.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard-page.component.ts @@ -58,8 +58,6 @@ export class DashboardPageComponent implements OnInit { }); } - - delete(dashboard: Dashboard){ const dialogRef = this.dialog.open(ConfirmationDialogComponent, { diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html index 4da148f..d2e91ef 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html +++ b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html @@ -11,6 +11,6 @@
- +
diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts index 0483791..8eda7fa 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts @@ -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){ + constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: {text: string}){ + this.text = data.text; + } + + close(): void { + this.dialogRef.close(undefined); } diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html index 764c5e3..3faa1ac 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html +++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html @@ -26,6 +26,12 @@ display: flex; flex-direction: column; } + .editable .editable-hovered { + visibility: hidden; + } + .editable:hover .editable-hovered { + visibility: visible; + }
@@ -39,10 +45,12 @@
- + +
+
+

{{dashboard.name}}

+

{{dashboard.description}}

-

{{dashboard.name}}

-

{{dashboard.description}}

@@ -53,12 +61,12 @@ [cdkDropListData]="column" (cdkDropListDropped)="drop($event)">
+ [data]="getTextWidget(id)!"> diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts index c362a6e..5c3752e 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts @@ -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); - } } diff --git a/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html index 0bfee8a..745c6d5 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html +++ b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html @@ -1,8 +1,30 @@ -

{{line}}

+
+ +

{{line}}

+
diff --git a/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts index 9270699..373dd3e 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts @@ -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; + } + }); } } diff --git a/pdb-js/src/assets/img/edit-note-outline.svg b/pdb-js/src/assets/img/edit-note-outline.svg new file mode 100644 index 0000000..e6afc28 --- /dev/null +++ b/pdb-js/src/assets/img/edit-note-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pdb-js/src/assets/img/edit-outline.svg b/pdb-js/src/assets/img/edit-outline.svg new file mode 100644 index 0000000..bf7a7ba --- /dev/null +++ b/pdb-js/src/assets/img/edit-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file