yvachot/PolyNotFound
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

correction pages: register, myProfil-user, search, myPlaylists

Browse source
This commit is contained in:
MiharyR 2021-11-14 03:39:24 +01:00
parent 91171a3765
commit a8cbd4efb7
27 changed files with 278 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/admin/userList/page-user-list/page-user-list.component.html
View file

@ -8,7 +8,7 @@
<!-- Filtre -->
<div style="text-align: center">
<input (keyup)="applyFilter($event)" placeholder="Filtre: saisir la valeur d'une colonne">
<input (keyup)="applyFilter($event)" placeholder="Filtre...">
</div>

4
src/app/admin/userList/popup-create-user/popup-create-user.component.ts
View file

@ -72,6 +72,10 @@ export class PopupCreateUserComponent implements OnInit
this.errorMessage = "Veuillez remplir le champ 'email'.";
this.hasError = true;
}
if((this.user.role.name === 'user') && ((this.user.dateOfBirth === undefined) || (this.user.dateOfBirth === null))) {
this.errorMessage = "Veuillez remplir le champ 'date de naissance'.";
this.hasError = true;
}
else if(!this.isValidEmail(this.user.mail)) {
this.errorMessage = "Email invalide";
this.hasError = true;

9
src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html
View file

@ -1,20 +1,19 @@
<nav class="navbar navbar-expand-lg">
<!-- PolyNotFound -->
<a class="navbar-brand" routerLink="/advertiser/manageAds"> StreamNotFound </a>
<a class="navbar-brand" routerLink="/advertiser/adList"> 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>
<!-- Vide -->
<!-- [Recherche] [Mes Playlists] [Historique] -->
<!-- [adList] [viewsAd]-->
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active monLi">
<a class="nav-link" routerLink="/advertiser/manageAds"> Gestion des annonces </a>
<a class="nav-link" routerLink="/advertiser/adList"> Gestion des annonces </a>
</li>
<li class="nav-item active monLi">
<a class="nav-link" routerLink="/advertiser/manageAds"> Popularité des annonces </a>
<a class="nav-link" routerLink="/advertiser/adList"> Popularité des annonces </a>
</li>
</ul>
</div>

2
src/app/app.module.ts
View file

@ -14,7 +14,6 @@ import { PopupConfirmationComponent } from './beforeConnexion/register/popup-con
import {MatDialogModule} from '@angular/material/dialog';
import {MatButtonModule} from "@angular/material/button";
import { AdvertComponent } from './utils/components/advert/advert.component';
import { VideoCellComponent } from './user/search/video-cell/video-cell.component';
import { VideoGridComponent } from './user/search/video-grid/video-grid.component';
import {MatIconModule} from "@angular/material/icon";
import { PopupAddVideoToPlaylistsComponent } from './utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component';
@ -79,7 +78,6 @@ import { InputInterestsAdminComponent } from './admin/userList/input-interests-a
PageSearchComponent,
PopupConfirmationComponent,
AdvertComponent,
VideoCellComponent,
VideoGridComponent,
PopupAddVideoToPlaylistsComponent,
IframeTrackerDirective,

99
src/app/beforeConnexion/register/page-register/page-register.component.html
View file

@ -8,48 +8,43 @@
<mat-stepper [linear]=true>
<!-- Choix du role -->
<mat-step>
<ng-template matStepLabel>Type de compte</ng-template>
<mat-step label="Type de compte">
<form style="margin-top: 10px">
<mat-radio-group [(ngModel)]="roleName">
<!-- Choix du rôle -->
<mat-radio-group [(ngModel)]="user.role.name">
<mat-radio-button value="user">Utilisateur standard</mat-radio-button>&nbsp; &nbsp;
<mat-radio-button value="advertiser">Annonceur</mat-radio-button>
</mat-radio-group>
<!-- Bouton suivant -->
<div style="text-align: right;">
<button mat-button matStepperNext>Suivant</button>
</div>
</form>
</mat-step>
<!-- Infos personelles -->
<mat-step>
<ng-template matStepLabel>Compte & Informations personelles</ng-template>
<mat-step label="Compte & Informations personelles">
<form style="margin-top: 10px">
<ng-template *ngIf="roleName==='user'; then userBlock else advertiserBlock"></ng-template>
<!-- Redirection vers le bon bloc -->
<ng-template *ngIf="user.role.name==='user'; then userBlock else advertiserBlock"></ng-template>
<!-- Message d'erreur -->
<div *ngIf="hasError">
<mat-error>{{errorMessage}}</mat-error>
</div>
<!-- Boutons-->
<div style="text-align: right;">
<button mat-button matStepperPrevious>Précédent</button>
<button mat-button matStepperNext (click)="checkField()">Suivant</button>
<button mat-button (click)="onEnregistrer()">Enregistrer</button>
</div>
</form>
</mat-step>
<!-- Derniere étape -->
<mat-step>
<!-- label -->
<ng-template matStepLabel>
<span (click)="checkField()">Dernière étape</span>
</ng-template>
<!-- texte affiché -->
<ng-template *ngIf="!hasError ; then derniereEtapeCorrecte else derniereEtapeErronee"></ng-template>
<!-- boutons -->
<div style="text-align: right;">
<button mat-button matStepperPrevious>Précédent</button>
<button *ngIf="hasError" mat-button (click)="onValider()" disabled>Valider</button>
<button *ngIf="!hasError" mat-button (click)="onValider()">Valider</button>
</div>
</mat-step>
</mat-stepper>
</div>
</div>
@ -157,61 +152,3 @@
</mat-form-field>
</ng-template>
<!-- -------------------------------------------------------------------------------------------------------- -->
<!-- Dernière étape correcte -->
<ng-template #derniereEtapeCorrecte>
<!-- pour advertiser -->
<div *ngIf="roleName === 'advertiser'">
Cliquer sur valider pour soumettre l'inscription.
</div>
<!-- pour user -->
<div *ngIf="roleName === 'user'">
<br>
<!-- login -->
<div class="row myRow">
<div class="col-2 myLabel">Login:</div>
<div class="col-10 myValue"> {{user.login}} </div>
</div>
<!-- mail -->
<div class="row myRow">
<div class="col-2 myLabel">Mail:</div>
<div class="col-10 myValue"> {{user.mail}} </div>
</div>
<!-- dateOfBirth -->
<div class="row myRow">
<div class="col-2 myLabel">Date de naissance:</div>
<div class="col-10 myValue">{{ user.dateOfBirth | date:'dd/LL/YYYY' }}</div>
</div>
<!-- gender -->
<div class="row myRow">
<div class="col-2 myLabel">Sexe:</div>
<div class="col-10 myValue">
<span *ngIf="user.gender==='man'"> Homme </span>
<span *ngIf="user.gender==='woman'"> Femme </span>
</div>
</div>
<!-- interets -->
<div class="row myRow">
<div class="col-2 myLabel">Centres d'intérêt:</div>
<div class="col-10 myValue" style="border-left: solid 1px #e6e6e6">
<div *ngFor="let interest of user.interests">• {{interest}}</div>
</div>
</div>
</div>
</ng-template>
<!-- -------------------------------------------------------------------------------------------------------- -->
<!-- Dernière étape érronée -->
<ng-template #derniereEtapeErronee>
<mat-error>{{errorMessage}}</mat-error>
</ng-template>

28
src/app/beforeConnexion/register/page-register/page-register.component.ts
View file

@ -9,13 +9,12 @@ import {User} from "../../../utils/interfaces/user";
@Component({
selector: 'app-page-register',
templateUrl: './page-register.component.html',
styleUrls: ['./page-register.component.scss']
selector: 'app-page-register',
templateUrl: './page-register.component.html',
styleUrls: ['./page-register.component.scss']
})
export class PageRegisterComponent
{
roleName: string = "user";
password: string = "";
confirmPassword: string = "";
hasError: boolean = false;
@ -30,14 +29,14 @@ export class PageRegisterComponent
permission: 0,
},
profilePictureUrl: "",
dateOfBirth: new Date(),
dateOfBirth: null,
gender: "man",
interests: [],
isActive: false,
isAccepted: false,
createdAt: new Date(),
updatedAt: new Date(),
lastConnexion: new Date()
lastConnexion: null
};
@ -48,13 +47,13 @@ export class PageRegisterComponent
// Envoie de l'utilisateur au backend
onValider(): void
onEnregistrer(): void
{
this.checkField();
if(!this.hasError)
{
if(this.roleName === "advertiser") this.user.role = { name: "advertiser", permission: 5 };
else this.user.role = { name: "user", permission: 0 };
if(this.user.role.name === "user") this.user.role.permission = 0;
else this.user.role.permission = 5;
this.user.hashPass = this.hashage(this.password);
// FAUX CODE
@ -80,7 +79,10 @@ export class PageRegisterComponent
}
else
{
const config = { width: '25%', data: { roleName: this.roleName} };
const config = {
width: '25%',
data: {roleName: this.user.role.name}
};
this.dialog
.open(PopupConfirmationComponent, config)
.afterClosed()
@ -101,7 +103,7 @@ export class PageRegisterComponent
this.hasError = true;
}
else if(!this.isValidEmail(this.user.mail)) {
this.errorMessage = "Email invalide";
this.errorMessage = "Email invalide.";
this.hasError = true;
}
else if(this.password.length === 0) {
@ -112,6 +114,10 @@ export class PageRegisterComponent
this.errorMessage = "Le mot de passe est différent de sa confirmation.";
this.hasError = true;
}
if((this.user.role.name === 'user') && ((this.user.dateOfBirth === undefined) || (this.user.dateOfBirth === null))) {
this.errorMessage = "Veuillez remplir le champ 'date de naissance'.";
this.hasError = true;
}
else {
this.errorMessage = "" ;
this.hasError = false;

7
src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.scss
View file

@ -0,0 +1,7 @@
p {
font-size: small;
}
div {
font-size: small;
}

11
src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.html
View file

@ -2,9 +2,10 @@
<div class="myContainer">
<!-- Navbar -->
<div style="margin-bottom: 50px">
<div>
<app-navbar-user></app-navbar-user>
</div>
<br>
<!-- --------------------------------------------------------------------- -->
@ -13,16 +14,12 @@
<!-- liste des videos -->
<mat-grid-tile colspan="4" rowspan="1" class="celluleListeVideo">
<div class="videoListContainer">
<app-video-list [playlist]="playlist"></app-video-list>
</div>
<app-video-list [playlist]="playlist"></app-video-list>
</mat-grid-tile>
<!-- liste des playlist -->
<mat-grid-tile colspan="4" rowspan="1" class="celluleListePlaylist">
<div class="playlistListContainer">
<app-playlist-list [allPlaylists]="allPlaylists" (eventEmitter)="transmitToVideoList($event)"></app-playlist-list>
</div>
<app-playlist-list [allPlaylists]="allPlaylists" (eventEmitter)="transmitToVideoList($event)"></app-playlist-list>
</mat-grid-tile>
<!-- pub -->

9
src/app/user/myPlaylists/page-my-playlists/page-my-playlists.component.scss
View file

@ -14,16 +14,13 @@
// Liste des vidéos -------------------------------------------------
.celluleListeVideo {
margin: 0px;
margin: 0px 0px 0px 0px;
}
// Liste des playlists ---------------------------------------------
.celluleListePlaylist {
margin: 0px;
}
.playlistListContainer {
margin: 0px 0px 0px 0px;
}
// Pub -------------------------------------------------------------
@ -36,7 +33,7 @@
}
.conteneurPub {
height: 85vh;
//height: 85vh;
text-align: center;
justify-content: center;
vertical-align: middle;

15
src/app/user/myPlaylists/playlist-list/playlist-list.component.html
View file

@ -2,12 +2,9 @@
<div class="myContainer">
<!-- Search bar -->
<div class="row" style="margin: 0px">
<div class="searchBarContainer">
<input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search" (ngModelChange)="whileSearch()"> &nbsp;
<!--
<button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
-->
<div class="row searchBarContainer">
<div style="text-align: center">
<input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search" (ngModelChange)="whileSearch()">
</div>
</div>
@ -26,10 +23,8 @@
<!-- Bouton creer playlist-->
<div class="row" style="margin: 0px">
<div class="btnCreerPlaylistContainer">
<button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Creer playlist </button>
</div>
<div class="row btnCreerPlaylistContainer" >
<button mat-button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Creer playlist </button>
</div>
</div>

34
src/app/user/myPlaylists/playlist-list/playlist-list.component.scss
View file

@ -2,8 +2,7 @@
background-color: white ;
text-align: center;
width: 35vw;
height: 79vh;
margin: 3vh 0vh 3vh 0vh;
margin: 1vh 0vh 3vh 0vh;
padding: 0px;
border: solid 2px black;
}
@ -11,14 +10,16 @@
// SearchBar -----------------------------------------------------------
.searchBarContainer {
text-align: center;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
background-color: #dcdcdc;
border-bottom: solid 2px black;
height: 5vh;
padding: 15px;
font-size: large;
border-bottom: solid 1px black;
}
.inputSearchBar {
width: 50%;
width: 70%;
}
.btnRechercher {
border: solid black 1px;
@ -29,7 +30,7 @@
.playlistListContainer {
max-width: 100%;
height: 70vh;
height: 60vh;
overflow-y: scroll;
padding: 0px;
}
@ -42,7 +43,7 @@
.btnPlaylist {
background-color: white;
padding: 20px;
border-bottom: solid 2px black;
border-bottom: solid 1px black;
width: 100%;
}
.btnPlaylist:hover {
@ -57,19 +58,12 @@
// Bouton creer playlist -------------------------------------------------
.btnCreerPlaylistContainer {
height: 4vh;
margin: 0px;
padding: 0px;
margin: 0px 0px 0px 0px;
background-color: #dcdcdc;
font-size: large;
border-top: solid 1px black;
}
.btnCreerPlaylist {
background-color: #dcdcdc;
border-top: solid 2px black;
border-bottom: solid 2px black;
height: 100%;
width: 100%;
padding: 10px;
}
.btnCreerPlaylist:hover {
background-color: #969696;
margin: 0px 0px 0px 0px;
}

3
src/app/user/myPlaylists/playlist-list/playlist-list.component.ts
View file

@ -3,7 +3,6 @@ import {ThemeService} from "../../../utils/services/theme/theme.service";
import {Playlist} from "../../../utils/interfaces/playlist";
import {MessageService} from "../../../utils/services/message/message.service";
import {MatDialog} from "@angular/material/dialog";
import {PopupAddVideoToPlaylistsComponent} from "../../../utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component";
import {MatSnackBar} from "@angular/material/snack-bar";
import {PopupCreatePlaylistComponent} from "../../../utils/components/popup-create-playlist/popup-create-playlist.component";
@ -46,7 +45,7 @@ export class PlaylistListComponent implements OnInit
onCreatePlaylist(): void
{
const config = { width: '15%', data: this.tabPlaylist };
const config = { width: '30%', data: this.tabPlaylist };
this.dialog
.open(PopupCreatePlaylistComponent, config )
.afterClosed()

8
src/app/user/myPlaylists/video-list/video-list.component.html
View file

@ -2,8 +2,7 @@
<div class="myContainer">
<!-- Bordure haute -->
<div class="row" style="margin: 0px; padding: 0px">
<div class="topBorder">
<div class="row topBorder">
<!-- Playlist existe ? -->
<div *ngIf="(playlist !== null) && (playlist !== undefined); then ok1 else nope1"></div>
@ -18,7 +17,6 @@
<span class="spanPlayListTitle"> Aucune playlist selectionnée </span>
</ng-template>
</div>
</div>
@ -66,8 +64,8 @@
<!-- Bordure basse -->
<div class="row" style="margin: 0px; padding: 0px">
<div class="bottomBorder"></div>
<div class="row bottomBorder">
<div style="visibility: hidden">a</div>
</div>
</div>

23
src/app/user/myPlaylists/video-list/video-list.component.scss
View file

@ -2,51 +2,46 @@
background-color: white ;
text-align: center;
width: 35vw;
height: 79vh;
margin: 3vh 0vh 3vh 0vh;
margin: 1vh 0vh 3vh 0vh;
padding: 0px;
border: solid 1px black;
border: solid 2px black;
}
// TopBorder --------------------------------------------------------
.topBorder {
height: 4vh;
margin: 0px 0px 0px 0px;
background-color: #dcdcdc;
text-align: left;
padding: 7px;
display: inline-block;
padding: 5px 0px 5px 5px;
border-bottom: solid 1px black;
}
.spanPlayListTitle {
height: 100%;
padding: 0px;
font-size: x-large;
font-size: large;
font-weight: bold;
}
// Liste des videos ------------------------------------------------
.listVideoContainer {
height: 73vh;
height: 65vh;
background-color: white;
padding: 0px;
overflow-y: scroll;
}
.videoContainer {
border-bottom: solid 2px black;
border-bottom: solid 1px black;
padding: 25px;
}
// BottomBorder --------------------------------------------------------
.bottomBorder {
height: 2vh;
margin: 0px 0px 0px 0px;
background-color: #dcdcdc;
border-top: solid 1px black;
border-bottom: solid 1px black;
font-size: large;
}

110
src/app/user/myProfil/page-profil-user/page-profil-user.component.html
View file

@ -9,49 +9,13 @@
<!-- Photo de profil -->
<div style="text-align: center">
<img [src]="user.profilePictureUrl"
onerror="this.onerror=null; this.src='assets/profil.png'">
<img [src]="user.profilePictureUrl" onerror="this.onerror=null; this.src='assets/profil.png'">
</div>
<!-- login -->
<div class="row myRow">
<div class="col-6 myLabel">Login:</div>
<div class="col-6 myValue"> {{user.login}} </div>
</div>
<!-- mail -->
<div class="row myRow">
<div class="col-6 myLabel">Mail:</div>
<div class="col-6 myValue"> {{user.mail}} </div>
</div>
<!-- dateOfBirth -->
<div class="row myRow">
<div class="col-6 myLabel">Date de naissance:</div>
<div class="col-6 myValue">{{ user.dateOfBirth | date:'dd/LL/YYYY' }}</div>
</div>
<!-- gender -->
<div class="row myRow">
<div class="col-6 myLabel">Sexe:</div>
<div class="col-6 myValue">
<span *ngIf="user.gender==='man'"> Homme </span>
<span *ngIf="user.gender==='woman'"> Femme </span>
</div>
</div>
<!-- interets -->
<div class="row myRow">
<div class="col-6 myLabel">Centres d'intérêt:</div>
<div class="col-6 myValue" style="border-left: solid 1px #e6e6e6">
<div *ngFor="let interest of user.interests">• {{interest}}</div>
</div>
</div>
<!-- createdAt -->
<div class="row myRow">
<div class="col-6 myLabel">Date de création:</div>
<div class="col-6 myValue">{{ user.createdAt | date:'dd/LL/YYYY' }}</div>
<!-- Col gauche & droite -->
<div class="row">
<ng-template *ngIf="true; then leftCol"></ng-template>
<ng-template *ngIf="true; then rightCol"></ng-template>
</div>
<!-- Modifier profil -->
@ -61,6 +25,68 @@
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------------------------- -->
<ng-template #leftCol>
<div class="col-6">
<!-- login -->
<div class="row myRow">
<div class="col-8 myLabel">Login:</div>
<div class="col-4 myValue"> {{user.login}} </div>
</div>
<!-- mail -->
<div class="row myRow">
<div class="col-8 myLabel">Mail:</div>
<div class="col-4 myValue"> {{user.mail}} </div>
</div>
<!-- gender -->
<div class="row myRow">
<div class="col-8 myLabel">Sexe:</div>
<div class="col-4 myValue">
<span *ngIf="user.gender==='man'"> Homme </span>
<span *ngIf="user.gender==='woman'"> Femme </span>
</div>
</div>
<!-- createdAt -->
<div class="row myRow">
<div class="col-8 myLabel">Date de création:</div>
<div class="col-4 myValue">{{ user.createdAt | date:'dd/LL/YYYY' }}</div>
</div>
</div>
</ng-template>
<!-- --------------------------------------------------------------------------------------------------------------- -->
<ng-template #rightCol>
<div class="col-6" style="border-left: solid 1px #e6e6e6">
<!-- dateOfBirth -->
<div class="row myRow">
<div class="col-4 myLabel">Date de naissance:</div>
<div class="col-8 myValue">{{ user.dateOfBirth | date:'dd/LL/YYYY' }}</div>
</div>
<!-- interets -->
<div class="row myRow">
<div class="col-4 myLabel">Centres d'intérêt:</div>
<div class="col-8 myValue">
<div class="interestsContainer">
<div *ngFor="let interest of user.interests" class="interest"> {{interest}} </div>
</div>
</div>
</div>
</div>
</ng-template>

21
src/app/user/myProfil/page-profil-user/page-profil-user.component.scss
View file

@ -8,7 +8,7 @@
.boite {
margin-left: auto;
margin-right: auto;
width: 25%;
width: 70%;
margin-top: 10vh;
border: solid 3px;
border-radius: 10px;
@ -24,6 +24,7 @@
border-color: white;
}
// --------------------------------------------------------------------------------------------
img {
margin: 0px 0px 10px 0px;
@ -34,6 +35,7 @@ img {
font-size: xxx-large;
}
// --------------------------------------------------------------------------------------------
.myRow {
margin: 15px 0px 15px 0px;
@ -50,6 +52,21 @@ img {
margin: 0px;
}
// --------------------------------------------------------------------------------------------
.interestsContainer {
width: 70%;
height: 15vh;
overflow-y: scroll;
border: 1px solid black;
}
.interest {
border-bottom: 1px solid #dcdcdc;
padding: 5px 5px 5px 5px;
}
// --------------------------------------------------------------------------------------------
.btnContainer {
text-align: center;
@ -59,3 +76,5 @@ img {
border: solid 1px black;
background-color: white;
}

4
src/app/user/myProfil/popup-update-user/popup-update-user.component.ts
View file

@ -78,6 +78,10 @@ export class PopupUpdateUserComponent implements OnInit
this.errorMessage = "Email invalide" ;
this.hasError = true;
}
else if((this.userCopy.dateOfBirth === undefined) || (this.userCopy.dateOfBirth === null)) {
this.errorMessage = "Veuillez remplir le champ 'date de naissance'.";
this.hasError = true;
}
else if(this.changePassword) {
if (this.newPassword.length === 0) {
this.errorMessage = "Veuillez remplir le champ 'mot de passe'" ;

6
src/app/user/search/page-search/page-search.component.html
View file

@ -2,7 +2,7 @@
<div class="myContainer">
<!-- Navbar -->
<div style="margin-bottom: 50px">
<div style="margin-bottom: 30px">
<app-navbar-user></app-navbar-user>
</div>
@ -13,7 +13,7 @@
<!-- [Search bar] + [Site de streaming] -->
<div class="row">
<div class="col-2"></div>
<div class="col-8" style="margin-bottom: 20px">
<div class="col-8" style="margin-bottom: 10px">
<!-- Search bar -->
<div class="row" style="margin-bottom: 10px">
@ -44,7 +44,6 @@
<!-- --------------------------------------------------------------------- -->
<!-- [pub gauche] + [Grilles des videos] + [pub droite] -->
<mat-grid-list cols="11" rowHeight="75vh">
@ -70,6 +69,7 @@
</mat-grid-tile>
</mat-grid-list>
<br><br>
</div>
</div>

7
src/app/user/search/page-search/page-search.component.scss
View file

@ -11,22 +11,23 @@
max-width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
.inputSearchBar {
width: 50%;
font-size: x-large;
font-size: large;
}
.btnRechercher {
border: solid black 1px;
border-radius: 5px;
font-size: x-large;
font-size: large;
}
.celluleGrilleVideo {
border: solid 4px;
border: solid 2px;
border-radius: 5px;
width: 100%;
}

3
src/app/user/search/page-search/page-search.component.ts
View file

@ -1,7 +1,6 @@
import { Component, OnInit } from '@angular/core';
import {MessageService} from "../../../utils/services/message/message.service";
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
import {Video} from "../../../utils/interfaces/video";
import {Advert} from "../../../utils/interfaces/advert";
import {ThemeService} from "../../../utils/services/theme/theme.service";
@ -37,7 +36,7 @@ export class PageSearchComponent implements OnInit
ngOnInit(): void
{
// --- FAUX CODE ---
this.tabVideo = this.fictitiousDatasService.getTabVideo(5);
this.tabVideo = this.fictitiousDatasService.getTabVideo(11);
this.ad1 = this.fictitiousDatasService.getAdvert();
this.ad2 = this.fictitiousDatasService.getAdvert();

11
src/app/user/search/video-cell/video-cell.component.html
View file

@ -1,11 +0,0 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div [class]="themeService.getClassTheme()">
<div class="conteneur">
<iframe appIframeTracker [src]=safeUrl allowfullscreen (iframeClick)="onIframeClick()"></iframe><br/>
<span>{{video.title}}</span>
<button mat-icon-button (click)="onAdd()">
<mat-icon > add_circle </mat-icon>
</button>
</div>
</div>

18
src/app/user/search/video-cell/video-cell.component.scss
View file

@ -1,18 +0,0 @@
.conteneur {
text-align: center;
border: solid 2px;
border-radius: 5px;
padding-top: 15px;
}
.lightTheme .conteneur {
background-color: #ffffff;
border-color: black;
font-color: black;
}
.darkTheme .conteneur {
background-color: #c8c8c8;
border-color: #ffffff;
font-color: white;
}

25
src/app/user/search/video-cell/video-cell.component.spec.ts
View file

@ -1,25 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { VideoCellComponent } from './video-cell.component';
describe('RectangleVideoComponent', () => {
let component: VideoCellComponent;
let fixture: ComponentFixture<VideoCellComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ VideoCellComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(VideoCellComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

44
src/app/user/search/video-cell/video-cell.component.ts
View file

@ -1,44 +0,0 @@
import {Component, Input, OnInit } from '@angular/core';
import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
import {Video} from "../../../utils/interfaces/video";
import {ThemeService} from "../../../utils/services/theme/theme.service";
import {MessageService} from "../../../utils/services/message/message.service";
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
@Component({
selector: 'app-video-cell',
templateUrl: './video-cell.component.html',
styleUrls: ['./video-cell.component.scss']
})
export class VideoCellComponent implements OnInit
{
@Input() video: Video;
safeUrl;
tabVideoUrlClicked: string[] = [];
constructor( private videoUrlService: VideoUrlService,
private addVideoToPlaylistsService: AddVideoToPlaylistsService,
public themeService: ThemeService,
private messageService: MessageService,
private historiqueService: UserHistoryService ) {}
ngOnInit(): void
{
this.safeUrl = this.videoUrlService.safeUrl(this.video.url);
}
onAdd(): void
{
this.addVideoToPlaylistsService.run(this.video);
}
onIframeClick()
{
console.log("onIframeClick: " + this.video.title);
this.historiqueService.addVideoToHistoque(this.video);
}
}

39
src/app/user/search/video-grid/video-grid.component.html
View file

@ -1,11 +1,30 @@
<div class="conteneur">
<nav>
<ul>
<li class="row ligne" *ngFor="let triplet of tabTriplet">
<div class="col-4" *ngFor="let video of triplet">
<app-video-cell [video]="video"></app-video-cell>
</div>
</li>
</ul>
</nav>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Grille -->
<div style="height: 93%">
<mat-grid-list cols="3" rowHeight="33%">
<mat-grid-tile colspan="1" rowspan="1" *ngFor="let k of [0,1,2,3,4,5,6,7,8]">
<div class="myCell" *ngIf="indexPage+k < tabVideo.length" [title]="tabVideo[indexPage+k].title">
<iframe appIframeTracker
[src]=videoUrlService.safeUrl(tabVideo[indexPage+k].url)
allowfullscreen
(iframeClick)="onIframeClick(tabVideo[indexPage+k])"></iframe><br>
<span> {{tronquage(tabVideo[indexPage+k].title)}} </span>
<button mat-icon-button (click)="onAdd(tabVideo[indexPage+k])">
<mat-icon> add_circle </mat-icon>
</button>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
<!-- Paginator -->
<div class="btnContainer">
<button mat-button class="btnPaginator" [disabled]="indexPage<=0" (click)="indexPage=indexPage-9"> < Précédent </button> &nbsp;
<button mat-button class="btnPaginator" [disabled]="indexPage+9>=tabVideo.length" (click)="indexPage=indexPage+9"> Suivant > </button>
</div>

44
src/app/user/search/video-grid/video-grid.component.scss
View file

@ -1,14 +1,40 @@
.conteneur {
height: 100%;
mat-grid-list {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
nav ul {
overflow: hidden;
overflow-y: scroll;
height: 75vh;
padding: 30px;
mat-grid-tile {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: solid 1px black;
}
.ligne {
margin: 30px 0px 30px 0px;
// ---------------------------------------------------------------------------------------------
.myCell {
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 0px;
}
iframe {
padding: 0px 0px 0px 0px;
width: 85%;
height: 15vh;
}
// ---------------------------------------------------------------------------------------------
.btnContainer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
}
.btnPaginator {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

44
src/app/user/search/video-grid/video-grid.component.ts
View file

@ -1,6 +1,8 @@
import {Component, Input, OnChanges} from '@angular/core';
import {Component, Input, OnChanges } from '@angular/core';
import {Video} from "../../../utils/interfaces/video";
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
@Component({
@ -11,31 +13,33 @@ import {UserHistoryService} from "../../../utils/services/userHistory/userHistor
export class VideoGridComponent implements OnChanges
{
@Input() tabVideo: Video[] = [];
tabTriplet = [];
indexPage: number = 0;
constructor(private historiqueService: UserHistoryService) {}
constructor( private historiqueService: UserHistoryService,
private addVideoToPlaylistsService: AddVideoToPlaylistsService,
private videoUrlService: VideoUrlService ) {}
ngOnChanges(): void
{
this.historiqueService.clearTabVideoUrlClicked();
//this.historiqueService.clearTabVideoUrlClicked();
}
this.tabTriplet = [];
let n = this.tabVideo.length;
let i = 0;
while(i < n)
{
let triplet = []
let compteur = 0;
while((compteur < 3) && (i < n))
{
triplet.push(this.tabVideo[i]);
i++ ;
compteur++ ;
}
this.tabTriplet.push(triplet)
}
onAdd(video: Video): void
{
this.addVideoToPlaylistsService.run(video);
}
onIframeClick(video: Video)
{
console.log("onIframeClick: " + video.title);
this.historiqueService.addVideoToHistoque(video);
}
tronquage(str: string)
{
if(str.length < 30) return str;
else return str.substring(0, 30) + "..." ;
}
}