Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 3957 → Rev 3958

/trunk/widget/modules/photo/squelettes/js/WidgetPhotoPopup.js
10,8 → 10,13
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();
}
 
36,7 → 41,6
this.initEvtsFonctionsPhoto();
this.initEvtsRetourGalerieResponsive();
this.initEvtsTagsPF();
this.initEvtsProtocole();
};
 
WidgetPhotoPopup.prototype.mettreAJourPopup = function() {
45,9 → 49,8
this.traiterMetas();
this.regenererMiniature();
this.fournirLienIdentiplante();
this.traiterVote();
this.pivoterImage();
// this.pivoterGauche();
this.initEvtsProtocole();
};
 
WidgetPhotoPopup.prototype.mettreAJourInfosImage = function() {
68,7 → 71,8
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'];
};
 
680,79 → 684,186
 
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>`);
})
 
$( '#protocole').on( 'change', function( event ){
event.preventDefault();
lthis.votes = null
 
var id = $(this).children(":selected").attr("id");
var protocole = id.split("_")[1];
 
$('#bloc-notes-protocole').removeClass('hidden');
 
const message = {
'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" +
" leur qualité.",
'aide_identification': "Message du protocole aide identification",
'defi_photo': "Message du protocole défi photo",
'gentiane_azure': "Message du protocole gentiane_azure",
'arbres_tetards': "Message du protocole arbres_tetards",
// 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 = selectedProtocoleData['protocole.descriptif'];
 
$('#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)
 
// 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){
lthis.checkUserVote(lthis.userId, lthis.protocole, lthis.votes);
} else {
lthis.voteId = null;
lthis.removeVoteStars()
}
$('#message-protocole').html('<p>' + message[id] + '</p>');
 
// Remove any previous click event listeners on rating stars
for (let i=1; i<=5; i++){
$("#rating-star-"+i).off("click");
}
 
// Si l'utilisateur vote, on affiche les étoiles correspondantes et on l'envoie vers pictoflora
lthis.traiterVote();
});
};
}
 
WidgetPhotoPopup.prototype.traiterVote = function () {
const lthis = this;
let starSelected = 0
let mode = '';
 
$("#note").attr("value", -1);
 
// Traitement du bouton suppression du vote
$("#note-remove").click(function (){
$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
 
$("#note").attr("value", -1);
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);
}
})
 
$("#rating-star-1").hover(function () {
$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
// 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';
 
$("#rating-star-1").removeClass('far').addClass('fa').css("color", "#c3d45d");
// 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);
// On n'envoie le vote que si l'utilisateur est connecté
if (lthis.userId){
lthis.sendVote(lthis.userId, lthis.protocole, starSelected, mode);
}
});
}
};
 
$("#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;
 
$("#rating-star-2").hover(function () {
$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
location.reload();
}
};
 
$("#rating-star-1, #rating-star-2").removeClass('far').addClass('fa').css("color", "#c3d45d");
var url = "../widget:cel:photo/";
 
$("#note").attr("value", 2);
});
// Convertir les données en une chaîne JSON pour les envoyer dans le corps de la requête
var data = {
idImage: this.idImage,
mode: mode,
user: userId,
protocole: protocole,
vote: note,
voteId: voteId
}
var jsonData = JSON.stringify(data);
 
$("#rating-star-3").hover(function () {
$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
xhttp.open("POST", url+"?action=send_pf_vote", true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.send(jsonData);
}
 
$("#rating-star-1, #rating-star-2, #rating-star-3").removeClass('far').addClass('fa').css("color", "#c3d45d");
WidgetPhotoPopup.prototype.getVotes = function (protocoleId){
let votes = Object.values(this.item["votes"]);
let noteMoyenne = 0;
let nombreVotes= 0;
let noteTotal = 0;
let itemVotes = [];
 
$("#note").attr("value", 3);
});
votes.forEach(vote => {
if (vote["protocole.id"] == protocoleId){
nombreVotes++
noteTotal += parseInt(vote["vote"]);
noteMoyenne = (noteTotal / nombreVotes).toFixed(1)
itemVotes.push(vote);
}
})
 
$("#rating-star-4").hover(function () {
$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
let elementNoteMoyenne = $("#note-moyenne .contenu");
elementNoteMoyenne.text(noteMoyenne);
 
$("#rating-star-1, #rating-star-2, #rating-star-3, #rating-star-4").removeClass('far').addClass('fa').css("color", "#c3d45d");
let elementNoteCount = $("#note-count .contenu");
elementNoteCount.text(nombreVotes);
 
$("#note").attr("value", 4);
});
return itemVotes;
}
 
$("#rating-star-5").hover(function () {
$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
WidgetPhotoPopup.prototype.displayVote = function (note){
lthis.removeVoteStars();
 
$("#rating-star-1, #rating-star-2, #rating-star-3, #rating-star-4, #rating-star-5").removeClass('far').addClass('fa').css("color", "#c3d45d");
for (let i=1; i<=5; i++){
for (let j=1; j<=note; j++){
$("#rating-star-"+j).removeClass('far').addClass('fa').css("color", "#c3d45d");
}
}
}
 
$("#note").attr("value", 5);
});
WidgetPhotoPopup.prototype.removeVoteStars = function (){
$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
$("#note").attr("value", -1);
}
 
// TODO Envoyer le vote
};
WidgetPhotoPopup.prototype.checkUserVote = function (userId, protocoleId, votes){
let userVote = null;
 
votes.forEach(vote => {
if (vote["protocole.id"] == protocoleId && vote["auteur.id"] == userId){
userVote = vote;
}
})
 
if (userVote){
this.displayVote(userVote['vote']);
// this.traiterVote()
this.voteId = userVote['vote.id'];
 
return true
} else {
this.voteId = null;
this.removeVoteStars()
}
}
 
WidgetPhotoPopup.prototype.pivoterImage = function() {
lthis = this;
$( '#pivoter-droite' ).off( 'click' ).on( 'click', function( event ) {