continuation de la partie advertiser

package.json

@@ -14,8 +14,10 @@
   "dependencies": {
     "@angular/animations": "^12.2.11",
     "@angular/cdk": "^12.2.11",
+    "@angular/cli": "~12.2.11",
     "@angular/common": "^12.2.11",
     "@angular/compiler": "^12.2.11",
+    "@angular/compiler-cli": "~12.2.11",
     "@angular/core": "^12.2.11",
     "@angular/forms": "^12.2.11",
     "@angular/material": "^12.2.11",
@@ -24,28 +26,27 @@
     "@angular/router": "^12.2.11",
     "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "angular-responsive-carousel": "^2.1.2",
-    "bootstrap": "^5.1.3",
-    "jquery": "^3.6.0",
-    "popper": "^1.0.1",
-    "rxjs": "~6.6.0",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.11.3",
-    "@angular/cli": "~12.2.11",
-    "@angular/compiler-cli": "~12.2.11",
-    "typescript": "~4.3.5",
     "body-parser": "^1.19.0",
+    "bootstrap": "^5.1.3",
+    "chart.js": "^2.9.3",
     "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",
     "dotenv": "^10.0.0",
     "express": "^4.17.1",
+    "jquery": "^3.6.0",
     "jsonwebtoken": "^8.5.1",
-    "mongoose": "^6.0.12"
+    "mongoose": "^6.0.12",
+    "ng2-charts": "^2.2.3",
+    "popper": "^1.0.1",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.0.0",
+    "typescript": "~4.3.5",
+    "zone.js": "~0.11.3"
   },
   "devDependencies": {
+    "@angular-devkit/build-angular": "~12.2.11",
     "@angular/cli": "~12.2.11",
     "@angular/compiler-cli": "~12.2.11",
-    "typescript": "~4.3.5",
-    "@angular-devkit/build-angular": "~12.2.11",
     "@angular/localize": "^12.2.11",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
@@ -59,6 +60,7 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
-    "tslint": "~6.1.0"
+    "tslint": "~6.1.0",
+    "typescript": "~4.3.5"
   }
 }

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

@@ -120,11 +120,11 @@
                 </td>
             </ng-container>
 
-            <!-- Views Column -->
+            <!-- CountViews 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>
 

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

@@ -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 {Advert, AdvertWithCountViews} from "../../../utils/interfaces/advert";
-import {PopupVisualizeAdAdminComponent} from "../popup-visualize-ad-admin/popup-visualize-ad-admin.component";
 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[];
+    tabAdvertWithCountViews: AdvertWithCountViews[] = [];
-    displayedColumns: string[] = [ 'title', 'advertiser', 'interests', 'createdAt', 'updatedAt', 'views', 'isVisible', 'actions' ];
+    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
+    onDelete(advert: AdvertWithCountViews): void
-    {
-        const config = {
-            width: '50%',
-            data: { advert: advert }
-        };
-        this.dialog
-            .open(PopupVisualizeAdAdminComponent, config)
-            .afterClosed()
-            .subscribe(retour => {});
-    }
-
-
-    onDelete(advert: Advert): 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,
+        }
+    }
+
 }

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

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

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

@@ -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' ];
+    displayedColumns: string[] = [ 'isVisible', 'title', 'interests', 'createdAt', 'updatedAt', 'countViews', 'actions' ];
-    tabAdvert: Advert[] = [];
+    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,
+        }
+    }
+
 }

src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts

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

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

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

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

@@ -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;
+}

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

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

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

@@ -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;
+    }
+
+}

src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html

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

src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss

@@ -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;
+}
+
+
 // --------------------------------------------------------------------
 
 

src/app/app-routing.module.ts

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

src/app/app.component.scss

@@ -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;
+}

src/app/app.module.ts

@@ -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 { NavbarAdvertiserComponent } from './advertiser/utils/components/navbar-advertiser/navbar-advertiser.component';
-import { NavbarAdminComponent } from './admin/navbar-admin/navbar-admin.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]

src/app/user/myPlaylists/video-list/video-list.component.ts

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

src/app/user/watching/page-watching-video/page-watching-video.component.ts

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

src/app/utils/interfaces/advert.ts

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

src/app/utils/interfaces/video.ts

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

src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts

@@ -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;
+    }
+
 }

src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts

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

src/styles.scss

@@ -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;
+}