correction de CSS
This commit is contained in:
MiharyR
parent
ad08803578
commit
11472d0045
35 changed files with 296 additions and 164 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.navbar {
|
||||
background-color: black;
|
||||
height: 75px;
|
||||
font-size: x-large;
|
||||
height: 50px;
|
||||
font-size: medium;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -17,9 +17,8 @@
|
|||
.navbar-brand {
|
||||
font-family: cursive;
|
||||
font-weight: bold;
|
||||
//font-style: oblique 90deg;
|
||||
font-size: xxx-large;
|
||||
margin-left: 30px;
|
||||
font-size: x-large;
|
||||
margin-left: 15px;
|
||||
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;
|
||||
height: 50px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
img:hover {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<img src="/src/assets/uploadFile.png" width="50" height="50" style="margin-top: 5px">
|
||||
<div style="font-weight: bold">Images</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
.darkTheme td {
|
||||
background-color: #646464;
|
||||
color: white;
|
||||
td {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 25%;
|
||||
font-size: x-large;
|
||||
width: 30%;
|
||||
font-size: large;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ---
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.navbar {
|
||||
background-color: black;
|
||||
height: 75px;
|
||||
font-size: x-large;
|
||||
height: 50px;
|
||||
font-size: medium;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -17,9 +17,8 @@
|
|||
.navbar-brand {
|
||||
font-family: cursive;
|
||||
font-weight: bold;
|
||||
//font-style: oblique 90deg;
|
||||
font-size: xxx-large;
|
||||
margin-left: 30px;
|
||||
font-size: x-large;
|
||||
margin-left: 15px;
|
||||
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;
|
||||
height: 50px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
img:hover {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<img src="../../../../assets/logo.png" id="icon" alt="User Icon" style="margin-top: 20px"/>
|
||||
<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 -->
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ h2 {
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
min-height: 80%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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: xx-large;
|
||||
margin-left: 30px;
|
||||
font-size: x-large;
|
||||
margin-left: 15px;
|
||||
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;
|
||||
height: 50px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
img:hover {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ export class PageRegisterComponent
|
|||
gender: "man",
|
||||
interests: [],
|
||||
isActive: false,
|
||||
isAccepted: false,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<td mat-cell *matCellDef="let watchedVideo">
|
||||
<th mat-header-cell *matHeaderCellDef> Aperçu </th>
|
||||
<td mat-cell *matCellDef="let video">
|
||||
<iframe appIframeTracker
|
||||
[src]=videoUrlService.safeUrl(watchedVideo.url)
|
||||
(iframeClick)="onIframeClick(watchedVideo)"
|
||||
[src]=videoUrlService.safeUrl(video.url)
|
||||
(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">
|
||||
{{watchedVideo.title}}
|
||||
</td>
|
||||
<td mat-cell *matCellDef="let video"> {{video.title}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
|
||||
<td mat-cell *matCellDef="let watchedVideo">
|
||||
{{ watchedVideo.date | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
<th mat-header-cell *matHeaderCellDef> Date </th>
|
||||
<td mat-cell *matCellDef="let video">
|
||||
<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">
|
||||
{{getSourceByUrl(watchedVideo.url)}}
|
||||
</td>
|
||||
<td mat-cell *matCellDef="let video"> {{video.source}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
|
||||
<td mat-cell *matCellDef="let watchedVideo">
|
||||
<button mat-icon-button (click)="onDelete(watchedVideo)">
|
||||
<mat-icon >delete</mat-icon>
|
||||
<th mat-header-cell *matHeaderCellDef> Action </th>
|
||||
<td mat-cell *matCellDef="let video">
|
||||
<button mat-icon-button (click)="onDelete(video)">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
this.dataSource = new MatTableDataSource(tabWatchedVideo);
|
||||
const tabVideo: Video[] = this.fictitiousDatasService.getTabVideo(8);
|
||||
|
||||
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);
|
||||
this.userHistoryService.addWatchedVideoToHistorique(watchedVideo);
|
||||
console.log("onIframeClick: " + video.title);
|
||||
this.userHistoryService.addVideoToHistoque(video);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export class PageProfilUserComponent implements OnInit
|
|||
onModifier()
|
||||
{
|
||||
const config = {
|
||||
width: '25%',
|
||||
width: '35%',
|
||||
data: { user: this.user }
|
||||
};
|
||||
this.dialog
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.navbar {
|
||||
background-color: black;
|
||||
height: 75px;
|
||||
font-size: x-large;
|
||||
height: 50px;
|
||||
font-size: medium;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -17,9 +17,8 @@
|
|||
.navbar-brand {
|
||||
font-family: cursive;
|
||||
font-weight: bold;
|
||||
//font-style: oblique 90deg;
|
||||
font-size: xxx-large;
|
||||
margin-left: 30px;
|
||||
font-size: x-large;
|
||||
margin-left: 15px;
|
||||
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;
|
||||
height: 50px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
img:hover {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,13 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import {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',
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export interface User
|
|||
gender: string,
|
||||
interests: string[],
|
||||
isActive: boolean,
|
||||
isAccepted: boolean,
|
||||
createdAt: Date,
|
||||
updatedAt: Date,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,6 @@ export interface Video
|
|||
url: string,
|
||||
title: string,
|
||||
description: string,
|
||||
views: number
|
||||
views: number,
|
||||
watched: Date[]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
export interface WatchedVideo
|
||||
{
|
||||
_id: string,
|
||||
url: string,
|
||||
title: string,
|
||||
date: Date
|
||||
}
|
||||
|
|
@ -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);
|
||||
let video = Object.assign({}, TAB_VIDEO[idx]);
|
||||
const index = Math.floor(Math.random() * TAB_VIDEO.length);
|
||||
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(),
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,31 +18,18 @@ 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);
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage("user/add/watchedVideo", {watchedVideo: watchedVideo0})
|
||||
.subscribe(retour => {});
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public addWatchedVideoToHistorique(watchedVideo0: WatchedVideo): void
|
||||
{
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage("user/add/watchedVideo", {watchedVideo: watchedVideo0})
|
||||
.subscribe(retour => {});
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
public clearTabVideoUrlClicked()
|
||||
{
|
||||
this.tabVideoUrlClicked = [];
|
||||
|
|
|
|||
Reference in a new issue