AWESOMEBB] Ajouter ou retirer un membre des groupes depuis la liste des membres

Hello vous !

Il est assez tard et après une dure journée de travail et avoir aidé un collègue à remonter un frigo chez lui à plus de 22H je me suis mit sur le code. Et pour la première fois depuis longtemps je dois dire qu'il me semble impossible de réaliser ce que j'ai commencé. En effet je n'avais pas prévu de ne pouvoir récupérer aucune information envoyée par un formulaire via la console. Habituellement lorsque l'on soumet un formulaire on peut voir via la console la requête envoyée au serveur mais pour celui-ci rien ! Ni javascript, ni requête ajax !
Alors soit je suis fatiguée et Milouze ou quelqu'un d'autre pourrait y voir plus clair, soit ce n'est vraiment pas possible.
J'avoue ne pas très bien comprendre...

Message envoyé via la réponse rapide par: @SeLfde4Th7

Bonjour,

Quelle est la question ? ^^ Trouver les requêtes à soumettre pour ajouter et supprimer le membre d'un groupe ?

De mon côté j'ai bien des requêtes POST avec les données suivantes :





Ou alors j'ai pas compris où ça coince ? (Ce qui est fort probable   )

Bonne journée et merci ^^

Message envoyé via la réponse rapide par: @chattigre

Hello chattigre,
donc si notre cher Maxime ne peut rien faire,ton sujet peut être clôturé cher ami.
De mon côté j'ai beau chercher mais que nini aucune relation possible.

Le chiffre correspond à l'id du groupe et non du membre.

Message envoyé via la réponse rapide par: @Milouze14

Milouze14 a écrit:donc si notre cher Maxime ne peut rien faire,ton sujet peut être clôturé cher ami.

Je vais quand même lui laisser le temps de lire nos messages avant de le clôturer éventuellement

Milouze14 a écrit:De mon côté j'ai beau chercher mais que nini aucune relation possible.

Le chiffre correspond à l'id du groupe et non du membre.

Aucune relation entre ?
Si le souci est de récupérer les groupes auxquels le membre appartient ou n'appartient pas, il serait possible de proposer les deux actions ajouter et supprimer pour tous les groupes. Tenter d'ajouter un membre à un groupe dont il fait déjà partie ne fera pas sauter le forum :-D

Quant au chiffre, effectivement ma phrase était mal positionnée dans mon message, et en plus, 5 était dans mon test l'id du membre ET du groupe. Message édité

Alors, il est presque impossible enfin pour moi de récupérer tel ou tel membre dans un groupe défini car on a pas les infos comme mentionné dans mon message initial.
On peut trouver le lien du groupe en se basant sur des groupes ouverts et ayant une couleur d'attribuėe.
Mais le reste c'est à mon avis impossible chattigre.

Message envoyé via la réponse rapide par: @Milouze14

Milouze14 a écrit:Alors, il est presque impossible enfin pour moi de récupérer tel ou tel membre dans un groupe défini car on a pas les infos comme mentionné dans mon message initial.
On peut trouver le lien du groupe en se basant sur des groupes ouverts et ayant une couleur d'attribuėe.
Mais le reste c'est à mon avis impossible chattigre.

Oui, c'est ce que je pensais aussi au départ en fait. Impossible de deviner / récupérer les groupes auxquels le membre appartient.
Mais en faisant une liste des groupes avec leur nom et id directement dans le script et en proposant les deux actions sans regarder si le membre appartient déjà au groupe ou non, c'est peut-être possible... ? A voir

Je sais bien qu'entre la théorie et la pratique...

Hello, j'ai pas le temps de rentrer dans les explications, encore une fois j'ai travailler tard sur le problème et il est temps pour moi d'aller me coucher. Sachez juste que je n'avais pas de visuel sur les requêtes POST jusqu'à ce que chattigre me les envoi dans son message. Le système est maintenant fonctionnel, il me reste 2-3 retours visuels à faire. Identifier d'éventuel bogues ou conflits mais l'ajout et la suppression d'un membre à partir de cette liste fonctionne .

Bonne soirée

Message envoyé via la réponse rapide par: @SeLfde4Th7

Hello Maxime,
c'est une très bonne nouvelle que tu nous apportes .
Enfin pour chattigre .

Message envoyé via la réponse rapide par: @Milouze14

Hello
C'est super effectivement, félicitations !  



Merci beaucoup et bon courage pour la fin !

chattigre a écrit:
Hello
C'est super effectivement, félicitations !  

Pour les requêtes sinon sous Firefox tout simplement Clic droit-Inspecter -> Onglet Réseau -> J'ajoute un membre dans un groupe -> Clic sur la requête POST de la page (la première normalement) puis onglet Requête. C'est comme ça que j'ai récupéré les infos pour ma part.
Sinon quand je cherche le fonctionnement d'un formulaire je regarde les attributs name des champs

Merci beaucoup et bon courage pour la fin !

Bien sur je connais tout ça. Que ce soit sous Firefox ou Chrome je n'avais pas de visuel sur la requête et pour le coup la valeur que l'on doit donner à 'members[]' n'était pas défini et j'ai fait mes premiers tests sans le tid qui se trouve dans beaucoup de formulaires mais n'est pas obligatoire pour valider tout les formulaires ^^.

Message envoyé via la réponse rapide par: @Self

Alors comme je vais être absent ou moins jusqu'à mardi j'ai décidé que ce serez vous qui aller chercher d'éventuels bogues ou d'éventuelles questions à me poser sur le fonctionnement. 

Je vais essayer d'être le plus clair possible et pour commencer on va faire le plus simple dans votre feuille de style vous allez tout simplement copier/coller ce code :

Code:

#groupstool{
   z-index: 999;
   position: fixed;
   top: 22%;
   left: 40%;
   background: beige;
   padding: 30px;
   border-radius: 8px;
   box-shadow: 1px 1px 2px #000;
}
#groupstool.hidden{ display: none; }
#groupstool.visible{ display: block; }
.gtool .gps{ display: block; }
.check i{
   font-size: 40px;
   color: forestgreen;
   margin: 0 25px;
   float: right;
   display: none;
}

Puis ensuite il faut savoir que depuis peu j'utilise de petit bout de code pour des choses courantes des forums que j'ai besoin de récupérer régulièrement dans mes codes.
Don pour votre demande j'ai utilisé un code que j'avais déjà placé dans mon template overall_footer_end avant la balise de fermeture body ce code:

Code:

<script>const _tid = _navbar.logout.url.match(/tid=[a-z0-9]+/)[0].replace('tid=', '');</script>

Il nous permettra de récupérer facilement le tid.   
Et pour finir, la machine qui fait tout le travail, le template memberlist_body :

Code:

<div class="page-header">
    <h1>{PAGE_TITLE}</h1>
</div>

<form action="{S_MODE_ACTION}" method="get">
    <label>
        <span>{L_ORDER_OR_SELECT}</span>
        <input type="text" class="inputbox" name="username" maxlength="25" size="20" placeholder="{L_USER_SELECT}" value="{L_USER_SELECT_VALUE}" />
    </label>

    <div class="quick-options quick-options-left">
        <div class="option">
            <div class="option-title">{L_SELECT_SORT_METHOD}</div>
            {S_MODE_SELECT}
        </div>

        <div class="option">
            <div class="option-title">{L_ORDER}</div>
            {S_ORDER_SELECT}
        </div>

        {S_HIDDEN_SID}
        <input class="btn btn-default" type="submit" name="submit" value="{L_SUBMIT}" />
    </div>
</form>

<div class="forumbg-table">
    <table class="table1" cellspacing="1" id="memberlist">
        <thead class="mobile-hidden">
        <tr>
            <th class="number">#</th>
            <th class="name">{L_AVATAR} - {L_USERNAME}</th>
            <!-- BEGIN switch_th_group -->
            <th class="group">{L_GROUPS}</th>
            <!-- END switch_th_group -->
            <!-- BEGIN switch_th_point -->
            <th class="point">{L_POINT}</th>
            <!-- END switch_th_point -->
            <th class="interests">{L_INTERESTS}</th>
            <th class="joined">{L_JOINED}</th>
            <th class="active">{L_VISITED}</th>
            <th class="posts">{L_POSTS}</th>
            <th class="pm">{L_PM}</th>
            <th class="website">{L_WEBSITE}</th>
        </tr>
        </thead>
        <tbody>
        <!-- BEGIN memberrow -->
        <tr class="{memberrow.ROW_CLASS}">
            <td class="mobile-hidden">{memberrow.ROW_NUMBER}</td>
            <td class="avatar-mini">
                <a href="{memberrow.U_VIEWPROFILE}">
                  {memberrow.AVATAR_IMG} &nbsp; <span class="member {memberrow.ROW_NUMBER}">{memberrow.USERNAME}</span>
              </a> <span class="m_search {memberrow.ROW_NUMBER}"><i class="material-icons">settings</i></span>
                <span class="mobile-visible memberlist-number">
                     #{memberrow.ROW_NUMBER}
                  </span>
                <span class="mobile-visible">
                     <div class="memberlist-info"><b>{L_INTERESTS}:</b> {memberrow.INTERESTS}</div>
                     <div class="memberlist-info"><b>{L_JOINED}:</b> {memberrow.JOINED}</div>
                     <div class="memberlist-info"><b>{L_VISITED}:</b> {memberrow.LASTVISIT}</div>
                     <div class="memberlist-info"><b>{L_POSTS}:</b> {memberrow.POSTS}</div>
                     <div class="memberlist-info"><b>{L_PM}:</b> {memberrow.PM_IMG}</div>
                     <div class="memberlist-info"><b>{L_WEBSITE}:</b> {memberrow.WWW_IMG}</div>
                  </span>
            </td>
            <!-- BEGIN switch_td_group -->
            <td><span class="gps">{memberrow.GROUPS}</span></td>
            <!-- END switch_td_group -->
            <!-- BEGIN switch_td_point -->
            <td>{memberrow.POINTS}</td>
            <!-- END switch_td_point -->
            <td class="mobile-hidden">{memberrow.INTERESTS}</td>
            <td class="mobile-hidden">{memberrow.JOINED}</td>
            <td class="mobile-hidden">{memberrow.LASTVISIT}</td>
            <td class="mobile-hidden">{memberrow.POSTS}</td>
            <td class="mobile-hidden text-center">{memberrow.PM_IMG}</td>
            <td class="mobile-hidden text-center">{memberrow.WWW_IMG}</td>
        </tr>
        <!-- END memberrow -->
        <!-- BEGIN switch_no_user -->
        <tr class="row1">
            <td colspan="{switch_no_user.COLSPAN_NUMBER}">{switch_no_user.L_NO_USER}</td>
        </tr>
        <!-- END switch_no_user -->
        </tbody>
    </table>
</div>

<div class="pagination">
    <!-- BEGIN switch_pagination -->
    {PAGINATION}
    <!-- END switch_pagination -->
</div>
<script>
$(function(){
   let tools = `<article id="groupstool" class="hidden">
               <form action="" method="post" name="post">
                  <h2></h2>
                  <div class="gtool">
                  </div>
                  <select id="groupsChoice">
                     <option value="">Choisir un groupe</option>
                     <option value="2">Modérateurs</option>
                     <option value="3">groupe 1</option>
                     <option value="4">groupe 2</option>
                  </select><input class="btn btn-default" type="submit" name="add" value="Ajouter"><span class="check"><i class="material-icons">check_circle</i></span>
                  <input type="hidden" id="username" name="username">
                  <input type="hidden" name="g">
                  <input type="hidden" name="tid">
               </form>
            </article>`;
   let removeUser = function(uid){
      $('.gps').each(function(){
         $(this).append('<i class="material-icons">cancel</i>');
      });
      $('.gps i').click(e =>{
         let tgt = e.target.parentElement, a = tgt.getAttribute('data-action'), g = tgt.getAttribute('data-g');
         $('#groupstool form').attr('action', a);
         $('input[name="g"]').attr('value', g);
         let options = new Array();
         options.push({name: 'members[]', value: uid}, {name: 'remove', value: 'supprimer+la+sélection'}, $('#groupstool form').serializeArray());
         $.post(a, options, function(){
            tgt.remove();
         });
      });
   }, groupList = function(user, uid){
      $.get('/memberlist?mode=groups&order&submit=Ok&username='+user, function(d){
         $('.gtool').html($('.gps', d));
         removeUser(uid);
         $('#groupstool').toggleClass('visible hidden');
         $('#groupstool h2').text('Groupe auxquels appartient '+user);
         $('#groupsChoice option').each(function(){
            for(let i = 1; i < ($('.gps').length+1); i++){
               if($(this).text() == $('.gps:nth-child('+i+')').text().replace('cancel', '')){
                  $(this).attr('disabled');
                  $('.gps:nth-child('+i+')').attr('data-action', '/g'+$(this).attr("value")+'-'+$(this).text().replace(" ", "-")).attr('data-g', $(this).attr('value'));
               }
            }
         });
         $('#groupsChoice').on('change', e => {
            let s = $("#groupsChoice option:selected"), t = s.text().replace(' ', '-'), v = '/g'+s.attr('value')+'-'+t;
            $('#groupstool form').attr('action', v);
            $('input[name="g"]').val(s.val());
         });
         $('#groupstool form').submit(e =>{
            e.preventDefault();
            let options = new Array(), a = $('#groupstool form').attr('action');
            options.push({name: 'username', value: $('#username').attr('value')}, {name: 'add', value: 'Ajouter+le+membre'}, {name: 'g', value: $('input[name="g"]').attr('value')}, {name: 'tid', value: _tid});
            console.log(options);
            $.post(a, options, function(){
               let s = $("#groupsChoice option:selected").attr('value'), t = $("#groupsChoice option:selected").text();
               $('.check i').fadeIn('fast').delay('1000').fadeOut('fast');
               $('.gtool').prepend('<span class="gps" data-action="'+$('#groupstool form').attr('action')+'" data-g="'+s+'">'+t+'<i class="material-icons">cancel</i></span>');
               $('.gps:first i').click(e =>{
                  let tgt = e.target.parentElement, a = tgt.getAttribute('data-action'), g = tgt.getAttribute('data-g');
                  let options = new Array();
                  options.push({name: 'members[]', value: uid}, {name: 'remove', value: 'supprimer+la+sélection'}, $('#groupstool form').serializeArray());
                  $.post(a, options, function(){
                     tgt.remove();
                  });
               });
            });
            return;
         });
      });
   };
   $('.m_search').click(e =>{
      e.preventDefault();
      let u = e.currentTarget.classList[1], user = $('.member.'+u).text(), uid = $('.member.'+u).parent().attr('href').match(/[0-9]+/)[0];
      $('#groupsChoice option').each(function(){ $(this).removeAttr('disabled'); });
      $('#username').val(user);
      $('#dimmer').toggleClass('visible hidden').click(e =>{ $('#groupstool').attr('hidden'); });
      groupList(user, uid);
   });
   if(!_userdata.user_level == 1) $('.m_search').remove();
   else $('body').append(tools); $('input[name="tid"]').attr('value', _tid);
});
</script>

Cette machine vous permet pour chaque membre de récupérer les groupes VISIBLES auxquels il appartient, de le supprimer en 1 clique de l'ajouter en 1 clique également dans les groupes voulu.
Votre travail dans ce code va êtres de modifier la variable :

Code:

   let tools = `<article id="groupstool" class="hidden">
               <form action="" method="post" name="post">
                  <h2></h2>
                  <div class="gtool">
                  </div>
                  <select id="groupsChoice">
                     <option value="">Choisir un groupe</option>
                     <option value="2">Modérateurs</option>
                     <option value="3">groupe 1</option>
                     <option value="4">groupe 2</option>
                  </select><input class="btn btn-default" type="submit" name="add" value="Ajouter"><span class="check"><i class="material-icons">check_circle</i></span>
                  <input type="hidden" id="username" name="username">
                  <input type="hidden" name="g">
                  <input type="hidden" name="tid">
               </form>
            </article>`;

Seulement le select pour y inclure les groupes visibles de votre forum ainsi que leur identifiant, Ainsi si vous avez un groupe Modérateurs mais que son identifiant est le 18, il va falloir remplacer le 2 par 18. Je ne m'attarde pas trop la dessus, vous ne semblait pas être le plus novice.
 Mais !! Attention le javascript est sensible à la casse, si vous mettez modérateurs sans majuscule ou sans accent, le système sera défaillant pour ce groupe.
Dernière petite précision, le système ne s'adresse qu'aux administrateurs et non pas aux modérateurs de groupe, évident puisque l'on est plus sur l'administration d'un groupe mais l'administration de tout les membres.  
Ah si aussi je n'ai pas traité les cas ou le membre ferait déjà parti du groupe ou que le membre ne pourrait pas être supprimer du dit groupe, il ne s'agirait dans ce cas que du fondateur et ça alourdirait le code, donc ça me semble inutile 

Hello @Self

En un mot : Génial
Cela correspond parfaitement à ce que je souhaite pouvoir faire, c'est super !

Des quelques tests que j'ai fait, le système semble en effet fonctionner chez moi également !

J'ai juste quelques détails qui m'intriguent :

Code:

$('#groupsChoice option').each(function(){
                for(let i = 1; i < ($('.gps').length+1); i++){
                   if($(this).text() == $('.gps:nth-child('+i+')').text().replace('cancel', '')){
                      $(this).attr('disabled');
                      $('.gps:nth-child('+i+')').attr('data-action', '/g'+$(this).attr("value")+'-'+$(this).text().replace(" ", "-")).attr('data-g', $(this).attr('value'));
                   }
                }
             });

Si je ne me trompe pas, ce bout de code ajoute un attribut disabled aux option correspondantes aux groupes dont l'utilisateur est déjà membre afin de ne pas pouvoir "l'ajouter deux fois" ?
Actuellement il ne fonctionne pas chez moi si c'est cela.
Du coup si je tente d'ajouter un membre dans un groupe dont il fait déjà partie, au niveau technique en soit pas d'erreur, mais le groupe est de nouveau ajouté à la liste des groupes du membre et apparait donc deux fois

---

Il y a également quelque chose de pas très net au niveau des attributs data-action des span.gps qui sont générés avec majuscules et caractères accentués.
A la limite plutôt que d'avoir des data-action="g2-Groupe-Accentué", data-action="g2-" aurait je pense le même effet (On peut mettre n'importe quoi après le gxx- , le lien marche toujours mais bon
PS : Attention question casse-pipe spéciale dev   : Il se passe quoi si j'ai un groupe avec des guillemets " ? ^^
Bon, je vais m'arranger pour ne pas en avoir je pense

--

Sinon d'un point de vue plus fonctionnel que technique, est-ce que ce serait compliqué de récupérer après que le membre ait été ajouté ou supprimé d'un groupe son éventuelle couleur de pseudo et d'actualiser celle-ci (en Ajax toujours) sur la liste des membres sans qu'un rechargement ne soit nécessaire. ça me serait bien utile pour voir l'avancement de mes affectations ^^
Après, si c'est possible tant mieux, si ce n'est pas possible ou que c'est long à faire, tant pis !

Pour le reste ce sera des ajustements visuels, mais c'est largement dans mes compétences ça ^^

et félicitations

PS : Bien vu la récupération des groupes du membre, j'avais pas pensé que l'on pouvait filtrer le mode groupes de la liste des membres avec le pseudo ^^

Un énorme Merci encore une fois et bonne journée aussi ^^

Hello Maxime,
tout d'abord, merci pour ce merveilleux développement mon ami,
je rencontre des soucis lorsque je veux modifier plusieurs fois des membres, j'ai l'impression que les lignes se cumulent :






Message envoyé via la réponse rapide par: @Milouze14

Re,
Je confirme le souci de Milouze.
Par ailleurs il est possible de soumettre un ajout sans avoir sélectionné de groupe (option 0 "Choisir un groupe"), le groupe "Choisir un groupe" est alors ajouté à la liste des groupes du membre...

Bonne journée

Message envoyé via la réponse rapide par: @chattigre

Hello, je suis sur téléphone (mon amie dort et j'avais hâte de voir vos retour j'avoue ), je vais donc seulement pourvoir faire du théorique. En effet l'attribut disabled devrait régler pas mal de soucis si il fonctionne . Mais je n'ai pas pensé à l'ajouter lorsque l'on ajoute un groupe et il ne fonctionne plus pour moi non plus ça m'étais sorti de la tête.. Pour l'option choisir un groupe il ne s'agit que de l'ajout d'une condition donc très simple .
La couleur c'est un détail visuel qui va demander une requête une fois que l'autre sera terminée. Je veux bien mais un utilisateur fera certainement les actions plus vite que les rendus visuels.
Pour les guillemets c'est une très bonne remarque surtout pour les apostrophes, je ne sais pas comment ils sont transformer dans les URL mais j'y regarderai à mon retour .
Bonne journée à vous.

Message envoyé via la réponse rapide par: @Self

Hello vous deux !

Je n'ai pas encore fait de test avec les guillemets mais je peux déjà vous donner le code suivant pour remplacer le javascript du template memberlist_body, tout les fonctionnements incohérents signalés dans vos précédents messages ont normalement étaient corrigés  .

Code:

$(function(){
   let tools = `<article id="groupstool" class="hidden">
               <form action="" method="post" name="post">
                  <h2></h2>
                  <div class="gtool">
                  </div>
                  <select id="groupsChoice">
                     <option value="">Choisir un groupe</option>
                     <option value="2">Modérateurs</option>
                     <option value="3">groupe 1</option>
                     <option value="4">groupe 2</option>
                  </select><input class="btn btn-default" type="submit" name="add" value="Ajouter"><span class="check"><i class="material-icons">check_circle</i></span>
                  <input type="hidden" id="username" name="username">
                  <input type="hidden" name="g">
                  <input type="hidden" name="tid">
               </form>
            </article>`;
   let getColor = function(user, userPlace){
      $.get('/memberlist?mode=lastvisit&order=DESC&submit=Ok&username='+user, function(d){
         let newColor = $('.member span', d).attr('style');
         if(newColor && $('.member.'+userPlace).html().indexOf('strong') == -1){ let w = $('.member.'+userPlace).text(); $('.member.'+userPlace).html('<span style="'+newColor+'"><strong>'+w+'</strong></span>');
         }else if(newColor){ $('.member.'+userPlace+' span').attr('style', newColor);
         }else{ let w = $('.member.'+userPlace).text(); $('.member.'+userPlace).html(w); }
      });
   }, removeUser = function(uid){
      $('.gps').each(function(){
         $(this).append('<i class="material-icons">cancel</i>');
      });
      $('.gps i').click(e =>{
         let tgt = e.target.parentElement, a = tgt.getAttribute('data-action'), g = tgt.getAttribute('data-g');
         $('#groupstool form').attr('action', a);
         $('input[name="g"]').attr('value', g);
         $('#groupsChoice option:disabled[value="'+g+'"]').removeAttr('disabled');
         let options = new Array();
         options.push({name: 'members[]', value: uid}, {name: 'remove', value: 'supprimer+la+sélection'}, $('#groupstool form').serializeArray());
         $.post(a, options, function(){
            tgt.remove();
         }).done(function(){getColor($('#username').attr('value'), uid);});
      });
   }, groupList = function(user, uid, userPlace){
      $.get('/memberlist?mode=groups&order&submit=Ok&username='+user, function(d){
         $('.gtool').html($('.gps', d));
         removeUser(uid);
         $('#groupstool').toggleClass('visible hidden');
         $('#groupstool h2').text('Groupe auxquels appartient '+user);
         $('#groupsChoice option').each(function(){
            for(let i = 1; i < ($('.gps').length+1); i++){
               if($(this).text() == $('.gps:nth-child('+i+')').text().replace('cancel', '')){
                  $('.gps:nth-child('+i+')').attr('data-action', '/g'+$(this).attr("value")+'-'+$(this).text().replace(" ", "-")).attr('data-g', $(this).attr('value'));
                  $(this).attr('disabled', '');
               }
            }
         });
         $('#groupsChoice').on('change', e => {
            $('#groupsChoice').css('background', 'initial');
            let s = $("#groupsChoice option:selected"), t = s.text().replace(' ', '-'), v = '/g'+s.attr('value')+'-'+t;
            $('#groupstool form').attr('action', v);
            $('input[name="g"]').val(s.val());
         });
         $('#groupstool form').submit(e =>{
            e.preventDefault();
            if(!$("#groupsChoice option:selected").attr('value') == ''){
               let options = new Array(), a = $('#groupstool form').attr('action');
               options.push({name: 'username', value: $('#username').attr('value')}, {name: 'add', value: 'Ajouter+le+membre'}, {name: 'g', value: $('input[name="g"]').attr('value')}, {name: 'tid', value: _tid});
               $.post(a, options, function(){
                  let s = $("#groupsChoice option:selected").attr('value'), t = $("#groupsChoice option:selected").text();
                  $("#groupsChoice option:selected").attr('disabled', '');
                  $('.check i').fadeIn('fast').delay('1000').fadeOut('fast');
                  $('.gtool').prepend('<span class="gps" data-action="'+$('#groupstool form').attr('action')+'" data-g="'+s+'">'+t+'<i class="material-icons">cancel</i></span>');
                  $('.gps:first i').click(e =>{
                     let tgt = e.target.parentElement, a = tgt.getAttribute('data-action'), g = tgt.getAttribute('data-g');
                     let options = new Array();
                     options.push({name: 'members[]', value: uid}, {name: 'remove', value: 'supprimer+la+sélection'}, $('#groupstool form').serializeArray());
                     $('#groupsChoice option:disabled[value="'+g+'"]').removeAttr('disabled');
                     $.post(a, options, function(){
                        tgt.remove();
                        $('#groupsChoice option:first').attr('selected', '');
                     }).done(function(){getColor($('#username').attr('value'), uid);});
                  });
                  $('#groupsChoice option:first').attr('selected', '');
               }).done(function(){getColor($('#username').attr('value'), uid);});
               return;
            }else{
               $('#groupsChoice').css('background', 'antiquewhite');
            }
         });
      });
   };
   $('.m_search').click(e =>{
      e.preventDefault();
      let u = e.currentTarget.classList[1], user = $('.member.'+u).text(), uid = $('.member.'+u).parent().attr('href').match(/[0-9]+/)[0];
      $('#groupsChoice option').each(function(){ $(this).removeAttr('disabled'); });
      $('#username').val(user);
      $('#dimmer').toggleClass('visible hidden').click(e =>{ $('#groupstool').attr('hidden'); });
      groupList(user, uid, u);
   });
   if(!_userdata.user_level == 1) $('.m_search').remove();
   else $('body').append(tools); $('input[name="tid"]').attr('value', _tid);
});

Message envoyé via la réponse rapide par: @Self

Hello Maxime,
le soucis d'affichage est réglè,
pour les ajouts ou suppression d'un membre via la liste des membres,
c'est parfait pour moi.
Je ne remonte aucune erreur .
Félicitations pour ce développement Maxime.



Message envoyé via la réponse rapide par: @Milouze14

Hello,
Aucune erreur de mon côté non plus, c'est juste parfait ^^

Si, juste ce bout de code qui si je ne me trompe pas est la fonction pour récupérer la nouvelle couleur :

Code:

let getColor = function(user, userPlace){
      $.get('/memberlist?mode=lastvisit&order=DESC&submit=Ok&username='+user, function(d){
        let newColor = $('.member span', d).attr('style');
        if(newColor && $('.member.'+userPlace).html().indexOf('strong') == -1){ let w = $('.member.'+userPlace).text(); $('.member.'+userPlace).html('<span style="'+newColor+'"><strong>'+w+'</strong></span>');
        }else if(newColor){ $('.member.'+userPlace+' span').attr('style', newColor);
        }else{ let w = $('.member.'+userPlace).text(); $('.member.'+userPlace).html(w); }
      });
  },

Il est apparemment inactif chez moi
Je me demande si ce n'est pas l'appel

Code:

.done(function(){getColor($('#username').attr('value'), uid);});

Qui ne correspond pas ?

Mais effectivement je confirme la résolution des bugs signalés auparavant !

Il reste juste ceci pas forcément très valide au niveau syntaxique d'url avec cet attribut data-action qui garde majuscules et accents ? ^^

Code:

<span class="gps" data-action="/g14-Adhérents" data-g="14">Adhérents<i class="material-icons">cancel</i></span>

D'ailleurs je pense que pour ça comme pour les guillemets le code devrait marcher en mettant juste /g14- sans le nom du groupe dans l'url (puisque la page s'affiche de toute manière)


Merci encore !  
Bonne journée

PS : La prochaine fois faites-moi penser à sauvegarder le code du select avec tous les groupes, j'ai zappé et j'ai tout ressaisi comme un idiot

chattigre a écrit:
Je me demande si ce n'est pas l'appel

Le script a été copié, un simple Ctrl + V et hop le tour est joué.

Code:

.done(function(){getColor($('#username').attr('value'), uid);});

Qui ne correspond pas ? 

Ou on ne parlait pas du même nom qui devait changer de couleur, le nom qui change de couleur est celui de la liste des membres et pas celui présent dans le cadre.

Pour le reste j'ai essayé de mettre un groupe qui s'appelle t'es"té et je n'ai aucun problème ? Est-ce le cas chez toi ?

Message envoyé via la réponse rapide par: @Self

Re,
Non non c'est bien le nom de la liste des membres, chez moi il ne s'actualise pas quand j'ajoute ou retire un membre d'un groupe coloré (de plus haute hiérarchie bien entendu)...

Ça marche de ton côté ? Je referai des tests demain, mais franchement ça marche pas chez moi (je crois mdr)

EDIT : J'ai refait un test vite fait ça ne fonctionne pas, je regarderai demain ou mercredi par rapport à mes (rares) autres JS, mais normalement ils n'agissent sur rien concernant les membres...


Message envoyé via la réponse rapide par: @chattigre

Bonjour,

Non, je viens de réessayer avec JS désactivés, l'outil continue de fonctionner mais je n'ai toujours pas le changement de couleur...

En revanche assez aléatoirement (alors que c'était systématique avant), la requête d'ajout au groupe est envoyée deux voire trois fois... Un souci de requête qui s'envoie parfois avant une autre à quelques millisecondes près ?

Bonne journée

Salut ! 

Ecoutes je ne reproduit pas le problème de la couleur alors je ne sais pas si le changement que je vais te demander de faire va changer quelque chose mais ça à résolu pour le moi le problèmes de requêtes qui s'envoyaient affectivement plusieurs fois sous Firefox.
Change donc dans le javascript cette partie :

Code:

         $('#groupstool form').submit(e =>{
            e.preventDefault();
            if(!$("#groupsChoice option:selected").attr('value') == ''){

Par ceci : 

Code:

         $('#groupstool form').submit(e =>{
            e.preventDefault();
            e.stopPropagation();
            if(!$("#groupsChoice option:selected").attr('value') == ''){

Tu vois si ça résout le problème de changement de couleur et si ce n'est pas le cas et que tu as la possibilité de me donner un accès à ton forum, je pourrais peut-être reproduire le problème.

Message envoyé via la réponse rapide par: @Self

Salut,

Non rien à faire, toujours pas de couleur...

Pour info, la bonne requête est bien envoyée, c'est donc je pense le traitement du résultat qui plante...

Te donner accès au forum ça voudrait dire un accès admin ça m'embête un peu quand même (vis-à-vis des données perso des membres qui sont dessus j'entends), si tu mets mon template sur ton forum test est-ce que le changement de couleur marche toujours ? J'ai peut-être planté un c/c mdr...

Spoiler:

Enfin après j'ai comparé les templates avec un logiciel, la seule différence c'est des groupes en plus dans la liste ^^
J'ai essayé sous Chrome, même problème...
Le overall_header n'est pas personnalisé, et le seul autre template publié est le overall_footer_end (pour la contante du tid) et viewtopic_body qui n'a rien à voir...

J'avais un JS actif sur toutes les pages (et donc sur la liste des membres), désactivé, même résultat...

Donc je me demande si j'ai bien la derniere version du code du coup

Merci !

Message envoyé via la réponse rapide par: @chattigre

Bha j'ai même cherché dans la configuration du forum et rien ne pourrait laisser prétendre une quelconque différence. J'ai vu que tu avais un forum test en phpbb3. Si tu testes sur ce forum en version AwesomeBB c'est la même chose ?

Message envoyé via la réponse rapide par: @Self

Salut,
Alors j'ai cherché, j'ai testé, plusieurs groupes, plusieurs membres et plusieurs forums ^^, en fait, le code marche, mais pas comme il devrait ^^
Je précise que je reproduis ce comportement sur mes deux forums.

Quand la coloration se fait, il semble y avoir confusion entre le rang (colonne # de la liste) et l'id du membre

Par exemple si l'utilisateur u4 change de groupe, c'est le 4e utilisateur de la liste qui change de couleur, et pas l'utilisateur u4 !!
Bien évidemment si l'id de l'utilisateur correspond à sa position dans la liste, le bug est transparent....

J'ai vu ça par hasard, disons que je cherchais pas du tout dans ce sens, mais bon au bout d'un certain temps je me suis rendu compte de ça ^^

Est-ce que tu reproduis ?

Bonne soirée

Message envoyé via la réponse rapide par: @chattigre

Alors j'ai pas essayé mais d'après ce que tu me décris essaie plutôt comme ça ?

Code:

$(function(){
   let tools = `<article id="groupstool" class="hidden">
               <form action="" method="post" name="post">
                  <h2></h2>
                  <div class="gtool">
                  </div>
                  <select id="groupsChoice">
                     <option value="">Choisir un groupe</option>
                     <option value="2">Modérateurs</option>
                     <option value="3">groupe 1</option>
                     <option value="4">groupe 2</option>
                  </select><input class="btn btn-default" type="submit" name="add" value="Ajouter"><span class="check"><i class="material-icons">check_circle</i></span>
                  <input type="hidden" id="username" name="username">
                  <input type="hidden" name="g">
                  <input type="hidden" name="tid">
               </form>
            </article>`;
   let getColor = function(user, userPlace){
      $.get('/memberlist?mode=lastvisit&order=DESC&submit=Ok&username='+user, function(d){
         let newColor = $('.member span', d).attr('style');
         if(newColor && $('.member.'+userPlace).html().indexOf('strong') == -1){ let w = $('.member.'+userPlace).text(); $('.member.'+userPlace).html('<span style="'+newColor+'"><strong>'+w+'</strong></span>');
         }else if(newColor){ $('.member.'+userPlace+' span').attr('style', newColor);
         }else{ let w = $('.member.'+userPlace).text(); $('.member.'+userPlace).html(w); }
      });
   }, removeUser = function(uid, userPlace){
      $('.gps').each(function(){
         $(this).append('<i class="material-icons">cancel</i>');
      });
      $('.gps i').click(e =>{
         let tgt = e.target.parentElement, a = tgt.getAttribute('data-action'), g = tgt.getAttribute('data-g');
         $('#groupstool form').attr('action', a);
         $('input[name="g"]').attr('value', g);
         $('#groupsChoice option:disabled[value="'+g+'"]').removeAttr('disabled');
         let options = new Array();
         options.push({name: 'members[]', value: uid}, {name: 'remove', value: 'supprimer+la+sélection'}, $('#groupstool form').serializeArray());
         $.post(a, options, function(){
            tgt.remove();
         }).done(function(){getColor($('#username').attr('value'), userPlace);});
      });
   }, groupList = function(user, uid, userPlace){
      $.get('/memberlist?mode=groups&order&submit=Ok&username='+user, function(d){
         $('.gtool').html($('.gps', d));
         removeUser(uid, userPlace);
         $('#groupstool').toggleClass('visible hidden');
         $('#groupstool h2').text('Groupe auxquels appartient '+user);
         $('#groupsChoice option').each(function(){
            for(let i = 1; i < ($('.gps').length+1); i++){
               if($(this).text() == $('.gps:nth-child('+i+')').text().replace('cancel', '')){
                  $('.gps:nth-child('+i+')').attr('data-action', '/g'+$(this).attr("value")+'-'+$(this).text().replace(" ", "-")).attr('data-g', $(this).attr('value'));
                  $(this).attr('disabled', '');
               }
            }
         });
         $('#groupsChoice').on('change', e => {
            $('#groupsChoice').css('background', 'initial');
            let s = $("#groupsChoice option:selected"), t = s.text().replace(' ', '-'), v = '/g'+s.attr('value')+'-'+t;
            $('#groupstool form').attr('action', v);
            $('input[name="g"]').val(s.val());
         });
         $('#groupstool form').submit(e =>{
            e.preventDefault();
            e.stopPropagation();
            if(!$("#groupsChoice option:selected").attr('value') == ''){
               let options = new Array(), a = $('#groupstool form').attr('action');
               options.push({name: 'username', value: $('#username').attr('value')}, {name: 'add', value: 'Ajouter+le+membre'}, {name: 'g', value: $('input[name="g"]').attr('value')}, {name: 'tid', value: _tid});
               $.post(a, options, function(){
                  let s = $("#groupsChoice option:selected").attr('value'), t = $("#groupsChoice option:selected").text();
                  $("#groupsChoice option:selected").attr('disabled', '');
                  $('.check i').fadeIn('fast').delay('1000').fadeOut('fast');
                  $('.gtool').prepend('<span class="gps" data-action="'+$('#groupstool form').attr('action')+'" data-g="'+s+'">'+t+'<i class="material-icons">cancel</i></span>');
                  $('.gps:first i').click(e =>{
                     let tgt = e.target.parentElement, a = tgt.getAttribute('data-action'), g = tgt.getAttribute('data-g');
                     let options = new Array();
                     options.push({name: 'members[]', value: uid}, {name: 'remove', value: 'supprimer+la+sélection'}, $('#groupstool form').serializeArray());
                     $('#groupsChoice option:disabled[value="'+g+'"]').removeAttr('disabled');
                     $.post(a, options, function(){
                        tgt.remove();
                        $('#groupsChoice option:first').attr('selected', '');
                     }).done(function(){getColor($('#username').attr('value'), userPlace);});
                  });
                  $('#groupsChoice option:first').attr('selected', '');
               }).done(function(){getColor($('#username').attr('value'), userPlace);});
               return;
            }else{
               $('#groupsChoice').css('background', 'antiquewhite');
            }
         });
      });
   };
   $('.m_search').click(e =>{
      e.preventDefault();
      let u = e.currentTarget.classList[1], user = $('.member.'+u).text(), uid = $('.member.'+u).parent().attr('href').match(/[0-9]+/)[0];
      $('#groupsChoice option').each(function(){ $(this).removeAttr('disabled'); });
      $('#username').val(user);
      $('#dimmer').toggleClass('visible hidden').click(e =>{ $('#groupstool').attr('hidden'); });
      groupList(user, uid, u);
   });
   if(!_userdata.user_level == 1) $('.m_search').remove();
   else $('body').append(tools); $('input[name="tid"]').attr('value', _tid);
});

Je pense que oui en écrivant le code j'ai passé en paramètre de la fonction l'id de l'utilisateur et pas sa classe ^^ .

Message envoyé via la réponse rapide par: @Self