creating content wrapper for search preparation

backend/middlewares/GalleryMWs.ts

@@ -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();

backend/routes/GalleryRouter.ts

@@ -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,

common/entities/ConentWrapper.ts

@@ -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;
+    }
+
+}

common/entities/SearchResult.ts

@@ -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;
+    }
+}

frontend/app/gallery/gallery.component.html

@@ -3,10 +3,10 @@
     <div navbar>
         <gallery-search></gallery-search>
     </div>
-    <div body class="container" style="width: 100%; padding:0" *ngIf="currentDirectory">
+    <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.directory">
-        <div  *ngFor="let directory of currentDirectory.directories">
+        <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>

frontend/app/gallery/gallery.component.ts

@@ -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) {
+        this._galleryService.getDirectory(directoryName);
-                //TODO: implement
-                return;
-            }
-
-            this.currentDirectory = message.result;
-        });
     }
 
 

frontend/app/gallery/gallery.service.ts

@@ -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>> {
+    public getDirectory(directoryName:string):Promise<Message<ContentWrapper>> {
-        return this._networkService.getJson("/gallery/content/" + directoryName);
+        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;
+            });
     }
 
 }

frontend/app/gallery/grid/grid.gallery.component.html

@@ -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"

frontend/app/gallery/grid/grid.gallery.component.ts

@@ -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(
+        /*   this.gridPhotoQL.changes.subscribe(
-            (x)=> {
+         (x)=> {
-                if (this.gridPhotoQL.length < this.photosToRender.length) {
+         console.log("changed");
-                    return;
+         if (!this.directory || this.gridPhotoQL.length < this.directory.photos.length) {
-                }
+         console.log("bad");
-                if (this.renderedConteinerWidth != this.getContainerWidth()) {
+         console.log(this.directory ? this.gridPhotoQL.length + " < "+this.directory.photos.length : "no dir");
-                    this.renderPhotos();
+         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) {

frontend/index.ejs

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