interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Client: make an admin menu and a classic menu component

This commit is contained in:
Chocobozzz 2016-08-12 16:52:10 +02:00
parent 7da18e4420
commit 602eb142be
13 changed files with 213 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/friends/friend.service.ts → client/src/app/admin/friends/friend.service.ts
View File

@ -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 {

0
client/src/app/friends/index.ts → client/src/app/admin/friends/index.ts
View File

1
client/src/app/admin/index.ts
View File

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

26
client/src/app/admin/menu-admin.component.html Normal file
View File

@ -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>

42
client/src/app/admin/menu-admin.component.ts Normal file
View File

@ -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)
);
}
}

53
client/src/app/app.component.html
View File

@ -14,61 +14,12 @@
<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>

34
client/src/app/app.component.scss
View 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;

74
client/src/app/app.component.ts
View 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);
}
}
);
onEnteredInAdmin() {
this.isInAdmin = true;
}
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)
);
}
quitFriends() {
this.friendService.quitFriends().subscribe(
status => {
alert('Quit friends!');
},
error => alert(error)
);
onQuittedAdmin() {
this.isInAdmin = false;
}
}

39
client/src/app/menu.component.html Normal file
View File

@ -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>

51
client/src/app/menu.component.ts Normal file
View File

@ -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']);
}
}

2
client/src/main.ts
View 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();

35
client/src/sass/application.scss
View 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;

6
client/tsconfig.json
View File

@ -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",