[AWESOMEBB] Adapter un code pour afficher les événements du calendrier dans un widget

Rappel du premier message :

Bonsoir à tous,


Je suis passé dernièrement sur la version awesomeBB.
De ce fait j'ai plusieurs codes qui ne sont plus adaptés (ils étaient prévus pour la version punbb).

Notamment j'avais un code qui récupéré les événements qui étaient dans le calendrier pour les afficher dans un widget, celui ci :

Code:

$(function(){(function(){
      try{
      var max_jours=999;
      var tri=[],i=0,ii,d=new Date(),$liste=$("<ul>",{class:'mon_calendrier'}),genObjet=function(d){
            try{
            var a,b=[],d=d;
            $('#main-content table.table.calendar td[class^="row"]',d).each(function(i,e){
            var $e=$(e),oC={},AAAA,MM,JJ;
            oC[i]={},oC=oC[i];
            oC.evenements=false;
            oC.anniversaires=false;
            oC.date=$e.find('p').eq(0).text();
            //Timestamps
            oC.annee=/\d{4}/.exec(oC.date)[0]*1;
            oC.jour=/\d{2}/.exec(oC.date)[0]*1;
            //Un peu plus compliqué pour le mois
            oC.date.replace(/[^\s]{3,4}(?=\s+\d{4})/,function($$){
            var mois=['jan','fév','mar','avr','mai','juin','juil','aoû','sep','oct','nov','déc'];
            oC.mois=mois.indexOf($$.toLowerCase());
            });
            //Création d'un timestamp déterminant le début du jour
            oC.dJ_timestamp=(new Date(oC.annee,oC.mois,oC.jour,0,0,0,0)).getTime();
            //Création d'un timestamp déterminant la fin du jour
            oC.fJ_timestamp=oC.dJ_timestamp+86400000;
            //on incrémente de 1 le mois
            oC.mois+=1;
            //Le jour dans le calendrier est stocké.
            oC.object=$e;
            if(!$e.find('ul a.genmed').length){b.push(oC);return}
                  a=$e.find('ul a.genmed');
                  a.each(function(i,e){
                      $(e).each(function(ii,e){
                        var ev;
                        if(e.href.indexOf('display=birth')!=-1){
                        !oC.anniversaires&&(oC.anniversaires={});
                        oC.anniversaires[i]={};
                        ev=oC.anniversaires[i]}else{
                        !oC.evenements&&(oC.evenements={});
                        oC.evenements[i]={};
                        ev=oC.evenements[i]}
                      ev.titre=$(e).text();
                      ev.html=$(e).parents('li').eq(0).html();
                      })
                      });
                      b.push(oC);
            });
          return b}catch(e){console.log(e)}
          },nouvelle_url=function(){
      var AAAA,MM;
      AAAA=d.getFullYear();
      MM=d.getMonth()+1+i;
      if(!(MM<=12)){AAAA+=1;MM=1;}
      if(MM<10)MM='0'+MM;
      i++;
      return '/calendar?start='+AAAA+MM+'01';
      };
      $.when(
      $.ajax({method:'GET',cache:false,url:nouvelle_url()}),
      $.ajax({method:'GET',cache:false,url:nouvelle_url()}),
      $.ajax({method:'GET',cache:false,url:nouvelle_url()})
      ).done(function(){
          'use strict';
          var date=(new Date()).getTime(),i,ii,mois=[],tri=[];
          /*
          C'est la fonction genObjet déclarée plus haut qui crée un objet avec tous les jours du mois.
          On l'utilise sur toutes les requêtes AJAX faites.
          */
          for(i in arguments){
                var d=arguments[i][0];
                mois.push(genObjet(d));
          }
          /*On parcourt le tableau des mois*/
          for(i in mois){/*1 mois*/
            for(ii in mois[i]){/*1 jour*/
                /*on teste pour chaque jour*/
                if(date<mois[i][ii].fJ_timestamp&&mois[i][ii].evenements&&tri.length<max_jours)tri.push(mois[i][ii]);
            }
          }
      /*
      Notre tableau de tri contient à présent les jours où il y a un évènement à venir...
      Il est temps de s'attaquer à la mise en forme de notre liste
      */
      for(i in tri){
          $("<li>",{class:'center date',text:tri[i].date}).appendTo($liste);
          for(ii in tri[i].evenements){
            $("<li>",{class:'center evenement'}).html(tri[i].evenements[ii].html).appendTo($liste)
          }
      }
      /*
      Et voila notre liste est déjà créée :O !
      Ne nous reste donc plus qu'à l'ajouter à un élément du DOM disposant d'un identifiant,
      prochains_evenements
      par exemple.
      */
      $liste.appendTo('#prochains_evenements');
      }
      );
      }catch(e){console.log(e)}
    })()});

Ma demande est donc de savoir quelles modifications ils faut faire pour qu'il fonctionne à nouveau svp.


Merci de l'aide,
Tony

Voila qui est installé, tu avais pris l'ancien code ça ne pouvait donc pas marcher ;)

Pour référence, voici le code complet (la classe + le code qui la manipule):

Code:

class calendrier{
    constructor(date=new Date()){
        this.mois=date.getMonth()+1;
        if(this.mois<10)this.mois='0'+this.mois;
        this.annee=date.getFullYear();
    }
    entrees(){
        return new Promise((res,rej)=>{
            const m=this.obtention();
            m.then(
                d=>{
                    const doc=d.target.response;
                    let t,jours=doc.querySelectorAll('.calendar-day-date'),mois={};
                    for(let j of jours){
                        let jour_num=/\D*(\d{1,2})\D*/.exec(j.textContent)[1]*1;
                        let debut_jour=new Date(this.annee,this.mois*1-1,jour_num).getTime();
                        let fin_jour=new Date(this.annee,this.mois*1-1,jour_num+1).getTime();
                        let list=j.nextSibling;
                        let anniversaires=(t=list.querySelectorAll('a[href*="display=birth"]'),t.length?t:!1);
                        if(anniversaires)for(let a of anniversaires)a.href=a.href.replace(/\??change_version=\w+/,'');
                        let evenements=(t=list.querySelectorAll('a[href*="/t"],a[href*="/e"]'),t.length?t:!1);
                        if(evenements)for(let a of evenements)a.href=a.href.replace(/\??change_version=\w+/,'');
                        mois[j.textContent]={"date":j.textContent,"jour":jour_num,"mois":this.mois*1,"annee":this.annee,debut_jour,fin_jour,anniversaires,evenements};
                    }
                    res(mois);
                },
                e=>rej(e)
            )
        })
    }
    obtention(){
        return new Promise((res,rej)=>{
            try{
                let xhr=new XMLHttpRequest();
                xhr.addEventListener("error",e=>rej(e));
                xhr.addEventListener("timeout",e=>rej(e));
                xhr.addEventListener("load",d=>res(d));
                xhr.responseType="document";
                xhr.timeout=3000;
                xhr.open("GET",`/calendar?change_version=modernbb&start=${this.annee}${this.mois}01`);
                xhr.send();
            }catch(e){
                rej(e);
            }
        })
    }
};
$(function(){
    let d=new Date();
    /*On compte extraire 3 mois du calendrier à partir du mois en cours*/
    const moisCalendrier=[new calendrier().entrees(),new calendrier((d.setMonth(d.getMonth()+1),d)).entrees(),new calendrier((d.setMonth(d.getMonth()+1),d)).entrees()];
    Promise.all(moisCalendrier).then(v=>{
        for(let entrees of v){
            /*tri*/
            let x=Object.getOwnPropertyNames(entrees).sort((c,f)=>{
                return /\D*(\d{1,2})\D*/.exec(c)[1]</\D*(\d{1,2})\D*/.exec(f)[1]?-1:1;
            });
            /*Exploitation des données*/
            for(let i of x){
                let jour=entrees[i];
                if(!jour.anniversaires&&!jour.evenements)continue;
                $("<h4>",{text:jour.date,class:"date"}).appendTo("#prochains_evenements");
                if(jour.anniversaires){
                    for(let a of jour.anniversaires){
                        $("<div>").append(a).addClass("anniversaire").appendTo("#prochains_evenements");
                    }
                }
                if(jour.evenements){
                    for(let a of jour.evenements){
                        $("<div>").append(a).addClass("evenement").appendTo("#prochains_evenements");
                    }
                }
            }
        }
    });
});


Oh, super ! Merci bien :))

Euh, si je peux te demander une amélioration.. Par exemple l'exposition 1 est sur trois jours, elle apparait donc 3 fois dans le widget.
Il serait possible de ne l'a fait apparaitre qu'une fois ?

Lorsque l'on clique sur un événement, la mis en forme n'est pas la même que le forum en lui même. C'est normal ?

Ma foi ce serait possible mais es-tu sûr de vouloir faire cela ?
Tu as conscience que ça implique que des jours pendant lesquels il y a une exposition en cours risquent purement et simplement de ne plus s'afficher ?

Je ne vois aucune différence de mon côté, lorsque tu cliques sur un évènement tu es redirigé vers le sujet donc pas d'écart de mise en forme.

Salut Arnaud, Tony,
je suis tombé sur ce topic via google recherchant sur le FDF une réponse à ce problème : créer un widget prochains événements sur awesomebb. Et me voilà Milouzien...
Je viens de l'installer sur mon forum test, et le code fait buguer le portail http://bf-v22.forumactif.com/

Salut, peux-tu indiquer quel est le bug en question ?
De mon côté aucun bug.

Autant pour moi, j'ai supprimer les cookies et l'affichage des événements et revenu à la normal :-)

Humm, oui il faut que j'y réfléchissent.. Ou mettre la date dans le titre ou la durée quelque part

Salut, le bug se produit quand depuis le widget généré, je survole un lien vers un événement. C'est d'abord la barre de navigation tout en haut du forum qui disparaît, ensuite quelques secondes après, le header, puis tout la page sauf le footer, seul élément qui reste.

Ok je viens de constater le souci mais j'ignore pourquoi ça ne marche pas sur le tien, je vais te créer une version sans la partie qui fait dérailler tout ça.

Sympa Arnaud merci, mais ça ne donne rien. Il n'y a plus de bug par contre.
J'ai plusieurs pistes :
- j'ai mis le code complet "sur toutes les pages", c'est bien ça ?
- j'ai mis le widget sur l'index et sur le portail, c'est juste à un endroit ?

- sinon j'ai peut-être un conflit avec d'autres scripts ?
Script prochains évènements   
Scripts persos sur les sujets   
SoundCloud_Player
Boutton_SoundCloud_editeur   
Messages préformatés du staff   
MPF du staff
Category colors and icons   
Merci

Je t'en prie, script modifié, essaie avec cette version:

Code:

class calendrier{
    constructor(date=new Date()){
        this.mois=date.getMonth()+1;
        if(this.mois<10)this.mois='0'+this.mois;
        this.annee=date.getFullYear();
    }
    entrees(){
        return new Promise((res,rej)=>{
            const m=this.obtention();
            m.then(
                d=>{
                    const doc=d.target.response;
                    let t,jours=doc.querySelectorAll('.calendar-day-date'),mois={};
                    for(let j of jours){
                        let jour_num=/\D*(\d{1,2})\D*/.exec(j.textContent)[1]*1;
                        let debut_jour=new Date(this.annee,this.mois*1-1,jour_num).getTime();
                        let fin_jour=new Date(this.annee,this.mois*1-1,jour_num+1).getTime();
                        let list=j.nextSibling;
                        let anniversaires=(t=list.querySelectorAll('a[href*="display=birth"]'),t.length?t:!1);
                        if(anniversaires)for(let a of anniversaires){
                            a.href=a.href.replace(/\??change_version=\w+/,'');
                            a.removeAttribute("onmouseover");
                            a.removeAttribute("onmouseout");
                        }
                        let evenements=(t=list.querySelectorAll('a[href*="/t"],a[href*="/e"]'),t.length?t:!1);
                        if(evenements)for(let a of evenements){
                            a.href=a.href.replace(/\??change_version=\w+/,'');
                            a.removeAttribute("onmouseover");
                            a.removeAttribute("onmouseout");
                        }
                        mois[j.textContent]={"date":j.textContent,"jour":jour_num,"mois":this.mois*1,"annee":this.annee,debut_jour,fin_jour,anniversaires,evenements};
                    }
                    res(mois);
                },
                e=>rej(e)
            )
        })
    }
    obtention(){
        return new Promise((res,rej)=>{
            try{
                let xhr=new XMLHttpRequest();
                xhr.addEventListener("error",e=>rej(e));
                xhr.addEventListener("timeout",e=>rej(e));
                xhr.addEventListener("load",d=>res(d));
                xhr.responseType="document";
                xhr.timeout=3000;
                xhr.open("GET",`/calendar?change_version=modernbb&start=${this.annee}${this.mois}01`);
                xhr.send();
            }catch(e){
                rej(e);
            }
        })
    }
};
$(function(){
    let d=new Date();
    /*On compte extraire 3 mois du calendrier à partir du mois en cours*/
    const moisCalendrier=[new calendrier().entrees(),new calendrier((d.setMonth(d.getMonth()+1),d)).entrees(),new calendrier((d.setMonth(d.getMonth()+1),d)).entrees()];
    Promise.all(moisCalendrier).then(v=>{
        for(let entrees of v){
            /*tri*/
            let x=Object.getOwnPropertyNames(entrees).sort((c,f)=>{
                return /\D*(\d{1,2})\D*/.exec(c)[1]</\D*(\d{1,2})\D*/.exec(f)[1]?-1:1;
            });
            /*Exploitation des données*/
            for(let i of x){
                let jour=entrees[i];
                if(!jour.anniversaires&&!jour.evenements)continue;
                $("<h4>",{text:jour.date,class:"date"}).appendTo("#prochains_evenements");
                if(jour.anniversaires){
                    for(let a of jour.anniversaires){
                        $("<div>").append(a).addClass("anniversaire").appendTo("#prochains_evenements");
                    }
                }
                if(jour.evenements){
                    for(let a of jour.evenements){
                        $("<div>").append(a).addClass("evenement").appendTo("#prochains_evenements");
                    }
                }
            }
        }
    });
});


Au passage, sois le bienvenu parmi nous ;)

Hum, par contre un anniversaire vient d'apparaitre au 20 juillet sur le widget, bizarre

Merci ça fonctionne !

no_way a écrit:Au passage, sois le bienvenu parmi nous

Merci !

Oui c'est normal, l'anniversaire est bien indiqué sur ton calendrier, si tu ne souhaites pas afficher les anniversaires c'est possible, il suffit d'ajouter dans ta feuille de style:

Code:

#prochains_evenements .anniversaire{
    display:none;
}

Super ! Merci encore Arnaud :))

Ce serait beaucoup de travail pour aller pour afficher les événements sur une durée plus longue que 3 mois ? Ou il faut peut être modifier une variable ?

Je t'en prie, non c'est au contraire très simple mais combien de mois veux-tu afficher ?

Hum, en fait il n'y à pas de concours d'oiseaux tout les mois.. C'est souvent en fin d'année après septembre.
Bref :-)

Sur 6 mois, voir sur l'année en cours serait l'idéal

J'ai directement modifié le script sur ton forum pour traiter une année complète d'avance.

Je viens de mettre le code sur mon forum officiel. Je n'obtiens pas le meme resultat arf, toutes les dates s'affichent dans le widget, tu peux le voir ici : https://www.diamant-mandarin-evo.com/portal , tout en bas

Sans doute trop de requêtes à la fois, modifie:

Code:

moisCalendrier.length<12

par:

Code:

moisCalendrier.length<6

Hum apparemment non, j'ai testé avec celui sur 3 mois, meme resultat

12 mois à récupérer prenait trop de temps (ajax timeout), j'ai limité à 6 mois et augmenté le délai maximal d'attente à 10 secondes, ça devrait fonctionner à présent.

Oui, génial ! C'est parfait et super pratique :))))

Un grand merci Arnaud ! Je mets en résolu

Bon week-end