creating, application frame and admin page stub

backend/routes/PublicRouter.ts

@@ -31,7 +31,7 @@ export class PublicRouter{
             res.render(_path.resolve(__dirname, './../../frontend/index.ejs'),res.tpl);
         };
         
-        this.app.get(['/','/login',"/gallery*"], renderIndex);
+        this.app.get(['/','/login',"/gallery*","/admin"], renderIndex);
 
 
     }

frontend/app/admin/admin.component.css

@@ -0,0 +1,5 @@
+#login-card {
+}
+body {
+    background: #eee;
+}

frontend/app/admin/admin.component.html

@@ -0,0 +1,9 @@
+<app-frame>
+    <md-card>
+        <md-card-title>User management</md-card-title>
+        <md-card-content>
+
+            <button md-button (click)="addUser()">+ add user</button>
+        </md-card-content>
+    </md-card>
+</app-frame>

frontend/app/admin/admin.component.ts

@@ -0,0 +1,33 @@
+///<reference path="../../browser.d.ts"/>
+
+import {Component, OnInit} from 'angular2/core';
+import {LoginCredential} from '../../../common/entities/LoginCredential';
+import {AuthenticationService} from "../model/authentication.service";
+import {Router} from "angular2/router";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
+import {FORM_DIRECTIVES} from "angular2/common"; 
+import {MATERIAL_BROWSER_PROVIDERS} from "ng2-material/all";
+import {ViewportHelper} from "ng2-material/all";
+import {FrameComponent} from "../frame/frame.component";
+ 
+@Component({
+    selector: 'admin',
+    templateUrl: 'app/admin/admin.component.html',
+    styleUrls:['app/admin/admin.component.css'],
+    directives:[MATERIAL_DIRECTIVES,  FrameComponent],
+    providers:[MATERIAL_BROWSER_PROVIDERS]
+})
+export class AdminComponent implements OnInit{
+    constructor(private _authService: AuthenticationService, private _router: Router) {
+    }
+
+    ngOnInit(){
+        if (!this._authService.isAuthenticated()) {
+            this._router.navigate(['Login']);
+            return;
+        }
+    }
+
+
+}
+

frontend/app/admin/admin.service.ts

@@ -0,0 +1,25 @@
+///<reference path="../../browser.d.ts"/>
+
+import {Injectable} from 'angular2/core'; 
+import {NetworkService} from "../model/network.service";
+import {Http} from "angular2/http";
+import {Message} from "../../../common/entities/Message";
+import {Directory} from "../../../common/entities/Directory"; 
+
+@Injectable()
+export class GalleryService  extends NetworkService{
+ 
+
+    constructor(_http:Http){
+        super(_http);
+    }
+
+    public getDirectory(directoryName:string): Promise<Message<Directory>>{
+        return this.getJson("/gallery/"+directoryName);
+    }
+
+
+ 
+
+
+}

frontend/app/app.component.ts

@@ -12,7 +12,8 @@ import {HTTP_PROVIDERS} from "angular2/http";
 import {UserService} from "./model/user.service";
 import {GalleryService} from "./gallery/gallery.service";
 import {MATERIAL_BROWSER_PROVIDERS} from "ng2-material/all";
-import {ViewportHelper} from "ng2-material/core/util/viewport"; 
+import {ViewportHelper} from "ng2-material/core/util/viewport";
+import {AdminComponent} from "./admin/admin.component"; 
 
         
 @Component({
@@ -39,6 +40,11 @@ import {ViewportHelper} from "ng2-material/core/util/viewport";
         component: LoginComponent,
         useAsDefault: true
     },
+    {
+        path: '/admin',
+        name: 'Admin',
+        component: AdminComponent
+    },
     {
         path: '/gallery',
         redirectTo: ["Gallery",{directory:""}]

frontend/app/frame/frame.component.html

@@ -0,0 +1,35 @@
+<md-sidenav-container layout="row">
+
+    <md-sidenav name="menu" align="left" layout="column">
+        <md-toolbar class="md-theme-light">
+            <h1 class="md-toolbar-tools">PiGallery2</h1>
+        </md-toolbar>
+        <md-content layout-padding>
+            <button md-raised-button [routerLink]="['Gallery',{directory: '/'}]" class="md-primary">
+                Gallery
+            </button>
+            <button md-raised-button [routerLink]="['Admin']" class="md-primary">
+                Admin
+            </button>
+        </md-content>
+    </md-sidenav>
+
+    <md-content flex>
+        <div layout="column" style="height: 100vh; overflow-y: hidden;">
+            <md-toolbar mdScrollShrink>
+                <div class="md-toolbar-tools">
+                    <button md-button class="md-icon-button md-primary" aria-label="Settings" (click)="showSideNav()">
+                        <i md-icon>more_vert</i>
+                    </button>
+                    <h3>
+                        <span>PiGallery2</span>
+                    </h3>
+                    <span flex></span>
+                </div>
+            </md-toolbar>
+
+            <ng-content></ng-content>
+        </div>
+    </md-content>
+
+</md-sidenav-container>

frontend/app/frame/frame.component.ts

@@ -0,0 +1,25 @@
+///<reference path="../../browser.d.ts"/>
+
+import {Component,  ViewEncapsulation} from 'angular2/core'; 
+import {Router, RouterLink} from "angular2/router";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all"; 
+import {MATERIAL_BROWSER_PROVIDERS} from "ng2-material/all";
+import {ViewportHelper} from "ng2-material/all";
+import {SidenavService} from "ng2-material/all";
+ 
+@Component({
+    selector: 'app-frame',
+    templateUrl: 'app/frame/frame.component.html', 
+    directives:[RouterLink,MATERIAL_DIRECTIVES], 
+    providers: [SidenavService],
+    encapsulation: ViewEncapsulation.Emulated
+})
+export class FrameComponent { 
+    constructor( private _router: Router, public sidenav: SidenavService) { 
+    }
+    
+    public showSideNav(){
+        this.sidenav.show("menu");
+    }   
+}
+

frontend/app/gallery/gallery.component.html

@@ -1,38 +1,9 @@
-<md-sidenav-container layout="row">
-
-    <md-sidenav name="menu" align="left" layout="column">
-        <md-toolbar class="md-theme-light">
-            <h1 class="md-toolbar-tools">PiGallery2</h1>
-        </md-toolbar>
-        <md-content layout-padding>
-            <button md-raised-button (click)="close('menu')" class="md-primary">
-                Close Sidenav Right
-            </button>
-        </md-content>
-    </md-sidenav>
-
-    <md-content flex>
-        <div layout="column" style="height: 100vh; overflow-y: hidden;">
-            <md-toolbar mdScrollShrink>
-                <div class="md-toolbar-tools">
-                    <button md-button class="md-icon-button md-primary" aria-label="Settings" (click)="showSideNav()">
-                        <i md-icon>more_vert</i>
-                    </button>
-                    <h3>
-                        <span>PiGallery2</span>
-                    </h3>
-                    <span flex></span>
-                </div>
-            </md-toolbar>
-
-            <md-content flex id="content">
-                <div *ngIf="currentDirectory" *ngFor="#directory of currentDirectory.directories">
-                    <gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
-                </div>
-                <gallery-grid [directory]="currentDirectory"></gallery-grid>
-
-            </md-content>
+<app-frame>
+    <md-content flex id="content">
+        <div *ngIf="currentDirectory" *ngFor="#directory of currentDirectory.directories">
+            <gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
         </div>
-    </md-content>
+        <gallery-grid [directory]="currentDirectory"></gallery-grid>
 
-</md-sidenav-container>
+    </md-content>
+</app-frame>

frontend/app/gallery/gallery.component.ts

@@ -10,6 +10,7 @@ import {GalleryDirectoryComponent} from "./directory/directory.gallery.component
 import {GalleryGridComponent} from "./grid/grid.gallery.component";
 import {MATERIAL_DIRECTIVES} from "ng2-material/all";
 import {SidenavService} from "ng2-material/all";
+import {FrameComponent} from "../frame/frame.component";
 
 @Component({
     selector: 'gallery',
@@ -17,8 +18,8 @@ import {SidenavService} from "ng2-material/all";
     styleUrls: ['app/gallery/gallery.component.css'],
     directives:[GalleryGridComponent,
                 GalleryDirectoryComponent,
-                MATERIAL_DIRECTIVES],
-    providers: [SidenavService]
+                FrameComponent,
+                MATERIAL_DIRECTIVES]
 })
 export class GalleryComponent implements OnInit{
 
@@ -27,8 +28,7 @@ export class GalleryComponent implements OnInit{
     constructor(private _galleryService:GalleryService,
                 private _params: RouteParams,
                 private _authService: AuthenticationService,
-                private _router: Router,
-                public sidenav: SidenavService) {
+                private _router: Router) {
     }
 
     ngOnInit(){
@@ -50,9 +50,7 @@ export class GalleryComponent implements OnInit{
             this.currentDirectory = message.result;
         });
     }
-    public showSideNav(){ 
-        this.sidenav.show("menu");
-    }
+
     
 }