Status.io widget

index.html

<p><a href="http://status.sffirecu.org" target="_blank" style="font-weight: bold; color:black;">
  <i class="current-status-indicator"></i>
  <span id="current-status-description"></span>
  </a><a href="http://status.sffirecu.org" target="_blank" style="margin-left: 4px; color:gray; ">view  details</a></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="statusio_widget.js"></script>

script.js

/* Status.io Widget */

$('.current-status-indicator').ready(function($){
  var statusAPI = "https://api.status.io/1.0/status/57d1ab0ca530225c6d0006c4";
  var maxStatusCode = "";
  var maxStatusDescription = "";
  var sc = "";
  var sd = "";
  $.getJSON(statusAPI)
  .done(function(data){
    $.each(data.result.status, function(s,status){
      $.each(data.result.status[s].containers, function(c,containers){
        sc = data.result.status[s].containers[c].status_code;
        sd = data.result.status[s].containers[c].status;
        if (maxStatusCode < sc){
          maxStatusCode = sc
          maxStatusDescription = sd
        }
      })
    })
    if (maxStatusCode === ""){
      return;
    }
    // Operational
    if (maxStatusCode === 100){
      $(".current-status-indicator").addClass("green");
      $("#current-status-description").text(maxStatusDescription);
    }
    // Scheduled Maintenance
    if (maxStatusCode === 200){
      $(".current-status-indicator").addClass("blue");
      $("#current-status-description").text(maxStatusDescription);
    }
    // Degraded Performance || Partial Outage
    if (maxStatusCode === 300 || maxStatusCode === 400){
      $(".current-status-indicator").addClass("yellow");
      $("#current-status-description").text(maxStatusDescription);
    }
    // Service Disrtuption || Security Issue
    if (maxStatusCode === 500 || maxStatusCode === 600){
      $(".current-status-indicator").addClass("red");
      $("#current-status-description").text(maxStatusDescription);
    }
  })
});

status-io-widget.markdown

Status.io widget

A Pen by Mike on CodePen.

License.

style.css

/* Status.io Widget */

a {
  font-family: OpenSans, SansSerif;
  Text-decoration: None;
}

.current-status-indicator {
    width: 12px;
    height: 12px;
    margin: 0 6px 0 6px;
    display: inline-block;
    border-radius: 6px
}

.current-status-indicator.small {
    width: 8px;
    height: 8px;
    margin: 0 6px 0 6px;
    display: inline-block;
    border-radius: 4px
}

.current-status-indicator.green {
    background: #49cc90
}

.current-status-indicator.yellow {
    background: #ffa837
}

.current-status-indicator.red {
    background: #d43056
}

.current-status-indicator.blue {
    background: #00aaf0
}