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

realisation de la page user/historique

Browse source
This commit is contained in:
MiharyR 2021-10-30 16:18:57 +02:00
parent d0ca04aefc
commit e358b6fa0e
18 changed files with 370 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/app-routing.module.ts
View file

@ -4,6 +4,7 @@ import {PageConnexionComponent} from './pourLes3Roles/page-connexion/page-connex
import {PageRegisterComponent} from './pourLes3Roles/register/page-register/page-register.component';
import {PageSearchComponent} from "./user/search/page-search/page-search.component";
import {PageMyPlaylistsComponent} from "./user/myPlaylists/page-my-playlists/page-my-playlists.component";
import {PageHistoriqueComponent} from "./user/historique/page-historique/page-historique.component";
const routes: Routes = [
@ -11,7 +12,8 @@ const routes: Routes = [
{ path: 'connexion', component: PageConnexionComponent },
{ path: 'register', component: PageRegisterComponent },
{ path: 'search', component: PageSearchComponent },
{ path: 'myPlaylists', component: PageMyPlaylistsComponent }
{ path: 'myPlaylists', component: PageMyPlaylistsComponent },
{ path: 'historique', component: PageHistoriqueComponent }
];

6
src/app/app.module.ts
View file

@ -30,6 +30,8 @@ import { PageMyPlaylistsComponent } from './user/myPlaylists/page-my-playlists/p
import { PlaylistListComponent } from './user/myPlaylists/playlist-list/playlist-list.component';
import {VideoListComponent} from "./user/myPlaylists/video-list/video-list.component";
import { PopupCreatePlaylistComponent } from './utils/components/popup-create-playlist/popup-create-playlist.component';
import { PageHistoriqueComponent } from './user/historique/page-historique/page-historique.component';
import {MatTableModule} from '@angular/material/table';
@NgModule({
@ -50,6 +52,7 @@ import { PopupCreatePlaylistComponent } from './utils/components/popup-create-pl
PlaylistListComponent,
VideoListComponent,
PopupCreatePlaylistComponent,
PageHistoriqueComponent,
],
imports: [
BrowserModule,
@ -66,7 +69,8 @@ import { PopupCreatePlaylistComponent } from './utils/components/popup-create-pl
MatCheckboxModule,
MatFormFieldModule,
MatSnackBarModule,
MatGridListModule
MatGridListModule,
MatTableModule
],
providers: [],
bootstrap: [AppComponent]

71
src/app/user/historique/page-historique/page-historique.component.html Normal file
View file

@ -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>
<!-- Supprimer Column -->
<ng-container matColumnDef="effacer">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Effacer </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>

21
src/app/user/historique/page-historique/page-historique.component.scss Normal file
View file

@ -0,0 +1,21 @@
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%;
}

25
src/app/user/historique/page-historique/page-historique.component.spec.ts Normal file
View file

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PageHistoriqueComponent } from './page-historique.component';
describe('PageHistoriqueComponent', () => {
let component: PageHistoriqueComponent;
let fixture: ComponentFixture<PageHistoriqueComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ PageHistoriqueComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(PageHistoriqueComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

105
src/app/user/historique/page-historique/page-historique.component.ts Normal file
View file

@ -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 {HistoriqueService} from "../../../utils/services/historique/historique.service";
@Component({
selector: 'app-page-historique',
templateUrl: './page-historique.component.html',
styleUrls: ['./page-historique.component.scss']
})
export class PageHistoriqueComponent implements OnInit
{
displayedColumns: string[] = [ 'aperçu', 'titre', 'date', 'source', 'effacer' ];
dataSource ;
@ViewChild(MatSort) sort: MatSort;
constructor( public themeService: ThemeService,
private messageService: MessageService,
private fictitiousDataService: FictitiousDatasService,
public videoUrlService: VideoUrlService,
private historiqueService: HistoriqueService ) { }
ngOnInit(): void
{
this.historiqueService.clearTabVideoUrlClicked();
// --- FAUX CODE ---
const tabWatchedVideo = this.fictitiousDataService.getTabWatchedVideo(8);
this.dataSource = new MatTableDataSource(tabWatchedVideo);
this.dataSource.sort = this.sort;
// --- VRAI CODE ---
/*
this.messageService
.sendMessage( "user/get/historique", 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.historiqueService.addWatchedVideoToHistorique(watchedVideo);
}
}

4
src/app/user/myPlaylists/video-list/video-list.component.html
View file

@ -37,13 +37,13 @@
<div *ngFor="let video of playlist.videos ; let i = index" class="videoContainer">
<!-- bouton add -->
<button mat-icon-button (click)="onAdd(video)">
<mat-icon > add_circle </mat-icon>
<mat-icon> add_circle </mat-icon>
</button>
<!-- video -->
<iframe appIframeTracker
[src]=videoUrlService.safeUrl(this.video.url)
allowfullscreen
(iframeClick)="onIframeClick(this.video.url)"></iframe>
(iframeClick)="onIframeClick(this.video)"></iframe>
<!-- bouton delete -->
<button mat-icon-button (click)="onDelete(video, i)">
<mat-icon>delete</mat-icon>

9
src/app/user/myPlaylists/video-list/video-list.component.ts
View file

@ -7,6 +7,7 @@ import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlay
import {MessageService} from "../../../utils/services/message/message.service";
import {Playlist} from "../../../utils/interfaces/playlist";
import {MatSnackBar} from "@angular/material/snack-bar";
import {HistoriqueService} from "../../../utils/services/historique/historique.service";
@ -25,7 +26,8 @@ export class VideoListComponent
private fictitiousDatasService: FictitiousDatasService,
public videoUrlService: VideoUrlService,
private addVideoToPlaylistService: AddVideoToPlaylistsService,
private snackBar: MatSnackBar ) { }
private snackBar: MatSnackBar,
private historiqueService: HistoriqueService ) { }
onAdd(video: Video): void
@ -61,9 +63,10 @@ export class VideoListComponent
}
onIframeClick(videoUrl: string): void
onIframeClick(video: Video): void
{
console.log(videoUrl)
console.log("onIframeClick: " + video.title);
this.historiqueService.addVideoToHistoque(video);
}
}

11
src/app/user/search/page-search/page-search.component.ts
View file

@ -37,7 +37,7 @@ export class PageSearchComponent implements OnInit
ngOnInit(): void
{
// --- FAUX CODE ---
this.tabVideo = this.fictitiousDatasService.getTabVideo(11);
this.tabVideo = this.fictitiousDatasService.getTabVideo(5);
this.ad1 = this.fictitiousDatasService.getAdvert();
this.ad2 = this.fictitiousDatasService.getAdvert();
@ -63,7 +63,7 @@ export class PageSearchComponent implements OnInit
onSearch()
{
// --- FAUX CODE ---
this.tabVideo = this.fictitiousDatasService.getTabVideo(4);
this.tabVideo = this.fictitiousDatasService.getTabVideo(2);
// --- VRAI CODE ---
/*
@ -86,11 +86,4 @@ export class PageSearchComponent implements OnInit
*/
}
tiles = [
{text: 'One', cols: 2, rows: 1, color: 'lightblue'},
{text: 'Two', cols: 7, rows: 1, color: 'lightgreen'},
{text: 'Three', cols: 2, rows: 1, color: 'lightpink'},
];
}

2
src/app/user/search/video-cell/video-cell.component.html
View file

@ -2,7 +2,7 @@
<div [class]="themeService.getClassTheme()">
<div class="conteneur">
<iframe appIframeTracker [src]=safeUrl allowfullscreen (iframeClick)="onIframeClick(this.video.url)"></iframe><br/>
<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>

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

@ -7,20 +7,26 @@ import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.servic
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 {HistoriqueService} from "../../../utils/services/historique/historique.service";
@Component({
selector: 'app-video-cell',
templateUrl: './video-cell.component.html',
styleUrls: ['./video-cell.component.scss']
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) {}
public themeService: ThemeService,
private messageService: MessageService,
private historiqueService: HistoriqueService ) {}
ngOnInit(): void
{
@ -32,7 +38,10 @@ export class VideoCellComponent implements OnInit
this.addVideoToPlaylistsService.run(this.video);
}
onIframeClick(videoUrl: string) {
console.log("test click iframe "+ videoUrl);
}
onIframeClick()
{
console.log("onIframeClick: " + this.video.title);
this.historiqueService.addVideoToHistoque(this.video);
}
}

4
src/app/user/search/video-grid/video-grid.component.html
View file

@ -2,8 +2,8 @@
<nav>
<ul>
<li class="row ligne" *ngFor="let triplet of tabTriplet">
<div class="col-4" *ngFor="let video0 of triplet">
<app-video-cell [video]="video0"></app-video-cell>
<div class="col-4" *ngFor="let video of triplet">
<app-video-cell [video]="video"></app-video-cell>
</div>
</li>
</ul>

14
src/app/user/search/video-grid/video-grid.component.ts
View file

@ -1,5 +1,11 @@
import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {Video} from "../../../utils/interfaces/video";
import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
import {ThemeService} from "../../../utils/services/theme/theme.service";
import {MessageService} from "../../../utils/services/message/message.service";
import {WatchedVideo} from "../../../utils/interfaces/watchedVideo";
import {HistoriqueService} from "../../../utils/services/historique/historique.service";
@Component({
@ -12,8 +18,14 @@ export class VideoGridComponent implements OnChanges
@Input() tabVideo: Video[] = [];
tabTriplet = [];
ngOnChanges(changes: SimpleChanges): void
constructor(private historiqueService: HistoriqueService) {}
ngOnChanges(): void
{
this.historiqueService.clearTabVideoUrlClicked();
this.tabTriplet = [];
let n = this.tabVideo.length;
let i = 0;

2
src/app/utils/components/nav-bar/nav-bar.component.html
View file

@ -25,7 +25,7 @@
<a routerLink="/myPlaylists"> Mes playlists </a>
</li>
<li class="cliquable">
<a routerLink="/search"> Historique </a>
<a routerLink="/historique"> Historique </a>
</li>
<li style="float:right; margin-right: 20px;">
<a routerLink="/search">

7
src/app/utils/interfaces/watchedVideo.ts Normal file
View file

@ -0,0 +1,7 @@
export interface WatchedVideo
{
_id: string,
url: string,
title: string,
date: Date
}

22
src/app/utils/services/fictitiousDatas/fictitious-datas.service.ts
View file

@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
import {Video} from "../../interfaces/video";
import {Playlist} from "../../interfaces/playlist";
import {Advert} from "../../interfaces/advert";
import {WatchedVideo} from "../../interfaces/watchedVideo";
@ -145,4 +146,25 @@ export class FictitiousDatasService
}
}
getTabWatchedVideo(n): WatchedVideo[]
{
let tabWatchedVideo = [];
const l = TAB_VIDEO.length;
for(let i=0 ; i<n ; i++)
{
const idx = Math.floor(Math.random() * l);
const video: Video = TAB_VIDEO[idx];
const watchedVideo: WatchedVideo = {
_id: video._id,
url: video.url,
title: video.title,
date: new Date()
};
tabWatchedVideo.push(watchedVideo);
}
return tabWatchedVideo;
}
}

16
src/app/utils/services/historique/historique.service.spec.ts Normal file
View file

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { HistoriqueService } from './historique.service';
describe('HistoriqueService', () => {
let service: HistoriqueService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(HistoriqueService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

52
src/app/utils/services/historique/historique.service.ts Normal file
View file

@ -0,0 +1,52 @@
import { Injectable } from '@angular/core';
import {Video} from "../../interfaces/video";
import {WatchedVideo} from "../../interfaces/watchedVideo";
import {MessageService} from "../message/message.service";
@Injectable({
providedIn: 'root'
})
export class HistoriqueService
{
private tabVideoUrlClicked: string[] = [];
constructor(private messageService: MessageService) { }
public addVideoToHistoque(video: Video): void
{
if (!this.tabVideoUrlClicked.includes(video.url))
{
this.tabVideoUrlClicked.push(video.url);
const watchedVideo0: WatchedVideo = {
_id: video._id,
url: video.url,
title: video.title,
date: new Date()
};
console.log(watchedVideo0);
this.addWatchedVideoToHistorique(watchedVideo0);
}
}
public addWatchedVideoToHistorique(watchedVideo0: WatchedVideo): void
{
// --- VRAI CODE ---
/*
this.messageService
.sendMessage("user/add/watchedVideo", {watchedVideo: watchedVideo0})
.subscribe(retour => {});
*/
}
public clearTabVideoUrlClicked()
{
this.tabVideoUrlClicked = [];
}
}