71 lines
2.9 KiB
HTML
71 lines
2.9 KiB
HTML
<div [class]="themeService.getClassTheme()">
|
|
<div class="myContainer">
|
|
|
|
|
|
<app-navbar-user></app-navbar-user><br><br>
|
|
|
|
<!-- ---------------------------------------------------------------------------------- -->
|
|
|
|
<div style="text-align: center">
|
|
<input (keyup)="applyFilter($event)" placeholder="Filtre">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- ---------------------------------------------------------------------------------- -->
|
|
|
|
<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">
|
|
<iframe appIframeTracker
|
|
[src]=videoUrlService.safeUrl(watchedVideo.url)
|
|
(iframeClick)="onIframeClick(watchedVideo)"
|
|
allowfullscreen></iframe>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<!-- Titre Column -->
|
|
<ng-container matColumnDef="titre">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
|
|
<td mat-cell *matCellDef="let watchedVideo">
|
|
{{watchedVideo.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' }}
|
|
</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>
|
|
</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>
|
|
</button>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
<tr class="mat-row" *matNoDataRow>
|
|
<td class="mat-cell" colspan="4"> Aucune vidéo ne correspond au filtre: "{{input.value}}" </td>
|
|
</tr>
|
|
</table>
|
|
<br><br>
|
|
|
|
</div>
|
|
</div>
|