implementing navigation

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>

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 {
 

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

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>

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

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');