fossilfranv/pigallery2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improving folder navigation

Browse Source
This commit is contained in:
Braun Patrik 2017-06-21 13:47:21 +02:00
parent 5d42e0c23a
commit 85505970b7
4 changed files with 78 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/app/gallery/gallery.component.html
View File

@ -5,21 +5,21 @@
<gallery-search #search *ngIf="showSearchBar"></gallery-search> <gallery-search #search *ngIf="showSearchBar"></gallery-search>
</div> </div>
<div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.directory"> <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.directory">
<gallery-navbar [directory]="_galleryService.content.directory"></gallery-navbar> <gallery-navbar [directory]="_galleryService.content.value.directory"></gallery-navbar>
<gallery-directory *ngFor="let directory of directories" <gallery-directory *ngFor="let directory of directories"
[directory]="directory"></gallery-directory> [directory]="directory"></gallery-directory>
<gallery-map [photos]="_galleryService.content.directory.photos"></gallery-map> <gallery-map [photos]="_galleryService.content.value.directory.photos"></gallery-map>
<gallery-grid [photos]="_galleryService.content.directory.photos" [lightbox]="lightbox"></gallery-grid> <gallery-grid [photos]="_galleryService.content.value.directory.photos" [lightbox]="lightbox"></gallery-grid>
</div> </div>
<div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.searchResult"> <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.searchResult">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="active"> <li class="active">
Searching for: Searching for:
<span [ngSwitch]="_galleryService.content.searchResult.searchType"> <span [ngSwitch]="_galleryService.content.value.searchResult.searchType">
<span *ngSwitchCase="0" class="glyphicon glyphicon-picture"></span> <span *ngSwitchCase="0" class="glyphicon glyphicon-picture"></span>
<span *ngSwitchCase="1" class="glyphicon glyphicon-folder-open"></span> <span *ngSwitchCase="1" class="glyphicon glyphicon-folder-open"></span>
<span *ngSwitchCase="2" class="glyphicon glyphicon-tag"></span> <span *ngSwitchCase="2" class="glyphicon glyphicon-tag"></span>
@ -29,11 +29,11 @@
</li> </li>
</ol> </ol>
<gallery-map [photos]="_galleryService.content.searchResult.photos"></gallery-map> <gallery-map [photos]="_galleryService.content.value.searchResult.photos"></gallery-map>
<div *ngFor="let directory of directories"> <div *ngFor="let directory of directories">
<gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory> <gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
</div> </div>
<gallery-grid [photos]="_galleryService.content.searchResult.photos" [lightbox]="lightbox"></gallery-grid> <gallery-grid [photos]="_galleryService.content.value.searchResult.photos" [lightbox]="lightbox"></gallery-grid>
</div> </div>
</app-frame> </app-frame>

21
frontend/app/gallery/gallery.component.ts
View File

@ -35,12 +35,16 @@ export class GalleryComponent implements OnInit {
return; return;
} }
const dirSorter = (a: DirectoryDTO, b: DirectoryDTO) => { this._galleryService.content.subscribe((content) => {
return a.name.localeCompare(b.name); const dirSorter = (a: DirectoryDTO, b: DirectoryDTO) => {
}; return a.name.localeCompare(b.name);
};
const dirs = <DirectoryDTO[]>(content.searchResult || content.directory || {directories: []}).directories;
this.directories = dirs.sort(dirSorter);
});
this._route.params this._route.params
.subscribe(async (params: Params) => { .subscribe((params: Params) => {
let searchText = params['searchText']; let searchText = params['searchText'];
if (searchText && searchText != "") { if (searchText && searchText != "") {
console.log("searching"); console.log("searching");
@ -49,13 +53,11 @@ export class GalleryComponent implements OnInit {
if (typeString && typeString != "") { if (typeString && typeString != "") {
console.log("with type"); console.log("with type");
let type: SearchTypes = <any>SearchTypes[typeString]; let type: SearchTypes = <any>SearchTypes[typeString];
await this._galleryService.search(searchText, type); this._galleryService.search(searchText, type);
this.directories = this._galleryService.content.searchResult.directories.sort(dirSorter);
return; return;
} }
await this._galleryService.search(searchText); this._galleryService.search(searchText);
this.directories = this._galleryService.content.searchResult.directories.sort(dirSorter);
return; return;
} }
@ -63,8 +65,7 @@ export class GalleryComponent implements OnInit {
let directoryName = params['directory']; let directoryName = params['directory'];
directoryName = directoryName ? directoryName : ""; directoryName = directoryName ? directoryName : "";
await this._galleryService.getDirectory(directoryName); this._galleryService.getDirectory(directoryName);
this.directories = this._galleryService.content.directory.directories.sort(dirSorter);
}); });

73
frontend/app/gallery/gallery.service.ts
View File

@ -6,59 +6,64 @@ import {PhotoDTO} from "../../../common/entities/PhotoDTO";
import {DirectoryDTO} from "../../../common/entities/DirectoryDTO"; import {DirectoryDTO} from "../../../common/entities/DirectoryDTO";
import {SearchTypes} from "../../../common/entities/AutoCompleteItem"; import {SearchTypes} from "../../../common/entities/AutoCompleteItem";
import {GalleryCacheService} from "./cache.gallery.service"; import {GalleryCacheService} from "./cache.gallery.service";
import {BehaviorSubject} from "rxjs/BehaviorSubject";
@Injectable() @Injectable()
export class GalleryService { export class GalleryService {
public content: ContentWrapper; public content: BehaviorSubject<ContentWrapper>;
private lastDirectory: DirectoryDTO; private lastDirectory: DirectoryDTO;
private searchId: any; private searchId: any;
constructor(private networkService: NetworkService, private galleryCacheService: GalleryCacheService) { constructor(private networkService: NetworkService, private galleryCacheService: GalleryCacheService) {
this.content = new ContentWrapper(); this.content = new BehaviorSubject<ContentWrapper>(new ContentWrapper());
} }
lastRequest: { directory: string } = { lastRequest: { directory: string } = {
directory: null directory: null
}; };
public getDirectory(directoryName: string): Promise<Message<ContentWrapper>> { public async getDirectory(directoryName: string): Promise<Message<ContentWrapper>> {
this.content = new ContentWrapper(); const content = new ContentWrapper();
this.content.directory = this.galleryCacheService.getDirectory(directoryName); content.directory = this.galleryCacheService.getDirectory(directoryName);
this.content.searchResult = null; content.searchResult = null;
this.content.next(content);
this.lastRequest.directory = directoryName; this.lastRequest.directory = directoryName;
return this.networkService.getJson("/gallery/content/" + directoryName).then(
(message: Message<ContentWrapper>) => {
if (!message.error && message.result) {
this.galleryCacheService.setDirectory(message.result.directory); //save it before adding references let message: Message<ContentWrapper> = await this.networkService.getJson<Message<ContentWrapper>>("/gallery/content/" + directoryName);
if (this.lastRequest.directory != directoryName) { if (!message.error && message.result) {
return;
}
//Add references this.galleryCacheService.setDirectory(message.result.directory); //save it before adding references
let addDir = (dir: DirectoryDTO) => {
dir.photos.forEach((photo: PhotoDTO) => {
photo.directory = dir;
});
dir.directories.forEach((directory: DirectoryDTO) => { if (this.lastRequest.directory != directoryName) {
addDir(directory); return;
directory.parent = dir; }
});
//Add references
let addDir = (dir: DirectoryDTO) => {
dir.photos.forEach((photo: PhotoDTO) => {
photo.directory = dir;
});
dir.directories.forEach((directory: DirectoryDTO) => {
addDir(directory);
directory.parent = dir;
});
}; };
addDir(message.result.directory); addDir(message.result.directory);
this.lastDirectory = message.result.directory; this.lastDirectory = message.result.directory;
this.content = message.result; this.content.next(message.result);
} }
return message;
}); return message;
} }
//TODO: cache //TODO: cache
@ -76,7 +81,7 @@ export class GalleryService {
return this.networkService.getJson(queryString).then( return this.networkService.getJson(queryString).then(
(message: Message<ContentWrapper>) => { (message: Message<ContentWrapper>) => {
if (!message.error && message.result) { if (!message.error && message.result) {
this.content = message.result; this.content.next(message.result);
} }
return message; return message;
}); });
@ -85,8 +90,10 @@ export class GalleryService {
//TODO: cache (together with normal search) //TODO: cache (together with normal search)
public instantSearch(text: string): Promise<Message<ContentWrapper>> { public instantSearch(text: string): Promise<Message<ContentWrapper>> {
if (text === null || text === '') { if (text === null || text === '') {
this.content.directory = this.lastDirectory; const content = new ContentWrapper();
this.content.searchResult = null; content.directory = this.lastDirectory;
content.searchResult = null;
this.content.next(content);
clearTimeout(this.searchId); clearTimeout(this.searchId);
return Promise.resolve(new Message(null, null)); return Promise.resolve(new Message(null, null));
} }
@ -103,7 +110,7 @@ export class GalleryService {
return this.networkService.getJson("/instant-search/" + text).then( return this.networkService.getJson("/instant-search/" + text).then(
(message: Message<ContentWrapper>) => { (message: Message<ContentWrapper>) => {
if (!message.error && message.result) { if (!message.error && message.result) {
this.content = message.result; this.content.next(message.result);
} }
return message; return message;
}); });

36
frontend/app/gallery/map/map.gallery.component.html
View File

@ -1,19 +1,21 @@
<gallery-map-lightbox [photos]="photos"></gallery-map-lightbox> <ng-template [ngIf]="mapPhotos.length>0">
<div id="map" #map> <gallery-map-lightbox [photos]="photos"></gallery-map-lightbox>
<div id="map" #map>
<agm-map <agm-map
(click)="click()" (click)="click()"
[disableDefaultUI]="true" [disableDefaultUI]="true"
[zoomControl]="false" [zoomControl]="false"
[streetViewControl]="false" [streetViewControl]="false"
[usePanning]="false" [usePanning]="false"
[draggable]="false" [draggable]="false"
[zoom]="0" [zoom]="0"
[latitude]="mapCenter.latitude" [latitude]="mapCenter.latitude"
[longitude]="mapCenter.longitude"> [longitude]="mapCenter.longitude">
<agm-marker <agm-marker
*ngFor="let photo of mapPhotos" *ngFor="let photo of mapPhotos"
[latitude]="photo.latitude" [latitude]="photo.latitude"
[longitude]="photo.longitude"> [longitude]="photo.longitude">
</agm-marker> </agm-marker>
</agm-map> </agm-map>
</div> </div>
</ng-template>