From 602eb142bebb62f1774d6e17c211eef99ace584b Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 12 Aug 2016 16:52:10 +0200 Subject: Client: make an admin menu and a classic menu component --- client/src/app/admin/friends/friend.service.ts | 29 ++++++++++ client/src/app/admin/friends/index.ts | 1 + client/src/app/admin/index.ts | 1 + client/src/app/admin/menu-admin.component.html | 26 +++++++++ client/src/app/admin/menu-admin.component.ts | 42 +++++++++++++++ client/src/app/app.component.html | 53 +----------------- client/src/app/app.component.scss | 34 ------------ client/src/app/app.component.ts | 74 ++++---------------------- client/src/app/friends/friend.service.ts | 29 ---------- client/src/app/friends/index.ts | 1 - client/src/app/menu.component.html | 39 ++++++++++++++ client/src/app/menu.component.ts | 51 ++++++++++++++++++ client/src/main.ts | 2 +- client/src/sass/application.scss | 35 ++++++++++++ 14 files changed, 238 insertions(+), 179 deletions(-) create mode 100644 client/src/app/admin/friends/friend.service.ts create mode 100644 client/src/app/admin/friends/index.ts create mode 100644 client/src/app/admin/menu-admin.component.html create mode 100644 client/src/app/admin/menu-admin.component.ts delete mode 100644 client/src/app/friends/friend.service.ts delete mode 100644 client/src/app/friends/index.ts create mode 100644 client/src/app/menu.component.html create mode 100644 client/src/app/menu.component.ts (limited to 'client/src') diff --git a/client/src/app/admin/friends/friend.service.ts b/client/src/app/admin/friends/friend.service.ts new file mode 100644 index 000000000..d4ab5e60f --- /dev/null +++ b/client/src/app/admin/friends/friend.service.ts @@ -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 { + 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 index 000000000..0adc256c4 --- /dev/null +++ b/client/src/app/admin/friends/index.ts @@ -0,0 +1 @@ +export * from './friend.service'; diff --git a/client/src/app/admin/index.ts b/client/src/app/admin/index.ts index 3b0540818..292973681 100644 --- a/client/src/app/admin/index.ts +++ b/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'; diff --git a/client/src/app/admin/menu-admin.component.html b/client/src/app/admin/menu-admin.component.html new file mode 100644 index 000000000..15a3c764e --- /dev/null +++ b/client/src/app/admin/menu-admin.component.html @@ -0,0 +1,26 @@ + + +
+
+ + List users +
+ +
+ + Make friends +
+ +
+ + Quit friends +
+
+ +
+
+ + Quit admin. +
+
+ diff --git a/client/src/app/admin/menu-admin.component.ts b/client/src/app/admin/menu-admin.component.ts new file mode 100644 index 000000000..eb27c1e58 --- /dev/null +++ b/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(); + + 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) + ); + } +} diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 58967abca..a7538ee7a 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -14,61 +14,12 @@
- - -
-
- - - Login - - - - - Logout - -
- -
- - My account -
-
- -
-
- - Get videos -
- - -
- -
-
- - List users -
- -
- - Make friends -
- -
- - Quit friends -
-
- + +
-
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 1b02b2f57..95f306d75 100644 --- a/client/src/app/app.component.scss +++ b/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; diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 444b6b3b4..d9549ad5b 100644 --- a/client/src/app/app.component.ts +++ b/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 { - 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 index 771046484..000000000 --- a/client/src/app/friends/friend.service.ts +++ /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 { - 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 index 0adc256c4..000000000 --- a/client/src/app/friends/index.ts +++ /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 index 000000000..922375395 --- /dev/null +++ b/client/src/app/menu.component.html @@ -0,0 +1,39 @@ + +
+
+ + + Login + + + + + Logout + +
+ +
+ + My account +
+
+ +
+
+ + Get videos +
+ + +
+ +
+ +
+ diff --git a/client/src/app/menu.component.ts b/client/src/app/menu.component.ts new file mode 100644 index 000000000..594cd996e --- /dev/null +++ b/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(); + 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']); + } +} diff --git a/client/src/main.ts b/client/src/main.ts index a78d275ad..41fc6e0c2 100644 --- a/client/src/main.ts +++ b/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(); diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 9c48b4627..e03b882d6 100644 --- a/client/src/sass/application.scss +++ b/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; -- cgit v1.2.3