WebSVN – eFlore/Applications.cel – Diff – /trunk/widget/modules/photo/squelettes/js/WidgetPhotoPopup.js

 		this.indexImage                   = this.indexPremiereImage;
 		this.tailleMax                    = proprietes.tailleMax;
 		this.popupUrl                     = proprietes.popupUrl;
 		this.urlBaseTelechargement        = proprietes.urlBaseTelechargement;
 		this.urlServiceRegenererMiniature = proprietes.urlServiceRegenererMiniature;
+		this.userId       				  = proprietes.userId;
+		this.token						  = proprietes.token;
+		this.protocoles					  = proprietes.protocoles;
+	}
+	this.protocole = null;
+	this.voteId = null;
+	this.votes = null;
 	this.mettreAJourInfosImage();
+}
 	this.initEvtsContact();
 	$( window ).on( 'resize', lthis.redimentionnerModaleCarousel.bind( lthis ) );
 	this.initEvtsFonctionsPhoto();
 	this.initEvtsRetourGalerieResponsive();
 	this.initEvtsTagsPF();
-	this.initEvtsProtocole();
 };
 WidgetPhotoPopup.prototype.mettreAJourPopup = function() {
 	this.mettreAJourInfosImage();
 	this.afficherTitreImage();
 	this.traiterMetas();
 	this.regenererMiniature();
-	this.fournirLienIdentiplante();
-	this.traiterVote();
+	this.fournirLienIdentiplante();
 	this.pivoterImage();
-	// this.pivoterGauche();
+	this.initEvtsProtocole();
 };
 WidgetPhotoPopup.prototype.mettreAJourInfosImage = function() {
 	this.obs           = this.item['obs'];
 	this.nn            = '[nn' + this.obs['nom_sel_nn']+']';
 	this.urlIP         = this.obs['url_ip'];
 	this.tagsImage     = this.tagsToArray( this.item['tags_photo'] );
 	this.tagsObs       = this.tagsToArray( this.obs['tags_obs'] );
-	this.auteur        = this.item['utilisateur']['nom_utilisateur'];
+	let auteurMail = this.item['utilisateur']['mail_utilisateur'].split("@")[0];
+	this.auteur        = this.item["utilisateur"]["nom_utilisateur"] ? this.item["utilisateur"]["nom_utilisateur"] : auteurMail;
 	this.date          = this.item['date'];
 };
 WidgetPhotoPopup.prototype.tagsToArray = function( tags ) {
 	});
 };
 WidgetPhotoPopup.prototype.initEvtsProtocole = function() {
+	const lthis = this;
+	$('#bloc-notes-protocole').addClass('hidden');
+	lthis.votes = null
+	//On transforme la promesse en array
+	const PROTOCOLES_ARRAY = Object.values(lthis.protocoles);
+	const $select = $('#protocole');
+	$select.empty(); // Clear existing options
+	// Add the default hidden option
+	$select.append('<option value="" selected hidden>Choix du protocole</option>');
+	PROTOCOLES_ARRAY.forEach(protocoleData => {
+		$select.append(`<option id="protocole_${protocoleData['protocole.id']}" value="protocole_${protocoleData['protocole.id']}">${protocoleData['protocole.intitule']}</option>`);
-	const lthis = this;
+	})
+	$( '#protocole').on( 'change', function( event ){
+		event.preventDefault();
-	$( '#protocole').on( 'change', function( event ){
+		lthis.votes = null
-		event.preventDefault();
+		var id = $(this).children(":selected").attr("id");
-		var id = $(this).children(":selected").attr("id");
+		var protocole = id.split("_")[1];
+		$('#bloc-notes-protocole').removeClass('hidden');
-		$('#bloc-notes-protocole').removeClass('hidden');
+		// Find the object corresponding to the selected id (protocole.id)
+		var selectedProtocoleData = PROTOCOLES_ARRAY.find(protocoleData => protocoleData['protocole.id'] === protocole);
+		lthis.protocole = selectedProtocoleData['protocole.id'];
-		const message = {
+		const message = selectedProtocoleData['protocole.descriptif'];
-			'capitalisation_image': "\"Capitalisation d'image\" est un programme de sciences participatives initié" +
-				" dans le cadre du projet Pl@nttNet. En attribuant une note aux photos vous nous aidez à connaître" +
+		$('#message-protocole').html('<p>' + message + '</p>');
+		// On envoie le protocole sélectionné à la partie "vote"
+		// On récupère tous les votes de l'image depuis pictoflora
+		lthis.votes = lthis.getVotes(lthis.protocole)
-				" leur qualité.",
+		// Si l'utilisateur est connect, on vérifie s'il a déjà voté pour cette image et on affiche les étoiles
+		// correspondantes
+		if(lthis.userId){
-			'aide_identification': "Message du protocole aide identification",
+			lthis.checkUserVote(lthis.userId, lthis.protocole, lthis.votes);
+		} else {
-			'defi_photo': "Message du protocole défi photo",
+			lthis.voteId = null;
+			lthis.removeVoteStars()
+		}
+		// Remove any previous click event listeners on rating stars
+		for (let i=1; i<=5; i++){
+			$("#rating-star-"+i).off("click");
 			'gentiane_azure': "Message du protocole gentiane_azure",
-			'arbres_tetards': "Message du protocole arbres_tetards",
 		// Si l'utilisateur vote, on affiche les étoiles correspondantes et on l'envoie vers pictoflora
+		lthis.traiterVote();
+	});
+}
 		$('#message-protocole').html('<p>' + message[id] + '</p>');
+WidgetPhotoPopup.prototype.traiterVote = function () {
-	});
+	const lthis = this;
+	let starSelected = 0
+	let mode = '';
+	$("#note").attr("value", -1);
-};
+	// Traitement du bouton suppression du vote
-WidgetPhotoPopup.prototype.traiterVote = function () {
 	$("#note-remove").click(function (){
+		lthis.removeVoteStars();
+		mode = 'DELETE';
+		// On n'envoie le vote que si l'utilisateur est connecté
+		if (lthis.userId) {
+			lthis.sendVote(lthis.userId, lthis.protocole, starSelected, mode, lthis.voteId);
+		}
-	$("#note").attr("value", -1);
+	})
+	// Si l'utilisateur a déjà voté pour cette image on affiche son vote et on passe en mode modification
+	let userAVoter = lthis.checkUserVote(lthis.userId, lthis.protocole, lthis.votes);
+	userAVoter ? mode = 'POST' : mode = 'PUT';
+	// Affichage du nombre d'étoiles sélectionnées et envoi du vote
+	for (let i=1; i<=5; i++){
+		$("#rating-star-"+i).click(function () {
+			starSelected = i
+			lthis.displayVote(starSelected);
+			$("#note").attr("value", starSelected);
-	$("#note-remove").click(function (){
+			// On n'envoie le vote que si l'utilisateur est connecté
+			if (lthis.userId){
+				lthis.sendVote(lthis.userId, lthis.protocole, starSelected, mode);
+			}
+		});
-		$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
+	}
+};
-		$("#note").attr("value", -1);
+// Envoi du vote vers la fonction sendVote() du fichier php
-	})
+WidgetPhotoPopup.prototype.sendVote = function (userId, protocole, note, mode, voteId){
+	const lthis = this;
+	var xhttp = new XMLHttpRequest();
+	xhttp.onreadystatechange = function() {
+		if (this.readyState == 4 && this.status == 200) {
+			location.reload();
+		}
+	};
+	var url = "../widget:cel:photo/";
-	$("#rating-star-1").hover(function () {
+	// Convertir les données en une chaîne JSON pour les envoyer dans le corps de la requête
-		$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
+	var data = {
+		idImage: this.idImage,
+		mode: mode,
+		user: userId,
+		protocole: protocole,
+		vote: note,
+		voteId: voteId
+	}
+	var jsonData = JSON.stringify(data);
+	xhttp.open("POST", url+"?action=send_pf_vote", true);
+	xhttp.setRequestHeader("Content-Type", "application/json");
-		$("#rating-star-1").removeClass('far').addClass('fa').css("color", "#c3d45d");
+	xhttp.send(jsonData);
+}
+WidgetPhotoPopup.prototype.getVotes = function (protocoleId){
+	let votes = Object.values(this.item["votes"]);
+	let noteMoyenne = 0;
+	let nombreVotes= 0;
-		$("#note").attr("value", 1);
+	let noteTotal = 0;
-	});
+	let itemVotes = [];
-	$("#rating-star-2").hover(function () {
-		$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
+	votes.forEach(vote => {
+		if (vote["protocole.id"] == protocoleId){
+			nombreVotes++
+			noteTotal += parseInt(vote["vote"]);
+			noteMoyenne = (noteTotal / nombreVotes).toFixed(1)
+			itemVotes.push(vote);
-		$("#rating-star-1, #rating-star-2").removeClass('far').addClass('fa').css("color", "#c3d45d");
+		}
+	})
-		$("#note").attr("value", 2);
+	let elementNoteMoyenne = $("#note-moyenne .contenu");
+	elementNoteMoyenne.text(noteMoyenne);
-	});
+	let elementNoteCount = $("#note-count .contenu");
+	elementNoteCount.text(nombreVotes);
+	return itemVotes;
+}
-	$("#rating-star-3").hover(function () {
+WidgetPhotoPopup.prototype.displayVote = function (note){
+	lthis.removeVoteStars();
-		$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
+	for (let i=1; i<=5; i++){
+		for (let j=1; j<=note; j++){
+			$("#rating-star-"+j).removeClass('far').addClass('fa').css("color", "#c3d45d");
+		}
+	}
+}
+WidgetPhotoPopup.prototype.removeVoteStars = function (){
+	$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
-		$("#rating-star-1, #rating-star-2, #rating-star-3").removeClass('far').addClass('fa').css("color", "#c3d45d");
+	$("#note").attr("value", -1);
+}
 		$("#note").attr("value", 3);
-	});
+WidgetPhotoPopup.prototype.checkUserVote = function (userId, protocoleId, votes){

Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/photo/squelettes/js/WidgetPhotoPopup.js @ 3950 – Rev 3950 → 3958