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"); |
|
$("#note").attr("value", 1); |
// 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); |
} |
}); |
} |
}; |
|
$("#rating-star-2").hover(function () { |
$(".notation-star").removeClass('fa').addClass('far').css("color", "grey"); |
// Envoi du vote vers la fonction sendVote() du fichier php |
WidgetPhotoPopup.prototype.sendVote = function (userId, protocole, note, mode, voteId){ |
const lthis = this; |
|
$("#rating-star-1, #rating-star-2").removeClass('far').addClass('fa').css("color", "#c3d45d"); |
var xhttp = new XMLHttpRequest(); |
xhttp.onreadystatechange = function() { |
if (this.readyState == 4 && this.status == 200) { |
location.reload(); |
} |
}; |
|
$("#note").attr("value", 2); |
}); |
var url = "../widget:cel:photo/"; |
|
$("#rating-star-3").hover(function () { |
$(".notation-star").removeClass('fa').addClass('far').css("color", "grey"); |
// 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-1, #rating-star-2, #rating-star-3").removeClass('far').addClass('fa').css("color", "#c3d45d"); |
xhttp.open("POST", url+"?action=send_pf_vote", true); |
xhttp.setRequestHeader("Content-Type", "application/json"); |
xhttp.send(jsonData); |
} |
|
$("#note").attr("value", 3); |
}); |
WidgetPhotoPopup.prototype.getVotes = function (protocoleId){ |
let votes = Object.values(this.item["votes"]); |
let noteMoyenne = 0; |
let nombreVotes= 0; |
let noteTotal = 0; |
let itemVotes = []; |
|
$("#rating-star-4").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, #rating-star-3, #rating-star-4").removeClass('far').addClass('fa').css("color", "#c3d45d"); |
let elementNoteMoyenne = $("#note-moyenne .contenu"); |
elementNoteMoyenne.text(noteMoyenne); |
|
$("#note").attr("value", 4); |
}); |
let elementNoteCount = $("#note-count .contenu"); |
elementNoteCount.text(nombreVotes); |
|
$("#rating-star-5").hover(function () { |
return itemVotes; |
} |
|
WidgetPhotoPopup.prototype.displayVote = function (note){ |
lthis.removeVoteStars(); |
|
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"); |
$("#note").attr("value", -1); |
} |
|
$("#rating-star-1, #rating-star-2, #rating-star-3, #rating-star-4, #rating-star-5").removeClass('far').addClass('fa').css("color", "#c3d45d"); |
WidgetPhotoPopup.prototype.checkUserVote = function (userId, protocoleId, votes){ |
let userVote = null; |
|
$("#note").attr("value", 5); |
}); |
votes.forEach(vote => { |
if (vote["protocole.id"] == protocoleId && vote["auteur.id"] == userId){ |
userVote = vote; |
} |
}) |
|
// TODO Envoyer le 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 ) { |