amélioration du style
This commit is contained in:
MiharyR
parent
7ebacdc287
commit
4336169d2e
72 changed files with 2172 additions and 529 deletions
|
|
@ -0,0 +1,71 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
|
||||
<app-nav-bar pour="user"></app-nav-bar><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>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PageHistoryUserComponent } from './page-history-user.component';
|
||||
|
||||
describe('PageHistoriqueComponent', () => {
|
||||
let component: PageHistoryUserComponent;
|
||||
let fixture: ComponentFixture<PageHistoryUserComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PageHistoryUserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PageHistoryUserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
import {Component, OnInit, 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";
|
||||
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-history-user',
|
||||
templateUrl: './page-history-user.component.html',
|
||||
styleUrls: ['./page-history-user.component.scss']
|
||||
})
|
||||
export class PageHistoryUserComponent implements OnInit
|
||||
{
|
||||
displayedColumns: string[] = [ 'aperçu', 'titre', 'date', 'source', 'action' ];
|
||||
dataSource ;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
private messageService: MessageService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
public videoUrlService: VideoUrlService,
|
||||
private userHistoryService: UserHistoryService ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.userHistoryService.clearTabVideoUrlClicked();
|
||||
|
||||
// --- FAUX CODE ---
|
||||
const tabWatchedVideo = this.fictitiousDatasService.getTabWatchedVideo(8);
|
||||
this.dataSource = new MatTableDataSource(tabWatchedVideo);
|
||||
this.dataSource.sort = this.sort;
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage( "user/get/history", null )
|
||||
.subscribe( retour => {
|
||||
|
||||
if(retour.status === "error") console.log(retour);
|
||||
else {
|
||||
this.dataSource = new MatTableDataSource(retour.data);
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
applyFilter(event: Event)
|
||||
{
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
|
||||
getSourceByUrl(url: string): string
|
||||
{
|
||||
if(url.includes("youtu")) return "Youtube" ;
|
||||
else if(url.includes("daily")) return "Dailymotion" ;
|
||||
else return "???" ;
|
||||
}
|
||||
|
||||
|
||||
onDelete(watchedVideo: WatchedVideo): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
const index = this.dataSource.data.indexOf(watchedVideo);
|
||||
this.dataSource.data.splice(index, 1);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage("user/delete/videoSeen", { "watchedVideo": watchedVideo})
|
||||
.subscribe( retour => {
|
||||
|
||||
if(retour.status === "error") console.log(retour);
|
||||
else {
|
||||
const index = this.dataSource.data.indexOf(watchedVideo);
|
||||
this.dataSource.data.splice(index, 1);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
}
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
onIframeClick(watchedVideo: WatchedVideo)
|
||||
{
|
||||
console.log("onIframeClick: " + watchedVideo.title);
|
||||
this.userHistoryService.addWatchedVideoToHistorique(watchedVideo);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in a new issue