xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects 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>
</div>
<div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.directory">
<gallery-navbar [directory]="_galleryService.content.directory"></gallery-navbar>
<div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.directory">
<gallery-navbar [directory]="_galleryService.content.value.directory"></gallery-navbar>
<gallery-directory *ngFor="let directory of directories"
[directory]="directory"></gallery-directory>
<gallery-map [photos]="_galleryService.content.directory.photos"></gallery-map>
<gallery-grid [photos]="_galleryService.content.directory.photos" [lightbox]="lightbox"></gallery-grid>
<gallery-map [photos]="_galleryService.content.value.directory.photos"></gallery-map>
<gallery-grid [photos]="_galleryService.content.value.directory.photos" [lightbox]="lightbox"></gallery-grid>
</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">
<li class="active">
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="1" class="glyphicon glyphicon-folder-open"></span>
<span *ngSwitchCase="2" class="glyphicon glyphicon-tag"></span>
@ -29,11 +29,11 @@
</li>
</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">
<gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
</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>
</app-frame>

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

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

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 {SearchTypes} from "../../../common/entities/AutoCompleteItem";
import {GalleryCacheService} from "./cache.gallery.service";
import {BehaviorSubject} from "rxjs/BehaviorSubject";
@Injectable()
export class GalleryService {
public content: ContentWrapper;
public content: BehaviorSubject<ContentWrapper>;
private lastDirectory: DirectoryDTO;
private searchId: any;
constructor(private networkService: NetworkService, private galleryCacheService: GalleryCacheService) {
this.content = new ContentWrapper();
this.content = new BehaviorSubject<ContentWrapper>(new ContentWrapper());
}
lastRequest: { directory: string } = {
directory: null
};
public getDirectory(directoryName: string): Promise<Message<ContentWrapper>> {
this.content = new ContentWrapper();
public async getDirectory(directoryName: string): Promise<Message<ContentWrapper>> {
const content = new ContentWrapper();
this.content.directory = this.galleryCacheService.getDirectory(directoryName);
this.content.searchResult = null;
content.directory = this.galleryCacheService.getDirectory(directoryName);
content.searchResult = null;
this.content.next(content);
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) {
return;
}
if (!message.error && message.result) {
//Add references
let addDir = (dir: DirectoryDTO) => {
dir.photos.forEach((photo: PhotoDTO) => {
photo.directory = dir;
});
this.galleryCacheService.setDirectory(message.result.directory); //save it before adding references
dir.directories.forEach((directory: DirectoryDTO) => {
addDir(directory);
directory.parent = dir;
});
if (this.lastRequest.directory != directoryName) {
return;
}
//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.content = message.result;
}
return message;
});
this.lastDirectory = message.result.directory;
this.content.next(message.result);
}
return message;
}
//TODO: cache
@ -76,7 +81,7 @@ export class GalleryService {
return this.networkService.getJson(queryString).then(
(message: Message<ContentWrapper>) => {
if (!message.error && message.result) {
this.content = message.result;
this.content.next(message.result);
}
return message;
});
@ -85,8 +90,10 @@ export class GalleryService {
//TODO: cache (together with normal search)
public instantSearch(text: string): Promise<Message<ContentWrapper>> {
if (text === null || text === '') {
this.content.directory = this.lastDirectory;
this.content.searchResult = null;
const content = new ContentWrapper();
content.directory = this.lastDirectory;
content.searchResult = null;
this.content.next(content);
clearTimeout(this.searchId);
return Promise.resolve(new Message(null, null));
}
@ -103,7 +110,7 @@ export class GalleryService {
return this.networkService.getJson("/instant-search/" + text).then(
(message: Message<ContentWrapper>) => {
if (!message.error && message.result) {
this.content = message.result;
this.content.next(message.result);
}
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>
<div id="map" #map>
<ng-template [ngIf]="mapPhotos.length>0">
<gallery-map-lightbox [photos]="photos"></gallery-map-lightbox>
<div id="map" #map>
<agm-map
(click)="click()"
[disableDefaultUI]="true"
[zoomControl]="false"
[streetViewControl]="false"
[usePanning]="false"
[draggable]="false"
[zoom]="0"
[latitude]="mapCenter.latitude"
[longitude]="mapCenter.longitude">
<agm-marker
*ngFor="let photo of mapPhotos"
[latitude]="photo.latitude"
[longitude]="photo.longitude">
</agm-marker>
(click)="click()"
[disableDefaultUI]="true"
[zoomControl]="false"
[streetViewControl]="false"
[usePanning]="false"
[draggable]="false"
[zoom]="0"
[latitude]="mapCenter.latitude"
[longitude]="mapCenter.longitude">
<agm-marker
*ngFor="let photo of mapPhotos"
[latitude]="photo.latitude"
[longitude]="photo.longitude">
</agm-marker>
</agm-map>
</div>
</div>
</ng-template>