Permalink
Switch branches/tags
Find file
Fetching contributors…
Cannot retrieve contributors at this time
264 lines (247 sloc) 7 KB
<!doctype html>
<html>
<head>
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
<script src="flot/jquery.flot.min.js" type="text/javascript"></script>
<script src="js/textile.js" type="text/javascript"></script>
<link href="css/custom-theme/jquery-ui-1.8.11.custom.css" media="screen" rel="stylesheet" type="text/css" />
<style>
body {
min-width:357px;
overflow-x:hidden;
width: 360px !important;
background: #4A4A4A url('/images/background.png');
margin: 0 auto;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #94a69d;
padding: 10px;
}
h1.user {
font-size:14px;
color: #fff;
border-bottom: 2px solid #fff;
}
.plot {
width: 330px;
height: 100px;
display: block;
}
h2.box {
margin: 0;
padding: 0;
}
.account-info {
margin: 20px 0;
font: bold 18px/1.2em Georgia, serif;
color: #f9f9f9;
padding: 5px 10px;
border-radius: 12px;
box-shadow: 0 0 4px #444;
background-color: #76857e;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #76857e),
color-stop(1, #444));
/*display: inline-block;*/
text-shadow: 1px 1px 3px #444;
margin: 20px 20px 0 0;
}
.account-info .box {
margin: 0 20px 0 0;
}
.account-info .quota {
margin: 0 20px 0 0;
color: #A7A7A7;
font-size: 12px;
}
.graph-wrapper {
padding: 12px 5px;
}
.info-wrapper .expire {
color: #fff;
font-size: 9px;
}
/*for panes*/
/*#content {*/
/* position: relative;*/
/* overflow: hidden;*/
/* clear: both;*/
/* width: 357px;*/
/*}*/
/*#content .items {*/
/* width: 20000em;*/
/* clear: both;*/
/* margin: 0;*/
/* padding: 0;*/
/*}*/
/*.items .item {*/
/* float: left;*/
/* display: block;*/
/* width: 357px;*/
/*}*/
/*#content div {*/
/* float: left;*/
/* display: block;*/
/* */
/*}*/
</style>
</head>
<body>
<script>
var what;
var displayAccounts = function(){
var accounts = (localStorage.accounts) ? JSON.parse(localStorage.accounts) : [];
if(accounts.length){
accounts.forEach(function(user,i){
var data = JSON.parse(localStorage[user]);
$('#accounts').append('<div class="account a'+i+'" apikey="'+user+'">'+
'<h1 class="user">'+data.login + '<span style="float:right">&euro;<span class="balance">'+ data.balance+'</span></span</h1>'+
'</div>');
var boxes = Object.keys(data.boxes);
boxes.forEach(function(box,x){
var l = data.boxes[box].length;
$('.a'+i).append('<div class="account-info"><span class="box" title="Expires on '+ data.boxes[box][l-1].paidTill +'">'+box+'</span><span class="quota" id="quota-for-'+ box +'">' + data.boxes[box][l-1].liveQuota + '</span></div>'+
'<div class="graph-wrapper"><div class="a'+i+'stat'+x+' plot" box="'+box+'"'+
'style="width: 330px; height: 100px;"></div></div>');
});
});
}
}
,displayNews = function(){
var $news = $('#news')
,apikey = $('.account:eq(0)').attr('apikey')
,news = JSON.parse(localStorage[apikey]).news;
news.forEach(function(d,i){
d.body = convert(d.body).replace(/a href/g, 'a target="main" href');
$('#news').append('<h3><a href="#">'+d.title+'</a></h3><div><p>'+d.body+'</p></div>');
});
$('#news').accordion({ fillSpace: false, autoHeight: false });
}
,plotData = function(){
$('.account').each(function(){
var $this = $(this)
,max_quota = 110
,apikey = $(this).attr('apikey')
,account = JSON.parse(localStorage[apikey]);
$this.find('.plot').each(function(){
var box = $(this).attr('box')
,data = account.boxes[box]
,lastPoint = account.boxes[box].length
,line = [] // % usage
,line2 = [] // actual usage, mb
,max_quota = account.boxes[box][lastPoint-1].hardLimit
,max_percent = (max_quota/account.boxes[box][lastPoint-1].limit)*100
,lines = []
,options = {}
,percentFormat = function(v,axis){
return v.toFixed(axis.tickDecimals)+"%";
}
,gbFormat = function(v,axis){
return v.toFixed(axis.tickDecimals)+"gb";
};
data.forEach(function(d,i){
// the +new Date() is a trick to get it to
// turn into a string, and return a timestamp
var time = (new Date(d.at)).getTime()
,offset = (new Date().getTimezoneOffset()*60*1000);
line.push([time-offset,d.percent]);
line2.push([time-offset,d.quota]);
});
// update the info above the graph
$('#quota-for-' + box).text(account.boxes[box][lastPoint-1].liveQuota);
$('.balance').text(account.balance);
// line #1, %
lines.push({
data: line
,label: account.boxes[box][lastPoint-1].percent+'%'
,color: (account.boxes[box][lastPoint-1].percent >= 90) ? '#CF0C13' : '#76857e'
,xaxis: 1
,yaxis: 1
});
// line #2, mb
lines.push({
data: line2
,label: Math.round(account.boxes[box][lastPoint-1].quota*100)/100+'gb'
,color: '#76857e'
,xaxis: 1
,yaxis: 2
,fill: false
});
// options
options.yaxes = [
{
position: 'left',
min: 0,
max: max_percent,
color: '#F9F9F9',
tickFormatter: percentFormat
},{
position: 'right',
min: 0,
max: max_quota,
color: '#f9f9f9',
tickFormatter: gbFormat
}
];
options.xaxes = [{ mode: 'time', color: '#f9f9f9', ticks: 4 }];
options.grid = {
backgroundColor: {
colors: ['#000','#111']
}
};
options.legend = {
position: 'nw'
,labelBoxBorderColor: '#444'
,backgroundOpacity: 0.5
,backgroundColor: '#000'
}
options.series = {
lines: {
show: true
,fill: true
,lineWidth: 0
}
,points: {
show: false
}
,bars: {
}
}
$.plot($(this), lines, options);
});
});
}
$(function(){
displayAccounts();
plotData();
// update every 10 seconds
var plotTimer = setInterval(function(){ plotData(); }, 1000*2);
//$('#content').scrollable({
// circular: true
// ,mousewheel: true
//}).navigator({
// navi: '#navi'
// ,naviItem: 'a'
// ,activeClass: 'current'
//});
$('#content').tabs({
select: function(e,ui){
setTimeout(function(){ plotData(); }, 20);
}
});
displayNews();
});
</script>
<div id="content" class="ui-tabs">
<ul id="navi" class="ui-tabs-nav">
<li><a id="" href="#accounts">Accounts</a></li>
<li><a id="" href="#news">News</a></li>
</ul>
<div id="accounts" class="item ui-tabs-panel">
</div>
<div id="news" class="item ui-tabs-panel">
</div>
</div>
</body>
</html>