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

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) + "..." ;
}
}