From: Greg Burri Date: Sun, 12 Oct 2008 14:25:20 +0000 (+0000) Subject: MOD passage systèmatique par l'objet Communication X-Git-Tag: 1.1.3~3 X-Git-Url: http://git.euphorik.ch/index.cgi?a=commitdiff_plain;h=784e21644150dc43de89449f5383e5a281476f55;p=euphorik.git MOD passage systèmatique par l'objet Communication ADD affichage d'une barre de progression (waitbar) lors de communication entre le client et le serveur (sauf dans le cas d'une communication COMET (comet.js), à améliorer par la suite) #4 --- diff --git a/img/waitbar.gif b/img/waitbar.gif new file mode 100644 index 0000000..3503039 Binary files /dev/null and b/img/waitbar.gif differ diff --git a/index.yaws b/index.yaws index 7d88a7c..7fbddfc 100755 --- a/index.yaws +++ b/index.yaws @@ -75,6 +75,7 @@ + diff --git a/js/communication.js b/js/communication.js index 417e833..834f173 100644 --- a/js/communication.js +++ b/js/communication.js @@ -19,13 +19,43 @@ // Regroupe la partie communication JSON client -> serveur de euphorik. // Voir : http://dev.euphorik.ch/wiki/euk/Protocole -/** - * @param funError un fonction executé lors d'un réponse 'error' de la part du serveur, peut être redéfinit pour une requête. +/** + * Les fonctions debutReq et finReq servent, par exemple, à afficher à l'utilisateur + * qu'une communication est en cours. + * @param funError un fonction executée lors d'un réponse 'error' de la part du serveur, peut être redéfinit pour une requête. + * @param funDebutReq fonction appelée au début d'une requête (facultatif) + * @param funFinReq fonction appelée à la fin d'une requête (facultatif) + */ +euphorik.Communication = function(funError, funDebutReq, funFinReq) { + this.funError = funError; + this.funDebutReq = funDebutReq; + this.funFinReq = funFinReq; +}; + +/** + * Charge un fichier depuis une url et retourne son contenu. + */ +euphorik.Communication.prototype.load = function(url) { + if (this.funDebutReq) { + this.funDebutReq(); + } + var contenu = ""; + $.ajax({async: false, url: url, success : function(page) { contenu += page; }}); + if (this.funFinReq) { + this.funFinReq(); + } + return contenu; +} + +/** + * Effectue une requête JSON auprès du serveur. + * @param action une chaine spécifiant l'action, par exemple "put_message" + * @param json les données à envoyer associé à l'action, par exemple {"cookie" : "LKJDLAKSJBFLKASN", "nick" : "Paul", "content" : "Bonjour", "answer_to" : [] } + * @param funOk la fonction exécuté après réception des données du serveur + * @param funError la fonction exécuté si une erreur arrive (facultatif) + * @param asynchrone true pour une communication asychrone (facultatif, truepar défaut) + * @param paramsSupp un objet contenant des paramètres supplémentaire pour la fonction ajax de jQuery (facultatif) */ -euphorik.Communication = function(funError) { - this.funError = funError; -}; - euphorik.Communication.prototype.requete = function(action, json, funOk, funError, asynchrone, paramsSupp) { var thisCommunication = this; if (asynchrone === undefined) { @@ -35,7 +65,11 @@ euphorik.Communication.prototype.requete = function(action, json, funOk, funErro var mess = this.getBase(action); objectEach(json, function(nom, val) { mess[nom] = val; - }); + }); + + if (this.funDebutReq) { + this.funDebutReq(); + } paramsAjax = { async: asynchrone, @@ -44,7 +78,10 @@ euphorik.Communication.prototype.requete = function(action, json, funOk, funErro dataType: "json", data: { action : JSON.stringify(mess) }, success: - function(data) { + function(data) { + if (thisCommunication.funFinReq) { + thisCommunication.funFinReq(); + } if (data.reply === "error") { if (funError) { funError(data); @@ -54,9 +91,15 @@ euphorik.Communication.prototype.requete = function(action, json, funOk, funErro } else if (funOk) { funOk(data); } + }, + error: + function(data) { + if (thisCommunication.funFinReq) { + thisCommunication.funFinReq(); + } } }; - + if (paramsSupp) { objectEach(paramsSupp, function(nom, val) { paramsAjax[nom] = val; diff --git a/js/euphorik.js b/js/euphorik.js index 214c0f8..148f4cb 100755 --- a/js/euphorik.js +++ b/js/euphorik.js @@ -27,9 +27,13 @@ $(document).ready( var fragment = new Fragment(); var formateur = new euphorik.Formateur(); var util = new euphorik.Util(formateur); - var communication = new euphorik.Communication(function(data) { util.messageDialogue(data.error_message); }); + var communication = new euphorik.Communication( + function(data) { util.messageDialogue(data.error_message); }, + function() { console.log("show"); $("#waitbar").show(); }, + function() { console.log("hide"); $("#waitbar").hide(); } + ); var client = new euphorik.Client(util, communication); - var pages = new euphorik.Pages(fragment); + var pages = new euphorik.Pages(fragment, communication); // connexion vers le serveur (utilise un cookie qui traine) client.connexionCookie(); @@ -61,10 +65,10 @@ $(document).ready( $("#footer .conditions").click(function(){ pages.afficherPage("conditions_utilisation"); }); pages.ajouterPage(new euphorik.PageMinichat(client, formateur, util, communication), true); - pages.ajouterPage(new euphorik.PageAdmin(client, formateur, util)); + pages.ajouterPage(new euphorik.PageAdmin(client, formateur, util, communication)); pages.ajouterPage(new euphorik.PageProfile(client, formateur, util)); pages.ajouterPage(new euphorik.PageRegister(client, formateur, util)); - pages.ajouterPage(new euphorik.PageAbout(client, formateur, util)); + pages.ajouterPage(new euphorik.PageAbout(client, formateur, util, communication)); pages.ajouterPage("conditions_utilisation"); pages.afficherPage(); diff --git a/js/pageAbout.js b/js/pageAbout.js index d51557c..733f77e 100644 --- a/js/pageAbout.js +++ b/js/pageAbout.js @@ -16,18 +16,17 @@ // You should have received a copy of the GNU General Public License // along with Euphorik. If not, see . -euphorik.PageAbout = function(client, formateur, util) { +euphorik.PageAbout = function(client, formateur, util, communication) { this.nom = "about"; this.client = client; this.formateur = formateur; - this.util = util; + this.util = util; + this.communication = communication; }; euphorik.PageAbout.prototype.contenu = function() { - var contenu = ""; - $.ajax({async: false, url: "pages/about.html", success : function(page) { contenu += page; }}); - + var contenu = this.communication.load("pages/about.html"); var email = this.util.rot13("znvygb:tert.oheev@tznvy.pbz"); return contenu.replace("{EMAIL}", "" + email + "").replace("{EMAIL_LIEN}", email); }; diff --git a/js/pageAdmin.js b/js/pageAdmin.js index fc1d51a..9ed847e 100644 --- a/js/pageAdmin.js +++ b/js/pageAdmin.js @@ -21,12 +21,13 @@ /*jslint laxbreak:true */ -euphorik.PageAdmin = function(client, formateur, util) { +euphorik.PageAdmin = function(client, formateur, util, communication) { this.nom = "admin"; this.client = client; this.formateur = formateur; this.util = util; + this.communication = communication; this.comet = new Comet("admin", euphorik.conf.versionProtocole); @@ -61,7 +62,7 @@ euphorik.PageAdmin.prototype.charger = function() { var thisPage = this; // la liste des trolls proposés par les ekMasters - this.trolls = new euphorik.Trolls(this.client, this.util, this.formateur); + this.trolls = new euphorik.Trolls(this.client, this.util, this.formateur, this.communication); this.waitEvent(); @@ -102,26 +103,13 @@ euphorik.PageAdmin.prototype.posterTroll = function() { return; } - var dataToSend = { - "header" : { "action" : "put_troll", "version" : euphorik.conf.versionProtocole }, - "cookie" : this.client.cookie, - "content" : content - }; - - jQuery.ajax({ - type: "POST", - url: "request", - dataType: "json", - data: this.util.jsonVersAction(dataToSend), - success: - function(data){ - if (data.reply === "ok") { - $("#page form#nouveauTroll input.troll").val(""); - } else if (data.reply === "error") { - thisPageAdmin.util.messageDialogue(data.error_message); - } - } - }); + this.communication.requete( + "put_troll", + {"cookie" : this.client.cookie, "content" : content}, + function(data) { + $("#page form#nouveauTroll input.troll").val(""); + } + ); }; /** @@ -133,63 +121,51 @@ euphorik.PageAdmin.prototype.majIPs = function() { } var thisPageAdmin = this; - - var dataToSend = { - "header" : { "action" : "list_banned_ips", "version" : euphorik.conf.versionProtocole }, - "cookie" : this.client.cookie - }; - - jQuery.ajax({ - type: "POST", - url: "request", - dataType: "json", - data: this.util.jsonVersAction(dataToSend), - success: - function(data) { - if (data.reply === "list_banned_ips") { - var XHTML = ""; - data.list.each(function(i, ip) { - XHTML += '
' + ip.ip + '|' + - '' + - ip.remaining_time + - '|'; - ip.users.each(function(j, user) { - XHTML += (j > 0 ? ", " : "") + - '' + thisPageAdmin.formateur.traitementComplet(user.nick) + '' + - (user.login === "" ? "" : ''); - }); - XHTML += 'débannir
'; - }); - - if (data.list.length === 0) { - XHTML += '

Aucune IP bannie

'; - } - - $("#ips").html(XHTML); - - $(".ban").each(function() { - var ip = $(".ip", this).html(); - $(".deban", this).click( - function() { - thisPageAdmin.util.messageDialogue("Êtes-vous sur de vouloir débannir l'IP ''" + ip + "'' ?", euphorik.Util.messageType.question, - {"Oui" : function() { - thisPageAdmin.deban(ip); - }, - "Non" : function(){} - } - ); + + this.communication.requete( + "list_banned_ips", + {"cookie" : this.client.cookie}, + function(data) { + var XHTML = ""; + data.list.each(function(i, ip) { + XHTML += '
' + ip.ip + '|' + + '' + + ip.remaining_time + + '|'; + ip.users.each(function(j, user) { + XHTML += (j > 0 ? ", " : "") + + '' + thisPageAdmin.formateur.traitementComplet(user.nick) + '' + + (user.login === "" ? "" : ''); + }); + XHTML += 'débannir
'; + }); + + if (data.list.length === 0) { + XHTML += '

Aucune IP bannie

'; + } + + $("#ips").html(XHTML); + + $(".ban").each(function() { + var ip = $(".ip", this).html(); + $(".deban", this).click( + function() { + thisPageAdmin.util.messageDialogue("Êtes-vous sur de vouloir débannir l'IP ''" + ip + "'' ?", euphorik.Util.messageType.question, + {"Oui" : function() { + thisPageAdmin.deban(ip); + }, + "Non" : function(){} } ); - }); - } else if (data.reply === "error") { - thisPageAdmin.util.messageDialogue(data.error_message); - } + } + ); + }); - // rafraichissement toutes les minutes (je sais c'est mal) - // le problème est le rafraichissement des temps restant de bannissement qui doit être fait du coté client - thisPageAdmin.timeoutIDmajIPs = setTimeout(function(){ thisPageAdmin.majIPs(); }, 60 * 1000); - } - }); + // rafraichissement toutes les minutes (je sais c'est mal) + // le problème est le rafraichissement des temps restant de bannissement qui doit être fait du coté client + thisPageAdmin.timeoutIDmajIPs = setTimeout(function(){ thisPageAdmin.majIPs(); }, 60 * 1000); + } + ); }; /** @@ -197,25 +173,11 @@ euphorik.PageAdmin.prototype.majIPs = function() { */ euphorik.PageAdmin.prototype.deban = function(ip) { var thisPageAdmin = this; - - var dataToSend = { - "header" : { "action" : "unban", "version" : euphorik.conf.versionProtocole }, - "cookie" : this.client.cookie, - "ip" : ip - }; - - jQuery.ajax({ - type: "POST", - url: "request", - dataType: "json", - data: this.util.jsonVersAction(dataToSend), - success: - function(data){ - if(data.reply === "error") { - thisPageAdmin.util.messageDialogue(data.error_message); - } - } - }); + + this.communication.requete( + "unban", + {"cookie" : this.client.cookie, "ip" : ip} + ); }; /** @@ -251,10 +213,11 @@ euphorik.Troll = function(content, author) { /////////////////////////////////////////////////////////////////////////////////////////////////// -euphorik.Trolls = function(client, util, formateur) { +euphorik.Trolls = function(client, util, formateur, communication) { this.client = client; this.util = util; this.formateur = formateur; + this.communication = communication; this.dernierTroll = 0; this.trolls = {}; @@ -352,51 +315,18 @@ euphorik.Trolls.prototype.supprimerTrollEvent = function(data) { }; euphorik.Trolls.prototype.modifier = function(id, content) { - var thisTrolls = this; - - var dataToSend = { - "header" : { "action" : "mod_troll", "version" : euphorik.conf.versionProtocole }, - "cookie" : this.client.cookie, - "troll_id" : id, - "content" : content - }; - - jQuery.ajax({ - type: "POST", - url: "request", - dataType: "json", - data: this.util.jsonVersAction(dataToSend), - success: - function(data) { - if (data.reply === "error") { - thisTrolls.util.messageDialogue(data.error_message); - } - } - }); + this.communication.requete( + "mod_troll", + {"cookie" : this.client.cookie, "troll_id" : id, "content" : content} + ); }; /** * Supprime un troll en fonction de son id. */ euphorik.Trolls.prototype.supprimer = function(id) { - var thisTrolls = this; - - var dataToSend = { - "header" : { "action" : "del_troll", "version" : euphorik.conf.versionProtocole }, - "cookie" : this.client.cookie, - "troll_id" : id - }; - - jQuery.ajax({ - type: "POST", - url: "request", - dataType: "json", - data: this.util.jsonVersAction(dataToSend), - success: - function(data) { - if (data.reply === "error") { - thisTrolls.util.messageDialogue(data.error_message); - } - } - }); + this.communication.requete( + "del_troll", + {"cookie" : this.client.cookie, "troll_id" : id} + ); }; diff --git a/js/pageStatique.js b/js/pageStatique.js index f5a4c2c..4580bf3 100644 --- a/js/pageStatique.js +++ b/js/pageStatique.js @@ -19,14 +19,13 @@ /** * Correspond à une page html statique se nommant ".html" et se trouvant dans "/pages/". */ -euphorik.PageStatique = function(nom) { +euphorik.PageStatique = function(nom, communication) { this.nom = nom; + this.communication = communication; }; euphorik.PageStatique.prototype.contenu = function() { - var contenu = ""; - $.ajax({async: false, url: "pages/" + this.nom + ".html", success : function(page) { contenu += page; }}); - return contenu; + return this.communication.load("pages/" + this.nom + ".html"); }; euphorik.PageStatique.prototype.charger = function() { diff --git a/js/pages.js b/js/pages.js index df515e6..2f0abfc 100644 --- a/js/pages.js +++ b/js/pages.js @@ -22,8 +22,9 @@ /** * Gestion des pages. */ -euphorik.Pages = function(fragment) { - this.fragment = fragment; +euphorik.Pages = function(fragment, communication) { + this.fragment = fragment; + this.communication = communication; this.pageCourante = undefined; this.pageDefaut = undefined; this.pages = {}; @@ -36,7 +37,7 @@ euphorik.Pages = function(fragment) { */ euphorik.Pages.prototype.ajouterPage = function(page, defaut) { if (typeof page === "string") { - page = new euphorik.PageStatique(page); + page = new euphorik.PageStatique(page, this.communication); } page.pages = this; // la magie des langages dynamiques : le foutoire diff --git a/js/util.js b/js/util.js index 86c4e79..800d80b 100644 --- a/js/util.js +++ b/js/util.js @@ -186,9 +186,9 @@ euphorik.Util.prototype.infoBulle = function(message, element, position) { * Utilisé pour l'envoie de données avec la méthode ajax de jQuery. * Obsolète : à virer */ -euphorik.Util.prototype.jsonVersAction = function(json) { +/*euphorik.Util.prototype.jsonVersAction = function(json) { return { action : JSON.stringify(json) }; -}; +};*/ /** * Retourne un hash md5 d'une chaine, dépend de md5.js. diff --git a/modules/erl/euphorik_requests.erl b/modules/erl/euphorik_requests.erl index 1cd460a..3ec70f3 100755 --- a/modules/erl/euphorik_requests.erl +++ b/modules/erl/euphorik_requests.erl @@ -29,7 +29,7 @@ % Point d'entrée pour les requêtes AJAX sur http://www.euphorik.ch/request. -out(A) -> +out(A) -> IP = case inet:peername(A#arg.clisock) of {ok, {Adresse, _Port}} -> Adresse; _ -> inconnue diff --git a/styles/1/euphorik.css b/styles/1/euphorik.css index 54aef62..8ad1bff 100755 --- a/styles/1/euphorik.css +++ b/styles/1/euphorik.css @@ -22,6 +22,25 @@ body { margin: 0px; } +/***** Une barre de progression s'affichant lors des communications entre le client et le serveur *****/ +#waitbar { + text-align: center; + height: 16px; + width:100%; + position: fixed; + left: 0px; + top: 0px; + z-index: 500; +} +#waitbar .image { + background-image: url(../../img/waitbar.gif); + margin-top: 3px; + margin-right: 3px; + float: right; + height: 13px; + width: 105px; +} + /***** Textile *****/ em.leger { font-style: italic