implementing directory navigation

backend/routes/GalleryRouter.ts

@@ -16,7 +16,7 @@ export class GalleryRouter{
     }
 
     private addDirectoryList() {
-        this.app.get(["/api/gallery/:directory","/api/gallery/"],
+        this.app.get(["/api/gallery/:directory","/api/gallery/","/api/gallery//"],
             AuthenticationMWs.authenticate,
             GalleryMWs.listDirectory,
             RenderingMWs.renderResult

common/Utils.ts

@@ -1,5 +1,3 @@
-/// <reference path="../typings/main.d.ts"/>
-
 export class Utils {
 
     static clone<T>(object:T):T {
@@ -7,4 +5,18 @@ export class Utils {
     }
 
 
+    static concatUrls(...args:Array<string>){
+        let url = "";
+        for(let i = 0 ; i < args.length; i++){
+            if(args[i] === "" || typeof args[i] === "undefined") continue;
+
+            let part = args[i].replace("\\","/");
+            if(part === "/" || part === "./") continue;
+            
+            url += part + "/";
+        }
+
+        return url.substring(0, url.length - 1);
+    }
+
 }

frontend/app/app.component.ts

@@ -1,7 +1,7 @@
 ///<reference path="../browser.d.ts"/>
 
 import { Component } from 'angular2/core';
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouterLink} from 'angular2/router';
 import {LoginComponent} from "./login/login.component";
 import {AuthenticationService} from "./model/authentication.service";
 import {GalleryComponent} from "./gallery/gallery.component";
@@ -34,7 +34,7 @@ import {GalleryService} from "./gallery/gallery.service";
         useAsDefault: true
     },
     {
-        path: '/gallery',
+        path: '/gallery/:directory',
         name: 'Gallery',
         component: GalleryComponent
     }
@@ -48,7 +48,7 @@ export class AppComponent  implements OnInit{
         this._authenticationService.OnAuthenticated.on((user:User) =>
         {
             this._location.replaceState('/'); // clears browser history so they can't navigate with back button
-            this._router.navigate(["Gallery"]);
+            this._router.navigate(["Gallery",{directory:"/"}]);
         });
 
     }

frontend/app/gallery/directory/directory.gallery.component.html

@@ -1 +1 @@
-<span>{{directory.name}}</span>
+<a [routerLink]="['Gallery',{directory: directory.name}]">{{directory.name}}</a>

frontend/app/gallery/directory/directory.gallery.component.ts

@@ -2,10 +2,12 @@
 
 import {Component, Input, OnInit} from 'angular2/core'; 
 import {Directory} from "../../../../common/entities/Directory";
+import {RouterLink} from "angular2/router";
 
 @Component({
     selector: 'gallery-directory',
-    templateUrl: 'app/gallery/directory/directory.gallery.component.html'
+    templateUrl: 'app/gallery/directory/directory.gallery.component.html',
+    directives:[RouterLink]
 })
 export class GalleryDirectoryComponent{
     @Input() directory: Directory;

frontend/app/gallery/gallery.component.html

@@ -1,8 +1,8 @@
 <h1>Gallery</h1>
 
-<div *ngIf="directory" *ngFor="#directory of directory.directories" >
+<div *ngIf="currentDirectory" *ngFor="#directory of currentDirectory.directories" >
   <gallery-directory *ngIf="directory" [directory]="directory" ></gallery-directory>
 </div>
-<div *ngIf="directory" *ngFor="#photo of directory.photos" >
-  <gallery-photo *ngIf="photo" [photo]="photo" ></gallery-photo>
+<div *ngIf="currentDirectory" *ngFor="#photo of currentDirectory.photos" >
+  <gallery-photo *ngIf="photo" [photo]="photo" [directory]="currentDirectory"></gallery-photo>
 </div>

frontend/app/gallery/gallery.component.ts

@@ -17,7 +17,7 @@ import {GalleryDirectoryComponent} from "./directory/directory.gallery.component
 })
 export class GalleryComponent implements OnInit{
 
-    directory:Directory = new Directory(-1,"","/",new Date(),[],[]);
+    currentDirectory:Directory = new Directory(-1,"","/",new Date(),[],[]);
     
     constructor(private _galleryService:GalleryService,
                 private _params: RouteParams,
@@ -41,7 +41,7 @@ export class GalleryComponent implements OnInit{
                 return;
             }
 
-            this.directory = message.result;
+            this.currentDirectory = message.result;
         });
     }
     

frontend/app/gallery/photo/photo.gallery.component.ts

@@ -2,6 +2,8 @@
 
 import {Component, Input, OnInit} from 'angular2/core';
 import {Photo} from "../../../../common/entities/Photo";
+import {Directory} from "../../../../common/entities/Directory";
+import {Utils} from "../../../../common/Utils"; 
 
 @Component({
     selector: 'gallery-photo',
@@ -9,12 +11,14 @@ import {Photo} from "../../../../common/entities/Photo";
 })
 export class GalleryPhotoComponent{
     @Input() photo: Photo;
+    @Input() directory: Directory;
     
     constructor() {
     }
 
     getPhotoPath(){
-        return "/api/gallery/"+this.photo.name;
+        console.log(Utils.concatUrls("/api/gallery",this.directory.path,this.directory.name,this.photo.name));
+        return Utils.concatUrls("/api/gallery",this.directory.path,this.directory.name,this.photo.name); 
     }
     
 }