correction des pages 'adsPopularity' et 'subjectsPopularity'
This commit is contained in:
parent
a9eaa3d93e
commit
89e35a1fbb
7 changed files with 120 additions and 89 deletions
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<!-- filtre textuelle-->
|
||||
<div style="margin: 10px 0px 20px 2%;">
|
||||
<input class="textFilter" (keyup)="applyFilter($event)" placeholder="filtre...">
|
||||
<input class="textFilter" [(ngModel)]="filteredText" (ngModelChange)="onFilter()" placeholder="Rechercher par mots-clés...">
|
||||
</div>
|
||||
|
||||
<!-- role + actif + période -->
|
||||
|
|
@ -60,23 +60,24 @@
|
|||
|
||||
|
||||
<!-- période -->
|
||||
<div class="col-6" style="text-align: right;">
|
||||
Période de création:
|
||||
<mat-form-field appearance="fill" style="width: 140px;">
|
||||
<mat-label>Date de début</mat-label>
|
||||
<input matInput type="date"
|
||||
style="font-size: small; width: 140px;"
|
||||
[ngModel] ="startDate | date:'yyyy-MM-dd'"
|
||||
(ngModelChange)="onNewStartDate($event); onFilter();">
|
||||
</mat-form-field>
|
||||
-
|
||||
<mat-form-field appearance="fill" style="width: 140px;">
|
||||
<mat-label>Date de fin</mat-label>
|
||||
<input matInput type="date"
|
||||
style="font-size: small; width: 140px;"
|
||||
[ngModel] ="endDate | date:'yyyy-MM-dd'"
|
||||
(ngModelChange)="onNewEndDate($event); onFilter();">
|
||||
<div class="col-6" style="text-align: right; font-size: small;">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Période de date de création</mat-label>
|
||||
<mat-date-range-input
|
||||
[formGroup]="campaignOne"
|
||||
[rangePicker]="campaignOnePicker">
|
||||
<input matStartDate placeholder="Start date" formControlName="start" style="font-size: small;">
|
||||
<input matEndDate placeholder="End date" formControlName="end" style="font-size: small;">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
<button mat-icon-button (click)="onFilter()">
|
||||
<mat-icon>keyboard_tab</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="onEffacerDate()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -171,9 +172,6 @@
|
|||
<!-- Directives -->
|
||||
<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>
|
||||
<div style="width: 94%; margin: auto auto">
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@ td {
|
|||
}
|
||||
|
||||
input {
|
||||
width: 30%;
|
||||
font-size: large;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,11 @@ import {MatSnackBar} from "@angular/material/snack-bar";
|
|||
import {PopupDeleteAdAdvertiserComponent} from "../popup-delete-ad-advertiser/popup-delete-ad-advertiser.component";
|
||||
import {MatPaginator} from "@angular/material/paginator";
|
||||
import {PopupVisualizeImagesAdvertiserComponent} from "../popup-visualize-images-advertiser/popup-visualize-images-advertiser.component";
|
||||
import {FormControl} from "@angular/forms";
|
||||
import {FormControl, FormGroup} from "@angular/forms";
|
||||
import {HttpParams} from "@angular/common/http";
|
||||
import {ThemeService} from "../../../utils/theme/theme.service";
|
||||
import {MessageService} from "../../../utils/message/message.service";
|
||||
import {DatePipe} from "@angular/common";
|
||||
|
||||
|
||||
|
||||
|
|
@ -29,8 +30,11 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
|
|||
|
||||
visible: boolean = true;
|
||||
noVisible: boolean = true;
|
||||
startDate: Date = null;
|
||||
endDate: Date = null;
|
||||
filteredText: string = "" ;
|
||||
campaignOne = new FormGroup({
|
||||
start: new FormControl(null),
|
||||
end: new FormControl(null),
|
||||
});
|
||||
formControlInterests = new FormControl();
|
||||
|
||||
allVideoCategorie = [];
|
||||
|
|
@ -89,13 +93,6 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
|
|||
}
|
||||
|
||||
|
||||
applyFilter(event: Event): void
|
||||
{
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
|
||||
onVisualizeImages(advert: any)
|
||||
{
|
||||
if(advert.images.length !== 0)
|
||||
|
|
@ -214,30 +211,43 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
|
|||
|
||||
onFilter(): void
|
||||
{
|
||||
const startDate = this.campaignOne.get("start").value;
|
||||
const endDate = this.campaignOne.get("end").value;
|
||||
|
||||
if(this.dataSource === null || this.dataSource === undefined) this.dataSource = new MatTableDataSource();
|
||||
this.dataSource.data = [];
|
||||
for(let advert of this.tabAdvertWithCountViews)
|
||||
{
|
||||
let valide: boolean = true;
|
||||
|
||||
if(advert.isVisible && this.visible) valide = true;
|
||||
else if((!advert.isVisible) && this.noVisible) valide = true;
|
||||
else valide = false;
|
||||
// filtre textuelle
|
||||
let valide: boolean = this.isTextFiltrationValid(advert);
|
||||
|
||||
// filtre visible
|
||||
if(valide)
|
||||
{
|
||||
if ((advert.createdAt === null) && (this.startDate !== null)) valide = false;
|
||||
else if ((advert.createdAt === null) && (this.endDate !== null)) valide = false;
|
||||
else if (this.startDate !== null)
|
||||
if(advert.isVisible && this.visible) valide = true;
|
||||
else if((!advert.isVisible) && this.noVisible) valide = true;
|
||||
else valide = false;
|
||||
}
|
||||
|
||||
// filtre date
|
||||
if(valide)
|
||||
{
|
||||
if ((advert.createdAt === null) && (startDate !== null)) valide = false;
|
||||
else if ((advert.createdAt === null) && (endDate !== null)) valide = false;
|
||||
else if (startDate !== null)
|
||||
{
|
||||
if(this.startDate.getTime() > advert.createdAt.getTime()) valide = false;
|
||||
else if (this.endDate !== null)
|
||||
let timeCreatedAt = 0;
|
||||
if(advert.createdAt !== null) timeCreatedAt = (new Date(advert.createdAt)).getTime();
|
||||
|
||||
if(startDate.getTime() > timeCreatedAt) valide = false;
|
||||
else if (endDate !== null)
|
||||
{
|
||||
if(this.endDate.getTime() < advert.createdAt.getTime()) valide = false;
|
||||
if(endDate.getTime() < timeCreatedAt) valide = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// filtre interests
|
||||
if(valide) {
|
||||
if(this.formControlInterests.value !== null) {
|
||||
for (let interest of this.formControlInterests.value) {
|
||||
|
|
@ -258,12 +268,16 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
|
|||
}
|
||||
|
||||
|
||||
onNewStartDate(event): void {
|
||||
this.startDate = new Date(event);
|
||||
}
|
||||
|
||||
onNewEndDate(event): void {
|
||||
this.endDate = new Date(event);
|
||||
isTextFiltrationValid(advert): boolean
|
||||
{
|
||||
let datePipe = new DatePipe('en-GB');
|
||||
if(advert.title.includes(this.filteredText)) return true;
|
||||
const createdAt = datePipe.transform(new Date(advert.createdAt), 'dd/MM/yyyy à HH:mm:ss');
|
||||
if(createdAt.includes(this.filteredText)) return true;
|
||||
const updatedAt = datePipe.transform(new Date(advert.updatedAt), 'dd/MM/yyyy à HH:mm:ss');
|
||||
if(updatedAt.includes(this.filteredText)) return true;
|
||||
if(advert.countViews.toString().includes(this.filteredText)) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -301,4 +315,10 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
onEffacerDate(): void {
|
||||
this.campaignOne.setValue({start: null, end: null });
|
||||
this.onFilter();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,23 +48,23 @@
|
|||
<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>
|
||||
-
|
||||
|
||||
<!-- 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 appearance="fill">
|
||||
<mat-label>Période de date de création</mat-label>
|
||||
<mat-date-range-input
|
||||
[formGroup]="campaignOne"
|
||||
[rangePicker]="campaignOnePicker">
|
||||
<input matStartDate placeholder="Start date" formControlName="start" style="font-size: small;">
|
||||
<input matEndDate placeholder="End date" formControlName="end" style="font-size: small;">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
-
|
||||
|
||||
<!-- step -->
|
||||
<mat-form-field appearance="fill" style="width: 140px;">
|
||||
<mat-label>pas d'affichage</mat-label>
|
||||
<input matInput type="number" [(ngModel)] =step>
|
||||
<input matInput type="number" [(ngModel)]=step min="1">
|
||||
</mat-form-field>
|
||||
-
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {FormControl} from "@angular/forms";
|
||||
import {FormControl, FormGroup} from "@angular/forms";
|
||||
import {ChartDataSets} from "chart.js";
|
||||
import {Label} from "ng2-charts";
|
||||
import { Router} from "@angular/router";
|
||||
|
|
@ -28,13 +28,16 @@ export class PagesPopularityComponent implements OnInit
|
|||
|
||||
allInterests: string[] = [];
|
||||
|
||||
startDate: Date = null;
|
||||
endDate: Date = null;
|
||||
oneDay: number = 24*60*60*1000;
|
||||
oneWeek: number = 7*24*60*60*1000;
|
||||
|
||||
campaignOne = new FormGroup({
|
||||
start: new FormControl(new Date(((new Date()).getTime() - this.oneWeek))),
|
||||
end: new FormControl(new Date()),
|
||||
});
|
||||
step: number = 1;
|
||||
stepUnity: string = "jour" ;
|
||||
|
||||
oneDay: number = 24*60*60*1000;
|
||||
oneWeek: number = 7*24*60*60*1000;
|
||||
|
||||
lineChartData: ChartDataSets[] = [];
|
||||
lineChartLabels: Label[] = [];
|
||||
|
|
@ -59,6 +62,18 @@ export class PagesPopularityComponent implements OnInit
|
|||
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Initialisation de campaignOne
|
||||
let today00h00Date = new Date();
|
||||
today00h00Date.setHours(0);
|
||||
today00h00Date.setMinutes(0);
|
||||
today00h00Date.setSeconds(0);
|
||||
today00h00Date.setMilliseconds(0);
|
||||
this.campaignOne = new FormGroup({
|
||||
start: new FormControl(new Date(today00h00Date.getTime() - this.oneWeek)),
|
||||
end: new FormControl(today00h00Date),
|
||||
});
|
||||
|
||||
|
||||
// Sera excuté si on est sur la page 'adsPopularity'
|
||||
// Remplie l'attribut 'allCoupleNameViews'
|
||||
if(this.router.url.includes("ads"))
|
||||
|
|
@ -70,6 +85,7 @@ export class PagesPopularityComponent implements OnInit
|
|||
.subscribe(ret => this.afterReceivingAds(ret), err => this.afterReceivingAds(err));
|
||||
}
|
||||
|
||||
|
||||
// Sera excuté si on est sur la page 'subjectsPopularity'
|
||||
// Remplie l'attribut 'allCoupleNameViews'
|
||||
else if(this.router.url.includes("subjects"))
|
||||
|
|
@ -83,7 +99,6 @@ export class PagesPopularityComponent implements OnInit
|
|||
}
|
||||
else {
|
||||
this.allInterests = retour.data.map(x => x.interest);
|
||||
this.allInterests.sort();
|
||||
this.messageService
|
||||
.get("video/findAll")
|
||||
.subscribe(ret => this.afterReceivingVideos(ret), err => this.afterReceivingVideos(err));
|
||||
|
|
@ -164,18 +179,20 @@ export class PagesPopularityComponent implements OnInit
|
|||
this.lineChartData = [];
|
||||
this.lineChartLabels = [];
|
||||
|
||||
if(this.step <= 0) this.step = 0;
|
||||
if((this.endDate === null) || (this.endDate === undefined)) this.endDate = new Date();
|
||||
if((this.startDate === null) || (this.startDate === undefined)) this.startDate = new Date(this.endDate.getTime() - this.oneWeek); // date d'il y a une semaine
|
||||
let startDate = this.campaignOne.get("start").value;
|
||||
let endDate = this.campaignOne.get("end").value;
|
||||
if(this.step <= 0) this.step = 1;
|
||||
if((endDate === null) || (endDate === undefined)) endDate = new Date();
|
||||
if((startDate === null) || (startDate === undefined)) startDate = new Date(endDate.getTime() - this.oneWeek); // date d'il y a une semaine
|
||||
|
||||
const startTime = this.startDate.getTime();
|
||||
const endTime = this.endDate.getTime();
|
||||
const startTime = startDate.getTime();
|
||||
const endTime = endDate.getTime();
|
||||
|
||||
|
||||
// --- remplissage de 'lineChartLabels' ---
|
||||
let dataWithZeros = [];
|
||||
let time = startTime;
|
||||
const intervals = [];
|
||||
let intervals = [];
|
||||
while(time <= endTime)
|
||||
{
|
||||
dataWithZeros.push(0);
|
||||
|
|
@ -186,7 +203,7 @@ export class PagesPopularityComponent implements OnInit
|
|||
intervals.push(time);
|
||||
|
||||
|
||||
// --- remplissage de 'lineChartLabels' ---
|
||||
// --- remplissage de 'lineChartData' ---
|
||||
for(let coupleNameViews of this.formControl.value)
|
||||
{
|
||||
let data = dataWithZeros.slice();
|
||||
|
|
@ -197,11 +214,14 @@ export class PagesPopularityComponent implements OnInit
|
|||
{
|
||||
const time0 = (new Date(date0)).getTime();
|
||||
|
||||
if(time0 > endTime) break;
|
||||
if(time0 > (endTime+this.oneDay)) break;
|
||||
|
||||
if((startTime <= time0) && (time0 <= endTime))
|
||||
if((startTime <= time0) && (time0 <= (endTime+this.oneDay)))
|
||||
{
|
||||
while((index < intervals.length) && (time0 >= intervals[index])) index += 1;
|
||||
console.log("index:" + index);
|
||||
//console.log("index < intervals.length : " + (index < intervals.length));
|
||||
//console.log("time0 >= intervals[index] : " + (time0 >= intervals[index]));
|
||||
index = index - 1;
|
||||
data[index] += 1;
|
||||
}
|
||||
|
|
@ -210,16 +230,7 @@ export class PagesPopularityComponent implements OnInit
|
|||
this.lineChartData.push({"data": data.slice(), "label": label});
|
||||
}
|
||||
this.isDisplayable = true;
|
||||
}
|
||||
|
||||
|
||||
onNewStartDate(event): void {
|
||||
this.startDate = new Date(event);
|
||||
}
|
||||
|
||||
|
||||
onNewEndDate(event): void {
|
||||
this.endDate = new Date(event);
|
||||
console.log(this.lineChartLabels);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -256,12 +267,13 @@ export class PagesPopularityComponent implements OnInit
|
|||
let newMonth = oldDate.getMonth() + this.step;
|
||||
const newYear = oldDate.getFullYear() + (newMonth / 12);
|
||||
newMonth = newMonth % 12;
|
||||
const day = this.startDate.getDate();
|
||||
const startDate = this.campaignOne.get("start").value;
|
||||
const day = 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
|
||||
else if((day === 31) && ([3, 5, 8, 10].includes(newMonth))) { // si 31 et mois à 30 jours
|
||||
newDate = new Date(newYear, newMonth, 30);
|
||||
}
|
||||
else {
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ import {PageRegisterComponent} from "./beforeConnexion/register/page-register/pa
|
|||
import {PopupConfirmationComponent} from "./beforeConnexion/register/popup-confirmation/popup-confirmation.component";
|
||||
import {NavbarBeforeConnexionComponent} from "./beforeConnexion/utils/navbar-before-connexion/navbar-before-connexion.component";
|
||||
import {MatStepperModule} from "@angular/material/stepper";
|
||||
import {MAT_DATE_LOCALE, MatNativeDateModule} from "@angular/material/core";
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
|
@ -123,9 +124,10 @@ import {MatStepperModule} from "@angular/material/stepper";
|
|||
MatPaginatorModule,
|
||||
MatDatepickerModule,
|
||||
ChartsModule,
|
||||
MatStepperModule
|
||||
MatStepperModule,
|
||||
MatNativeDateModule
|
||||
],
|
||||
providers: [],
|
||||
providers: [{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
<!-- pub droite -->
|
||||
<mat-grid-tile colspan="2" rowspan="1" class="cellulePub">
|
||||
<div class="conteneurPub">
|
||||
<app-advert [ad]="ad1"></app-advert>
|
||||
<app-advert [ad]="ad2"></app-advert>
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
|
||||
|
|
|
|||
Reference in a new issue