amélioration du style

This commit is contained in:
MiharyR 2021-11-01 11:59:20 +01:00
parent 7ebacdc287
commit 4336169d2e
72 changed files with 2172 additions and 529 deletions

View file

@ -49,9 +49,9 @@
</td>
</ng-container>
<!-- Supprimer Column -->
<ng-container matColumnDef="effacer">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Effacer </th>
<!-- Action Column -->
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
<td mat-cell *matCellDef="let watchedVideo">
<button mat-icon-button (click)="onDelete(watchedVideo)">
<mat-icon >delete</mat-icon>

View file

@ -1,3 +1,9 @@
.myContainer {
max-width: 100vw;
height: 100vh;
overflow-x: hidden;
}
table {
margin: 0 auto;
}

View file

@ -1,20 +1,20 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PageHistoriqueComponent } from './page-historique.component';
import { PageHistoryUserComponent } from './page-history-user.component';
describe('PageHistoriqueComponent', () => {
let component: PageHistoriqueComponent;
let fixture: ComponentFixture<PageHistoriqueComponent>;
let component: PageHistoryUserComponent;
let fixture: ComponentFixture<PageHistoryUserComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ PageHistoriqueComponent ]
declarations: [ PageHistoryUserComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(PageHistoriqueComponent);
fixture = TestBed.createComponent(PageHistoryUserComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

View file

@ -6,43 +6,43 @@ import {WatchedVideo} from "../../../utils/interfaces/watchedVideo";
import {MatTableDataSource} from "@angular/material/table";
import {MatSort} from "@angular/material/sort";
import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
import {HistoriqueService} from "../../../utils/services/historique/historique.service";
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
@Component({
selector: 'app-page-historique',
templateUrl: './page-historique.component.html',
styleUrls: ['./page-historique.component.scss']
selector: 'app-page-history-user',
templateUrl: './page-history-user.component.html',
styleUrls: ['./page-history-user.component.scss']
})
export class PageHistoriqueComponent implements OnInit
export class PageHistoryUserComponent implements OnInit
{
displayedColumns: string[] = [ 'aperçu', 'titre', 'date', 'source', 'effacer' ];
displayedColumns: string[] = [ 'aperçu', 'titre', 'date', 'source', 'action' ];
dataSource ;
@ViewChild(MatSort) sort: MatSort;
constructor( public themeService: ThemeService,
private messageService: MessageService,
private fictitiousDataService: FictitiousDatasService,
private fictitiousDatasService: FictitiousDatasService,
public videoUrlService: VideoUrlService,
private historiqueService: HistoriqueService ) { }
private userHistoryService: UserHistoryService ) { }
ngOnInit(): void
{
this.historiqueService.clearTabVideoUrlClicked();
this.userHistoryService.clearTabVideoUrlClicked();
// --- FAUX CODE ---
const tabWatchedVideo = this.fictitiousDataService.getTabWatchedVideo(8);
const tabWatchedVideo = this.fictitiousDatasService.getTabWatchedVideo(8);
this.dataSource = new MatTableDataSource(tabWatchedVideo);
this.dataSource.sort = this.sort;
// --- VRAI CODE ---
/*
this.messageService
.sendMessage( "user/get/historique", null )
.sendMessage( "user/get/history", null )
.subscribe( retour => {
if(retour.status === "error") console.log(retour);
@ -99,7 +99,7 @@ export class PageHistoriqueComponent implements OnInit
onIframeClick(watchedVideo: WatchedVideo)
{
console.log("onIframeClick: " + watchedVideo.title);
this.historiqueService.addWatchedVideoToHistorique(watchedVideo);
this.userHistoryService.addWatchedVideoToHistorique(watchedVideo);
}
}

View file

@ -7,7 +7,7 @@ import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlay
import {MessageService} from "../../../utils/services/message/message.service";
import {Playlist} from "../../../utils/interfaces/playlist";
import {MatSnackBar} from "@angular/material/snack-bar";
import {HistoriqueService} from "../../../utils/services/historique/historique.service";
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
@ -27,7 +27,7 @@ export class VideoListComponent
public videoUrlService: VideoUrlService,
private addVideoToPlaylistService: AddVideoToPlaylistsService,
private snackBar: MatSnackBar,
private historiqueService: HistoriqueService ) { }
private historiqueService: UserHistoryService ) { }
onAdd(video: Video): void

View file

@ -1,65 +0,0 @@
<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>

View file

@ -1,64 +0,0 @@
.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;
}

View file

@ -1,25 +0,0 @@
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();
});
});

View file

@ -1,149 +0,0 @@
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;
}
});
}
}

View file

@ -1,9 +0,0 @@
<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>

View file

@ -1,20 +0,0 @@
.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%;
}

View file

@ -1,25 +0,0 @@
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();
});
});

View file

@ -1,28 +0,0 @@
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);
}
}

View file

@ -44,7 +44,7 @@ export class PageSearchComponent implements OnInit
// --- VRAI CODE ---
/*
let tabPlateformName = [];
for(let plateform of this.tabPlateform) tabPlateformName.push(plateform.name);
for(let plateform of this.tabPlateform) tabPlateformName.push(plateform.title);
let data = { search: "", plaateforms: tabPlateformName };
this.messageService
.sendMessage("user/searchVideo", data)
@ -70,7 +70,7 @@ export class PageSearchComponent implements OnInit
let tabPlateformName = [];
for(let plateform of this.tabPlateform)
{
if(plateform.isSelected) tabPlateformName.push(plateform.name);
if(plateform.isSelected) tabPlateformName.push(plateform.title);
}
let data = { "search": this.search, "plateforms": tabPlateformName };
this.messageService

View file

@ -9,7 +9,7 @@ import {Video} from "../../../utils/interfaces/video";
import {ThemeService} from "../../../utils/services/theme/theme.service";
import {WatchedVideo} from "../../../utils/interfaces/watchedVideo";
import {MessageService} from "../../../utils/services/message/message.service";
import {HistoriqueService} from "../../../utils/services/historique/historique.service";
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
@Component({
selector: 'app-video-cell',
@ -26,7 +26,7 @@ export class VideoCellComponent implements OnInit
private addVideoToPlaylistsService: AddVideoToPlaylistsService,
public themeService: ThemeService,
private messageService: MessageService,
private historiqueService: HistoriqueService ) {}
private historiqueService: UserHistoryService ) {}
ngOnInit(): void
{

View file

@ -1,11 +1,6 @@
import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {Component, Input, OnChanges} from '@angular/core';
import {Video} from "../../../utils/interfaces/video";
import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
import {ThemeService} from "../../../utils/services/theme/theme.service";
import {MessageService} from "../../../utils/services/message/message.service";
import {WatchedVideo} from "../../../utils/interfaces/watchedVideo";
import {HistoriqueService} from "../../../utils/services/historique/historique.service";
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
@Component({
@ -19,7 +14,7 @@ export class VideoGridComponent implements OnChanges
tabTriplet = [];
constructor(private historiqueService: HistoriqueService) {}
constructor(private historiqueService: UserHistoryService) {}
ngOnChanges(): void