Forum Discussion

jaread83's avatar
jaread83
Champion
9 years ago

Online users component query

Hello,

I found a good example of an 'online users' component here and it works exactly how I needed it to. Unfortunately a few users have pointed out that you can't identify between a standard user and mods/admins in the list of avatars that appear. The API in the linked version does not show any data to identify the roles of each online member.

How can I convert the above code sample to bring out the users roles (admin/mod) and apply a class to the user container? Here is the component code I am using:

<#assign users = rest("/users/online/registered?page_size=100").users />
 
<#if users.user?has_content>
       <div class="lia-panel lia-panel-standard users-online-wrapper">
              <div class="lia-decoration-border">
                     <div class="lia-decoration-border-top">
                           <div> </div>
                     </div>
                     <div class="lia-decoration-border-content">
                           <div>
                                  <div class="lia-panel-heading-bar-wrapper">
                                         <div class="lia-panel-heading-bar">
                                                <span class="lia-panel-heading-bar-title">${text.format("module.users-online.title")}</span>
                                         </div>
                                  </div>
                                  <div class="lia-panel-content-wrapper">
                                         <div class="lia-panel-content">
                                                <div id="customUsersOnline" class="customUsersOnline">
                                                       <#list users.user as onlineUser>
                                                              <#assign avatar = rest(onlineUser.@href+"/profiles/avatar/size/message").image />
                                                              <a href="${onlineUser.@view_href}"><img src="${avatar.url}" title="${onlineUser.login}"></a>
                                                       </#list>
                                                </div>
                                         </div>
                                  </div>
                           </div>
                     </div>
<div class="lia-view-all">
<a class="lia-link-navigation view-all-link" href="/t5/forums/usersonlinepage">view all</a>
</div>
                     <div class="lia-decoration-border-bottom">
                           <div> </div>
                     </div>
              </div>
       </div>
</#if>

Any help on this would be greatly appreciated!

    • jaread83's avatar
      jaread83
      Champion
      9 years ago

      Thanks for providing the reference for the roles. I am not sure if I am getting this 100% right though (I am kind of new to this). I have tried calling the role name in as a class in a similar way the avatar is within the list but the component fails when saving in Studio. Here is the loop..

      <#list users.user as onlineUser>
    <#assign avatar = rest(onlineUser.@href+"/profiles/avatar/size/message").image />
    <#assign rank = rest("users/id/${onlineUser.id}/roles").role />
    <a class="rank-${rank}" href="${onlineUser.@view_href}">
        <img src="${avatar.url}" title="${onlineUser.login}">
    </a>
</#list>

      Any ideas where I am going wrong?

      Many thanks

      • cike's avatar
        cike
        Champion
        9 years ago

         

        Your query is correct, but the way you access the response causes errors. The role object you recieving during the REST call contains different child elements. Therefore you cannot access like you do:

         

        <a class="rank-${rank}" href="${onlineUser.@view_href}">

        Instead try the following to set a CSS class:

         

        <a class="rank-${rank.id}" href="${onlineUser.@view_href}">
<a class="rank-${rank.name}" href="${onlineUser.@view_href}">

        Hopefully this will solve your problem.