Commit 7504d283 authored by Praibait's avatar Praibait
Browse files

Simplification conséquente du code de toggle_transactions.js

parent 9fd0b047
......@@ -35,7 +35,7 @@ Template de rendering d'historique de consos
</thead>
<tbody>
{% for transaction in historique %}
<tr>
<tr id = {{transaction.id }}>
<td>{% render_datetime transaction.date %}</td>
<td>{{transaction.emetteurpseudo}}</td>
<td>{{transaction.destinatairepseudo}}</td>
......@@ -43,7 +43,7 @@ Template de rendering d'historique de consos
<td>{{transaction.quantite}}</td>
<td>{% euro transaction.montant %}</td>
<td class="description">{{transaction.description}}</td>
<td id="validedevalide" class="bg-{{ transaction.valide|yesno:"success,danger" }}"><a id="{{transaction.id}}" onclick="validedevalide(this);" class="glyphicon glyphicon-{{ transaction.valide|yesno:"ok,remove" }}" aria-hidden="true"></a></td>
<td id="validedevalide" class="bg-{{ transaction.valide|yesno:"success,danger" }}"><a onclick="validedevalide(this);" class="glyphicon glyphicon-{{ transaction.valide|yesno:"ok,remove" }}" aria-hidden="true"></a></td>
</tr>
{% endfor %}
</tbody>
......
/* Macros pour changer le comportement d'un double-clic sur une même transaction. Il peut prendre deux valeurs :
1 : Tant que le message de retour est affiché, les boutons sont inactifs
0 : Le message suivant remplace imméiatement celui qui était affiché et ce infiniment*/
var BLOCKED = 1;
/* Fonction de récupération de tous les id des transactions affichées */
function liste_id_transaction() {
var a = document.querySelectorAll('a.glyphicon');// Cette sélection manque peut être de stabilité à la modification du tableau, mais j'ai pas réussi à faire mieux... (sans trop modifier la page html)
ids = [];
for (var i=0, l=a.length; i<l; i++) {
ids.push(a[i].id);
}
return ids;
}
/* Fonction qui appelle la fonction de (dé)validation pour changer l'état de la BDD et lance ensuite l'affichage du message.
Elle est appellée par n'importe quel bouton de (dé)validation sur l'événement onclick.
Elle prend en paramètre button qui est la balise <a> qui correspond à la transaction concernée.
Elle envoie l'id de la transaction et la nature de l'action (validation dévalidation) et récupère les retours : messages, code de retour,
messages d'erreurs */
Elle envoie l'id de la transaction et la nature de l'action (validation dévalidation) et récupère les retours : messages, code de retour, messages d'erreurs */
function validedevalide(button) {
var idTransaction=liste_id_transaction();
var ligne = idTransaction.indexOf(button.id) + 1 ;
// Si la fonction message a été lancé, lignemessage contient la ligne du bouton et alors on ne fait rien tant que le message est affiché
if (BLOCKED == 1 && lignemessages.indexOf(ligne)!=-1) { return 0; }
var ligne = button.parentNode.parentNode
if (document.getElementById("message" + ligne.id)) {
return;
}
// On détermine l'action à faire : si elle est déjà valide, il faut la dévalider
var devalider = (button.className == "glyphicon glyphicon-ok");
var devalider = (button.className == "glyphicon glyphicon-ok"); //On fait confiance à l'icone : on ne devrait pas (i.e. à faire côté serveur)
var xhr = getXMLHttpRequest(); // Préparation de la requête
......@@ -40,18 +24,18 @@ function validedevalide(button) {
button.parentNode.className = "bg-" + (devalider ? "danger" : "success");
button.className = "glyphicon glyphicon-" + (devalider ? "remove" : "ok");
// On affiche le message
affmessage(button, true, msg, devalider);
affmessagebis(ligne, true, msg, devalider);
} else { // Sinon on affiche la raison
affmessage(button, false, errmsg);
affmessagebis(ligne, false, errmsg, true);
}
} else { // Si il y a eu un pb dans la requête on affiche un problème serveur (c'est la faute des devs)
affmessage(button, false, xhr.status + ": " + xhr.statusText);
affmessage(ligne, false, xhr.status + ": " + xhr.statusText);
}
}
});
data = button.id + "," + devalider; // Encodage de la requête POST
data = ligne.id + "," + devalider; // Encodage de la requête POST
xhr.open("POST", NOTE_ROOT_URL + "consos/toggle_transaction", true); // Page AJAJ qui va s'occupper de traiter la requête
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
......@@ -59,123 +43,52 @@ function validedevalide(button) {
xhr.send("data=" + encodeURIComponent(data)); // On envoie les données
};
/* Cette fonction permet simplement d'ajouter nodeToInsert après referenceNode
dans nodeParent (ici une ligne après une autre dans la tableau) */
/*
Ces vaiables globales servent aux lignes à communiquer entres-elles.
lignemessages : Liste qui contient les lignes des messages qui sont en cours d'affichage (dans l'ordre d'apparition). Lorsqu'une ligne est supprimée, on supprime proprement sa ligne dans cette liste (cf fonction fadeOut).
timer : Dictionnaire contenant les timer (avant la disparition du message) associés à chaque ligne (qui constitue la clef). Lorsque qu'un timer arrive à 0 ou est annulé, sa valeur est mise à null.
*/
var lignemessages = [], timer = {};
function insertAfter(nodeParent, nodeToInsert, referenceNode) {
if(referenceNode.nextSibling) {
nodeParent.insertBefore(nodeToInsert, referenceNode.nextSibling);
} else {
nodeParent.appendChild(nodeToInsert);
}
}
/*Cette fonction a pour but d'afficher le message de retour du serveur en rajoutant une ligne sous la transaction
button : objet contenant le lien sur lequel on a cliqué (contient entre autre l'id de la transaction
ligne : objet contenant la lignede la transaction sur laquel on a cliqué (contient entre autre l'id de la transaction)
reussite : booleen signifiant si oui ou non la requête a aboutie (la transaction a bien été (dé)validé ou non)
msg : retour du serveur (erreur ou successcode du type "Bien (dé)validé !"
msg : retour du serveur (erreur ou successcode du type "Bien (dé)validé !")
devalider : booleen signifiant si on vient de dévalider (true) ou non.
*/
function affmessage(button, reussite, msg, devalider) {
var tableau = button.parentNode.parentNode.parentNode.parentNode, // Tableau des transactions
tab = tableau.rows; // Liste contenant ses lignes
/* Localisation et insertion de la ligne acceuilant le message */
var idTransaction=liste_id_transaction(),
ligne = idTransaction.indexOf(button.id) + 1 ; //La 0eme contient l'entête
var compteur = 0;
for (var i=0, l=lignemessages.length; i<l; i++) { // Ici on compte combien de message on été ouvert au dessus de la transaction
if (lignemessages[i]<ligne) {
compteur++;
}
}
if (timer[ligne] && BLOCKED==0) { // Si il y a déjà un message affiché pour cette ligne, on le supprime et on arrête le timer (désactivé)
clearTimeout(timer[ligne]);
timer[ligne] = null
tableau.deleteRow(ligne + compteur + 1);
} else { // Sinon on l'ajoute a la liste des messages ouverts
lignemessages.push(ligne); }
function affmessagebis(ligne, reussite, msg, devalider) {
var message = document.createElement("tr");
var message = tableau.insertRow(ligne + compteur + 1); // Il y a donc une translation de compteur de notre ligne
message.setAttribute("id", "message" + ligne.id);
if (reussite) {
message.className = (devalider ? "bg-danger" : "bg-success");
} else {
message.style.backgroundColor = "#B45555";
message.style.fontWeight = 'bold';
}
message.style.fontSize = "0px";
/* Mise en forme et affichage (trop stylé) du message : on met en forme, on cache tout, et on fait appraitre en fondu*/
var cellules = [];
for (var i=0; i<8; i++) {
cellules.push(document.createElement("td"));
cellules[i].style.border = "0px";
message.appendChild(cellules[i]);
}
var colonnes = []
for (var i=0 ; i<8 ; i++) {
colonnes.push(message.insertCell(i)); //On peuple la ligne de cellule
colonnes[i].style.border = "0px";
cellules[6].appendChild(document.createTextNode(msg));
cellules[(reussite?7:5)].innerHTML = '<div class=' + (devalider ?'"glyphicon glyphicon-remove"' : '"glyphicon glyphicon-ok"') + ' aria-hidden="true"' + (reussite? '': 'style="cursor:pointer"') + '></div>';
if (reussite) {
colonnes[i].className = (devalider ? "bg-danger" : "bg-success");
} else {
colonnes[i].style.backgroundColor = "#b45555"; }
if (!reussite) {
cellules[5].firstChild.onclick = function () {$( "#message" + ligne.id ).stop(false, true);};
}
if (i>=5) { // Les 3 cellules qui vont contenir le message
//colonnes[i].style.opacity = "0.1";
colonnes[i].style.fontSize = "0px";
}
}
var symb = colonnes[7], txt = colonnes[6], close = colonnes[5];
var symbs = symb.style, txts = txt.style, closes = close.style, messages = message.style;
if (reussite) {
// Partie affichant le symbole correspondant à l'action
symb.innerHTML = '<div class=' + (devalider ?'"glyphicon glyphicon-remove"' : '"glyphicon glyphicon-ok"') + ' aria-hidden="true"></div>';
} else {
// Partie affichant la croix qui ferme le message (seulement dans le cas d'un message d'erreur)
close.innerHTML = '<div class=' + (reussite ?'"hidden"' : '"glyphicon glyphicon-remove"') + ' aria-hidden="true" style="cursor:pointer"></div>';
close.firstChild.onclick = function () { clearTimeout(timer[ligne]); fadeOut(); }; // firstChild correspond au <a> qu'on vient d'ajouter
}
// Partie affichant le message de retour
txts.fontWeight = (reussite ? 'normal' : 'bold');
txt.textContent = msg
//On cache toute la ligne
messages.height = "0px";
messages.opacity = "0.1";
/* Lancement des 2 étapes consécutives de l'affichage */
(function fadeIn() {//Fait apparaître la ligne en fondu puis affiche les cellules et démarre le timeout
var opa = parseFloat(messages.opacity);
if (opa < 0.8) {
messages.opacity = opa + 0.3;
messages.height = opa*40 + "px";
symbs.fontSize = txts.fontSize = closes.fontSize = 10+4*opa + "px";
setTimeout(fadeIn,10);
} else {
timer_fadeout = setTimeout(fadeOut, (reussite ? 2500 : 30000));
timer[ligne] = timer_fadeout }
})();
function fadeOut () { // Appelé à la fin du timeout ou par close, il cache les cellules et fait disparaître la ligne en fondu
var opa = parseFloat(messages.opacity);
if (opa > 0.1) {
messages.opacity = opa - 0.2;
messages.height = (opa-0.2)*30 + "px";
symbs.fontSize = txts.fontSize = closes.fontSize = 10 + 2*(opa-0.2) + "px";
setTimeout(fadeOut,20);
} else {
// Suppresion de la ligne dans le tableau (on recompte le nb de lignes au dessus car il y a peut être des messages qui sont apparu entre temps)
var compteur = 0;
for (var i=0, l=lignemessages.length; i<l; i++) {
if (lignemessages[i] < ligne) { compteur++; }
}
tableau.deleteRow(ligne + compteur + 1);
insertAfter(ligne.parentNode, message, ligne);
//Suppression de la ligne dans lignemessage : on décale tout les lignes située après dans la liste de -1, puis on supprime l'élément en bout de tableau.
for (var i=lignemessages.indexOf(ligne), length=lignemessages.length-1; i<length; i++) {
lignemessages[i]=lignemessages[i+1];}
lignemessages.pop();
$( message ).animate({fontSize: "12.8px"}, 'fast').delay((reussite? 2500: 30000)).animate({fontSize: "0px"}, 'fast', function () {message.parentNode.removeChild(message);});
//On réinitialise le timer correspondant à la ligne
timer[ligne] = null; }
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment