Simple REST API Status Example

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    
    <h1>TS3 Server Info</h1>
    
    <div class="row">
        <div class="col-xs-4">Name:</div>
        <div class="col-xs-8" id="name">-</div>
    </div>
    <div class="row">
        <div class="col-xs-4">Status:</div>
        <div class="col-xs-8" id="status">-</div>
    </div>
    <div class="row">
        <div class="col-xs-4">Users:</div>
        <div class="col-xs-8" id="users">-</div>
    </div>
    <div class="row">
        <div class="col-xs-4">Password:</div>
        <div class="col-xs-8" id="password">-</div>
    </div>
    <div class="row">
        <div class="col-xs-4">Create Channels:</div>
        <div class="col-xs-8" id="createchannels">-</div>
    </div>
    
</div>

CSS

/**
 * Simple REST API Status Example
 * ------------------------------
 * When your TeamSpeak 3 Server is reporting 
 * to the official server list, this feature 
 * does not require any configuration by the 
 * server administrator.
 */

JavaScript

$.getJSON('https://api.planetteamspeak.com/serverstatus/82.211.30.15/', function(json)
{
    if(json.status == 'success')
    {
        $('#name').html(json.result.name);
        
        // check status
        if(json.result.online)
        {
            $('#status').html('<span class="text-success">Online</span>');
        }
        else
        {
            $('#status').html('<span class="text-danger">Offline</span>');
        }
        
        $('#users').html(json.result.users + ' / ' + json.result.slots);
        
        if(json.result.password)
        {
            $('#password').html('<span class="text-danger">Yes</span>');
        }
        else
        {
            $('#password').html('<span class="text-success">No</span>');
        }
        
        if(json.result.createchannels)
        {
            $('#createchannels').html('<span class="text-success">Anyone</span>');
        }
        else
        {
            $('#createchannels').html('<span class="text-danger">Admins only</span>');
        }
    }
    else
    {
        $('#status').html('<span class="text-danger">' + json.result.message + '</span>');
    }
});