From 1e5b9bd49c80ab3a5defb96320afd42e9d036582 Mon Sep 17 00:00:00 2001 From: MiharyR Date: Wed, 24 Nov 2021 12:07:31 +0100 Subject: [PATCH] continuation de la partie advertiser --- package.json | 28 ++- .../page-ad-list-admin.component.html | 6 +- .../page-ad-list-admin.component.ts | 50 ++-- .../navbar-admin/navbar-admin.component.html | 0 .../navbar-admin/navbar-admin.component.scss | 0 .../navbar-admin.component.spec.ts | 0 .../navbar-admin/navbar-admin.component.ts | 0 .../page-ad-list-advertiser.component.html | 4 +- .../page-ad-list-advertiser.component.ts | 51 ++-- .../popup-add-or-update-ad.component.ts | 2 +- .../pages-popularity.component.html | 91 +++++++ .../pages-popularity.component.scss | 60 +++++ .../pages-popularity.component.spec.ts | 25 ++ .../pages-popularity.component.ts | 234 ++++++++++++++++++ .../navbar-advertiser.component.html | 4 +- .../navbar-advertiser.component.scss | 30 +-- .../navbar-advertiser.component.spec.ts | 0 .../navbar-advertiser.component.ts | 0 src/app/app-routing.module.ts | 4 +- src/app/app.component.scss | 17 ++ src/app/app.module.ts | 8 +- .../video-list/video-list.component.ts | 2 +- .../page-watching-video.component.ts | 2 +- src/app/utils/interfaces/advert.ts | 23 +- src/app/utils/interfaces/video.ts | 4 +- .../fictitious-adverts.service.ts | 60 ++++- .../fictitious-videos.service.ts | 21 +- src/styles.scss | 21 ++ 28 files changed, 656 insertions(+), 91 deletions(-) rename src/app/admin/{ => utils/components}/navbar-admin/navbar-admin.component.html (100%) rename src/app/admin/{ => utils/components}/navbar-admin/navbar-admin.component.scss (100%) rename src/app/admin/{ => utils/components}/navbar-admin/navbar-admin.component.spec.ts (100%) rename src/app/admin/{ => utils/components}/navbar-admin/navbar-admin.component.ts (100%) create mode 100644 src/app/advertiser/pages-popularity/pages-popularity.component.html create mode 100644 src/app/advertiser/pages-popularity/pages-popularity.component.scss create mode 100644 src/app/advertiser/pages-popularity/pages-popularity.component.spec.ts create mode 100644 src/app/advertiser/pages-popularity/pages-popularity.component.ts rename src/app/advertiser/{ => utils/components}/navbar-advertiser/navbar-advertiser.component.html (84%) rename src/app/advertiser/{ => utils/components}/navbar-advertiser/navbar-advertiser.component.scss (100%) rename src/app/advertiser/{ => utils/components}/navbar-advertiser/navbar-advertiser.component.spec.ts (100%) rename src/app/advertiser/{ => utils/components}/navbar-advertiser/navbar-advertiser.component.ts (100%) diff --git a/package.json b/package.json index dd9a09c..baf5802 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,10 @@ "dependencies": { "@angular/animations": "^12.2.11", "@angular/cdk": "^12.2.11", + "@angular/cli": "~12.2.11", "@angular/common": "^12.2.11", "@angular/compiler": "^12.2.11", + "@angular/compiler-cli": "~12.2.11", "@angular/core": "^12.2.11", "@angular/forms": "^12.2.11", "@angular/material": "^12.2.11", @@ -24,28 +26,27 @@ "@angular/router": "^12.2.11", "@ng-bootstrap/ng-bootstrap": "^10.0.0", "angular-responsive-carousel": "^2.1.2", - "bootstrap": "^5.1.3", - "jquery": "^3.6.0", - "popper": "^1.0.1", - "rxjs": "~6.6.0", - "tslib": "^2.0.0", - "zone.js": "~0.11.3", - "@angular/cli": "~12.2.11", - "@angular/compiler-cli": "~12.2.11", - "typescript": "~4.3.5", "body-parser": "^1.19.0", + "bootstrap": "^5.1.3", + "chart.js": "^2.9.3", "cookie-parser": "^1.4.5", "cors": "^2.8.5", "dotenv": "^10.0.0", "express": "^4.17.1", + "jquery": "^3.6.0", "jsonwebtoken": "^8.5.1", - "mongoose": "^6.0.12" + "mongoose": "^6.0.12", + "ng2-charts": "^2.2.3", + "popper": "^1.0.1", + "rxjs": "~6.6.0", + "tslib": "^2.0.0", + "typescript": "~4.3.5", + "zone.js": "~0.11.3" }, "devDependencies": { + "@angular-devkit/build-angular": "~12.2.11", "@angular/cli": "~12.2.11", "@angular/compiler-cli": "~12.2.11", - "typescript": "~4.3.5", - "@angular-devkit/build-angular": "~12.2.11", "@angular/localize": "^12.2.11", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", @@ -59,6 +60,7 @@ "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", - "tslint": "~6.1.0" + "tslint": "~6.1.0", + "typescript": "~4.3.5" } } diff --git a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html index 264088f..a5fef57 100644 --- a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html +++ b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html @@ -120,11 +120,11 @@ - - + + Vues - {{advert.views}} + {{advert.countViews}} diff --git a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts index d8c950f..3b15694 100644 --- a/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts +++ b/src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts @@ -5,8 +5,7 @@ import {ThemeService} from "../../../utils/services/theme/theme.service"; import {MatDialog} from "@angular/material/dialog"; import {MatSnackBar} from "@angular/material/snack-bar"; import {MatTableDataSource} from "@angular/material/table"; -import {Advert} from "../../../utils/interfaces/advert"; -import {PopupVisualizeAdAdminComponent} from "../popup-visualize-ad-admin/popup-visualize-ad-admin.component"; +import {Advert, AdvertWithCountViews} from "../../../utils/interfaces/advert"; import {PopupDeleteAdAdminComponent} from "../popup-delete-ad-admin/popup-delete-ad-admin.component"; import {PopupVisualizeImagesAdminComponent} from "../popup-visualize-images-admin/popup-visualize-images-admin.component"; import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service"; @@ -22,8 +21,8 @@ import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fi }) export class PageAdListAdminComponent implements AfterViewInit { - tabAdvert: Advert[]; - displayedColumns: string[] = [ 'title', 'advertiser', 'interests', 'createdAt', 'updatedAt', 'views', 'isVisible', 'actions' ]; + tabAdvertWithCountViews: AdvertWithCountViews[] = []; + displayedColumns: string[] = [ 'title', 'advertiser', 'interests', 'createdAt', 'updatedAt', 'countViews', 'isVisible', 'actions' ]; dataSource ; @ViewChild(MatSort) sort: MatSort; @ViewChild(MatPaginator) paginator: MatPaginator; @@ -46,9 +45,10 @@ export class PageAdListAdminComponent implements AfterViewInit ngAfterViewInit(): void { // --- FAUX CODE --- - this.tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8); + const tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8); this.allInterests = this.fictitiousUtilsService.getTags(); + for(let advert of tabAdvert) this.tabAdvertWithCountViews.push(this.advertToAdvertWithCountViews(advert)); this.dataSource = new MatTableDataSource(); this.onFilter(); } @@ -61,7 +61,7 @@ export class PageAdListAdminComponent implements AfterViewInit } - onVisualizeImages(advert: Advert) + onVisualizeImages(advert: AdvertWithCountViews) { const config = { width: '30%', @@ -79,20 +79,7 @@ export class PageAdListAdminComponent implements AfterViewInit } - onVisualizeInfo(advert: Advert): void - { - const config = { - width: '50%', - data: { advert: advert } - }; - this.dialog - .open(PopupVisualizeAdAdminComponent, config) - .afterClosed() - .subscribe(retour => {}); - } - - - onDelete(advert: Advert): void + onDelete(advert: AdvertWithCountViews): void { const config = { data: { advert: advert } @@ -121,9 +108,8 @@ export class PageAdListAdminComponent implements AfterViewInit onFilter(): void { - console.log("b:" + this.formControlInterests.value); this.dataSource.data = []; - for(let advert of this.tabAdvert) + for(let advert of this.tabAdvertWithCountViews) { let valide: boolean = true; @@ -173,4 +159,24 @@ export class PageAdListAdminComponent implements AfterViewInit this.endDate = new Date(event); } + + advertToAdvertWithCountViews(advert: Advert): AdvertWithCountViews + { + return { + _id: advert._id, + userId: advert.userId, + title: advert.title, + advertiser: advert.advertiser, + images: advert.images, + interests: advert.interests, + comment: advert.comment, + views: advert.views, + countViews: advert.views.length, + isVisible: advert.isVisible, + isActive: advert.isActive, + createdAt: advert.createdAt, + updatedAt: advert.updatedAt, + } + } + } diff --git a/src/app/admin/navbar-admin/navbar-admin.component.html b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.html similarity index 100% rename from src/app/admin/navbar-admin/navbar-admin.component.html rename to src/app/admin/utils/components/navbar-admin/navbar-admin.component.html diff --git a/src/app/admin/navbar-admin/navbar-admin.component.scss b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.scss similarity index 100% rename from src/app/admin/navbar-admin/navbar-admin.component.scss rename to src/app/admin/utils/components/navbar-admin/navbar-admin.component.scss diff --git a/src/app/admin/navbar-admin/navbar-admin.component.spec.ts b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.spec.ts similarity index 100% rename from src/app/admin/navbar-admin/navbar-admin.component.spec.ts rename to src/app/admin/utils/components/navbar-admin/navbar-admin.component.spec.ts diff --git a/src/app/admin/navbar-admin/navbar-admin.component.ts b/src/app/admin/utils/components/navbar-admin/navbar-admin.component.ts similarity index 100% rename from src/app/admin/navbar-admin/navbar-admin.component.ts rename to src/app/admin/utils/components/navbar-admin/navbar-admin.component.ts diff --git a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html index 6b4a16e..78dd263 100644 --- a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html +++ b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html @@ -145,10 +145,10 @@ - + Vues - {{advert.views}} + {{advert.countViews}} diff --git a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts index b3b6100..b91408f 100644 --- a/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts +++ b/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts @@ -2,12 +2,11 @@ import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; import {MatSort} from "@angular/material/sort"; import {ThemeService} from "../../../utils/services/theme/theme.service"; import {MatTableDataSource} from "@angular/material/table"; -import {Advert} from "../../../utils/interfaces/advert"; +import {Advert, AdvertWithCountViews} from "../../../utils/interfaces/advert"; import {MatDialog} from "@angular/material/dialog"; import {PopupAddOrUpdateAdComponent} from "../popup-add-or-update-ad/popup-add-or-update-ad.component"; import {MatSnackBar} from "@angular/material/snack-bar"; import {PopupDeleteAdAdvertiserComponent} from "../popup-delete-ad-advertiser/popup-delete-ad-advertiser.component"; -import {PopupVisualizeAdAdvertiserComponent} from "../popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component"; import {MatPaginator} from "@angular/material/paginator"; import {PopupVisualizeImagesAdvertiserComponent} from "../popup-visualize-images-advertiser/popup-visualize-images-advertiser.component"; import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service"; @@ -23,8 +22,8 @@ import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fi }) export class PageAdListAdvertiserComponent implements AfterViewInit { - displayedColumns: string[] = [ 'isVisible', 'title', 'interests', 'createdAt', 'updatedAt', 'views', 'actions' ]; - tabAdvert: Advert[] = []; + displayedColumns: string[] = [ 'isVisible', 'title', 'interests', 'createdAt', 'updatedAt', 'countViews', 'actions' ]; + tabAdvertWithCountViews: AdvertWithCountViews[] = []; dataSource ; @ViewChild(MatSort) sort: MatSort; @ViewChild(MatPaginator) paginator: MatPaginator; @@ -47,9 +46,10 @@ export class PageAdListAdvertiserComponent implements AfterViewInit ngAfterViewInit(): void { // --- FAUX CODE --- - this.tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8); + const tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8); this.allInterests = this.fictitiousUtilsService.getTags(); + for(let advert of tabAdvert) this.tabAdvertWithCountViews.push(this.advertToAdvertWithCountViews(advert)); this.dataSource = new MatTableDataSource(); this.onFilter(); } @@ -62,7 +62,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit } - onVisualizeImages(advert: Advert) + onVisualizeImages(advert: AdvertWithCountViews) { const config = { width: '30%', @@ -80,19 +80,6 @@ export class PageAdListAdvertiserComponent implements AfterViewInit } - onVisualize(advert: Advert): void - { - const config = { - width: '50%', - data: { advert: advert } - }; - this.dialog - .open(PopupVisualizeAdAdvertiserComponent, config) - .afterClosed() - .subscribe(retour => {}); - } - - onAdd(): void { const config = { @@ -120,7 +107,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit } - onUpdate(advertToUpdate: Advert): void + onUpdate(advertToUpdate: AdvertWithCountViews): void { const config = { width: '75%', @@ -148,7 +135,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit } - onDelete(advert: Advert): void + onDelete(advert: AdvertWithCountViews): void { const config = { data: { advert: advert } @@ -179,7 +166,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit { console.log("b:" + this.formControlInterests.value); this.dataSource.data = []; - for(let advert of this.tabAdvert) + for(let advert of this.tabAdvertWithCountViews) { let valide: boolean = true; @@ -235,4 +222,24 @@ export class PageAdListAdvertiserComponent implements AfterViewInit // il faut envoyer la négation de user.isActive } + + advertToAdvertWithCountViews(advert: Advert): AdvertWithCountViews + { + return { + _id: advert._id, + userId: advert.userId, + title: advert.title, + advertiser: advert.advertiser, + images: advert.images, + interests: advert.interests, + comment: advert.comment, + views: advert.views, + countViews: advert.views.length, + isVisible: advert.isVisible, + isActive: advert.isActive, + createdAt: advert.createdAt, + updatedAt: advert.updatedAt, + } + } + } diff --git a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts index 5c41b0e..4b23a23 100644 --- a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts +++ b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts @@ -13,7 +13,7 @@ const ADVERT_VIDE: Advert = { images: [], interests: [], comment: "", - views: 0, + views: [], isVisible: true, isActive: true, createdAt: new Date(), diff --git a/src/app/advertiser/pages-popularity/pages-popularity.component.html b/src/app/advertiser/pages-popularity/pages-popularity.component.html new file mode 100644 index 0000000..1f59267 --- /dev/null +++ b/src/app/advertiser/pages-popularity/pages-popularity.component.html @@ -0,0 +1,91 @@ +
+
+ + + + + + + + +
+ +
Filtre
+ +
+ +
+ +

+ +
+ +
+ +
+ + + + +
+ + +
+ + +
+
+ + + + + + + + + début + + +   -   + + + + fin + + +   -   + + + + pas d'affichage + + +   -   + + + + unité du pas d'affichage + + jour + semaine + mois + + + + + + + + {{coupleNameViews.name}}, + + + {{coupleNameViews.name}} + + + diff --git a/src/app/advertiser/pages-popularity/pages-popularity.component.scss b/src/app/advertiser/pages-popularity/pages-popularity.component.scss new file mode 100644 index 0000000..b6a7b99 --- /dev/null +++ b/src/app/advertiser/pages-popularity/pages-popularity.component.scss @@ -0,0 +1,60 @@ +.myContainer { + font-size: small; + max-width: 100vw; + height: 100vh; + overflow-x: hidden; + overflow-y: scroll; +} + +input { + font-size: small; + width: 140px; +} + +.filtersContainer { + background-color: white; + width: 60%; + margin: 50px 50px 50px 50px; + padding: 20px 20px 20px 20px; +} + +.chartContainer { + background-color: white; + border: solid 1px black; + padding: 10px 10px 10px 10px; + margin: 50px 50px 50px 50px; +} + + +// --------------------------------------------- +// periode + +.periode { + padding: 10px 10px 0px 10px; +} + +.periode .titleContainer { + text-align: right; + border-right: solid 1px #dcdcdc; + font-weight: bold; +} + + +// ------------------------------------------------------------------------- + + +// aura +::ng-deep .mat-checkbox-ripple .mat-ripple-element { + background-color: grey !important; +} + +// contenu coche +::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background { + background-color: black !important; +} + +// indeterminate +::ng-deep .mat-checkbox .mat-checkbox-frame { + border: solid 1px black !important; + background-color: white !important; +} diff --git a/src/app/advertiser/pages-popularity/pages-popularity.component.spec.ts b/src/app/advertiser/pages-popularity/pages-popularity.component.spec.ts new file mode 100644 index 0000000..f9ff236 --- /dev/null +++ b/src/app/advertiser/pages-popularity/pages-popularity.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PagesPopularityComponent } from './pages-popularity.component'; + +describe('SubjectsPopularityComponent', () => { + let component: PagesPopularityComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PagesPopularityComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PagesPopularityComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/advertiser/pages-popularity/pages-popularity.component.ts b/src/app/advertiser/pages-popularity/pages-popularity.component.ts new file mode 100644 index 0000000..76d82fd --- /dev/null +++ b/src/app/advertiser/pages-popularity/pages-popularity.component.ts @@ -0,0 +1,234 @@ +import { Component, OnInit } from '@angular/core'; +import {FormControl} from "@angular/forms"; +import {ChartDataSets} from "chart.js"; +import {Label} from "ng2-charts"; +import { Router} from "@angular/router"; +import {FictitiousAdvertsService} from "../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service"; +import {FictitiousVideosService} from "../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service"; +import {ThemeService} from "../../utils/services/theme/theme.service"; + + + +interface CoupleNameViews { + name: string, + views: Date[], +} + + + +@Component({ + selector: 'app-subjects-popularity', + templateUrl: './pages-popularity.component.html', + styleUrls: ['./pages-popularity.component.scss'] +}) +export class PagesPopularityComponent implements OnInit +{ + formControl: FormControl; + allCoupleNameViews: CoupleNameViews[] = []; + + startDate: Date = null; + endDate: Date = null; + step: number = 1; + stepUnity: string = "jour" ; + + oneDay: number = 24*60*60*1000; + oneWeek: number = 7*24*60*60*1000; + + lineChartData: ChartDataSets[] = []; + lineChartLabels: Label[] = []; + chartOptions: any = { + responsive: true, + scales: { + yAxes: [{ display: true, scaleLabel: { display: true, labelString: "vues" } }], + xAxes: [{ scaleLabel: { display: true, labelString: "temps" } }], + } + }; + + + constructor( private router: Router, + public themeService: ThemeService, + private fictitiousAdvertsService: FictitiousAdvertsService, + private fictitiousVideosService: FictitiousVideosService ) {} + + + ngOnInit(): void + { + if(this.router.url.includes("ads")) this.ngOnInitAds(); + else if(this.router.url.includes("subjects")) this.ngOnInitSubjects(); + this.formControl = new FormControl(this.allCoupleNameViews); + this.onApplyFilter(); + } + + + // Sera excuté si on est sur la page 'adsPopularity' + // Remplie l'attribut 'allCoupleNameViews' + ngOnInitAds(): void + { + const allAdverts = this.fictitiousAdvertsService.get_TAB_ADVERT(); + for(let advert of allAdverts) + { + let couple = {name: advert.title, views: advert.views } + this.allCoupleNameViews.push(couple); + } + } + + + // Sera excuté si on est sur la page 'subjectsPopularity' + // Remplie l'attribut 'allCoupleNameViews' + ngOnInitSubjects(): void + { + const allVideos = this.fictitiousVideosService.get_TAB_VIDEO(); + let myMap: Map = new Map(); + + for(let video of allVideos) + { + const key = video.interest; + if(!myMap.has(key)) myMap.set(key, video.watchedDates); + else { + let tabDate = myMap.get(key); + for(let date0 of video.watchedDates) tabDate = this.insertInOrder(tabDate, date0); + myMap.set(key, tabDate); + } + } + + for(const [key, value] of myMap.entries()) + { + let couple = {name: key, views: value } + this.allCoupleNameViews.push(couple); + } + } + + + // Applique le filtre + onApplyFilter(): void + { + // --- initialisation --- + this.lineChartData = []; + this.lineChartLabels = []; + + if(this.step <= 0) this.step = 0; + if(this.endDate === null) this.endDate = new Date(); + if(this.startDate === null) this.startDate = new Date(this.endDate.getTime() - this.oneWeek); // date d'il y a une semaine + + const startTime = this.startDate.getTime(); + const endTime = this.endDate.getTime(); + + + // --- remplissage de 'lineChartLabels' --- + let dataWithZeros = []; + let time = startTime; + const intervals = []; + while(time <= endTime) + { + dataWithZeros.push(0); + this.lineChartLabels.push(this.getLabel(new Date(time))); + intervals.push(time); + time = this.addStep(time); + } + intervals.push(time); + + + // --- remplissage de 'lineChartLabels' --- + for(let coupleNameViews of this.formControl.value) + { + let data = dataWithZeros.slice(); + let label = coupleNameViews.name; + let index = 0; + + for(let date0 of coupleNameViews.views) + { + const time0 = date0.getTime(); + + if(time0 > endTime) break; + + if((startTime <= time0) && (time0 <= endTime)) + { + while((index < intervals.length) && (time0 >= intervals[index])) index += 1; + index = index - 1; + data[index] += 1; + } + } + + this.lineChartData.push({"data": data.slice(), "label": label}); + } + } + + + onNewStartDate(event): void { + this.startDate = new Date(event); + } + + + onNewEndDate(event): void { + this.endDate = new Date(event); + } + + + // Renvoie le bon label pour le graph + getLabel(date0: Date): string + { + if((this.stepUnity === 'jour') && (this.step === 1)) + { + return date0.toLocaleDateString(); + } + else { + const time2 = this.addStep(date0.getTime()) - this.oneDay; + let date2 = new Date(time2); + return date0.toLocaleDateString() + " à " + date2.toLocaleDateString(); + } + } + + + // Ajoute le bon pas à la date 'new Date(time)' + addStep(time: number): number + { + let newDate; + + if(this.stepUnity === 'jour') { + newDate = new Date(time + this.step*this.oneDay); + } + else if(this.stepUnity === 'semaine') { + newDate = new Date(time + this.step*this.oneWeek); + } + else + { + const oldDate = new Date(time); + + let newMonth = oldDate.getMonth() + this.step; + const newYear = oldDate.getFullYear() + (newMonth / 12); + newMonth = newMonth % 12; + const day = this.startDate.getDate(); + + if((newMonth === 1) && ([29, 30, 31].includes(day))) { // si fevrier et si jour n'existe pas + newDate = new Date(newYear, newMonth, 28); + } + else if((day === 31) && ([3, 5, 9, 10].includes(newMonth))) { // si 31 et mois à 30 jours + newDate = new Date(newYear, newMonth, 30); + } + else { + newDate = new Date(newYear, newMonth, day); + } + } + + const _1h = 60*60*1000; + if(newDate.getHours() === 23) return newDate.getTime() + _1h; + else if(newDate.getHours() === 1) return newDate.getTime() - _1h; + else return newDate.getTime(); + } + + + // Insere la date0 dans le tableau tabDate par ordre croissant + insertInOrder(tabDate: Date[], date0: Date): Date[] + { + let i = 0; + let n = tabDate.length; + let time0 = date0.getTime(); + + while((i tabDate[i].getTime())) i++; + if(i === n) tabDate.push(date0); + else tabDate.splice(i, 0, date0); + + return tabDate; + } + +} diff --git a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html similarity index 84% rename from src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html rename to src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html index e87170e..65a2f5d 100644 --- a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.html +++ b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.html @@ -13,10 +13,10 @@ Gestion des annonces
  • - Popularité des annonces + Popularité des annonces
  • - Popularité des domaines + Popularité des domaines
    • diff --git a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.scss b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss similarity index 100% rename from src/app/advertiser/navbar-advertiser/navbar-advertiser.component.scss rename to src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss index a78eea8..403a4af 100644 --- a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.scss +++ b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.scss @@ -23,6 +23,11 @@ } +.monLi { + margin: 0px 10px 0px 10px; +} + + // Recherche, Mes Playlists, Historique .nav-link { color: white; @@ -32,21 +37,6 @@ } -// Bonton deconnexion -.btnDeconnexion { - font-size: medium; - margin: 0px 10px 0px 10px -} -.btnDeconnexion:hover { - color: grey; -} - - -.monLi { - margin: 0px 10px 0px 10px; -} - - img { border: solid 2px white; border-radius: 50px; @@ -59,6 +49,16 @@ img:hover { } +// Bonton deconnexion +.btnDeconnexion { + font-size: medium; + margin: 0px 10px 0px 10px +} +.btnDeconnexion:hover { + color: grey; +} + + // -------------------------------------------------------------------- diff --git a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.spec.ts b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.spec.ts similarity index 100% rename from src/app/advertiser/navbar-advertiser/navbar-advertiser.component.spec.ts rename to src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.spec.ts diff --git a/src/app/advertiser/navbar-advertiser/navbar-advertiser.component.ts b/src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.ts similarity index 100% rename from src/app/advertiser/navbar-advertiser/navbar-advertiser.component.ts rename to src/app/advertiser/utils/components/navbar-advertiser/navbar-advertiser.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index db7db74..470c44c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -12,6 +12,7 @@ import {PageProfilAdminComponent} from "./admin/myProfil/page-profil-admin/page- import {PageAdListAdminComponent} from "./admin/adList/page-ad-list-admin/page-ad-list-admin.component"; import {PageUserListComponent} from "./admin/userList/page-user-list/page-user-list.component"; import {PageWatchingVideoComponent} from "./user/watching/page-watching-video/page-watching-video.component"; +import {PagesPopularityComponent} from "./advertiser/pages-popularity/pages-popularity.component"; const routes: Routes = [ @@ -27,7 +28,6 @@ const routes: Routes = [ { path: 'user/myPlaylists', component: PageMyPlaylistsComponent }, { path: 'user/history', component: PageHistoryUserComponent }, { path: 'user/myProfil', component: PageProfilUserComponent }, - { path: 'user/watching/fromSearch/:videoId/:source/:search', component: PageWatchingVideoComponent }, { path: 'user/watching/fromMyPlaylists/:videoId/:_idPlaylist', component: PageWatchingVideoComponent }, { path: 'user/watching/fromHistory/:videoId/:source', component: PageWatchingVideoComponent }, @@ -36,6 +36,8 @@ const routes: Routes = [ { path: 'advertiser', component: PageAdListAdvertiserComponent }, { path: 'advertiser/adList', component: PageAdListAdvertiserComponent }, { path: 'advertiser/myProfil', component: PageProfilAdvertiserComponent }, + { path: 'advertiser/adsPopularity', component: PagesPopularityComponent }, + { path: 'advertiser/subjectsPopularity', component: PagesPopularityComponent }, // Admin { path: 'admin', component: PageUserListComponent }, diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 14a2c1c..22a5665 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -5,3 +5,20 @@ //color: green; justify-content: center; } + + +// aura +::ng-deep .mat-checkbox-ripple .mat-ripple-element { + background-color: grey !important; +} + +// contenu coche +::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background { + background-color: black !important; +} + +// indeterminate +::ng-deep .mat-checkbox .mat-checkbox-frame { + border: solid 1px black !important; + background-color: white !important; +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index aa484b5..821018f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -46,8 +46,8 @@ import { DragAndDropComponent } from './advertiser/adList/drag-and-drop/drag-and import { DragAndDropDirective } from './utils/directives/dragAndDrop/drag-and-drop.directive'; import { PageProfilUserComponent } from './user/myProfil/page-profil-user/page-profil-user.component'; import { NavbarUserComponent } from './user/utils/components/navbar-user/navbar-user.component'; -import { NavbarAdvertiserComponent } from './advertiser/navbar-advertiser/navbar-advertiser.component'; -import { NavbarAdminComponent } from './admin/navbar-admin/navbar-admin.component'; +import { NavbarAdvertiserComponent } from './advertiser/utils/components/navbar-advertiser/navbar-advertiser.component'; +import { NavbarAdminComponent } from './admin/utils/components/navbar-admin/navbar-admin.component'; import { PageProfilAdvertiserComponent } from './advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component'; import { PopupUpdateAdvertiserComponent } from './advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component'; import { PopupUpdateUserComponent } from './user/myProfil/popup-update-user/popup-update-user.component'; @@ -70,6 +70,8 @@ import { PopupCreateUserComponent } from './admin/userList/popup-create-user/pop import { InputInterestsAdminComponent } from './admin/userList/input-interests-admin/input-interests-admin.component'; import { PageWatchingVideoComponent } from './user/watching/page-watching-video/page-watching-video.component'; import {MatDatepickerModule} from "@angular/material/datepicker"; +import { PagesPopularityComponent } from './advertiser/pages-popularity/pages-popularity.component'; +import { ChartsModule } from 'ng2-charts'; @NgModule({ @@ -119,6 +121,7 @@ import {MatDatepickerModule} from "@angular/material/datepicker"; PopupCreateUserComponent, InputInterestsAdminComponent, PageWatchingVideoComponent, + PagesPopularityComponent, ], imports: [ BrowserModule, @@ -148,6 +151,7 @@ import {MatDatepickerModule} from "@angular/material/datepicker"; MatStepperModule, MatPaginatorModule, MatDatepickerModule, + ChartsModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/user/myPlaylists/video-list/video-list.component.ts b/src/app/user/myPlaylists/video-list/video-list.component.ts index dce50ad..a98cd24 100644 --- a/src/app/user/myPlaylists/video-list/video-list.component.ts +++ b/src/app/user/myPlaylists/video-list/video-list.component.ts @@ -21,7 +21,7 @@ export class VideoListComponent implements OnChanges { @Input() playlist: PlaylistDB; videosInPlaylist: VideoAll[] = []; - allUserVideos: VideoAll[] = this.fictitiousVideosService.getAllVideoAll(); + allUserVideos: VideoAll[] = this.fictitiousVideosService.get_TAB_VIDEO(); constructor( private messageService: MessageService, diff --git a/src/app/user/watching/page-watching-video/page-watching-video.component.ts b/src/app/user/watching/page-watching-video/page-watching-video.component.ts index 02ec8df..5f4235e 100644 --- a/src/app/user/watching/page-watching-video/page-watching-video.component.ts +++ b/src/app/user/watching/page-watching-video/page-watching-video.component.ts @@ -66,7 +66,7 @@ export class PageWatchingVideoComponent implements OnInit this.from = "myPlaylists"; const _idPlaylist = this.activatedRoute.snapshot.paramMap.get('_idPlaylist'); this.playlist = this.fictitiousVideosService.getPlaylistBy_id(_idPlaylist); - const allVideo = this.fictitiousVideosService.getAllVideoAll(); + const allVideo = this.fictitiousVideosService.get_TAB_VIDEO(); this.videosInPlaylist = []; for(let _idVideo of this.playlist.videoIds) { diff --git a/src/app/utils/interfaces/advert.ts b/src/app/utils/interfaces/advert.ts index e31d6a5..5b17905 100644 --- a/src/app/utils/interfaces/advert.ts +++ b/src/app/utils/interfaces/advert.ts @@ -10,7 +10,28 @@ export interface Advert }[], interests: string[], comment: string, - views: number, + views: Date[], + isVisible: boolean, + isActive: boolean, + createdAt: Date, + updatedAt: Date, +} + + + +export interface AdvertWithCountViews { + _id: string, + userId: string, + title: string, + advertiser: string, + images: { + url: string, + description: string, + }[], + interests: string[], + comment: string, + views: Date[], + countViews: number, isVisible: boolean, isActive: boolean, createdAt: Date, diff --git a/src/app/utils/interfaces/video.ts b/src/app/utils/interfaces/video.ts index 2926449..1c93427 100644 --- a/src/app/utils/interfaces/video.ts +++ b/src/app/utils/interfaces/video.ts @@ -4,7 +4,8 @@ export interface VideoDB userId: string, videoId: string, source: string, - tags: String[], + tags: string[], + interest: string, watchedDates: Date[], createdAt: Date, updatedAt: Date @@ -18,6 +19,7 @@ export interface VideoAll videoId: string, source: string, tags: String[], + interest: string, watchedDates: Date[], createdAt: Date, updatedAt: Date diff --git a/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts b/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts index aca666f..7170d7f 100644 --- a/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts +++ b/src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts @@ -17,7 +17,18 @@ const TAB_ADVERT: Advert[] = [ ], interests: [ "rock", "basket" ], comment: "pub pour vacances de noêl", - views: 5, + views: [ + new Date(2021,10,1), + new Date(2021,10,2), + new Date(2021,10,3), + new Date(2021,10,3), + new Date(2021,10,5), + new Date(2021,10,5), + new Date(2021,10,5), + new Date(2021,10,5), + new Date(2021,10,5), + new Date(2021,10,7) + ], isVisible: true, isActive: true, createdAt: new Date(), @@ -34,12 +45,51 @@ const TAB_ADVERT: Advert[] = [ ], interests: [ "rock", "rap" ], comment: "pub pour cette année", - views: 2, + views: [ + new Date(2021,10,5), + new Date(2021,10,6), + new Date(2021,10,7), + new Date(2021,10,8), + new Date(2021,10,8), + new Date(2021,10,8), + new Date(2021,10,25), + new Date(2021,10,25), + new Date(2021,10,25), + new Date(2021,10,27) + ], isVisible: true, isActive: true, createdAt: new Date(), updatedAt: new Date(), }, + { + _id: "idAlbion", + userId: "userId", + title: "Albion new version", + advertiser: "albion", + images: [ + { url: "rolex_v_1.jpg", description: "albion 1" }, + { url: "rolex_v_2.png", description: "albion 2" }, + ], + interests: [ "rock", "rap" ], + comment: "pub pour cette année", + views: [ + new Date(2021,10,3), + new Date(2021,10,4), + new Date(2021,10,4), + new Date(2021,10,5), + new Date(2021,10,5), + new Date(2021,10,6), + new Date(2021,10,6), + new Date(2021,10,8), + new Date(2021,10,8), + new Date(2021,10,8) + ], + isVisible: true, + isActive: true, + createdAt: new Date(), + updatedAt: new Date(), + } ]; @@ -71,4 +121,10 @@ export class FictitiousAdvertsService return tabAdvert; } + + get_TAB_ADVERT(): Advert[] + { + return TAB_ADVERT; + } + } diff --git a/src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts b/src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts index 119e358..e0e0b4a 100644 --- a/src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts +++ b/src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts @@ -13,7 +13,15 @@ const TAB_VIDEO: VideoAll[] = [ userId: "userId", source: "youtube", tags: [ "rap", "musique" ], - watchedDates: [new Date()], + interest: "PNL", + watchedDates: [ + new Date(2021, 10, 15), + new Date(2021, 10, 16), + new Date(2021, 10, 17), + new Date(2021, 10, 18), + new Date(2021, 10, 19), + new Date(2021, 10, 20), + ], createdAt: new Date(), updatedAt: new Date(), @@ -30,6 +38,7 @@ const TAB_VIDEO: VideoAll[] = [ userId: "userId", source: "youtube", tags: [ "rap", "musique" ], + interest: "PNL", watchedDates: [new Date()], createdAt: new Date(), updatedAt: new Date(), @@ -47,6 +56,7 @@ const TAB_VIDEO: VideoAll[] = [ userId: "userId", source: "youtube", tags: [ "rap", "musique" ], + interest: "PNL", watchedDates: [new Date()], createdAt: new Date(), updatedAt: new Date(), @@ -64,6 +74,7 @@ const TAB_VIDEO: VideoAll[] = [ userId: "userId", source: "youtube", tags: [ "rap", "musique" ], + interest: "PNL", watchedDates: [new Date()], createdAt: new Date(), updatedAt: new Date(), @@ -81,6 +92,7 @@ const TAB_VIDEO: VideoAll[] = [ userId: "userId", source: "dailymotion", tags: [ "rap", "musique" ], + interest: "PNL", watchedDates: [new Date()], createdAt: new Date(), updatedAt: new Date(), @@ -98,6 +110,7 @@ const TAB_VIDEO: VideoAll[] = [ userId: "userId", source: "youtube", tags: [ "rap", "musique" ], + interest: "Nekfeu", watchedDates: [new Date()], createdAt: new Date(), updatedAt: new Date(), @@ -115,6 +128,7 @@ const TAB_VIDEO: VideoAll[] = [ userId: "userId", source: "youtube", tags: [ "rap", "musique" ], + interest: "Nekfeu", watchedDates: [new Date()], createdAt: new Date(), updatedAt: new Date(), @@ -132,6 +146,7 @@ const TAB_VIDEO: VideoAll[] = [ userId: "userId", source: "youtube", tags: [ "rap", "musique" ], + interest: "Nekfeu", watchedDates: [new Date()], createdAt: new Date(), updatedAt: new Date(), @@ -149,6 +164,7 @@ const TAB_VIDEO: VideoAll[] = [ userId: "userId", source: "dailymotion", tags: [ "rap", "musique" ], + interest: "Columbine", watchedDates: [new Date()], createdAt: new Date(), updatedAt: new Date(), @@ -166,6 +182,7 @@ const TAB_VIDEO: VideoAll[] = [ userId: "userId", source: "dailymotion", tags: [ "rap", "musique" ], + interest: "Columbine", watchedDates: [new Date()], createdAt: new Date(), updatedAt: new Date(), @@ -210,7 +227,7 @@ export class FictitiousVideosService } - getAllVideoAll(): VideoAll[] + get_TAB_VIDEO(): VideoAll[] { return TAB_VIDEO; } diff --git a/src/styles.scss b/src/styles.scss index 5c44745..8a615cc 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -29,3 +29,24 @@ body { margin: 0; } -o-background-size: cover; background-size: cover; } + + + +// ------------------------------------------------------------------------- + + +// aura +::ng-deep .mat-checkbox-ripple .mat-ripple-element { + background-color: grey !important; +} + +// contenu coche +::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background { + background-color: black !important; +} + +// indeterminate +::ng-deep .mat-checkbox .mat-checkbox-frame { + border: solid 1px black !important; + background-color: white !important; +}