xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects Activity

creating content wrapper for search preparation

Browse Source
This commit is contained in:
Braun Patrik 2016-05-09 19:14:33 +02:00
parent ef5758f3c7
commit 225d2b6a8c
10 changed files with 117 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
backend/middlewares/GalleryMWs.ts
View File

@ -6,6 +6,7 @@ import {Directory} from "../../common/entities/Directory";
import {Config} from "../config/Config";
import {ObjectManagerRepository} from "../model/ObjectManagerRepository";
import {AutoCompleteItem} from "../../common/entities/AutoCompleteItem";
import {ContentWrapper} from "../../common/entities/ConentWrapper";
export class GalleryMWs {
@ -26,7 +27,7 @@ export class GalleryMWs {
if (err || !directory) {
return next(new Error(ErrorCodes.GENERAL_ERROR, err));
}
req.resultPipe = directory;
req.resultPipe = new ContentWrapper(directory, null);
return next();
});
}
@ -52,6 +53,12 @@ export class GalleryMWs {
return next(new Error(ErrorCodes.GENERAL_ERROR));
}
public static instantSearch(req:Request, res:Response, next:NextFunction) {
//TODO: implement
return next(new Error(ErrorCodes.GENERAL_ERROR));
}
public static autocomplete(req:Request, res:Response, next:NextFunction) {
if (!(req.params.text)) {
return next();

11
backend/routes/GalleryRouter.ts
View File

@ -13,6 +13,7 @@ export class GalleryRouter {
this.addDirectoryList();
this.addSearch();
this.addInstantSearch();
this.addAutoComplete();
}
@ -43,13 +44,21 @@ export class GalleryRouter {
};
private addSearch() {
this.app.get("/api/gallery/search",
this.app.get("/api/gallery/search/:text",
AuthenticationMWs.authenticate,
GalleryMWs.search,
RenderingMWs.renderResult
);
};
private addInstantSearch() {
this.app.get("/api/gallery/instant-search/:text",
AuthenticationMWs.authenticate,
GalleryMWs.instantSearch,
RenderingMWs.renderResult
);
};
private addAutoComplete() {
this.app.get("/api/gallery/autocomplete/:text",
AuthenticationMWs.authenticate,

13
common/entities/ConentWrapper.ts Normal file
View File

@ -0,0 +1,13 @@
import {Directory} from "./Directory";
import {SearchResult} from "./SearchResult";
export class ContentWrapper {
public directory:Directory;
public searchResult:SearchResult;
constructor(directory:Directory = null, searchResult:SearchResult = null) {
this.directory = directory;
this.searchResult = searchResult;
}
}

12
common/entities/SearchResult.ts Normal file
View File

@ -0,0 +1,12 @@
import {Directory} from "./Directory";
import {Photo} from "./Photo";
export class SearchResult {
public directories:Array<Directory>;
public photos:Array<Photo>;
constructor(directories:Array<Directory>, photos:Array<Photo>) {
this.directories = directories;
this.photos = photos;
}
}

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

@ -3,10 +3,10 @@
<div navbar>
<gallery-search></gallery-search>
</div>
<div body class="container" style="width: 100%; padding:0" *ngIf="currentDirectory">
<div *ngFor="let directory of currentDirectory.directories">
<div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.directory">
<div *ngFor="let directory of _galleryService.content.directory.directories">
<gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
</div>
<gallery-grid [directory]="currentDirectory" [lightbox]="lightbox"></gallery-grid>
<gallery-grid [directory]="_galleryService.content.directory" [lightbox]="lightbox"></gallery-grid>
</div>
</app-frame>

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

@ -4,8 +4,6 @@ import {Component, OnInit} from "@angular/core";
import {AuthenticationService} from "../model/network/authentication.service.ts";
import {Router, RouteParams} from "@angular/router-deprecated";
import {GalleryService} from "./gallery.service";
import {Directory} from "../../../common/entities/Directory";
import {Message} from "../../../common/entities/Message";
import {GalleryDirectoryComponent} from "./directory/directory.gallery.component";
import {GalleryGridComponent} from "./grid/grid.gallery.component";
import {FrameComponent} from "../frame/frame.component";
@ -24,8 +22,6 @@ import {GallerySearchComponent} from "./search/search.gallery.component";
})
export class GalleryComponent implements OnInit {
currentDirectory:Directory = new Directory();
constructor(private _galleryService:GalleryService,
private _params:RouteParams,
@ -43,14 +39,8 @@ export class GalleryComponent implements OnInit {
console.log(this._params);
console.log(directoryName);
directoryName = directoryName ? directoryName : "";
this._galleryService.getDirectory(directoryName).then((message:Message<Directory>) => {
if (message.error) {
//TODO: implement
return;
}
this.currentDirectory = message.result;
});
this._galleryService.getDirectory(directoryName);
}

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

@ -3,16 +3,45 @@
import {Injectable} from "@angular/core";
import {NetworkService} from "../model/network/network.service.ts";
import {Message} from "../../../common/entities/Message";
import {Directory} from "../../../common/entities/Directory";
import {ContentWrapper} from "../../../common/entities/ConentWrapper";
@Injectable()
export class GalleryService {
public content:ContentWrapper;
constructor(private _networkService:NetworkService) {
this.content = new ContentWrapper();
}
public getDirectory(directoryName:string):Promise<Message<Directory>> {
return this._networkService.getJson("/gallery/content/" + directoryName);
public getDirectory(directoryName:string):Promise<Message<ContentWrapper>> {
return this._networkService.getJson("/gallery/content/" + directoryName).then(
(message:Message<ContentWrapper>) => {
if (!message.error && message.result) {
this.content = message.result;
}
return message;
});
}
public search(text:string):Promise<Message<ContentWrapper>> {
return this._networkService.getJson("/gallery/search/" + text).then(
(message:Message<ContentWrapper>) => {
if (!message.error && message.result) {
this.content = message.result;
}
return message;
});
}
public instantSearch(text:string):Promise<Message<ContentWrapper>> {
return this._networkService.getJson("/gallery/instant-search/" + text).then(
(message:Message<ContentWrapper>) => {
if (!message.error && message.result) {
this.content = message.result;
}
return message;
});
}
}

3
frontend/app/gallery/grid/grid.gallery.component.html
View File

@ -1,7 +1,6 @@
<div #gridContainer *ngIf="directory" (window:resize)="onResize()" >
<div #gridContainer (window:resize)="onResize()">
<gallery-photo
*ngFor="let gridPhoto of photosToRender"
*ngIf="gridPhoto"
(click)="lightbox.show(gridPhoto.photo)"
[photo]="gridPhoto.photo"
[directory]="directory"

50
frontend/app/gallery/grid/grid.gallery.component.ts
View File

@ -41,37 +41,60 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
}
ngOnChanges() {
// this.renderPhotos();
}
onResize() {
this.renderPhotos();
}
ngAfterViewInit() {
this.lightbox.gridPhotoQL = this.gridPhotoQL;
this.gridPhotoQL.changes.subscribe(
(x)=> {
if (this.gridPhotoQL.length < this.photosToRender.length) {
return;
}
if (this.renderedConteinerWidth != this.getContainerWidth()) {
this.renderPhotos();
}
});
/* this.gridPhotoQL.changes.subscribe(
(x)=> {
console.log("changed");
if (!this.directory || this.gridPhotoQL.length < this.directory.photos.length) {
console.log("bad");
console.log(this.directory ? this.gridPhotoQL.length + " < "+this.directory.photos.length : "no dir");
return;
}
if (this.renderedContainerWidth != this.getContainerWidth()) {
this.renderPhotos();
}
},
(err) => {
console.log('Error: %s', err);
},
() =>{
console.log('Completed');
}
); */
setImmediate(() => {
this.renderPhotos();
});
}
private renderedConteinerWidth = 0;
private renderedContainerWidth = 0;
private renderPhotos() {
if (this.getContainerWidth() == 0) {
return;
}
let maxRowHeight = window.innerHeight / this.MIN_ROW_COUNT;
let minRowHeight = window.innerHeight / this.MAX_ROW_COUNT;
let containerWidth = this.getContainerWidth();
this.renderedConteinerWidth = containerWidth;
this.renderedContainerWidth = containerWidth;
this.photosToRender = [];
let i = 0;
while (i < this.directory.photos.length) {
let photoRowBuilder = new GridRowBuilder(this.directory.photos, i, this.IMAGE_MARGIN, this.getContainerWidth());
let photoRowBuilder = new GridRowBuilder(this.directory.photos, i, this.IMAGE_MARGIN, containerWidth);
photoRowBuilder.addPhotos(this.TARGET_COL_COUNT);
photoRowBuilder.adjustRowHeightBetween(minRowHeight, maxRowHeight);
@ -87,9 +110,6 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
}
}
onResize() {
this.renderPhotos();
}
private getContainerWidth():number {
if (!this.gridContainer) {

2
frontend/index.ejs
View File

@ -11,7 +11,7 @@
crossorigin="anonymous">
<body >
<body style="overflow-y: scroll">
<pi-gallery2-app>Loading...</pi-gallery2-app>
</body>
<script>