connexion avec back pour page 'search'

This commit is contained in:
MiharyR 2021-12-12 01:38:18 +01:00
parent a2d5a7afc6
commit d6752acaad
6 changed files with 70 additions and 59 deletions

View file

@ -47,6 +47,7 @@ export class PageHistoryUserComponent implements AfterViewInit
this.userHistoryService.clearTabVideoUrlClicked();
// --- FAUX CODE ---
/*
const tabVideoAll: VideoAll[] = this.fictitiousVideosService.getTabVideoAll(8);
let tabVideoHistory: VideoHistory[] = [];
for(let videoAll of tabVideoAll) tabVideoHistory.push(this.videoAllToVideoHistory(videoAll));
@ -54,20 +55,37 @@ export class PageHistoryUserComponent implements AfterViewInit
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.dataSource = this.dataSource;
*/
// --- VRAI CODE ---
/*
this.messageService
.sendMessage( "user/get/history", null )
.subscribe( retour => {
.get("user/history")
.subscribe(ret => this.ngAfterViewInitCallback(ret), err => this.ngAfterViewInitCallback(err));
if(retour.status === "error") console.log(retour);
else {
this.dataSource = new MatTableDataSource(retour.data);
this.dataSource.sort = this.sort;
}
ngAfterViewInitCallback(retour: any): void
{
console.log(retour);
if(retour.status !== "success") {
//console.log(retour);
}
else {
const tabVideoHistory = retour.data.map( video => {
return {
videoId: video.videoId,
imageUrl: video.imageUrl,
title: video.title,
date: video.watchedDate,
source: video.source,
}
});
*/
this.dataSource = new MatTableDataSource(tabVideoHistory);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.dataSource = this.dataSource;
}
}

View file

@ -16,7 +16,7 @@
<!-- Search bar -->
<div class="input-group" style="width: 100%; margin: 0 auto;">
<div class="form-outline" style="width: 100%; margin: 0 auto;">
<input type="search" placeholder="recherche..." class="inputSearchBar"/>
<input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search"/>
<button mat-icon-button (click)="onSearch()">
<mat-icon>search</mat-icon>
</button>
@ -30,7 +30,7 @@
&nbsp;
<mat-checkbox id="youtube" name="youtube" style="margin-left: 5px" [(ngModel)]="tabPlateform[0].isSelected"></mat-checkbox>
<img src="/assets/logo_plateforms/youtube.png" alt="logo" width="30px" height="25px" style="margin-left: 5px">
<label for="youtube" style="margin-left: 5px">youtube</label>
<label for="youtube" style="margin-left: 5px">Youtube</label>
&nbsp;
</span>
<!-- dailymotion -->
@ -38,7 +38,7 @@
&nbsp;
<mat-checkbox id="dailymotion" name="dailymotion" style="margin-left: 5px" [(ngModel)]="tabPlateform[1].isSelected"></mat-checkbox>
<img src="/assets/logo_plateforms/dailymotion.png" alt="logo" width="25px" height="25px" style="margin-left: 5px">
<label for="dailymotion" style="margin-left: 5px">dailymotion</label>
<label for="dailymotion" style="margin-left: 5px">Dailymotion</label>
&nbsp;
</span>
</div>

View file

@ -5,12 +5,13 @@ import {Advert} from "../../../utils/interfaces/advert";
import {ThemeService} from "../../../utils/services/theme/theme.service";
import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service";
import {HttpParams} from "@angular/common/http";
let TAB_PLATEFORM = [
{ name: "youtube", isSelected: false },
{ name: "dailymotion", isSelected: false }
{ name: "Youtube", isSelected: true },
{ name: "Dailymotion", isSelected: true }
];
@ -38,53 +39,44 @@ export class PageSearchComponent implements OnInit
ngOnInit(): void
{
// --- FAUX CODE ---
this.tabVideo = this.fictitiousVideosService.getTabVideoAll(90);
//this.tabVideo = this.fictitiousVideosService.getTabVideoAll(90);
this.ad1 = this.fictitiousAdvertsService.getAdvert();
this.ad2 = this.fictitiousAdvertsService.getAdvert();
// --- VRAI CODE ---
/*
let tabPlateformName = [];
for(let plateform of this.tabPlateform) tabPlateformName.push(plateform.title);
let data = { search: "", plaateforms: tabPlateformName };
this.messageService
.sendMessage("user/searchVideo", data)
.subscribe( retour => {
if(retour.status === "error") console.log(retour.data);
else {
this.tabVideo = retour.data.videos;
this.ad1 = retour.data.ad1;
this.ad2 = retour.data.ad2;
}
});
*/
this.onSearch();
}
onSearch()
{
// --- FAUX CODE ---
this.tabVideo = this.fictitiousVideosService.getTabVideoAll(2);
let params = new HttpParams();
params = params.append('q', this.search);
let sources = "";
if(this.tabPlateform[0].isSelected && this.tabPlateform[1].isSelected) sources += "yt,dm" ;
else if((!this.tabPlateform[0].isSelected) && this.tabPlateform[1].isSelected) sources += "dm" ;
else if(this.tabPlateform[0].isSelected && (!this.tabPlateform[1].isSelected)) sources += "yt" ;
else sources += "" ;
console.log(sources);
params = params.append('sources', sources);
// --- VRAI CODE ---
/*
let tabPlateformName = [];
for(let plateform of this.tabPlateform)
{
if(plateform.isSelected) tabPlateformName.push(plateform.title);
}
let data = { "search": this.search, "plateforms": tabPlateformName };
this.messageService
.sendMessage("user/searchVideo", data)
.subscribe(retour => {
if(retour.status === "error") console.log(retour.data);
else {
this.tabVideo = retour.data.videos;
this.ad1 = retour.data.ad1;
this.ad2 = retour.data.ad2;
}
});
*/
.get("video/search", params)
.subscribe(ret => this.onSearchCallback(ret), err => this.onSearchCallback(err));
}
onSearchCallback(retour: any): void
{
console.log("ngOnInitCallback:");
console.log(retour);
if(retour.status !== "success") {
//console.log(retour);
}
else {
this.tabVideo = retour.data;
}
}
}

View file

@ -20,8 +20,8 @@
<!-- logo -->
<mat-grid-tile [colspan]="2" [rowspan]="2" class="mat-grid-tile-info-video" (click)="onVideo(tabVideo[indexPage+k])">
<img *ngIf="tabVideo[indexPage+k].source==='youtube'" src="/assets/logo_plateforms/youtube.png" alt="ytb" width="20px" height="15px">
<img *ngIf="tabVideo[indexPage+k].source==='dailymotion'" src="/assets/logo_plateforms/dailymotion.png" alt="dlm" width="20px" height="20px">
<img *ngIf="tabVideo[indexPage+k].source==='Youtube'" src="/assets/logo_plateforms/youtube.png" alt="ytb" width="20px" height="15px">
<img *ngIf="tabVideo[indexPage+k].source==='Dailymotion'" src="/assets/logo_plateforms/dailymotion.png" alt="dlm" width="20px" height="20px">
</mat-grid-tile>
<!-- title + views + publishedAt -->

View file

@ -34,8 +34,8 @@ export class VideoGridComponent implements OnChanges
tronquage(str: string)
{
if(str.length < 40) return str;
else return str.substring(0, 37) + "..." ;
if(str.length < 33) return str;
else return str.substring(0, 30) + "..." ;
}
onVideo(video: VideoAll): void
@ -43,4 +43,5 @@ export class VideoGridComponent implements OnChanges
const url = '/user/watching/fromSearch/'+video.videoId+'/'+video.source+'/'+this.search;
this.router.navigateByUrl(url);
}
}

View file

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {HttpClient, HttpParams} from "@angular/common/http";
import {environment} from "../../../../environments/environment";
import {Observable} from "rxjs";
@ -19,10 +19,10 @@ export class MessageService
return this.http.post<any>(urlComplete, data, {withCredentials: true});
}
get(url: string): Observable<any>
get(url: string, params:HttpParams = new HttpParams()): Observable<any>
{
const urlComplete = environment.debutUrl + url ;
return this.http.get<any>(urlComplete,{withCredentials: true});
return this.http.get<any>(urlComplete,{ withCredentials: true, params: params });
}
put(url: string, data: any): Observable<any>