correction des pages 'adsPopularity' et 'subjectsPopularity'

src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html

@@ -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;">
+                        <div class="col-6" style="text-align: right; font-size: small;">
-                            Période de création: &nbsp;
+                            <mat-form-field appearance="fill">
-                            <mat-form-field appearance="fill" style="width: 140px;">
+                                <mat-label>Période de date de création</mat-label>
-                                <mat-label>Date de début</mat-label>
+                                <mat-date-range-input
-                                <input matInput type="date"
+                                        [formGroup]="campaignOne"
-                                       style="font-size: small; width: 140px;"
+                                        [rangePicker]="campaignOnePicker">
-                                       [ngModel] ="startDate | date:'yyyy-MM-dd'"
+                                    <input matStartDate placeholder="Start date" formControlName="start" style="font-size: small;">
-                                       (ngModelChange)="onNewStartDate($event); onFilter();">
+                                    <input matEndDate placeholder="End date" formControlName="end" style="font-size: small;">
-                            </mat-form-field>
+                                </mat-date-range-input>
-                            &nbsp; - &nbsp;
+                                <mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
-                            <mat-form-field appearance="fill" style="width: 140px;">
+                                <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
-                                <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();">
                             </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">

src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.scss

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

src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts

@@ -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;
+    filteredText: string = "" ;
-    endDate: Date = null;
+    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;
+            // filtre textuelle
-
+            let valide: boolean = this.isTextFiltrationValid(advert);
-            if(advert.isVisible && this.visible) valide = true;
-            else if((!advert.isVisible) && this.noVisible) valide = true;
-            else valide = false;
 
+            // filtre visible
             if(valide)
             {
-                if ((advert.createdAt === null) && (this.startDate !== null)) valide = false;
+                if(advert.isVisible && this.visible) valide = true;
-                else if ((advert.createdAt === null) && (this.endDate !== null)) valide = false;
+                else if((!advert.isVisible) && this.noVisible) valide = true;
-                else if (this.startDate !== null)
+                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;
+                    let timeCreatedAt = 0;
-                    else if (this.endDate !== null)
+                    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 {
+    isTextFiltrationValid(advert): boolean
-        this.startDate = new Date(event);
+    {
-    }
+        let datePipe = new DatePipe('en-GB');
-
+        if(advert.title.includes(this.filteredText)) return true;
-    onNewEndDate(event): void {
+        const createdAt = datePipe.transform(new Date(advert.createdAt), 'dd/MM/yyyy à HH:mm:ss');
-        this.endDate = new Date(event);
+        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();
+    }
+
 }

src/app/advertiser/pages-popularity/pages-popularity.component.html

@@ -48,23 +48,23 @@
 <ng-template #colPeriode>
 
     <!-- startDate -->
-    <mat-form-field appearance="fill" style="width: 140px;">
+    <mat-form-field appearance="fill">
-        <mat-label>début</mat-label>
+        <mat-label>Période de date de création</mat-label>
-        <input matInput type="date" [ngModel] ="startDate | date:'yyyy-MM-dd'" (ngModelChange)="onNewStartDate($event);">
+        <mat-date-range-input
-    </mat-form-field>
+                [formGroup]="campaignOne"
-    &nbsp; - &nbsp;
+                [rangePicker]="campaignOnePicker">
-
+            <input matStartDate placeholder="Start date" formControlName="start" style="font-size: small;">
-    <!-- endDate -->
+            <input matEndDate placeholder="End date" formControlName="end" style="font-size: small;">
-    <mat-form-field appearance="fill" style="width: 140px;">
+        </mat-date-range-input>
-        <mat-label>fin</mat-label>
+        <mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
-        <input matInput type="date" [ngModel] ="endDate | date:'yyyy-MM-dd'" (ngModelChange)="onNewEndDate($event);">
+        <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;
 

src/app/advertiser/pages-popularity/pages-popularity.component.ts

@@ -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;
+    oneDay: number = 24*60*60*1000;
-    endDate: Date = null;
+    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;
+        let startDate = this.campaignOne.get("start").value;
-        if((this.endDate === null) || (this.endDate === undefined)) this.endDate = new Date();
+        let endDate = this.campaignOne.get("end").value;
-        if((this.startDate === null) || (this.startDate === undefined)) this.startDate = new Date(this.endDate.getTime() - this.oneWeek); // date d'il y a une semaine
+        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 startTime = startDate.getTime();
-        const endTime = this.endDate.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;
-    }
+        console.log(this.lineChartLabels);
-
-
-    onNewStartDate(event): void {
-        this.startDate = new Date(event);
-    }
-
-
-    onNewEndDate(event): void {
-        this.endDate = new Date(event);
     }
 
 
@@ -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 {

src/app/app.module.ts

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

src/app/user/search/page-search/page-search.component.html

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