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>
</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>

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

@ -35,12 +35,16 @@ export class GalleryComponent implements OnInit {
return;
}
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);
});

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

@ -6,30 +6,34 @@ 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>) => {
let message: Message<ContentWrapper> = await this.networkService.getJson<Message<ContentWrapper>>("/gallery/content/" + directoryName);
if (!message.error && message.result) {
this.galleryCacheService.setDirectory(message.result.directory); //save it before adding references
@ -55,10 +59,11 @@ export class GalleryService {
this.lastDirectory = message.result.directory;
this.content = message.result;
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;
});

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

@ -1,3 +1,4 @@
<ng-template [ngIf]="mapPhotos.length>0">
<gallery-map-lightbox [photos]="photos"></gallery-map-lightbox>
<div id="map" #map>
<agm-map
@ -17,3 +18,4 @@
</agm-marker>
</agm-map>
</div>
</ng-template>