From 1643f3f3367d5b69d0adf286432a0d63bdbada2e Mon Sep 17 00:00:00 2001
From: MiharyR <mihary.rnvsn@gmail.com>
Date: Tue, 23 Nov 2021 12:52:22 +0100
Subject: [PATCH 1/5] amelioration de la partie advertiser

---
 .../page-ad-list-admin.component.html         |  26 ++--
 .../page-ad-list-admin.component.scss         |   2 +-
 .../page-ad-list-admin.component.ts           |  23 ++-
 .../popup-visualize-ad-admin.component.html   |   2 +-
 .../page-user-list.component.scss             |   2 +-
 .../drag-and-drop.component.html              |   4 +-
 .../drag-and-drop/drag-and-drop.component.ts  |   2 +-
 .../input-interests-ad.component.html}        |   4 +-
 .../input-interests-ad.component.scss}        |   0
 .../input-interests-ad.component.spec.ts}     |  10 +-
 .../input-interests-ad.component.ts}          |   8 +-
 .../page-ad-list-advertiser.component.html    | 133 ++++++++++++++----
 .../page-ad-list-advertiser.component.scss    |  79 ++++++++---
 .../page-ad-list-advertiser.component.ts      |  90 ++++++++++--
 .../popup-add-or-update-ad.component.html     |  70 ++++++---
 .../popup-add-or-update-ad.component.scss     |   5 +-
 .../popup-add-or-update-ad.component.ts       |  33 ++---
 ...pup-visualize-ad-advertiser.component.html |   2 +-
 .../navbar-advertiser.component.html          |   3 +
 src/app/app.module.ts                         |   4 +-
 src/app/utils/interfaces/advert.ts            |   2 +-
 .../fictitious-adverts.service.ts             |   6 +-
 22 files changed, 357 insertions(+), 153 deletions(-)
 rename src/app/advertiser/adList/{input-tags/input-tags.component.html => input-interests-ad/input-interests-ad.component.html} (92%)
 rename src/app/advertiser/adList/{input-tags/input-tags.component.scss => input-interests-ad/input-interests-ad.component.scss} (100%)
 rename src/app/advertiser/adList/{input-tags/input-tags.component.spec.ts => input-interests-ad/input-interests-ad.component.spec.ts} (57%)
 rename src/app/advertiser/adList/{input-tags/input-tags.component.ts => input-interests-ad/input-interests-ad.component.ts} (92%)

diff --git a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
index 41e464d..264088f 100644
--- a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
+++ b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
@@ -21,7 +21,7 @@
                 <input class="textFilter" (keyup)="applyFilter($event)" placeholder="filtre...">
             </div>
 
-            <!-- visible + tags + période -->
+            <!-- visible + interests + période -->
             <div class="row myRow">
 
                 <!-- visible -->
@@ -30,18 +30,18 @@
                     <mat-checkbox [(ngModel)]="noVisible" (change)="onFilter()">non visible</mat-checkbox>
                 </div>
 
-                <!-- tags -->
+                <!-- subjects -->
                 <div class="col-4">
                     <mat-form-field appearance="fill">
-                        <mat-label>Tags</mat-label>
-                        <mat-select [formControl]="formControlTags" multiple>
+                        <mat-label>Sujets</mat-label>
+                        <mat-select [formControl]="formControlInterests" multiple>
                             <mat-select-trigger>
-                                {{formControlTags.value ? formControlTags.value[0] : ''}}
-                                <span *ngIf="formControlTags.value?.length > 1">
-                                    (+{{formControlTags.value.length - 1}} {{formControlTags.value?.length === 2 ? 'autre' : 'autres'}})
+                                {{formControlInterests.value ? formControlInterests.value[0] : ''}}
+                                <span *ngIf="formControlInterests.value?.length > 1">
+                                    (+{{formControlInterests.value.length - 1}} {{formControlInterests.value?.length === 2 ? 'autre' : 'autres'}})
                                 </span>
                             </mat-select-trigger>
-                            <mat-option *ngFor="let topping of allTags" [value]="topping">{{topping}}</mat-option>
+                            <mat-option *ngFor="let topping of allInterests" [value]="topping">{{topping}}</mat-option>
                         </mat-select>
                     </mat-form-field>
                     <button mat-icon-button (click)="onFilter()">
@@ -94,12 +94,12 @@
             </ng-container>
 
             <!-- Tags Column -->
-            <ng-container matColumnDef="tags">
-                <th mat-header-cell *matHeaderCellDef> Tags </th>
+            <ng-container matColumnDef="interests">
+                <th mat-header-cell *matHeaderCellDef> Sujets </th>
                 <td mat-cell *matCellDef="let advert">
-                    <span *ngFor="let tag of advert.tags; let isLast = last;">
-                        <span *ngIf="!isLast"> {{tag}}, </span>
-                        <span *ngIf="isLast"> {{tag}} </span>
+                    <span *ngFor="let interest of advert.interests; let isLast = last;">
+                        <span *ngIf="!isLast"> {{interest}}, </span>
+                        <span *ngIf="isLast"> {{interest}} </span>
                     </span>
                 </td>
             </ng-container>
diff --git a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.scss b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.scss
index e79c543..822f4d0 100644
--- a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.scss
+++ b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.scss
@@ -9,7 +9,7 @@
 
 
 .filtersContainer {
-  width: 70%;
+  width: 80%;
   background-color: white;
   padding: 10px 10px 10px 10px;
   margin: 20px 3% 20px 3%
diff --git a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts
index c692fbe..d8c950f 100644
--- a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts
+++ b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts
@@ -23,7 +23,7 @@ import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fi
 export class PageAdListAdminComponent implements AfterViewInit
 {
     tabAdvert: Advert[];
-    displayedColumns: string[] = [ 'title', 'advertiser', 'tags', 'createdAt', 'updatedAt', 'views', 'isVisible', 'actions' ];
+    displayedColumns: string[] = [ 'title', 'advertiser', 'interests', 'createdAt', 'updatedAt', 'views', 'isVisible', 'actions' ];
     dataSource ;
     @ViewChild(MatSort) sort: MatSort;
     @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -32,8 +32,8 @@ export class PageAdListAdminComponent implements AfterViewInit
     noVisible: boolean = true;
     startDate: Date = null;
     endDate: Date = null;
-    formControlTags = new FormControl();
-    allTags: string[] = [];
+    formControlInterests = new FormControl();
+    allInterests: string[] = [];
 
 
     constructor( public themeService: ThemeService,
@@ -47,11 +47,10 @@ export class PageAdListAdminComponent implements AfterViewInit
     {
         // --- FAUX CODE ---
         this.tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
-        this.dataSource = new MatTableDataSource<Advert>(this.tabAdvert);
-        this.dataSource.sort = this.sort;
-        this.dataSource.paginator = this.paginator;
-        this.dataSource = this.dataSource;
-        this.allTags = this.fictitiousUtilsService.getTags();
+        this.allInterests = this.fictitiousUtilsService.getTags();
+
+        this.dataSource = new MatTableDataSource<Advert>();
+        this.onFilter();
     }
 
 
@@ -122,7 +121,7 @@ export class PageAdListAdminComponent implements AfterViewInit
 
     onFilter(): void
     {
-        console.log("b:" + this.formControlTags.value);
+        console.log("b:" + this.formControlInterests.value);
         this.dataSource.data = [];
         for(let advert of this.tabAdvert)
         {
@@ -147,9 +146,9 @@ export class PageAdListAdminComponent implements AfterViewInit
             }
 
             if(valide) {
-                if(this.formControlTags.value !== null) {
-                    for (let tag of this.formControlTags.value) {
-                        if (advert.tags.indexOf(tag) === -1) {
+                if(this.formControlInterests.value !== null) {
+                    for (let interest of this.formControlInterests.value) {
+                        if (advert.interests.indexOf(interest) === -1) {
                             valide = false;
                             break;
                         }
diff --git a/src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.html b/src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.html
index 750dead..1c1625b 100644
--- a/src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.html
+++ b/src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.html
@@ -25,7 +25,7 @@
         <div class="row myRow">
             <div class="col-6 myLabel"> Tags: </div>
             <div class="col-6 myValue" style="border-left: solid 1px #e6e6e6">
-                <div *ngFor="let tag of advert.tags"> {{tag}} </div>
+                <div *ngFor="let interest of advert.interests"> {{interest}} </div>
             </div>
         </div>
 
diff --git a/src/app/admin/userList/page-user-list/page-user-list.component.scss b/src/app/admin/userList/page-user-list/page-user-list.component.scss
index 7dc2ab9..bbeac05 100644
--- a/src/app/admin/userList/page-user-list/page-user-list.component.scss
+++ b/src/app/admin/userList/page-user-list/page-user-list.component.scss
@@ -6,7 +6,7 @@
 // ----------------------------------------------------------
 
 .filtersContainer {
-  width: 85%;
+  width: 90%;
   background-color: white;
   padding: 10px 10px 10px 10px;
 }
diff --git a/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.html b/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.html
index 9623ef7..ba7dc4f 100644
--- a/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.html
+++ b/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.html
@@ -7,7 +7,9 @@
     <div style="font-style: italic" for="fileDropRef">Cliquer pour selectionner</div>
 </div>
 
-<mat-icon [title]=info_image>info</mat-icon>
+<div style="text-align: center;">
+    <mat-icon [title]=info_image>info</mat-icon>
+</div>
 
 <div class="files-list">
     <div class="single-file" *ngFor="let file of files; let i = index">
diff --git a/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.ts b/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.ts
index 6fe4a6d..40b9626 100644
--- a/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.ts
+++ b/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.ts
@@ -9,7 +9,7 @@ export class DragAndDropComponent
 {
     @ViewChild("fileDropRef", { static: false }) fileDropEl: ElementRef;
     files: any[] = [];
-    info_image = "Vos annonces seront affichées dans un rectangle de rapport 1/5 avec: \n • 1 la largeur durectangle \n • 5 la hauteur du rectangle" ;
+    info_image = "Vos annonces seront affichées dans un rectangle de rapport 1/5 avec: \n • 1 la largeur du rectangle \n • 5 la hauteur du rectangle" ;
 
 
     /**
diff --git a/src/app/advertiser/adList/input-tags/input-tags.component.html b/src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.html
similarity index 92%
rename from src/app/advertiser/adList/input-tags/input-tags.component.html
rename to src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.html
index f8da61e..8df4522 100644
--- a/src/app/advertiser/adList/input-tags/input-tags.component.html
+++ b/src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.html
@@ -2,7 +2,7 @@
 
     <!-- ------------------------------------------------------------------------------------ -->
 
-    <mat-label>Tags</mat-label>
+    <mat-label>Sujets</mat-label>
 
     <!-- ------------------------------------------------------------------------------------ -->
 
@@ -20,7 +20,7 @@
         </mat-chip>
 
         <input
-                placeholder="Tapez un tag et pressez 'Entré' pour l'inserer"
+                placeholder="Tapez un sujet et pressez 'Entré' pour l'inserer"
                 #tagInput
                 [formControl]="formControl"
                 [matAutocomplete]="auto"
diff --git a/src/app/advertiser/adList/input-tags/input-tags.component.scss b/src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.scss
similarity index 100%
rename from src/app/advertiser/adList/input-tags/input-tags.component.scss
rename to src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.scss
diff --git a/src/app/advertiser/adList/input-tags/input-tags.component.spec.ts b/src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.spec.ts
similarity index 57%
rename from src/app/advertiser/adList/input-tags/input-tags.component.spec.ts
rename to src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.spec.ts
index 4156fd7..deae4d3 100644
--- a/src/app/advertiser/adList/input-tags/input-tags.component.spec.ts
+++ b/src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { InputTagsComponent } from './input-tags.component';
+import { InputInterestsAdComponent } from './input-interests-ad.component';
 
 describe('BarTagsComponent', () => {
-  let component: InputTagsComponent;
-  let fixture: ComponentFixture<InputTagsComponent>;
+  let component: InputInterestsAdComponent;
+  let fixture: ComponentFixture<InputInterestsAdComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ InputTagsComponent ]
+      declarations: [ InputInterestsAdComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(InputTagsComponent);
+    fixture = TestBed.createComponent(InputInterestsAdComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/advertiser/adList/input-tags/input-tags.component.ts b/src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.ts
similarity index 92%
rename from src/app/advertiser/adList/input-tags/input-tags.component.ts
rename to src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.ts
index 6c54a07..dfc794b 100644
--- a/src/app/advertiser/adList/input-tags/input-tags.component.ts
+++ b/src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.ts
@@ -11,11 +11,11 @@ import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fi
 
 
 @Component({
-    selector: 'app-input-tags',
-    templateUrl: './input-tags.component.html',
-    styleUrls: ['./input-tags.component.scss']
+    selector: 'app-input-interests-ad',
+    templateUrl: './input-interests-ad.component.html',
+    styleUrls: ['./input-interests-ad.component.scss']
 })
-export class InputTagsComponent implements OnInit
+export class InputInterestsAdComponent implements OnInit
 {
     selectable = true;
     removable = true;
diff --git a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html
index 49ae0d2..6b4a16e 100644
--- a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html
+++ b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html
@@ -2,26 +2,113 @@
     <div class="myContainer">
 
 
+        <!-- Navbar -->
         <app-navbar-advertiser></app-navbar-advertiser><br><br>
 
-        <!-- ---------------------------------------------------------------------------------- -->
 
-        <div style="text-align: center">
-            <input (keyup)="applyFilter($event)" placeholder="Filtre...">
+
+
+
+        <!-- filtre + btnAddUser -->
+        <div class="row" style="margin: 20px 3% 20px 3%">
+
+            <!-- filtre -->
+            <div class="col-10" style="padding: 0px 0px 0px 0px;">
+                <div class="filtersContainer mat-elevation-z8">
+
+                    <!-- titre -->
+                    <div style="font-weight: bold; margin-bottom: 10px;">
+                        Filtre
+                    </div>
+
+                    <mat-divider></mat-divider>
+
+                    <!-- filtre textuelle-->
+                    <div style="margin: 10px 0px 20px 2%;">
+                        <input class="textFilter" (keyup)="applyFilter($event)" placeholder="filtre...">
+                    </div>
+
+                    <!-- role + actif + période -->
+                    <div class="row myRow">
+
+
+                        <!-- visible -->
+                        <div class="col-2">
+                            <mat-checkbox [(ngModel)]="visible" (change)="onFilter()">visible</mat-checkbox><br>
+                            <mat-checkbox [(ngModel)]="noVisible" (change)="onFilter()">non visible</mat-checkbox>
+                        </div>
+
+
+                        <!-- sujets -->
+                        <div class="col-4">
+                            <mat-form-field appearance="fill">
+                                <mat-label>Sujets</mat-label>
+                                <mat-select [formControl]="formControlInterests" multiple>
+                                    <mat-select-trigger>
+                                        {{formControlInterests.value ? formControlInterests.value[0] : ''}}
+                                        <span *ngIf="formControlInterests.value?.length > 1">
+                                    (+{{formControlInterests.value.length - 1}} {{formControlInterests.value?.length === 2 ? 'autre' : 'autres'}})
+                                </span>
+                                    </mat-select-trigger>
+                                    <mat-option *ngFor="let topping of allInterests" [value]="topping">{{topping}}</mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                            <button mat-icon-button (click)="onFilter()">
+                                <mat-icon>keyboard_tab</mat-icon>
+                            </button>
+                        </div>
+
+
+                        <!-- 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();">
+                            </mat-form-field>
+                        </div>
+
+                    </div>
+
+                </div>
+            </div>
+
+            <!-- btnAdd -->
+            <div class="col-2" style="text-align: right; position: relative;">
+                <button mat-button class="btnAjouter" (click)="onAdd()" style="position: absolute; bottom: 0; right: 0;">
+                    <mat-icon>add_circle</mat-icon> Ajouter une annonce
+                </button>
+            </div>
+
         </div>
-        <br>
 
-        <!-- ---------------------------------------------------------------------------------- -->
 
-        <button mat-button class="btnAjouter" (click)="onAdd()">
-            <mat-icon>add_circle</mat-icon> Ajouter une annonce
-        </button>
-        <br>
 
-        <!-- ---------------------------------------------------------------------------------- -->
 
+        <!-- Table -->
         <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
 
+            <!-- IsActive Column -->
+            <ng-container matColumnDef="isVisible">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    <mat-icon>power_settings_new</mat-icon>
+                </th>
+                <td mat-cell *matCellDef="let advert">
+                    <mat-slide-toggle [(ngModel)]="advert.isVisible" (click)="onSliderIsVisible(advert)"></mat-slide-toggle>
+                </td>
+            </ng-container>
+
             <!-- Title Column -->
             <ng-container matColumnDef="title">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
@@ -30,13 +117,13 @@
                 </td>
             </ng-container>
 
-            <!-- Tags Column -->
-            <ng-container matColumnDef="tags">
-                <th mat-header-cell *matHeaderCellDef> Tags </th>
+            <!-- Subject Column -->
+            <ng-container matColumnDef="interests">
+                <th mat-header-cell *matHeaderCellDef> Sujets </th>
                 <td mat-cell *matCellDef="let advert">
-                    <span *ngFor="let tag of advert.tags; let isLast = last;">
-                        <span *ngIf="!isLast"> {{tag}}, </span>
-                        <span *ngIf="isLast"> {{tag}} </span>
+                    <span *ngFor="let interest of advert.interests; let isLast = last;">
+                        <span *ngIf="!isLast"> {{interest}}, </span>
+                        <span *ngIf="isLast"> {{interest}} </span>
                     </span>
                 </td>
             </ng-container>
@@ -65,15 +152,6 @@
                 </td>
             </ng-container>
 
-            <!-- IsVisible Column -->
-            <ng-container matColumnDef="isVisible">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Visible </th>
-                <td mat-cell *matCellDef="let advert">
-                    <span *ngIf="advert.isVisible"> <mat-icon>check</mat-icon> </span>
-                    <span *ngIf="!advert.isVisible"></span>
-                </td>
-            </ng-container>
-
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef> Actions </th>
@@ -82,10 +160,7 @@
                         <mat-icon> insert_photo</mat-icon>
                     </button>
                     <button mat-icon-button (click)="onUpdate(advert)">
-                        <mat-icon>settings</mat-icon>
-                    </button>
-                    <button mat-icon-button (click)="onVisualize(advert)">
-                        <mat-icon>aspect_ratio</mat-icon>
+                        <mat-icon>edit</mat-icon>
                     </button>
                     <button mat-icon-button (click)="onDelete(advert)">
                         <mat-icon>delete</mat-icon>
diff --git a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.scss b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.scss
index 4c5dd69..ab19a74 100644
--- a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.scss
+++ b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.scss
@@ -9,28 +9,25 @@
 // ----------------------------------------------------------
 
 
-.btnAjouter {
-  margin-left: 3%;
-  padding: 5px 20px 5px 20px;
-  font-size: small;
-}
-.lightTheme .btnAjouter {
-  border-top: solid 1px #dcdcdc;
-  border-right: solid 1px #dcdcdc;
-  border-left: solid 1px #dcdcdc;
-  color: black;
+.filtersContainer {
+  width: 95%;
   background-color: white;
+  padding: 10px 10px 10px 10px;
 }
-.darkTheme .btnAjouter {
-  border-top: solid 1px white;
-  border-right: solid 1px white;
-  border-left: solid 1px white;
-  color: white;
-  background-color: black;
+
+.myRow {
+  margin-left: 1%;
 }
-.darkTheme .btnAjouter:hover {
-  background-color: #646464;
-  color: black;
+
+.textFilter {
+  width: 50%;
+  font-size: medium;
+  border-radius: 5px;
+}
+
+.btnAjouter {
+  background-color: white;
+  border: solid 1px black;
 }
 
 
@@ -57,3 +54,47 @@ input {
   font-size: large;
   border-radius: 5px;
 }
+
+
+// --------------------------------------------------------------------
+
+
+// rong gauche
+::ng-deep .mat-slide-toggle-thumb {
+  background-color: white !important;
+}
+
+// trait droite
+::ng-deep .mat-slide-toggle-bar {
+  background-color: gray !important;
+}
+
+// rond droite
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
+  background-color: white !important;
+}
+
+// trait gauche
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
+  background-color: cornflowerblue !important;
+}
+
+
+// -------------------------------------------------------------------------
+
+
+// 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;
+}
diff --git a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts
index b81d2e8..b3b6100 100644
--- a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts
+++ b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts
@@ -11,6 +11,8 @@ import {PopupVisualizeAdAdvertiserComponent} from "../popup-visualize-ad-adverti
 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";
+import {FormControl} from "@angular/forms";
+import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fictitiousUtils/fictitious-utils.service";
 
 
 
@@ -21,14 +23,23 @@ import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/
 })
 export class PageAdListAdvertiserComponent implements AfterViewInit
 {
-    displayedColumns: string[] = [ 'title', 'tags', 'createdAt', 'updatedAt', 'views', 'isVisible', 'actions' ];
+    displayedColumns: string[] = [ 'isVisible', 'title', 'interests', 'createdAt', 'updatedAt', 'views', 'actions' ];
+    tabAdvert: Advert[] = [];
     dataSource ;
     @ViewChild(MatSort) sort: MatSort;
     @ViewChild(MatPaginator) paginator: MatPaginator;
 
+    visible: boolean = true;
+    noVisible: boolean = true;
+    startDate: Date = null;
+    endDate: Date = null;
+    formControlInterests = new FormControl();
+    allInterests: string[] = [];
+
 
     constructor( public themeService: ThemeService,
                  private fictitiousAdvertsService: FictitiousAdvertsService,
+                 private fictitiousUtilsService: FictitiousUtilsService,
                  public dialog: MatDialog,
                  private snackBar: MatSnackBar ) { }
 
@@ -36,11 +47,11 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
     ngAfterViewInit(): void
     {
         // --- FAUX CODE ---
-        const tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
-        this.dataSource = new MatTableDataSource<Advert>(tabAdvert);
-        this.dataSource.sort = this.sort;
-        this.dataSource.paginator = this.paginator;
-        this.dataSource = this.dataSource;
+        this.tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
+        this.allInterests = this.fictitiousUtilsService.getTags();
+
+        this.dataSource = new MatTableDataSource<Advert>();
+        this.onFilter();
     }
 
 
@@ -85,8 +96,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
     onAdd(): void
     {
         const config = {
-            width: '40%',
-            height: '80%',
+            width: '75%',
             data: { action: "add", advert: null }
         };
         this.dialog
@@ -113,8 +123,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
     onUpdate(advertToUpdate: Advert): void
     {
         const config = {
-            width: '40%',
-            height: '80%',
+            width: '75%',
             data: { action: "update", advert: advertToUpdate }
         };
         this.dialog
@@ -165,4 +174,65 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
             });
     }
 
+
+    onFilter(): void
+    {
+        console.log("b:" + this.formControlInterests.value);
+        this.dataSource.data = [];
+        for(let advert of this.tabAdvert)
+        {
+            let valide: boolean = true;
+
+            if(advert.isVisible && this.visible) valide = true;
+            else if((!advert.isVisible) && this.noVisible) valide = true;
+            else valide = false;
+
+            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(this.startDate.getTime() > advert.createdAt.getTime()) valide = false;
+                    else if (this.endDate !== null)
+                    {
+                        if(this.endDate.getTime() < advert.createdAt.getTime()) valide = false;
+                    }
+                }
+            }
+
+            if(valide) {
+                if(this.formControlInterests.value !== null) {
+                    for (let interest of this.formControlInterests.value) {
+                        if (advert.interests.indexOf(interest) === -1) {
+                            valide = false;
+                            break;
+                        }
+                    }
+                }
+            }
+
+            if(valide) this.dataSource.data.push(advert);
+        }
+
+        this.dataSource = new MatTableDataSource(this.dataSource.data);
+        this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+    }
+
+
+    onNewStartDate(event): void {
+        this.startDate = new Date(event);
+    }
+
+    onNewEndDate(event): void {
+        this.endDate = new Date(event);
+    }
+
+
+    onSliderIsVisible(advert: Advert): void
+    {
+        // il faut envoyer la négation de user.isActive
+    }
+
 }
diff --git a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html
index e54d441..a2a5c8d 100644
--- a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html
+++ b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html
@@ -1,37 +1,65 @@
 <div [class]="themeService.getClassTheme()">
 
-    <!-- Navbar -->
+    <!-- titre popup -->
     <h1 mat-dialog-title>{{title}}</h1>
 
-    <!-- --------------------------------------------------------------------------------------------- -->
 
-    <div style="text-align: center; overflow-y: hidden">
+    <mat-divider></mat-divider><br>
 
-        <!-- Title -->
-        <mat-form-field appearance="fill">
-            <mat-label> Titre annonce </mat-label>
-            <input matInput type="text" [(ngModel)]="advert.title">
-        </mat-form-field>
 
-        <!-- Images -->
-        <br>
-        <app-drag-and-drop></app-drag-and-drop>
+    <!-- tous les champs -->
+    <div class="row">
 
-        <!-- Tags -->
-        <app-input-tags [myTags]="advert.tags" (eventEmitter)="onEventInputTags($event)"></app-input-tags>
+        <!-- title + interests + comments + isVisible -->
+        <div class="col-6">
 
-        <!-- Comments -->
-        <mat-form-field class="commentContainer" appearance="fill">
-            <mat-label> Commentaire </mat-label>
-            <textarea matInput [(ngModel)]="advert.comment"></textarea>
-        </mat-form-field><br>
+            <!-- Title -->
+            <mat-form-field appearance="fill">
+                <mat-label> Titre annonce </mat-label>
+                <input matInput type="text" [(ngModel)]="advert.title">
+            </mat-form-field>
 
-        <!-- IsVisible -->
-        <mat-checkbox [(ngModel)]="advert.isVisible"> Visible </mat-checkbox>
+            <!-- Interests -->
+            <app-input-interests-ad [myTags]="advert.interests" (eventEmitter)="onEventInputTags($event)"></app-input-interests-ad>
+
+            <!-- Comments -->
+            <mat-form-field class="commentContainer" appearance="fill">
+                <mat-label> Commentaire </mat-label>
+                <textarea matInput [(ngModel)]="advert.comment"></textarea>
+            </mat-form-field><br>
+
+            <!-- IsVisible -->
+            <mat-checkbox [(ngModel)]="advert.isVisible"> Visible </mat-checkbox><br><br>
+
+            <!-- Images déjà présentes -->
+            <div *ngIf="advert.images.length !== 0">
+                <div style="font-weight: bold; margin-bottom: 5px;">
+                    Images déjà associées:
+                </div>
+                <div style="margin-left: 20px; padding-left: 2px; border-left: solid 1px #a4a4a4">
+                    <div *ngFor="let image of advert.images" style="padding: 2px 0px 2px 0px;">
+                        <mat-chip [selectable]="true" [removable]="true" style="font-size: small;">
+                            {{image.description}}
+                            <button matChipRemove (click)="onRemoveImgAlreadyPresent(image)">
+                                <mat-icon>cancel</mat-icon>
+                            </button>
+                        </mat-chip>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <!-- nouvelles images -->
+        <div class="col-6" style="overflow-x: hidden; overflow-y: scroll; max-height: 70vh;">
+            <app-drag-and-drop></app-drag-and-drop>
+        </div>
 
     </div>
 
-    <!-- --------------------------------------------------------------------------------------------- -->
+
+    <br><mat-divider></mat-divider>
+
 
     <!-- Actions -->
     <mat-dialog-actions align="end">
diff --git a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.scss b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.scss
index 7fb592c..b299124 100644
--- a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.scss
+++ b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.scss
@@ -8,7 +8,10 @@
 h1 {
   text-align: center;
   font-size: large;
-  padding-bottom: 10px;
+}
+
+.col-6, .col-8 {
+  border-left: solid 1px #a4a4a4;
 }
 
 
diff --git a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts
index a4af930..5c41b0e 100644
--- a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts
+++ b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts
@@ -11,7 +11,7 @@ const ADVERT_VIDE: Advert = {
     title: "",
     advertiser: "",
     images: [],
-    tags: [],
+    interests: [],
     comment: "",
     views: 0,
     isVisible: true,
@@ -47,14 +47,14 @@ export class PopupAddOrUpdateAdComponent implements OnInit
         if(this.data.action === "add")
         {
             this.advert = Object.assign({}, ADVERT_VIDE);
-            this.advert.tags = [];
+            this.advert.interests = [];
             this.urlBackend = "advertiser/add/ad" ;
             this.title = "Ajouter annonce" ;
         }
         else
         {
             this.advert = Object.assign({}, this.data.advert);
-            this.advert.tags = this.data.advert.tags.slice();
+            this.advert.interests = this.data.advert.interests.slice();
             this.urlBackend = "advertiser/update/ad" ;
             this.title = "Modifier annonce" ;
         }
@@ -86,32 +86,15 @@ export class PopupAddOrUpdateAdComponent implements OnInit
 
     onEventInputTags(myTags: string[]): void
     {
-        this.advert.tags = myTags;
+        this.advert.interests = myTags;
     }
 
 
-    // Lorsque l'annonceur selectionne des fichiers
-    onSelectFile(event)
+    onRemoveImgAlreadyPresent(image)
     {
-        const nbFileSelected = event.target.files.length ;
-        for(let i=0 ; i<nbFileSelected ; i++) this.tabWaitingFile.push(event.target.files[i]);
-        this._event = event;
-    }
-
-    // Lorsque l'annonceur "valide" sont choix de fichier selectionné
-    onValidateFiles(): void
-    {
-        const nbFile = this.tabWaitingFile.length;
-        for(let i=0 ; i<nbFile ; i++) this.tabSelectedFile.push(this.tabWaitingFile[i]);
-        this.tabWaitingFile = [];
-        this._event.target.value = "";
-    }
-
-    // Lorsque l'annonceur souhaite supprimer un fichier "validé"
-    onDeleteFile(file: File)
-    {
-        const index = this.tabSelectedFile.findIndex(x => file);
-        this.tabSelectedFile.splice(index, 1);
+        const index = this.advert.images.indexOf(image);
+        console.log("idx: " + index);
+        this.advert.images.slice(index, 1);
     }
 
 }
diff --git a/src/app/advertiser/adList/popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component.html b/src/app/advertiser/adList/popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component.html
index 4263967..0efdb23 100644
--- a/src/app/advertiser/adList/popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component.html
+++ b/src/app/advertiser/adList/popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component.html
@@ -19,7 +19,7 @@
         <div class="row myRow">
             <div class="col-6 myLabel"> Tags: </div>
             <div class="col-6 myValue" style="border-left: solid 1px #e6e6e6">
-                <div *ngFor="let tag of advert.tags"> • {{tag}} </div>
+                <div *ngFor="let tag of advert.interests"> • {{tag}} </div>
             </div>
         </div>
 
diff --git a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html b/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html
index 8c6d946..e87170e 100644
--- a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html
+++ b/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html
@@ -15,6 +15,9 @@
             <li class="nav-item active monLi">
                 <a class="nav-link" routerLink="/advertiser/adList"> Popularité des annonces </a>
             </li>
+            <li class="nav-item active monLi">
+                <a class="nav-link" routerLink="/advertiser/adList"> Popularité des domaines </a>
+            </li>
         </ul>
     </div>
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1a5fb3f..aa484b5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -36,7 +36,7 @@ import { PageAdListAdvertiserComponent } from './advertiser/adList/page-ad-list-
 import { PopupDeleteAdAdvertiserComponent } from './advertiser/adList/popup-delete-ad-advertiser/popup-delete-ad-advertiser.component';
 import { PopupAddOrUpdateAdComponent } from './advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component';
 import { PopupVisualizeAdAdvertiserComponent } from './advertiser/adList/popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component';
-import { InputTagsComponent } from './advertiser/adList/input-tags/input-tags.component';
+import { InputInterestsAdComponent } from './advertiser/adList/input-interests-ad/input-interests-ad.component';
 import {MatChipsModule} from "@angular/material/chips";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {MatSelectModule} from "@angular/material/select";
@@ -93,7 +93,7 @@ import {MatDatepickerModule} from "@angular/material/datepicker";
         PopupDeleteAdAdvertiserComponent,
         PopupAddOrUpdateAdComponent,
         PopupVisualizeAdAdvertiserComponent,
-        InputTagsComponent,
+        InputInterestsAdComponent,
         PopupVisualizeImagesAdvertiserComponent,
         DragAndDropComponent,
         DragAndDropDirective,
diff --git a/src/app/utils/interfaces/advert.ts b/src/app/utils/interfaces/advert.ts
index d9d1cb6..e31d6a5 100644
--- a/src/app/utils/interfaces/advert.ts
+++ b/src/app/utils/interfaces/advert.ts
@@ -8,7 +8,7 @@ export interface Advert
         url: string,
         description: string,
     }[],
-    tags: string[],
+    interests: string[],
     comment: string,
     views: number,
     isVisible: boolean,
diff --git a/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts b/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts
index 1506cf0..aca666f 100644
--- a/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts
+++ b/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts
@@ -15,7 +15,7 @@ const TAB_ADVERT: Advert[] = [
             { url: "nutella_v_2.png", description: "image nutella 2" },
             { url: "nutella_v_3.jpg", description: "image nutella 3" }
         ],
-        tags: [ "rock", "basket" ],
+        interests: [ "rock", "basket" ],
         comment: "pub pour vacances de noêl",
         views: 5,
         isVisible: true,
@@ -32,7 +32,7 @@ const TAB_ADVERT: Advert[] = [
             { url: "rolex_v_1.jpg", description: "rolex 1" },
             { url: "rolex_v_2.png", description: "rolex 2" },
         ],
-        tags: [ "rock", "rap" ],
+        interests: [ "rock", "rap" ],
         comment: "pub pour cette année",
         views: 2,
         isVisible: true,
@@ -58,7 +58,7 @@ export class FictitiousAdvertsService
         const idx = Math.floor(Math.random() * TAB_ADVERT.length);
         let advert = Object.assign({}, TAB_ADVERT[idx]);
         advert._id = advert._id + this.fictitiousUtilsService.makeid(5);
-        advert.tags = advert.tags.slice();
+        advert.interests = advert.interests.slice();
         advert.isVisible = (Math.random() < 0.5);
         return advert;
     }

From 1e5b9bd49c80ab3a5defb96320afd42e9d036582 Mon Sep 17 00:00:00 2001
From: MiharyR <mihary.rnvsn@gmail.com>
Date: Wed, 24 Nov 2021 12:07:31 +0100
Subject: [PATCH 2/5] continuation de la partie advertiser

---
 package.json                                  |  28 ++-
 .../page-ad-list-admin.component.html         |   6 +-
 .../page-ad-list-admin.component.ts           |  50 ++--
 .../navbar-admin/navbar-admin.component.html  |   0
 .../navbar-admin/navbar-admin.component.scss  |   0
 .../navbar-admin.component.spec.ts            |   0
 .../navbar-admin/navbar-admin.component.ts    |   0
 .../page-ad-list-advertiser.component.html    |   4 +-
 .../page-ad-list-advertiser.component.ts      |  51 ++--
 .../popup-add-or-update-ad.component.ts       |   2 +-
 .../pages-popularity.component.html           |  91 +++++++
 .../pages-popularity.component.scss           |  60 +++++
 .../pages-popularity.component.spec.ts        |  25 ++
 .../pages-popularity.component.ts             | 234 ++++++++++++++++++
 .../navbar-advertiser.component.html          |   4 +-
 .../navbar-advertiser.component.scss          |  30 +--
 .../navbar-advertiser.component.spec.ts       |   0
 .../navbar-advertiser.component.ts            |   0
 src/app/app-routing.module.ts                 |   4 +-
 src/app/app.component.scss                    |  17 ++
 src/app/app.module.ts                         |   8 +-
 .../video-list/video-list.component.ts        |   2 +-
 .../page-watching-video.component.ts          |   2 +-
 src/app/utils/interfaces/advert.ts            |  23 +-
 src/app/utils/interfaces/video.ts             |   4 +-
 .../fictitious-adverts.service.ts             |  60 ++++-
 .../fictitious-videos.service.ts              |  21 +-
 src/styles.scss                               |  21 ++
 28 files changed, 656 insertions(+), 91 deletions(-)
 rename src/app/admin/{ => utils/components}/navbar-admin/navbar-admin.component.html (100%)
 rename src/app/admin/{ => utils/components}/navbar-admin/navbar-admin.component.scss (100%)
 rename src/app/admin/{ => utils/components}/navbar-admin/navbar-admin.component.spec.ts (100%)
 rename src/app/admin/{ => utils/components}/navbar-admin/navbar-admin.component.ts (100%)
 create mode 100644 src/app/advertiser/pages-popularity/pages-popularity.component.html
 create mode 100644 src/app/advertiser/pages-popularity/pages-popularity.component.scss
 create mode 100644 src/app/advertiser/pages-popularity/pages-popularity.component.spec.ts
 create mode 100644 src/app/advertiser/pages-popularity/pages-popularity.component.ts
 rename src/app/advertiser/{ => utils/components}/navbar-advertiser/navbar-advertiser.component.html (84%)
 rename src/app/advertiser/{ => utils/components}/navbar-advertiser/navbar-advertiser.component.scss (100%)
 rename src/app/advertiser/{ => utils/components}/navbar-advertiser/navbar-advertiser.component.spec.ts (100%)
 rename src/app/advertiser/{ => utils/components}/navbar-advertiser/navbar-advertiser.component.ts (100%)

diff --git a/package.json b/package.json
index dd9a09c..baf5802 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
index 264088f..a5fef57 100644
--- a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
+++ b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
@@ -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>
 
diff --git a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts
index d8c950f..3b15694 100644
--- a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts
+++ b/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 {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,
+        }
+    }
+
 }
diff --git a/src/app/admin/navbar-admin/navbar-admin.component.html b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html
similarity index 100%
rename from src/app/admin/navbar-admin/navbar-admin.component.html
rename to src/app/admin/utils/components/navbar-admin/navbar-admin.component.html
diff --git a/src/app/admin/navbar-admin/navbar-admin.component.scss b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.scss
similarity index 100%
rename from src/app/admin/navbar-admin/navbar-admin.component.scss
rename to src/app/admin/utils/components/navbar-admin/navbar-admin.component.scss
diff --git a/src/app/admin/navbar-admin/navbar-admin.component.spec.ts b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.spec.ts
similarity index 100%
rename from src/app/admin/navbar-admin/navbar-admin.component.spec.ts
rename to src/app/admin/utils/components/navbar-admin/navbar-admin.component.spec.ts
diff --git a/src/app/admin/navbar-admin/navbar-admin.component.ts b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.ts
similarity index 100%
rename from src/app/admin/navbar-admin/navbar-admin.component.ts
rename to src/app/admin/utils/components/navbar-admin/navbar-admin.component.ts
diff --git a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html
index 6b4a16e..78dd263 100644
--- a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html
+++ b/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>
 
diff --git a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts
index b3b6100..b91408f 100644
--- a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts
+++ b/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' ];
-    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,
+        }
+    }
+
 }
diff --git a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts
index 5c41b0e..4b23a23 100644
--- a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts
+++ b/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(),
diff --git a/src/app/advertiser/pages-popularity/pages-popularity.component.html b/src/app/advertiser/pages-popularity/pages-popularity.component.html
new file mode 100644
index 0000000..1f59267
--- /dev/null
+++ b/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>
diff --git a/src/app/advertiser/pages-popularity/pages-popularity.component.scss b/src/app/advertiser/pages-popularity/pages-popularity.component.scss
new file mode 100644
index 0000000..b6a7b99
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/advertiser/pages-popularity/pages-popularity.component.spec.ts b/src/app/advertiser/pages-popularity/pages-popularity.component.spec.ts
new file mode 100644
index 0000000..f9ff236
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/advertiser/pages-popularity/pages-popularity.component.ts b/src/app/advertiser/pages-popularity/pages-popularity.component.ts
new file mode 100644
index 0000000..76d82fd
--- /dev/null
+++ b/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;
+    }
+
+}
diff --git a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html
similarity index 84%
rename from src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html
rename to src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html
index e87170e..65a2f5d 100644
--- a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html
+++ b/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>
diff --git a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.scss b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss
similarity index 100%
rename from src/app/advertiser/navbar-advertiser/navbar-advertiser.component.scss
rename to src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss
index a78eea8..403a4af 100644
--- a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.scss
+++ b/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;
+}
+
+
 // --------------------------------------------------------------------
 
 
diff --git a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.spec.ts b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.spec.ts
similarity index 100%
rename from src/app/advertiser/navbar-advertiser/navbar-advertiser.component.spec.ts
rename to src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.spec.ts
diff --git a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.ts b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.ts
similarity index 100%
rename from src/app/advertiser/navbar-advertiser/navbar-advertiser.component.ts
rename to src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.ts
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index db7db74..470c44c 100644
--- a/src/app/app-routing.module.ts
+++ b/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 },
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 14a2c1c..22a5665 100644
--- a/src/app/app.component.scss
+++ b/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;
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index aa484b5..821018f 100644
--- a/src/app/app.module.ts
+++ b/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 { 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]
diff --git a/src/app/user/myPlaylists/video-list/video-list.component.ts b/src/app/user/myPlaylists/video-list/video-list.component.ts
index dce50ad..a98cd24 100644
--- a/src/app/user/myPlaylists/video-list/video-list.component.ts
+++ b/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,
diff --git a/src/app/user/watching/page-watching-video/page-watching-video.component.ts b/src/app/user/watching/page-watching-video/page-watching-video.component.ts
index 02ec8df..5f4235e 100644
--- a/src/app/user/watching/page-watching-video/page-watching-video.component.ts
+++ b/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)
             {
diff --git a/src/app/utils/interfaces/advert.ts b/src/app/utils/interfaces/advert.ts
index e31d6a5..5b17905 100644
--- a/src/app/utils/interfaces/advert.ts
+++ b/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,
diff --git a/src/app/utils/interfaces/video.ts b/src/app/utils/interfaces/video.ts
index 2926449..1c93427 100644
--- a/src/app/utils/interfaces/video.ts
+++ b/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
diff --git a/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts b/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts
index aca666f..7170d7f 100644
--- a/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts
+++ b/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;
+    }
+
 }
diff --git a/src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts b/src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts
index 119e358..e0e0b4a 100644
--- a/src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts
+++ b/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;
     }
diff --git a/src/styles.scss b/src/styles.scss
index 5c44745..8a615cc 100644
--- a/src/styles.scss
+++ b/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;
+}

From cd1f323686ab6bd0feda0d33d3c324395d3b3260 Mon Sep 17 00:00:00 2001
From: MiharyR <mihary.rnvsn@gmail.com>
Date: Wed, 24 Nov 2021 21:34:27 +0100
Subject: [PATCH 3/5] ameloriation du style de la partie user

---
 .../navbar-admin/navbar-admin.component.html  | 13 +++--
 .../navbar-admin/navbar-admin.component.scss  | 17 ++++---
 .../navbar-admin/navbar-admin.component.ts    | 14 +++++-
 .../navbar-advertiser.component.html          | 16 ++++--
 .../navbar-advertiser.component.scss          | 25 +++++-----
 .../navbar-advertiser.component.ts            | 13 ++++-
 src/app/app.module.ts                         |  2 +
 .../navbar-before-connexion.component.scss    |  2 +-
 .../page-history-user.component.scss          |  1 +
 .../playlist-list.component.html              | 24 ++++++---
 .../playlist-list.component.scss              | 15 +++++-
 .../playlist-list/playlist-list.component.ts  | 49 ++++++++++++++++---
 .../popup-delete-playlist.component.html      |  8 +++
 .../popup-delete-playlist.component.scss      |  0
 .../popup-delete-playlist.component.spec.ts   | 25 ++++++++++
 .../popup-delete-playlist.component.ts        | 28 +++++++++++
 .../video-list/video-list.component.html      |  8 ++-
 .../video-list/video-list.component.scss      |  1 +
 .../video-grid/video-grid.component.html      |  8 +--
 .../video-grid/video-grid.component.scss      | 33 ++++++++-----
 .../navbar-user/navbar-user.component.html    | 14 ++++--
 .../navbar-user/navbar-user.component.scss    | 17 ++++---
 .../navbar-user/navbar-user.component.ts      | 13 ++++-
 .../page-watching-video.component.html        | 17 +++++--
 .../page-watching-video.component.scss        | 46 ++++++++++++++++-
 .../page-watching-video.component.ts          |  9 ++++
 26 files changed, 333 insertions(+), 85 deletions(-)
 create mode 100644 src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.html
 create mode 100644 src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.scss
 create mode 100644 src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.spec.ts
 create mode 100644 src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.ts

diff --git a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html
index 563792a..6bde92b 100644
--- a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html
+++ b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html
@@ -6,24 +6,29 @@
         <span class="navbar-toggler-icon"></span>
     </button>
 
-    <!-- [UserList] [Mes AdList] [Historique] -->
+
+    <!-- [userList] [adList] -->
     <div class="collapse navbar-collapse">
         <ul class="navbar-nav">
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/admin/userList"> Liste des utillisateurs </a>
+                <a *ngIf="(url !== routes[0]) && (url !== routes[1])" [routerLink]="routes[1]" class="nav-link">Liste des utillisateurs</a>
+                <a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Liste des utillisateurs</a>
             </li>
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/admin/adList"> Liste des pubs </a>
+                <a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Liste des pubs</a>
+                <a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Liste des pubs</a>
             </li>
         </ul>
     </div>
 
+
     <!-- Mon profil -->
     <img [src]=urlImage
          onerror="this.onerror=null; this.src='assets/profil.png'"
-         routerLink="/admin/myProfil"
+         [routerLink]="routes[3]"
          alt="">
 
+
     <!-- Deconnexion -->
     <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
         Deconnexion
diff --git a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.scss b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.scss
index a78eea8..285d629 100644
--- a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.scss
+++ b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.scss
@@ -1,6 +1,6 @@
 .navbar {
   background-color: black;
-  height: 50px;
+  height: 60px;
   font-size: medium;
   color: white;
 }
@@ -23,16 +23,22 @@
 }
 
 
-// Recherche, Mes Playlists, Historique
+.monLi {
+  margin: 0px 10px 0px 10px;
+}
+
+
 .nav-link {
   color: white;
 }
 .nav-link:hover {
   color: grey;
 }
+.myActiveLink {
+  text-decoration: underline;
+}
 
 
-// Bonton deconnexion
 .btnDeconnexion {
   font-size: medium;
   margin: 0px 10px 0px 10px
@@ -42,11 +48,6 @@
 }
 
 
-.monLi {
-  margin: 0px 10px 0px 10px;
-}
-
-
 img {
   border: solid 2px white;
   border-radius: 50px;
diff --git a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.ts b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.ts
index 7013cab..f9c0f04 100644
--- a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.ts
+++ b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {Router} from "@angular/router";
 
 
 
@@ -9,9 +10,18 @@ import { Component } from '@angular/core';
 })
 export class NavbarAdminComponent
 {
+    routes: string[] = [
+        "/admin",               // 0
+        "/admin/userList",      // 1
+        "/admin/adList",        // 2
+        "/admin/myProfil",      // 3
+    ];
+
+    url = this.router.url;
+
     urlImage: string = "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg?format=product-cover-large&k=1519639530" ;
 
-    constructor() { }
+    constructor(private router: Router) { }
 
     onDeconnexion(): void {}
 }
diff --git a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html
index 65a2f5d..29fb540 100644
--- a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html
+++ b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html
@@ -6,27 +6,33 @@
         <span class="navbar-toggler-icon"></span>
     </button>
 
-    <!-- [adList] [viewsAd]-->
+
+    <!-- [adList] [adsPopularity] [subjectsPopularity] -->
     <div class="collapse navbar-collapse">
         <ul class="navbar-nav">
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/advertiser/adList"> Gestion des annonces </a>
+                <a *ngIf="(url !== routes[0]) && (url !== routes[1])" [routerLink]="routes[1]" class="nav-link">Gestion des annonces</a>
+                <a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Gestion des annonces</a>
             </li>
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/advertiser/adsPopularity"> Popularité des annonces </a>
+                <a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Popularité des annonces</a>
+                <a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Popularité des annonces</a>
             </li>
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/advertiser/subjectsPopularity"> Popularité des domaines </a>
+                <a *ngIf="url !== routes[3]" [routerLink]="routes[3]" class="nav-link">Popularité des domaines</a>
+                <a *ngIf="url === routes[3]" [routerLink]="routes[3]" class="nav-link myActiveLink">Popularité des domaines</a>
             </li>
         </ul>
     </div>
 
+
     <!-- Mon profil -->
     <img [src]=urlImage
          onerror="this.onerror=null; this.src='assets/profil.png'"
-         routerLink="/advertiser/myProfil"
+         [routerLink]="routes[4]"
          alt="">
 
+
     <!-- Deconnexion -->
     <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
         Deconnexion
diff --git a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss
index 403a4af..285d629 100644
--- a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss
+++ b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss
@@ -1,6 +1,6 @@
 .navbar {
   background-color: black;
-  height: 50px;
+  height: 60px;
   font-size: medium;
   color: white;
 }
@@ -28,13 +28,24 @@
 }
 
 
-// Recherche, Mes Playlists, Historique
 .nav-link {
   color: white;
 }
 .nav-link:hover {
   color: grey;
 }
+.myActiveLink {
+  text-decoration: underline;
+}
+
+
+.btnDeconnexion {
+  font-size: medium;
+  margin: 0px 10px 0px 10px
+}
+.btnDeconnexion:hover {
+  color: grey;
+}
 
 
 img {
@@ -49,16 +60,6 @@ img:hover {
 }
 
 
-// Bonton deconnexion
-.btnDeconnexion {
-  font-size: medium;
-  margin: 0px 10px 0px 10px
-}
-.btnDeconnexion:hover {
-  color: grey;
-}
-
-
 // --------------------------------------------------------------------
 
 
diff --git a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.ts b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.ts
index d28eab6..0b9440d 100644
--- a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.ts
+++ b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import {Router} from "@angular/router";
 
 
 
@@ -9,9 +10,19 @@ import { Component } from '@angular/core';
 })
 export class NavbarAdvertiserComponent
 {
+    routes: string[] = [
+        "/advertiser",                      // 0
+        "/advertiser/adList",               // 1
+        "/advertiser/adsPopularity",        // 2
+        "/advertiser/subjectsPopularity",   // 3
+        "/advertiser/myProfil"              // 4
+    ];
+
+    url = this.router.url;
+
     urlImage: string = "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg" ;
 
-    constructor() { }
+    constructor(private router: Router) { }
 
     onDeconnexion(): void {}
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 821018f..d1b563b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -72,6 +72,7 @@ import { PageWatchingVideoComponent } from './user/watching/page-watching-video/
 import {MatDatepickerModule} from "@angular/material/datepicker";
 import { PagesPopularityComponent } from './advertiser/pages-popularity/pages-popularity.component';
 import { ChartsModule } from 'ng2-charts';
+import { PopupDeletePlaylistComponent } from './user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component';
 
 
 @NgModule({
@@ -122,6 +123,7 @@ import { ChartsModule } from 'ng2-charts';
         InputInterestsAdminComponent,
         PageWatchingVideoComponent,
         PagesPopularityComponent,
+        PopupDeletePlaylistComponent,
     ],
     imports: [
         BrowserModule,
diff --git a/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss b/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss
index a78eea8..e1fefaa 100644
--- a/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss
+++ b/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss
@@ -1,6 +1,6 @@
 .navbar {
   background-color: black;
-  height: 50px;
+  height: 60px;
   font-size: medium;
   color: white;
 }
diff --git a/src/app/user/history/page-history-user/page-history-user.component.scss b/src/app/user/history/page-history-user/page-history-user.component.scss
index 2ab71d2..bbd894d 100644
--- a/src/app/user/history/page-history-user/page-history-user.component.scss
+++ b/src/app/user/history/page-history-user/page-history-user.component.scss
@@ -26,6 +26,7 @@ input {
   position: relative;
   width: 20vw;
   height: 15vh;
+  cursor: pointer;
 }
 
 .imgPlay {
diff --git a/src/app/user/myPlaylists/playlist-list/playlist-list.component.html b/src/app/user/myPlaylists/playlist-list/playlist-list.component.html
index 87ac8b3..a1c5285 100644
--- a/src/app/user/myPlaylists/playlist-list/playlist-list.component.html
+++ b/src/app/user/myPlaylists/playlist-list/playlist-list.component.html
@@ -9,23 +9,35 @@
         </div>
 
 
+
         <!-- Liste des playlist -->
         <div class="row" style="margin: 0px">
             <div class="playlistListContainer">
                 <div *ngFor="let playlist of tabPlaylist" class="playlistContainer">
-                    <button class="btnPlaylist" (click)="eventEmitter.emit(playlist)">
-                        <span class="playlistName"> {{playlist.name}} </span><br>
-                        <span class="playListCount" *ngIf="playlist.videoIds.length <= 1"> {{playlist.videoIds.length}} vidéo </span>
-                        <span class="playListCount" *ngIf="playlist.videoIds.length > 1"> {{playlist.videoIds.length}} vidéos </span>
-                    </button>
+
+                    <div [class]="getClassOfPlaylistContainer(playlist)" (click)="eventEmitter.emit(playlist); playlistFocusedOn = playlist">
+                        <div class="col-2"></div>
+                        <div class="col-8" style="text-align: center">
+                            <span class="playlistName"> {{playlist.name}} </span><br>
+                            <span class="playListCount" *ngIf="playlist.videoIds.length <= 1"> {{playlist.videoIds.length}} vidéo </span>
+                            <span class="playListCount" *ngIf="playlist.videoIds.length > 1"> {{playlist.videoIds.length}} vidéos </span>
+                        </div>
+                        <div class="col-2" style="text-align: right">
+                            <button mat-icon-button (click)="onDeletePlaylist(playlist)">
+                                <mat-icon>delete</mat-icon>
+                            </button>
+                        </div>
+                    </div>
+
                 </div>
             </div>
         </div>
 
 
+
         <!-- Bouton creer playlist-->
         <div class="row btnCreerPlaylistContainer" >
-            <button mat-button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Creer playlist </button>
+            <button mat-button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Créer une playlist </button>
         </div>
 
     </div>
diff --git a/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss b/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss
index 832cbfb..c1e4491 100644
--- a/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss
+++ b/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss
@@ -35,23 +35,36 @@
   height: 60vh;
   overflow-y: scroll;
   padding: 0px;
+  overflow-x: hidden;
 }
 
 .playlistContainer {
   max-width: 100%;
   padding: 0px;
+  overflow-x: hidden;
 }
 
+
 .btnPlaylist {
   background-color: white;
   padding: 20px;
   border-bottom: solid 1px black;
-  width: 100%;
+  //width: 100%;
+  width: 35vw;
+  overflow-x: hidden;
 }
 .btnPlaylist:hover {
   background-color: #f0f0f0;
 }
 
+.btnPlaylistFocus {
+  background-color: #e6e6e6;
+}
+.btnPlaylistFocus:hover {
+  background-color: #e6e6e6;
+}
+
+
 .playListCount {
   color: gray;
   font-style: italic;
diff --git a/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts b/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts
index 191e2e1..1a95744 100644
--- a/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts
+++ b/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts
@@ -1,11 +1,11 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {ThemeService} from "../../../utils/services/theme/theme.service";
 import {PlaylistDB} from "../../../utils/interfaces/playlist";
-import {MessageService} from "../../../utils/services/message/message.service";
 import {MatDialog} from "@angular/material/dialog";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {PopupCreatePlaylistComponent} from "../popup-create-playlist/popup-create-playlist.component";
 import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
+import {PopupDeletePlaylistComponent} from "../popup-delete-playlist/popup-delete-playlist.component";
 
 
 
@@ -18,8 +18,9 @@ export class PlaylistListComponent implements OnInit
 {
     allPlaylists: PlaylistDB[] = [];                           // toutes les playlists
     @Output() eventEmitter = new EventEmitter<PlaylistDB>();   // pour envoyer au parent la playlist selectionner
-    search: string = "" ;                                    // contenu de la barre de recherche
+    search: string = "" ;                                      // contenu de la barre de recherche
     tabPlaylist: PlaylistDB[] = [];                            // playlist affichées
+    playlistFocusedOn: PlaylistDB;
 
 
     constructor( public themeService: ThemeService,
@@ -30,15 +31,14 @@ export class PlaylistListComponent implements OnInit
 
     ngOnInit(): void
     {
-        //this.allPlaylists = this.fictitiousVideosService.getRandomTabPlaylistDB(10, 10);
         this.allPlaylists = this.fictitiousVideosService.getNoRandomTabPlaylistDB(10);
         this.tabPlaylist = [].concat(this.allPlaylists);
     }
 
 
+    // s'execute lorsqu'on écrit sur la barre de recherche
     whileSearch()
     {
-        console.log("whileSearch");
         this.tabPlaylist = [];
         for(let playlist of this.allPlaylists)
         {
@@ -47,6 +47,7 @@ export class PlaylistListComponent implements OnInit
     }
 
 
+    // click sur créer playlist
     onCreatePlaylist(): void
     {
         const config = { data: this.tabPlaylist };
@@ -55,16 +56,52 @@ export class PlaylistListComponent implements OnInit
             .afterClosed()
             .subscribe(playlist => {
 
-                const config = { duration: 1000, panelClass: "custom-class" };
+                const config = { duration: 1500, panelClass: "custom-class" };
                 if((playlist === null) || (playlist === undefined)) {
                     this.snackBar.open("Opération annulée", "", config);
                 }
                 else {
                     this.allPlaylists.push(playlist);
                     this.tabPlaylist.push(playlist);
-                    this.snackBar.open("La playlist a bien été créée  ✔", "", config);
+                    this.snackBar.open(`La playlist '${playlist.name}' a bien été créée  ✔`, "", config);
                 }
             });
     }
 
+
+    // click sur supprimer playlist
+    onDeletePlaylist(playlist: PlaylistDB): void
+    {
+        const config = {data: playlist};
+        this.dialog
+            .open(PopupDeletePlaylistComponent, config)
+            .afterClosed()
+            .subscribe(retour => {
+
+                const config = { duration: 1500, panelClass: "custom-class" };
+                if((retour === null) || (retour === undefined)) {
+                    this.snackBar.open("Opération annulée", "", config);
+                }
+                else {
+                    let index = this.allPlaylists.indexOf(playlist);
+                    if(index >= 0) this.allPlaylists.splice(index, 1);
+
+                    index = this.tabPlaylist.indexOf(playlist);
+                    if(index >= 0) this.tabPlaylist.splice(index, 1);
+
+                    this.eventEmitter.emit(null);
+                    this.playlistFocusedOn = null;
+                    this.snackBar.open(`La playlist '${playlist.name}' a bien été suprimée  ✔`, "", config);
+                }
+            });
+    }
+
+
+    // retourne la class CSS de conteneur de playlist
+    getClassOfPlaylistContainer(playlist: PlaylistDB): string
+    {
+        if(playlist === this.playlistFocusedOn) return "row btnPlaylist btnPlaylistFocus" ;
+        else return "row btnPlaylist" ;
+    }
+
 }
diff --git a/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.html b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.html
new file mode 100644
index 0000000..0335139
--- /dev/null
+++ b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.html
@@ -0,0 +1,8 @@
+<mat-dialog-content class="mat-typography">
+    Êtes-vous sûr de vouloir supprimer <i>{{playlist.name}}</i> ?
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button (click)="dialogRef.close()">Annuler</button>
+    <button mat-button (click)="onValidate()" cdkFocusInitial>Valider</button>
+</mat-dialog-actions>
diff --git a/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.scss b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.spec.ts b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.spec.ts
new file mode 100644
index 0000000..83d1cf7
--- /dev/null
+++ b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupDeletePlaylistComponent } from './popup-delete-playlist.component';
+
+describe('PopupDeletePlaylistComponent', () => {
+  let component: PopupDeletePlaylistComponent;
+  let fixture: ComponentFixture<PopupDeletePlaylistComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PopupDeletePlaylistComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopupDeletePlaylistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.ts b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.ts
new file mode 100644
index 0000000..0160eb6
--- /dev/null
+++ b/src/app/user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component.ts
@@ -0,0 +1,28 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {MessageService} from "../../../utils/services/message/message.service";
+
+@Component({
+  selector: 'app-popup-delete-playlist',
+  templateUrl: './popup-delete-playlist.component.html',
+  styleUrls: ['./popup-delete-playlist.component.scss']
+})
+export class PopupDeletePlaylistComponent implements OnInit
+{
+    playlist;
+
+    constructor( public dialogRef: MatDialogRef<PopupDeletePlaylistComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data,
+                 private messageService: MessageService ) { }
+
+    ngOnInit(): void
+    {
+        this.playlist = this.data;
+    }
+
+    onValidate(): void
+    {
+        this.dialogRef.close(true);
+    }
+
+}
diff --git a/src/app/user/myPlaylists/video-list/video-list.component.html b/src/app/user/myPlaylists/video-list/video-list.component.html
index e6ee4f5..fa9faf4 100644
--- a/src/app/user/myPlaylists/video-list/video-list.component.html
+++ b/src/app/user/myPlaylists/video-list/video-list.component.html
@@ -37,26 +37,24 @@
                         <mat-grid-list cols="12" rowHeight="15vh">
 
                             <!-- btnAdd -->
-                            <mat-grid-tile [colspan]="1" [rowspan]="1">
+                            <mat-grid-tile [colspan]="2" [rowspan]="1">
                                 <button mat-icon-button (click)="onAdd(video)">
                                     <mat-icon> add_circle </mat-icon>
                                 </button>
                             </mat-grid-tile>
 
                             <!-- imgVideo -->
-                            <mat-grid-tile [colspan]="10" [rowspan]="1">
-                                <div class="col-8">
+                            <mat-grid-tile [colspan]="8" [rowspan]="1">
                                     <div style="margin: auto; width: 20vw; height: 15vh;">
                                         <div class="imgsContainer" (click)="onVideo(video)">
                                             <img class="imgPlay" src="/assets/play.png">
                                             <img class="imgVideo" [src]="video.imageUrl">
                                         </div>
                                     </div>
-                                </div>
                             </mat-grid-tile>
 
                             <!-- btnDelete -->
-                            <mat-grid-tile [colspan]="1" [rowspan]="1">
+                            <mat-grid-tile [colspan]="2" [rowspan]="1">
                                 <button mat-icon-button (click)="onDelete(video, i)">
                                     <mat-icon>delete</mat-icon>
                                 </button>
diff --git a/src/app/user/myPlaylists/video-list/video-list.component.scss b/src/app/user/myPlaylists/video-list/video-list.component.scss
index f38b820..07aeb42 100644
--- a/src/app/user/myPlaylists/video-list/video-list.component.scss
+++ b/src/app/user/myPlaylists/video-list/video-list.component.scss
@@ -45,6 +45,7 @@
   position: relative;
   width: 20vw;
   height: 15vh;
+  cursor: pointer;
 }
 
 .imgPlay {
diff --git a/src/app/user/search/video-grid/video-grid.component.html b/src/app/user/search/video-grid/video-grid.component.html
index 8dc071a..5b6d46b 100644
--- a/src/app/user/search/video-grid/video-grid.component.html
+++ b/src/app/user/search/video-grid/video-grid.component.html
@@ -2,7 +2,7 @@
 
 
 <!-- Grille -->
-<div style="height: 93%">
+<div style="height: 93%; background-color: white; padding-top: 7px;">
     <mat-grid-list cols="3" rowHeight="33%">
         <mat-grid-tile colspan="1" rowspan="1" *ngFor="let k of [0,1,2,3,4,5,6,7,8]">
             <div class="myCell" *ngIf="indexPage+k < tabVideo.length" [title]="tabVideo[indexPage+k].title">
@@ -19,13 +19,13 @@
                 <mat-grid-list cols="12" style="margin: 0px 0px 0px 0px; font-size: small">
 
                     <!-- logo -->
-                    <mat-grid-tile [colspan]="2" [rowspan]="2" class="mat-grid-tile-info-video">
+                    <mat-grid-tile [colspan]="2" [rowspan]="2" class="mat-grid-tile-info-video" (click)="onVideo(tabVideo[indexPage+k])">
                         <img *ngIf="tabVideo[indexPage+k].source==='youtube'" src="/assets/logo_plateforms/youtube.png" alt="ytb" width="20px" height="15px">
                         <img *ngIf="tabVideo[indexPage+k].source==='dailymotion'" src="/assets/logo_plateforms/dailymotion.png" alt="dlm" width="20px" height="20px">
                     </mat-grid-tile>
 
                     <!-- title + views + publishedAt -->
-                    <mat-grid-tile [colspan]="8" [rowspan]="2" class="mat-grid-tile-info-video">
+                    <mat-grid-tile [colspan]="8" [rowspan]="2" class="mat-grid-tile-info-video" (click)="onVideo(tabVideo[indexPage+k])">
                         <div style="position: absolute; left: 1px; text-align: left">
                             {{tronquage(tabVideo[indexPage+k].title)}}
                             <br>
@@ -54,7 +54,7 @@
 
 
 <!-- Paginator -->
-<div class="btnContainer">
+<div class="paginatorContainer">
 
     <!-- btn précédent -->
     <button mat-button class="btnPaginator" [disabled]="indexPage<=0" (click)="indexPage=indexPage-9"> < Précédent </button> &nbsp;
diff --git a/src/app/user/search/video-grid/video-grid.component.scss b/src/app/user/search/video-grid/video-grid.component.scss
index ae339eb..7f3a7ea 100644
--- a/src/app/user/search/video-grid/video-grid.component.scss
+++ b/src/app/user/search/video-grid/video-grid.component.scss
@@ -7,12 +7,20 @@ mat-grid-list {
 mat-grid-tile {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
-  border: solid 1px black;
+  //border: solid 1px black;
 }
 
 .myCell {
-  margin: 0px 0px 0px 0px;
-  padding: 7px 0px 0px 0px;
+  margin: 7px 0px 0px 0px;
+  padding: 0px 0px 0px 0px;
+  background-color: #f0f0f0;
+  border: solid 1px black;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  cursor: pointer;
+}
+.myCell:hover {
+  background-color: #d2d2d2;
 }
 
 
@@ -20,22 +28,24 @@ mat-grid-tile {
 
 
 .imgsContainer {
-  width: 20vw;
+  //width: 20vw;
+  width: 18vw;
   height: 15vh;
 }
 
 .imgPlay {
   position: absolute;
-  margin-left: 9vw;
-  width: 3vw;
+  margin-left: 8vw;
+  width: 2.5vw;
   margin-top: 5vh;
-  height: 6vh;
+  height: 5vh;
   padding: 0px 0px 0px 0px;
 }
 
 .imgVideo {
-  border: solid 1px black;
-  width: 20vw;
+  //border: solid 1px black;
+  //width: 20vw;
+  width: 18vw;
   height: 15vh;
   padding: 0px 0px 0px 0px;
 }
@@ -57,10 +67,11 @@ mat-icon {
 // ---------------------------------------------------------------------------------------------
 
 
-.btnContainer {
+.paginatorContainer {
   margin: 0px 0px 0px 0px;
-  padding: 0px 0px 0px 0px;
+  padding: 5px 0px 0px 0px;
   text-align: center;
+  background-color: white;
 }
 
 .btnPaginator {
diff --git a/src/app/user/utils/components/navbar-user/navbar-user.component.html b/src/app/user/utils/components/navbar-user/navbar-user.component.html
index 57153fb..eb7bf23 100644
--- a/src/app/user/utils/components/navbar-user/navbar-user.component.html
+++ b/src/app/user/utils/components/navbar-user/navbar-user.component.html
@@ -6,27 +6,33 @@
         <span class="navbar-toggler-icon"></span>
     </button>
 
+
     <!-- [Recherche] [Mes Playlists] [Historique] -->
     <div class="collapse navbar-collapse">
         <ul class="navbar-nav">
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/user/search"> Rechercher </a>
+                <a *ngIf="(url !== routes[0]) && (url !== routes[1])" [routerLink]="routes[1]" class="nav-link">Rechercher</a>
+                <a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Rechercher</a>
             </li>
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/user/myPlaylists"> Mes playlists </a>
+                <a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Mes playlists</a>
+                <a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Mes playlists</a>
             </li>
             <li class="nav-item active monLi">
-                <a class="nav-link" routerLink="/user/history"> Historique </a>
+                <a *ngIf="url !== routes[3]" [routerLink]="routes[3]" class="nav-link">Historique</a>
+                <a *ngIf="url === routes[3]" [routerLink]="routes[3]" class="nav-link myActiveLink">Historique</a>
             </li>
         </ul>
     </div>
 
+
     <!-- Mon profil -->
     <img [src]=urlImage
          onerror="this.onerror=null; this.src='assets/profil.png'"
-         routerLink="/user/myProfil"
+         [routerLink]="routes[4]"
          alt="">
 
+
     <!-- Deconnexion -->
     <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
         Deconnexion
diff --git a/src/app/user/utils/components/navbar-user/navbar-user.component.scss b/src/app/user/utils/components/navbar-user/navbar-user.component.scss
index a78eea8..285d629 100644
--- a/src/app/user/utils/components/navbar-user/navbar-user.component.scss
+++ b/src/app/user/utils/components/navbar-user/navbar-user.component.scss
@@ -1,6 +1,6 @@
 .navbar {
   background-color: black;
-  height: 50px;
+  height: 60px;
   font-size: medium;
   color: white;
 }
@@ -23,16 +23,22 @@
 }
 
 
-// Recherche, Mes Playlists, Historique
+.monLi {
+  margin: 0px 10px 0px 10px;
+}
+
+
 .nav-link {
   color: white;
 }
 .nav-link:hover {
   color: grey;
 }
+.myActiveLink {
+  text-decoration: underline;
+}
 
 
-// Bonton deconnexion
 .btnDeconnexion {
   font-size: medium;
   margin: 0px 10px 0px 10px
@@ -42,11 +48,6 @@
 }
 
 
-.monLi {
-  margin: 0px 10px 0px 10px;
-}
-
-
 img {
   border: solid 2px white;
   border-radius: 50px;
diff --git a/src/app/user/utils/components/navbar-user/navbar-user.component.ts b/src/app/user/utils/components/navbar-user/navbar-user.component.ts
index 621db8b..e49c490 100644
--- a/src/app/user/utils/components/navbar-user/navbar-user.component.ts
+++ b/src/app/user/utils/components/navbar-user/navbar-user.component.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {Router} from "@angular/router";
 
 
 
@@ -9,9 +10,19 @@ import {Component} from '@angular/core';
 })
 export class NavbarUserComponent
 {
+    routes: string[] = [
+        "/user",                // 0
+        "/user/search",         // 1
+        "/user/myPlaylists",    // 2
+        "/user/history",        // 3
+        "/user/myProfil"        // 4
+    ];
+
+    url = this.router.url;
+
     urlImage: string = "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg" ;
 
-    constructor() { }
+    constructor(private router: Router) { }
 
     onDeconnexion(): void {}
 }
diff --git a/src/app/user/watching/page-watching-video/page-watching-video.component.html b/src/app/user/watching/page-watching-video/page-watching-video.component.html
index e2179d4..61e9f6d 100644
--- a/src/app/user/watching/page-watching-video/page-watching-video.component.html
+++ b/src/app/user/watching/page-watching-video/page-watching-video.component.html
@@ -202,13 +202,20 @@
         <!-- Liste des videos -->
         <div class="listVideoContainer">
             <div *ngFor="let video0 of videosInPlaylist; let i = index;">
-                <div class="videoCell">
-                    <div class="imgsContainer" (click)="this.video = video0">
+                <div [class]="getClassOfVideoCell(video0)" (click)="this.video = video0">
+                    <div class="imgsContainer">
                         <img class="imgPlay" src="/assets/play.png">
                         <img class="imgVideo" [src]="video0.imageUrl">
                     </div>
-                    <div class="titleContainer">
-                        {{video0.title}}
+                    <div class="infoContainer">
+                        <div class="titleContainer">{{video0.title}}</div>
+                        <div class="viewsContainer">
+                            <!-- <span>{{video.views | number: '1.0-0'}}</span> <mat-icon>visibility</mat-icon> -->
+                            {{video.views | number: '1.0-0'}} vues
+                        </div>
+                        <span class="publishedAtContainer">
+                            Publiée le {{ video.publishedAt | date:'dd/LL/YYYY à HH:mm:ss' }}
+                        </span>
                     </div>
                 </div>
             </div>
@@ -216,9 +223,11 @@
 
 
         <!-- Bordure basse -->
+        <!--
         <div class="bottomBorder">
             <div style="visibility: hidden">a</div>
         </div>
+        -->
 
     </div>
 </ng-template>
diff --git a/src/app/user/watching/page-watching-video/page-watching-video.component.scss b/src/app/user/watching/page-watching-video/page-watching-video.component.scss
index 52a8508..fa8de70 100644
--- a/src/app/user/watching/page-watching-video/page-watching-video.component.scss
+++ b/src/app/user/watching/page-watching-video/page-watching-video.component.scss
@@ -29,6 +29,8 @@
 .playlistContainer {
   border: solid 1px black;
   width: 98%;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
 }
 
 .topBorder {
@@ -37,6 +39,8 @@
   text-align: left;
   padding: 5px 0px 5px 5px;
   border-bottom: solid 1px black;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
 }
 
 .listVideoContainer {
@@ -49,7 +53,19 @@
   margin: 0px 0px 0px 0px;
   padding: 10px 0px 10px 10px;
   border-bottom: solid 1px black;
+  cursor: pointer;
 }
+.videoCell:hover {
+  background-color: #f0f0f0;
+}
+
+.videoCellFocus {
+  background-color: #e6e6e6;
+}
+.videoCellFocus:hover {
+  background-color: #e6e6e6;
+}
+
 
 // ----
 
@@ -76,14 +92,40 @@
   padding: 0px 0px 0px 0px;
 }
 
-.titleContainer {
+// ----
+
+.infoContainer {
   display: table-cell;
   margin-left: 13vw;
   height: 10vh;
-  padding-left: 2px;
+  padding-left: 5px;
   vertical-align: middle;
 }
 
+.titleContainer {
+  font-weight: bold;
+  text-align: left;
+}
+
+.viewsContainer {
+  text-align: left;
+  display: flex;
+  align-items: center;
+  font-size: x-small;
+  color: grey;
+}
+mat-icon {
+  vertical-align: middle;
+  //font-size: x-small;
+}
+
+.publishedAtContainer {
+  text-align: left;
+  font-size: x-small;
+  color: grey;
+}
+
+
 // ----
 
 .bottomBorder {
diff --git a/src/app/user/watching/page-watching-video/page-watching-video.component.ts b/src/app/user/watching/page-watching-video/page-watching-video.component.ts
index 5f4235e..8306531 100644
--- a/src/app/user/watching/page-watching-video/page-watching-video.component.ts
+++ b/src/app/user/watching/page-watching-video/page-watching-video.component.ts
@@ -117,4 +117,13 @@ export class PageWatchingVideoComponent implements OnInit
         else if(source === 'dailymotion') videoUrl = "https://www.dailymotion.com/embed/video/" + videoId;
         return this._sanitizer.bypassSecurityTrustResourceUrl(videoUrl);
     }
+
+
+    // retourne la classe CSS de videoCell
+    getClassOfVideoCell(video0: VideoAll): string
+    {
+        if(video0 === this.video) return "videoCell videoCellFocus" ;
+        else return "videoCell" ;
+    }
+
 }

From d1ac1b77f0e69fa1a7f5e4c1778302ef2f84d20b Mon Sep 17 00:00:00 2001
From: MiharyR <mihary.rnvsn@gmail.com>
Date: Fri, 26 Nov 2021 17:05:12 +0100
Subject: [PATCH 4/5] amelioration du style globale

---
 .../page-ad-list-admin.component.html         |  4 +-
 .../page-ad-list-admin.component.scss         |  4 ++
 .../page-ad-list-admin.component.ts           | 53 +++++++++++++++---
 .../popup-delete-ad-admin.component.ts        |  2 +-
 .../popup-visualize-ad-admin.component.html   |  4 +-
 .../popup-update-admin.component.ts           |  1 +
 .../page-user-list.component.html             |  2 +-
 .../popup-create-user.component.html          |  5 ++
 .../popup-create-user.component.ts            | 15 +++--
 .../popup-visualize-user.component.html       |  2 +-
 .../page-ad-list-advertiser.component.scss    | 15 +----
 .../page-ad-list-advertiser.component.ts      |  2 +-
 .../popup-add-or-update-ad.component.html     |  6 ++
 .../popup-add-or-update-ad.component.ts       |  6 +-
 .../popup-delete-ad-advertiser.component.ts   |  2 +-
 .../page-profil-advertiser.component.html     |  8 ++-
 .../popup-update-advertiser.component.html    |  6 ++
 .../popup-update-advertiser.component.ts      |  1 +
 .../pages-popularity.component.scss           | 15 +----
 .../navbar-advertiser.component.html          |  2 +-
 .../page-login/page-login.component.html      | 56 +++++++++----------
 .../page-login/page-login.component.scss      |  7 +--
 .../page-register.component.html              |  9 ++-
 .../page-register/page-register.component.ts  |  7 ++-
 .../playlist-list.component.scss              | 10 +++-
 .../video-list/video-list.component.scss      | 12 +++-
 .../popup-update-user.component.ts            |  1 +
 .../video-grid/video-grid.component.html      |  2 +-
 .../video-grid/video-grid.component.scss      | 12 ++--
 .../components/advert/advert.component.html   |  3 +
 .../components/advert/advert.component.ts     | 11 ++--
 .../page-watching-video.component.scss        |  4 +-
 src/app/utils/interfaces/advert.ts            |  4 +-
 src/app/utils/interfaces/user.ts              |  1 +
 .../fictitious-adverts.service.ts             |  6 +-
 .../fictitious-users.service.ts               |  3 +
 36 files changed, 191 insertions(+), 112 deletions(-)

diff --git a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
index a5fef57..3e020de 100644
--- a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
+++ b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
@@ -86,10 +86,10 @@
             </ng-container>
 
             <!-- Advertiser Column -->
-            <ng-container matColumnDef="advertiser">
+            <ng-container matColumnDef="company">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Annonceur </th>
                 <td mat-cell *matCellDef="let advert">
-                    {{advert.advertiser}}
+                    {{advert.company}}
                 </td>
             </ng-container>
 
diff --git a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.scss b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.scss
index 822f4d0..954f3d0 100644
--- a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.scss
+++ b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.scss
@@ -68,3 +68,7 @@ input {
   border: solid 1px black !important;
   background-color: white !important;
 }
+
+::ng-deep .mat-pseudo-checkbox-checked {
+  background-color: black !important;
+}
diff --git a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts
index 3b15694..a98964f 100644
--- a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts
+++ b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts
@@ -5,12 +5,36 @@ 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, AdvertWithCountViews} from "../../../utils/interfaces/advert";
+import {Advert} 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";
 import {FormControl} from "@angular/forms";
 import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fictitiousUtils/fictitious-utils.service";
+import {User} from "../../../utils/interfaces/user";
+import {FictitiousUsersService} from "../../../utils/services/fictitiousDatas/fictitiousUsers/fictitious-users.service";
+
+
+
+export interface AdvertWithCountViewsAndCompany {
+    _id: string,
+    userId: string,
+    company: string,
+    title: string,
+    url: string,
+    images: {
+        url: string,
+        description: string,
+    }[],
+    interests: string[],
+    comment: string,
+    views: Date[],
+    countViews: number,
+    isVisible: boolean,
+    isActive: boolean,
+    createdAt: Date,
+    updatedAt: Date,
+}
 
 
 
@@ -21,8 +45,9 @@ import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fi
 })
 export class PageAdListAdminComponent implements AfterViewInit
 {
-    tabAdvertWithCountViews: AdvertWithCountViews[] = [];
-    displayedColumns: string[] = [ 'title', 'advertiser', 'interests', 'createdAt', 'updatedAt', 'countViews', 'isVisible', 'actions' ];
+    tabAdvertWithCountViews: AdvertWithCountViewsAndCompany[] = [];
+    tabAdvertiser: User[];
+    displayedColumns: string[] = [ 'title', 'company', 'interests', 'createdAt', 'updatedAt', 'countViews', 'isVisible', 'actions' ];
     dataSource ;
     @ViewChild(MatSort) sort: MatSort;
     @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -38,6 +63,7 @@ export class PageAdListAdminComponent implements AfterViewInit
     constructor( public themeService: ThemeService,
                  private fictitiousAdvertsService: FictitiousAdvertsService,
                  private fictitiousUtilsService: FictitiousUtilsService,
+                 private fictitiousUsersService: FictitiousUsersService,
                  public dialog: MatDialog,
                  private snackBar: MatSnackBar ) { }
 
@@ -47,8 +73,9 @@ export class PageAdListAdminComponent implements AfterViewInit
         // --- FAUX CODE ---
         const tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
         this.allInterests = this.fictitiousUtilsService.getTags();
+        this.tabAdvertiser = this.fictitiousUsersService.getTabAdvertiser(3);
 
-        for(let advert of tabAdvert) this.tabAdvertWithCountViews.push(this.advertToAdvertWithCountViews(advert));
+        for(let advert of tabAdvert) this.tabAdvertWithCountViews.push(this.advertToAdvertWithCountViewsAndCompany(advert));
         this.dataSource = new MatTableDataSource<Advert>();
         this.onFilter();
     }
@@ -61,7 +88,7 @@ export class PageAdListAdminComponent implements AfterViewInit
     }
 
 
-    onVisualizeImages(advert: AdvertWithCountViews)
+    onVisualizeImages(advert: AdvertWithCountViewsAndCompany)
     {
         const config = {
             width: '30%',
@@ -79,7 +106,7 @@ export class PageAdListAdminComponent implements AfterViewInit
     }
 
 
-    onDelete(advert: AdvertWithCountViews): void
+    onDelete(advert: AdvertWithCountViewsAndCompany): void
     {
         const config = {
             data: { advert: advert }
@@ -160,13 +187,23 @@ export class PageAdListAdminComponent implements AfterViewInit
     }
 
 
-    advertToAdvertWithCountViews(advert: Advert): AdvertWithCountViews
+    advertToAdvertWithCountViewsAndCompany(advert: Advert): AdvertWithCountViewsAndCompany
     {
+        let company0 = "company" ;
+        for(let advertiser of this.tabAdvertiser)
+        {
+            if(advert.userId === advertiser._id) {
+                company0 = advertiser.company;
+                break;
+            }
+        }
+
         return {
             _id: advert._id,
             userId: advert.userId,
             title: advert.title,
-            advertiser: advert.advertiser,
+            company: company0,
+            url: advert.url,
             images: advert.images,
             interests: advert.interests,
             comment: advert.comment,
diff --git a/src/app/admin/adList/popup-delete-ad-admin/popup-delete-ad-admin.component.ts b/src/app/admin/adList/popup-delete-ad-admin/popup-delete-ad-admin.component.ts
index c1c6e24..2fae562 100644
--- a/src/app/admin/adList/popup-delete-ad-admin/popup-delete-ad-admin.component.ts
+++ b/src/app/admin/adList/popup-delete-ad-admin/popup-delete-ad-admin.component.ts
@@ -34,7 +34,7 @@ export class PopupDeleteAdAdminComponent implements OnInit
         // --- VRAI CODE ---
         /*
         this.messageService
-            .sendMessage("advertiser/delete/ad", {"advert": this.advert})
+            .sendMessage("url/delete/ad", {"advert": this.advert})
             .subscribe( retour => {
 
                 if(retour.status === "error") {
diff --git a/src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.html b/src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.html
index 1c1625b..2ff5c54 100644
--- a/src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.html
+++ b/src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.html
@@ -7,10 +7,10 @@
     <mat-divider></mat-divider>
     <mat-dialog-content>
 
-        <!-- Advertiser -->
+        <!-- URL -->
         <div class="row myRow">
             <div class="col-6 myLabel"> Annonceur: </div>
-            <div class="col-6 myValue"> {{advert.advertiser}} </div>
+            <div class="col-6 myValue"> {{advert.url}} </div>
         </div>
 
         <!-- Images -->
diff --git a/src/app/admin/myProfil/popup-update-admin/popup-update-admin.component.ts b/src/app/admin/myProfil/popup-update-admin/popup-update-admin.component.ts
index 52a7584..5e61893 100644
--- a/src/app/admin/myProfil/popup-update-admin/popup-update-admin.component.ts
+++ b/src/app/admin/myProfil/popup-update-admin/popup-update-admin.component.ts
@@ -39,6 +39,7 @@ export class PopupUpdateAdminComponent implements OnInit
             dateOfBirth: admin0.dateOfBirth,
             gender: admin0.gender,
             interests: [],
+            company: "",
             isActive: admin0.isActive,
             isAccepted: admin0.isisAccepted,
             createdAt: admin0.createdAt,
diff --git a/src/app/admin/userList/page-user-list/page-user-list.component.html b/src/app/admin/userList/page-user-list/page-user-list.component.html
index a2260b6..421cb79 100644
--- a/src/app/admin/userList/page-user-list/page-user-list.component.html
+++ b/src/app/admin/userList/page-user-list/page-user-list.component.html
@@ -35,7 +35,7 @@
                                 <mat-radio-button value="user" (click)="this.roleName = 'user'; onFilter()">
                                     Utilisateur
                                 </mat-radio-button><br>
-                                <mat-radio-button value="advertiser" (click)="this.roleName = 'advertiser'; onFilter()">
+                                <mat-radio-button value="url" (click)="this.roleName = 'url'; onFilter()">
                                     Annonceur
                                 </mat-radio-button><br>
                                 <mat-radio-button value="admin" (click)="this.roleName = 'admin'; onFilter()">
diff --git a/src/app/admin/userList/popup-create-user/popup-create-user.component.html b/src/app/admin/userList/popup-create-user/popup-create-user.component.html
index c281ffc..6b8659d 100644
--- a/src/app/admin/userList/popup-create-user/popup-create-user.component.html
+++ b/src/app/admin/userList/popup-create-user/popup-create-user.component.html
@@ -133,6 +133,11 @@
                 <mat-label>Login</mat-label>
                 <input matInput type="text" [(ngModel)]="user.login">
             </mat-form-field><br>
+            <!-- company -->
+            <mat-form-field appearance="fill" *ngIf="user.role.name === 'advertiser'">
+                <mat-label>Entreprise</mat-label>
+                <input matInput type="text" [(ngModel)]="user.company">
+            </mat-form-field><br *ngIf="user.role.name === 'advertiser'">
         </div>
 
         <!-- mdp + confirmation -->
diff --git a/src/app/admin/userList/popup-create-user/popup-create-user.component.ts b/src/app/admin/userList/popup-create-user/popup-create-user.component.ts
index 1b88942..5e0470c 100644
--- a/src/app/admin/userList/popup-create-user/popup-create-user.component.ts
+++ b/src/app/admin/userList/popup-create-user/popup-create-user.component.ts
@@ -38,6 +38,7 @@ export class PopupCreateUserComponent implements OnInit
             dateOfBirth: null,
             gender: "man",
             interests: [],
+            company: "",
             isActive: false,
             isAccepted: false,
             createdAt: new Date(),
@@ -72,12 +73,8 @@ export class PopupCreateUserComponent implements OnInit
             this.errorMessage = "Veuillez remplir le champ 'email'.";
             this.hasError = true;
         }
-        if((this.user.role.name === 'user') && ((this.user.dateOfBirth === undefined) || (this.user.dateOfBirth === null))) {
-            this.errorMessage = "Veuillez remplir le champ 'date de naissance'.";
-            this.hasError = true;
-        }
         else if(!this.isValidEmail(this.user.email)) {
-            this.errorMessage = "Email invalide";
+            this.errorMessage = "Email invalide.";
             this.hasError = true;
         }
         else if(this.password.length === 0) {
@@ -88,6 +85,14 @@ export class PopupCreateUserComponent implements OnInit
             this.errorMessage = "Le mot de passe est différent de sa confirmation.";
             this.hasError = true;
         }
+        else if((this.user.role.name === 'user') && ((this.user.dateOfBirth === undefined) || (this.user.dateOfBirth === null))) {
+            this.errorMessage = "Veuillez remplir le champ 'date de naissance'.";
+            this.hasError = true;
+        }
+        else if((this.user.role.name === 'advertiser') && (this.user.company.length === 0)) {
+            this.errorMessage = "Veuillez remplir le champ 'entreprise'.";
+            this.hasError = true;
+        }
         else {
             this.errorMessage = "" ;
             this.hasError = false;
diff --git a/src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.html b/src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.html
index 89124e7..3e0bf70 100644
--- a/src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.html
+++ b/src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.html
@@ -62,7 +62,7 @@
         <div class="col-6 myLabel">Rôle:</div>
         <div class="col-6 myValue">
             <span *ngIf="user.role.name === 'user'">Utilisateur</span>
-            <span *ngIf="user.role.name === 'advertiser'">Annonceur</span>
+            <span *ngIf="user.role.name === 'url'">Annonceur</span>
             <span *ngIf="user.role.name === 'admin'">Admin</span>
         </div>
     </div>
diff --git a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.scss b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.scss
index ab19a74..370e312 100644
--- a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.scss
+++ b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.scss
@@ -82,19 +82,6 @@ input {
 
 // -------------------------------------------------------------------------
 
-
-// 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 {
+::ng-deep .mat-pseudo-checkbox-checked {
   background-color: black !important;
 }
-
-// indeterminate
-::ng-deep .mat-checkbox .mat-checkbox-frame {
-  border: solid 1px black !important;
-  background-color: white !important;
-}
diff --git a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts
index b91408f..826fbe1 100644
--- a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts
+++ b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts
@@ -229,7 +229,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
             _id: advert._id,
             userId: advert.userId,
             title: advert.title,
-            advertiser: advert.advertiser,
+            url: advert.url,
             images: advert.images,
             interests: advert.interests,
             comment: advert.comment,
diff --git a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html
index a2a5c8d..8e161d2 100644
--- a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html
+++ b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html
@@ -28,6 +28,12 @@
                 <textarea matInput [(ngModel)]="advert.comment"></textarea>
             </mat-form-field><br>
 
+            <!-- url -->
+            <mat-form-field class="commentContainer" appearance="fill">
+                <mat-label> URL </mat-label>
+                <textarea matInput [(ngModel)]="advert.url"></textarea>
+            </mat-form-field><br>
+
             <!-- IsVisible -->
             <mat-checkbox [(ngModel)]="advert.isVisible"> Visible </mat-checkbox><br><br>
 
diff --git a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts
index 4b23a23..b8e97fa 100644
--- a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts
+++ b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts
@@ -9,7 +9,7 @@ const ADVERT_VIDE: Advert = {
     _id: "",
     userId: "",
     title: "",
-    advertiser: "",
+    url: "",
     images: [],
     interests: [],
     comment: "",
@@ -48,14 +48,14 @@ export class PopupAddOrUpdateAdComponent implements OnInit
         {
             this.advert = Object.assign({}, ADVERT_VIDE);
             this.advert.interests = [];
-            this.urlBackend = "advertiser/add/ad" ;
+            this.urlBackend = "url/add/ad" ;
             this.title = "Ajouter annonce" ;
         }
         else
         {
             this.advert = Object.assign({}, this.data.advert);
             this.advert.interests = this.data.advert.interests.slice();
-            this.urlBackend = "advertiser/update/ad" ;
+            this.urlBackend = "url/update/ad" ;
             this.title = "Modifier annonce" ;
         }
     }
diff --git a/src/app/advertiser/adList/popup-delete-ad-advertiser/popup-delete-ad-advertiser.component.ts b/src/app/advertiser/adList/popup-delete-ad-advertiser/popup-delete-ad-advertiser.component.ts
index 48a45e1..e36d92b 100644
--- a/src/app/advertiser/adList/popup-delete-ad-advertiser/popup-delete-ad-advertiser.component.ts
+++ b/src/app/advertiser/adList/popup-delete-ad-advertiser/popup-delete-ad-advertiser.component.ts
@@ -34,7 +34,7 @@ export class PopupDeleteAdAdvertiserComponent implements OnInit
         // --- VRAI CODE ---
         /*
         this.messageService
-            .sendMessage("advertiser/delete/ad", {"advert": this.advert})
+            .sendMessage("url/delete/ad", {"advert": this.advert})
             .subscribe( retour => {
 
                 if(retour.status === "error") {
diff --git a/src/app/advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component.html b/src/app/advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component.html
index 5900345..9af3317 100644
--- a/src/app/advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component.html
+++ b/src/app/advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component.html
@@ -13,9 +13,15 @@
                      onerror="this.onerror=null; this.src='assets/profil.png'">
             </div>
 
+            <!-- entreprise -->
+            <div class="row myRow">
+                <div class="col-6 myLabel">Entreprise:</div>
+                <div class="col-6 myValue"> {{advertiser.company}} </div>
+            </div>
+
             <!-- login -->
             <div class="row myRow">
-                <div class="col-6 myLabel">Login:</div>
+                <div class="col-6 myLabel">Pseudo:</div>
                 <div class="col-6 myValue"> {{advertiser.login}} </div>
             </div>
 
diff --git a/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.html b/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.html
index bbbcd85..4951e5c 100644
--- a/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.html
+++ b/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.html
@@ -10,6 +10,12 @@
         <!-- divider -->
         <br><mat-divider></mat-divider><br>
 
+        <!-- entreprise -->
+        <mat-form-field appearance="fill">
+            <mat-label>Entreprise</mat-label>
+            <input matInput type="text" [(ngModel)]="advertiserCopy.company">
+        </mat-form-field><br>
+
         <!-- login -->
         <mat-form-field appearance="fill">
             <mat-label>Pseudo</mat-label>
diff --git a/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts b/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts
index 76e5e05..26882ac 100644
--- a/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts
+++ b/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts
@@ -39,6 +39,7 @@ export class PopupUpdateAdvertiserComponent implements OnInit
             dateOfBirth: advertiser0.dateOfBirth,
             gender: advertiser0.gender,
             interests: [],
+            company: advertiser0.company,
             isActive: advertiser0.isActive,
             isAccepted: advertiser0.isAccepted,
             createdAt: advertiser0.createdAt,
diff --git a/src/app/advertiser/pages-popularity/pages-popularity.component.scss b/src/app/advertiser/pages-popularity/pages-popularity.component.scss
index b6a7b99..6030311 100644
--- a/src/app/advertiser/pages-popularity/pages-popularity.component.scss
+++ b/src/app/advertiser/pages-popularity/pages-popularity.component.scss
@@ -42,19 +42,6 @@ input {
 
 // -------------------------------------------------------------------------
 
-
-// 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 {
+::ng-deep .mat-pseudo-checkbox-checked {
   background-color: black !important;
 }
-
-// indeterminate
-::ng-deep .mat-checkbox .mat-checkbox-frame {
-  border: solid 1px black !important;
-  background-color: white !important;
-}
diff --git a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html
index 29fb540..1b16354 100644
--- a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html
+++ b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html
@@ -1,7 +1,7 @@
 <nav class="navbar navbar-expand-lg">
 
     <!-- PolyNotFound -->
-    <a class="navbar-brand" routerLink="/advertiser/adList"> StreamNotFound </a>
+    <a class="navbar-brand" routerLink="/url/adList"> StreamNotFound </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
diff --git a/src/app/beforeConnexion/login/page-login/page-login.component.html b/src/app/beforeConnexion/login/page-login/page-login.component.html
index 6213943..1404ee9 100644
--- a/src/app/beforeConnexion/login/page-login/page-login.component.html
+++ b/src/app/beforeConnexion/login/page-login/page-login.component.html
@@ -1,38 +1,36 @@
 <div [class]="themeService.getClassTheme()">
-    <div class="myContainer">
-        <div class="bg">
+    <div class="bg">
 
-            <app-navbar-before-connexion pour="login"></app-navbar-before-connexion>
+        <app-navbar-before-connexion pour="login"></app-navbar-before-connexion>
 
-            <div class="wrapper fadeInDown">
-                <div id="formContent">
-
-                    <!-- Icon -->
-                    <div class="fadeIn first">
-                        <h1 style="font-family: cursive; font-size: 45px; margin-top: 20px; margin-bottom: 10px">StreamNotFound</h1>
-                        <img src="../../../../assets/logo.png" id="icon" alt="User Icon" style="margin-top: 10px"/>
-                    </div>
-
-                    <!-- Login Form -->
-                    <form>
-                        <input [(ngModel)]="pseudo" type="text" id="login" class="fadeIn second" name="login" placeholder="Login">
-                        <input [(ngModel)]="password" type="password" id="password" class="fadeIn third" name="login" placeholder="Mot de passe">
-                        <!-- Message d'erreur -->
-                        <div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
-                            <span class="mat-error"> {{errorMessage}} </span>
-                        </div>
-                        <input type="submit" class="fadeIn fourth" value="Se connecter" (click)="onSeConnecter()">
-                    </form>
-
-                    <!-- Oubli mot de passe -->
-                    <div id="formFooter">
-                        <a class="underlineHover" href="https://disney.fandom.com/fr/wiki/Tristesse">J'ai oublié mon mot de passe</a>
-                    </div>
+        <div class="wrapper fadeInDown">
+            <div id="formContent">
 
+                <!-- Icon -->
+                <div class="fadeIn first">
+                    <h1 style="font-family: cursive; font-size: 45px; margin-top: 20px; margin-bottom: 10px">StreamNotFound</h1>
+                    <img src="../../../../assets/logo.png" id="icon" alt="User Icon" style="margin-top: 10px"/>
                 </div>
+
+                <!-- Login Form -->
+                <form>
+                    <input [(ngModel)]="pseudo" type="text" id="login" class="fadeIn second" name="login" placeholder="Login">
+                    <input [(ngModel)]="password" type="password" id="password" class="fadeIn third" name="login" placeholder="Mot de passe">
+                    <!-- Message d'erreur -->
+                    <div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
+                        <span class="mat-error"> {{errorMessage}} </span>
+                    </div>
+                    <input type="submit" class="fadeIn fourth" value="Se connecter" (click)="onSeConnecter()">
+                </form>
+
+                <!-- Oubli mot de passe -->
+                <div id="formFooter">
+                    <a class="underlineHover" href="https://disney.fandom.com/fr/wiki/Tristesse">J'ai oublié mon mot de passe</a>
+                </div>
+
             </div>
-
-
         </div>
+
+
     </div>
 </div>
diff --git a/src/app/beforeConnexion/login/page-login/page-login.component.scss b/src/app/beforeConnexion/login/page-login/page-login.component.scss
index d56bb24..8924202 100644
--- a/src/app/beforeConnexion/login/page-login/page-login.component.scss
+++ b/src/app/beforeConnexion/login/page-login/page-login.component.scss
@@ -144,15 +144,10 @@ input[type=text]::placeholder, input[type=password]::placeholder {
   color: #cccccc;
 }
 
-.myContainer {
-  height: 100vh;
-  width: 100vw;
-}
-
 .bg{
   margin: 0;
   padding: 0;
-  height: 80vh;
+  height: 100vh;
   width: 100vw;
   overflow-y: hidden;
   overflow-x: hidden;
diff --git a/src/app/beforeConnexion/register/page-register/page-register.component.html b/src/app/beforeConnexion/register/page-register/page-register.component.html
index 98a606a..c3dafab 100644
--- a/src/app/beforeConnexion/register/page-register/page-register.component.html
+++ b/src/app/beforeConnexion/register/page-register/page-register.component.html
@@ -124,9 +124,16 @@
 <!-- Info personnelles advertiser -->
 <ng-template #advertiserBlock>
 
+    <!-- Entreprise -->
+    <mat-form-field appearance="fill">
+        <mat-label>Entreprise</mat-label>
+        <input matInput type="text" [(ngModel)]="user.company" required>
+    </mat-form-field>
+    <br>
+
     <!-- Login -->
     <mat-form-field appearance="fill">
-        <mat-label>Login</mat-label>
+        <mat-label>Pseudo</mat-label>
         <input matInput type="text" [(ngModel)]="user.login" required>
     </mat-form-field>
     <br>
diff --git a/src/app/beforeConnexion/register/page-register/page-register.component.ts b/src/app/beforeConnexion/register/page-register/page-register.component.ts
index 0ad0be0..db9d8cf 100644
--- a/src/app/beforeConnexion/register/page-register/page-register.component.ts
+++ b/src/app/beforeConnexion/register/page-register/page-register.component.ts
@@ -32,6 +32,7 @@ export class PageRegisterComponent
         dateOfBirth: null,
         gender: "man",
         interests: [],
+        company: "",
         isActive: false,
         isAccepted: false,
         createdAt: new Date(),
@@ -94,7 +95,11 @@ export class PageRegisterComponent
     // Check les champs saisies par l'utilisateur
     checkField(): void
     {
-        if(this.user.login.length === 0) {
+        if((this.user.role.name === 'advertiser') && (this.user.company.length === 0)) {
+            this.errorMessage = "Veuillez remplir le champ 'entreprise'.";
+            this.hasError = true;
+        }
+        else if(this.user.login.length === 0) {
             this.errorMessage = "Veuillez remplir le champ 'login'.";
             this.hasError = true;
         }
diff --git a/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss b/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss
index c1e4491..0376ee3 100644
--- a/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss
+++ b/src/app/user/myPlaylists/playlist-list/playlist-list.component.scss
@@ -15,7 +15,9 @@
   text-align: center;
   margin: 0px 0px 0px 0px;
   padding: 10px 0px 10px 0px;
-  background-color: #dcdcdc;
+  //background-color: #dcdcdc;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
   font-size: large;
   border-bottom: solid 1px black;
   border-top-left-radius: 10px;
@@ -83,4 +85,10 @@
 
 .btnCreerPlaylist {
   margin: 0px 0px 0px 0px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
+  //background: linear-gradient(180deg, #e6e6e6 0%, rgba(0,0,0,0.25) 49%, rgba(38,38,38,0.6) 51%, rgba(0,0,0,0.25) 100%);
 }
+
diff --git a/src/app/user/myPlaylists/video-list/video-list.component.scss b/src/app/user/myPlaylists/video-list/video-list.component.scss
index 07aeb42..e3af7ce 100644
--- a/src/app/user/myPlaylists/video-list/video-list.component.scss
+++ b/src/app/user/myPlaylists/video-list/video-list.component.scss
@@ -1,5 +1,7 @@
 .myContainer {
-  background-color: white ;
+  //background-color: white ;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
   text-align: center;
   width: 35vw;
   margin: 1vh 0vh 3vh 0vh;
@@ -13,7 +15,9 @@
 
 .topBorder {
   margin: 0px 0px 0px 0px;
-  background-color: #dcdcdc;
+  //background-color: #dcdcdc;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
   text-align: left;
   padding: 5px 0px 5px 5px;
   border-bottom: solid 1px black;
@@ -68,7 +72,9 @@
 
 .bottomBorder {
   margin: 0px 0px 0px 0px;
-  background-color: #dcdcdc;
+  //background-color: #dcdcdc;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
   border-top: solid 1px black;
   border-bottom: solid 1px black;
   font-size: large;
diff --git a/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts b/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts
index cf1b889..c6abfb7 100644
--- a/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts
+++ b/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts
@@ -39,6 +39,7 @@ export class PopupUpdateUserComponent implements OnInit
             dateOfBirth: user0.dateOfBirth,
             gender: user0.gender,
             interests: [],
+            company: "",
             isActive: user0.isActive,
             isAccepted: user0.isAccepted,
             createdAt: user0.createdAt,
diff --git a/src/app/user/search/video-grid/video-grid.component.html b/src/app/user/search/video-grid/video-grid.component.html
index 5b6d46b..3cb869c 100644
--- a/src/app/user/search/video-grid/video-grid.component.html
+++ b/src/app/user/search/video-grid/video-grid.component.html
@@ -16,7 +16,7 @@
 
 
                 <!-- Info video -->
-                <mat-grid-list cols="12" style="margin: 0px 0px 0px 0px; font-size: small">
+                <mat-grid-list cols="12" class="mat-grid-list-info-video">
 
                     <!-- logo -->
                     <mat-grid-tile [colspan]="2" [rowspan]="2" class="mat-grid-tile-info-video" (click)="onVideo(tabVideo[indexPage+k])">
diff --git a/src/app/user/search/video-grid/video-grid.component.scss b/src/app/user/search/video-grid/video-grid.component.scss
index 7f3a7ea..6819fd8 100644
--- a/src/app/user/search/video-grid/video-grid.component.scss
+++ b/src/app/user/search/video-grid/video-grid.component.scss
@@ -7,13 +7,12 @@ mat-grid-list {
 mat-grid-tile {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
-  //border: solid 1px black;
 }
 
 .myCell {
   margin: 7px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
-  background-color: #f0f0f0;
+  background-color: white;
   border: solid 1px black;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
@@ -43,8 +42,6 @@ mat-grid-tile {
 }
 
 .imgVideo {
-  //border: solid 1px black;
-  //width: 20vw;
   width: 18vw;
   height: 15vh;
   padding: 0px 0px 0px 0px;
@@ -54,9 +51,16 @@ mat-grid-tile {
 // ---------------------------------------------------------------------------------------------
 
 
+.mat-grid-list-info-video {
+  margin: 0px 0px 0px 0px;
+  font-size: small;
+}
+
 .mat-grid-tile-info-video {
   border: none;
   font-size: x-small;
+  //background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  //background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
 }
 
 mat-icon {
diff --git a/src/app/user/utils/components/advert/advert.component.html b/src/app/user/utils/components/advert/advert.component.html
index 3bcedd5..c7e90f0 100644
--- a/src/app/user/utils/components/advert/advert.component.html
+++ b/src/app/user/utils/components/advert/advert.component.html
@@ -2,6 +2,7 @@
     <span class="helper"></span>
     <img [src]="'assets/pub/'+ad.images[idxImage].url"
          [alt]="ad.images[idxImage].url"
+         (click)="onClick()"
          id="imgFromSearchOrMyPlaylists">
 </div>
 
@@ -10,6 +11,7 @@
 <img *ngIf="from === 'watchingLeft'"
      [src]="'assets/pub/'+ad.images[idxImage].url"
      [alt]="ad.images[idxImage].url"
+     (click)="onClick()"
      id="imgFromWatchingLeft">
 
 <!-- --------------------------------------------------------------------- -->
@@ -17,4 +19,5 @@
 <img *ngIf="from === 'watchingRight'"
      [src]="'assets/pub/'+ad.images[idxImage].url"
      [alt]="ad.images[idxImage].url"
+     (click)="onClick()"
      id="imgFromWatchingRight">
diff --git a/src/app/user/utils/components/advert/advert.component.ts b/src/app/user/utils/components/advert/advert.component.ts
index d8effca..a088499 100644
--- a/src/app/user/utils/components/advert/advert.component.ts
+++ b/src/app/user/utils/components/advert/advert.component.ts
@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {Advert} from "../../../../utils/interfaces/advert";
-import {ThemeService} from "../../../../utils/services/theme/theme.service";
+import {Router} from "@angular/router";
 
 
 
@@ -15,16 +15,17 @@ export class AdvertComponent implements OnInit
     @Input() from: string = "search";
     idxImage: number = 0;
 
-
-    constructor(public themeService: ThemeService) { }
-
+    constructor(private router: Router) { }
 
     ngOnInit(): void
     {
         const nbImages = this.ad.images.length;
         this.idxImage = Math.floor(Math.random() * nbImages);
+    }
 
-
+    onClick(): void
+    {
+        document.location.href = this.ad.url;
     }
 
 }
diff --git a/src/app/user/watching/page-watching-video/page-watching-video.component.scss b/src/app/user/watching/page-watching-video/page-watching-video.component.scss
index fa8de70..d3f10e8 100644
--- a/src/app/user/watching/page-watching-video/page-watching-video.component.scss
+++ b/src/app/user/watching/page-watching-video/page-watching-video.component.scss
@@ -35,7 +35,9 @@
 
 .topBorder {
   margin: 0px 0px 0px 0px;
-  background-color: #dcdcdc;
+  //background-color: #dcdcdc;
+  background: linear-gradient(top, rgba(38,38,38,0.8), #e6e6e6 25%, #fff 38%, #c5c5c5 87%, rgba(38,38,38,0.8));
+  background: -webkit-linear-gradient(top, #c5c5c5, #e6e6e6 25%, #fff 38%, #c5c5c5 87%, #c5c5c5);
   text-align: left;
   padding: 5px 0px 5px 5px;
   border-bottom: solid 1px black;
diff --git a/src/app/utils/interfaces/advert.ts b/src/app/utils/interfaces/advert.ts
index 5b17905..d144d46 100644
--- a/src/app/utils/interfaces/advert.ts
+++ b/src/app/utils/interfaces/advert.ts
@@ -3,7 +3,7 @@ export interface Advert
     _id: string,
     userId: string,
     title: string,
-    advertiser: string,
+    url: string,
     images: {
         url: string,
         description: string,
@@ -23,7 +23,7 @@ export interface AdvertWithCountViews {
     _id: string,
     userId: string,
     title: string,
-    advertiser: string,
+    url: string,
     images: {
         url: string,
         description: string,
diff --git a/src/app/utils/interfaces/user.ts b/src/app/utils/interfaces/user.ts
index 5985673..9732a08 100644
--- a/src/app/utils/interfaces/user.ts
+++ b/src/app/utils/interfaces/user.ts
@@ -12,6 +12,7 @@ export interface User
     dateOfBirth: Date,
     gender: string,
     interests: string[],
+    company: string,
     isActive: boolean,
     isAccepted: boolean,
     lastConnexion: Date,
diff --git a/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts b/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts
index 7170d7f..2dd7702 100644
--- a/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts
+++ b/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts
@@ -9,7 +9,7 @@ const TAB_ADVERT: Advert[] = [
         _id: "idNutella",
         userId: "userId",
         title: "pot de nutella XXL",
-        advertiser: "nutella",
+        url: "https://www.nutella.com/fr/fr/",
         images: [
             { url: "nutella_v_1.jpeg", description: "image nutella 1" },
             { url: "nutella_v_2.png", description: "image nutella 2" },
@@ -38,7 +38,7 @@ const TAB_ADVERT: Advert[] = [
         _id: "idRolex",
         userId: "userId",
         title: "Rolex",
-        advertiser: "rolex",
+        url: "https://www.rolex.com",
         images: [
             { url: "rolex_v_1.jpg", description: "rolex 1" },
             { url: "rolex_v_2.png", description: "rolex 2" },
@@ -66,7 +66,7 @@ const TAB_ADVERT: Advert[] = [
         _id: "idAlbion",
         userId: "userId",
         title: "Albion new version",
-        advertiser: "albion",
+        url: "https://www.rolex.com",
         images: [
             { url: "rolex_v_1.jpg", description: "albion 1" },
             { url: "rolex_v_2.png", description: "albion 2" },
diff --git a/src/app/utils/services/fictitiousDatas/fictitiousUsers/fictitious-users.service.ts b/src/app/utils/services/fictitiousDatas/fictitiousUsers/fictitious-users.service.ts
index 2b37759..1f1b857 100644
--- a/src/app/utils/services/fictitiousDatas/fictitiousUsers/fictitious-users.service.ts
+++ b/src/app/utils/services/fictitiousDatas/fictitiousUsers/fictitious-users.service.ts
@@ -17,6 +17,7 @@ const USER: User = {
     dateOfBirth: new Date(),
     gender: "man",
     interests: ["foot", "jeux-vidéo"],
+    company: "",
     isActive: true,
     isAccepted: true,
     lastConnexion: new Date(),
@@ -37,6 +38,7 @@ const ADVERTISER: User = {
     dateOfBirth: null,
     gender: "",
     interests: [],
+    company: "My company",
     isActive: true,
     isAccepted: true,
     lastConnexion: new Date(),
@@ -57,6 +59,7 @@ const ADMIN: User = {
     dateOfBirth: null,
     gender: "",
     interests: [],
+    company: "",
     isActive: true,
     isAccepted: true,
     lastConnexion: new Date(),

From 939e5f4df1ffa9fa5e7fb1bf4914395edc098afd Mon Sep 17 00:00:00 2001
From: MiharyR <mihary.rnvsn@gmail.com>
Date: Sat, 27 Nov 2021 22:13:46 +0100
Subject: [PATCH 5/5] =?UTF-8?q?corrections=20des=20erreurs=20remarqu=C3=A9?=
 =?UTF-8?q?es=20par=20Wilfried?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page-ad-list-admin.component.html         |  2 +-
 .../page-profil-admin.component.html          |  2 +-
 .../popup-update-admin.component.ts           |  3 +-
 .../page-user-list.component.html             |  4 +-
 .../popup-create-user.component.html          |  4 +-
 .../popup-create-user.component.ts            |  2 +-
 .../navbar-admin/navbar-admin.component.html  |  4 +-
 .../navbar-admin/navbar-admin.component.scss  |  0
 .../navbar-admin.component.spec.ts            |  0
 .../navbar-admin/navbar-admin.component.ts    |  0
 .../popup-update-advertiser.component.ts      |  2 +-
 .../drag-and-drop.directive.spec.ts           |  0
 .../dragAndDrop/drag-and-drop.directive.ts    |  0
 .../navbar-advertiser.component.html          |  0
 .../navbar-advertiser.component.scss          |  0
 .../navbar-advertiser.component.spec.ts       |  0
 .../navbar-advertiser.component.ts            |  0
 src/app/app.module.ts                         | 10 ++-
 .../page-login/page-login.component.html      |  4 +-
 .../login/page-login/page-login.component.ts  | 22 +++++--
 .../page-register.component.html              |  2 +-
 .../page-register/page-register.component.ts  |  2 +-
 .../navbar-before-connexion.component.html    |  0
 .../navbar-before-connexion.component.scss    |  0
 .../navbar-before-connexion.component.spec.ts |  0
 .../navbar-before-connexion.component.ts      |  0
 .../page-history-user.component.html          |  4 +-
 .../page-history-user.component.ts            | 35 +++++++----
 .../page-profil-user.component.html           |  2 +-
 .../popup-update-user.component.html          |  2 +-
 .../popup-update-user.component.ts            |  2 +-
 .../iframe-tracker.directive.spec.ts          |  8 ---
 .../iframe-tracker.directive.ts               | 62 -------------------
 33 files changed, 66 insertions(+), 112 deletions(-)
 rename src/app/admin/utils/{components => }/navbar-admin/navbar-admin.component.html (92%)
 rename src/app/admin/utils/{components => }/navbar-admin/navbar-admin.component.scss (100%)
 rename src/app/admin/utils/{components => }/navbar-admin/navbar-admin.component.spec.ts (100%)
 rename src/app/admin/utils/{components => }/navbar-admin/navbar-admin.component.ts (100%)
 rename src/app/{utils/directives => advertiser/utils}/dragAndDrop/drag-and-drop.directive.spec.ts (100%)
 rename src/app/{utils/directives => advertiser/utils}/dragAndDrop/drag-and-drop.directive.ts (100%)
 rename src/app/advertiser/utils/{components => }/navbar-advertiser/navbar-advertiser.component.html (100%)
 rename src/app/advertiser/utils/{components => }/navbar-advertiser/navbar-advertiser.component.scss (100%)
 rename src/app/advertiser/utils/{components => }/navbar-advertiser/navbar-advertiser.component.spec.ts (100%)
 rename src/app/advertiser/utils/{components => }/navbar-advertiser/navbar-advertiser.component.ts (100%)
 rename src/app/beforeConnexion/{ => utils}/navbar-before-connexion/navbar-before-connexion.component.html (100%)
 rename src/app/beforeConnexion/{ => utils}/navbar-before-connexion/navbar-before-connexion.component.scss (100%)
 rename src/app/beforeConnexion/{ => utils}/navbar-before-connexion/navbar-before-connexion.component.spec.ts (100%)
 rename src/app/beforeConnexion/{ => utils}/navbar-before-connexion/navbar-before-connexion.component.ts (100%)
 delete mode 100644 src/app/utils/directives/iframe-tracker/iframe-tracker.directive.spec.ts
 delete mode 100644 src/app/utils/directives/iframe-tracker/iframe-tracker.directive.ts

diff --git a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
index 3e020de..d5d233a 100644
--- a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
+++ b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html
@@ -87,7 +87,7 @@
 
             <!-- Advertiser Column -->
             <ng-container matColumnDef="company">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Annonceur </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Entreprise </th>
                 <td mat-cell *matCellDef="let advert">
                     {{advert.company}}
                 </td>
diff --git a/src/app/admin/myProfil/page-profil-admin/page-profil-admin.component.html b/src/app/admin/myProfil/page-profil-admin/page-profil-admin.component.html
index 6877336..7e025c5 100644
--- a/src/app/admin/myProfil/page-profil-admin/page-profil-admin.component.html
+++ b/src/app/admin/myProfil/page-profil-admin/page-profil-admin.component.html
@@ -15,7 +15,7 @@
 
             <!-- login -->
             <div class="row myRow">
-                <div class="col-6 myLabel">Login:</div>
+                <div class="col-6 myLabel">Pseudo:</div>
                 <div class="col-6 myValue"> {{admin.login}} </div>
             </div>
 
diff --git a/src/app/admin/myProfil/popup-update-admin/popup-update-admin.component.ts b/src/app/admin/myProfil/popup-update-admin/popup-update-admin.component.ts
index 5e61893..6f9eabc 100644
--- a/src/app/admin/myProfil/popup-update-admin/popup-update-admin.component.ts
+++ b/src/app/admin/myProfil/popup-update-admin/popup-update-admin.component.ts
@@ -68,7 +68,7 @@ export class PopupUpdateAdminComponent implements OnInit
     checkField()
     {
         if(this.adminCopy.login.length === 0) {
-            this.errorMessage = "Veuillez remplir le champ 'login'" ;
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'" ;
             this.hasError = true;
         }
         else if(this.adminCopy.email.length === 0) {
@@ -113,4 +113,5 @@ export class PopupUpdateAdminComponent implements OnInit
         }
         return hash.toString();
     }
+
 }
diff --git a/src/app/admin/userList/page-user-list/page-user-list.component.html b/src/app/admin/userList/page-user-list/page-user-list.component.html
index 421cb79..212f895 100644
--- a/src/app/admin/userList/page-user-list/page-user-list.component.html
+++ b/src/app/admin/userList/page-user-list/page-user-list.component.html
@@ -35,7 +35,7 @@
                                 <mat-radio-button value="user" (click)="this.roleName = 'user'; onFilter()">
                                     Utilisateur
                                 </mat-radio-button><br>
-                                <mat-radio-button value="url" (click)="this.roleName = 'url'; onFilter()">
+                                <mat-radio-button value="advertiser" (click)="this.roleName = 'advertiser'; onFilter()">
                                     Annonceur
                                 </mat-radio-button><br>
                                 <mat-radio-button value="admin" (click)="this.roleName = 'admin'; onFilter()">
@@ -99,7 +99,7 @@
 
             <!-- Login Column -->
             <ng-container matColumnDef="login">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Login </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Pseudo </th>
                 <td mat-cell *matCellDef="let user">
                     {{user.login}}
                 </td>
diff --git a/src/app/admin/userList/popup-create-user/popup-create-user.component.html b/src/app/admin/userList/popup-create-user/popup-create-user.component.html
index 6b8659d..2085ccd 100644
--- a/src/app/admin/userList/popup-create-user/popup-create-user.component.html
+++ b/src/app/admin/userList/popup-create-user/popup-create-user.component.html
@@ -58,7 +58,7 @@
 
             <!-- Login -->
             <mat-form-field appearance="fill">
-                <mat-label>Login</mat-label>
+                <mat-label>Pseudo</mat-label>
                 <input matInput type="text" [(ngModel)]="user.login" required>
             </mat-form-field><br>
 
@@ -130,7 +130,7 @@
             </mat-form-field><br>
             <!-- login -->
             <mat-form-field appearance="fill">
-                <mat-label>Login</mat-label>
+                <mat-label>Pseudo</mat-label>
                 <input matInput type="text" [(ngModel)]="user.login">
             </mat-form-field><br>
             <!-- company -->
diff --git a/src/app/admin/userList/popup-create-user/popup-create-user.component.ts b/src/app/admin/userList/popup-create-user/popup-create-user.component.ts
index 5e0470c..141fe53 100644
--- a/src/app/admin/userList/popup-create-user/popup-create-user.component.ts
+++ b/src/app/admin/userList/popup-create-user/popup-create-user.component.ts
@@ -66,7 +66,7 @@ export class PopupCreateUserComponent implements OnInit
     checkField(): void
     {
         if(this.user.login.length === 0) {
-            this.errorMessage = "Veuillez remplir le champ 'login'.";
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'.";
             this.hasError = true;
         }
         else if(this.user.email.length === 0) {
diff --git a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html b/src/app/admin/utils/navbar-admin/navbar-admin.component.html
similarity index 92%
rename from src/app/admin/utils/components/navbar-admin/navbar-admin.component.html
rename to src/app/admin/utils/navbar-admin/navbar-admin.component.html
index 6bde92b..90f0cbc 100644
--- a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html
+++ b/src/app/admin/utils/navbar-admin/navbar-admin.component.html
@@ -15,8 +15,8 @@
                 <a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Liste des utillisateurs</a>
             </li>
             <li class="nav-item active monLi">
-                <a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Liste des pubs</a>
-                <a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Liste des pubs</a>
+                <a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Liste des publicités</a>
+                <a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Liste des publicités</a>
             </li>
         </ul>
     </div>
diff --git a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.scss b/src/app/admin/utils/navbar-admin/navbar-admin.component.scss
similarity index 100%
rename from src/app/admin/utils/components/navbar-admin/navbar-admin.component.scss
rename to src/app/admin/utils/navbar-admin/navbar-admin.component.scss
diff --git a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.spec.ts b/src/app/admin/utils/navbar-admin/navbar-admin.component.spec.ts
similarity index 100%
rename from src/app/admin/utils/components/navbar-admin/navbar-admin.component.spec.ts
rename to src/app/admin/utils/navbar-admin/navbar-admin.component.spec.ts
diff --git a/src/app/admin/utils/components/navbar-admin/navbar-admin.component.ts b/src/app/admin/utils/navbar-admin/navbar-admin.component.ts
similarity index 100%
rename from src/app/admin/utils/components/navbar-admin/navbar-admin.component.ts
rename to src/app/admin/utils/navbar-admin/navbar-admin.component.ts
diff --git a/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts b/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts
index 26882ac..23827fe 100644
--- a/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts
+++ b/src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts
@@ -68,7 +68,7 @@ export class PopupUpdateAdvertiserComponent implements OnInit
     checkField()
     {
         if(this.advertiserCopy.login.length === 0) {
-            this.errorMessage = "Veuillez remplir le champ 'login'" ;
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'" ;
             this.hasError = true;
         }
         else if(this.advertiserCopy.email.length === 0) {
diff --git a/src/app/utils/directives/dragAndDrop/drag-and-drop.directive.spec.ts b/src/app/advertiser/utils/dragAndDrop/drag-and-drop.directive.spec.ts
similarity index 100%
rename from src/app/utils/directives/dragAndDrop/drag-and-drop.directive.spec.ts
rename to src/app/advertiser/utils/dragAndDrop/drag-and-drop.directive.spec.ts
diff --git a/src/app/utils/directives/dragAndDrop/drag-and-drop.directive.ts b/src/app/advertiser/utils/dragAndDrop/drag-and-drop.directive.ts
similarity index 100%
rename from src/app/utils/directives/dragAndDrop/drag-and-drop.directive.ts
rename to src/app/advertiser/utils/dragAndDrop/drag-and-drop.directive.ts
diff --git a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html b/src/app/advertiser/utils/navbar-advertiser/navbar-advertiser.component.html
similarity index 100%
rename from src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html
rename to src/app/advertiser/utils/navbar-advertiser/navbar-advertiser.component.html
diff --git a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss b/src/app/advertiser/utils/navbar-advertiser/navbar-advertiser.component.scss
similarity index 100%
rename from src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss
rename to src/app/advertiser/utils/navbar-advertiser/navbar-advertiser.component.scss
diff --git a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.spec.ts b/src/app/advertiser/utils/navbar-advertiser/navbar-advertiser.component.spec.ts
similarity index 100%
rename from src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.spec.ts
rename to src/app/advertiser/utils/navbar-advertiser/navbar-advertiser.component.spec.ts
diff --git a/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.ts b/src/app/advertiser/utils/navbar-advertiser/navbar-advertiser.component.ts
similarity index 100%
rename from src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.ts
rename to src/app/advertiser/utils/navbar-advertiser/navbar-advertiser.component.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d1b563b..28aa609 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -22,7 +22,6 @@ import {MatDividerModule} from "@angular/material/divider";
 import {MatCheckboxModule} from "@angular/material/checkbox";
 import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatSnackBarModule} from "@angular/material/snack-bar";
-import { IframeTrackerDirective } from './utils/directives/iframe-tracker/iframe-tracker.directive';
 import {MatGridListModule} from "@angular/material/grid-list";
 import { PageMyPlaylistsComponent } from './user/myPlaylists/page-my-playlists/page-my-playlists.component';
 import { PlaylistListComponent } from './user/myPlaylists/playlist-list/playlist-list.component';
@@ -43,15 +42,15 @@ import {MatSelectModule} from "@angular/material/select";
 import { PopupVisualizeImagesAdvertiserComponent } from './advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component';
 import {IvyCarouselModule} from "angular-responsive-carousel";
 import { DragAndDropComponent } from './advertiser/adList/drag-and-drop/drag-and-drop.component';
-import { DragAndDropDirective } from './utils/directives/dragAndDrop/drag-and-drop.directive';
+import { DragAndDropDirective } from './advertiser/utils/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/utils/components/navbar-advertiser/navbar-advertiser.component';
-import { NavbarAdminComponent } from './admin/utils/components/navbar-admin/navbar-admin.component';
+import { NavbarAdvertiserComponent } from './advertiser/utils/navbar-advertiser/navbar-advertiser.component';
+import { NavbarAdminComponent } from './admin/utils/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';
-import { NavbarBeforeConnexionComponent } from './beforeConnexion/navbar-before-connexion/navbar-before-connexion.component';
+import { NavbarBeforeConnexionComponent } from './beforeConnexion/utils/navbar-before-connexion/navbar-before-connexion.component';
 import {MatRadioModule} from "@angular/material/radio";
 import { InputInterestsProfilComponent } from './user/myProfil/input-interests-profil/input-interests-profil.component';
 import { PageProfilAdminComponent } from './admin/myProfil/page-profil-admin/page-profil-admin.component';
@@ -85,7 +84,6 @@ import { PopupDeletePlaylistComponent } from './user/myPlaylists/popup-delete-pl
         AdvertComponent,
         VideoGridComponent,
         PopupAddVideoToPlaylistsComponent,
-        IframeTrackerDirective,
         PageMyPlaylistsComponent,
         VideoListComponent,
         PlaylistListComponent,
diff --git a/src/app/beforeConnexion/login/page-login/page-login.component.html b/src/app/beforeConnexion/login/page-login/page-login.component.html
index 1404ee9..48258aa 100644
--- a/src/app/beforeConnexion/login/page-login/page-login.component.html
+++ b/src/app/beforeConnexion/login/page-login/page-login.component.html
@@ -14,8 +14,8 @@
 
                 <!-- Login Form -->
                 <form>
-                    <input [(ngModel)]="pseudo" type="text" id="login" class="fadeIn second" name="login" placeholder="Login">
-                    <input [(ngModel)]="password" type="password" id="password" class="fadeIn third" name="login" placeholder="Mot de passe">
+                    <input [(ngModel)]="email" type="text" id="email" class="fadeIn second" name="email" placeholder="Email">
+                    <input [(ngModel)]="password" type="password" id="password" class="fadeIn third" name="password" placeholder="Mot de passe">
                     <!-- Message d'erreur -->
                     <div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
                         <span class="mat-error"> {{errorMessage}} </span>
diff --git a/src/app/beforeConnexion/login/page-login/page-login.component.ts b/src/app/beforeConnexion/login/page-login/page-login.component.ts
index 68130da..008a81f 100644
--- a/src/app/beforeConnexion/login/page-login/page-login.component.ts
+++ b/src/app/beforeConnexion/login/page-login/page-login.component.ts
@@ -12,7 +12,7 @@ import {ThemeService} from "../../../utils/services/theme/theme.service";
 })
 export class PageLoginComponent implements OnInit
 {
-    pseudo: string = "" ;
+    email: string = "" ;
     password: string = "" ;
     hasError: boolean = false;
     errorMessage: string = "";
@@ -33,8 +33,8 @@ export class PageLoginComponent implements OnInit
         if(!this.hasError)
         {
             let data = {
-              login: this.pseudo,
-              hashPass: this.password
+                email: this.email,
+                hashPass: this.hashage(this.password)
             };
             this.messageService
                 .sendMessage('user/auth', data)
@@ -58,8 +58,8 @@ export class PageLoginComponent implements OnInit
 
     checkError(): void
     {
-        if(this.pseudo === "") {
-            this.errorMessage = "Veuillez remplir le champ login" ;
+        if(this.email === "") {
+            this.errorMessage = "Veuillez remplir le champ email" ;
             this.hasError = true;
         }
         else if(this.password === "") {
@@ -72,4 +72,16 @@ export class PageLoginComponent implements OnInit
         }
     }
 
+    // Fonction de hashage (faible)
+    hashage(input: string): string
+    {
+        let hash = 0;
+        for (let i = 0; i < input.length; i++) {
+            let ch = input.charCodeAt(i);
+            hash = ((hash << 5) - hash) + ch;
+            hash = hash & hash;
+        }
+        return hash.toString();
+    }
+
 }
diff --git a/src/app/beforeConnexion/register/page-register/page-register.component.html b/src/app/beforeConnexion/register/page-register/page-register.component.html
index c3dafab..42ad1a5 100644
--- a/src/app/beforeConnexion/register/page-register/page-register.component.html
+++ b/src/app/beforeConnexion/register/page-register/page-register.component.html
@@ -63,7 +63,7 @@
 
             <!-- Login -->
             <mat-form-field appearance="fill">
-                <mat-label>Login</mat-label>
+                <mat-label>Pseudo</mat-label>
                 <input matInput type="text" [(ngModel)]="user.login" required>
             </mat-form-field>
             <br>
diff --git a/src/app/beforeConnexion/register/page-register/page-register.component.ts b/src/app/beforeConnexion/register/page-register/page-register.component.ts
index db9d8cf..c109478 100644
--- a/src/app/beforeConnexion/register/page-register/page-register.component.ts
+++ b/src/app/beforeConnexion/register/page-register/page-register.component.ts
@@ -100,7 +100,7 @@ export class PageRegisterComponent
             this.hasError = true;
         }
         else if(this.user.login.length === 0) {
-            this.errorMessage = "Veuillez remplir le champ 'login'.";
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'.";
             this.hasError = true;
         }
         else if(this.user.email.length === 0) {
diff --git a/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.html b/src/app/beforeConnexion/utils/navbar-before-connexion/navbar-before-connexion.component.html
similarity index 100%
rename from src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.html
rename to src/app/beforeConnexion/utils/navbar-before-connexion/navbar-before-connexion.component.html
diff --git a/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss b/src/app/beforeConnexion/utils/navbar-before-connexion/navbar-before-connexion.component.scss
similarity index 100%
rename from src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss
rename to src/app/beforeConnexion/utils/navbar-before-connexion/navbar-before-connexion.component.scss
diff --git a/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.spec.ts b/src/app/beforeConnexion/utils/navbar-before-connexion/navbar-before-connexion.component.spec.ts
similarity index 100%
rename from src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.spec.ts
rename to src/app/beforeConnexion/utils/navbar-before-connexion/navbar-before-connexion.component.spec.ts
diff --git a/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.ts b/src/app/beforeConnexion/utils/navbar-before-connexion/navbar-before-connexion.component.ts
similarity index 100%
rename from src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.ts
rename to src/app/beforeConnexion/utils/navbar-before-connexion/navbar-before-connexion.component.ts
diff --git a/src/app/user/history/page-history-user/page-history-user.component.html b/src/app/user/history/page-history-user/page-history-user.component.html
index 07ef9dd..d14ad31 100644
--- a/src/app/user/history/page-history-user/page-history-user.component.html
+++ b/src/app/user/history/page-history-user/page-history-user.component.html
@@ -33,9 +33,9 @@
 
             <!-- Date Column -->
             <ng-container matColumnDef="date">
-                <th mat-header-cell *matHeaderCellDef> Date </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
                 <td mat-cell *matCellDef="let video">
-                    {{video.watchedDates[video.watchedDates.length-1] | date:'dd/LL/YYYY à HH:mm:ss'}}
+                    {{video.date | date:'dd/LL/YYYY à HH:mm:ss'}}
                 </td>
             </ng-container>
 
diff --git a/src/app/user/history/page-history-user/page-history-user.component.ts b/src/app/user/history/page-history-user/page-history-user.component.ts
index 5f1ff69..6999167 100644
--- a/src/app/user/history/page-history-user/page-history-user.component.ts
+++ b/src/app/user/history/page-history-user/page-history-user.component.ts
@@ -11,6 +11,15 @@ import {Router} from "@angular/router";
 
 
 
+interface VideoHistory {
+    imageUrl: string,
+    title: string,
+    date: Date,
+    source: string,
+}
+
+
+
 @Component({
     selector: 'app-page-history-user',
     templateUrl: './page-history-user.component.html',
@@ -37,8 +46,10 @@ export class PageHistoryUserComponent implements AfterViewInit
         this.userHistoryService.clearTabVideoUrlClicked();
 
         // --- FAUX CODE ---
-        const tabVideo: VideoAll[] = this.fictitiousVideosService.getTabVideoAll(8);
-        this.dataSource = new MatTableDataSource(tabVideo);
+        const tabVideoAll: VideoAll[] = this.fictitiousVideosService.getTabVideoAll(8);
+        let tabVideoHistory: VideoHistory[] = [];
+        for(let videoAll of tabVideoAll) tabVideoHistory.push(this.videoAllToVideoHistory(videoAll));
+        this.dataSource = new MatTableDataSource(tabVideoHistory);
         this.dataSource.sort = this.sort;
         this.dataSource.paginator = this.paginator;
         this.dataSource = this.dataSource;
@@ -67,15 +78,6 @@ export class PageHistoryUserComponent implements AfterViewInit
     }
 
 
-    // Retourne la source de la video en fonction de l'url
-    getSourceByUrl(url: string): string
-    {
-        if(url.includes("youtu")) return "Youtube" ;
-        else if(url.includes("daily")) return "Dailymotion" ;
-        else return "???" ;
-    }
-
-
     // Supprime la video
     onDelete(video: VideoAll): void
     {
@@ -109,4 +111,15 @@ export class PageHistoryUserComponent implements AfterViewInit
         this.router.navigateByUrl(url);
     }
 
+
+    videoAllToVideoHistory(videoAll: VideoAll): VideoHistory
+    {
+        return {
+            imageUrl: videoAll.imageUrl,
+            title: videoAll.title,
+            date: videoAll.watchedDates[videoAll.watchedDates.length-1],
+            source: videoAll.source,
+        }
+    }
+
 }
diff --git a/src/app/user/myProfil/page-profil-user/page-profil-user.component.html b/src/app/user/myProfil/page-profil-user/page-profil-user.component.html
index fa22205..7e69ded 100644
--- a/src/app/user/myProfil/page-profil-user/page-profil-user.component.html
+++ b/src/app/user/myProfil/page-profil-user/page-profil-user.component.html
@@ -37,7 +37,7 @@
 
         <!-- login -->
         <div class="row myRow">
-            <div class="col-8 myLabel">Login:</div>
+            <div class="col-8 myLabel">Pseudo:</div>
             <div class="col-4 myValue"> {{user.login}} </div>
         </div>
 
diff --git a/src/app/user/myProfil/popup-update-user/popup-update-user.component.html b/src/app/user/myProfil/popup-update-user/popup-update-user.component.html
index 6544c05..1e583c7 100644
--- a/src/app/user/myProfil/popup-update-user/popup-update-user.component.html
+++ b/src/app/user/myProfil/popup-update-user/popup-update-user.component.html
@@ -39,7 +39,7 @@
 
         <!-- login -->
         <div class="form-group row myRow">
-            <label for="login" class="col-sm-6 col-form-label myLeftLabel">Login:</label>
+            <label for="login" class="col-sm-6 col-form-label myLeftLabel">Pseudo:</label>
             <div class="col-sm-6">
                 <input type="text" class="form-control myValue" id="login" [(ngModel)]="userCopy.login">
             </div>
diff --git a/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts b/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts
index c6abfb7..806b6c9 100644
--- a/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts
+++ b/src/app/user/myProfil/popup-update-user/popup-update-user.component.ts
@@ -68,7 +68,7 @@ export class PopupUpdateUserComponent implements OnInit
     checkField()
     {
         if(this.userCopy.login.length === 0) {
-            this.errorMessage = "Veuillez remplir le champ 'login'." ;
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'." ;
             this.hasError = true;
         }
         else if(this.userCopy.email.length === 0) {
diff --git a/src/app/utils/directives/iframe-tracker/iframe-tracker.directive.spec.ts b/src/app/utils/directives/iframe-tracker/iframe-tracker.directive.spec.ts
deleted file mode 100644
index da22920..0000000
--- a/src/app/utils/directives/iframe-tracker/iframe-tracker.directive.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { IframeTrackerDirective } from './iframe-tracker.directive';
-
-describe('IframeTrackerDirective', () => {
-  it('should create an instance', () => {
-    const directive = new IframeTrackerDirective();
-    expect(directive).toBeTruthy();
-  });
-});
diff --git a/src/app/utils/directives/iframe-tracker/iframe-tracker.directive.ts b/src/app/utils/directives/iframe-tracker/iframe-tracker.directive.ts
deleted file mode 100644
index c4c5957..0000000
--- a/src/app/utils/directives/iframe-tracker/iframe-tracker.directive.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  OnInit,
-  Renderer2,
-  Input,
-  Output,
-  EventEmitter,
-  HostListener
-} from '@angular/core';
-
-@Directive({
-  selector: '[appIframeTracker]'
-})
-export class IframeTrackerDirective implements OnInit {
-  private iframeMouseOver: boolean;
-
-  @Input() debug: boolean;
-
-  @Output() iframeClick = new EventEmitter<ElementRef>();
-
-  constructor(private el: ElementRef, private renderer: Renderer2) {}
-
-  ngOnInit(): void {
-    this.renderer.listen(window, 'blur', () => this.onWindowBlur());
-  }
-
-  @HostListener('mouseover')
-  private onIframeMouseOver() {
-    this.log('Iframe mouse over');
-    this.iframeMouseOver = true;
-    this.resetFocusOnWindow();
-  }
-
-  @HostListener('mouseout')
-  private onIframeMouseOut() {
-    this.log('Iframe mouse out');
-    this.iframeMouseOver = false;
-    this.resetFocusOnWindow();
-  }
-
-  private onWindowBlur() {
-    if (this.iframeMouseOver) {
-      this.log('WOW! Iframe click!!!');
-      this.resetFocusOnWindow();
-      this.iframeClick.emit(this.el);
-    }
-  }
-
-  private resetFocusOnWindow() {
-    setTimeout(() => {
-      this.log('reset focus to window');
-      window.focus();
-    }, 100);
-  }
-
-  private log(message: string) {
-    if (this.debug) {
-      console.log(message);
-    }
-  }
-}