amélioration du style
This commit is contained in:
MiharyR
parent
7ebacdc287
commit
4336169d2e
72 changed files with 2172 additions and 529 deletions
|
|
@ -8,7 +8,7 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w
|
|||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
Run `ng generate component component-title` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
|
|
|
|||
141
package-lock.json
generated
141
package-lock.json
generated
|
|
@ -19,6 +19,7 @@
|
|||
"@angular/platform-browser-dynamic": "^12.2.11",
|
||||
"@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",
|
||||
|
|
@ -30,6 +31,7 @@
|
|||
"@angular-devkit/build-angular": "~12.2.11",
|
||||
"@angular/cli": "~12.2.11",
|
||||
"@angular/compiler-cli": "~12.2.11",
|
||||
"@angular/localize": "^12.2.11",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
|
|
@ -521,6 +523,77 @@
|
|||
"rxjs": "^6.5.3 || ^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/localize": {
|
||||
"version": "12.2.11",
|
||||
"resolved": "https://registry.npmjs.org/@angular/localize/-/localize-12.2.11.tgz",
|
||||
"integrity": "sha512-ZT4Jt80vTCPHhR4a9DP5+/CA1QYerMRwoIcWQUzTDS/PP3fL3pDIVBUNNqefANplAL39y52HYc8qnpEa8mbd8A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/core": "7.8.3",
|
||||
"glob": "7.1.7",
|
||||
"yargs": "^17.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"localize-extract": "src/tools/src/extract/main.js",
|
||||
"localize-migrate": "src/tools/src/migrate/main.js",
|
||||
"localize-translate": "src/tools/src/translate/main.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^12.14.1 || >=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/compiler": "12.2.11",
|
||||
"@angular/compiler-cli": "12.2.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/localize/node_modules/@babel/core": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.3.tgz",
|
||||
"integrity": "sha512-4XFkf8AwyrEG7Ziu3L2L0Cv+WyY47Tcsp70JFmpftbAA1K7YL/sgE9jh9HyNj08Y/U50ItUchpN0w6HxAoX1rA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.8.3",
|
||||
"@babel/generator": "^7.8.3",
|
||||
"@babel/helpers": "^7.8.3",
|
||||
"@babel/parser": "^7.8.3",
|
||||
"@babel/template": "^7.8.3",
|
||||
"@babel/traverse": "^7.8.3",
|
||||
"@babel/types": "^7.8.3",
|
||||
"convert-source-map": "^1.7.0",
|
||||
"debug": "^4.1.0",
|
||||
"gensync": "^1.0.0-beta.1",
|
||||
"json5": "^2.1.0",
|
||||
"lodash": "^4.17.13",
|
||||
"resolve": "^1.3.2",
|
||||
"semver": "^5.4.1",
|
||||
"source-map": "^0.5.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/babel"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/localize/node_modules/semver": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/localize/node_modules/source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/material": {
|
||||
"version": "12.2.11",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.11.tgz",
|
||||
|
|
@ -3226,6 +3299,18 @@
|
|||
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/angular-responsive-carousel": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/angular-responsive-carousel/-/angular-responsive-carousel-2.1.2.tgz",
|
||||
"integrity": "sha512-nOCEyL9R80kW876GY8KvXoPu9fHu3nEnA2RVoFZ3hnBLx/OIdebeKFTxfogWLgbI4S1xn+vOecY/a+GnAQNc8w==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^11.2.14",
|
||||
"@angular/core": "^11.2.14"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-colors": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
|
||||
|
|
@ -21064,6 +21149,54 @@
|
|||
"tslib": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@angular/localize": {
|
||||
"version": "12.2.11",
|
||||
"resolved": "https://registry.npmjs.org/@angular/localize/-/localize-12.2.11.tgz",
|
||||
"integrity": "sha512-ZT4Jt80vTCPHhR4a9DP5+/CA1QYerMRwoIcWQUzTDS/PP3fL3pDIVBUNNqefANplAL39y52HYc8qnpEa8mbd8A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/core": "7.8.3",
|
||||
"glob": "7.1.7",
|
||||
"yargs": "^17.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.3.tgz",
|
||||
"integrity": "sha512-4XFkf8AwyrEG7Ziu3L2L0Cv+WyY47Tcsp70JFmpftbAA1K7YL/sgE9jh9HyNj08Y/U50ItUchpN0w6HxAoX1rA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.8.3",
|
||||
"@babel/generator": "^7.8.3",
|
||||
"@babel/helpers": "^7.8.3",
|
||||
"@babel/parser": "^7.8.3",
|
||||
"@babel/template": "^7.8.3",
|
||||
"@babel/traverse": "^7.8.3",
|
||||
"@babel/types": "^7.8.3",
|
||||
"convert-source-map": "^1.7.0",
|
||||
"debug": "^4.1.0",
|
||||
"gensync": "^1.0.0-beta.1",
|
||||
"json5": "^2.1.0",
|
||||
"lodash": "^4.17.13",
|
||||
"resolve": "^1.3.2",
|
||||
"semver": "^5.4.1",
|
||||
"source-map": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@angular/material": {
|
||||
"version": "12.2.11",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.11.tgz",
|
||||
|
|
@ -23092,6 +23225,14 @@
|
|||
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
|
||||
"dev": true
|
||||
},
|
||||
"angular-responsive-carousel": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/angular-responsive-carousel/-/angular-responsive-carousel-2.1.2.tgz",
|
||||
"integrity": "sha512-nOCEyL9R80kW876GY8KvXoPu9fHu3nEnA2RVoFZ3hnBLx/OIdebeKFTxfogWLgbI4S1xn+vOecY/a+GnAQNc8w==",
|
||||
"requires": {
|
||||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"ansi-colors": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
"@angular/platform-browser-dynamic": "^12.2.11",
|
||||
"@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",
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
"@angular-devkit/build-angular": "~12.2.11",
|
||||
"@angular/cli": "~12.2.11",
|
||||
"@angular/compiler-cli": "~12.2.11",
|
||||
"@angular/localize": "^12.2.11",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
|
|
|
|||
43
src/app/advertiser/bar-tags/bar-tags.component.html
Normal file
43
src/app/advertiser/bar-tags/bar-tags.component.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<mat-form-field class="example-chip-list" appearance="fill">
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
<mat-label>Tags</mat-label>
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
<mat-chip-list #chipList aria-label="Fruit selection">
|
||||
|
||||
<mat-chip
|
||||
*ngFor="let tag of myTags"
|
||||
[selectable]="selectable"
|
||||
[removable]="removable"
|
||||
(removed)="remove(tag)">
|
||||
{{tag}}
|
||||
<button matChipRemove *ngIf="removable">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip>
|
||||
|
||||
<input
|
||||
placeholder="Tapez un tag et pressez 'Entré' pour l'inserer"
|
||||
#tagInput
|
||||
[formControl]="formControl"
|
||||
[matAutocomplete]="auto"
|
||||
[matChipInputFor]="chipList"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="add($event)">
|
||||
|
||||
</mat-chip-list>
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
|
||||
<mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
|
||||
{{tag}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
</mat-form-field>
|
||||
3
src/app/advertiser/bar-tags/bar-tags.component.scss
Normal file
3
src/app/advertiser/bar-tags/bar-tags.component.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
25
src/app/advertiser/bar-tags/bar-tags.component.spec.ts
Normal file
25
src/app/advertiser/bar-tags/bar-tags.component.spec.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BarTagsComponent } from './bar-tags.component';
|
||||
|
||||
describe('BarTagsComponent', () => {
|
||||
let component: BarTagsComponent;
|
||||
let fixture: ComponentFixture<BarTagsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ BarTagsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BarTagsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
94
src/app/advertiser/bar-tags/bar-tags.component.ts
Normal file
94
src/app/advertiser/bar-tags/bar-tags.component.ts
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
|
||||
import {COMMA, ENTER} from "@angular/cdk/keycodes";
|
||||
import {FormControl} from "@angular/forms";
|
||||
import {Observable} from "rxjs";
|
||||
import {map, startWith} from "rxjs/operators";
|
||||
import {MatChipInputEvent} from "@angular/material/chips";
|
||||
import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
|
||||
import {FictitiousDatasService} from "../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MessageService} from "../../utils/services/message/message.service";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-bar-tags',
|
||||
templateUrl: './bar-tags.component.html',
|
||||
styleUrls: ['./bar-tags.component.scss']
|
||||
})
|
||||
export class BarTagsComponent implements OnInit
|
||||
{
|
||||
selectable = true;
|
||||
removable = true;
|
||||
separatorKeysCodes: number[] = [ENTER, COMMA];
|
||||
formControl = new FormControl();
|
||||
filteredTags: Observable<string[]>;
|
||||
@Input() myTags: string[] = [];
|
||||
allTags: string[] = [];
|
||||
@Output() eventEmitter = new EventEmitter<string[]>();
|
||||
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
||||
|
||||
|
||||
constructor( private fictitiousDatasService: FictitiousDatasService,
|
||||
private messageService: MessageService ) {}
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.filteredTags = this.formControl.valueChanges.pipe(
|
||||
startWith(null),
|
||||
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allTags.slice()));
|
||||
|
||||
// --- FAUX CODE ---
|
||||
this.allTags = this.fictitiousDatasService.getTags();
|
||||
this.allTags.sort();
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage("advertiser/get/tags", null)
|
||||
.subscribe( retour => {
|
||||
|
||||
if(retour.status === "error") console.log(retour);
|
||||
else {
|
||||
this.allTags = retour.data.tags;
|
||||
this.allTags.sort();
|
||||
}
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
add(event: MatChipInputEvent): void
|
||||
{
|
||||
const value = (event.value || '').trim();
|
||||
if (value) this.myTags.push(value); // Add our fruit
|
||||
event.chipInput!.clear(); // Clear the input value
|
||||
this.formControl.setValue(null);
|
||||
this.eventEmitter.emit(this.myTags);
|
||||
}
|
||||
|
||||
|
||||
remove(tag: string): void
|
||||
{
|
||||
const index = this.myTags.indexOf(tag);
|
||||
if (index >= 0) this.myTags.splice(index, 1);
|
||||
this.eventEmitter.emit(this.myTags);
|
||||
}
|
||||
|
||||
|
||||
selected(event: MatAutocompleteSelectedEvent): void
|
||||
{
|
||||
this.myTags.push(event.option.viewValue);
|
||||
this.tagInput.nativeElement.value = '';
|
||||
this.formControl.setValue(null);
|
||||
this.eventEmitter.emit(this.myTags);
|
||||
}
|
||||
|
||||
|
||||
private _filter(value: string): string[]
|
||||
{
|
||||
const filterValue = value.toLowerCase();
|
||||
return this.allTags.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
|
||||
<app-nav-bar pour="advertiser"></app-nav-bar><br><br>
|
||||
|
||||
<!-- ---------------------------------------------------------------------------------- -->
|
||||
|
||||
<div style="text-align: center">
|
||||
<input (keyup)="applyFilter($event)" placeholder="Filtre...">
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- ---------------------------------------------------------------------------------- -->
|
||||
|
||||
<button mat-button class="btnAjouter" (click)="onAdd()">
|
||||
<mat-icon>add_circle</mat-icon> Ajouter une annonce
|
||||
</button>
|
||||
<br>
|
||||
|
||||
<!-- ---------------------------------------------------------------------------------- -->
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="title">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
{{advert.title}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Tags Column -->
|
||||
<ng-container matColumnDef="tags">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Tags </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>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Comment Column -->
|
||||
<ng-container matColumnDef="comment">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Commentaire </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
{{advert.comment}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- CreatedAt Column -->
|
||||
<ng-container matColumnDef="createdAt">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date de création </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
{{ advert.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- LastUpdate Column -->
|
||||
<ng-container matColumnDef="lastUpdate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Dernière modification </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
{{ advert.lastUpdate | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Views Column -->
|
||||
<ng-container matColumnDef="views">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Vues </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
{{advert.views}}
|
||||
</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>
|
||||
|
||||
<!-- Update Column -->
|
||||
<ng-container matColumnDef="update">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Modifier </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<button mat-icon-button (click)="onUpdate(advert)">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Delete Column -->
|
||||
<ng-container matColumnDef="delete">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Supprimer </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<button mat-icon-button (click)="onDelete(advert)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Visualisation Column -->
|
||||
<ng-container matColumnDef="visualisation">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Visualisation </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<button mat-icon-button (click)="onVisualize(advert)">
|
||||
<mat-icon>aspect_ratio</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Directives -->
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr class="mat-row" *matNoDataRow>
|
||||
<td class="mat-cell" colspan="4"> Aucune vidéo ne correspond au filtre: "{{input.value}}" </td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<br><br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
||||
|
||||
.btnAjouter {
|
||||
margin-left: 3%;
|
||||
font-size: larger;
|
||||
padding: 5px 20px 5px 20px;
|
||||
}
|
||||
|
||||
.lightTheme .btnAjouter {
|
||||
border-top: solid 1px #dcdcdc;
|
||||
border-right: solid 1px #dcdcdc;
|
||||
border-left: solid 1px #dcdcdc;
|
||||
color: black;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.darkTheme .btnAjouter {
|
||||
border-top: solid 1px white;
|
||||
border-right: solid 1px white;
|
||||
border-left: solid 1px white;
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
.darkTheme .btnAjouter:hover {
|
||||
background-color: #646464;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
||||
|
||||
table {
|
||||
margin: 0 auto;
|
||||
width: 94%;
|
||||
}
|
||||
.darkTheme table { border: solid 2px white; }
|
||||
|
||||
th.mat-sort-header-sorted {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.lightTheme td {
|
||||
|
||||
}
|
||||
.darkTheme td {
|
||||
background-color: #646464;
|
||||
color: white;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 25%;
|
||||
font-size: x-large;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PageAdvertiserComponent } from './page-advertiser.component';
|
||||
|
||||
describe('PageAdvertiserComponent', () => {
|
||||
let component: PageAdvertiserComponent;
|
||||
let fixture: ComponentFixture<PageAdvertiserComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PageAdvertiserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PageAdvertiserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
143
src/app/advertiser/page-advertiser/page-advertiser.component.ts
Normal file
143
src/app/advertiser/page-advertiser/page-advertiser.component.ts
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
import {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";
|
||||
import {MatTableDataSource} from "@angular/material/table";
|
||||
import {Advert} 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 {PopupDeleteAdComponent} from "../popup-delete-ad/popup-delete-ad.component";
|
||||
import {PopupVisualizeAdComponent} from "../popup-visualize-ad/popup-visualize-ad.component";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-advertiser',
|
||||
templateUrl: './page-advertiser.component.html',
|
||||
styleUrls: ['./page-advertiser.component.scss']
|
||||
})
|
||||
export class PageAdvertiserComponent implements OnInit
|
||||
{
|
||||
displayedColumns: string[] = [ 'title', 'tags', 'createdAt', 'lastUpdate', 'views', 'isVisible', 'update', 'delete', 'visualisation' ];
|
||||
dataSource ;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
public dialog: MatDialog,
|
||||
private snackBar: MatSnackBar ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
const tabAdvert = this.fictitiousDatasService.getTabAdvert(8);
|
||||
this.dataSource = new MatTableDataSource<Advert>(tabAdvert);
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
|
||||
|
||||
applyFilter(event: Event): void
|
||||
{
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
|
||||
onVisualize(advert: Advert): void
|
||||
{
|
||||
const config = {
|
||||
width: '50%',
|
||||
data: { advert: advert }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupVisualizeAdComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe(retour => {});
|
||||
}
|
||||
|
||||
|
||||
onAdd(): void
|
||||
{
|
||||
const config = {
|
||||
width: '50%',
|
||||
data: { action: "add", advert: null }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupAddOrUpdateAdComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe( advertAdded => {
|
||||
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
let message = "" ;
|
||||
if((advertAdded === undefined) || (advertAdded === null)) {
|
||||
message = "Opération annulée" ;
|
||||
}
|
||||
else {
|
||||
this.dataSource.data.push(advertAdded);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
message = "L'annoonce a bien été ajoutée ✔"
|
||||
}
|
||||
this.snackBar.open( message, "", config);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onUpdate(advertToUpdate: Advert): void
|
||||
{
|
||||
const config = {
|
||||
width: '50%',
|
||||
data: { action: "update", advert: advertToUpdate }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupAddOrUpdateAdComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe( advertUpdated => {
|
||||
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
let message = "" ;
|
||||
if((advertUpdated === undefined) || (advertUpdated === null)) {
|
||||
message = "Opération annulée" ;
|
||||
}
|
||||
else {
|
||||
const index = this.dataSource.data.findIndex( elt => (elt._id === advertToUpdate._id));
|
||||
this.dataSource.data.splice(index, 1, advertUpdated);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
message = "L'annonce a bien été modifiée ✔"
|
||||
}
|
||||
this.snackBar.open( message, "", config);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onDelete(advert: Advert): void
|
||||
{
|
||||
const config = {
|
||||
data: { advert: advert }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupDeleteAdComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe( retour => {
|
||||
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
let message = "" ;
|
||||
if((retour === undefined) || (retour === null)) {
|
||||
message = "Opération annulée" ;
|
||||
}
|
||||
else {
|
||||
const index = this.dataSource.data.findIndex( elt => (elt._id === advert._id));
|
||||
this.dataSource.data.splice(index, 1);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
message = "L'annonce a bien été supprimée ✔" ;
|
||||
}
|
||||
this.snackBar.open( message, "", config);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
|
||||
<!-- Navbar -->
|
||||
<h1 mat-dialog-title>{{title}}</h1>
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-dialog-content>
|
||||
|
||||
<!-- Title -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label> Titre annonce </mat-label>
|
||||
<input matInput type="text" [(ngModel)]="advert.title">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Images -->
|
||||
<br>
|
||||
<mat-form-field appearance="fill">
|
||||
<input matInput type="file" disabled>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Tags -->
|
||||
<app-bar-tags [myTags]="advert.tags" (eventEmitter)="onEventBarTags($event)"></app-bar-tags>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
</mat-dialog-content>
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<!-- Actions -->
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button (click)="dialogRef.close()">Annuler</button>
|
||||
<button mat-button (click)="onValidate()" cdkFocusInitial>Valider</button>
|
||||
</mat-dialog-actions>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
.lightTheme, .darkTheme {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: xx-large;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
|
||||
mat-dialog-content {
|
||||
overflow-y: hidden;
|
||||
//padding: 20px 20px 20px 20px;
|
||||
}
|
||||
|
||||
.commentContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// --- LightTheme ---
|
||||
|
||||
// aura
|
||||
.lightTheme ::ng-deep .mat-checkbox-ripple .mat-ripple-element {
|
||||
background-color: grey !important;
|
||||
}
|
||||
|
||||
// contenu coche
|
||||
.lightTheme ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
// indeterminate
|
||||
.lightTheme ::ng-deep .mat-checkbox .mat-checkbox-frame {
|
||||
border-color: black !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
// --- DarkTheme ---
|
||||
|
||||
// aura
|
||||
.darTheme ::ng-deep .mat-checkbox-ripple .mat-ripple-element {
|
||||
background-color: grey !important;
|
||||
}
|
||||
|
||||
// contenu coche
|
||||
.darkTheme ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
// indeterminate
|
||||
.darkTheme ::ng-deep .mat-checkbox .mat-checkbox-frame {
|
||||
border-color: white !important;
|
||||
//background-color: white !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupAddOrUpdateAdComponent } from './popup-add-or-update-ad.component';
|
||||
|
||||
describe('PopupAddOrUpdateAdComponent', () => {
|
||||
let component: PopupAddOrUpdateAdComponent;
|
||||
let fixture: ComponentFixture<PopupAddOrUpdateAdComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupAddOrUpdateAdComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupAddOrUpdateAdComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {Advert} from "../../utils/interfaces/advert";
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
import {MessageService} from "../../utils/services/message/message.service";
|
||||
import {ThemeService} from "../../utils/services/theme/theme.service";
|
||||
|
||||
|
||||
const ADVERT_VIDE = {
|
||||
_id: "",
|
||||
title: "",
|
||||
advertiser: "",
|
||||
images: [],
|
||||
tags: [],
|
||||
comment: "",
|
||||
views: 0,
|
||||
createdAt: new Date(),
|
||||
lastUpdate: new Date(),
|
||||
isVisible: true,
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-add-or-update-ad',
|
||||
templateUrl: './popup-add-or-update-ad.component.html',
|
||||
styleUrls: ['./popup-add-or-update-ad.component.scss']
|
||||
})
|
||||
export class PopupAddOrUpdateAdComponent implements OnInit
|
||||
{
|
||||
advert: Advert;
|
||||
urlBackend: string = "" ;
|
||||
title: string = "" ;
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupAddOrUpdateAdComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data,
|
||||
private messageService: MessageService,
|
||||
public themeService: ThemeService ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
if(this.data.action === "add")
|
||||
{
|
||||
this.advert = Object.assign({}, ADVERT_VIDE);
|
||||
this.advert.tags = [];
|
||||
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.urlBackend = "advertiser/update/ad" ;
|
||||
this.title = "Modifier annonce" ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onValidate(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
this.dialogRef.close(this.advert);
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage(this.urlBackend, this.advert)
|
||||
.subscribe( retour => {
|
||||
|
||||
if(retour.status === "error") {
|
||||
console.log(retour);
|
||||
this.dialogRef.close(this.advert);
|
||||
}
|
||||
else {
|
||||
this.dialogRef.close(retour.data.advert);
|
||||
}
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
onEventBarTags(myTags: string[])
|
||||
{
|
||||
this.advert.tags = myTags;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<mat-dialog-content class="mat-typography">
|
||||
Êtes-vous sûr de vouloir supprimer l'annonce <i>{{advert.title}}</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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupDeleteAdComponent } from './popup-delete-ad.component';
|
||||
|
||||
describe('PopupDeleteAdComponent', () => {
|
||||
let component: PopupDeleteAdComponent;
|
||||
let fixture: ComponentFixture<PopupDeleteAdComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupDeleteAdComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupDeleteAdComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
import {MessageService} from "../../utils/services/message/message.service";
|
||||
import {Advert} from "../../utils/interfaces/advert";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-delete-ad',
|
||||
templateUrl: './popup-delete-ad.component.html',
|
||||
styleUrls: ['./popup-delete-ad.component.scss']
|
||||
})
|
||||
export class PopupDeleteAdComponent implements OnInit
|
||||
{
|
||||
advert: Advert;
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupDeleteAdComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data,
|
||||
private messageService: MessageService) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.advert = this.data.advert;
|
||||
}
|
||||
|
||||
|
||||
onValidate(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
this.dialogRef.close(true);
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage("advertiser/delete/ad", {"advert": this.advert})
|
||||
.subscribe( retour => {
|
||||
|
||||
if(retour.status === "error") {
|
||||
console.log(retour);
|
||||
this.dialogRef.close();
|
||||
}
|
||||
else {
|
||||
this.dialogRef.close(true);
|
||||
}
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
|
||||
<h1 mat-dialog-title>{{advert.title}}</h1>
|
||||
|
||||
<!-- ----------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
<mat-dialog-content>
|
||||
|
||||
<!-- Images -->
|
||||
<div class="row myRow">
|
||||
<div class="col-6 myLabel" style="padding-top: 10px"> Images: </div>
|
||||
<div class="col-6">
|
||||
<button mat-icon-button (click)="onVisualizeImages(advert.images)">
|
||||
<mat-icon>aspect_ratio</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Comment -->
|
||||
<div class="row myRow">
|
||||
<div class="col-6 myLabel"> Commentaire: </div>
|
||||
<div class="col-6 myValue"> {{advert.comment}} </div>
|
||||
</div>
|
||||
|
||||
<!-- Views -->
|
||||
<div class="row myRow">
|
||||
<label class="col-6 myLabel"> Vues: </label>
|
||||
<div class="col-6 myValue"> {{advert.views}} </div>
|
||||
</div>
|
||||
|
||||
<!-- Created at -->
|
||||
<div class="row myRow">
|
||||
<label class="col-6 myLabel"> Date de création: </label>
|
||||
<div class="col-6 myValue">
|
||||
{{ advert.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Last updtade -->
|
||||
<div class="row myRow">
|
||||
<label class="col-6 myLabel"> Date de dernière modification: </label>
|
||||
<div class="col-6 myValue">
|
||||
{{ advert.lastUpdate | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IsVisible -->
|
||||
<div class="row myRow">
|
||||
<label class="col-6 myLabel"> Visibilité: </label>
|
||||
<div class="col-6 myValue">
|
||||
<mat-icon *ngIf="advert.isVisible">checked</mat-icon>
|
||||
<mat-icon *ngIf="!advert.isVisible">close</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-dialog-content>
|
||||
|
||||
<!-- ----------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button (click)="dialogRef.close()">Fermer</button>
|
||||
</mat-dialog-actions>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
.lightTheme, .darkTheme {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
|
||||
.myRow {
|
||||
margin: 15px 0px 15px 0px;
|
||||
}
|
||||
|
||||
|
||||
.myLabel {
|
||||
text-align: right;
|
||||
padding: 0px 5px 0px 0px;
|
||||
margin: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.myValue {
|
||||
text-align: left;
|
||||
padding: 0px 0px 0px 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupVisualizeAdComponent } from './popup-visualize-ad.component';
|
||||
|
||||
describe('PopupVisualizeAdComponent', () => {
|
||||
let component: PopupVisualizeAdComponent;
|
||||
let fixture: ComponentFixture<PopupVisualizeAdComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupVisualizeAdComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupVisualizeAdComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {ThemeService} from "../../utils/services/theme/theme.service";
|
||||
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
|
||||
import {Advert} from "../../utils/interfaces/advert";
|
||||
import {PopupVisualizeImagesComponent} from "../popup-visualize-images/popup-visualize-images.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-visualize-ad',
|
||||
templateUrl: './popup-visualize-ad.component.html',
|
||||
styleUrls: ['./popup-visualize-ad.component.scss']
|
||||
})
|
||||
export class PopupVisualizeAdComponent implements OnInit
|
||||
{
|
||||
advert: Advert;
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupVisualizeAdComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data,
|
||||
public themeService: ThemeService,
|
||||
public dialog: MatDialog ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.advert = this.data.advert;
|
||||
}
|
||||
|
||||
|
||||
onVisualizeImages(images: any[])
|
||||
{
|
||||
const config = {
|
||||
width: '400px',
|
||||
height: '950px',
|
||||
data: {
|
||||
images: images,
|
||||
width: 300,
|
||||
height: 800,
|
||||
}
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupVisualizeImagesComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe(retour => {});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<div mat-dialog-title class="dialog-title">
|
||||
<h2></h2>
|
||||
<button mat-icon-button aria-label="close dialog" mat-dialog-close>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; justify-content: center">
|
||||
<carousel [images]="tabImages"
|
||||
cellsToShow="1"
|
||||
[height]="height"
|
||||
[width]="width"></carousel>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
carousel {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dialog-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupVisualizeImagesComponent } from './popup-visualize-images.component';
|
||||
|
||||
describe('PopupVisualizeImagesComponent', () => {
|
||||
let component: PopupVisualizeImagesComponent;
|
||||
let fixture: ComponentFixture<PopupVisualizeImagesComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupVisualizeImagesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupVisualizeImagesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
|
||||
import {ThemeService} from "../../utils/services/theme/theme.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-visualize-images',
|
||||
templateUrl: './popup-visualize-images.component.html',
|
||||
styleUrls: ['./popup-visualize-images.component.scss']
|
||||
})
|
||||
export class PopupVisualizeImagesComponent implements OnInit
|
||||
{
|
||||
tabImages = [];
|
||||
width: number = 0;
|
||||
height: number = 0;
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupVisualizeImagesComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.width = this.data.width;
|
||||
this.height = this.data.height;
|
||||
|
||||
for(let couple of this.data.images)
|
||||
{
|
||||
const elt = { path: "assets/pub/"+couple.url };
|
||||
this.tabImages.push(elt);
|
||||
}
|
||||
console.log(this.tabImages);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -4,29 +4,31 @@ import {PageConnexionComponent} from './pourLes3Roles/page-connexion/page-connex
|
|||
import {PageRegisterComponent} from './pourLes3Roles/register/page-register/page-register.component';
|
||||
import {PageSearchComponent} from "./user/search/page-search/page-search.component";
|
||||
import {PageMyPlaylistsComponent} from "./user/myPlaylists/page-my-playlists/page-my-playlists.component";
|
||||
import {PageHistoriqueComponent} from "./user/historique/page-historique/page-historique.component";
|
||||
import {PageMyProfilComponent} from "./user/myProfil/page-my-profil/page-my-profil.component";
|
||||
import {PageHistoryUserComponent} from "./user/history/page-history-user/page-history-user.component";
|
||||
import {PageMyProfilComponent} from "./utils/components/myProfil/page-my-profil/page-my-profil.component";
|
||||
import {PageAdvertiserComponent} from "./advertiser/page-advertiser/page-advertiser.component";
|
||||
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: PageConnexionComponent },
|
||||
{ path: 'connexion', component: PageConnexionComponent },
|
||||
{ path: 'login', component: PageConnexionComponent },
|
||||
{ path: 'register', component: PageRegisterComponent },
|
||||
|
||||
{ path: 'user', component: PageSearchComponent },
|
||||
{ path: 'user/search', component: PageSearchComponent },
|
||||
{ path: 'user/myPlaylists', component: PageMyPlaylistsComponent },
|
||||
{ path: 'user/history', component: PageHistoriqueComponent },
|
||||
{ path: 'user/history', component: PageHistoryUserComponent },
|
||||
{ path: 'user/myProfil', component: PageMyProfilComponent },
|
||||
|
||||
{ path: 'advertiser/addAd', component: PageConnexionComponent },
|
||||
{ path: 'advertiser/adList', component: PageConnexionComponent },
|
||||
{ path: 'advertiser/history', component: PageConnexionComponent },
|
||||
{ path: 'advertiser/myProfil', component: PageConnexionComponent },
|
||||
{ path: 'advertiser', component: PageAdvertiserComponent },
|
||||
{ path: 'advertiser/myProfil', component: PageMyProfilComponent },
|
||||
|
||||
/*
|
||||
{ path: 'admin/userList', component: PageConnexionComponent },
|
||||
{ path: 'admin/addUser', component: PageConnexionComponent },
|
||||
{ path: 'admin/adList', component: PageConnexionComponent },
|
||||
{ path: 'admin/myProfil', component: PageConnexionComponent }
|
||||
{ path: 'admin/myProfil', component: PageMyProfilComponent }
|
||||
*/
|
||||
];
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { PageRegisterComponent } from './pourLes3Roles/register/page-register/pa
|
|||
import { NavBarComponent } from './utils/components/nav-bar/nav-bar.component';
|
||||
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
||||
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
|
||||
import { PageSearchComponent } from './user/search/page-search/page-search.component';
|
||||
import {HttpClientModule} from "@angular/common/http";
|
||||
import { PopupConfirmationComponent } from './pourLes3Roles/register/popup-confirmation/popup-confirmation.component';
|
||||
|
|
@ -30,11 +30,22 @@ import { PageMyPlaylistsComponent } from './user/myPlaylists/page-my-playlists/p
|
|||
import { PlaylistListComponent } from './user/myPlaylists/playlist-list/playlist-list.component';
|
||||
import {VideoListComponent} from "./user/myPlaylists/video-list/video-list.component";
|
||||
import { PopupCreatePlaylistComponent } from './utils/components/popup-create-playlist/popup-create-playlist.component';
|
||||
import { PageHistoriqueComponent } from './user/historique/page-historique/page-historique.component';
|
||||
import { PageHistoryUserComponent } from './user/history/page-history-user/page-history-user.component';
|
||||
import {MatTableModule} from '@angular/material/table';
|
||||
import { PageMyProfilComponent } from './user/myProfil/page-my-profil/page-my-profil.component';
|
||||
import { PopupPictureProfilUrlComponent } from './user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component';
|
||||
import { PageMyProfilComponent } from './utils/components/myProfil/page-my-profil/page-my-profil.component';
|
||||
import { PopupPictureProfilUrlComponent } from './utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import {MatSortModule} from "@angular/material/sort";
|
||||
import { PageAdvertiserComponent } from './advertiser/page-advertiser/page-advertiser.component';
|
||||
import { PopupDeleteAdComponent } from './advertiser/popup-delete-ad/popup-delete-ad.component';
|
||||
import { PopupAddOrUpdateAdComponent } from './advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component';
|
||||
import { PopupVisualizeAdComponent } from './advertiser/popup-visualize-ad/popup-visualize-ad.component';
|
||||
import { BarTagsComponent } from './advertiser/bar-tags/bar-tags.component';
|
||||
import {MatChipsModule} from "@angular/material/chips";
|
||||
import {MatAutocompleteModule} from "@angular/material/autocomplete";
|
||||
import {MatSelectModule} from "@angular/material/select";
|
||||
import { PopupVisualizeImagesComponent } from './advertiser/popup-visualize-images/popup-visualize-images.component';
|
||||
import {IvyCarouselModule} from "angular-responsive-carousel";
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -55,9 +66,15 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
|||
PlaylistListComponent,
|
||||
VideoListComponent,
|
||||
PopupCreatePlaylistComponent,
|
||||
PageHistoriqueComponent,
|
||||
PageHistoryUserComponent,
|
||||
PageMyProfilComponent,
|
||||
PopupPictureProfilUrlComponent,
|
||||
PageAdvertiserComponent,
|
||||
PopupDeleteAdComponent,
|
||||
PopupAddOrUpdateAdComponent,
|
||||
PopupVisualizeAdComponent,
|
||||
BarTagsComponent,
|
||||
PopupVisualizeImagesComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
@ -76,7 +93,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
|||
MatSnackBarModule,
|
||||
MatGridListModule,
|
||||
MatTableModule,
|
||||
NgbModule
|
||||
NgbModule,
|
||||
MatSortModule,
|
||||
MatChipsModule,
|
||||
ReactiveFormsModule,
|
||||
MatAutocompleteModule,
|
||||
MatSelectModule,
|
||||
IvyCarouselModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
|
|
|||
|
|
@ -1,41 +1,40 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
<div class="bg">
|
||||
|
||||
<app-nav-bar pour="3roles"></app-nav-bar>
|
||||
|
||||
<div class="boite">
|
||||
<h1> Connexion </h1>
|
||||
<app-nav-bar pour="login"></app-nav-bar>
|
||||
|
||||
|
||||
<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"/>
|
||||
</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>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="row">
|
||||
<div class="col-4 label"> Email: </div>
|
||||
<div class="col-8 champ">
|
||||
<input type="text" [(ngModel)]="email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mot de passe -->
|
||||
<div class="row">
|
||||
<div class="col-4 label"> Mot de passe: </div>
|
||||
<div class="col-8 champ">
|
||||
<input type="text" [(ngModel)]="password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Boutons -->
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button (click)="onSeConnecter()"> Se connecter </button>
|
||||
</div>
|
||||
<div class="col-6" style="text-align: right">
|
||||
<button routerLink="/register"> S'inscrire </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mot de passe oublié -->
|
||||
<div style="text-align: right">
|
||||
<a class="lien" href="https://pixar.fandom.com/wiki/Sadness"> Mot de passe oublié ? </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,276 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
html {
|
||||
background-color: #56baed;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #5E89FF;
|
||||
display:inline-block;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display:inline-block;
|
||||
margin: 40px 8px 10px 8px;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* STRUCTURE */
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#formContent {
|
||||
-webkit-border-radius: 10px 10px 10px 10px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
width: 90%;
|
||||
max-width: 450px;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#formFooter {
|
||||
background-color: #f6f6f6;
|
||||
border-top: 1px solid #dce8f1;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 0 0 10px 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* TABS */
|
||||
|
||||
h2.inactive {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
h2.active {
|
||||
color: #0d0d0d;
|
||||
border-bottom: 2px solid #5fbae9;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* FORM TYPOGRAPHY*/
|
||||
|
||||
input[type=button], input[type=submit], input[type=reset] {
|
||||
background-color: #5E89FF;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 80px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
|
||||
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
|
||||
-webkit-border-radius: 5px 5px 5px 5px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
margin: 5px 20px 40px 20px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-ms-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
|
||||
background-color: #39ace7;
|
||||
}
|
||||
|
||||
input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
|
||||
-moz-transform: scale(0.95);
|
||||
-webkit-transform: scale(0.95);
|
||||
-o-transform: scale(0.95);
|
||||
-ms-transform: scale(0.95);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
input[type=text], input[type=password] {
|
||||
background-color: #f6f6f6;
|
||||
border: none;
|
||||
color: #0d0d0d;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 5px;
|
||||
width: 85%;
|
||||
border: 2px solid #f6f6f6;
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
-webkit-border-radius: 5px 5px 5px 5px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type=text]:focus, input[type=password]:focus {
|
||||
background-color: #fff;
|
||||
border-bottom: 2px solid #5fbae9;
|
||||
}
|
||||
|
||||
input[type=text]::placeholder, input[type=password]::placeholder {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.myContainer {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.bg{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 80vh;
|
||||
width: 100vw;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
/* Simple CSS3 Fade-in-down Animation */
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Simple CSS3 Fade-in Animation */
|
||||
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
|
||||
.fadeIn {
|
||||
opacity:0;
|
||||
-webkit-animation:fadeIn ease-in 1;
|
||||
-moz-animation:fadeIn ease-in 1;
|
||||
animation:fadeIn ease-in 1;
|
||||
|
||||
-webkit-animation-fill-mode:forwards;
|
||||
-moz-animation-fill-mode:forwards;
|
||||
animation-fill-mode:forwards;
|
||||
|
||||
-webkit-animation-duration:1s;
|
||||
-moz-animation-duration:1s;
|
||||
animation-duration:1s;
|
||||
}
|
||||
|
||||
.fadeIn.first {
|
||||
-webkit-animation-delay: 0.4s;
|
||||
-moz-animation-delay: 0.4s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.fadeIn.second {
|
||||
-webkit-animation-delay: 0.6s;
|
||||
-moz-animation-delay: 0.6s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.fadeIn.third {
|
||||
-webkit-animation-delay: 0.8s;
|
||||
-moz-animation-delay: 0.8s;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.fadeIn.fourth {
|
||||
-webkit-animation-delay: 1s;
|
||||
-moz-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
/* Simple CSS3 Fade-in Animation */
|
||||
.underlineHover:after {
|
||||
display: block;
|
||||
left: 0;
|
||||
bottom: -10px;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
//background-color: #5E89FF;
|
||||
background-color: #5E89FF;
|
||||
content: "";
|
||||
transition: width 0.2s;
|
||||
}
|
||||
|
||||
.underlineHover:hover {
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
.underlineHover:hover:after{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1{
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.boite {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 30%;
|
||||
margin-top: 50vh;
|
||||
transform: translateY(-100%);
|
||||
border: solid 3px;
|
||||
border-radius: 10px;
|
||||
padding: 20px 40px 20px 20px;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
.lightTheme .boite {
|
||||
border-color: black;
|
||||
}
|
||||
.darkTheme .boite {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.row {
|
||||
margin: 25px 0px 25px 0px
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: right;
|
||||
margin-right: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.champ {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
//text-align: center;
|
||||
}
|
||||
|
||||
.lien {
|
||||
text-decoration: underline;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* OTHERS */
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#icon {
|
||||
width:30%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {Router} from "@angular/router";
|
|||
import {ThemeService} from "../../utils/services/theme/theme.service";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-connexion',
|
||||
templateUrl: './page-connexion.component.html',
|
||||
|
|
@ -11,8 +12,11 @@ import {ThemeService} from "../../utils/services/theme/theme.service";
|
|||
})
|
||||
export class PageConnexionComponent implements OnInit
|
||||
{
|
||||
email: string = ""
|
||||
password: string = ""
|
||||
pseudo: string = "" ;
|
||||
password: string = "" ;
|
||||
hasError: boolean = false;
|
||||
errorMessage: string = "";
|
||||
|
||||
|
||||
constructor( private messageService: MessageService,
|
||||
private router: Router,
|
||||
|
|
@ -23,23 +27,49 @@ export class PageConnexionComponent implements OnInit
|
|||
|
||||
|
||||
onSeConnecter(): void
|
||||
{
|
||||
this.checkError();
|
||||
|
||||
if(!this.hasError)
|
||||
{
|
||||
let data = {
|
||||
"email": this.email,
|
||||
"pseudo": this.pseudo,
|
||||
"password": this.password
|
||||
};
|
||||
this.messageService
|
||||
.sendMessage('connexion', data)
|
||||
.subscribe( retour => this.maCallback(retour))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
maCallback(retour): void
|
||||
{
|
||||
if(retour.status === "error") console.log(retour.data)
|
||||
else {
|
||||
console.log(retour.data)
|
||||
if(retour.status === "error") {
|
||||
this.errorMessage = retour.data.reason;
|
||||
this.hasError = true;
|
||||
}
|
||||
else {
|
||||
//this.router.navigateByUrl( '/search' );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
checkError(): void
|
||||
{
|
||||
if(this.pseudo === "") {
|
||||
this.errorMessage = "Veuillez remplir le champ login" ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.password === "") {
|
||||
this.errorMessage = "Veuillez remplir le champ mot de passe" ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else {
|
||||
this.errorMessage = "" ;
|
||||
this.hasError = false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,53 +1,72 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
<div class="bg">
|
||||
|
||||
<app-nav-bar pour="3roles"></app-nav-bar>
|
||||
|
||||
<div class="boite">
|
||||
<h1> Inscription </h1>
|
||||
<app-nav-bar pour="register"></app-nav-bar>
|
||||
|
||||
<!-- Pseudo -->
|
||||
<div class="row">
|
||||
<div class="col-6 label"> Pseudo: </div>
|
||||
<div class="col-6 champ">
|
||||
<input type="text" [(ngModel)]="pseudo">
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="formContent">
|
||||
|
||||
<!-- Icon -->
|
||||
<div style="margin: 10px 0px 20px 0px">
|
||||
<img src="assets/logo.png" id="icon" alt="User Icon" style="margin-top: 20px"/>
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form>
|
||||
<!-- Login -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Login</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="pseudo">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="row">
|
||||
<div class="col-6 label"> Email: </div>
|
||||
<div class="col-6 champ">
|
||||
<input type="email" [(ngModel)]="email">
|
||||
</div>
|
||||
</div>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="email" [(ngModel)]="email">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Role -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Type de compte</mat-label>
|
||||
<mat-select [(ngModel)]="role">
|
||||
<mat-option value="user"> Utilisateur </mat-option>
|
||||
<mat-option value="advertiser"> Annonceur </mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Mot de passe -->
|
||||
<div class="row">
|
||||
<div class="col-6 label"> Mot de passe: </div>
|
||||
<div class="col-6 champ">
|
||||
<input type="password" [(ngModel)]="password">
|
||||
</div>
|
||||
</div>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="password">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Confirmation mot de passe -->
|
||||
<div class="row">
|
||||
<div class="col-6 label"> Confirmer le mot de passe: </div>
|
||||
<div class="col-6 champ">
|
||||
<input type="password" [(ngModel)]="confirmPassword">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bouton valider -->
|
||||
<div style="width: 100%; margin-top: 30px">
|
||||
<button (click)="onValider()"> Valider </button>
|
||||
</div>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Confirmation mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="confirmPassword">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Message d'erreur -->
|
||||
<div *ngIf="hasError" style="text-align: center">
|
||||
<div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
|
||||
<span class="mat-error"> {{errorMessage}} </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Valider -->
|
||||
<input type="submit" class="fadeIn fourth" value="S'inscrire" (click)="onRegister()">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,58 +1,75 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
.myContainer {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
.bg{
|
||||
height: 80vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
|
||||
.boite {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 35%;
|
||||
margin-top: 50vh;
|
||||
transform: translateY(-100%);
|
||||
border: solid 3px;
|
||||
border-radius: 10px;
|
||||
padding: 20px 40px 20px 40px;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
.lightTheme .boite {
|
||||
border-color: black;
|
||||
}
|
||||
.darkTheme .boite {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 15px 0px 15px 0px
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: right;
|
||||
margin-right: 0px;
|
||||
#formContent {
|
||||
-webkit-border-radius: 10px 10px 10px 10px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
width: 90%;
|
||||
max-width: 450px;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.champ {
|
||||
margin: 0px;
|
||||
padding: 0px
|
||||
|
||||
#icon {
|
||||
width:30%;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
background-color: #969696;
|
||||
border: solid 2px black;
|
||||
|
||||
mat-form-field {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
|
||||
input[type=button], input[type=submit], input[type=reset] {
|
||||
background-color: #5E89FF;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 80px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
margin: 5px 20px 40px 20px;
|
||||
}
|
||||
|
||||
|
||||
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
|
||||
background-color: #39ace7;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export class PageRegisterComponent implements OnInit
|
|||
pseudo: string = "";
|
||||
email: string = "" ;
|
||||
password: string = "";
|
||||
role: string = "";
|
||||
confirmPassword: string = "";
|
||||
hasError: boolean = false;
|
||||
errorMessage: string = "";
|
||||
|
|
@ -36,45 +37,57 @@ export class PageRegisterComponent implements OnInit
|
|||
}
|
||||
|
||||
|
||||
verifierChamps(): void
|
||||
checkField(): void
|
||||
{
|
||||
if(this.pseudo.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'pseudo'"
|
||||
this.errorMessage = "Veuillez remplir le champ 'pseudo'";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.email.length === 0)
|
||||
{
|
||||
this.errorMessage = "Veuillez remplir le champ 'email'"
|
||||
this.errorMessage = "Veuillez remplir le champ 'email'";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(!this.isValidEmail(this.email))
|
||||
{
|
||||
this.errorMessage = "Email invalide"
|
||||
this.errorMessage = "Email invalide";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.role === "")
|
||||
{
|
||||
this.errorMessage = "Veuillez selectionner un type de compte";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.password.length === 0)
|
||||
{
|
||||
this.errorMessage = "Veuillez remplir le champ 'mot de passe'"
|
||||
this.errorMessage = "Veuillez remplir le champ 'mot de passe'";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.password !== this.confirmPassword)
|
||||
{
|
||||
this.errorMessage = "Le mot de passe est différent de sa confirmation"
|
||||
this.errorMessage = "Le mot de passe est différent de sa confirmation";
|
||||
this.hasError = true;
|
||||
}
|
||||
else {
|
||||
this.errorMessage = "" ;
|
||||
this.hasError = false;
|
||||
}
|
||||
console.log(this.errorMessage);
|
||||
}
|
||||
|
||||
|
||||
onValider(): void
|
||||
onRegister(): void
|
||||
{
|
||||
this.verifierChamps()
|
||||
console.log(this.hasError)
|
||||
console.log(this.role);
|
||||
this.checkField();
|
||||
if(!this.hasError)
|
||||
{
|
||||
let data = { "pseudo": this.pseudo, "email": this.email, "password": this.password }
|
||||
let data = {
|
||||
"pseudo": this.pseudo,
|
||||
"email": this.email,
|
||||
"role": this.role,
|
||||
"password": this.password
|
||||
};
|
||||
this.messageService
|
||||
.sendMessage('register', data)
|
||||
.subscribe(retour => this.maCallback(retour))
|
||||
|
|
@ -94,4 +107,5 @@ export class PageRegisterComponent implements OnInit
|
|||
.subscribe(result => this.router.navigateByUrl( '/connexion' ));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,9 +49,9 @@
|
|||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Supprimer Column -->
|
||||
<ng-container matColumnDef="effacer">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Effacer </th>
|
||||
<!-- 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>
|
||||
|
|
@ -1,3 +1,9 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PageHistoriqueComponent } from './page-historique.component';
|
||||
import { PageHistoryUserComponent } from './page-history-user.component';
|
||||
|
||||
describe('PageHistoriqueComponent', () => {
|
||||
let component: PageHistoriqueComponent;
|
||||
let fixture: ComponentFixture<PageHistoriqueComponent>;
|
||||
let component: PageHistoryUserComponent;
|
||||
let fixture: ComponentFixture<PageHistoryUserComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PageHistoriqueComponent ]
|
||||
declarations: [ PageHistoryUserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PageHistoriqueComponent);
|
||||
fixture = TestBed.createComponent(PageHistoryUserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
|
@ -6,43 +6,43 @@ 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 {HistoriqueService} from "../../../utils/services/historique/historique.service";
|
||||
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
|
||||
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-historique',
|
||||
templateUrl: './page-historique.component.html',
|
||||
styleUrls: ['./page-historique.component.scss']
|
||||
selector: 'app-page-history-user',
|
||||
templateUrl: './page-history-user.component.html',
|
||||
styleUrls: ['./page-history-user.component.scss']
|
||||
})
|
||||
export class PageHistoriqueComponent implements OnInit
|
||||
export class PageHistoryUserComponent implements OnInit
|
||||
{
|
||||
displayedColumns: string[] = [ 'aperçu', 'titre', 'date', 'source', 'effacer' ];
|
||||
displayedColumns: string[] = [ 'aperçu', 'titre', 'date', 'source', 'action' ];
|
||||
dataSource ;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
private messageService: MessageService,
|
||||
private fictitiousDataService: FictitiousDatasService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
public videoUrlService: VideoUrlService,
|
||||
private historiqueService: HistoriqueService ) { }
|
||||
private userHistoryService: UserHistoryService ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.historiqueService.clearTabVideoUrlClicked();
|
||||
this.userHistoryService.clearTabVideoUrlClicked();
|
||||
|
||||
// --- FAUX CODE ---
|
||||
const tabWatchedVideo = this.fictitiousDataService.getTabWatchedVideo(8);
|
||||
const tabWatchedVideo = this.fictitiousDatasService.getTabWatchedVideo(8);
|
||||
this.dataSource = new MatTableDataSource(tabWatchedVideo);
|
||||
this.dataSource.sort = this.sort;
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage( "user/get/historique", null )
|
||||
.sendMessage( "user/get/history", null )
|
||||
.subscribe( retour => {
|
||||
|
||||
if(retour.status === "error") console.log(retour);
|
||||
|
|
@ -99,7 +99,7 @@ export class PageHistoriqueComponent implements OnInit
|
|||
onIframeClick(watchedVideo: WatchedVideo)
|
||||
{
|
||||
console.log("onIframeClick: " + watchedVideo.title);
|
||||
this.historiqueService.addWatchedVideoToHistorique(watchedVideo);
|
||||
this.userHistoryService.addWatchedVideoToHistorique(watchedVideo);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlay
|
|||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {Playlist} from "../../../utils/interfaces/playlist";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {HistoriqueService} from "../../../utils/services/historique/historique.service";
|
||||
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
|
||||
|
||||
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ export class VideoListComponent
|
|||
public videoUrlService: VideoUrlService,
|
||||
private addVideoToPlaylistService: AddVideoToPlaylistsService,
|
||||
private snackBar: MatSnackBar,
|
||||
private historiqueService: HistoriqueService ) { }
|
||||
private historiqueService: UserHistoryService ) { }
|
||||
|
||||
|
||||
onAdd(video: Video): void
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
<app-nav-bar pour="user"></app-nav-bar><br><br>
|
||||
|
||||
<div class="boite">
|
||||
|
||||
<h1> Mon profil </h1>
|
||||
|
||||
<!-- Photo de profil -->
|
||||
<div style="text-align: center">
|
||||
<img [src]="model.profilePictureUrl"
|
||||
onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
|
||||
routerLink="/advertiser/myProfil"
|
||||
alt="???">
|
||||
<br>
|
||||
<button (click)="onChangePP()"> Changer photo de profil</button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- Pseudo | Email | Role | Modifier mot de passe -->
|
||||
<form>
|
||||
<p>
|
||||
<label for="pseudo"> Pseudo: </label>
|
||||
<input id="pseudo" name="pseudo" type="text" [(ngModel)]="model.login">
|
||||
</p>
|
||||
<p>
|
||||
<label for="email"> Email: </label>
|
||||
<input id="email" name="email" type="email" [(ngModel)]="model.mail">
|
||||
</p>
|
||||
<p>
|
||||
<label for="role">Role: </label>
|
||||
<select id="role" name="role" [(ngModel)]="model.role">
|
||||
<option value="user"> Utilisateur </option>
|
||||
<option value="advertiser"> Annonceur </option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="demande"> Modifier mot de passe: </label>
|
||||
<input type="checkbox" id="demande" name="demande" [(ngModel)]="changePassword">
|
||||
</p>
|
||||
<p *ngIf="changePassword">
|
||||
<label for="newPassword"> Nouveau mot de passe: </label>
|
||||
<input type="password" id="newPassword" name="newPassword" [(ngModel)]="model.newPassword">
|
||||
</p>
|
||||
<p *ngIf="changePassword">
|
||||
<label for="confirmNewPassword"> Confirmation nouveau mot de passe: </label>
|
||||
<input type="password" id="confirmNewPassword" name="confirmNewPassword" [(ngModel)]="confirmNewPassword">
|
||||
</p>
|
||||
</form>
|
||||
<br>
|
||||
|
||||
<!-- Bouton valider -->
|
||||
<div style="width: 100%; text-align: center">
|
||||
<button (click)="onEnregistrer()"> Enregistrer </button>
|
||||
</div>
|
||||
|
||||
<!-- Message d'erreur -->
|
||||
<div *ngIf="hasError" style="text-align: center; margin-top: 10px;">
|
||||
<span class="mat-error"> {{errorMessage}} </span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.boite {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 40%;
|
||||
margin-top: 50vh;
|
||||
transform: translateY(-100%);
|
||||
border: solid 3px;
|
||||
border-radius: 10px;
|
||||
padding: 20px 40px 20px 40px;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
.lightTheme .boite {
|
||||
border-color: black;
|
||||
}
|
||||
.darkTheme .boite {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0px 0px 10px 0px;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border: solid 2px white;
|
||||
border-radius: 50%;
|
||||
font-size: xxx-large;
|
||||
}
|
||||
|
||||
form {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
p {
|
||||
display: table-row;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
margin: 0px;
|
||||
padding: 10px 5px 10px 0px;
|
||||
}
|
||||
|
||||
input {
|
||||
display: table-cell;
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@ export class PageSearchComponent implements OnInit
|
|||
// --- VRAI CODE ---
|
||||
/*
|
||||
let tabPlateformName = [];
|
||||
for(let plateform of this.tabPlateform) tabPlateformName.push(plateform.name);
|
||||
for(let plateform of this.tabPlateform) tabPlateformName.push(plateform.title);
|
||||
let data = { search: "", plaateforms: tabPlateformName };
|
||||
this.messageService
|
||||
.sendMessage("user/searchVideo", data)
|
||||
|
|
@ -70,7 +70,7 @@ export class PageSearchComponent implements OnInit
|
|||
let tabPlateformName = [];
|
||||
for(let plateform of this.tabPlateform)
|
||||
{
|
||||
if(plateform.isSelected) tabPlateformName.push(plateform.name);
|
||||
if(plateform.isSelected) tabPlateformName.push(plateform.title);
|
||||
}
|
||||
let data = { "search": this.search, "plateforms": tabPlateformName };
|
||||
this.messageService
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ 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 {HistoriqueService} from "../../../utils/services/historique/historique.service";
|
||||
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-video-cell',
|
||||
|
|
@ -26,7 +26,7 @@ export class VideoCellComponent implements OnInit
|
|||
private addVideoToPlaylistsService: AddVideoToPlaylistsService,
|
||||
public themeService: ThemeService,
|
||||
private messageService: MessageService,
|
||||
private historiqueService: HistoriqueService ) {}
|
||||
private historiqueService: UserHistoryService ) {}
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
|
||||
import {Component, Input, OnChanges} from '@angular/core';
|
||||
import {Video} from "../../../utils/interfaces/video";
|
||||
import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
|
||||
import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {WatchedVideo} from "../../../utils/interfaces/watchedVideo";
|
||||
import {HistoriqueService} from "../../../utils/services/historique/historique.service";
|
||||
import {UserHistoryService} from "../../../utils/services/userHistory/userHistory.service";
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -19,7 +14,7 @@ export class VideoGridComponent implements OnChanges
|
|||
tabTriplet = [];
|
||||
|
||||
|
||||
constructor(private historiqueService: HistoriqueService) {}
|
||||
constructor(private historiqueService: UserHistoryService) {}
|
||||
|
||||
|
||||
ngOnChanges(): void
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
<app-nav-bar [pour]="forNavbar"></app-nav-bar><br><br>
|
||||
|
||||
<div class="boite">
|
||||
|
||||
<!-- Photo de profil -->
|
||||
<div style="text-align: center">
|
||||
<img [src]="model.profilePictureUrl"
|
||||
onerror="this.onerror=null; this.src='assets/profil.png'"
|
||||
alt="">
|
||||
<br>
|
||||
<button mat-button (click)="onChangePP()"> Changer photo de profil</button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- Pseudo -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Pseudo</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="model.login">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Email -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="model.mail">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Role -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Type de compte</mat-label>
|
||||
<input matInput type="text" *ngIf="model.role==='user'" value="Utilisateur" disabled>
|
||||
<input matInput type="text" *ngIf="model.role==='advertiser'" value="Annonceur" disabled>
|
||||
<input matInput type="text" *ngIf="model.role==='admin'" value="Admin" disabled>
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Modifier mot de passe -->
|
||||
Modifier mot de passe:
|
||||
<mat-checkbox [(ngModel)]="changePassword"></mat-checkbox>
|
||||
<br>
|
||||
|
||||
<!-- Nouveau mot de passe -->
|
||||
<div *ngIf="changePassword">
|
||||
<!-- Nouveau mot de passe -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Nouveau mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="model.newPassword">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
<!-- Confirmation npuveau mot de passe -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Confirmation nouveau mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="confirmNewPassword">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- Bouton valider -->
|
||||
<div style="width: 100%; text-align: center">
|
||||
<button mat-button (click)="onEnregistrer()"> Enregistrer </button>
|
||||
</div>
|
||||
|
||||
<!-- Message d'erreur -->
|
||||
<div *ngIf="hasError" style="text-align: center; margin-top: 10px;">
|
||||
<span class="mat-error"> {{errorMessage}} </span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.boite {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 20%;
|
||||
margin-top: 20px;
|
||||
border: solid 3px;
|
||||
border-radius: 10px;
|
||||
padding: 20px 40px 20px 40px;
|
||||
background-color: #ffffff;
|
||||
text-align: center;
|
||||
box-shadow: 10px 5px 5px black;
|
||||
}
|
||||
.lightTheme .boite {
|
||||
border-color: black;
|
||||
}
|
||||
.darkTheme .boite {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0px 0px 10px 0px;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border: solid 2px black;
|
||||
border-radius: 50%;
|
||||
font-size: xxx-large;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
padding: 2px 0px 2px 0px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
button {
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
// 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-color: black !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MessageService} from "../../../services/message/message.service";
|
||||
import {ThemeService} from "../../../services/theme/theme.service";
|
||||
import {FictitiousDatasService} from "../../../services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {PopupAddVideoToPlaylistsComponent} from "../../../utils/components/popup-add-video-to-playlists/popup-add-video-to-playlists.component";
|
||||
import {PopupAddVideoToPlaylistsComponent} from "../../popup-add-video-to-playlists/popup-add-video-to-playlists.component";
|
||||
import {PopupPictureProfilUrlComponent} from "../popup-picture-profil-url/popup-picture-profil-url.component";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
|
||||
|
||||
|
|
@ -27,20 +28,34 @@ export class PageMyProfilComponent implements OnInit
|
|||
confirmNewPassword: string = "" ;
|
||||
changePassword: boolean = false ;
|
||||
hasError: boolean = false;
|
||||
errorMessage: string = ""
|
||||
errorMessage: string = "" ;
|
||||
forNavbar: string = "" ;
|
||||
|
||||
|
||||
constructor( private messageService: MessageService,
|
||||
public themeService: ThemeService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
public dialog: MatDialog,
|
||||
private snackBar: MatSnackBar ) { }
|
||||
private snackBar: MatSnackBar,
|
||||
private router: Router ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
const profil = this.fictitiousDatasService.getUser();
|
||||
let profil ;
|
||||
if(this.router.url.startsWith("/user")) {
|
||||
profil = this.fictitiousDatasService.getUser();
|
||||
this.forNavbar = "user";
|
||||
}
|
||||
else if(this.router.url.startsWith("/advertiser")) {
|
||||
profil = this.fictitiousDatasService.getAdvertiser();
|
||||
this.forNavbar = "advertiser";
|
||||
}
|
||||
else if(this.router.url.startsWith("/admin")) {
|
||||
profil = this.fictitiousDatasService.getAdmin();
|
||||
this.forNavbar = "admin";
|
||||
}
|
||||
this.model._id = profil._id;
|
||||
this.model.profilePictureUrl = profil.profilePictureUrl;
|
||||
this.model.login = profil.login;
|
||||
|
|
@ -8,7 +8,7 @@ img {
|
|||
margin: 0px 0px 10px 0px;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
border: solid 2px white;
|
||||
border: solid 2px black;
|
||||
border-radius: 50%;
|
||||
font-size: xxx-large;
|
||||
}
|
||||
|
|
@ -1,8 +1,36 @@
|
|||
<!-- --------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- 3 Roles -->
|
||||
<div *ngIf="pour === '3roles'">
|
||||
<!-- Login -->
|
||||
<div *ngIf="pour === 'login'">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
|
||||
<!-- PolyNotFound -->
|
||||
<a class="navbar-brand" routerLink=""> 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>
|
||||
|
||||
<!-- Rien -->
|
||||
<div class="collapse navbar-collapse"></div>
|
||||
|
||||
<!-- Slide -->
|
||||
<mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 50px 0px 10px;"></mat-slide-toggle>
|
||||
|
||||
<!-- S'inscrire -->
|
||||
<button mat-button class="btnDeconnexion" routerLink="/register">
|
||||
S'inscrire
|
||||
</button>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Register -->
|
||||
<div *ngIf="pour === 'register'">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
|
||||
<!-- PolyNotFound -->
|
||||
|
|
@ -53,8 +81,8 @@
|
|||
<mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 10px 0px 10px;"></mat-slide-toggle>
|
||||
|
||||
<!-- Mon profil -->
|
||||
<img src="https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
|
||||
onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
|
||||
<img [src]=urlImage
|
||||
onerror="this.onerror=null; this.src='assets/profil.png'"
|
||||
routerLink="/user/myProfil"
|
||||
alt="">
|
||||
|
||||
|
|
@ -75,32 +103,20 @@
|
|||
<nav class="navbar navbar-expand-lg">
|
||||
|
||||
<!-- PolyNotFound -->
|
||||
<a class="navbar-brand" routerLink="/advertiser/search"> StreamNotFound </a>
|
||||
<a class="navbar-brand" routerLink="/advertiser"> 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>
|
||||
|
||||
<!-- [Recherche] [Mes Playlists] [Historique] -->
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/advertiser/addAd"> Ajouter une pub </a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/advertiser/adList"> Liste des pubs </a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/advertiser/history"> Historique des pubs </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Vide -->
|
||||
<div class="collapse navbar-collapse"></div>
|
||||
|
||||
<!-- Slide -->
|
||||
<mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 10px 0px 10px;"></mat-slide-toggle>
|
||||
|
||||
<!-- Mon profil -->
|
||||
<img src="https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
|
||||
onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
|
||||
<img [src]=urlImage
|
||||
onerror="this.onerror=null; this.src='assets/profil.png'"
|
||||
routerLink="/advertiser/myProfil"
|
||||
alt="">
|
||||
|
||||
|
|
@ -145,8 +161,8 @@
|
|||
<mat-slide-toggle (click)="onClick()" style="font-size: x-large; margin: 0px 10px 0px 10px;"></mat-slide-toggle>
|
||||
|
||||
<!-- Mon profil -->
|
||||
<img src="https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
|
||||
onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
|
||||
<img [src]=urlImage
|
||||
onerror="this.onerror=null; this.src='assets/profil.png'"
|
||||
routerLink="/admin/myProfil"
|
||||
alt="">
|
||||
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@
|
|||
|
||||
// PolyNotFound
|
||||
.navbar-brand {
|
||||
font-family: "Lucida Console";
|
||||
font-family: cursive;
|
||||
font-weight: bold;
|
||||
font-style: oblique 90deg;
|
||||
font-size: xx-large;
|
||||
//font-style: oblique 90deg;
|
||||
font-size: xxx-large;
|
||||
margin-left: 30px;
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,48 @@
|
|||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {ThemeService} from "../../services/theme/theme.service";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-bar',
|
||||
templateUrl: './nav-bar.component.html',
|
||||
styleUrls: ['./nav-bar.component.scss']
|
||||
})
|
||||
export class NavBarComponent
|
||||
export class NavBarComponent implements OnInit
|
||||
{
|
||||
@Input() pour = "3roles";
|
||||
@Input() pour = "login";
|
||||
urlImage: string = "" ;
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService ) { }
|
||||
|
||||
onClick(): void {
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
switch (this.pour)
|
||||
{
|
||||
case "user":
|
||||
this.urlImage = "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg" ;
|
||||
break;
|
||||
case "advertiser":
|
||||
this.urlImage = "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg" ;
|
||||
break;
|
||||
case "admin":
|
||||
this.urlImage = "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg" ;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onClick(): void
|
||||
{
|
||||
this.themeService.isLightTheme = !this.themeService.isLightTheme;
|
||||
}
|
||||
|
||||
onDeconnexion(): void {
|
||||
|
||||
onDeconnexion(): void
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,3 +17,23 @@ h3 {
|
|||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
|
||||
// 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-color: black !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export class PopupCreatePlaylistComponent implements OnInit
|
|||
if(!this.hasError)
|
||||
{
|
||||
this.messageService
|
||||
.sendMessage("user/create/playlist", {name: this.data.name})
|
||||
.sendMessage("user/create/playlist", {title: this.data.title})
|
||||
.subscribe(retour => {
|
||||
|
||||
if (retour.status === "error") {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
export interface Advert
|
||||
{
|
||||
_id: string,
|
||||
title: string,
|
||||
advertiser: string,
|
||||
images: {
|
||||
url: string,
|
||||
description: string,
|
||||
}[]
|
||||
text: string,
|
||||
subjectTarget: any[]
|
||||
seen: number,
|
||||
date: Date,
|
||||
}[],
|
||||
tags: string[],
|
||||
comment: string,
|
||||
views: number,
|
||||
createdAt: Date,
|
||||
lastUpdate: Date,
|
||||
isVisible: boolean,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,25 +88,75 @@ const TAB_VIDEO = [
|
|||
]
|
||||
|
||||
|
||||
|
||||
const TAB_ADVERT = [
|
||||
{
|
||||
_id: "idNutella",
|
||||
title: "pot de nutella XXL",
|
||||
advertiser: "nutella",
|
||||
images: [
|
||||
{ url: "nutella_v_1.jpeg", description: "image nutella 1" },
|
||||
{ url: "nutella_v_2.png", description: "image nutella 2" },
|
||||
{ url: "nutella_v_3.jpg", description: "image nutella 3" }
|
||||
],
|
||||
tags: [ "bon", "petit-déjeuner", "chocolat" ],
|
||||
comment: "pub pour vacances de noêl",
|
||||
views: 5,
|
||||
createdAt: new Date(),
|
||||
lastUpdate: new Date(),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
_id: "idRolex",
|
||||
title: "Rolex",
|
||||
advertiser: "rolex",
|
||||
images: [
|
||||
{ url: "rolex_v_1.jpg", description: "rolex 1" },
|
||||
{ url: "rolex_v_2.png", description: "rolex 2" },
|
||||
],
|
||||
tags: [ "montre", "luxe", "suisse" ],
|
||||
comment: "pub pour cette année",
|
||||
views: 2,
|
||||
createdAt: new Date(),
|
||||
lastUpdate: new Date(),
|
||||
isVisible: true
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FictitiousDatasService
|
||||
{
|
||||
constructor() { }
|
||||
|
||||
private makeid(length)
|
||||
{
|
||||
let res = '';
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
for( let i = 0; i < length; i++ )
|
||||
{
|
||||
const k = Math.floor(Math.random() * characters.length);
|
||||
res += characters.charAt(k);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
|
||||
getVideo(): Video
|
||||
{
|
||||
const idx = Math.floor(Math.random() * TAB_VIDEO.length);
|
||||
let video = Object.assign({}, TAB_VIDEO[idx]);
|
||||
video._id = video._id + this.makeid(5);
|
||||
return video;
|
||||
}
|
||||
|
||||
getTabVideo(n: number): Video[]
|
||||
{
|
||||
let tabVideo = [];
|
||||
const l = TAB_VIDEO.length;
|
||||
|
||||
for(let i=0 ; i<n ; i++)
|
||||
{
|
||||
const idx = Math.floor(Math.random() * l);
|
||||
tabVideo.push(TAB_VIDEO[idx]);
|
||||
}
|
||||
|
||||
for(let i=0 ; i<n ; i++) tabVideo.push(this.getVideo());
|
||||
return tabVideo;
|
||||
}
|
||||
|
||||
|
|
@ -132,30 +182,25 @@ export class FictitiousDatasService
|
|||
|
||||
getAdvert(): Advert
|
||||
{
|
||||
return {
|
||||
_id: "monId",
|
||||
advertiser: "nutella",
|
||||
images: [
|
||||
{ url: "nutella_v_1.jpeg", description: "image nutella 1" },
|
||||
{ url: "nutella_v_2.png", description: "image nutella 2" },
|
||||
{ url: "nutella_v_3.jpg", description: "image nutella 3" }
|
||||
],
|
||||
text: "Voici du bon nutella",
|
||||
subjectTarget: [],
|
||||
seen: 4,
|
||||
date: new Date(),
|
||||
const idx = Math.floor(Math.random() * TAB_ADVERT.length);
|
||||
let advert = Object.assign({}, TAB_ADVERT[idx]);
|
||||
advert._id = advert._id + this.makeid(5);
|
||||
advert.tags = advert.tags.slice();
|
||||
advert.isVisible = (Math.random() < 0.5);
|
||||
return advert;
|
||||
}
|
||||
|
||||
getTabAdvert(n: number): Advert[]
|
||||
{
|
||||
let tabAdvert = [];
|
||||
for(let i=0 ; i<n ; i++) tabAdvert.push(this.getAdvert());
|
||||
return tabAdvert;
|
||||
}
|
||||
|
||||
|
||||
getTabWatchedVideo(n): WatchedVideo[]
|
||||
getWatchedVideo(): WatchedVideo
|
||||
{
|
||||
let tabWatchedVideo = [];
|
||||
const l = TAB_VIDEO.length;
|
||||
|
||||
for(let i=0 ; i<n ; i++)
|
||||
{
|
||||
const idx = Math.floor(Math.random() * l);
|
||||
const idx = Math.floor(Math.random() * TAB_VIDEO.length);
|
||||
const video: Video = TAB_VIDEO[idx];
|
||||
const watchedVideo: WatchedVideo = {
|
||||
_id: video._id,
|
||||
|
|
@ -163,9 +208,13 @@ export class FictitiousDatasService
|
|||
title: video.title,
|
||||
date: new Date()
|
||||
};
|
||||
tabWatchedVideo.push(watchedVideo);
|
||||
return watchedVideo ;
|
||||
}
|
||||
|
||||
getTabWatchedVideo(n: number): WatchedVideo[]
|
||||
{
|
||||
let tabWatchedVideo = [];
|
||||
for(let i=0 ; i<n ; i++) tabWatchedVideo.push(this.getWatchedVideo());
|
||||
return tabWatchedVideo;
|
||||
}
|
||||
|
||||
|
|
@ -173,13 +222,43 @@ export class FictitiousDatasService
|
|||
getUser(): User
|
||||
{
|
||||
return {
|
||||
_id: "blablablaId",
|
||||
login: "yoyo",
|
||||
_id: "ririId",
|
||||
login: "Riri",
|
||||
hashPass: "agourgroou",
|
||||
mail: "yoyo@gmail.com",
|
||||
mail: "riri@gmail.com",
|
||||
role: "user",
|
||||
profilePictureUrl: "https://ih1.redbubble.net/image.945612860.1330/flat,750x1000,075,f.jpg"
|
||||
profilePictureUrl: "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg"
|
||||
}
|
||||
}
|
||||
|
||||
getAdvertiser(): User
|
||||
{
|
||||
return {
|
||||
_id: "fifiId",
|
||||
login: "Fifi",
|
||||
hashPass: "agourgroou",
|
||||
mail: "fifi@gmail.com",
|
||||
role: "advertiser",
|
||||
profilePictureUrl: "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg"
|
||||
}
|
||||
}
|
||||
|
||||
getAdmin(): User
|
||||
{
|
||||
return {
|
||||
_id: "loulouId",
|
||||
login: "Loulou",
|
||||
hashPass: "agourgroou",
|
||||
mail: "loulou@gmail.com",
|
||||
role: "advertiser",
|
||||
profilePictureUrl: "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg?format=product-cover-large&k=1519639530"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
getTags(): string[]
|
||||
{
|
||||
return [ "musique", "rap", "rock", "sport", "foot", "basket", "tennis", "film", "action", "aventure", "horreur", "romance", "comedie"];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HistoriqueService } from './historique.service';
|
||||
import { UserHistoryService } from './userHistory.service';
|
||||
|
||||
describe('HistoriqueService', () => {
|
||||
let service: HistoriqueService;
|
||||
let service: UserHistoryService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(HistoriqueService);
|
||||
service = TestBed.inject(UserHistoryService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
|
|
@ -6,7 +6,7 @@ import {MessageService} from "../message/message.service";
|
|||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class HistoriqueService
|
||||
export class UserHistoryService
|
||||
{
|
||||
private tabVideoUrlClicked: string[] = [];
|
||||
|
||||
BIN
src/assets/darkBackground.webp
Normal file
BIN
src/assets/darkBackground.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 712 B |
BIN
src/assets/lightBackground.jpg
Normal file
BIN
src/assets/lightBackground.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/assets/profil.png
Normal file
BIN
src/assets/profil.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
BIN
src/assets/pub/rolex_v_1.jpg
Normal file
BIN
src/assets/pub/rolex_v_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/pub/rolex_v_2.png
Normal file
BIN
src/assets/pub/rolex_v_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
|
|
@ -1,79 +0,0 @@
|
|||
<div class="conteneur">
|
||||
|
||||
<!-- Navbar -->
|
||||
<div style="margin-bottom: 50px">
|
||||
<app-nav-bar pour="user"></app-nav-bar>
|
||||
</div>
|
||||
|
||||
<!-- ---------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<!-- bloc du milieu: niveau 1 -->
|
||||
<div class="row blocMilieu1">
|
||||
|
||||
<!-- pub de gauche -->
|
||||
<div class="col-2">
|
||||
<div class="conteneurPubGauche">
|
||||
<app-pub></app-pub>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ------------------------- -->
|
||||
|
||||
<!-- bloc du milieu: niveau 2 -->
|
||||
<div class="col-8">
|
||||
|
||||
<!-- Search bar -->
|
||||
<div class="row" style="margin-bottom: 10px">
|
||||
<div>
|
||||
<input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search">
|
||||
<button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Site de streaming -->
|
||||
<div class="row" style="margin-bottom: 10px">
|
||||
<div>
|
||||
<span *ngFor="let plateforme of tabPlateform">
|
||||
|
||||
<input type="checkbox" [id]="plateforme.name" [name]="plateforme.name" style="margin-left: 5px" [(ngModel)]="plateforme.isSelected">
|
||||
<img [src]="'/assets/logo_plateforms/'+plateforme.name+'.png'" alt="image" width="25px" height="25px" style="margin-left: 5px">
|
||||
<label [for]="plateforme.name" style="margin-left: 5px"> {{plateforme.name}}</label>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grille des videos -->
|
||||
<div class="row">
|
||||
<app-video-grid [tabVideo]="tabVideo"></app-video-grid>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ------------------------- -->
|
||||
|
||||
<!-- pub de droite -->
|
||||
<div class="col-2">
|
||||
<div class="conteneurPubDroite">
|
||||
<app-pub></app-pub>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ---------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<!-- pub du bas
|
||||
<div class="row">
|
||||
<div class="col-2"></div>
|
||||
<div class="col-8">
|
||||
<div class="conteneurPubBas">
|
||||
<app-pub></app-pub>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2"></div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
import '@angular/localize/init';
|
||||
|
|
|
|||
|
|
@ -6,14 +6,24 @@
|
|||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
|
||||
|
||||
.lightTheme {
|
||||
background-color: white;
|
||||
background: url("assets/lightBackground.jpg") no-repeat center center fixed;
|
||||
font-color: black;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
|
||||
.darkTheme {
|
||||
background-color: #323232;
|
||||
background: url("assets/darkBackground.webp") no-repeat center center fixed;
|
||||
font-color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
|
||||
.lightTheme, .darkTheme {
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue