continuation de la partie advertiser

This commit is contained in:
MiharyR 2021-11-24 12:07:31 +01:00
parent 01c0e137e0
commit 1e5b9bd49c
28 changed files with 656 additions and 91 deletions

View file

@ -120,11 +120,11 @@
</td>
</ng-container>
<!-- Views Column -->
<ng-container matColumnDef="views">
<!-- CountViews Column -->
<ng-container matColumnDef="countViews">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Vues </th>
<td mat-cell *matCellDef="let advert">
{{advert.views}}
{{advert.countViews}}
</td>
</ng-container>

View file

@ -5,8 +5,7 @@ import {ThemeService} from "../../../utils/services/theme/theme.service";
import {MatDialog} from "@angular/material/dialog";
import {MatSnackBar} from "@angular/material/snack-bar";
import {MatTableDataSource} from "@angular/material/table";
import {Advert} from "../../../utils/interfaces/advert";
import {PopupVisualizeAdAdminComponent} from "../popup-visualize-ad-admin/popup-visualize-ad-admin.component";
import {Advert, AdvertWithCountViews} from "../../../utils/interfaces/advert";
import {PopupDeleteAdAdminComponent} from "../popup-delete-ad-admin/popup-delete-ad-admin.component";
import {PopupVisualizeImagesAdminComponent} from "../popup-visualize-images-admin/popup-visualize-images-admin.component";
import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service";
@ -22,8 +21,8 @@ import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fi
})
export class PageAdListAdminComponent implements AfterViewInit
{
tabAdvert: Advert[];
displayedColumns: string[] = [ 'title', 'advertiser', 'interests', 'createdAt', 'updatedAt', 'views', 'isVisible', 'actions' ];
tabAdvertWithCountViews: AdvertWithCountViews[] = [];
displayedColumns: string[] = [ 'title', 'advertiser', 'interests', 'createdAt', 'updatedAt', 'countViews', 'isVisible', 'actions' ];
dataSource ;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ -46,9 +45,10 @@ export class PageAdListAdminComponent implements AfterViewInit
ngAfterViewInit(): void
{
// --- FAUX CODE ---
this.tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
const tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
this.allInterests = this.fictitiousUtilsService.getTags();
for(let advert of tabAdvert) this.tabAdvertWithCountViews.push(this.advertToAdvertWithCountViews(advert));
this.dataSource = new MatTableDataSource<Advert>();
this.onFilter();
}
@ -61,7 +61,7 @@ export class PageAdListAdminComponent implements AfterViewInit
}
onVisualizeImages(advert: Advert)
onVisualizeImages(advert: AdvertWithCountViews)
{
const config = {
width: '30%',
@ -79,20 +79,7 @@ export class PageAdListAdminComponent implements AfterViewInit
}
onVisualizeInfo(advert: Advert): void
{
const config = {
width: '50%',
data: { advert: advert }
};
this.dialog
.open(PopupVisualizeAdAdminComponent, config)
.afterClosed()
.subscribe(retour => {});
}
onDelete(advert: Advert): void
onDelete(advert: AdvertWithCountViews): void
{
const config = {
data: { advert: advert }
@ -121,9 +108,8 @@ export class PageAdListAdminComponent implements AfterViewInit
onFilter(): void
{
console.log("b:" + this.formControlInterests.value);
this.dataSource.data = [];
for(let advert of this.tabAdvert)
for(let advert of this.tabAdvertWithCountViews)
{
let valide: boolean = true;
@ -173,4 +159,24 @@ export class PageAdListAdminComponent implements AfterViewInit
this.endDate = new Date(event);
}
advertToAdvertWithCountViews(advert: Advert): AdvertWithCountViews
{
return {
_id: advert._id,
userId: advert.userId,
title: advert.title,
advertiser: advert.advertiser,
images: advert.images,
interests: advert.interests,
comment: advert.comment,
views: advert.views,
countViews: advert.views.length,
isVisible: advert.isVisible,
isActive: advert.isActive,
createdAt: advert.createdAt,
updatedAt: advert.updatedAt,
}
}
}

View file

@ -145,10 +145,10 @@
</ng-container>
<!-- Views Column -->
<ng-container matColumnDef="views">
<ng-container matColumnDef="countViews">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Vues </th>
<td mat-cell *matCellDef="let advert">
{{advert.views}}
{{advert.countViews}}
</td>
</ng-container>

View file

@ -2,12 +2,11 @@ import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {MatSort} from "@angular/material/sort";
import {ThemeService} from "../../../utils/services/theme/theme.service";
import {MatTableDataSource} from "@angular/material/table";
import {Advert} from "../../../utils/interfaces/advert";
import {Advert, AdvertWithCountViews} from "../../../utils/interfaces/advert";
import {MatDialog} from "@angular/material/dialog";
import {PopupAddOrUpdateAdComponent} from "../popup-add-or-update-ad/popup-add-or-update-ad.component";
import {MatSnackBar} from "@angular/material/snack-bar";
import {PopupDeleteAdAdvertiserComponent} from "../popup-delete-ad-advertiser/popup-delete-ad-advertiser.component";
import {PopupVisualizeAdAdvertiserComponent} from "../popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component";
import {MatPaginator} from "@angular/material/paginator";
import {PopupVisualizeImagesAdvertiserComponent} from "../popup-visualize-images-advertiser/popup-visualize-images-advertiser.component";
import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service";
@ -23,8 +22,8 @@ import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fi
})
export class PageAdListAdvertiserComponent implements AfterViewInit
{
displayedColumns: string[] = [ 'isVisible', 'title', 'interests', 'createdAt', 'updatedAt', 'views', 'actions' ];
tabAdvert: Advert[] = [];
displayedColumns: string[] = [ 'isVisible', 'title', 'interests', 'createdAt', 'updatedAt', 'countViews', 'actions' ];
tabAdvertWithCountViews: AdvertWithCountViews[] = [];
dataSource ;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ -47,9 +46,10 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
ngAfterViewInit(): void
{
// --- FAUX CODE ---
this.tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
const tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
this.allInterests = this.fictitiousUtilsService.getTags();
for(let advert of tabAdvert) this.tabAdvertWithCountViews.push(this.advertToAdvertWithCountViews(advert));
this.dataSource = new MatTableDataSource<Advert>();
this.onFilter();
}
@ -62,7 +62,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
}
onVisualizeImages(advert: Advert)
onVisualizeImages(advert: AdvertWithCountViews)
{
const config = {
width: '30%',
@ -80,19 +80,6 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
}
onVisualize(advert: Advert): void
{
const config = {
width: '50%',
data: { advert: advert }
};
this.dialog
.open(PopupVisualizeAdAdvertiserComponent, config)
.afterClosed()
.subscribe(retour => {});
}
onAdd(): void
{
const config = {
@ -120,7 +107,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
}
onUpdate(advertToUpdate: Advert): void
onUpdate(advertToUpdate: AdvertWithCountViews): void
{
const config = {
width: '75%',
@ -148,7 +135,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
}
onDelete(advert: Advert): void
onDelete(advert: AdvertWithCountViews): void
{
const config = {
data: { advert: advert }
@ -179,7 +166,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
{
console.log("b:" + this.formControlInterests.value);
this.dataSource.data = [];
for(let advert of this.tabAdvert)
for(let advert of this.tabAdvertWithCountViews)
{
let valide: boolean = true;
@ -235,4 +222,24 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
// il faut envoyer la négation de user.isActive
}
advertToAdvertWithCountViews(advert: Advert): AdvertWithCountViews
{
return {
_id: advert._id,
userId: advert.userId,
title: advert.title,
advertiser: advert.advertiser,
images: advert.images,
interests: advert.interests,
comment: advert.comment,
views: advert.views,
countViews: advert.views.length,
isVisible: advert.isVisible,
isActive: advert.isActive,
createdAt: advert.createdAt,
updatedAt: advert.updatedAt,
}
}
}

View file

@ -13,7 +13,7 @@ const ADVERT_VIDE: Advert = {
images: [],
interests: [],
comment: "",
views: 0,
views: [],
isVisible: true,
isActive: true,
createdAt: new Date(),

View file

@ -0,0 +1,91 @@
<div [class]="themeService.getClassTheme()">
<div class="myContainer">
<!-- Navbar -->
<app-navbar-advertiser></app-navbar-advertiser>
<!-- Filter -->
<div class="filtersContainer mat-elevation-z8">
<div style="font-weight: bold">Filtre</div>
<mat-divider></mat-divider><br>
<div *ngIf="true; then colPeriode"></div>
<br><mat-divider></mat-divider><br>
<div style="text-align: right; font-size: small;">
<button mat-button (click)="onApplyFilter()" style="font-size: small">Appliquer</button>
</div>
</div>
<!-- chart -->
<div class="chartContainer">
<canvas baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="chartOptions"
[colors]="[]"
[legend]="true"
[chartType]="'line'">
</canvas>
</div>
</div>
</div>
<!-- ------------------------------------------------------------------------------------------------------------------- -->
<ng-template #colPeriode>
<!-- startDate -->
<mat-form-field appearance="fill" style="width: 140px;">
<mat-label>début</mat-label>
<input matInput type="date" [ngModel] ="startDate | date:'yyyy-MM-dd'" (ngModelChange)="onNewStartDate($event);">
</mat-form-field>
&nbsp; - &nbsp;
<!-- endDate -->
<mat-form-field appearance="fill" style="width: 140px;">
<mat-label>fin</mat-label>
<input matInput type="date" [ngModel] ="endDate | date:'yyyy-MM-dd'" (ngModelChange)="onNewEndDate($event);">
</mat-form-field>
&nbsp; - &nbsp;
<!-- step -->
<mat-form-field appearance="fill" style="width: 140px;">
<mat-label>pas d'affichage</mat-label>
<input matInput type="number" [(ngModel)] =step>
</mat-form-field>
&nbsp; - &nbsp;
<!-- step unity -->
<mat-form-field appearance="fill">
<mat-label>unité du pas d'affichage</mat-label>
<mat-select [(ngModel)]="stepUnity">
<mat-option value="jour">jour</mat-option>
<mat-option value="semaine">semaine</mat-option>
<mat-option value="mois">mois</mat-option>
</mat-select>
</mat-form-field>
<!-- ads -->
<mat-select [formControl]="formControl" multiple style="padding-top: 10px;">
<mat-select-trigger>
<span *ngIf="formControl.value?.length > 0">
<span *ngFor="let coupleNameViews of formControl.value"> {{coupleNameViews.name}}, </span>
</span>
</mat-select-trigger>
<mat-option *ngFor="let coupleNameViews of allCoupleNameViews" [value]="coupleNameViews">{{coupleNameViews.name}}</mat-option>
</mat-select>
</ng-template>

View file

@ -0,0 +1,60 @@
.myContainer {
font-size: small;
max-width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
input {
font-size: small;
width: 140px;
}
.filtersContainer {
background-color: white;
width: 60%;
margin: 50px 50px 50px 50px;
padding: 20px 20px 20px 20px;
}
.chartContainer {
background-color: white;
border: solid 1px black;
padding: 10px 10px 10px 10px;
margin: 50px 50px 50px 50px;
}
// ---------------------------------------------
// periode
.periode {
padding: 10px 10px 0px 10px;
}
.periode .titleContainer {
text-align: right;
border-right: solid 1px #dcdcdc;
font-weight: bold;
}
// -------------------------------------------------------------------------
// aura
::ng-deep .mat-checkbox-ripple .mat-ripple-element {
background-color: grey !important;
}
// contenu coche
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: black !important;
}
// indeterminate
::ng-deep .mat-checkbox .mat-checkbox-frame {
border: solid 1px black !important;
background-color: white !important;
}

View file

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

View file

@ -0,0 +1,234 @@
import { Component, OnInit } from '@angular/core';
import {FormControl} from "@angular/forms";
import {ChartDataSets} from "chart.js";
import {Label} from "ng2-charts";
import { Router} from "@angular/router";
import {FictitiousAdvertsService} from "../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service";
import {FictitiousVideosService} from "../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
import {ThemeService} from "../../utils/services/theme/theme.service";
interface CoupleNameViews {
name: string,
views: Date[],
}
@Component({
selector: 'app-subjects-popularity',
templateUrl: './pages-popularity.component.html',
styleUrls: ['./pages-popularity.component.scss']
})
export class PagesPopularityComponent implements OnInit
{
formControl: FormControl;
allCoupleNameViews: CoupleNameViews[] = [];
startDate: Date = null;
endDate: Date = null;
step: number = 1;
stepUnity: string = "jour" ;
oneDay: number = 24*60*60*1000;
oneWeek: number = 7*24*60*60*1000;
lineChartData: ChartDataSets[] = [];
lineChartLabels: Label[] = [];
chartOptions: any = {
responsive: true,
scales: {
yAxes: [{ display: true, scaleLabel: { display: true, labelString: "vues" } }],
xAxes: [{ scaleLabel: { display: true, labelString: "temps" } }],
}
};
constructor( private router: Router,
public themeService: ThemeService,
private fictitiousAdvertsService: FictitiousAdvertsService,
private fictitiousVideosService: FictitiousVideosService ) {}
ngOnInit(): void
{
if(this.router.url.includes("ads")) this.ngOnInitAds();
else if(this.router.url.includes("subjects")) this.ngOnInitSubjects();
this.formControl = new FormControl(this.allCoupleNameViews);
this.onApplyFilter();
}
// Sera excuté si on est sur la page 'adsPopularity'
// Remplie l'attribut 'allCoupleNameViews'
ngOnInitAds(): void
{
const allAdverts = this.fictitiousAdvertsService.get_TAB_ADVERT();
for(let advert of allAdverts)
{
let couple = {name: advert.title, views: advert.views }
this.allCoupleNameViews.push(couple);
}
}
// Sera excuté si on est sur la page 'subjectsPopularity'
// Remplie l'attribut 'allCoupleNameViews'
ngOnInitSubjects(): void
{
const allVideos = this.fictitiousVideosService.get_TAB_VIDEO();
let myMap: Map<string,Date[]> = new Map();
for(let video of allVideos)
{
const key = video.interest;
if(!myMap.has(key)) myMap.set(key, video.watchedDates);
else {
let tabDate = myMap.get(key);
for(let date0 of video.watchedDates) tabDate = this.insertInOrder(tabDate, date0);
myMap.set(key, tabDate);
}
}
for(const [key, value] of myMap.entries())
{
let couple = {name: key, views: value }
this.allCoupleNameViews.push(couple);
}
}
// Applique le filtre
onApplyFilter(): void
{
// --- initialisation ---
this.lineChartData = [];
this.lineChartLabels = [];
if(this.step <= 0) this.step = 0;
if(this.endDate === null) this.endDate = new Date();
if(this.startDate === null) this.startDate = new Date(this.endDate.getTime() - this.oneWeek); // date d'il y a une semaine
const startTime = this.startDate.getTime();
const endTime = this.endDate.getTime();
// --- remplissage de 'lineChartLabels' ---
let dataWithZeros = [];
let time = startTime;
const intervals = [];
while(time <= endTime)
{
dataWithZeros.push(0);
this.lineChartLabels.push(this.getLabel(new Date(time)));
intervals.push(time);
time = this.addStep(time);
}
intervals.push(time);
// --- remplissage de 'lineChartLabels' ---
for(let coupleNameViews of this.formControl.value)
{
let data = dataWithZeros.slice();
let label = coupleNameViews.name;
let index = 0;
for(let date0 of coupleNameViews.views)
{
const time0 = date0.getTime();
if(time0 > endTime) break;
if((startTime <= time0) && (time0 <= endTime))
{
while((index < intervals.length) && (time0 >= intervals[index])) index += 1;
index = index - 1;
data[index] += 1;
}
}
this.lineChartData.push({"data": data.slice(), "label": label});
}
}
onNewStartDate(event): void {
this.startDate = new Date(event);
}
onNewEndDate(event): void {
this.endDate = new Date(event);
}
// Renvoie le bon label pour le graph
getLabel(date0: Date): string
{
if((this.stepUnity === 'jour') && (this.step === 1))
{
return date0.toLocaleDateString();
}
else {
const time2 = this.addStep(date0.getTime()) - this.oneDay;
let date2 = new Date(time2);
return date0.toLocaleDateString() + " à " + date2.toLocaleDateString();
}
}
// Ajoute le bon pas à la date 'new Date(time)'
addStep(time: number): number
{
let newDate;
if(this.stepUnity === 'jour') {
newDate = new Date(time + this.step*this.oneDay);
}
else if(this.stepUnity === 'semaine') {
newDate = new Date(time + this.step*this.oneWeek);
}
else
{
const oldDate = new Date(time);
let newMonth = oldDate.getMonth() + this.step;
const newYear = oldDate.getFullYear() + (newMonth / 12);
newMonth = newMonth % 12;
const day = this.startDate.getDate();
if((newMonth === 1) && ([29, 30, 31].includes(day))) { // si fevrier et si jour n'existe pas
newDate = new Date(newYear, newMonth, 28);
}
else if((day === 31) && ([3, 5, 9, 10].includes(newMonth))) { // si 31 et mois à 30 jours
newDate = new Date(newYear, newMonth, 30);
}
else {
newDate = new Date(newYear, newMonth, day);
}
}
const _1h = 60*60*1000;
if(newDate.getHours() === 23) return newDate.getTime() + _1h;
else if(newDate.getHours() === 1) return newDate.getTime() - _1h;
else return newDate.getTime();
}
// Insere la date0 dans le tableau tabDate par ordre croissant
insertInOrder(tabDate: Date[], date0: Date): Date[]
{
let i = 0;
let n = tabDate.length;
let time0 = date0.getTime();
while((i <n) && (time0 > tabDate[i].getTime())) i++;
if(i === n) tabDate.push(date0);
else tabDate.splice(i, 0, date0);
return tabDate;
}
}

View file

@ -13,10 +13,10 @@
<a class="nav-link" routerLink="/advertiser/adList"> Gestion des annonces </a>
</li>
<li class="nav-item active monLi">
<a class="nav-link" routerLink="/advertiser/adList"> Popularité des annonces </a>
<a class="nav-link" routerLink="/advertiser/adsPopularity"> Popularité des annonces </a>
</li>
<li class="nav-item active monLi">
<a class="nav-link" routerLink="/advertiser/adList"> Popularité des domaines </a>
<a class="nav-link" routerLink="/advertiser/subjectsPopularity"> Popularité des domaines </a>
</li>
</ul>
</div>

View file

@ -23,6 +23,11 @@
}
.monLi {
margin: 0px 10px 0px 10px;
}
// Recherche, Mes Playlists, Historique
.nav-link {
color: white;
@ -32,21 +37,6 @@
}
// Bonton deconnexion
.btnDeconnexion {
font-size: medium;
margin: 0px 10px 0px 10px
}
.btnDeconnexion:hover {
color: grey;
}
.monLi {
margin: 0px 10px 0px 10px;
}
img {
border: solid 2px white;
border-radius: 50px;
@ -59,6 +49,16 @@ img:hover {
}
// Bonton deconnexion
.btnDeconnexion {
font-size: medium;
margin: 0px 10px 0px 10px
}
.btnDeconnexion:hover {
color: grey;
}
// --------------------------------------------------------------------

View file

@ -12,6 +12,7 @@ import {PageProfilAdminComponent} from "./admin/myProfil/page-profil-admin/page-
import {PageAdListAdminComponent} from "./admin/adList/page-ad-list-admin/page-ad-list-admin.component";
import {PageUserListComponent} from "./admin/userList/page-user-list/page-user-list.component";
import {PageWatchingVideoComponent} from "./user/watching/page-watching-video/page-watching-video.component";
import {PagesPopularityComponent} from "./advertiser/pages-popularity/pages-popularity.component";
const routes: Routes = [
@ -27,7 +28,6 @@ const routes: Routes = [
{ path: 'user/myPlaylists', component: PageMyPlaylistsComponent },
{ path: 'user/history', component: PageHistoryUserComponent },
{ path: 'user/myProfil', component: PageProfilUserComponent },
{ path: 'user/watching/fromSearch/:videoId/:source/:search', component: PageWatchingVideoComponent },
{ path: 'user/watching/fromMyPlaylists/:videoId/:_idPlaylist', component: PageWatchingVideoComponent },
{ path: 'user/watching/fromHistory/:videoId/:source', component: PageWatchingVideoComponent },
@ -36,6 +36,8 @@ const routes: Routes = [
{ path: 'advertiser', component: PageAdListAdvertiserComponent },
{ path: 'advertiser/adList', component: PageAdListAdvertiserComponent },
{ path: 'advertiser/myProfil', component: PageProfilAdvertiserComponent },
{ path: 'advertiser/adsPopularity', component: PagesPopularityComponent },
{ path: 'advertiser/subjectsPopularity', component: PagesPopularityComponent },
// Admin
{ path: 'admin', component: PageUserListComponent },

View file

@ -5,3 +5,20 @@
//color: green;
justify-content: center;
}
// aura
::ng-deep .mat-checkbox-ripple .mat-ripple-element {
background-color: grey !important;
}
// contenu coche
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: black !important;
}
// indeterminate
::ng-deep .mat-checkbox .mat-checkbox-frame {
border: solid 1px black !important;
background-color: white !important;
}

View file

@ -46,8 +46,8 @@ import { DragAndDropComponent } from './advertiser/adList/drag-and-drop/drag-and
import { DragAndDropDirective } from './utils/directives/dragAndDrop/drag-and-drop.directive';
import { PageProfilUserComponent } from './user/myProfil/page-profil-user/page-profil-user.component';
import { NavbarUserComponent } from './user/utils/components/navbar-user/navbar-user.component';
import { NavbarAdvertiserComponent } from './advertiser/navbar-advertiser/navbar-advertiser.component';
import { NavbarAdminComponent } from './admin/navbar-admin/navbar-admin.component';
import { NavbarAdvertiserComponent } from './advertiser/utils/components/navbar-advertiser/navbar-advertiser.component';
import { NavbarAdminComponent } from './admin/utils/components/navbar-admin/navbar-admin.component';
import { PageProfilAdvertiserComponent } from './advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component';
import { PopupUpdateAdvertiserComponent } from './advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component';
import { PopupUpdateUserComponent } from './user/myProfil/popup-update-user/popup-update-user.component';
@ -70,6 +70,8 @@ import { PopupCreateUserComponent } from './admin/userList/popup-create-user/pop
import { InputInterestsAdminComponent } from './admin/userList/input-interests-admin/input-interests-admin.component';
import { PageWatchingVideoComponent } from './user/watching/page-watching-video/page-watching-video.component';
import {MatDatepickerModule} from "@angular/material/datepicker";
import { PagesPopularityComponent } from './advertiser/pages-popularity/pages-popularity.component';
import { ChartsModule } from 'ng2-charts';
@NgModule({
@ -119,6 +121,7 @@ import {MatDatepickerModule} from "@angular/material/datepicker";
PopupCreateUserComponent,
InputInterestsAdminComponent,
PageWatchingVideoComponent,
PagesPopularityComponent,
],
imports: [
BrowserModule,
@ -148,6 +151,7 @@ import {MatDatepickerModule} from "@angular/material/datepicker";
MatStepperModule,
MatPaginatorModule,
MatDatepickerModule,
ChartsModule
],
providers: [],
bootstrap: [AppComponent]

View file

@ -21,7 +21,7 @@ export class VideoListComponent implements OnChanges
{
@Input() playlist: PlaylistDB;
videosInPlaylist: VideoAll[] = [];
allUserVideos: VideoAll[] = this.fictitiousVideosService.getAllVideoAll();
allUserVideos: VideoAll[] = this.fictitiousVideosService.get_TAB_VIDEO();
constructor( private messageService: MessageService,

View file

@ -66,7 +66,7 @@ export class PageWatchingVideoComponent implements OnInit
this.from = "myPlaylists";
const _idPlaylist = this.activatedRoute.snapshot.paramMap.get('_idPlaylist');
this.playlist = this.fictitiousVideosService.getPlaylistBy_id(_idPlaylist);
const allVideo = this.fictitiousVideosService.getAllVideoAll();
const allVideo = this.fictitiousVideosService.get_TAB_VIDEO();
this.videosInPlaylist = [];
for(let _idVideo of this.playlist.videoIds)
{

View file

@ -10,7 +10,28 @@ export interface Advert
}[],
interests: string[],
comment: string,
views: number,
views: Date[],
isVisible: boolean,
isActive: boolean,
createdAt: Date,
updatedAt: Date,
}
export interface AdvertWithCountViews {
_id: string,
userId: string,
title: string,
advertiser: string,
images: {
url: string,
description: string,
}[],
interests: string[],
comment: string,
views: Date[],
countViews: number,
isVisible: boolean,
isActive: boolean,
createdAt: Date,

View file

@ -4,7 +4,8 @@ export interface VideoDB
userId: string,
videoId: string,
source: string,
tags: String[],
tags: string[],
interest: string,
watchedDates: Date[],
createdAt: Date,
updatedAt: Date
@ -18,6 +19,7 @@ export interface VideoAll
videoId: string,
source: string,
tags: String[],
interest: string,
watchedDates: Date[],
createdAt: Date,
updatedAt: Date

View file

@ -17,7 +17,18 @@ const TAB_ADVERT: Advert[] = [
],
interests: [ "rock", "basket" ],
comment: "pub pour vacances de noêl",
views: 5,
views: [
new Date(2021,10,1),
new Date(2021,10,2),
new Date(2021,10,3),
new Date(2021,10,3),
new Date(2021,10,5),
new Date(2021,10,5),
new Date(2021,10,5),
new Date(2021,10,5),
new Date(2021,10,5),
new Date(2021,10,7)
],
isVisible: true,
isActive: true,
createdAt: new Date(),
@ -34,12 +45,51 @@ const TAB_ADVERT: Advert[] = [
],
interests: [ "rock", "rap" ],
comment: "pub pour cette année",
views: 2,
views: [
new Date(2021,10,5),
new Date(2021,10,6),
new Date(2021,10,7),
new Date(2021,10,8),
new Date(2021,10,8),
new Date(2021,10,8),
new Date(2021,10,25),
new Date(2021,10,25),
new Date(2021,10,25),
new Date(2021,10,27)
],
isVisible: true,
isActive: true,
createdAt: new Date(),
updatedAt: new Date(),
},
{
_id: "idAlbion",
userId: "userId",
title: "Albion new version",
advertiser: "albion",
images: [
{ url: "rolex_v_1.jpg", description: "albion 1" },
{ url: "rolex_v_2.png", description: "albion 2" },
],
interests: [ "rock", "rap" ],
comment: "pub pour cette année",
views: [
new Date(2021,10,3),
new Date(2021,10,4),
new Date(2021,10,4),
new Date(2021,10,5),
new Date(2021,10,5),
new Date(2021,10,6),
new Date(2021,10,6),
new Date(2021,10,8),
new Date(2021,10,8),
new Date(2021,10,8)
],
isVisible: true,
isActive: true,
createdAt: new Date(),
updatedAt: new Date(),
}
];
@ -71,4 +121,10 @@ export class FictitiousAdvertsService
return tabAdvert;
}
get_TAB_ADVERT(): Advert[]
{
return TAB_ADVERT;
}
}

View file

@ -13,7 +13,15 @@ const TAB_VIDEO: VideoAll[] = [
userId: "userId",
source: "youtube",
tags: [ "rap", "musique" ],
watchedDates: [new Date()],
interest: "PNL",
watchedDates: [
new Date(2021, 10, 15),
new Date(2021, 10, 16),
new Date(2021, 10, 17),
new Date(2021, 10, 18),
new Date(2021, 10, 19),
new Date(2021, 10, 20),
],
createdAt: new Date(),
updatedAt: new Date(),
@ -30,6 +38,7 @@ const TAB_VIDEO: VideoAll[] = [
userId: "userId",
source: "youtube",
tags: [ "rap", "musique" ],
interest: "PNL",
watchedDates: [new Date()],
createdAt: new Date(),
updatedAt: new Date(),
@ -47,6 +56,7 @@ const TAB_VIDEO: VideoAll[] = [
userId: "userId",
source: "youtube",
tags: [ "rap", "musique" ],
interest: "PNL",
watchedDates: [new Date()],
createdAt: new Date(),
updatedAt: new Date(),
@ -64,6 +74,7 @@ const TAB_VIDEO: VideoAll[] = [
userId: "userId",
source: "youtube",
tags: [ "rap", "musique" ],
interest: "PNL",
watchedDates: [new Date()],
createdAt: new Date(),
updatedAt: new Date(),
@ -81,6 +92,7 @@ const TAB_VIDEO: VideoAll[] = [
userId: "userId",
source: "dailymotion",
tags: [ "rap", "musique" ],
interest: "PNL",
watchedDates: [new Date()],
createdAt: new Date(),
updatedAt: new Date(),
@ -98,6 +110,7 @@ const TAB_VIDEO: VideoAll[] = [
userId: "userId",
source: "youtube",
tags: [ "rap", "musique" ],
interest: "Nekfeu",
watchedDates: [new Date()],
createdAt: new Date(),
updatedAt: new Date(),
@ -115,6 +128,7 @@ const TAB_VIDEO: VideoAll[] = [
userId: "userId",
source: "youtube",
tags: [ "rap", "musique" ],
interest: "Nekfeu",
watchedDates: [new Date()],
createdAt: new Date(),
updatedAt: new Date(),
@ -132,6 +146,7 @@ const TAB_VIDEO: VideoAll[] = [
userId: "userId",
source: "youtube",
tags: [ "rap", "musique" ],
interest: "Nekfeu",
watchedDates: [new Date()],
createdAt: new Date(),
updatedAt: new Date(),
@ -149,6 +164,7 @@ const TAB_VIDEO: VideoAll[] = [
userId: "userId",
source: "dailymotion",
tags: [ "rap", "musique" ],
interest: "Columbine",
watchedDates: [new Date()],
createdAt: new Date(),
updatedAt: new Date(),
@ -166,6 +182,7 @@ const TAB_VIDEO: VideoAll[] = [
userId: "userId",
source: "dailymotion",
tags: [ "rap", "musique" ],
interest: "Columbine",
watchedDates: [new Date()],
createdAt: new Date(),
updatedAt: new Date(),
@ -210,7 +227,7 @@ export class FictitiousVideosService
}
getAllVideoAll(): VideoAll[]
get_TAB_VIDEO(): VideoAll[]
{
return TAB_VIDEO;
}

View file

@ -29,3 +29,24 @@ body { margin: 0; }
-o-background-size: cover;
background-size: cover;
}
// -------------------------------------------------------------------------
// aura
::ng-deep .mat-checkbox-ripple .mat-ripple-element {
background-color: grey !important;
}
// contenu coche
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: black !important;
}
// indeterminate
::ng-deep .mat-checkbox .mat-checkbox-frame {
border: solid 1px black !important;
background-color: white !important;
}