JS MC Monitoring

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>

<!-- HTML "скелет" мониторинга -->
<hr class="monitoring-hr-top-mon">
<div id="server0"></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.thewd.ru",
    port: "", // Optional
    name: "Dayz minecraft srver",
  }],
  reset() {
    for (let 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() {
    let myTotal;
    if (this.total.servers_loaded < this.servers.length) {
      myTotal = this.loadingHtml(this.total);
    } else {
      let totalCurrent = 0,
        totalMax = 0;
      for (let 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() {
    this.reset();
    for (let i = 0; i < this.servers.length; i++) {
      this.updateServerState(i);
    }
    this.updateTotal();
  },
  updateServerState(serverId) {
    let server = this.servers[serverId];
    let serverUrl = `https://mcapi.us/server/status?ip=${server.address}` + (server.port ? `&port=${server.port}` : "");
    let xhr = new XMLHttpRequest();
    xhr.open("GET", serverUrl, true);
    xhr.responseType = "json";
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        let status = xhr.status;
        if (status == 200) {
          let data = xhr.response;
          let serverStatus = (data.last_online) ? monitoring.onlineHtml(server, data) : monitoring.offlineHtml(server, data);
          document.getElementById(`server${serverId}`).innerHTML = serverStatus;
          if (!data.error) {
            server.online = 1 * data.players.now;
            server.max_online = 1 *...