mirror of https://github.com/calzoneman/sync.git
140 lines
5.6 KiB
HTML
140 lines
5.6 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 session = readCookie("sync_session") || "";
|
|
var uname = readCookie("sync_uname") || "";
|
|
var p = "";
|
|
if(uname && session) {
|
|
$.getJSON(IO_URL+"/api/json/login?name="+uname+"&session="+session+"&callback=?", function(data) {
|
|
if(data.success) {
|
|
$(".loginform").remove();
|
|
createCookie("sync_uname", uname, 7);
|
|
createCookie("sync_session", session, 7);
|
|
p = "name=" + uname + "&session=" + session;
|
|
refresh();
|
|
setInterval(refresh, 5000);
|
|
}
|
|
});
|
|
}
|
|
var q = "";
|
|
$("#login").click(function() {
|
|
uname = $("#name").val();
|
|
q = "name=" + $("#name").val() + "&pw=" + $("#pw").val();
|
|
$.getJSON(IO_URL+"/api/json/login?"+q+"&callback=?", function(data) {
|
|
if(data.success) {
|
|
$(".loginform").remove();
|
|
session = data.session;
|
|
createCookie("sync_uname", uname, 7);
|
|
createCookie("sync_session", session, 7);
|
|
p = "name=" + uname + "&session=" + session;
|
|
}
|
|
});
|
|
|
|
refresh();
|
|
setInterval(refresh, 5000);
|
|
});
|
|
|
|
function refresh() {
|
|
$.getJSON(IO_URL+"/api/json/listloaded?"+p+"&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);
|
|
}
|
|
});
|
|
}
|
|
function createCookie(name,value,days) {
|
|
if (days) {
|
|
var date = new Date();
|
|
date.setTime(date.getTime()+(days*24*60*60*1000));
|
|
var expires = "; expires="+date.toGMTString();
|
|
}
|
|
else var expires = "";
|
|
document.cookie = name+"="+value+expires+"; path=/";
|
|
}
|
|
|
|
function readCookie(name) {
|
|
var nameEQ = name + "=";
|
|
var ca = document.cookie.split(";");
|
|
for(var i=0;i < ca.length;i++) {
|
|
var c = ca[i];
|
|
while (c.charAt(0)==" ") c = c.substring(1,c.length);
|
|
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function eraseCookie(name) {
|
|
createCookie(name,"",-1);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|