aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-08-12 16:52:10 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-08-12 16:53:32 +0200
commit602eb142bebb62f1774d6e17c211eef99ace584b (patch)
tree9410d3b225f5a904a41d7c8f3c3035375dc4268a /client/src
parent7da18e4420c4b71a8ecfda07f39324fbfec081c3 (diff)
downloadPeerTube-602eb142bebb62f1774d6e17c211eef99ace584b.tar.gz
PeerTube-602eb142bebb62f1774d6e17c211eef99ace584b.tar.zst
PeerTube-602eb142bebb62f1774d6e17c211eef99ace584b.zip
Client: make an admin menu and a classic menu component
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/admin/friends/friend.service.ts (renamed from client/src/app/friends/friend.service.ts)2
-rw-r--r--client/src/app/admin/friends/index.ts (renamed from client/src/app/friends/index.ts)0
-rw-r--r--client/src/app/admin/index.ts1
-rw-r--r--client/src/app/admin/menu-admin.component.html26
-rw-r--r--client/src/app/admin/menu-admin.component.ts42
-rw-r--r--client/src/app/app.component.html53
-rw-r--r--client/src/app/app.component.scss34
-rw-r--r--client/src/app/app.component.ts74
-rw-r--r--client/src/app/menu.component.html39
-rw-r--r--client/src/app/menu.component.ts51
-rw-r--r--client/src/main.ts2
-rw-r--r--client/src/sass/application.scss35
12 files changed, 209 insertions, 150 deletions
diff --git a/client/src/app/friends/friend.service.ts b/client/src/app/admin/friends/friend.service.ts
index 771046484..d4ab5e60f 100644
--- a/client/src/app/friends/friend.service.ts
+++ b/client/src/app/admin/friends/friend.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
2import { Response } from '@angular/http'; 2import { Response } from '@angular/http';
3import { Observable } from 'rxjs/Observable'; 3import { Observable } from 'rxjs/Observable';
4 4
5import { AuthHttp, AuthService } from '../shared'; 5import { AuthHttp, AuthService } from '../../shared';
6 6
7@Injectable() 7@Injectable()
8export class FriendService { 8export class FriendService {
diff --git a/client/src/app/friends/index.ts b/client/src/app/admin/friends/index.ts
index 0adc256c4..0adc256c4 100644
--- a/client/src/app/friends/index.ts
+++ b/client/src/app/admin/friends/index.ts
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 @@
1export * from './users'; 1export * from './users';
2export * from './admin.component'; 2export * from './admin.component';
3export * from './admin.routes'; 3export * from './admin.routes';
4export * 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 @@
1<menu class="col-md-2 col-sm-3 col-xs-3">
2
3 <div class="panel-block">
4 <div id="panel-users" class="panel-button">
5 <span class="hidden-xs glyphicon glyphicon-user"></span>
6 <a [routerLink]="['/admin/users/list']">List users</a>
7 </div>
8
9 <div id="panel-make-friends" class="panel-button">
10 <span class="hidden-xs glyphicon glyphicon-cloud"></span>
11 <a (click)='makeFriends()'>Make friends</a>
12 </div>
13
14 <div id="panel-quit-friends" class="panel-button">
15 <span class="hidden-xs glyphicon glyphicon-plane"></span>
16 <a (click)='quitFriends()'>Quit friends</a>
17 </div>
18 </div>
19
20 <div class="panel-block">
21 <div id="panel-quit-administration" class="panel-button">
22 <span class="hidden-xs glyphicon glyphicon-cog"></span>
23 <a (click)="quitAdmin()">Quit admin.</a>
24 </div>
25 </div>
26</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
index 000000000..eb27c1e58
--- /dev/null
+++ b/client/src/app/admin/menu-admin.component.ts
@@ -0,0 +1,42 @@
1import { Component, Output, EventEmitter } from '@angular/core';
2import { ROUTER_DIRECTIVES } from '@angular/router';
3
4import { FriendService } from './friends';
5
6@Component({
7 selector: 'my-menu-admin',
8 template: require('./menu-admin.component.html'),
9 directives: [ ROUTER_DIRECTIVES ],
10 providers: [ FriendService ]
11})
12export class MenuAdminComponent {
13 @Output() quittedAdmin = new EventEmitter<boolean>();
14
15 constructor(private friendService: FriendService) {}
16
17 makeFriends() {
18 this.friendService.makeFriends().subscribe(
19 status => {
20 if (status === 409) {
21 alert('Already made friends!');
22 } else {
23 alert('Made friends!');
24 }
25 },
26 error => alert(error)
27 );
28 }
29
30 quitAdmin() {
31 this.quittedAdmin.emit(true);
32 }
33
34 quitFriends() {
35 this.friendService.quitFriends().subscribe(
36 status => {
37 alert('Quit friends!');
38 },
39 error => alert(error)
40 );
41 }
42}
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 @@
14 14
15 15
16 <div class="row"> 16 <div class="row">
17 17 <my-menu *ngIf="isInAdmin === false" (enteredInAdmin)="onEnteredInAdmin()"></my-menu>
18 <menu class="col-md-2 col-sm-3 col-xs-3"> 18 <my-menu-admin *ngIf="isInAdmin === true" (quittedAdmin)="onQuittedAdmin()"></my-menu-admin>
19 <div class="panel-block">
20 <div id="panel-user-login" class="panel-button">
21 <span *ngIf="!isLoggedIn" >
22 <span class="hidden-xs glyphicon glyphicon-log-in"></span>
23 <a [routerLink]="['/login']">Login</a>
24 </span>
25
26 <span *ngIf="isLoggedIn">
27 <span class="hidden-xs glyphicon glyphicon-log-out"></span>
28 <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
29 </span>
30 </div>
31
32 <div *ngIf="isLoggedIn" id="panel-user-account" class="panel-button">
33 <span class="hidden-xs glyphicon glyphicon-user"></span>
34 <a [routerLink]="['/account']">My account</a>
35 </div>
36 </div>
37
38 <div class="panel-block">
39 <div id="panel-get-videos" class="panel-button">
40 <span class="hidden-xs glyphicon glyphicon-list"></span>
41 <a [routerLink]="['/videos/list']">Get videos</a>
42 </div>
43
44 <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn">
45 <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
46 <a [routerLink]="['/videos/add']">Upload a video</a>
47 </div>
48 </div>
49
50 <div class="panel-block" *ngIf="isUserAdmin()">
51 <div id="panel-users" class="panel-button">
52 <span class="hidden-xs glyphicon glyphicon-user"></span>
53 <a [routerLink]="['/admin/users/list']">List users</a>
54 </div>
55
56 <div id="panel-make-friends" class="panel-button">
57 <span class="hidden-xs glyphicon glyphicon-cloud"></span>
58 <a (click)='makeFriends()'>Make friends</a>
59 </div>
60
61 <div id="panel-quit-friends" class="panel-button">
62 <span class="hidden-xs glyphicon glyphicon-plane"></span>
63 <a (click)='quitFriends()'>Quit friends</a>
64 </div>
65 </div>
66 </menu>
67 19
68 <div class="col-md-9 col-sm-8 col-xs-8 router-outlet-container"> 20 <div class="col-md-9 col-sm-8 col-xs-8 router-outlet-container">
69 <router-outlet></router-outlet> 21 <router-outlet></router-outlet>
70 </div> 22 </div>
71
72 </div> 23 </div>
73 24
74 25
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 {
12 margin-bottom: 30px; 12 margin-bottom: 30px;
13} 13}
14 14
15menu {
16 @media screen and (max-width: 600px) {
17 margin-right: 3px !important;
18 padding: 3px !important;
19 min-height: 400px !important;
20 }
21
22 min-height: 600px;
23 margin-right: 20px;
24 border-right: 1px solid rgba(0, 0, 0, 0.2);
25
26 .panel-button {
27 margin: 8px;
28 cursor: pointer;
29 transition: margin 0.2s;
30
31 &:hover {
32 margin-left: 15px;
33 }
34
35 a {
36 color: #333333;
37 }
38 }
39
40 .glyphicon {
41 margin: 5px;
42 }
43}
44
45.panel-block:not(:last-child) {
46 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
47}
48
49.router-outlet-container { 15.router-outlet-container {
50 @media screen and (max-width: 400px) { 16 @media screen and (max-width: 400px) {
51 padding: 0 3px 0 3px; 17 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 @@
1import { Component } from '@angular/core'; 1import { Component } from '@angular/core';
2import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from '@angular/router'; 2import { ROUTER_DIRECTIVES } from '@angular/router';
3 3
4import { FriendService } from './friends'; 4import { MenuAdminComponent } from './admin';
5import { 5import { MenuComponent } from './menu.component';
6 AuthService, 6import { SearchComponent, SearchService } from './shared';
7 AuthStatus,
8 SearchComponent,
9 SearchService
10} from './shared';
11import { VideoService } from './videos'; 7import { VideoService } from './videos';
12 8
13@Component({ 9@Component({
14 selector: 'my-app', 10 selector: 'my-app',
15 template: require('./app.component.html'), 11 template: require('./app.component.html'),
16 styles: [ require('./app.component.scss') ], 12 styles: [ require('./app.component.scss') ],
17 directives: [ ROUTER_DIRECTIVES, SearchComponent ], 13 directives: [ MenuAdminComponent, MenuComponent, ROUTER_DIRECTIVES, SearchComponent ],
18 providers: [ FriendService, VideoService, SearchService ] 14 providers: [ VideoService, SearchService ]
19}) 15})
20 16
21export class AppComponent { 17export class AppComponent {
22 choices = []; 18 isInAdmin = false;
23 isLoggedIn: boolean;
24 19
25 constructor( 20 onEnteredInAdmin() {
26 private authService: AuthService, 21 this.isInAdmin = true;
27 private friendService: FriendService,
28 private route: ActivatedRoute,
29 private router: Router
30 ) {
31 this.isLoggedIn = this.authService.isLoggedIn();
32
33 this.authService.loginChangedSource.subscribe(
34 status => {
35 if (status === AuthStatus.LoggedIn) {
36 this.isLoggedIn = true;
37 console.log('Logged in.');
38 } else if (status === AuthStatus.LoggedOut) {
39 this.isLoggedIn = false;
40 console.log('Logged out.');
41 } else {
42 console.error('Unknown auth status: ' + status);
43 }
44 }
45 );
46 }
47
48 isUserAdmin() {
49 return this.authService.isAdmin();
50 }
51
52 logout() {
53 this.authService.logout();
54 // Redirect to home page
55 this.router.navigate(['/videos/list']);
56 }
57
58 makeFriends() {
59 this.friendService.makeFriends().subscribe(
60 status => {
61 if (status === 409) {
62 alert('Already made friends!');
63 } else {
64 alert('Made friends!');
65 }
66 },
67 error => alert(error)
68 );
69 } 22 }
70 23
71 quitFriends() { 24 onQuittedAdmin() {
72 this.friendService.quitFriends().subscribe( 25 this.isInAdmin = false;
73 status => {
74 alert('Quit friends!');
75 },
76 error => alert(error)
77 );
78 } 26 }
79} 27}
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 @@
1<menu class="col-md-2 col-sm-3 col-xs-3">
2 <div class="panel-block">
3 <div id="panel-user-login" class="panel-button">
4 <span *ngIf="!isLoggedIn" >
5 <span class="hidden-xs glyphicon glyphicon-log-in"></span>
6 <a [routerLink]="['/login']">Login</a>
7 </span>
8
9 <span *ngIf="isLoggedIn">
10 <span class="hidden-xs glyphicon glyphicon-log-out"></span>
11 <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
12 </span>
13 </div>
14
15 <div *ngIf="isLoggedIn" id="panel-user-account" class="panel-button">
16 <span class="hidden-xs glyphicon glyphicon-user"></span>
17 <a [routerLink]="['/account']">My account</a>
18 </div>
19 </div>
20
21 <div class="panel-block">
22 <div id="panel-get-videos" class="panel-button">
23 <span class="hidden-xs glyphicon glyphicon-list"></span>
24 <a [routerLink]="['/videos/list']">Get videos</a>
25 </div>
26
27 <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn">
28 <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
29 <a [routerLink]="['/videos/add']">Upload a video</a>
30 </div>
31 </div>
32
33 <div class="panel-block" *ngIf="isUserAdmin()">
34 <div id="panel-get-videos" class="panel-button">
35 <span class="hidden-xs glyphicon glyphicon-cog"></span>
36 <a (click)="enterInAdmin()">Administration</a>
37 </div>
38 </div>
39</menu>
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 @@
1import { Component, EventEmitter, OnInit, Output } from '@angular/core';
2import { Router, ROUTER_DIRECTIVES } from '@angular/router';
3
4import { AuthService, AuthStatus } from './shared';
5
6@Component({
7 selector: 'my-menu',
8 template: require('./menu.component.html'),
9 directives: [ ROUTER_DIRECTIVES ]
10})
11export class MenuComponent implements OnInit {
12 @Output() enteredInAdmin = new EventEmitter<boolean>();
13 isLoggedIn: boolean;
14
15 constructor (
16 private authService: AuthService,
17 private router: Router
18 ) {}
19
20 ngOnInit() {
21 this.isLoggedIn = this.authService.isLoggedIn();
22
23 this.authService.loginChangedSource.subscribe(
24 status => {
25 if (status === AuthStatus.LoggedIn) {
26 this.isLoggedIn = true;
27 console.log('Logged in.');
28 } else if (status === AuthStatus.LoggedOut) {
29 this.isLoggedIn = false;
30 console.log('Logged out.');
31 } else {
32 console.error('Unknown auth status: ' + status);
33 }
34 }
35 );
36 }
37
38 enterInAdmin() {
39 this.enteredInAdmin.emit(true);
40 }
41
42 isUserAdmin() {
43 return this.authService.isAdmin();
44 }
45
46 logout() {
47 this.authService.logout();
48 // Redirect to home page
49 this.router.navigate(['/videos/list']);
50 }
51}
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 {
7import { bootstrap } from '@angular/platform-browser-dynamic'; 7import { bootstrap } from '@angular/platform-browser-dynamic';
8import { provideRouter } from '@angular/router'; 8import { provideRouter } from '@angular/router';
9 9
10import { AppComponent } from './app/app.component';
11import { routes } from './app/app.routes'; 10import { routes } from './app/app.routes';
12import { AuthHttp, AuthService } from './app/shared'; 11import { AuthHttp, AuthService } from './app/shared';
12import { AppComponent } from './app/app.component';
13 13
14if (process.env.ENV === 'production') { 14if (process.env.ENV === 'production') {
15 enableProdMode(); 15 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 {
6 } 6 }
7} 7}
8 8
9menu {
10 @media screen and (max-width: 600px) {
11 margin-right: 3px !important;
12 padding: 3px !important;
13 min-height: 400px !important;
14 }
15
16 min-height: 600px;
17 margin-right: 20px;
18 border-right: 1px solid rgba(0, 0, 0, 0.2);
19
20 .panel-block:not(:last-child) {
21 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
22 }
23
24 .panel-button {
25 margin: 8px;
26 cursor: pointer;
27 transition: margin 0.2s;
28
29 &:hover {
30 margin-left: 15px;
31 }
32
33 a {
34 color: #333333;
35 }
36 }
37
38 .glyphicon {
39 margin: 5px;
40 }
41}
42
43
9footer { 44footer {
10 border-top: 1px solid rgba(0, 0, 0, 0.2); 45 border-top: 1px solid rgba(0, 0, 0, 0.2);
11 padding-top: 10px; 46 padding-top: 10px;