example/index.html

<!DOCTYPE html>
<html manifest="dashboard.appcache">
    <head>
        <meta charset="utf-8">
        
        <!--
            Crowd Dashboard
            Created 2013 by Martin Giger
            Licensed under GPLv2
            Visit the GitHub project: http://freaktechnik.github.io/Crowd-Dashboard
          -->

        <title>Dashboard</title>

        <link rel="stylesheet" type="text/css" href="style.css">

        <script type="text/javascript" src="../crowd-dashboard.js"></script>
        <script type="text/javascript">
            "use strict";

            var statusDashboard;
            window.onload = function() {
                statusDashboard = new Dashboard();
                function loadDataForDashboard(fileURL,dashboard) {
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function() {
                        if( xhr.readyState == 4 && xhr.status != 0 && xhr.status < 400 )
                            dashboard.servers = JSON.parse(xhr.response);
                        //else if( xhr.readyState == 4 )
                        //    dashboard.servers = [];
                    };

                    xhr.open('GET',fileURL);
                    xhr.send();
                }

                loadDataForDashboard("json/servers.json",statusDashboard);

                // set up the mirrors list
                var mirrorsDashboard = new Dashboard(null, {targetNodeId: 'mirrors'});
                mirrorsDashboard.addEventListener('empty',function(event) {
                    document.getElementById('mirrorsWrapper').classList.add('hidden');
                });

                loadDataForDashboard("json/mirrors.json",mirrorsDashboard);
            };

            function refresh(dashboard) {
                dashboard.checkServers();
            }
        </script>
    </head>
    <body>
        <article>
            <h1>Dashboard</h1>
            <button onclick="refresh(statusDashboard);">Refresh</button>
            <div id="crowd-dashboard-status-list">
            </div>
        </article>
        <footer>
            <a href="https://github.com/freaktechnik/Crowd-Dashboard">Source on GitHub</a>
            <section id="mirrorsWrapper">Mirrors: <div id="mirrors"></div></section>
        </footer>
    </body>
</html>