Staff Widget Issue

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Screenshot of problem : http://prntscr.com/fwsn40
Who the problem concerns : All members
When the problem appeared : Today
Forum link : http://www.canvastutorials.org/

Description of problem

So I used the following code on my forum:

Code:

<ul id="staff_widget">
</ul><script type="text/javascript">
/*
 *  Código: Widget staff online
 *  Criado no dia: 18/07/2014
 *  Última atualização: 15/07/2017
 *  Feito por: Daemon
 *  Não distribuir, ou remover os créditos do autor
 */
jQuery(document).on("ready", function() {
  var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget
 
  storedValue = sessionStorage.getItem("online_staff");
  (storedValue) ? staffWidget.html(storedValue) : staffOnline();
 
  setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
  }, 180000); // staffOnline function, reload every 3 minutes
 
  function staffOnline() {
      var staff = {
        "Administrator": "4C94FF",
        "Community Manager": "00F0AC",
        "Content Coordinator": "E38800"
      };
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
            staffWidget.html("Loading...");
        },
        success: function(data) {
            staffWidget.html("");
            var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
            var staffColor;
            jQuery.each(staff, function(group, color) {
              staffColor = table.find("span[style*='" + color + "']");
              if (staffColor.length) {
                  var elStaff, userLink, userId, avatarSrc;
                  staffColor.each(function() {
                    elStaff = jQuery(this).parent().prop("outerHTML");
                    userLink = jQuery(elStaff).attr("href");
                    userId = userLink.split("/u")[1];
                    jQuery.get(userLink, function(e) {
                        avatarSrc = jQuery("#profile-advanced-right .module:eq(0) img:eq(0), .forumline td.row1.gensmall:first img:eq(0)", e).attr("src"); // PunBB, PHPBB3, Invision, PHPBB2
                        staffWidget.append(
                        "<li class='online_staff clearfix'>" +
                        "  <div class='div-icon-staff'>" +
                        "    <div class='staff-avatar'><img src='" + avatarSrc + "' alt='avatar'></div>" +
                        "  </div>" +
                        "  <div class='div-main-staff'>" +
                        "    <div class='staff-name'>" + elStaff + "</div>" +
                        "    <p class='staff-rank'>" + group + "</p>" +
                        "  </div>" +
                        "</li>"
                        );
                        sessionStorage.setItem("online_staff", staffWidget.html());
                    });
                  });
              }
            });
        },
        error: function(jqXhr, textStatus, errorThrown) {
            console.log(errorThrown);
        }
      });
  }
});
</script><style type="text/css">
ul#staff_widget { margin-left: 0!important; padding-left: 0!important; }

#staff_widget:empty:before {
    content: "There is no staff online!";
}
#staff_widget .online_staff {
  display: block;
  font-size: 14px;
  padding: 1px 0;
  zoom: 1;
}
#staff_widget .div-icon-staff {
  width: 25px;
  min-width: 25px;
  padding: 0 3px;
}
#staff_widget .div-icon-staff, #staff_widget .div-main-staff {
  display: table-cell;
  padding: 0 3px;
  vertical-align: top;
}
#staff_widget .staff-avatar {
  background: #fff;
  vertical-align: middle;
  display: inline-block;
  line-height: 1px;
  position: relative;
  margin: 2px;
  border-radius: 100%;
}
#staff_widget .staff-avatar img {
  width: 34px;
  height: 34px;
  border: 1px solid #ddd;
  border-radius: 100%;
}
#staff_widget .staff-mp {
  display: inline-block;
  float: right;
  margin-right: -25px;
}
#staff_widget .staff-rank {
  color: rgb(150, 150, 150);
  margin-top: 5px;
}

#left td.catLeft {
    border-bottom: solid 1px #2f2f2f;
    box-shadow: 0 1px 0 #0e0e0e;
    text-transform: uppercase; }

.module-title { text-align: left; }
</style>

Can be found here

Everything works fine and I managed to alter the styling to my liking, but for some reason it shows the Staff name as "Valoish" for 2 different users.. (Refer to screenshot).
The user with the mint coloered picture should be "Pantone" and the pink colored picture should be "Valoish"

I'm assuming the issue is coming from this line in the coding

Code:

                        "    <div class='staff-name'>" + elStaff + "</div>" +

but I don't know how to fix it x_x

I see the problem... try it now:

Code:

<ul id="staff_widget"></ul>
<script type="text/javascript">
/*
 *  Application: Staff Online Widget
 *  Date: 01/03/2017
 *  Version: 1.217072017
 *  Copyright (c) 2017 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
document.addEventListener("DOMContentLoaded", function(event) {

    function staffOnline() {

        var staff = [
            {group: "Administrator", color: "4C94FF"},
            {group: "Community Manager", color: "00F0AC"},
            {group: "Content Coordinator", color: "E38800"}
        ];

        var xhr1 = new XMLHttpRequest();
        xhr1.open("GET", "/viewonline", true);

        xhr1.onload = function() {
            if (xhr1.status >= 200 && xhr1.status < 400) {
                staffWidget.innerHTML = "";
                var tempDiv = document.createElement("div");
                tempDiv.innerHTML = xhr1.responseText;
                var table = tempDiv.querySelector(".table, .table1, .ipbtable, .three-col .forumline");
                var staffColor;
                // List each item in the array
                staff.forEach(function(item, i) {
                    staffColor = table.querySelectorAll("span[style*='" + item.color + "']");

                    // Check span elements that contain array colors
                    if (typeof(staffColor) != "undefined" && staffColor != null) {
                        var stafferHref, xhr2, tempDiv2, stafferName, stafferId, avatarSrc, elLi;
                        // For each existing color
                        Array.prototype.forEach.call(staffColor, function(el, i) {
                            stafferHref = el.parentNode.href;

                            xhr2 = new XMLHttpRequest();
                            xhr2.open("GET", stafferHref, true);

                            xhr2.onload = function() {
                                 if (xhr2.status >= 200 && xhr2.status < 400) {
                                    tempDiv2 = document.createElement("div");
                                    tempDiv2.innerHTML = xhr2.responseText;
                                    stafferName = el.parentNode.outerHTML;
                                    stafferId = el.parentNode.href.split("/u")[1];
                                    avatarSrc = tempDiv2.getElementsByClassName("module")[0].getElementsByTagName("img")[0].src;
                                    elLi =
                                    "<li class='online_staff clearfix'>" +
                                    "  <div class='div-icon-staff'>" +
                                    "    <div class='staff-avatar'><img src='" + avatarSrc + "' alt='avatar'></div>" +
                                    "  </div>" +
                                    "  <div class='div-main-staff'>" +
                                    "    <div class='staff-mp'><a href='/privmsg?mode=post&u=" + stafferId + "'><img src='https://2img.net/s/t/18/09/33/i_icon_pm.png' title='Send PM'></a></div>" +
                                    "    <div class='staff-name'>" + stafferName + "</div>" +
                                    "    <p class='staff-rank'>" + item.group + "</p>" +
                                    "  </div>" +
                                    "</li>";
                                    staffWidget.innerHTML += elLi;
                                    sessionStorage.setItem("online_staff", staffWidget.innerHTML);
                                }  else {
                                    // We reached our target server, but it returned an error
                                }
                            };

                            xhr2.onerror = function() {
                                // There was a connection error of some sort
                                console.log("** An error occurred during the transaction");
                            };

                            xhr2.send();
                        });
                    }
                });
            } else {
                // We reached our target server, but it returned an error
            }
        };

        xhr1.onerror = function() {
            // There was a connection error of some sort
            console.log("** An error occurred during the transaction");
        };

        xhr1.send();
    }

    var staffWidget = document.getElementById("staff_widget");
    storedValue = sessionStorage.getItem("online_staff");
    (storedValue) ? staffWidget.innerHTML = storedValue : staffOnline();
 
    setInterval(function() {
        sessionStorage.removeItem("online_staff");
        staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
});
</script>
<style type="text/css">
#staff_widget:empty:before {
    content: "Não há staff online!";
}
#staff_widget .online_staff {
  display: block;
  font-size: 14px;
  padding: 1px 0;
  zoom: 1;
}
#staff_widget .div-icon-staff {
  width: 25px;
  min-width: 25px;
  padding-top: 12px;
}
#staff_widget .div-icon-staff, #staff_widget .div-main-staff {
  display: table-cell;
  padding: 8px;
  vertical-align: top;
}
#staff_widget .staff-avatar {
  background: #fff;
  vertical-align: middle;
  display: inline-block;
  line-height: 1px;
  position: relative;
  margin: 2px;
}
#staff_widget .staff-avatar img {
  width: 34px;
  height: 34px;
  border: 1px solid #ddd;
}
#staff_widget .staff-mp {
  display: inline-block;
  float: right;
  margin-right: -25px;
}
#staff_widget .staff-rank {
  color: rgb(150, 150, 150);
  margin-top: 5px;
}
</style>

@Daemon, thanks for the help but now it just constantly keeps saying no staff online ; A;
I refreshed the page like 50 times and waited a few mins before trying again and it still wouldnt update.. I also tried to change the update time from 180000 to 10000 and 1000 and neither worked x_x

The code was tested on all versions and worked perfectly. If you allow me to access your forum for testing, contact me by private message.

@Daemon; Sent you a PM with acc info c:

Done!

Thank you so much~! :3

Please don't lock this topic just yet in case something glitches again xD

@Daemon, one last question; How can I remove this icon from the widget? I already removed the CSS and the HTML div from the code but the envelope still appears ><

All good now~