Client: make an admin menu and a classic menu component

client/src/app/admin/friends/friend.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 
-import { AuthHttp, AuthService } from '../shared';
+import { AuthHttp, AuthService } from '../../shared';
 
 @Injectable()
 export class FriendService {

client/src/app/admin/index.ts

@@ -1,3 +1,4 @@
 export * from './users';
 export * from './admin.component';
 export * from './admin.routes';
+export * from './menu-admin.component';

client/src/app/admin/menu-admin.component.html

@@ -0,0 +1,26 @@
+<menu class="col-md-2 col-sm-3 col-xs-3">
+
+  <div class="panel-block">
+    <div id="panel-users" class="panel-button">
+      <span class="hidden-xs glyphicon glyphicon-user"></span>
+      <a [routerLink]="['/admin/users/list']">List users</a>
+    </div>
+
+    <div id="panel-make-friends" class="panel-button">
+      <span class="hidden-xs glyphicon glyphicon-cloud"></span>
+      <a (click)='makeFriends()'>Make friends</a>
+    </div>
+
+    <div id="panel-quit-friends" class="panel-button">
+      <span class="hidden-xs glyphicon glyphicon-plane"></span>
+      <a (click)='quitFriends()'>Quit friends</a>
+    </div>
+  </div>
+
+  <div class="panel-block">
+    <div id="panel-quit-administration" class="panel-button">
+      <span class="hidden-xs glyphicon glyphicon-cog"></span>
+      <a (click)="quitAdmin()">Quit admin.</a>
+    </div>
+  </div>
+</menu>

client/src/app/admin/menu-admin.component.ts

@@ -0,0 +1,42 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+
+import { FriendService } from './friends';
+
+@Component({
+  selector: 'my-menu-admin',
+  template: require('./menu-admin.component.html'),
+  directives: [ ROUTER_DIRECTIVES ],
+  providers: [ FriendService ]
+})
+export class MenuAdminComponent {
+  @Output() quittedAdmin = new EventEmitter<boolean>();
+
+  constructor(private friendService: FriendService) {}
+
+  makeFriends() {
+    this.friendService.makeFriends().subscribe(
+      status => {
+        if (status === 409) {
+          alert('Already made friends!');
+        } else {
+          alert('Made friends!');
+        }
+      },
+      error => alert(error)
+    );
+  }
+
+  quitAdmin() {
+    this.quittedAdmin.emit(true);
+  }
+
+  quitFriends() {
+    this.friendService.quitFriends().subscribe(
+      status => {
+        alert('Quit friends!');
+      },
+      error => alert(error)
+    );
+  }
+}

client/src/app/app.component.html

@@ -14,61 +14,12 @@
 
 
   <div class="row">
-
+    <my-menu *ngIf="isInAdmin === false" (enteredInAdmin)="onEnteredInAdmin()"></my-menu>
-    <menu class="col-md-2 col-sm-3 col-xs-3">
+    <my-menu-admin *ngIf="isInAdmin === true" (quittedAdmin)="onQuittedAdmin()"></my-menu-admin>
-      <div class="panel-block">
-        <div id="panel-user-login" class="panel-button">
-          <span *ngIf="!isLoggedIn" >
-            <span class="hidden-xs glyphicon glyphicon-log-in"></span>
-            <a [routerLink]="['/login']">Login</a>
-          </span>
-
-          <span *ngIf="isLoggedIn">
-            <span class="hidden-xs glyphicon glyphicon-log-out"></span>
-            <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
-          </span>
-        </div>
-
-        <div *ngIf="isLoggedIn" id="panel-user-account" class="panel-button">
-          <span class="hidden-xs glyphicon glyphicon-user"></span>
-          <a [routerLink]="['/account']">My account</a>
-        </div>
-      </div>
-
-      <div class="panel-block">
-        <div id="panel-get-videos" class="panel-button">
-          <span class="hidden-xs glyphicon glyphicon-list"></span>
-          <a [routerLink]="['/videos/list']">Get videos</a>
-        </div>
-
-        <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn">
-          <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
-          <a [routerLink]="['/videos/add']">Upload a video</a>
-        </div>
-      </div>
-
-      <div class="panel-block" *ngIf="isUserAdmin()">
-        <div id="panel-users" class="panel-button">
-          <span class="hidden-xs glyphicon glyphicon-user"></span>
-          <a [routerLink]="['/admin/users/list']">List users</a>
-        </div>
-
-        <div id="panel-make-friends" class="panel-button">
-          <span class="hidden-xs glyphicon glyphicon-cloud"></span>
-          <a (click)='makeFriends()'>Make friends</a>
-        </div>
-
-        <div id="panel-quit-friends" class="panel-button">
-          <span class="hidden-xs glyphicon glyphicon-plane"></span>
-          <a (click)='quitFriends()'>Quit friends</a>
-        </div>
-      </div>
-    </menu>
 
     <div class="col-md-9 col-sm-8 col-xs-8 router-outlet-container">
       <router-outlet></router-outlet>
     </div>
-
   </div>
 
 

client/src/app/app.component.scss

@@ -12,40 +12,6 @@ header div {
   margin-bottom: 30px;
 }
 
-menu {
-  @media screen and (max-width: 600px) {
-    margin-right: 3px !important;
-    padding: 3px !important;
-    min-height: 400px !important;
-  }
-
-  min-height: 600px;
-  margin-right: 20px;
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
-
-  .panel-button {
-    margin: 8px;
-    cursor: pointer;
-    transition: margin 0.2s;
-
-    &:hover {
-      margin-left: 15px;
-    }
-
-    a {
-      color: #333333;
-    }
-  }
-
-  .glyphicon {
-    margin: 5px;
-  }
-}
-
-.panel-block:not(:last-child) {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
 .router-outlet-container {
   @media screen and (max-width: 400px) {
     padding: 0 3px 0 3px;

client/src/app/app.component.ts

@@ -1,79 +1,27 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from '@angular/router';
+import { ROUTER_DIRECTIVES } from '@angular/router';
 
-import { FriendService } from './friends';
+import { MenuAdminComponent } from './admin';
-import {
+import { MenuComponent } from './menu.component';
-  AuthService,
+import { SearchComponent, SearchService } from './shared';
-  AuthStatus,
-  SearchComponent,
-  SearchService
-} from './shared';
 import { VideoService } from './videos';
 
 @Component({
     selector: 'my-app',
     template: require('./app.component.html'),
     styles: [ require('./app.component.scss') ],
-    directives: [ ROUTER_DIRECTIVES, SearchComponent ],
+    directives: [ MenuAdminComponent, MenuComponent, ROUTER_DIRECTIVES, SearchComponent ],
-    providers: [ FriendService, VideoService, SearchService ]
+    providers: [ VideoService, SearchService ]
 })
 
 export class AppComponent {
-  choices = [];
+  isInAdmin = false;
-  isLoggedIn: boolean;
 
-  constructor(
+  onEnteredInAdmin() {
-    private authService: AuthService,
+    this.isInAdmin = true;
-    private friendService: FriendService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
-    this.isLoggedIn = this.authService.isLoggedIn();
-
-    this.authService.loginChangedSource.subscribe(
-      status => {
-        if (status === AuthStatus.LoggedIn) {
-          this.isLoggedIn = true;
-          console.log('Logged in.');
-        } else if (status === AuthStatus.LoggedOut) {
-          this.isLoggedIn = false;
-          console.log('Logged out.');
-        } else {
-          console.error('Unknown auth status: ' + status);
-        }
-      }
-    );
   }
 
-  isUserAdmin() {
+  onQuittedAdmin() {
-    return this.authService.isAdmin();
+    this.isInAdmin = false;
-  }
-
-  logout() {
-    this.authService.logout();
-    // Redirect to home page
-    this.router.navigate(['/videos/list']);
-  }
-
-  makeFriends() {
-    this.friendService.makeFriends().subscribe(
-      status => {
-        if (status === 409) {
-          alert('Already made friends!');
-        } else {
-          alert('Made friends!');
-        }
-      },
-      error => alert(error)
-    );
-  }
-
-  quitFriends() {
-    this.friendService.quitFriends().subscribe(
-      status => {
-        alert('Quit friends!');
-      },
-      error => alert(error)
-    );
   }
 }

client/src/app/menu.component.html

@@ -0,0 +1,39 @@
+<menu class="col-md-2 col-sm-3 col-xs-3">
+  <div class="panel-block">
+    <div id="panel-user-login" class="panel-button">
+      <span *ngIf="!isLoggedIn" >
+        <span class="hidden-xs glyphicon glyphicon-log-in"></span>
+        <a [routerLink]="['/login']">Login</a>
+      </span>
+
+      <span *ngIf="isLoggedIn">
+        <span class="hidden-xs glyphicon glyphicon-log-out"></span>
+        <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
+      </span>
+    </div>
+
+    <div *ngIf="isLoggedIn" id="panel-user-account" class="panel-button">
+      <span class="hidden-xs glyphicon glyphicon-user"></span>
+      <a [routerLink]="['/account']">My account</a>
+    </div>
+  </div>
+
+  <div class="panel-block">
+    <div id="panel-get-videos" class="panel-button">
+      <span class="hidden-xs glyphicon glyphicon-list"></span>
+      <a [routerLink]="['/videos/list']">Get videos</a>
+    </div>
+
+    <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn">
+      <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
+      <a [routerLink]="['/videos/add']">Upload a video</a>
+    </div>
+  </div>
+
+  <div class="panel-block" *ngIf="isUserAdmin()">
+    <div id="panel-get-videos" class="panel-button">
+      <span class="hidden-xs glyphicon glyphicon-cog"></span>
+      <a (click)="enterInAdmin()">Administration</a>
+    </div>
+  </div>
+</menu>

client/src/app/menu.component.ts

@@ -0,0 +1,51 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Router, ROUTER_DIRECTIVES } from '@angular/router';
+
+import { AuthService, AuthStatus } from './shared';
+
+@Component({
+  selector: 'my-menu',
+  template: require('./menu.component.html'),
+  directives: [ ROUTER_DIRECTIVES ]
+})
+export class MenuComponent implements OnInit {
+  @Output() enteredInAdmin = new EventEmitter<boolean>();
+  isLoggedIn: boolean;
+
+  constructor (
+    private authService: AuthService,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.isLoggedIn = this.authService.isLoggedIn();
+
+    this.authService.loginChangedSource.subscribe(
+      status => {
+        if (status === AuthStatus.LoggedIn) {
+          this.isLoggedIn = true;
+          console.log('Logged in.');
+        } else if (status === AuthStatus.LoggedOut) {
+          this.isLoggedIn = false;
+          console.log('Logged out.');
+        } else {
+          console.error('Unknown auth status: ' + status);
+        }
+      }
+    );
+  }
+
+  enterInAdmin() {
+    this.enteredInAdmin.emit(true);
+  }
+
+  isUserAdmin() {
+    return this.authService.isAdmin();
+  }
+
+  logout() {
+    this.authService.logout();
+    // Redirect to home page
+    this.router.navigate(['/videos/list']);
+  }
+}

client/src/main.ts

@@ -7,9 +7,9 @@ import {
 import { bootstrap }    from '@angular/platform-browser-dynamic';
 import { provideRouter } from '@angular/router';
 
-import { AppComponent } from './app/app.component';
 import { routes } from './app/app.routes';
 import { AuthHttp, AuthService } from './app/shared';
+import { AppComponent } from './app/app.component';
 
 if (process.env.ENV === 'production') {
   enableProdMode();

client/src/sass/application.scss

@@ -6,6 +6,41 @@ body {
   }
 }
 
+menu {
+  @media screen and (max-width: 600px) {
+    margin-right: 3px !important;
+    padding: 3px !important;
+    min-height: 400px !important;
+  }
+
+  min-height: 600px;
+  margin-right: 20px;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+
+  .panel-block:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .panel-button {
+    margin: 8px;
+    cursor: pointer;
+    transition: margin 0.2s;
+
+    &:hover {
+      margin-left: 15px;
+    }
+
+    a {
+      color: #333333;
+    }
+  }
+
+  .glyphicon {
+    margin: 5px;
+  }
+}
+
+
 footer {
   border-top: 1px solid rgba(0, 0, 0, 0.2);
   padding-top: 10px;

client/tsconfig.json

@@ -33,7 +33,10 @@
     "src/app/account/index.ts",
     "src/app/admin/admin.component.ts",
     "src/app/admin/admin.routes.ts",
+    "src/app/admin/friends/friend.service.ts",
+    "src/app/admin/friends/index.ts",
     "src/app/admin/index.ts",
+    "src/app/admin/menu-admin.component.ts",
     "src/app/admin/users/index.ts",
     "src/app/admin/users/shared/index.ts",
     "src/app/admin/users/shared/user.service.ts",
@@ -45,11 +48,10 @@
     "src/app/admin/users/users.routes.ts",
     "src/app/app.component.ts",
     "src/app/app.routes.ts",
-    "src/app/friends/friend.service.ts",
-    "src/app/friends/index.ts",
     "src/app/login/index.ts",
     "src/app/login/login.component.ts",
     "src/app/login/login.routes.ts",
+    "src/app/menu.component.ts",
     "src/app/shared/auth/auth-http.service.ts",
     "src/app/shared/auth/auth-status.model.ts",
     "src/app/shared/auth/auth-user.model.ts",