correction de CSS
This commit is contained in:
MiharyR
parent
ad08803578
commit
11472d0045
35 changed files with 296 additions and 164 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue