From 8b52b2a4e831b344b39f10ac14b03183707fb4c6 Mon Sep 17 00:00:00 2001
From: Braun Patrik <bra.patrik@gmail.com>
Date: Wed, 29 Jun 2016 19:26:31 +0200
Subject: [PATCH] implementing navigation

---
 frontend/app/gallery/gallery.component.html   |  1 +
 frontend/app/gallery/gallery.component.ts     |  4 +-
 .../gallery/grid/grid.gallery.component.ts    |  1 +
 .../navigator.gallery.component.html          |  7 ++
 .../navigator/navigator.gallery.component.ts  | 72 +++++++++++++++++++
 frontend/app/model/network/network.service.ts |  2 +-
 6 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/gallery/navigator/navigator.gallery.component.html
 create mode 100644 frontend/app/gallery/navigator/navigator.gallery.component.ts

diff --git a/frontend/app/gallery/gallery.component.html b/frontend/app/gallery/gallery.component.html
index 1e05820..20b4746 100644
--- a/frontend/app/gallery/gallery.component.html
+++ b/frontend/app/gallery/gallery.component.html
@@ -4,6 +4,7 @@
         <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>
         <gallery-directory *ngFor="let directory of _galleryService.content.directory.directories"
                            [directory]="directory"></gallery-directory>
         <gallery-grid [photos]="_galleryService.content.directory.photos" [lightbox]="lightbox"></gallery-grid>
diff --git a/frontend/app/gallery/gallery.component.ts b/frontend/app/gallery/gallery.component.ts
index a3ce448..19954e4 100644
--- a/frontend/app/gallery/gallery.component.ts
+++ b/frontend/app/gallery/gallery.component.ts
@@ -11,6 +11,7 @@ import {GalleryLightboxComponent} from "./lightbox/lightbox.gallery.component";
 import {GallerySearchComponent} from "./search/search.gallery.component";
 import {Config} from "../config/Config";
 import {SearchTypes} from "../../../common/entities/AutoCompleteItem";
+import {GalleryNavigatorComponent} from "./navigator/navigator.gallery.component";
 
 @Component({
     selector: 'gallery',
@@ -20,7 +21,8 @@ import {SearchTypes} from "../../../common/entities/AutoCompleteItem";
         GalleryDirectoryComponent,
         GalleryLightboxComponent,
         FrameComponent,
-        GallerySearchComponent]
+        GallerySearchComponent,
+        GalleryNavigatorComponent]
 })
 export class GalleryComponent implements OnInit {
 
diff --git a/frontend/app/gallery/grid/grid.gallery.component.ts b/frontend/app/gallery/grid/grid.gallery.component.ts
index 9d8f6da..3522dbc 100644
--- a/frontend/app/gallery/grid/grid.gallery.component.ts
+++ b/frontend/app/gallery/grid/grid.gallery.component.ts
@@ -176,6 +176,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
     @HostListener('window:scroll')
     onScroll() {
         this.renderPhotos();
+
         if (Config.Client.enableOnScrollThumbnailPrioritising == true) {
             this.gridPhotoQL.toArray().forEach((pc:GalleryPhotoComponent) => {
                 pc.onScroll();
diff --git a/frontend/app/gallery/navigator/navigator.gallery.component.html b/frontend/app/gallery/navigator/navigator.gallery.component.html
new file mode 100644
index 0000000..c4931b1
--- /dev/null
+++ b/frontend/app/gallery/navigator/navigator.gallery.component.html
@@ -0,0 +1,7 @@
+<ol id="directory-path" class="breadcrumb">
+    <li *ngFor="let path of routes">
+        <a *ngIf="path.route" [routerLink]="['Gallery',{directory: path.route}]">{{path.name}}</a>
+        <span *ngIf="!path.route">{{path.name}}</span>
+    </li>
+
+</ol>
diff --git a/frontend/app/gallery/navigator/navigator.gallery.component.ts b/frontend/app/gallery/navigator/navigator.gallery.component.ts
new file mode 100644
index 0000000..f84eda3
--- /dev/null
+++ b/frontend/app/gallery/navigator/navigator.gallery.component.ts
@@ -0,0 +1,72 @@
+///<reference path="../../../browser.d.ts"/>
+
+import {Component, Input, OnChanges} from "@angular/core";
+import {Directory} from "../../../../common/entities/Directory";
+import {RouterLink} from "@angular/router-deprecated";
+
+@Component({
+    selector: 'gallery-navbar',
+    templateUrl: 'app/gallery/navigator/navigator.gallery.component.html',
+    directives: [RouterLink],
+})
+export class GalleryNavigatorComponent implements OnChanges {
+    @Input() directory:Directory;
+
+    routes:Array<any> = [];
+
+    constructor() {
+    }
+
+
+    ngOnChanges() {
+        this.getPath();
+    }
+
+    getPath() {
+        if (!this.directory) {
+            return [];
+        }
+
+        let path = this.directory.path.replace(new RegExp("\\\\", 'g'), "/");
+
+        let dirs = path.split("/");
+        dirs.push(this.directory.name);
+
+        //removing empty strings
+        for (let i = 0; i < dirs.length; i++) {
+            if (!dirs[i] || 0 === dirs[i].length || "." === dirs[i]) {
+                dirs.splice(i, 1);
+                i--;
+            }
+        }
+
+
+        let arr = [];
+
+        //create root link
+        if (dirs.length == 0) {
+            arr.push({name: "Images", route: null});
+        } else {
+            arr.push({name: "Images", route: "/"});
+
+        }
+
+        //create rest navigation
+        dirs.forEach((name, index)=> {
+            let route = dirs.slice(0, dirs.indexOf(name) + 1).join("/");
+            if (dirs.length - 1 == index) {
+                arr.push({name: name, route: null});
+            } else {
+                arr.push({name: name, route: route});
+            }
+        });
+
+
+        this.routes = arr;
+
+
+    }
+
+
+}
+
diff --git a/frontend/app/model/network/network.service.ts b/frontend/app/model/network/network.service.ts
index 3d7eb70..396276f 100644
--- a/frontend/app/model/network/network.service.ts
+++ b/frontend/app/model/network/network.service.ts
@@ -49,7 +49,7 @@ export class NetworkService {
     }
 
     private static handleError(error:any) {
-        // TODO: in a real world app, we may send the error to some remote logging infrastructure
+        // TODO: in a real world app do smthing better
         // instead of just logging it to the console
         console.error(error);
         return Promise.reject(error.message || error.json().error || 'Server error');