JSFiddle - React, Tailwind, and code Playground

by octatone

HTML

<h1>
  Wunderlist Sync Status
</h1>
<div class="api-status">
  <div class="status">Determining API Status ...</div>
  <div class="speed"></div>
</div>

CSS

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}
.api-status {
  padding: 20px 40px;
}

.api-status .status {
  font-size: 150%;
  font-weight: bold;
}

.api-status.online, .api-status.offline {
  color: white;
}
.api-status.online {
  background-color: green;
}

.api-status.offline {
  background-color: red;
}

JavaScript

var server = 'https://api.wunderlist.com/batch';

$.ajaxSetup({
  
  'contentType': 'application/json; charset=utf-8',
  'crossDomain': true,
  'dataType': 'json',
  'xhrFields': {
    'withCredentials': true
  }
});

function ajax (url, options) {

  if(typeof options.data === 'object') {
    
    options.data = JSON.stringify(options.data);
  }
  
  var request = $.ajax(url, {
    
    'type': options.type,
    'data': options.data,
    'headers': options.headers,
    'timeout': options.timeout
  });
  
  return request.done(function (data, textStatus, jqXHR) {
    
    if(typeof data === 'string') {
      data = JSON.parse(data);
    }
    
    options.success && options.success(data, textStatus, jqXHR);
  }).fail(options.error || $.noop);
};

function ping () {
  
  var userOnline = undefined;
  var start = new Date();
  var options = {
    
    'type': 'POST',
    'data': {},
    'timeout': 60000,
    'headers': {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer'
    }
  };
  
  if ('onLine' in navigator) {
    
    userOnline = navigator.onLine;
  }
  
  options.success = options.error = function (data, textStatus, jqXHR) {
    
    var online = data.status === 401 ? true : false;
    var execTime = duration(start);
    displayStatus(online, execTime, userOnline, data);
    
    // auto check every 2 minutes
    window.setTimeout(ping, 120000);
  };
  
  if (userOnline || userOnline === undefined) {
    
    ajax(server, options);
  }
  else {
    
    displayStatus(undefined, undefined, userOnline);
  }
}

function displayStatus (online, execTime, userOnline, data) {
  
  var $container = $('.api-status');
 
  if (userOnline || userOnline === undefined) {
    
    $container.find('.status').text(online ? 'Online' : 'Offline - Status Code ' + data.status);
    $container.toggleClass('online', online);
    $container.toggleClass('offline', !online);
    if (online) {
      
      $container.find('.speed').text(execTime/1000 + '...