From 0ea00bf062baa189a06175dc2c4a18bf6db08d18 Mon Sep 17 00:00:00 2001 From: MiharyR Date: Mon, 13 Dec 2021 15:01:35 +0100 Subject: [PATCH] gestion des images --- .../page-ad-list-admin.component.ts | 6 +- ...opup-visualize-images-admin.component.html | 19 ++- .../popup-visualize-images-admin.component.ts | 23 +-- .../drag-and-drop/drag-and-drop.component.ts | 8 +- .../page-ad-list-advertiser.component.ts | 46 +++--- .../popup-add-or-update-ad.component.html | 6 +- .../popup-add-or-update-ad.component.ts | 133 ++++++++++++++---- ...visualize-images-advertiser.component.html | 19 ++- ...p-visualize-images-advertiser.component.ts | 23 +-- 9 files changed, 201 insertions(+), 82 deletions(-) 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 5eec7ff..3b89012 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 @@ -134,11 +134,7 @@ export class PageAdListAdminComponent implements AfterViewInit const config = { width: '30%', height: '90%', - data: { - images: advert.images, - width: 300, - height: 800, - } + data: { images: advert.images } }; this.dialog .open(PopupVisualizeImagesAdminComponent, config) diff --git a/src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.html b/src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.html index c860766..dfbc2fe 100644 --- a/src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.html +++ b/src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.html @@ -5,9 +5,16 @@ -
- -
+ + + + + + + + + + + + + diff --git a/src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.ts b/src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.ts index 944ecbd..5b98819 100644 --- a/src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.ts +++ b/src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.ts @@ -11,8 +11,8 @@ import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; export class PopupVisualizeImagesAdminComponent implements OnInit { tabImages = []; - width: number = 0; - height: number = 0; + index: number = 0; + nbImage: number = 0; constructor( public dialogRef: MatDialogRef, @@ -21,15 +21,18 @@ export class PopupVisualizeImagesAdminComponent implements OnInit ngOnInit(): void { - this.width = this.data.width*0.8; - this.height = this.data.height*0.8; + this.tabImages = this.data.images; + this.nbImage = this.tabImages.length; + } - for(let couple of this.data.images) - { - const elt = { path: "assets/pub/"+couple.url }; - this.tabImages.push(elt); - } - console.log(this.tabImages); + onPrecedent(): void + { + if(this.index !== 0) this.index -= 1; + } + + onSuivant(): void + { + if(this.index !== (this.nbImage-1)) this.index += 1; } } diff --git a/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.ts b/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.ts index 40b9626..8c4de43 100644 --- a/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.ts +++ b/src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {Component, ElementRef, EventEmitter, OnInit, Output, ViewChild} from '@angular/core'; @Component({ selector: 'app-drag-and-drop', @@ -8,15 +8,16 @@ import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; export class DragAndDropComponent { @ViewChild("fileDropRef", { static: false }) fileDropEl: ElementRef; - files: any[] = []; info_image = "Vos annonces seront affichées dans un rectangle de rapport 1/5 avec: \n • 1 la largeur du rectangle \n • 5 la hauteur du rectangle" ; - + files: any[] = []; + @Output() eventEmitter = new EventEmitter(); /** * on file drop handler */ onFileDropped($event) { this.prepareFilesList($event); + this.eventEmitter.emit(this.files); } /** @@ -24,6 +25,7 @@ export class DragAndDropComponent */ fileBrowseHandler(files) { this.prepareFilesList(files); + this.eventEmitter.emit(this.files); } /** 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 79971ec..7810130 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,7 +2,7 @@ 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, AdvertWithCountViews} from "../../../utils/interfaces/advert"; +import {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"; @@ -100,19 +100,23 @@ export class PageAdListAdvertiserComponent implements AfterViewInit onVisualizeImages(advert: AdvertWithCountViews) { - const config = { - width: '30%', - height: '90%', - data: { - images: advert.images, - width: 300, - height: 800, - } - }; - this.dialog - .open(PopupVisualizeImagesAdvertiserComponent, config) - .afterClosed() - .subscribe(retour => {}); + if(advert.images.length !== 0) + { + const config = { + width: '30%', + height: '90%', + data: { images: advert.images } + }; + this.dialog + .open(PopupVisualizeImagesAdvertiserComponent, config) + .afterClosed() + .subscribe(retour => {}); + } + else { + const config = { duration: 2000, panelClass: "custom-class" }; + const message = "Cette annonce ne contient aucune image" ; + this.snackBar.open( message, "", config); + } } @@ -122,7 +126,12 @@ export class PageAdListAdvertiserComponent implements AfterViewInit width: '75%', height: '80%', panelClass: 'custom-dialog-container', - data: { action: "add", advert: null, allVideoCategorie: this.allVideoCategorie } + data: { + action: "add", + advert: null, + allVideoCategorie: this.allVideoCategorie, + allTitle: this.tabAdvertWithCountViews.map(x => x.title) + } }; this.dialog .open(PopupAddOrUpdateAdComponent, config) @@ -150,7 +159,12 @@ export class PageAdListAdvertiserComponent implements AfterViewInit width: '75%', height: '80%', panelClass: 'custom-dialog-container', - data: { action: "update", advert: advertToUpdate, allVideoCategorie: this.allVideoCategorie } + data: { + action: "update", + advert: advertToUpdate, + allVideoCategorie: this.allVideoCategorie, + allTitle: this.tabAdvertWithCountViews.map(x => x.title) + } }; this.dialog .open(PopupAddOrUpdateAdComponent, config) diff --git a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html index bda058c..f461435 100644 --- a/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html +++ b/src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.html @@ -59,7 +59,7 @@
- +
@@ -67,6 +67,10 @@
+ +
+ {{errorMessage}} +
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 f943a07..8601e49 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 @@ -5,6 +5,8 @@ import {MessageService} from "../../../utils/services/message/message.service"; import {ThemeService} from "../../../utils/services/theme/theme.service"; + + const ADVERT_VIDE: Advert = { _id: "", userId: "", @@ -31,9 +33,14 @@ export class PopupAddOrUpdateAdComponent implements OnInit advert: any; title: string = "" ; allVideoCategorie = []; - tabWaitingFile: File[] = []; // fichiers selectionnés mais pas encore "validés" - tabSelectedFile: File[] = []; // fichier "validés" - _event; + allTitle = []; + + tabOfNewImagesBase64 = []; + tabOfNewImagesName = []; + + hasError: boolean = false; + errorMessage: string = "" ; + constructor( public dialogRef: MatDialogRef, @@ -44,7 +51,8 @@ export class PopupAddOrUpdateAdComponent implements OnInit ngOnInit(): void { - this.allVideoCategorie = this.data.allVideoCategorie + this.allVideoCategorie = this.data.allVideoCategorie; + this.allTitle = this.data.allTitle.slice(); if(this.data.action === "add") { this.advert = Object.assign({}, ADVERT_VIDE); @@ -56,43 +64,61 @@ export class PopupAddOrUpdateAdComponent implements OnInit this.advert = Object.assign({}, this.data.advert); this.advert.interests = this.data.advert.interests.slice(); this.title = "Modifier annonce" ; + const indexOldTitle = this.allTitle.findIndex(title => title == this.advert.title); + this.allTitle.splice(indexOldTitle, 1); } } onValidate(): void { - // On transforme 'this.user.interests' en tableau de 'videoCategorie' - let interests = []; // tableau de videoCategorie - for(let interest of this.advert.interests) + this.checkField(); + if(!this.hasError) { - for(let videoCategorie of this.allVideoCategorie) + // preparation des donnees + this.prepareAdvertInterests(); + this.prepareAdvertImages(); + + // si creation + if (this.data.action === "add") { - if(videoCategorie.interest === interest) { - interests.push(videoCategorie); - break; - } + this.messageService + .post("ad/create", this.advert) + .subscribe(ret => this.onCreateCallback(ret), err => this.onCreateCallback(err)); + } + // si update + else + { + const id = this.advert.id; + Reflect.deleteProperty(this.advert, "id"); + Reflect.deleteProperty(this.advert, "_id"); + this.messageService + .put("ad/update/" + id, this.advert) + .subscribe(ret => this.onUpdateCallback(ret, id), err => this.onUpdateCallback(err, id)); } } - this.advert.interests = interests; + } - if(this.data.action === "add") + + checkField() + { + if(this.advert.title.length === 0) { + this.errorMessage = "Veuillez remplir le champ 'titre'" ; + this.hasError = true; + } + else if(this.allTitle.includes(this.advert.title)) { - this.messageService - .post("ad/create", this.advert) - .subscribe(ret => this.onCreateCallback(ret), err => this.onCreateCallback(err)); + this.errorMessage = "Ce titre est déjà pris" ; + this.hasError = true; } else { - const id = this.advert.id; - Reflect.deleteProperty(this.advert, "id"); - Reflect.deleteProperty(this.advert, "_id"); - this.messageService - .put("ad/update/"+id, this.advert) - .subscribe(ret => this.onUpdateCallback(ret,id), err => this.onUpdateCallback(err,id)); + this.errorMessage = ""; + this.hasError = false; } } + onCreateCallback(retour: any): void { if(retour.status !== "success") { @@ -127,8 +153,65 @@ export class PopupAddOrUpdateAdComponent implements OnInit onRemoveImgAlreadyPresent(image) { const index = this.advert.images.indexOf(image); - console.log("idx: " + index); - this.advert.images.slice(index, 1); + this.advert.images.splice(index, 1); + } + + + onReceiveNewImages(files: any): void + { + this.tabOfNewImagesBase64 = []; + this.tabOfNewImagesName = []; + if(files) + { + for(let file of files) + { + if(file) + { + const reader = new FileReader(); + reader.onload = this.handleReaderLoaded.bind(this); + this.tabOfNewImagesName.push(file.name) + reader.readAsBinaryString(file); + } + } + } + } + handleReaderLoaded(e) + { + this.tabOfNewImagesBase64.push('data:image/png;base64,' + btoa(e.target.result)) + } + + + // Met bien en forme les "images" avant d'être envoyer + prepareAdvertImages(): void + { + for(let i=0; i -
- -
+ + + + + + + + + + + + + diff --git a/src/app/advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component.ts b/src/app/advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component.ts index dd99e36..59e7c3d 100644 --- a/src/app/advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component.ts +++ b/src/app/advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component.ts @@ -11,8 +11,8 @@ import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; export class PopupVisualizeImagesAdvertiserComponent implements OnInit { tabImages = []; - width: number = 0; - height: number = 0; + index: number = 0; + nbImage: number = 0; constructor( public dialogRef: MatDialogRef, @@ -21,15 +21,18 @@ export class PopupVisualizeImagesAdvertiserComponent implements OnInit ngOnInit(): void { - this.width = this.data.width; - this.height = this.data.height; + this.tabImages = this.data.images; + this.nbImage = this.tabImages.length; + } - for(let couple of this.data.images) - { - const elt = { path: "assets/pub/"+couple.url }; - this.tabImages.push(elt); - } - console.log(this.tabImages); + onPrecedent(): void + { + if(this.index !== 0) this.index -= 1; + } + + onSuivant(): void + { + if(this.index !== (this.nbImage-1)) this.index += 1; } }