Client: make an admin menu and a classic menu component
authorChocobozzz <florian.bigard@gmail.com>
Fri, 12 Aug 2016 14:52:10 +0000 (16:52 +0200)
committerChocobozzz <florian.bigard@gmail.com>
Fri, 12 Aug 2016 14:53:32 +0000 (16:53 +0200)
15 files changed:
client/src/app/admin/friends/friend.service.ts [new file with mode: 0644]
client/src/app/admin/friends/index.ts [new file with mode: 0644]
client/src/app/admin/index.ts
client/src/app/admin/menu-admin.component.html [new file with mode: 0644]
client/src/app/admin/menu-admin.component.ts [new file with mode: 0644]
client/src/app/app.component.html
client/src/app/app.component.scss
client/src/app/app.component.ts
client/src/app/friends/friend.service.ts [deleted file]
client/src/app/friends/index.ts [deleted file]
client/src/app/menu.component.html [new file with mode: 0644]
client/src/app/menu.component.ts [new file with mode: 0644]
client/src/main.ts
client/src/sass/application.scss
client/tsconfig.json

diff --git a/client/src/app/admin/friends/friend.service.ts b/client/src/app/admin/friends/friend.service.ts
new file mode 100644 (file)
index 0000000..d4ab5e6
--- /dev/null
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+
+import { AuthHttp, AuthService } from '../../shared';
+
+@Injectable()
+export class FriendService {
+  private static BASE_FRIEND_URL: string = '/api/v1/pods/';
+
+  constructor (private authHttp: AuthHttp, private authService: AuthService) {}
+
+  makeFriends() {
+    return this.authHttp.get(FriendService.BASE_FRIEND_URL + 'makefriends')
+                    .map(res => res.status)
+                    .catch(this.handleError);
+  }
+
+  quitFriends() {
+    return this.authHttp.get(FriendService.BASE_FRIEND_URL + 'quitfriends')
+                    .map(res => res.status)
+                    .catch(this.handleError);
+  }
+
+  private handleError (error: Response): Observable<number> {
+    console.error(error);
+    return Observable.throw(error.json().error || 'Server error');
+  }
+}
diff --git a/client/src/app/admin/friends/index.ts b/client/src/app/admin/friends/index.ts
new file mode 100644 (file)
index 0000000..0adc256
--- /dev/null
@@ -0,0 +1 @@
+export * from './friend.service';
index 3b05408184615fd37b73d303ed3518884e0c6a92..292973681afadebd1dcb5062bcd248fd7323eab9 100644 (file)
@@ -1,3 +1,4 @@
 export * from './users';
 export * from './admin.component';
 export * from './admin.routes';
+export * from './menu-admin.component';
diff --git a/client/src/app/admin/menu-admin.component.html b/client/src/app/admin/menu-admin.component.html
new file mode 100644 (file)
index 0000000..15a3c76
--- /dev/null
@@ -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>
diff --git a/client/src/app/admin/menu-admin.component.ts b/client/src/app/admin/menu-admin.component.ts
new file mode 100644 (file)
index 0000000..eb27c1e
--- /dev/null
@@ -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)
+    );
+  }
+}
index 58967abca9fc6c900ac86ca2ec3154a623cacab4..a7538ee7a13016a8363183392fb3a74a710b3e43 100644 (file)
 
 
   <div class="row">
-
-    <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-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>
+    <my-menu *ngIf="isInAdmin === false" (enteredInAdmin)="onEnteredInAdmin()"></my-menu>
+    <my-menu-admin *ngIf="isInAdmin === true" (quittedAdmin)="onQuittedAdmin()"></my-menu-admin>
 
     <div class="col-md-9 col-sm-8 col-xs-8 router-outlet-container">
       <router-outlet></router-outlet>
     </div>
-
   </div>
 
 
index 1b02b2f5744965ba094f4cf0cfa55b46b789d752..95f306d759cd3d46975098378edc719668ecf809 100644 (file)
@@ -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;
index 444b6b3b4a60af3adfa2a00fd83eb287e7560282..d9549ad5b674f283b04ae14c276b6a4b15b0207e 100644 (file)
@@ -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 {
-  AuthService,
-  AuthStatus,
-  SearchComponent,
-  SearchService
-} from './shared';
+import { MenuAdminComponent } from './admin';
+import { MenuComponent } from './menu.component';
+import { 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 ],
-    providers: [ FriendService, VideoService, SearchService ]
+    directives: [ MenuAdminComponent, MenuComponent, ROUTER_DIRECTIVES, SearchComponent ],
+    providers: [ VideoService, SearchService ]
 })
 
 export class AppComponent {
-  choices = [];
-  isLoggedIn: boolean;
+  isInAdmin = false;
 
-  constructor(
-    private authService: AuthService,
-    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() {
-    return this.authService.isAdmin();
-  }
-
-  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)
-    );
+  onEnteredInAdmin() {
+    this.isInAdmin = true;
   }
 
-  quitFriends() {
-    this.friendService.quitFriends().subscribe(
-      status => {
-        alert('Quit friends!');
-      },
-      error => alert(error)
-    );
+  onQuittedAdmin() {
+    this.isInAdmin = false;
   }
 }
diff --git a/client/src/app/friends/friend.service.ts b/client/src/app/friends/friend.service.ts
deleted file mode 100644 (file)
index 7710464..0000000
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Response } from '@angular/http';
-import { Observable } from 'rxjs/Observable';
-
-import { AuthHttp, AuthService } from '../shared';
-
-@Injectable()
-export class FriendService {
-  private static BASE_FRIEND_URL: string = '/api/v1/pods/';
-
-  constructor (private authHttp: AuthHttp, private authService: AuthService) {}
-
-  makeFriends() {
-    return this.authHttp.get(FriendService.BASE_FRIEND_URL + 'makefriends')
-                    .map(res => res.status)
-                    .catch(this.handleError);
-  }
-
-  quitFriends() {
-    return this.authHttp.get(FriendService.BASE_FRIEND_URL + 'quitfriends')
-                    .map(res => res.status)
-                    .catch(this.handleError);
-  }
-
-  private handleError (error: Response): Observable<number> {
-    console.error(error);
-    return Observable.throw(error.json().error || 'Server error');
-  }
-}
diff --git a/client/src/app/friends/index.ts b/client/src/app/friends/index.ts
deleted file mode 100644 (file)
index 0adc256..0000000
+++ /dev/null
@@ -1 +0,0 @@
-export * from './friend.service';
diff --git a/client/src/app/menu.component.html b/client/src/app/menu.component.html
new file mode 100644 (file)
index 0000000..9223753
--- /dev/null
@@ -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>
diff --git a/client/src/app/menu.component.ts b/client/src/app/menu.component.ts
new file mode 100644 (file)
index 0000000..594cd99
--- /dev/null
@@ -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']);
+  }
+}
index a78d275ad4029191b3d1db1c460f4f3aba4b4ea5..41fc6e0c2a464d1f9f7a9da45469a6de6ef8bb66 100644 (file)
@@ -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();
index 9c48b4627bd2adf4e72abd6c3eb1433f029ad2c8..e03b882d6f0588cc392c918054b5949583dd1920 100644 (file)
@@ -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;
index 5c5f008c3c16fb5a073245e394286906b94db7b7..15752913335a4e00c357ccd4a44c7f2b505ee194 100644 (file)
     "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",
     "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",