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
|
|
@ -5,15 +5,28 @@ import {PageRegisterComponent} from './pourLes3Roles/register/page-register/page
|
|||
import {PageSearchComponent} from "./user/search/page-search/page-search.component";
|
||||
import {PageMyPlaylistsComponent} from "./user/myPlaylists/page-my-playlists/page-my-playlists.component";
|
||||
import {PageHistoriqueComponent} from "./user/historique/page-historique/page-historique.component";
|
||||
import {PageMyProfilComponent} from "./user/myProfil/page-my-profil/page-my-profil.component";
|
||||
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: PageConnexionComponent },
|
||||
{ path: 'connexion', component: PageConnexionComponent },
|
||||
{ path: 'register', component: PageRegisterComponent },
|
||||
{ path: 'search', component: PageSearchComponent },
|
||||
{ path: 'myPlaylists', component: PageMyPlaylistsComponent },
|
||||
{ path: 'historique', component: PageHistoriqueComponent }
|
||||
|
||||
{ path: 'user/search', component: PageSearchComponent },
|
||||
{ path: 'user/myPlaylists', component: PageMyPlaylistsComponent },
|
||||
{ path: 'user/history', component: PageHistoriqueComponent },
|
||||
{ path: 'user/myProfil', component: PageMyProfilComponent },
|
||||
|
||||
{ path: 'advertiser/addAd', component: PageConnexionComponent },
|
||||
{ path: 'advertiser/adList', component: PageConnexionComponent },
|
||||
{ path: 'advertiser/history', component: PageConnexionComponent },
|
||||
{ path: 'advertiser/myProfil', component: PageConnexionComponent },
|
||||
|
||||
{ path: 'admin/userList', component: PageConnexionComponent },
|
||||
{ path: 'admin/addUser', component: PageConnexionComponent },
|
||||
{ path: 'admin/adList', component: PageConnexionComponent },
|
||||
{ path: 'admin/myProfil', component: PageConnexionComponent }
|
||||
];
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,9 @@ import {VideoListComponent} from "./user/myPlaylists/video-list/video-list.compo
|
|||
import { PopupCreatePlaylistComponent } from './utils/components/popup-create-playlist/popup-create-playlist.component';
|
||||
import { PageHistoriqueComponent } from './user/historique/page-historique/page-historique.component';
|
||||
import {MatTableModule} from '@angular/material/table';
|
||||
import { PageMyProfilComponent } from './user/myProfil/page-my-profil/page-my-profil.component';
|
||||
import { PopupPictureProfilUrlComponent } from './user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -53,6 +56,8 @@ import {MatTableModule} from '@angular/material/table';
|
|||
VideoListComponent,
|
||||
PopupCreatePlaylistComponent,
|
||||
PageHistoriqueComponent,
|
||||
PageMyProfilComponent,
|
||||
PopupPictureProfilUrlComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
@ -70,7 +75,8 @@ import {MatTableModule} from '@angular/material/table';
|
|||
MatFormFieldModule,
|
||||
MatSnackBarModule,
|
||||
MatGridListModule,
|
||||
MatTableModule
|
||||
MatTableModule,
|
||||
NgbModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
<app-nav-bar pour="user"></app-nav-bar><br><br>
|
||||
|
||||
<div class="boite">
|
||||
|
||||
<h1> Mon profil </h1>
|
||||
|
||||
<!-- Photo de profil -->
|
||||
<div style="text-align: center">
|
||||
<img [src]="model.profilePictureUrl"
|
||||
onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
|
||||
routerLink="/advertiser/myProfil"
|
||||
alt="???">
|
||||
<br>
|
||||
<button (click)="onChangePP()"> Changer photo de profil</button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- Pseudo | Email | Role | Modifier mot de passe -->
|
||||
<form>
|
||||
<p>
|
||||
<label for="pseudo"> Pseudo: </label>
|
||||
<input id="pseudo" name="pseudo" type="text" [(ngModel)]="model.login">
|
||||
</p>
|
||||
<p>
|
||||
<label for="email"> Email: </label>
|
||||
<input id="email" name="email" type="email" [(ngModel)]="model.mail">
|
||||
</p>
|
||||
<p>
|
||||
<label for="role">Role: </label>
|
||||
<select id="role" name="role" [(ngModel)]="model.role">
|
||||
<option value="user"> Utilisateur </option>
|
||||
<option value="advertiser"> Annonceur </option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="demande"> Modifier mot de passe: </label>
|
||||
<input type="checkbox" id="demande" name="demande" [(ngModel)]="changePassword">
|
||||
</p>
|
||||
<p *ngIf="changePassword">
|
||||
<label for="newPassword"> Nouveau mot de passe: </label>
|
||||
<input type="password" id="newPassword" name="newPassword" [(ngModel)]="model.newPassword">
|
||||
</p>
|
||||
<p *ngIf="changePassword">
|
||||
<label for="confirmNewPassword"> Confirmation nouveau mot de passe: </label>
|
||||
<input type="password" id="confirmNewPassword" name="confirmNewPassword" [(ngModel)]="confirmNewPassword">
|
||||
</p>
|
||||
</form>
|
||||
<br>
|
||||
|
||||
<!-- Bouton valider -->
|
||||
<div style="width: 100%; text-align: center">
|
||||
<button (click)="onEnregistrer()"> Enregistrer </button>
|
||||
</div>
|
||||
|
||||
<!-- Message d'erreur -->
|
||||
<div *ngIf="hasError" style="text-align: center; margin-top: 10px;">
|
||||
<span class="mat-error"> {{errorMessage}} </span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.boite {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 40%;
|
||||
margin-top: 50vh;
|
||||
transform: translateY(-100%);
|
||||
border: solid 3px;
|
||||
border-radius: 10px;
|
||||
padding: 20px 40px 20px 40px;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
.lightTheme .boite {
|
||||
border-color: black;
|
||||
}
|
||||
.darkTheme .boite {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0px 0px 10px 0px;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border: solid 2px white;
|
||||
border-radius: 50%;
|
||||
font-size: xxx-large;
|
||||
}
|
||||
|
||||
form {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
p {
|
||||
display: table-row;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
margin: 0px;
|
||||
padding: 10px 5px 10px 0px;
|
||||
}
|
||||
|
||||
input {
|
||||
display: table-cell;
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PageMyProfilComponent } from './page-my-profil.component';
|
||||
|
||||
describe('PageMyProfilComponent', () => {
|
||||
let component: PageMyProfilComponent;
|
||||
let fixture: ComponentFixture<PageMyProfilComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PageMyProfilComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PageMyProfilComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
149
src/app/user/myProfil/page-my-profil/page-my-profil.component.ts
Normal file
149
src/app/user/myProfil/page-my-profil/page-my-profil.component.ts
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {PopupAddVideoToPlaylistsComponent} from "../../../utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component";
|
||||
import {PopupPictureProfilUrlComponent} from "../popup-picture-profil-url/popup-picture-profil-url.component";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-my-profil',
|
||||
templateUrl: './page-my-profil.component.html',
|
||||
styleUrls: ['./page-my-profil.component.scss']
|
||||
})
|
||||
export class PageMyProfilComponent implements OnInit
|
||||
{
|
||||
model = {
|
||||
_id: "",
|
||||
profilePictureUrl: "",
|
||||
login: "",
|
||||
mail: "",
|
||||
role: "",
|
||||
newPassword: ""
|
||||
};
|
||||
confirmNewPassword: string = "" ;
|
||||
changePassword: boolean = false ;
|
||||
hasError: boolean = false;
|
||||
errorMessage: string = ""
|
||||
|
||||
|
||||
constructor( private messageService: MessageService,
|
||||
public themeService: ThemeService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
public dialog: MatDialog,
|
||||
private snackBar: MatSnackBar ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
const profil = this.fictitiousDatasService.getUser();
|
||||
this.model._id = profil._id;
|
||||
this.model.profilePictureUrl = profil.profilePictureUrl;
|
||||
this.model.login = profil.login;
|
||||
this.model.mail = profil.mail;
|
||||
this.model.role = profil.role;
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage("user/get/profil", null)
|
||||
.subscribe( retour => {
|
||||
|
||||
if(retour.status === "error") console.log(retour);
|
||||
else {
|
||||
const profil = retour.data.profil;
|
||||
this.model._id = profil._id;
|
||||
this.model.profilePictureUrl = profil.profilePictureUrl;
|
||||
this.model.pseudo = profil.pseudo;
|
||||
this.model.email = profil.email;
|
||||
this.model.role = profil.role;
|
||||
this.model.newPassword = profil.newPassword;
|
||||
}
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
onEnregistrer()
|
||||
{
|
||||
console.log(this.model);
|
||||
this.checkField();
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
if(!this.hasError)
|
||||
{
|
||||
this.messageService
|
||||
.sendMessage("user/set/profil", this.model)
|
||||
.subscribe( retour => {} );
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
checkField()
|
||||
{
|
||||
if(this.model.login.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'pseudo'"
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.model.mail.length === 0)
|
||||
{
|
||||
this.errorMessage = "Veuillez remplir le champ 'email'"
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(!this.isValidEmail(this.model.mail))
|
||||
{
|
||||
this.errorMessage = "Email invalide"
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.changePassword)
|
||||
{
|
||||
if (this.model.newPassword.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'mot de passe'"
|
||||
this.hasError = true;
|
||||
} else if (this.model.newPassword !== this.confirmNewPassword) {
|
||||
this.errorMessage = "Le mot de passe est différent de sa confirmation"
|
||||
this.hasError = true;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.errorMessage = "" ;
|
||||
this.hasError = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
isValidEmail(email)
|
||||
{
|
||||
let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return re.test(email);
|
||||
}
|
||||
|
||||
|
||||
onChangePP()
|
||||
{
|
||||
const config = {
|
||||
width: '25%',
|
||||
data: { profilePictureUrl: this.model.profilePictureUrl }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupPictureProfilUrlComponent, config )
|
||||
.afterClosed()
|
||||
.subscribe(retour => {
|
||||
|
||||
if((retour === null) || (retour === undefined)) {
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
this.snackBar.open( "Opération annulé", "", config);
|
||||
}
|
||||
else {
|
||||
this.model.profilePictureUrl = retour;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<div class="myContainer">
|
||||
<img [src]="profilePictureUrl"
|
||||
onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
|
||||
routerLink="/advertiser/myProfil"
|
||||
alt="???">
|
||||
<br>
|
||||
<input [(ngModel)]="profilePictureUrl" placeholder="url de l'image"><br>
|
||||
<button mat-button (click)="onValider()"> Valider </button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.myContainer {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0px 0px 10px 0px;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
border: solid 2px white;
|
||||
border-radius: 50%;
|
||||
font-size: xxx-large;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0px;
|
||||
margin: 0px 0px 10px 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupPictureProfilUrlComponent } from './popup-picture-profil-url.component';
|
||||
|
||||
describe('PopupPictureProfilUrlComponent', () => {
|
||||
let component: PopupPictureProfilUrlComponent;
|
||||
let fixture: ComponentFixture<PopupPictureProfilUrlComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupPictureProfilUrlComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupPictureProfilUrlComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-picture-profil-url',
|
||||
templateUrl: './popup-picture-profil-url.component.html',
|
||||
styleUrls: ['./popup-picture-profil-url.component.scss']
|
||||
})
|
||||
export class PopupPictureProfilUrlComponent implements OnInit
|
||||
{
|
||||
profilePictureUrl: string = "" ;
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupPictureProfilUrlComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data ) { }
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.profilePictureUrl = this.data.profilePictureUrl;
|
||||
}
|
||||
|
||||
onValider()
|
||||
{
|
||||
this.dialogRef.close(this.profilePictureUrl);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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