Source

mpwebstatus / mpwebstatus / templates / index.html

Full commit
<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Multiprocessing dashboard</title>
    <meta name="description" content="A web status dashboard for multiprocessing tasks.">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
    table {
        text-align: left;
        border-collapse: collapse;
        margin: 25px;
    }
    td {
        border-right: 30px solid white;
        border-left: 30px solid white;
        padding: 12px 2px 0
    }
    th {
        font-weight: normal;
        font-size: 18px;
        border-bottom: 2px solid midnightblue;
        border-right: 30px solid white;
        border-left: 30px solid white;
        color: royalblue;
        padding: 8px 2px
    }
    </style>
</head>
<body>
    <h1>Multiprocessing dashboard</h1>
    <hr>
    <table id="jobs"></table>
<script type="text/javascript">
var get_status = function(j) {
    if (j.finished === true) {
        return "<span style=\"color: green\">Finished</span>"
    } else {
        return "Working"
    };
};

var n = function (x) {
    return parseFloat(x).toFixed(2)
};

function update() {    
    $.get('/status', function(data){
        var json = jQuery.parseJSON(data);
        $(function () {
            var content = '<thead><tr><th>Task</th><th>Status</th><th>ETA (seconds)</th><th>Last updated (seconds)</th><th>Elapsed (seconds)</th><th>Progress</th><th>Total</th></tr></thead>';
            //content += '<tbody>'; -- **superfluous**
            for (var i = 0; i < json.length; i++) {
                content += '<tr><td>' + json[i].task 
                content += '</td><td>' + get_status(json[i]) 
                content += '</td><td>' + n(json[i].eta)
                content += '</td><td>' + n(json[i].last_updated)
                content += '</td><td>' + n(json[i].elapsed)
                content += '</td><td>' + json[i].progress
                content += '</td><td>' + json[i].total
                content += '</td></tr>'
            }
             $('#jobs').html(content);
       });  
    });
};

setInterval(update, 1000);
</script>
</body>
</html>