correction des pages 'adsPopularity' et 'subjectsPopularity'

This commit is contained in:
MiharyR 2022-01-01 12:41:04 +01:00
parent a9eaa3d93e
commit 89e35a1fbb
7 changed files with 120 additions and 89 deletions

View file

@ -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: &nbsp;
<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>
&nbsp; - &nbsp;
<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">

View file

@ -50,7 +50,6 @@ td {
}
input {
width: 30%;
font-size: large;
border-radius: 5px;
}

View file

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

View file

@ -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>
&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 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>
&nbsp; - &nbsp;
<!-- 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>
&nbsp; - &nbsp;

View file

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

View file

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

View file

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