JS MC Monitoring

by cyberowl

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<a id="mon-refresh" onclick="refreshBtn()"><i class="fa fa-refresh"></i> Refresh</a>

<hr class="monitoring-hr-top-mon">
<div id="server0"></div>
<div id="server1"></div>
<div id="server2"></div>
<div id="server3"></div>
<hr class="monitoring-hr-bottom-mon">
<div id="globalOnline"></div>

CSS

#mon-refresh {
  text-decoration: none;
  cursor: pointer;
  font-size: 15px;
  text-shadow: 0 0 0 transparent, 0 0 1px rgba(0, 0, 0, 0.3);
  color: #646464;
}

#mon-refresh:hover {
  color: #333333;
}

.progress-text-mon {
  font-size: 15px;
  text-shadow: 0 0 0 transparent, 0 0 1px rgba(0, 0, 0, 0.3);
  font-family: "Myriad Pro", Tahoma, sans-serif;
  font-weight: normal;
  color: #646464;
}

.left-mon {
  cursor: default;
  padding-top: 5px;
  float: left;
}

.left-mon a {
  text-decoration: none;
  color: #646464 !important;
}

.right-mon {
  cursor: default;
  float: right;
  padding-top: 5px;
  margin-bottom: 15px;
}

.monitoring-hr-top-mon,
.monitoring-hr-bottom-mon {
  margin-bottom: 15px
}

.monitoring-hr-bottom-mon {
  margin-top: 40px;
}

@-webkit-keyframes progress-bar-stripes-mon {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-moz-keyframes progress-bar-stripes-mon {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-o-keyframes progress-bar-stripes-mon {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

@keyframes progress-bar-stripes-mon {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress-mon {
  display: block;
  height: 20px;
  margin-bottom: 35px;
  background-color: #f5f5f5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -khtml-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgb(32, 32, 32);
  border: 1px solid rgba(32, 32, 32, 0.27);
  _border: 1px solid rgb(32, 32, 32);
}

.progress-bar-mon {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
 ...

JavaScript

const monitoring = {
  servers: [{
    address: "play.minesuperior.com",
    port: "", // Optional
    name: "play.minesuperior.com",
  }, {
    address: "mineverse.com",
    name: "Mineverse",
  }, {
    address: "mc.hypixel.net",
    name: "Hypixel",
  }, {
    address: "128.0.0.1s",
    port: "25567",
    name: "Error test",
  }],
  total: {
    name: "Total Online"
  },
  reset: function() {
    for (var i = 0; i < this.servers.length; i++) {
      this.servers[i].online = 0;
      this.servers[i].max_online = 0;
      document.getElementById("server" + i).innerHTML = this.loadingHtml(this.servers[i]);
    }
    this.total.servers_loaded = 0;
    this.updateTotal();
  },
  updateTotal: function() {
    var myTotal;
    if (this.total.servers_loaded < this.servers.length) {
      myTotal = this.loadingHtml(this.total);
    } else {
      var totalCurrent = 0,
        totalMax = 0;
      for (var i = 0; i < this.servers.length; i++) {
        totalCurrent += this.servers[i].online;
        totalMax += this.servers[i].max_online;
      }
      var total_data = {
        players: {
          now: totalCurrent,
          max: totalMax,
        }
      };
      myTotal = this.onlineHtml(this.total, total_data);
    }
    document.getElementById("globalOnline").innerHTML = myTotal;
  },
  update: function() {
    this.reset();
    for (var i = 0; i < this.servers.length; i++) {
      this.updateServerState(i);
    }
    this.updateTotal();
  },
  updateServerState: function(serverId) {
    var server = this.servers[serverId];
    var serverUrl = "https://mcapi.us/server/status?ip=" + server.address + (server.port ? "&port=" + server.port : "");
    var xhr = new XMLHttpRequest();
    xhr.open("GET", serverUrl, true);
    xhr.responseType = "json";
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        var status = xhr.status;
        if (status == 200) {
          var data = xhr.response;
          var serverStatus = (data.last_online) ?...