realistion de la page Mon Profil
This commit is contained in:
MiharyR
parent
4138c22051
commit
7ebacdc287
18 changed files with 702 additions and 145 deletions
|
|
@ -1,41 +1,162 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<!-- --------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<!-- pour les 3 roles -->
|
||||
<div *ngIf="pour === '3roles'">
|
||||
<ul>
|
||||
<li>
|
||||
<a routerLink="/connexion" class="StreamNotFound"> StreamNotFound </a>
|
||||
</li>
|
||||
<li style="float:right; margin-right: 20px;">
|
||||
<mat-slide-toggle (click)="onClick()"></mat-slide-toggle>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- pour User -->
|
||||
<div *ngIf="pour === 'user'">
|
||||
<ul>
|
||||
<li>
|
||||
<a routerLink="/search" class="StreamNotFound"> StreamNotFound </a>
|
||||
</li>
|
||||
<li class="cliquable">
|
||||
<a routerLink="/search"> Rechercher </a>
|
||||
</li>
|
||||
<li class="cliquable">
|
||||
<a routerLink="/myPlaylists"> Mes playlists </a>
|
||||
</li>
|
||||
<li class="cliquable">
|
||||
<a routerLink="/historique"> Historique </a>
|
||||
</li>
|
||||
<li style="float:right; margin-right: 20px;">
|
||||
<a routerLink="/search">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li style="float:right; margin-right: 20px;">
|
||||
<mat-slide-toggle (click)="onClick()"></mat-slide-toggle>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 3 Roles -->
|
||||
<div *ngIf="pour === '3roles'">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
|
||||
<!-- PolyNotFound -->
|
||||
<a class="navbar-brand" routerLink=""> StreamNotFound </a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- Rien -->
|
||||
<div class="collapse navbar-collapse"></div>
|
||||
|
||||
<!-- Slide -->
|
||||
<mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 50px 0px 10px;"></mat-slide-toggle>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- User -->
|
||||
<div *ngIf="pour === 'user'">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
|
||||
<!-- PolyNotFound -->
|
||||
<a class="navbar-brand" routerLink="/user/search"> StreamNotFound </a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- [Recherche] [Mes Playlists] [Historique] -->
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/user/search"> Rechercher </a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/user/myPlaylists"> Mes playlists </a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/user/history"> Historique </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Slide -->
|
||||
<mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 10px 0px 10px;"></mat-slide-toggle>
|
||||
|
||||
<!-- Mon profil -->
|
||||
<img src="https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
|
||||
onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
|
||||
routerLink="/user/myProfil"
|
||||
alt="">
|
||||
|
||||
<!-- Deconnexion -->
|
||||
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
|
||||
Deconnexion
|
||||
</button>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Advertiser -->
|
||||
<div *ngIf="pour === 'advertiser'">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
|
||||
<!-- PolyNotFound -->
|
||||
<a class="navbar-brand" routerLink="/advertiser/search"> StreamNotFound </a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- [Recherche] [Mes Playlists] [Historique] -->
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/advertiser/addAd"> Ajouter une pub </a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/advertiser/adList"> Liste des pubs </a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/advertiser/history"> Historique des pubs </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Slide -->
|
||||
<mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 10px 0px 10px;"></mat-slide-toggle>
|
||||
|
||||
<!-- Mon profil -->
|
||||
<img src="https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
|
||||
onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
|
||||
routerLink="/advertiser/myProfil"
|
||||
alt="">
|
||||
|
||||
<!-- Deconnexion -->
|
||||
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
|
||||
Deconnexion
|
||||
</button>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Admin -->
|
||||
<div *ngIf="pour === 'admin'">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
|
||||
<!-- PolyNotFound -->
|
||||
<a class="navbar-brand" routerLink="/admin/userList"> StreamNotFound </a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- [Recherche] [Mes Playlists] [Historique] -->
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/admin/userList"> Liste des utillisateurs </a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/admin/addUser"> Ajouter un utilisateur </a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/admin/adList"> Liste des pubs </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Slide -->
|
||||
<mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 10px 0px 10px;"></mat-slide-toggle>
|
||||
|
||||
<!-- Mon profil -->
|
||||
<img src="https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
|
||||
onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
|
||||
routerLink="/admin/myProfil"
|
||||
alt="">
|
||||
|
||||
<!-- Deconnexion -->
|
||||
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
|
||||
Deconnexion
|
||||
</button>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------------------- -->
|
||||
|
|
|
|||
|
|
@ -1,55 +1,66 @@
|
|||
.StreamNotFound {
|
||||
font-style: oblique;
|
||||
font-family: cursive;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
|
||||
mat-icon {
|
||||
margin-top: 2px;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
|
||||
mat-slide-toggle {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
.navbar {
|
||||
background-color: black;
|
||||
height: 70px;
|
||||
color: white;
|
||||
border-bottom: solid 2px white;
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
float: left;
|
||||
height: 75px;
|
||||
font-size: x-large;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
.cliquable a:hover:not(.active) {
|
||||
background-color: #c8c8c8;
|
||||
.navbar-expand-lg {
|
||||
border-bottom: solid;
|
||||
border-color: white;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
// PolyNotFound
|
||||
.navbar-brand {
|
||||
font-family: "Lucida Console";
|
||||
font-weight: bold;
|
||||
font-style: oblique 90deg;
|
||||
font-size: xx-large;
|
||||
margin-left: 30px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
// Recherche, Mes Playlists, Historique
|
||||
.nav-link {
|
||||
color: white;
|
||||
}
|
||||
.nav-link:hover {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
// Bonton deconnexion
|
||||
.btnDeconnexion {
|
||||
font-size: x-large;
|
||||
margin: 0px 10px 0px 10px
|
||||
}
|
||||
.btnDeconnexion:hover {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
.monLi {
|
||||
margin: 0px 10px 0px 10px;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
border: solid 2px white;
|
||||
border-radius: 50px;
|
||||
margin: 0px 10px 0px 15px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
|
||||
::ng-deep .mat-slide-toggle-thumb {
|
||||
|
|
|
|||
|
|
@ -8,12 +8,16 @@ import {ThemeService} from "../../services/theme/theme.service";
|
|||
})
|
||||
export class NavBarComponent
|
||||
{
|
||||
@Input() pour = "3roles";
|
||||
@Input() pour = "3roles";
|
||||
|
||||
constructor(public themeService: ThemeService) { }
|
||||
constructor(public themeService: ThemeService) { }
|
||||
|
||||
onClick(): void {
|
||||
this.themeService.isLightTheme = !this.themeService.isLightTheme
|
||||
}
|
||||
onClick(): void {
|
||||
this.themeService.isLightTheme = !this.themeService.isLightTheme;
|
||||
}
|
||||
|
||||
onDeconnexion(): void {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
9
src/app/utils/interfaces/user.ts
Normal file
9
src/app/utils/interfaces/user.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export interface User
|
||||
{
|
||||
_id: string,
|
||||
login: string
|
||||
hashPass: string
|
||||
mail: string
|
||||
role: any,
|
||||
profilePictureUrl: string
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import {Video} from "../../interfaces/video";
|
|||
import {Playlist} from "../../interfaces/playlist";
|
||||
import {Advert} from "../../interfaces/advert";
|
||||
import {WatchedVideo} from "../../interfaces/watchedVideo";
|
||||
import {User} from "../../interfaces/user";
|
||||
|
||||
|
||||
|
||||
|
|
@ -167,4 +168,18 @@ export class FictitiousDatasService
|
|||
|
||||
return tabWatchedVideo;
|
||||
}
|
||||
|
||||
|
||||
getUser(): User
|
||||
{
|
||||
return {
|
||||
_id: "blablablaId",
|
||||
login: "yoyo",
|
||||
hashPass: "agourgroou",
|
||||
mail: "yoyo@gmail.com",
|
||||
role: "user",
|
||||
profilePictureUrl: "https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue