Continue working on API
This commit is contained in:
parent
3c2b5fcb2c
commit
a88088f2d6
5 changed files with 177 additions and 20 deletions
88
www/channellist.html
Normal file
88
www/channellist.html
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<!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 type="text/javascript">
|
||||
var q = "";
|
||||
$("#login").click(function() {
|
||||
q = "name=" + $("#name").val() + "&pw=" + $("#pw").val();
|
||||
refresh();
|
||||
setInterval(refresh, 5000);
|
||||
});
|
||||
|
||||
function refresh() {
|
||||
$.getJSON("api/json/listloaded?" + q, 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>
|
||||
52
www/channelwidget.html
Normal file
52
www/channelwidget.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CyTube</title>
|
||||
<link href="assets/css/bootstrap.css" rel="stylesheet">
|
||||
<style type="text/css">
|
||||
#channeldata td, #channeldata th {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 type="text/javascript">
|
||||
var p = document.location + "";
|
||||
if(p.indexOf("?") != -1) {
|
||||
p = p.substring(p.indexOf("?")+1);
|
||||
}
|
||||
$.getJSON("api/json/channeldata?" + p, function(data) {
|
||||
var host = document.location + "";
|
||||
host = host.substring(0, host.indexOf("/widget.html"));
|
||||
if(data.error) {
|
||||
return;
|
||||
}
|
||||
$("#channeldata").find("tbody").remove();
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue