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

correction de CSS

Browse source
This commit is contained in:
MiharyR 2021-11-13 00:52:49 +01:00
parent ad08803578
commit 11472d0045
35 changed files with 296 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/app/user/history/page-history-user/page-history-user.component.html
View file

@ -16,45 +16,43 @@
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- Aperçu Column -->
<ng-container matColumnDef="aperçu">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Aperçu </th>
<td mat-cell *matCellDef="let watchedVideo">
<th mat-header-cell *matHeaderCellDef> Aperçu </th>
<td mat-cell *matCellDef="let video">
<iframe appIframeTracker
[src]=videoUrlService.safeUrl(watchedVideo.url)
(iframeClick)="onIframeClick(watchedVideo)"
[src]=videoUrlService.safeUrl(video.url)
(iframeClick)="onIframeClick(video)"
allowfullscreen></iframe>
</td>
</ng-container>
<!-- Titre Column -->
<ng-container matColumnDef="titre">
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
<td mat-cell *matCellDef="let watchedVideo">
{{watchedVideo.title}}
</td>
<td mat-cell *matCellDef="let video"> {{video.title}} </td>
</ng-container>
<!-- Date Column -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let watchedVideo">
{{ watchedVideo.date | date:'dd/LL/YYYY à HH:mm:ss' }}
<th mat-header-cell *matHeaderCellDef> Date </th>
<td mat-cell *matCellDef="let video">
<li *ngFor="let date0 of video.watched">
{{date0 | date:'dd/LL/YYYY à HH:mm:ss'}}
</li>
</td>
</ng-container>
<!-- Source Column -->
<ng-container matColumnDef="source">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Source </th>
<td mat-cell *matCellDef="let watchedVideo">
{{getSourceByUrl(watchedVideo.url)}}
</td>
<td mat-cell *matCellDef="let video"> {{video.source}} </td>
</ng-container>
<!-- 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>
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let video">
<button mat-icon-button (click)="onDelete(video)">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
@ -65,6 +63,9 @@
<td class="mat-cell" colspan="4"> Aucune vidéo ne correspond au filtre: "{{input.value}}" </td>
</tr>
</table>
<div style="width: 80%; margin: auto auto">
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements"></mat-paginator>
</div>
<br><br>
</div>

14
src/app/user/history/page-history-user/page-history-user.component.scss
View file

@ -5,23 +5,33 @@
}
table {
width: 80%;
margin: 0 auto;
}
/*
mat-paginator {
width: 30%;
text-align: center;
}
*/
th.mat-sort-header-sorted {
color: black;
}
/*
.lightTheme td {
padding: 10px 30px 5px 5px;
}
.darkTheme td {
background-color: #646464;
color: white;
padding: 10px 30px 5px 5px;
}
*/
input {
width: 25%;
width: 35%;
font-size: large;
}

51
src/app/user/history/page-history-user/page-history-user.component.ts
View file

@ -1,13 +1,13 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {ThemeService} from "../../../utils/services/theme/theme.service";
import {MessageService} from "../../../utils/services/message/message.service";
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
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 {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
import {Video} from "../../../utils/interfaces/video";
import {MatPaginator} from "@angular/material/paginator";
@ -16,11 +16,12 @@ import {UserHistoryService} from "../../../utils/services/userHistory/userHistor
templateUrl: './page-history-user.component.html',
styleUrls: ['./page-history-user.component.scss']
})
export class PageHistoryUserComponent implements OnInit
export class PageHistoryUserComponent implements AfterViewInit
{
displayedColumns: string[] = [ 'aperçu', 'titre', 'date', 'source', 'action' ];
displayedColumns: string[] = [ 'aperçu', 'title', 'date', 'source', 'action' ];
dataSource ;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor( public themeService: ThemeService,
@ -30,14 +31,32 @@ export class PageHistoryUserComponent implements OnInit
private userHistoryService: UserHistoryService ) { }
ngOnInit(): void
// charge la page
ngAfterViewInit(): void
{
this.userHistoryService.clearTabVideoUrlClicked();
// --- FAUX CODE ---
const tabWatchedVideo = this.fictitiousDatasService.getTabWatchedVideo(8);
this.dataSource = new MatTableDataSource(tabWatchedVideo);
const tabVideo: Video[] = this.fictitiousDatasService.getTabVideo(8);
const tabVideoChanged = [];
for(let video of tabVideo)
{
tabVideoChanged.push({
_id: video._id,
url: video.url,
title: video.title,
description: video.description,
views: video.views,
watched: video.watched,
source: this.getSourceByUrl(video.url)
});
}
this.dataSource = new MatTableDataSource(tabVideoChanged);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.dataSource = this.dataSource;
// --- VRAI CODE ---
/*
@ -55,13 +74,15 @@ export class PageHistoryUserComponent implements OnInit
}
applyFilter(event: Event)
// Applique le filtre
applyFilter(event: Event): void
{
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
// Retourne la source de la video en fonction de l'url
getSourceByUrl(url: string): string
{
if(url.includes("youtu")) return "Youtube" ;
@ -70,10 +91,11 @@ export class PageHistoryUserComponent implements OnInit
}
onDelete(watchedVideo: WatchedVideo): void
// Supprime la video
onDelete(video: Video): void
{
// --- FAUX CODE ---
const index = this.dataSource.data.indexOf(watchedVideo);
const index = this.dataSource.data.indexOf(video);
this.dataSource.data.splice(index, 1);
this.dataSource.data = this.dataSource.data;
this.dataSource = this.dataSource;
@ -96,10 +118,11 @@ export class PageHistoryUserComponent implements OnInit
}
onIframeClick(watchedVideo: WatchedVideo)
// Ajoute la date actuelle dans watched.video
onIframeClick(video: Video): void
{
console.log("onIframeClick: " + watchedVideo.title);
this.userHistoryService.addWatchedVideoToHistorique(watchedVideo);
console.log("onIframeClick: " + video.title);
this.userHistoryService.addVideoToHistoque(video);
}
}

13
src/app/user/myProfil/input-interests-profil/input-interests-profil.component.scss
View file

@ -1,3 +1,16 @@
mat-form-field {
width: 100%;
font-size: small;
}
mat-chip {
font-size: small;
}
input {
font-size: small;
}
mat-option {
font-size: small;
}

2
src/app/user/myProfil/page-profil-user/page-profil-user.component.ts
View file

@ -33,7 +33,7 @@ export class PageProfilUserComponent implements OnInit
onModifier()
{
const config = {
width: '25%',
width: '35%',
data: { user: this.user }
};
this.dialog

37
src/app/user/myProfil/popup-update-user/popup-update-user.component.scss
View file

@ -1,3 +1,11 @@
.boite {
font-size: small;
}
button {
font-size: small;
}
img {
margin: 0px 0px 10px 0px;
width: 5vw;
@ -6,3 +14,32 @@ img {
border-radius: 50%;
font-size: xxx-large;
}
// -------------------------------------------------------------------------
// aura
::ng-deep .mat-checkbox-ripple .mat-ripple-element {
background-color: grey !important;
}
// contenu coche
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: black !important;
}
// indeterminate
::ng-deep .mat-checkbox .mat-checkbox-frame {
background-color: white !important;
}
// -------------------------------------------------------------------------
::ng-deep .mat-radio-inner-circle {
color: black !important;
background-color: black !important;
}
::ng-deep .mat-radio-outer-circle{
color: black !important;
border: solid 1px gray !important;
}

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

@ -40,6 +40,7 @@ export class PopupUpdateUserComponent implements OnInit
gender: user0.gender,
interests: [],
isActive: user0.isActive,
isAccepted: user0.isAccepted,
createdAt: user0.createdAt,
updatedAt: user0.updatedAt,
};

15
src/app/user/navbar-user/navbar-user.component.scss
View file

@ -1,7 +1,7 @@
.navbar {
background-color: black;
height: 75px;
font-size: x-large;
height: 50px;
font-size: medium;
color: white;
}
@ -17,9 +17,8 @@
.navbar-brand {
font-family: cursive;
font-weight: bold;
//font-style: oblique 90deg;
font-size: xxx-large;
margin-left: 30px;
font-size: x-large;
margin-left: 15px;
color: white;
}
@ -35,7 +34,7 @@
// Bonton deconnexion
.btnDeconnexion {
font-size: x-large;
font-size: medium;
margin: 0px 10px 0px 10px
}
.btnDeconnexion:hover {
@ -52,8 +51,8 @@ img {
border: solid 2px white;
border-radius: 50px;
margin: 0px 10px 0px 15px;
width: 50px;
height: 50px;
width: 40px;
height: 40px;
}
img:hover {
cursor: pointer;

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

@ -1,16 +1,13 @@
import {
Component,
Input,
OnInit,
} from '@angular/core';
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 {WatchedVideo} from "../../../utils/interfaces/watchedVideo";
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',