123 lines
3.4 KiB
TypeScript
123 lines
3.4 KiB
TypeScript
import { Component, OnInit, Input } from '@angular/core';
|
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
import { PlotService, PlotRequest, PlotResponse, PlotResponseStats } from '../plot.service';
|
|
|
|
@Component({
|
|
selector: 'pdb-gallery-view',
|
|
templateUrl: './gallery-view.component.html',
|
|
styleUrls: ['./gallery-view.component.scss']
|
|
})
|
|
export class GalleryViewComponent implements OnInit {
|
|
|
|
|
|
galleryItems: Array<GalleryItem> = new Array<GalleryItem>();
|
|
|
|
splitByValuesQueue = new Array<string>();
|
|
|
|
constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
|
|
}
|
|
|
|
showError(message) {
|
|
this.snackBar.open(message, "", {
|
|
duration: 5000,
|
|
verticalPosition: 'top'
|
|
});
|
|
}
|
|
|
|
ngOnInit() {
|
|
}
|
|
|
|
renderGallery(request: PlotRequest, splitByField: string) {
|
|
const that=this;
|
|
|
|
this.galleryItems.length = 0;
|
|
this.splitByValuesQueue.length = 0;
|
|
|
|
request.generateThumbnail = true;
|
|
|
|
this.plotService.splitQuery(request.query, splitByField).subscribe(function(valuesForSplitBy){
|
|
console.log("valuesForSplitBy: " + JSON.stringify(valuesForSplitBy));
|
|
that.splitByValuesQueue = valuesForSplitBy;
|
|
that.renderGalleryRecursively(request, splitByField);
|
|
},
|
|
error => {
|
|
that.showError(error.error.message);
|
|
});
|
|
}
|
|
|
|
renderGalleryRecursively(masterRequest: PlotRequest, splitByField: string){
|
|
const that = this;
|
|
|
|
if (this.splitByValuesQueue.length == 0){
|
|
return;
|
|
}
|
|
|
|
const splitByValue = this.splitByValuesQueue.pop();
|
|
|
|
let request = masterRequest.copy();
|
|
request.query = "("+request.query+") and " + splitByField+"="+ splitByValue;
|
|
|
|
this.plotService.sendPlotRequest(request).subscribe(function(plotResponse : PlotResponse){
|
|
console.log("response: " + JSON.stringify(plotResponse));
|
|
|
|
plotResponse.thumbnailUrl = "http://"+window.location.hostname+':8080/'+plotResponse.thumbnailUrl;
|
|
plotResponse.imageUrl = "http://"+window.location.hostname+':8080/'+plotResponse.imageUrl;
|
|
let galleryItem = new GalleryItem(splitByValue, plotResponse);
|
|
that.galleryItems.push(galleryItem);
|
|
that.renderGalleryRecursively(masterRequest, splitByField);
|
|
},
|
|
error => {
|
|
that.showError(error.error.message);
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
@Component({
|
|
selector: 'pdb-gallery-item-view',
|
|
templateUrl: './gallery-item-view.component.html',
|
|
styleUrls: ['./gallery-item-view.component.scss']
|
|
})
|
|
export class GalleryItemView {
|
|
@Input()
|
|
data: GalleryItem;
|
|
|
|
|
|
formatMs(valueInMs):string {
|
|
const ms = Math.floor(valueInMs % 1000);
|
|
const s = Math.floor((valueInMs / 1000) % 60);
|
|
const m = Math.floor((valueInMs / (60*1000)) % 60);
|
|
const h = Math.floor(valueInMs / (3600*1000));
|
|
|
|
var result = "";
|
|
if (h != 0) {
|
|
result += h+"h ";
|
|
}
|
|
if (h!= 0 || m != 0) {
|
|
result += m+"m ";
|
|
}
|
|
if (h!= 0 || m != 0 || s != 0) {
|
|
result += s+"s ";
|
|
result += ms+"ms";
|
|
} else {
|
|
result += ms+"ms";
|
|
}
|
|
|
|
return result;
|
|
}
|
|
}
|
|
|
|
|
|
export class GalleryItem {
|
|
thumbnailUrl: string;
|
|
imageUrl: string;
|
|
stats: PlotResponseStats;
|
|
splitByValue : string;
|
|
|
|
constructor(splitByValue: string, plotResponse: PlotResponse){
|
|
this.thumbnailUrl = plotResponse.thumbnailUrl;
|
|
this.imageUrl = plotResponse.imageUrl;
|
|
this.splitByValue = splitByValue;
|
|
this.stats = plotResponse.stats;
|
|
}
|
|
} |