From 4336169d2e716557cb7e54e425ce3e0d55c6f21a Mon Sep 17 00:00:00 2001 From: MiharyR Date: Mon, 1 Nov 2021 11:59:20 +0100 Subject: [PATCH] =?UTF-8?q?am=C3=A9lioration=20du=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- package-lock.json | 141 ++++++++ package.json | 2 + .../bar-tags/bar-tags.component.html | 43 +++ .../bar-tags/bar-tags.component.scss | 3 + .../bar-tags/bar-tags.component.spec.ts | 25 ++ .../advertiser/bar-tags/bar-tags.component.ts | 94 ++++++ .../page-advertiser.component.html | 126 ++++++++ .../page-advertiser.component.scss | 63 ++++ .../page-advertiser.component.spec.ts | 25 ++ .../page-advertiser.component.ts | 143 +++++++++ .../popup-add-or-update-ad.component.html | 44 +++ .../popup-add-or-update-ad.component.scss | 60 ++++ .../popup-add-or-update-ad.component.spec.ts | 25 ++ .../popup-add-or-update-ad.component.ts | 87 +++++ .../popup-delete-ad.component.html | 8 + .../popup-delete-ad.component.scss | 0 .../popup-delete-ad.component.spec.ts | 25 ++ .../popup-delete-ad.component.ts | 51 +++ .../popup-visualize-ad.component.html | 73 +++++ .../popup-visualize-ad.component.scss | 28 ++ .../popup-visualize-ad.component.spec.ts | 25 ++ .../popup-visualize-ad.component.ts | 46 +++ .../popup-visualize-images.component.html | 13 + .../popup-visualize-images.component.scss | 14 + .../popup-visualize-images.component.spec.ts | 25 ++ .../popup-visualize-images.component.ts | 35 ++ src/app/app-routing.module.ts | 20 +- src/app/app.module.ts | 35 +- .../page-connexion.component.html | 57 ++-- .../page-connexion.component.scss | 300 +++++++++++++++--- .../page-connexion.component.ts | 54 +++- .../page-register.component.html | 101 +++--- .../page-register.component.scss | 97 +++--- .../page-register/page-register.component.ts | 34 +- .../page-history-user.component.html} | 6 +- .../page-history-user.component.scss} | 6 + .../page-history-user.component.spec.ts} | 10 +- .../page-history-user.component.ts} | 24 +- .../video-list/video-list.component.ts | 4 +- .../page-my-profil.component.html | 65 ---- .../page-my-profil.component.scss | 64 ---- .../page-search/page-search.component.ts | 4 +- .../search/video-cell/video-cell.component.ts | 4 +- .../search/video-grid/video-grid.component.ts | 11 +- .../page-my-profil.component.html | 74 +++++ .../page-my-profil.component.scss | 67 ++++ .../page-my-profil.component.spec.ts | 0 .../page-my-profil.component.ts | 29 +- .../popup-picture-profil-url.component.html | 0 .../popup-picture-profil-url.component.scss | 2 +- ...popup-picture-profil-url.component.spec.ts | 0 .../popup-picture-profil-url.component.ts | 0 .../components/nav-bar/nav-bar.component.html | 62 ++-- .../components/nav-bar/nav-bar.component.scss | 6 +- .../components/nav-bar/nav-bar.component.ts | 38 ++- ...opup-add-video-to-playlists.component.scss | 20 ++ .../popup-create-playlist.component.ts | 2 +- src/app/utils/interfaces/advert.ts | 13 +- .../fictitious-datas.service.ts | 163 +++++++--- .../userHistory.service.spec.ts} | 6 +- .../userHistory.service.ts} | 2 +- src/assets/darkBackground.webp | Bin 0 -> 712 bytes src/assets/lightBackground.jpg | Bin 0 -> 5902 bytes src/assets/logo.png | Bin 0 -> 5798 bytes src/assets/profil.png | Bin 0 -> 18287 bytes src/assets/pub/Youtube.png | Bin 7858 -> 0 bytes src/assets/pub/rolex_v_1.jpg | Bin 0 -> 72794 bytes src/assets/pub/rolex_v_2.png | Bin 0 -> 50514 bytes src/assets/svg.txt | 79 ----- src/polyfills.ts | 2 +- src/styles.scss | 14 +- 72 files changed, 2172 insertions(+), 529 deletions(-) create mode 100644 src/app/advertiser/bar-tags/bar-tags.component.html create mode 100644 src/app/advertiser/bar-tags/bar-tags.component.scss create mode 100644 src/app/advertiser/bar-tags/bar-tags.component.spec.ts create mode 100644 src/app/advertiser/bar-tags/bar-tags.component.ts create mode 100644 src/app/advertiser/page-advertiser/page-advertiser.component.html create mode 100644 src/app/advertiser/page-advertiser/page-advertiser.component.scss create mode 100644 src/app/advertiser/page-advertiser/page-advertiser.component.spec.ts create mode 100644 src/app/advertiser/page-advertiser/page-advertiser.component.ts create mode 100644 src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.html create mode 100644 src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.scss create mode 100644 src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.spec.ts create mode 100644 src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.ts create mode 100644 src/app/advertiser/popup-delete-ad/popup-delete-ad.component.html create mode 100644 src/app/advertiser/popup-delete-ad/popup-delete-ad.component.scss create mode 100644 src/app/advertiser/popup-delete-ad/popup-delete-ad.component.spec.ts create mode 100644 src/app/advertiser/popup-delete-ad/popup-delete-ad.component.ts create mode 100644 src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.html create mode 100644 src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.scss create mode 100644 src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.spec.ts create mode 100644 src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.ts create mode 100644 src/app/advertiser/popup-visualize-images/popup-visualize-images.component.html create mode 100644 src/app/advertiser/popup-visualize-images/popup-visualize-images.component.scss create mode 100644 src/app/advertiser/popup-visualize-images/popup-visualize-images.component.spec.ts create mode 100644 src/app/advertiser/popup-visualize-images/popup-visualize-images.component.ts rename src/app/user/{historique/page-historique/page-historique.component.html => history/page-history-user/page-history-user.component.html} (96%) rename src/app/user/{historique/page-historique/page-historique.component.scss => history/page-history-user/page-history-user.component.scss} (76%) rename src/app/user/{historique/page-historique/page-historique.component.spec.ts => history/page-history-user/page-history-user.component.spec.ts} (57%) rename src/app/user/{historique/page-historique/page-historique.component.ts => history/page-history-user/page-history-user.component.ts} (79%) delete mode 100644 src/app/user/myProfil/page-my-profil/page-my-profil.component.html delete mode 100644 src/app/user/myProfil/page-my-profil/page-my-profil.component.scss create mode 100644 src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.html create mode 100644 src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.scss rename src/app/{user => utils/components}/myProfil/page-my-profil/page-my-profil.component.spec.ts (100%) rename src/app/{user => utils/components}/myProfil/page-my-profil/page-my-profil.component.ts (79%) rename src/app/{user => utils/components}/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.html (100%) rename src/app/{user => utils/components}/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.scss (90%) rename src/app/{user => utils/components}/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.spec.ts (100%) rename src/app/{user => utils/components}/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.ts (100%) rename src/app/utils/services/{historique/historique.service.spec.ts => userHistory/userHistory.service.spec.ts} (61%) rename src/app/utils/services/{historique/historique.service.ts => userHistory/userHistory.service.ts} (97%) create mode 100644 src/assets/darkBackground.webp create mode 100644 src/assets/lightBackground.jpg create mode 100644 src/assets/logo.png create mode 100644 src/assets/profil.png delete mode 100644 src/assets/pub/Youtube.png create mode 100644 src/assets/pub/rolex_v_1.jpg create mode 100644 src/assets/pub/rolex_v_2.png delete mode 100644 src/assets/svg.txt diff --git a/README.md b/README.md index 65fd581..52580ac 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/package-lock.json b/package-lock.json index 1194f38..0a3dd77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 5c79e2c..6272572 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/advertiser/bar-tags/bar-tags.component.html b/src/app/advertiser/bar-tags/bar-tags.component.html new file mode 100644 index 0000000..f8da61e --- /dev/null +++ b/src/app/advertiser/bar-tags/bar-tags.component.html @@ -0,0 +1,43 @@ + + + + + Tags + + + + + + + {{tag}} + + + + + + + + + + + + {{tag}} + + + + + + diff --git a/src/app/advertiser/bar-tags/bar-tags.component.scss b/src/app/advertiser/bar-tags/bar-tags.component.scss new file mode 100644 index 0000000..c7acb4b --- /dev/null +++ b/src/app/advertiser/bar-tags/bar-tags.component.scss @@ -0,0 +1,3 @@ +mat-form-field { + width: 100%; +} diff --git a/src/app/advertiser/bar-tags/bar-tags.component.spec.ts b/src/app/advertiser/bar-tags/bar-tags.component.spec.ts new file mode 100644 index 0000000..410f668 --- /dev/null +++ b/src/app/advertiser/bar-tags/bar-tags.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ BarTagsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BarTagsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/advertiser/bar-tags/bar-tags.component.ts b/src/app/advertiser/bar-tags/bar-tags.component.ts new file mode 100644 index 0000000..c76b9ba --- /dev/null +++ b/src/app/advertiser/bar-tags/bar-tags.component.ts @@ -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; + @Input() myTags: string[] = []; + allTags: string[] = []; + @Output() eventEmitter = new EventEmitter(); + @ViewChild('tagInput') tagInput: ElementRef; + + + 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)); + } + +} diff --git a/src/app/advertiser/page-advertiser/page-advertiser.component.html b/src/app/advertiser/page-advertiser/page-advertiser.component.html new file mode 100644 index 0000000..58794ce --- /dev/null +++ b/src/app/advertiser/page-advertiser/page-advertiser.component.html @@ -0,0 +1,126 @@ +
+
+ + +

+ + + +
+ +
+
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Titre + {{advert.title}} + Tags + + {{tag}}, + {{tag}} + + Commentaire + {{advert.comment}} + Date de création + {{ advert.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }} + Dernière modification + {{ advert.lastUpdate | date:'dd/LL/YYYY à HH:mm:ss' }} + Vues + {{advert.views}} + Visible + check + + Modifier + + Supprimer + + Visualisation + +
Aucune vidéo ne correspond au filtre: "{{input.value}}"
+

+ +
+
diff --git a/src/app/advertiser/page-advertiser/page-advertiser.component.scss b/src/app/advertiser/page-advertiser/page-advertiser.component.scss new file mode 100644 index 0000000..c42d6dd --- /dev/null +++ b/src/app/advertiser/page-advertiser/page-advertiser.component.scss @@ -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; +} diff --git a/src/app/advertiser/page-advertiser/page-advertiser.component.spec.ts b/src/app/advertiser/page-advertiser/page-advertiser.component.spec.ts new file mode 100644 index 0000000..a98064f --- /dev/null +++ b/src/app/advertiser/page-advertiser/page-advertiser.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PageAdvertiserComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PageAdvertiserComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/advertiser/page-advertiser/page-advertiser.component.ts b/src/app/advertiser/page-advertiser/page-advertiser.component.ts new file mode 100644 index 0000000..dc83d59 --- /dev/null +++ b/src/app/advertiser/page-advertiser/page-advertiser.component.ts @@ -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(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); + }); + } + +} diff --git a/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.html b/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.html new file mode 100644 index 0000000..3d4fc66 --- /dev/null +++ b/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.html @@ -0,0 +1,44 @@ +
+ + +

{{title}}

+ + + + + + + + Titre annonce + + + + +
+ + + + + + + + + + Commentaire + +
+ + + Visible + + + + + + + + + + + +
diff --git a/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.scss b/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.scss new file mode 100644 index 0000000..f7796bd --- /dev/null +++ b/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.scss @@ -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; +} diff --git a/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.spec.ts b/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.spec.ts new file mode 100644 index 0000000..ba74952 --- /dev/null +++ b/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PopupAddOrUpdateAdComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PopupAddOrUpdateAdComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.ts b/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.ts new file mode 100644 index 0000000..5c81ce0 --- /dev/null +++ b/src/app/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.ts @@ -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, + @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; + } + +} diff --git a/src/app/advertiser/popup-delete-ad/popup-delete-ad.component.html b/src/app/advertiser/popup-delete-ad/popup-delete-ad.component.html new file mode 100644 index 0000000..d92e686 --- /dev/null +++ b/src/app/advertiser/popup-delete-ad/popup-delete-ad.component.html @@ -0,0 +1,8 @@ + + Êtes-vous sûr de vouloir supprimer l'annonce {{advert.title}} ? + + + + + + diff --git a/src/app/advertiser/popup-delete-ad/popup-delete-ad.component.scss b/src/app/advertiser/popup-delete-ad/popup-delete-ad.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/advertiser/popup-delete-ad/popup-delete-ad.component.spec.ts b/src/app/advertiser/popup-delete-ad/popup-delete-ad.component.spec.ts new file mode 100644 index 0000000..ae1fb1b --- /dev/null +++ b/src/app/advertiser/popup-delete-ad/popup-delete-ad.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PopupDeleteAdComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PopupDeleteAdComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/advertiser/popup-delete-ad/popup-delete-ad.component.ts b/src/app/advertiser/popup-delete-ad/popup-delete-ad.component.ts new file mode 100644 index 0000000..0dca352 --- /dev/null +++ b/src/app/advertiser/popup-delete-ad/popup-delete-ad.component.ts @@ -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, + @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); + } + }); + */ + } + +} diff --git a/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.html b/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.html new file mode 100644 index 0000000..9f9c5ef --- /dev/null +++ b/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.html @@ -0,0 +1,73 @@ +
+ +

{{advert.title}}

+ + + + + + + +
+
Images:
+
+ +
+
+ + +
+
Tags:
+
+
• {{tag}}
+
+
+ + +
+
Commentaire:
+
{{advert.comment}}
+
+ + +
+ +
{{advert.views}}
+
+ + +
+ +
+ {{ advert.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }} +
+
+ + +
+ +
+ {{ advert.lastUpdate | date:'dd/LL/YYYY à HH:mm:ss' }} +
+
+ + +
+ +
+ checked + close +
+
+ + + + + + + + + +
diff --git a/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.scss b/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.scss new file mode 100644 index 0000000..3e00dee --- /dev/null +++ b/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.scss @@ -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; +} diff --git a/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.spec.ts b/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.spec.ts new file mode 100644 index 0000000..b65b924 --- /dev/null +++ b/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PopupVisualizeAdComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PopupVisualizeAdComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.ts b/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.ts new file mode 100644 index 0000000..fb2183d --- /dev/null +++ b/src/app/advertiser/popup-visualize-ad/popup-visualize-ad.component.ts @@ -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, + @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 => {}); + } + +} diff --git a/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.html b/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.html new file mode 100644 index 0000000..c860766 --- /dev/null +++ b/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.html @@ -0,0 +1,13 @@ +
+

+ +
+ +
+ +
diff --git a/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.scss b/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.scss new file mode 100644 index 0000000..eb60d48 --- /dev/null +++ b/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.scss @@ -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; +} diff --git a/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.spec.ts b/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.spec.ts new file mode 100644 index 0000000..3eb7462 --- /dev/null +++ b/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PopupVisualizeImagesComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PopupVisualizeImagesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.ts b/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.ts new file mode 100644 index 0000000..a019371 --- /dev/null +++ b/src/app/advertiser/popup-visualize-images/popup-visualize-images.component.ts @@ -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, + @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); + } + + +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c5099e2..23ea54c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -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 } + */ ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6197337..76d3331 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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] diff --git a/src/app/pourLes3Roles/page-connexion/page-connexion.component.html b/src/app/pourLes3Roles/page-connexion/page-connexion.component.html index 90cd12c..f37c342 100644 --- a/src/app/pourLes3Roles/page-connexion/page-connexion.component.html +++ b/src/app/pourLes3Roles/page-connexion/page-connexion.component.html @@ -1,41 +1,40 @@
+
- -
-

Connexion

+ + + +
+
+ + +
+

StreamNotFound

+ User Icon +
+ + +
+ + + +
+ {{errorMessage}} +
+ +
+ + + - -
-
Email:  
-
-
- -
-
Mot de passe:  
-
- -
-
- -
-
- -
-
- -
-
- - -
diff --git a/src/app/pourLes3Roles/page-connexion/page-connexion.component.scss b/src/app/pourLes3Roles/page-connexion/page-connexion.component.scss index ce68eec..1f1a5ee 100644 --- a/src/app/pourLes3Roles/page-connexion/page-connexion.component.scss +++ b/src/app/pourLes3Roles/page-connexion/page-connexion.component.scss @@ -1,64 +1,276 @@ -.myContainer { - max-width: 100vw; +html { + background-color: #56baed; +} + +body { + font-family: "Poppins", sans-serif; height: 100vh; - overflow-x: hidden; - font-size: x-large; } -h1 { +a { + color: #5E89FF; + display:inline-block; + text-decoration: none; + font-weight: 400; +} + +h2 { 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; + font-size: 16px; + font-weight: 600; + text-transform: uppercase; + display:inline-block; + margin: 40px 8px 10px 8px; + color: #cccccc; } -.row { - margin: 25px 0px 25px 0px +/* STRUCTURE */ + +.wrapper { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + width: 100%; + min-height: 100%; + padding: 20px; } -.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; +#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; } -input { + + +/* 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; +} + +/* 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%; } -button { - width: 100%; - margin-right: 0px; -} - -.col-6 { - //text-align: center; -} - -.lien { - text-decoration: underline; +h1{ color: black; } + +/* OTHERS */ + +*:focus { + outline: none; +} + +#icon { + width:30%; +} diff --git a/src/app/pourLes3Roles/page-connexion/page-connexion.component.ts b/src/app/pourLes3Roles/page-connexion/page-connexion.component.ts index 6784a98..e9bae9e 100644 --- a/src/app/pourLes3Roles/page-connexion/page-connexion.component.ts +++ b/src/app/pourLes3Roles/page-connexion/page-connexion.component.ts @@ -1,9 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {MessageService} from "../../utils/services/message/message.service"; 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, @@ -24,22 +28,48 @@ export class PageConnexionComponent implements OnInit onSeConnecter(): void { - let data = { - "email": this.email, - "password": this.password - }; - this.messageService - .sendMessage('connexion', data) - .subscribe( retour => this.maCallback(retour)) + this.checkError(); + + if(!this.hasError) + { + let data = { + "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) + console.log(retour.data) + if(retour.status === "error") { + this.errorMessage = retour.data.reason; + this.hasError = true; + } else { - console.log(retour.data) //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; + } + } + } diff --git a/src/app/pourLes3Roles/register/page-register/page-register.component.html b/src/app/pourLes3Roles/register/page-register/page-register.component.html index 92b795b..4059743 100644 --- a/src/app/pourLes3Roles/register/page-register/page-register.component.html +++ b/src/app/pourLes3Roles/register/page-register/page-register.component.html @@ -1,53 +1,72 @@
+
- -
-

Inscription

+ + + +
+
+ + +
+ User Icon +
+ + +
+ + + Login + + +
+ + + + Email + + +
+ + + + Type de compte + + Utilisateur + Annonceur + + +
+ + + + Mot de passe + + +
+ + + + Confirmation mot de passe + + +
+ + +
+ {{errorMessage}} +
+ + + +
- -
-
Pseudo:  
-
-
- -
-
Email:  
-
- -
-
- -
-
Mot de passe:  
-
- -
-
- - -
-
Confirmer le mot de passe:  
-
- -
-
- - -
- -
- - -
- {{errorMessage}} -
-
diff --git a/src/app/pourLes3Roles/register/page-register/page-register.component.scss b/src/app/pourLes3Roles/register/page-register/page-register.component.scss index ff2b7f2..4d01f39 100644 --- a/src/app/pourLes3Roles/register/page-register/page-register.component.scss +++ b/src/app/pourLes3Roles/register/page-register/page-register.component.scss @@ -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; } diff --git a/src/app/pourLes3Roles/register/page-register/page-register.component.ts b/src/app/pourLes3Roles/register/page-register/page-register.component.ts index 228ca02..86ce8f4 100644 --- a/src/app/pourLes3Roles/register/page-register/page-register.component.ts +++ b/src/app/pourLes3Roles/register/page-register/page-register.component.ts @@ -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' )); } } + } diff --git a/src/app/user/historique/page-historique/page-historique.component.html b/src/app/user/history/page-history-user/page-history-user.component.html similarity index 96% rename from src/app/user/historique/page-historique/page-historique.component.html rename to src/app/user/history/page-history-user/page-history-user.component.html index 82c20f8..9ff1471 100644 --- a/src/app/user/historique/page-historique/page-historique.component.html +++ b/src/app/user/history/page-history-user/page-history-user.component.html @@ -49,9 +49,9 @@ - - - Effacer + + + Action -
-
- - -
-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-
-
- - -
- -
- - -
- {{errorMessage}} -
- -
-
-
diff --git a/src/app/user/myProfil/page-my-profil/page-my-profil.component.scss b/src/app/user/myProfil/page-my-profil/page-my-profil.component.scss deleted file mode 100644 index fd1031d..0000000 --- a/src/app/user/myProfil/page-my-profil/page-my-profil.component.scss +++ /dev/null @@ -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; -} diff --git a/src/app/user/search/page-search/page-search.component.ts b/src/app/user/search/page-search/page-search.component.ts index bd41fcb..234bf18 100644 --- a/src/app/user/search/page-search/page-search.component.ts +++ b/src/app/user/search/page-search/page-search.component.ts @@ -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 diff --git a/src/app/user/search/video-cell/video-cell.component.ts b/src/app/user/search/video-cell/video-cell.component.ts index 6ad1165..77892a3 100644 --- a/src/app/user/search/video-cell/video-cell.component.ts +++ b/src/app/user/search/video-cell/video-cell.component.ts @@ -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 { diff --git a/src/app/user/search/video-grid/video-grid.component.ts b/src/app/user/search/video-grid/video-grid.component.ts index c557026..929d45c 100644 --- a/src/app/user/search/video-grid/video-grid.component.ts +++ b/src/app/user/search/video-grid/video-grid.component.ts @@ -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 diff --git a/src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.html b/src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.html new file mode 100644 index 0000000..40160e5 --- /dev/null +++ b/src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.html @@ -0,0 +1,74 @@ +
+
+ +

+ +
+ + +
+ +
+ +
+
+ + + + Pseudo + + +
+ + + + Email + + +
+ + + + Type de compte + + + + +
+ + + Modifier mot de passe: + +
+ + +
+ + + Nouveau mot de passe + + +
+ + + Confirmation nouveau mot de passe + + +
+
+ + +
+ +
+ + +
+ {{errorMessage}} +
+ +
+
+
diff --git a/src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.scss b/src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.scss new file mode 100644 index 0000000..83f3d1a --- /dev/null +++ b/src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.scss @@ -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; +} diff --git a/src/app/user/myProfil/page-my-profil/page-my-profil.component.spec.ts b/src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.spec.ts similarity index 100% rename from src/app/user/myProfil/page-my-profil/page-my-profil.component.spec.ts rename to src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.spec.ts diff --git a/src/app/user/myProfil/page-my-profil/page-my-profil.component.ts b/src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.ts similarity index 79% rename from src/app/user/myProfil/page-my-profil/page-my-profil.component.ts rename to src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.ts index a6b630e..aa11f16 100644 --- a/src/app/user/myProfil/page-my-profil/page-my-profil.component.ts +++ b/src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.ts @@ -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; diff --git a/src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.html b/src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.html similarity index 100% rename from src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.html rename to src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.html diff --git a/src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.scss b/src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.scss similarity index 90% rename from src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.scss rename to src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.scss index bb89bc1..e7e7f82 100644 --- a/src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.scss +++ b/src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.scss @@ -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; } diff --git a/src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.spec.ts b/src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.spec.ts similarity index 100% rename from src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.spec.ts rename to src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.spec.ts diff --git a/src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.ts b/src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.ts similarity index 100% rename from src/app/user/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.ts rename to src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.ts diff --git a/src/app/utils/components/nav-bar/nav-bar.component.html b/src/app/utils/components/nav-bar/nav-bar.component.html index 8b7f90a..b058b15 100644 --- a/src/app/utils/components/nav-bar/nav-bar.component.html +++ b/src/app/utils/components/nav-bar/nav-bar.component.html @@ -1,8 +1,36 @@ - -
+ +
+ +
+ + + + + + +