diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 77c5f52..03026db 100644 --- a/src/app/app-routing.module.ts +++ b/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 } ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 68e4513..a5cd8cc 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/user/historique/page-historique/page-historique.component.html b/src/app/user/historique/page-historique/page-historique.component.html new file mode 100644 index 0000000..82c20f8 --- /dev/null +++ b/src/app/user/historique/page-historique/page-historique.component.html @@ -0,0 +1,71 @@ +
+
+ + +

+ + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Aperçu + + Titre + {{watchedVideo.title}} + Date + {{ watchedVideo.date | date:'dd/LL/YYYY à HH:mm:ss' }} + Source + {{getSourceByUrl(watchedVideo.url)}} + Effacer + +
Aucune vidéo ne correspond au filtre: "{{input.value}}"
+

+ +
+
diff --git a/src/app/user/historique/page-historique/page-historique.component.scss b/src/app/user/historique/page-historique/page-historique.component.scss new file mode 100644 index 0000000..1962ebe --- /dev/null +++ b/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%; +} diff --git a/src/app/user/historique/page-historique/page-historique.component.spec.ts b/src/app/user/historique/page-historique/page-historique.component.spec.ts new file mode 100644 index 0000000..b03ded7 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PageHistoriqueComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PageHistoriqueComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/user/historique/page-historique/page-historique.component.ts b/src/app/user/historique/page-historique/page-historique.component.ts new file mode 100644 index 0000000..e2e95c9 --- /dev/null +++ b/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); + } + +} diff --git a/src/app/user/myPlaylists/video-list/video-list.component.html b/src/app/user/myPlaylists/video-list/video-list.component.html index fae3418..dd8cb32 100644 --- a/src/app/user/myPlaylists/video-list/video-list.component.html +++ b/src/app/user/myPlaylists/video-list/video-list.component.html @@ -37,13 +37,13 @@
+ (iframeClick)="onIframeClick(this.video)">