<!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>