diff --git a/pdb-js/src/app/app-routing.module.ts b/pdb-js/src/app/app-routing.module.ts index 278518f..3b81758 100644 --- a/pdb-js/src/app/app-routing.module.ts +++ b/pdb-js/src/app/app-routing.module.ts @@ -4,11 +4,15 @@ import { VisualizationPageComponent } from './visualization-page/visualization-p import { MainPageComponent } from './main-page/main-page.component'; import { UploadPageComponent } from './upload-page/upload-page.component'; import { HelpPageComponent } from './help-page/help-page.component'; +import { DashboardPageComponent } from './dashboard-page/dashboard-page.component'; +import { DashboardComponent } from './dashboard-page/dashboard/dashboard.component'; const routes: Routes = [ { path: '', component: MainPageComponent}, { path: 'vis', component: VisualizationPageComponent }, + { path: 'dashboard', component: DashboardPageComponent}, + { path: 'dashboard/:id', component: DashboardComponent}, { path: 'upload', component: UploadPageComponent }, { path: 'help', component: HelpPageComponent }, // { path: '**', component: PageNotFoundComponent } diff --git a/pdb-js/src/app/app.component.html b/pdb-js/src/app/app.component.html index f95b614..d61bc7a 100644 --- a/pdb-js/src/app/app.component.html +++ b/pdb-js/src/app/app.component.html @@ -1,8 +1,9 @@
- - + + +
diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index e4cdf95..4c2261a 100644 --- a/pdb-js/src/app/app.module.ts +++ b/pdb-js/src/app/app.module.ts @@ -29,6 +29,14 @@ import { PlotDetailsComponent } from './plot-details/plot-details.component'; import { PlotViewComponent } from './plot-view/plot-view.component'; import { GalleryViewComponent, GalleryItemView, GalleryFilterView } from './gallery-view/gallery-view.component'; import { ImageToggleComponent } from './image-toggle/image-toggle.component'; +import { DashboardPageComponent } from './dashboard-page/dashboard-page.component'; +import { NewDashboardComponent } from './dashboard-page/new-dashboard/new-dashboard.component'; +import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog'; +import {MatTableModule} from '@angular/material/table'; +import { DashboardComponent } from './dashboard-page/dashboard/dashboard.component'; +import { AddTextDialogComponent } from './dashboard-page/dashboard/add-text-dialog/add-text-dialog.component'; +import { TextWidgetComponent } from './dashboard-page/dashboard/text-widget/text-widget.component'; +import { AddPlotDialogComponent } from './dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component'; @NgModule({ declarations: [ @@ -45,7 +53,13 @@ import { ImageToggleComponent } from './image-toggle/image-toggle.component'; GalleryViewComponent, GalleryItemView, GalleryFilterView, - ImageToggleComponent + ImageToggleComponent, + DashboardPageComponent, + NewDashboardComponent, + DashboardComponent, + AddTextDialogComponent, + TextWidgetComponent, + AddPlotDialogComponent ], imports: [ BrowserModule, @@ -55,6 +69,7 @@ import { ImageToggleComponent } from './image-toggle/image-toggle.component'; MatAutocompleteModule, MatButtonModule, MatCheckboxModule, + MatDialogModule, MatFormFieldModule, MatInputModule, MatRadioModule, @@ -62,11 +77,12 @@ import { ImageToggleComponent } from './image-toggle/image-toggle.component'; MatProgressSpinnerModule, MatSelectModule, MatSnackBarModule, + MatTableModule, MatTooltipModule, BrowserAnimationsModule, HttpClientModule ], - providers: [], + providers: [{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: true}}], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/pdb-js/src/app/dashboard-page/dashboard-page.component.html b/pdb-js/src/app/dashboard-page/dashboard-page.component.html new file mode 100644 index 0000000..2421024 --- /dev/null +++ b/pdb-js/src/app/dashboard-page/dashboard-page.component.html @@ -0,0 +1,26 @@ + +
+ +
+
+ loading +
+
+ + + + + + + + + + + + + + + +
Name {{element.name}}Description{{element.description}}
+
+ diff --git a/pdb-js/src/app/dashboard-page/dashboard-page.component.scss b/pdb-js/src/app/dashboard-page/dashboard-page.component.scss new file mode 100644 index 0000000..a176bbc --- /dev/null +++ b/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; +} + diff --git a/pdb-js/src/app/dashboard-page/dashboard-page.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard-page.component.spec.ts new file mode 100644 index 0000000..6180c3f --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DashboardPageComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DashboardPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/pdb-js/src/app/dashboard-page/dashboard-page.component.ts b/pdb-js/src/app/dashboard-page/dashboard-page.component.ts new file mode 100644 index 0000000..94fc0c6 --- /dev/null +++ b/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(); + }); + }); + } +} diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html new file mode 100644 index 0000000..a238902 --- /dev/null +++ b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html @@ -0,0 +1,22 @@ + +

Add Plot

+ + + +
+ + +
diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.scss b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.spec.ts new file mode 100644 index 0000000..b159c28 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddPlotDialogComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AddPlotDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts new file mode 100644 index 0000000..2d287ee --- /dev/null +++ b/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){ + } + + onSaveClick(): void { + this.dialogRef.close("todo"); + } +} 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 new file mode 100644 index 0000000..268936d --- /dev/null +++ b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html @@ -0,0 +1,11 @@ +

Add Text

+
+ + Text + + +
+
+ + +
diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.scss b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.scss new file mode 100644 index 0000000..d153bf3 --- /dev/null +++ b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.scss @@ -0,0 +1,3 @@ +textarea { + height: 5em; +} \ No newline at end of file diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.spec.ts new file mode 100644 index 0000000..ae6a7e6 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddTextDialogComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AddTextDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..71c57c1 --- /dev/null +++ b/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){ + } + + onSaveClick(): void { + this.dialogRef.close(this.text); + } +} diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html new file mode 100644 index 0000000..891a69f --- /dev/null +++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html @@ -0,0 +1,14 @@ + +
+
+ + + +
+

{{dashboard.name}}

+

{{dashboard.description}}

+ + +
diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.scss b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.scss new file mode 100644 index 0000000..401d07e --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.spec.ts new file mode 100644 index 0000000..6e4dcd8 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DashboardComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts new file mode 100644 index 0000000..19b7252 --- /dev/null +++ b/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(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' + }); + } + }); + } +} 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 new file mode 100644 index 0000000..1cbcf0b --- /dev/null +++ b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html @@ -0,0 +1,7 @@ + +

{{line}}

diff --git a/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.scss b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.spec.ts new file mode 100644 index 0000000..1094f0d --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TextWidgetComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TextWidgetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..81b389c --- /dev/null +++ b/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/); + } +} diff --git a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.html b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.html new file mode 100644 index 0000000..e1c78c9 --- /dev/null +++ b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.html @@ -0,0 +1,15 @@ +

Create a new dashboard

+
+ + Name + + + + Description + + +
+
+ + +
diff --git a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.scss b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.scss new file mode 100644 index 0000000..59b9cec --- /dev/null +++ b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.scss @@ -0,0 +1,4 @@ + +div[mat-dialog-content] { + overflow: hidden; +} \ No newline at end of file diff --git a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.spec.ts b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.spec.ts new file mode 100644 index 0000000..67bc3b9 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NewDashboardComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(NewDashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts new file mode 100644 index 0000000..5fef083 --- /dev/null +++ b/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, + @Inject(MAT_DIALOG_DATA) public data: DashboardCreationData,){ + } + + onSaveClick(): void { + this.dialogRef.close(this.data); + } +} diff --git a/pdb-js/src/app/dashboard.service.spec.ts b/pdb-js/src/app/dashboard.service.spec.ts new file mode 100644 index 0000000..79e72a6 --- /dev/null +++ b/pdb-js/src/app/dashboard.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { DashboardService } from './dashboard.service'; + +describe('DashboardService', () => { + let service: DashboardService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(DashboardService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/pdb-js/src/app/dashboard.service.ts b/pdb-js/src/app/dashboard.service.ts new file mode 100644 index 0000000..0b2fbc4 --- /dev/null +++ b/pdb-js/src/app/dashboard.service.ts @@ -0,0 +1,55 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class DashboardService { + + constructor(private http: HttpClient) { } + + createDashboard(data: DashboardCreationData): Observable{ + return this.http.post('//'+window.location.hostname+':'+window.location.port+'/api/dashboards/', data); + } + + getDashboards(): Observable{ + return this.http.get('//'+window.location.hostname+':'+window.location.port+'/api/dashboards/'); + } + + getDashboard(id: string): Observable{ + return this.http.get('//'+window.location.hostname+':'+window.location.port+'/api/dashboards/'+id); + } + + saveDashboard(dashboard: Dashboard): Observable{ + return this.http.put('//'+window.location.hostname+':'+window.location.port+'/api/dashboards/'+dashboard.id, dashboard); + } +} + + +export class DashboardCreationData{ + constructor(public name: string, public description: string){} +} + +export class Dashboard{ + constructor(public id: string, public name: string, public description: string, public texts: [TextWidget]){} +} + +export class DashboardList{ + constructor(public dashboards: [Dashboard]){} +} + +export abstract class BaseWidget { + constructor(public type: 'TEXT'|'PLOT', public size: 'SMALL'|'MEDIUM'|'LARGE') {} +} + +export class TextWidget extends BaseWidget { + constructor(override size: 'SMALL'|'MEDIUM'|'LARGE', public text: string) { + super('TEXT', size); + } +} +export class PlotWidget extends BaseWidget { + constructor(override size: 'SMALL'|'MEDIUM'|'LARGE') { + super('PLOT', size); + } +} \ No newline at end of file diff --git a/pdb-js/src/app/main-page/main-page.component.html b/pdb-js/src/app/main-page/main-page.component.html index 1577c21..141a26c 100644 --- a/pdb-js/src/app/main-page/main-page.component.html +++ b/pdb-js/src/app/main-page/main-page.component.html @@ -12,7 +12,8 @@
- + +
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts index c00017c..04519c3 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts @@ -70,6 +70,9 @@ export class VisualizationPageComponent implements OnInit { ngOnInit() { const that = this; + + (window).initDatePicker(); + this.plotTypes = this.plotService.getPlotTypes(); this.selectedPlotType.push(this.plotTypes[0]); @@ -86,7 +89,7 @@ export class VisualizationPageComponent implements OnInit { that.splitBy = that.tagFields.find(val => filterDefaults.splitBy == val.name); }); } - + changePlotType(selectedPlotTypes: Array) { const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(selectedPlotTypes)); this.plotTypes.forEach(pt => pt.active=false); diff --git a/pdb-js/src/index.html b/pdb-js/src/index.html index 2c60d30..cc3d665 100644 --- a/pdb-js/src/index.html +++ b/pdb-js/src/index.html @@ -17,8 +17,9 @@