realisation de la page user/historique

src/app/app-routing.module.ts

@@ -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 }
 ];
 
 

src/app/app.module.ts

@@ -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]

src/app/user/historique/page-historique/page-historique.component.html

@@ -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>

src/app/user/historique/page-historique/page-historique.component.scss

@@ -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%;
+}

src/app/user/historique/page-historique/page-historique.component.spec.ts

@@ -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();
+  });
+});

src/app/user/historique/page-historique/page-historique.component.ts

@@ -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);
+    }
+
+}

src/app/user/myPlaylists/video-list/video-list.component.html

@@ -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>

src/app/user/myPlaylists/video-list/video-list.component.ts

@@ -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);
     }
 
 }

src/app/user/search/page-search/page-search.component.ts

@@ -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'},
-    ];
-
 }

src/app/user/search/video-cell/video-cell.component.html

@@ -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>

src/app/user/search/video-cell/video-cell.component.ts

@@ -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',
+    selector: 'app-video-cell',
-  templateUrl: './video-cell.component.html',
+    templateUrl: './video-cell.component.html',
-  styleUrls: ['./video-cell.component.scss']
+    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) {
+    onIframeClick()
-    console.log("test click iframe "+ videoUrl);
+    {
-  }
+        console.log("onIframeClick: " + this.video.title);
+        this.historiqueService.addVideoToHistoque(this.video);
+    }
+
 }

src/app/user/search/video-grid/video-grid.component.html

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

src/app/user/search/video-grid/video-grid.component.ts

@@ -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;

src/app/utils/components/nav-bar/nav-bar.component.html

@@ -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">

src/app/utils/interfaces/watchedVideo.ts

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

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

@@ -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;
+    }
 }

src/app/utils/services/historique/historique.service.spec.ts

@@ -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();
+  });
+});

src/app/utils/services/historique/historique.service.ts

@@ -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 = [];
+    }
+
+}