From 784e21644150dc43de89449f5383e5a281476f55 Mon Sep 17 00:00:00 2001 From: Greg Burri Date: Sun, 12 Oct 2008 14:25:20 +0000 Subject: [PATCH] =?utf8?q?MOD=20passage=20syst=C3=A8matique=20par=20l'obje?= =?utf8?q?t=20Communication=20ADD=20affichage=20d'une=20barre=20de=20progr?= =?utf8?q?ession=20(waitbar)=20lors=20de=20communication=20entre=20le=20cl?= =?utf8?q?ient=20et=20le=20serveur=20(sauf=20dans=20le=20cas=20d'une=20com?= =?utf8?q?munication=20COMET=20(comet.js),=20=C3=A0=20am=C3=A9liorer=20par?= =?utf8?q?=20la=20suite)=20#4?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- img/waitbar.gif | Bin 0 -> 3748 bytes index.yaws | 1 + js/communication.js | 61 +++++++-- js/euphorik.js | 12 +- js/pageAbout.js | 9 +- js/pageAdmin.js | 204 ++++++++++-------------------- js/pageStatique.js | 7 +- js/pages.js | 7 +- js/util.js | 4 +- modules/erl/euphorik_requests.erl | 2 +- styles/1/euphorik.css | 19 +++ 11 files changed, 161 insertions(+), 165 deletions(-) create mode 100644 img/waitbar.gif diff --git a/img/waitbar.gif b/img/waitbar.gif new file mode 100644 index 0000000000000000000000000000000000000000..35030397523013a337ab8f31909ecc01b2831cd5 GIT binary patch literal 3748 zcma))R6>ethB*_3Bw&em9yM~UFI-sWi5PPf%`?aVe!kr|_0 zg10FmA~%?(0Sbs|tVg!QU?qIfi}Khe~b|RfkfnQP8?508IU?t)DVFR5AE+s$2L1W^MJi9p*E$yN1@Zt~j|& zZ{2G1W8yOMP3Y$!Onic{X>cQV9pTm0Q}Cc~g7Y^YW)5+`b-$ofK+)vf=yQUMuF->B zciUstw$vQhy9H*6^Dj71eEaQV6y5)P%hp#{mi08e(I@J%Bj|?P!cTN3+s)R?>uW)t{O^ohpZ9@JWhRFpEzgF`a zNi8=CuahFLCYz_HqkPQWkL%=9G})*L6ZLnSp+Qm5O^b{4U~4gF!7EqJhhggcTo@E@ z{Azlv($DBRSA)^^+YgDFkG>#Yp!N-1IUIg1Y^OK+lrPrD1Me3XiAzchO}>-3GXxE~ zdnw~~CJ~(Flujn)WarwW0SLCpm5MEf(+Rs+1x{QVzl>ocsD^S&D>&R*BXN0sos2JU zcx)%7=(b3VdC!!Us`k3BhVG``=X6vXRiPY_jty&GPEPbpy`CsFva;M_eRyWgmWL-? z!gbtccvW*8RxUUDEQs+15dWG7kuFXm#D3Kq!`yny+_I_8LaL!IvgYW^V5M0o4g!OjAEy3rZgD8_Ag9fug|{dL*%@%PfBjERKcqJ6N2aj^;bQAcmTb zF#g)T=FE9eLnc*r*-lj&+c$bJFyv;K!9^eMt4DlsSf>blEap~9^0nKk7eV(f6Ydf- zz?liSY;ulWVt!WfKMIkMJSu{QqeB^2Ssaopzu4&kuN-OPX}}cmd6N3NO6@^ZKSluc z;wn2M!IL(rx|PwX>FRi<+i2KcrtGF^Z8_34HZ=~IeYEA|lum0zXY|@H+H&YqE13Rj z#oh1+TYjUR40|<9lW~EuoCWTULd-#EgkuUTKue@NgcKa~JSYyFekYokoJAmc zM`z>|!hu{{NPY>tG~2oSav78nz~U5CP(As%Koy7gsFv=aUx$z|#qtUfqNd(}TiYOP zZ!1@*I$E2Q4o@kDf@dx2(xCxa|H!x}u)%86zhBL{a{Be`4Zx-?*4r$#m9S=&+sP%7-z)*XTnQr!N$8sg z@j;Woye46v#^Z_QTb_U}+n-K8BwcwnEduQig6?`!w3a~m(dD>>EpJh*J*&Mc<9!-}deFIv5IxMxVf8x6n#M=T%U{HF-U38`|o z-JnI%Cew(k&6Hh2b?4Av_h<)YWI_gPwlIHVYW3F4dUgi0^6*17MwI z5lr!)5PVXk!6yXs`Z~YJLUXnQ@=PcHjok_UIz?nVbjJ&_}#V zaYchjC~K;vz^deux|S?admBSx(5iYaPc!R~X}X3wsl$(6j*Y&k)t__ZwB@$<@7!xa z>myDsjrd|CEbM2~1ew=IM@D>fR8f>2C=B7u{j-9DHoQuG3uc$ z3URxtvwK5pSCrZF=Dyw$*_g6?R5&&HvUdFrQ!C3Ea7c+up65_FFdm%Ys8&q>7JTD4;CS!~d=3VFxAr7H>}MB@lQs-@ z1Bkaj%*JR!J~9Sf + 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 -- 2.45.2