sync/www/channellist.html

90 lines
3.4 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CyTube Channel Listing</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
#channeldata td, #channeldata th {
text-align: center;
vertical-align: middle;
}
.loginform {
margin: 100px auto 20px;
padding: 19px 29px 29px;
border-radius: 5px 5px 5px 5px;
border: 1px solid #dedede;
max-width: 300px;
}
</style>
</head>
<body>
<div class="container">
<form class="form-horizontal loginform" action="javascript:void(0);">
<div class="control-group">
<input id="name" type="text" placeholder="Username" class="input-block-level">
</div>
<div class="control-group">
<input id="pw" type="password" placeholder="Password" class="input-block-level">
</div>
<button id="login" class="btn btn-block">Authenticate</button>
</form>
</div>
<table id="channeldata" class="table table-striped table-bordered">
<thead>
<tr>
<th>Channel</th>
<th>Connected</th>
<th>Playing</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script src="assets/js/iourl.js" type="text/javascript"></script>
<script type="text/javascript">
var q = "";
$("#login").click(function() {
q = "name=" + $("#name").val() + "&pw=" + $("#pw").val();
refresh();
setInterval(refresh, 5000);
});
function refresh() {
$.getJSON(IO_URL+"/api/json/listloaded?"+q+"&callback=?", function(data) {
var host = document.location + "";
host = host.substring(0, host.indexOf("/widget.html"));
if(data.error) {
alert(data.error);
return;
}
$(".loginform").remove();
$("#channeldata").find("tbody").remove();
data.sort(function(a, b) {
var x = a.usercount;
var y = b.usercount;
if(x == y) {
var c = a.name.toLowerCase();
var d = b.name.toLowerCase();
return c == d ? 0 : (c < d ? -1 : 1);
}
return y - x;
});
for(var i = 0; i < data.length; i++) {
var d = data[i];
var tr = $("<tr/>").appendTo($("#channeldata"));
var name = $("<td/>").appendTo(tr);
$("<a/>").attr("href", host + "/r/" + d.name)
.text(d.name)
.appendTo(name);
$("<td/>").text(d.usercount || 0).appendTo(tr);
$("<td/>").text(d.title || "-").appendTo(tr);
}
});
}
</script>
</body>
</html>