2017-02-05 18:27:58 +02:00
|
|
|
import {Component, OnChanges, Input, ViewChild, ElementRef} from "@angular/core";
|
2017-01-22 23:31:29 +02:00
|
|
|
import {PhotoDTO} from "../../../../common/entities/PhotoDTO";
|
|
|
|
import {Utils} from "../../../../common/Utils";
|
2017-02-05 18:27:58 +02:00
|
|
|
import {IRenderable, Dimension} from "../../model/IRenderable";
|
|
|
|
import {GalleryMapLightboxComponent} from "./lightbox/lightbox.map.gallery.component";
|
2017-01-22 23:31:29 +02:00
|
|
|
@Component({
|
|
|
|
selector: 'gallery-map',
|
|
|
|
templateUrl: 'app/gallery/map/map.gallery.component.html',
|
|
|
|
styleUrls: ['app/gallery/map/map.gallery.component.css']
|
|
|
|
})
|
2017-02-05 18:27:58 +02:00
|
|
|
export class GalleryMapComponent implements OnChanges, IRenderable {
|
2017-01-22 23:31:29 +02:00
|
|
|
|
|
|
|
@Input() photos: Array<PhotoDTO>;
|
2017-02-05 18:27:58 +02:00
|
|
|
@ViewChild(GalleryMapLightboxComponent) mapLightbox: GalleryMapLightboxComponent;
|
2017-01-22 23:31:29 +02:00
|
|
|
|
2017-01-23 22:29:07 +02:00
|
|
|
mapPhotos: Array<{latitude: string, longitude: string, iconUrl}> = [];
|
|
|
|
mapCenter = {latitude: "0", longitude: "0"};
|
2017-02-05 18:27:58 +02:00
|
|
|
@ViewChild("map") map: ElementRef;
|
2017-01-22 23:31:29 +02:00
|
|
|
|
|
|
|
//TODO: fix zooming
|
|
|
|
ngOnChanges() {
|
2017-01-23 22:29:07 +02:00
|
|
|
this.mapPhotos = this.photos.filter(p => {
|
|
|
|
return p.metadata && p.metadata.positionData && p.metadata.positionData.GPSData;
|
|
|
|
}).map(p => {
|
2017-01-22 23:31:29 +02:00
|
|
|
return {
|
|
|
|
latitude: p.metadata.positionData.GPSData.latitude,
|
|
|
|
longitude: p.metadata.positionData.GPSData.longitude,
|
|
|
|
iconUrl: Utils.concatUrls("/api/gallery/content/", p.directory.path, p.directory.name, p.name, "icon")
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
2017-01-23 22:29:07 +02:00
|
|
|
if (this.mapPhotos.length > 0) {
|
|
|
|
this.mapCenter = this.mapPhotos[0];
|
|
|
|
}
|
|
|
|
|
2017-01-22 23:31:29 +02:00
|
|
|
|
|
|
|
}
|
2017-02-05 18:27:58 +02:00
|
|
|
|
|
|
|
click() {
|
|
|
|
this.mapLightbox.show(this.getDimension());
|
|
|
|
}
|
|
|
|
|
|
|
|
public getDimension(): Dimension {
|
|
|
|
return <Dimension>{
|
|
|
|
top: this.map.nativeElement.offsetTop,
|
|
|
|
left: this.map.nativeElement.offsetLeft,
|
|
|
|
width: this.map.nativeElement.offsetWidth,
|
|
|
|
height: this.map.nativeElement.offsetHeight
|
|
|
|
};
|
|
|
|
}
|
2017-01-22 23:31:29 +02:00
|
|
|
}
|
|
|
|
|