correction de CSS

src/app/admin/myProfil/popup-update-admin/popup-update-admin.component.scss

@@ -1,3 +1,11 @@
+.boite {
+  font-size: small;
+}
+
+button {
+  font-size: small;
+}
+
 img {
   margin: 0px 0px 10px 0px;
   width: 5vw;
@@ -6,3 +14,20 @@ img {
   border-radius: 50%;
   font-size: xxx-large;
 }
+
+// -------------------------------------------------------------------------
+
+// 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 {
+  background-color: white !important;
+}

src/app/admin/myProfil/popup-update-admin/popup-update-admin.component.ts

@@ -38,6 +38,7 @@ export class PopupUpdateAdminComponent implements OnInit
             gender: admin0.gender,
             interests: [],
             isActive: admin0.isActive,
+            isAccepted: admin0.isisAccepted,
             createdAt: admin0.createdAt,
             updatedAt: admin0.updatedAt,
         };

src/app/admin/navbar-admin/navbar-admin.component.scss

@@ -1,7 +1,7 @@
 .navbar {
   background-color: black;
-  height: 75px;
+  height: 50px;
-  font-size: x-large;
+  font-size: medium;
   color: white;
 }
 
@@ -17,9 +17,8 @@
 .navbar-brand {
   font-family: cursive;
   font-weight: bold;
-  //font-style: oblique 90deg;
+  font-size: x-large;
-  font-size: xxx-large;
+  margin-left: 15px;
-  margin-left: 30px;
   color: white;
 }
 
@@ -35,7 +34,7 @@
 
 // Bonton deconnexion
 .btnDeconnexion {
-  font-size: x-large;
+  font-size: medium;
   margin: 0px 10px 0px 10px
 }
 .btnDeconnexion:hover {
@@ -52,8 +51,8 @@ img {
   border: solid 2px white;
   border-radius: 50px;
   margin: 0px 10px 0px 15px;
-  width: 50px;
+  width: 40px;
-  height: 50px;
+  height: 40px;
 }
 img:hover {
   cursor: pointer;

src/app/advertiser/manageAds/drag-and-drop/drag-and-drop.component.html

@@ -1,7 +1,7 @@
 <div title="bobo" class="container" appDragAndDrop (fileDropped)="onFileDropped($event)">
     <input type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
-    <h3>Images</h3>
+    <div style="font-weight: bold">Images</div>
-    <img src="/src/assets/uploadFile.png" width="50" height="50" style="margin-top: 5px">
+    <img src="/assets/uploadFile.png" width="50" height="50" style="margin-top: 5px">
     <div style="font-style: italic; margin-top: 10px">Glisser déposer</div>
     <div style="font-style: italic">ou</div>
     <div style="font-style: italic" for="fileDropRef">Cliquer pour selectionner</div>

src/app/advertiser/manageAds/drag-and-drop/drag-and-drop.component.scss

@@ -1,6 +1,6 @@
 .container {
   width: 450px;
-  height: 220px;
+  height: 180px;
   padding: 20px 0px 20px 0px;
   text-align: center;
   border: dashed 1px #979797;
@@ -19,14 +19,6 @@ input {
 }
 
 
-h3 {
-  font-size: 20px;
-  font-weight: 600;
-  color: #38424c;
-}
-
-
-
 .fileover {
   animation: shake 1s;
   animation-iteration-count: infinite;

src/app/advertiser/manageAds/input-tags/input-tags.component.html

@@ -1,4 +1,4 @@
-<mat-form-field class="example-chip-list" appearance="fill">
+<mat-form-field class="example-chip-list" appearance="fill" style="font-size: small">
 
     <!-- ------------------------------------------------------------------------------------ -->
 

src/app/advertiser/manageAds/page-advertiser/page-advertiser.component.html

@@ -120,6 +120,9 @@
             </tr>
 
         </table>
+        <div style="width: 94%; margin: auto auto">
+            <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons aria-label="Select page of periodic elements"></mat-paginator>
+        </div>
         <br><br>
 
     </div>

src/app/advertiser/manageAds/page-advertiser/page-advertiser.component.scss

@@ -2,6 +2,7 @@
   max-width: 100vw;
   height: 100vh;
   overflow-x: hidden;
+  font-size: small;
 }
 
 
@@ -12,8 +13,8 @@
   margin-left: 3%;
   font-size: larger;
   padding: 5px 20px 5px 20px;
+  font-size: small;
 }
-
 .lightTheme .btnAjouter {
   border-top: solid 1px #dcdcdc;
   border-right: solid 1px #dcdcdc;
@@ -21,7 +22,6 @@
   color: black;
   background-color: white;
 }
-
 .darkTheme .btnAjouter {
   border-top: solid 1px white;
   border-right: solid 1px white;
@@ -41,6 +41,7 @@
 table {
   margin: 0 auto;
   width: 94%;
+  font-size: small;
 }
 .darkTheme table { border: solid 2px white; }
 
@@ -48,16 +49,12 @@ th.mat-sort-header-sorted {
   color: black;
 }
 
-.lightTheme td {
+td {
-
+  font-size: small;
-}
-.darkTheme td {
-  background-color: #646464;
-  color: white;
 }
 
 input {
-  width: 25%;
+  width: 30%;
-  font-size: x-large;
+  font-size: large;
   border-radius: 5px;
 }

src/app/advertiser/manageAds/page-advertiser/page-advertiser.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {MatSort} from "@angular/material/sort";
 import {ThemeService} from "../../../utils/services/theme/theme.service";
 import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
@@ -9,6 +9,7 @@ import {PopupAddOrUpdateAdComponent} from "../popup-add-or-update-ad/popup-add-o
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {PopupDeleteAdComponent} from "../popup-delete-ad/popup-delete-ad.component";
 import {PopupVisualizeAdComponent} from "../popup-visualize-ad/popup-visualize-ad.component";
+import {MatPaginator} from "@angular/material/paginator";
 
 
 
@@ -17,11 +18,12 @@ import {PopupVisualizeAdComponent} from "../popup-visualize-ad/popup-visualize-a
   templateUrl: './page-advertiser.component.html',
   styleUrls: ['./page-advertiser.component.scss']
 })
-export class PageAdvertiserComponent implements OnInit
+export class PageAdvertiserComponent implements AfterViewInit
 {
     displayedColumns: string[] = [ 'title', 'tags', 'createdAt', 'lastUpdate', 'views', 'isVisible', 'update', 'delete', 'visualisation' ];
     dataSource ;
     @ViewChild(MatSort) sort: MatSort;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
 
 
     constructor( public themeService: ThemeService,
@@ -30,12 +32,14 @@ export class PageAdvertiserComponent implements OnInit
                  private snackBar: MatSnackBar ) { }
 
 
-    ngOnInit(): void
+    ngAfterViewInit(): void
     {
         // --- FAUX CODE ---
         const tabAdvert = this.fictitiousDatasService.getTabAdvert(8);
         this.dataSource = new MatTableDataSource<Advert>(tabAdvert);
         this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+        this.dataSource = this.dataSource;
     }
 
 

src/app/advertiser/manageAds/popup-add-or-update-ad/popup-add-or-update-ad.component.scss

@@ -2,11 +2,12 @@
   background-image: none;
   overflow-y: hidden;
   overflow-x: hidden;
+  font-size: small;
 }
 
 h1 {
   text-align: center;
-  font-size: xx-large;
+  font-size: large;
   padding-bottom: 10px;
 }
 
@@ -14,7 +15,6 @@ h1 {
 // -------------------------------------------------------------------------
 
 
-
 .commentContainer {
   width: 100%;
 }
@@ -23,6 +23,10 @@ h1 {
   border: solid 1px grey;
 }
 
+button {
+  font-size: small;
+}
+
 
 // -------------------------------------------------------------------------
 // --- LightTheme ---

src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.scss

@@ -1,3 +1,11 @@
+.boite {
+  font-size: small;
+}
+
+button {
+  font-size: small;
+}
+
 img {
   margin: 0px 0px 10px 0px;
   width: 5vw;
@@ -6,3 +14,20 @@ img {
   border-radius: 50%;
   font-size: xxx-large;
 }
+
+// -------------------------------------------------------------------------
+
+// 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 {
+  background-color: white !important;
+}

src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts

@@ -40,6 +40,7 @@ export class PopupUpdateAdvertiserComponent implements OnInit
             gender: advertiser0.gender,
             interests: [],
             isActive: advertiser0.isActive,
+            isAccepted: advertiser0.isAccepted,
             createdAt: advertiser0.createdAt,
             updatedAt: advertiser0.updatedAt,
         };

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

@@ -1,7 +1,7 @@
 .navbar {
   background-color: black;
-  height: 75px;
+  height: 50px;
-  font-size: x-large;
+  font-size: medium;
   color: white;
 }
 
@@ -17,9 +17,8 @@
 .navbar-brand {
   font-family: cursive;
   font-weight: bold;
-  //font-style: oblique 90deg;
+  font-size: x-large;
-  font-size: xxx-large;
+  margin-left: 15px;
-  margin-left: 30px;
   color: white;
 }
 
@@ -35,7 +34,7 @@
 
 // Bonton deconnexion
 .btnDeconnexion {
-  font-size: x-large;
+  font-size: medium;
   margin: 0px 10px 0px 10px
 }
 .btnDeconnexion:hover {
@@ -52,8 +51,8 @@ img {
   border: solid 2px white;
   border-radius: 50px;
   margin: 0px 10px 0px 15px;
-  width: 50px;
+  width: 40px;
-  height: 50px;
+  height: 40px;
 }
 img:hover {
   cursor: pointer;

src/app/app.module.ts

@@ -61,6 +61,7 @@ import { PageProfilAdminComponent } from './admin/myProfil/page-profil-admin/pag
 import { PopupUpdateAdminComponent } from './admin/myProfil/popup-update-admin/popup-update-admin.component';
 import {MatStepperModule} from "@angular/material/stepper";
 import { InputInterestsRegisterComponent } from './beforeConnexion/register/input-interests-register/input-interests-register.component';
+import {MatPaginatorModule} from "@angular/material/paginator";
 
 
 @NgModule({
@@ -129,7 +130,8 @@ import { InputInterestsRegisterComponent } from './beforeConnexion/register/inpu
         MatSelectModule,
         IvyCarouselModule,
         MatRadioModule,
-        MatStepperModule
+        MatStepperModule,
+        MatPaginatorModule
     ],
   providers: [],
   bootstrap: [AppComponent]

src/app/beforeConnexion/login/page-login/page-login.component.html

@@ -2,17 +2,15 @@
     <div class="myContainer">
         <div class="bg">
 
-
             <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: 60px; margin-bottom: 20px">StreamNotFound</h1>
+                        <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: 20px"/>
+                        <img src="../../../../assets/logo.png" id="icon" alt="User Icon" style="margin-top: 10px"/>
                     </div>
 
                     <!-- Login Form -->

src/app/beforeConnexion/login/page-login/page-login.component.scss

@@ -34,7 +34,7 @@ h2 {
   flex-direction: column;
   justify-content: center;
   width: 100%;
-  min-height: 100%;
+  min-height: 80%;
   padding: 20px;
 }
 

src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss

@@ -1,7 +1,7 @@
 .navbar {
   background-color: black;
   height: 50px;
-  font-size: large;
+  font-size: medium;
   color: white;
 }
 
@@ -17,9 +17,8 @@
 .navbar-brand {
   font-family: cursive;
   font-weight: bold;
-  //font-style: oblique 90deg;
+  font-size: x-large;
-  font-size: xx-large;
+  margin-left: 15px;
-  margin-left: 30px;
   color: white;
 }
 
@@ -35,7 +34,7 @@
 
 // Bonton deconnexion
 .btnDeconnexion {
-  font-size: large;
+  font-size: medium;
   margin: 0px 10px 0px 10px
 }
 .btnDeconnexion:hover {
@@ -52,8 +51,8 @@ img {
   border: solid 2px white;
   border-radius: 50px;
   margin: 0px 10px 0px 15px;
-  width: 50px;
+  width: 40px;
-  height: 50px;
+  height: 40px;
 }
 img:hover {
   cursor: pointer;

src/app/beforeConnexion/register/page-register/page-register.component.html

@@ -10,7 +10,7 @@
             <!-- Choix du role -->
             <mat-step>
                 <ng-template matStepLabel>Type de compte</ng-template>
-                <form>
+                <form style="margin-top: 10px">
                     <mat-radio-group [(ngModel)]="roleName">
                         <mat-radio-button value="user">Utilisateur standard</mat-radio-button>&nbsp; &nbsp;
                         <mat-radio-button value="advertiser">Annonceur</mat-radio-button>
@@ -24,7 +24,7 @@
             <!-- Infos personelles -->
             <mat-step>
                 <ng-template matStepLabel>Compte & Informations personelles</ng-template>
-                <form>
+                <form style="margin-top: 10px">
                     <ng-template *ngIf="roleName==='user'; then userBlock else advertiserBlock"></ng-template>
                     <div style="text-align: right;">
                         <button mat-button matStepperPrevious>Précédent</button>

src/app/beforeConnexion/register/page-register/page-register.component.scss

@@ -31,3 +31,17 @@ mat-stepper {
   padding: 0px 0px 0px 5px;
   margin: 0px;
 }
+
+
+// -------------------------------------------------------------------------
+
+
+::ng-deep .mat-radio-inner-circle {
+  color: black !important;
+  background-color: black !important;
+}
+
+::ng-deep .mat-radio-outer-circle{
+  color: black !important;
+  border: solid 1px gray !important;
+}

src/app/beforeConnexion/register/page-register/page-register.component.ts

@@ -34,6 +34,7 @@ export class PageRegisterComponent
         gender: "man",
         interests: [],
         isActive: false,
+        isAccepted: false,
         createdAt: new Date(),
         updatedAt: new Date(),
     };

src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.ts

@@ -1,4 +1,4 @@
-import {Component, Inject, OnInit} from '@angular/core';
+import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 
 @Component({

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

@@ -16,45 +16,43 @@
         <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
             <!-- Aperçu Column -->
             <ng-container matColumnDef="aperçu">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Aperçu </th>
+                <th mat-header-cell *matHeaderCellDef> Aperçu </th>
-                <td mat-cell *matCellDef="let watchedVideo">
+                <td mat-cell *matCellDef="let video">
                     <iframe appIframeTracker
-                            [src]=videoUrlService.safeUrl(watchedVideo.url)
+                            [src]=videoUrlService.safeUrl(video.url)
-                            (iframeClick)="onIframeClick(watchedVideo)"
+                            (iframeClick)="onIframeClick(video)"
                             allowfullscreen></iframe>
                 </td>
             </ng-container>
 
             <!-- Titre Column -->
-            <ng-container matColumnDef="titre">
+            <ng-container matColumnDef="title">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
-                <td mat-cell *matCellDef="let watchedVideo">
+                <td mat-cell *matCellDef="let video"> {{video.title}} </td>
-                    {{watchedVideo.title}}
-                </td>
             </ng-container>
 
             <!-- Date Column -->
             <ng-container matColumnDef="date">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
+                <th mat-header-cell *matHeaderCellDef> Date </th>
-                <td mat-cell *matCellDef="let watchedVideo">
+                <td mat-cell *matCellDef="let video">
-                    {{ watchedVideo.date | date:'dd/LL/YYYY à HH:mm:ss' }}
+                    <li *ngFor="let date0 of video.watched">
+                        {{date0 | date:'dd/LL/YYYY à HH:mm:ss'}}
+                    </li>
                 </td>
             </ng-container>
 
             <!-- Source Column -->
             <ng-container matColumnDef="source">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Source </th>
-                <td mat-cell *matCellDef="let watchedVideo">
+                <td mat-cell *matCellDef="let video"> {{video.source}} </td>
-                    {{getSourceByUrl(watchedVideo.url)}}
-                </td>
             </ng-container>
 
             <!-- Action Column -->
             <ng-container matColumnDef="action">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
+                <th mat-header-cell *matHeaderCellDef> Action </th>
-                <td mat-cell *matCellDef="let watchedVideo">
+                <td mat-cell *matCellDef="let video">
-                    <button mat-icon-button (click)="onDelete(watchedVideo)">
+                    <button mat-icon-button (click)="onDelete(video)">
-                        <mat-icon >delete</mat-icon>
+                        <mat-icon>delete</mat-icon>
                     </button>
                 </td>
             </ng-container>
@@ -65,6 +63,9 @@
                 <td class="mat-cell" colspan="4"> Aucune vidéo ne correspond au filtre: "{{input.value}}" </td>
             </tr>
         </table>
+        <div style="width: 80%; margin: auto auto">
+            <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements"></mat-paginator>
+        </div>
         <br><br>
 
     </div>

src/app/user/history/page-history-user/page-history-user.component.scss

@@ -5,23 +5,33 @@
 }
 
 table {
+  width: 80%;
   margin: 0 auto;
 }
 
+/*
+mat-paginator {
+  width: 30%;
+  text-align: center;
+}
+*/
+
 th.mat-sort-header-sorted {
   color: black;
 }
 
+/*
 .lightTheme td {
   padding: 10px 30px 5px 5px;
 }
-
 .darkTheme td {
   background-color: #646464;
   color: white;
   padding: 10px 30px 5px 5px;
 }
+*/
 
 input {
-  width: 25%;
+  width: 35%;
+  font-size: large;
 }

src/app/user/history/page-history-user/page-history-user.component.ts

@@ -1,13 +1,13 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {ThemeService} from "../../../utils/services/theme/theme.service";
 import {MessageService} from "../../../utils/services/message/message.service";
 import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
-import {WatchedVideo} from "../../../utils/interfaces/watchedVideo";
 import {MatTableDataSource} from "@angular/material/table";
 import {MatSort} from "@angular/material/sort";
 import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
 import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
-
+import {Video} from "../../../utils/interfaces/video";
+import {MatPaginator} from "@angular/material/paginator";
 
 
 
@@ -16,11 +16,12 @@ import {UserHistoryService} from "../../../utils/services/userHistory/userHistor
     templateUrl: './page-history-user.component.html',
     styleUrls: ['./page-history-user.component.scss']
 })
-export class PageHistoryUserComponent implements OnInit
+export class PageHistoryUserComponent implements AfterViewInit
 {
-    displayedColumns: string[] = [ 'aperçu', 'titre', 'date', 'source', 'action' ];
+    displayedColumns: string[] = [ 'aperçu', 'title', 'date', 'source', 'action' ];
     dataSource ;
     @ViewChild(MatSort) sort: MatSort;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
 
 
     constructor( public themeService: ThemeService,
@@ -30,14 +31,32 @@ export class PageHistoryUserComponent implements OnInit
                  private userHistoryService: UserHistoryService ) { }
 
 
-    ngOnInit(): void
+    // charge la page
+    ngAfterViewInit(): void
     {
         this.userHistoryService.clearTabVideoUrlClicked();
 
         // --- FAUX CODE ---
-        const tabWatchedVideo = this.fictitiousDatasService.getTabWatchedVideo(8);
+        const tabVideo: Video[] = this.fictitiousDatasService.getTabVideo(8);
-        this.dataSource = new MatTableDataSource(tabWatchedVideo);
+
+        const tabVideoChanged = [];
+        for(let video of tabVideo)
+        {
+            tabVideoChanged.push({
+                _id: video._id,
+                url: video.url,
+                title: video.title,
+                description: video.description,
+                views: video.views,
+                watched: video.watched,
+                source: this.getSourceByUrl(video.url)
+            });
+        }
+
+        this.dataSource = new MatTableDataSource(tabVideoChanged);
         this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+        this.dataSource = this.dataSource;
 
         // --- VRAI CODE ---
         /*
@@ -55,13 +74,15 @@ export class PageHistoryUserComponent implements OnInit
     }
 
 
-    applyFilter(event: Event)
+    // Applique le filtre
+    applyFilter(event: Event): void
     {
         const filterValue = (event.target as HTMLInputElement).value;
         this.dataSource.filter = filterValue.trim().toLowerCase();
     }
 
 
+    // Retourne la source de la video en fonction de l'url
     getSourceByUrl(url: string): string
     {
         if(url.includes("youtu")) return "Youtube" ;
@@ -70,10 +91,11 @@ export class PageHistoryUserComponent implements OnInit
     }
 
 
-    onDelete(watchedVideo: WatchedVideo): void
+    // Supprime la video
+    onDelete(video: Video): void
     {
         // --- FAUX CODE ---
-        const index = this.dataSource.data.indexOf(watchedVideo);
+        const index = this.dataSource.data.indexOf(video);
         this.dataSource.data.splice(index, 1);
         this.dataSource.data = this.dataSource.data;
         this.dataSource = this.dataSource;
@@ -96,10 +118,11 @@ export class PageHistoryUserComponent implements OnInit
     }
 
 
-    onIframeClick(watchedVideo: WatchedVideo)
+    // Ajoute la date actuelle dans watched.video
+    onIframeClick(video: Video): void
     {
-        console.log("onIframeClick: " + watchedVideo.title);
+        console.log("onIframeClick: " + video.title);
-        this.userHistoryService.addWatchedVideoToHistorique(watchedVideo);
+        this.userHistoryService.addVideoToHistoque(video);
     }
 
 }

src/app/user/myProfil/input-interests-profil/input-interests-profil.component.scss

@@ -1,3 +1,16 @@
 mat-form-field {
   width: 100%;
+  font-size: small;
+}
+
+mat-chip {
+  font-size: small;
+}
+
+input {
+  font-size: small;
+}
+
+mat-option {
+  font-size: small;
 }

src/app/user/myProfil/page-profil-user/page-profil-user.component.ts

@@ -33,7 +33,7 @@ export class PageProfilUserComponent implements OnInit
     onModifier()
     {
         const config = {
-            width: '25%',
+            width: '35%',
             data: { user: this.user }
         };
         this.dialog

src/app/user/myProfil/popup-update-user/popup-update-user.component.scss

@@ -1,3 +1,11 @@
+.boite {
+  font-size: small;
+}
+
+button {
+  font-size: small;
+}
+
 img {
   margin: 0px 0px 10px 0px;
   width: 5vw;
@@ -6,3 +14,32 @@ img {
   border-radius: 50%;
   font-size: xxx-large;
 }
+
+// -------------------------------------------------------------------------
+
+// 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 {
+  background-color: white !important;
+}
+
+// -------------------------------------------------------------------------
+
+::ng-deep .mat-radio-inner-circle {
+  color: black !important;
+  background-color: black !important;
+}
+
+::ng-deep .mat-radio-outer-circle{
+  color: black !important;
+  border: solid 1px gray !important;
+}

src/app/user/myProfil/popup-update-user/popup-update-user.component.ts

@@ -40,6 +40,7 @@ export class PopupUpdateUserComponent implements OnInit
             gender: user0.gender,
             interests: [],
             isActive: user0.isActive,
+            isAccepted: user0.isAccepted,
             createdAt: user0.createdAt,
             updatedAt: user0.updatedAt,
         };

src/app/user/navbar-user/navbar-user.component.scss

@@ -1,7 +1,7 @@
 .navbar {
   background-color: black;
-  height: 75px;
+  height: 50px;
-  font-size: x-large;
+  font-size: medium;
   color: white;
 }
 
@@ -17,9 +17,8 @@
 .navbar-brand {
   font-family: cursive;
   font-weight: bold;
-  //font-style: oblique 90deg;
+  font-size: x-large;
-  font-size: xxx-large;
+  margin-left: 15px;
-  margin-left: 30px;
   color: white;
 }
 
@@ -35,7 +34,7 @@
 
 // Bonton deconnexion
 .btnDeconnexion {
-  font-size: x-large;
+  font-size: medium;
   margin: 0px 10px 0px 10px
 }
 .btnDeconnexion:hover {
@@ -52,8 +51,8 @@ img {
   border: solid 2px white;
   border-radius: 50px;
   margin: 0px 10px 0px 15px;
-  width: 50px;
+  width: 40px;
-  height: 50px;
+  height: 40px;
 }
 img:hover {
   cursor: pointer;

src/app/user/search/video-cell/video-cell.component.ts

@@ -1,16 +1,13 @@
-import {
+import {Component, Input, OnInit } from '@angular/core';
-    Component,
-    Input,
-    OnInit,
-} from '@angular/core';
 import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
 import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
 import {Video} from "../../../utils/interfaces/video";
 import {ThemeService} from "../../../utils/services/theme/theme.service";
-import {WatchedVideo} from "../../../utils/interfaces/watchedVideo";
 import {MessageService} from "../../../utils/services/message/message.service";
 import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
 
+
+
 @Component({
     selector: 'app-video-cell',
     templateUrl: './video-cell.component.html',

src/app/utils/interfaces/user.ts

@@ -13,6 +13,7 @@ export interface User
     gender: string,
     interests: string[],
     isActive: boolean,
+    isAccepted: boolean,
     createdAt: Date,
     updatedAt: Date,
 }

src/app/utils/interfaces/video.ts

@@ -4,5 +4,6 @@ export interface Video
     url: string,
     title: string,
     description: string,
-    views: number
+    views: number,
+    watched: Date[]
 }

src/app/utils/interfaces/watchedVideo.ts

@@ -1,7 +0,0 @@
-export interface WatchedVideo
-{
-    _id: string,
-    url: string,
-    title: string,
-    date: Date
-}

src/app/utils/services/fictitiousDatas/fictitious-datas.service.ts

@@ -2,18 +2,18 @@ import { Injectable } from '@angular/core';
 import {Video} from "../../interfaces/video";
 import {Playlist} from "../../interfaces/playlist";
 import {Advert} from "../../interfaces/advert";
-import {WatchedVideo} from "../../interfaces/watchedVideo";
 import {User} from "../../interfaces/user";
 
 
 
-const TAB_VIDEO = [
+const TAB_VIDEO: Video[] = [
     {
         _id: "Mowgli",
         url: "https://www.youtube.com/watch?v=medPORJ8KO0",
         title: "PNL - Mowgli",
         description: "dans l'album Que la famille",
         views: 11,
+        watched: []
     },
     {
         _id: "Mexico",
@@ -21,6 +21,7 @@ const TAB_VIDEO = [
         title: "PNL - Mexico",
         description: "dans l'album Monde chico",
         views: 22,
+        watched: []
     },
     {
         _id: "Luz de luna",
@@ -28,6 +29,7 @@ const TAB_VIDEO = [
         title: "PNL - Luz de luna",
         description: "dans l'album Dans la legende",
         views: 33,
+        watched: []
     },
     {
         _id: "Blanka",
@@ -35,6 +37,7 @@ const TAB_VIDEO = [
         title: "PNL - Blanka",
         description: "dans l'album Deux frères",
         views: 44,
+        watched: []
     },
     {
         _id: "Mowgli 2",
@@ -42,6 +45,7 @@ const TAB_VIDEO = [
         title: "PNL - Mowgli",
         description: "exclu",
         views: 55,
+        watched: []
     },
     {
         _id: "Etre humain",
@@ -49,6 +53,7 @@ const TAB_VIDEO = [
         title: "Nekfeu - Etre humain",
         description: "dans l'album feu",
         views: 66,
+        watched: []
     },
     {
         _id: "Humanoide",
@@ -56,6 +61,7 @@ const TAB_VIDEO = [
         title: "Nekfeu - Humanoide",
         description: "dans l'album Cyborg",
         views: 77,
+        watched: []
     },
     {
         _id: "Dernier soupir",
@@ -63,6 +69,7 @@ const TAB_VIDEO = [
         title: "Nekfeu - Dernier soupir",
         description: "dans l'album Les etoiles vagabondes",
         views: 88,
+        watched: []
     },
     {
         _id: "Dernier soupir",
@@ -70,6 +77,7 @@ const TAB_VIDEO = [
         title: "Nekfeu - Dernier soupir",
         description: "dans l'album Les etoiles vagabondes",
         views: 99,
+        watched: []
     },
     {
         _id: "Les prélis",
@@ -77,6 +85,7 @@ const TAB_VIDEO = [
         title: "Columbine - Les prélis",
         description: "dans l'album Enfant terrible",
         views: 100,
+        watched: []
     },
     {
         _id: "Pierre feuille ciseau",
@@ -84,6 +93,7 @@ const TAB_VIDEO = [
         title: "Columbine - Pierre feuille ciseau",
         description: "exclu",
         views: 111,
+        watched: []
     },
 ]
 
@@ -136,20 +146,34 @@ export class FictitiousDatasService
     {
         let res = '';
         const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        for( let i = 0; i < length; i++ )
+        for( let i = 0; i < length; i++ ) {
-        {
             const k = Math.floor(Math.random() * characters.length);
             res += characters.charAt(k);
         }
         return res;
     }
 
+    private randomDate(start, end): Date
+    {
+        return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+    }
+
 
     getVideo(): Video
     {
-        const idx = Math.floor(Math.random() * TAB_VIDEO.length);
+        const index = Math.floor(Math.random() * TAB_VIDEO.length);
-        let video = Object.assign({}, TAB_VIDEO[idx]);
+        let video: Video = Object.assign({}, TAB_VIDEO[index]);
+
+        // id
         video._id = video._id + this.makeid(5);
+
+        // watched
+        const nbWatched = 1 + Math.floor(Math.random() * 2);
+        const start = new Date(2021, 0, 1);
+        const end = new Date();
+        video.watched = [];
+        for(let i=0 ; i<nbWatched ; i++) video.watched.push(this.randomDate(start, end));
+
         return video;
     }
 
@@ -198,27 +222,6 @@ export class FictitiousDatasService
     }
 
 
-    getWatchedVideo(): WatchedVideo
-    {
-        const idx = Math.floor(Math.random() * TAB_VIDEO.length);
-        const video: Video = TAB_VIDEO[idx];
-        const watchedVideo: WatchedVideo = {
-            _id: video._id,
-            url: video.url,
-            title: video.title,
-            date: new Date()
-        };
-        return watchedVideo ;
-    }
-
-    getTabWatchedVideo(n: number): WatchedVideo[]
-    {
-        let tabWatchedVideo = [];
-        for(let i=0 ; i<n ; i++) tabWatchedVideo.push(this.getWatchedVideo());
-        return tabWatchedVideo;
-    }
-
-
     getUser(): User
     {
         return {
@@ -235,6 +238,7 @@ export class FictitiousDatasService
             gender: "man",
             interests: ["foot", "jeux-vidéo"],
             isActive: true,
+            isAccepted: true,
             createdAt: new Date(),
             updatedAt: new Date(),
         }
@@ -256,6 +260,7 @@ export class FictitiousDatasService
             gender: "",
             interests: [],
             isActive: true,
+            isAccepted: true,
             createdAt: new Date(),
             updatedAt: new Date(),
         }
@@ -277,6 +282,7 @@ export class FictitiousDatasService
             gender: "",
             interests: [],
             isActive: true,
+            isAccepted: true,
             createdAt: new Date(),
             updatedAt: new Date(),
         }

src/app/utils/services/userHistory/userHistory.service.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import {Video} from "../../interfaces/video";
-import {WatchedVideo} from "../../interfaces/watchedVideo";
 import {MessageService} from "../message/message.service";
 
 @Injectable({
@@ -19,22 +18,8 @@ export class UserHistoryService
         if (!this.tabVideoUrlClicked.includes(video.url))
         {
             this.tabVideoUrlClicked.push(video.url);
+            video.watched.push(new Date());
 
-            const watchedVideo0: WatchedVideo = {
-                _id: video._id,
-                url: video.url,
-                title: video.title,
-                date: new Date()
-            };
-            console.log(watchedVideo0);
-
-            this.addWatchedVideoToHistorique(watchedVideo0);
-        }
-    }
-
-
-    public addWatchedVideoToHistorique(watchedVideo0: WatchedVideo): void
-    {
             // --- VRAI CODE ---
             /*
             this.messageService
@@ -42,6 +27,7 @@ export class UserHistoryService
                 .subscribe(retour => {});
             */
         }
+    }
 
 
     public clearTabVideoUrlClicked()