122 lines
3.4 KiB
TypeScript
122 lines
3.4 KiB
TypeScript
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, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
|
|
import { PlotConfig, PlotRequest, PlotResponse, PlotService } from 'src/app/plot.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'
|
|
})
|
|
export class DashboardComponent implements OnInit {
|
|
|
|
dashboard?: Dashboard = undefined;
|
|
|
|
plotWidgetRenderData: PlotWidgetRenderData[] = [];
|
|
|
|
constructor(
|
|
private route: ActivatedRoute,
|
|
private service: DashboardService,
|
|
private dialog: MatDialog,
|
|
private snackBar: MatSnackBar,
|
|
private plotService: PlotService) {}
|
|
|
|
ngOnInit(): void {
|
|
this.service.getDashboard(<string>this.route.snapshot.paramMap.get("id")).subscribe((dashboard: Dashboard) => {
|
|
this.dashboard = dashboard;
|
|
|
|
dashboard.plots.forEach(p => {
|
|
this.plotWidgetRenderData.push(new PlotWidgetRenderData(p));
|
|
});
|
|
|
|
this.loadImages(0, this.plotWidgetRenderData);
|
|
});
|
|
}
|
|
|
|
loadImages(index: number, plotWidgetQueue: PlotWidgetRenderData[]) {
|
|
|
|
if (index < plotWidgetQueue.length){
|
|
const plot = plotWidgetQueue[index];
|
|
const request = this.createPlotRequest(plot.widget)
|
|
this.plotService.sendPlotRequest(request).subscribe({
|
|
next: (response: PlotResponse)=> {
|
|
plot.plotResponse= response;
|
|
},
|
|
error: (error:any)=> {},
|
|
complete: () => {
|
|
this.loadImages(index +1 , plotWidgetQueue);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
createPlotRequest(plotWidget: PlotWidget): PlotRequest {
|
|
|
|
const height = this.height(plotWidget.size);
|
|
const width = this.width(plotWidget.size);
|
|
|
|
const request = new PlotRequest(
|
|
height,
|
|
width,
|
|
600, // thumbnailMaxWidth
|
|
500, // thumbnailMaxHeight
|
|
false, // keyOutside
|
|
false, // generateThumbnail
|
|
(<any>window).submitterId+crypto.randomUUID(),
|
|
plotWidget.config);
|
|
return request;
|
|
}
|
|
|
|
height(size: PlotSize): number{
|
|
switch (size) {
|
|
case 'SMALL':
|
|
return 300;
|
|
case 'MEDIUM':
|
|
return 400;
|
|
case 'LARGE':
|
|
return 600;
|
|
}
|
|
}
|
|
width(size: PlotSize): number{
|
|
switch (size) {
|
|
case 'SMALL':
|
|
return 400;
|
|
case 'MEDIUM':
|
|
return 600;
|
|
case 'LARGE':
|
|
return 900;
|
|
}
|
|
}
|
|
|
|
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((config: PlotConfig) => {
|
|
this.dashboard!.plots.push(new PlotWidget('MEDIUM', config));
|
|
});
|
|
}
|
|
|
|
save() {
|
|
this.service.saveDashboard(this.dashboard!).subscribe({
|
|
'complete': () => {
|
|
this.snackBar.open("saved dashboard","", {
|
|
duration: 5000,
|
|
verticalPosition: 'top'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|