[js, css] stats period added

web/css/main.css

@@ -3,7 +3,7 @@ Title  : Vesta
 Author : Eugen Lobicov, eugen.lobicov@gmail.com 
 
 created : November 27, 2009
-last updated : February 1, 2012
+last updated : February 8, 2012
 - - - - - - - - - - - - - - - - - - */
 
 html{
@@ -579,7 +579,8 @@ input::-moz-focus-inner{
 	
 .checkbox-selector,
 .context-actions,
-.checkbox-selector .ui-checkbox{
+.checkbox-selector .ui-checkbox,
+.cust-checkbox-wrap .ui-checkbox{
 	display:-moz-inline-stack;
 	display: inline-block;
 	zoom: 1;
@@ -589,15 +590,16 @@ input::-moz-focus-inner{
 	.ui-helper-hidden-accessible{
 		display:none;
 	}
+	.cust-checkbox-wrap span.ui-checkbox,
 	.checkbox-selector span.ui-checkbox{
 		float:none;
 		width:10px;
 		height:10px;
 		margin:2px 2px 0 0;
-		/*background:url(../i/checkbox-selector-2012-01-29.png) no-repeat;*/
 		background:url(../images/checkbox-selector-2012-01-31.png) no-repeat;
 		cursor:pointer;
 	}
+	.cust-checkbox-wrap .cust-checkbox-title,
 	.checkbox-selector .selector-title{
 		font-size:11px;
 		line-height:15px;
@@ -606,22 +608,27 @@ input::-moz-focus-inner{
 		cursor:pointer;
 		white-space:nowrap;
 	}
+	.cust-checkbox-wrap span.ui-checkbox-hover,
 	.checkbox-selector span.ui-checkbox-hover{
 		background-position:0 -20px;
     	-moz-box-shadow:0 0 5px rgba(82, 168, 236, 0.6);
 		-webkit-box-shadow:0 0 5px rgba(82, 168, 236, 0.6);
 	}
+	.cust-checkbox-wrap span.ui-checkbox-state-checked,
 	.checkbox-selector span.ui-checkbox-state-checked{
 		background-position:0 -40px;
 	}
+	.cust-checkbox-wrap span.ui-checkbox-state-checked-hover,
 	.checkbox-selector span.ui-checkbox-state-checked-hover{
 		background-position:0 -60px;
     	-moz-box-shadow:0 0 5px rgba(82, 168, 236, 0.6);
 		-webkit-box-shadow:0 0 5px rgba(82, 168, 236, 0.6);
 	}
+	.cust-checkbox-wrap .cust-checkbox-title:hover,
 	.checkbox-selector .selector-title:hover{
 		color:#2ea8bd;	
 	}
+	.cust-checkbox-wrap .cust-checkbox-title:active,
 	.checkbox-selector .selector-title:active{
 		color:#fc0;
 	}
@@ -3196,6 +3203,7 @@ input::-moz-focus-inner{
 .form-suspended .do_action_toggle_suspend {opacity: 1; filter: alpha(opacity = 100);}
 
 
+/*
 .stats-block{
     background:#474338;
     padding:10px;
@@ -3212,8 +3220,8 @@ input::-moz-focus-inner{
     display:block;
     margin:0 auto;
 }
-
+*/
-/* START: DEV!! */
+/* START: DEV!! 
 .stats-subbar span{
     cursor: pointer; 
     margin-left: 22px; 
@@ -3226,4 +3234,105 @@ input::-moz-focus-inner{
     color: #FF6766; 
     border-bottom: 0;
 }
-/* END: DEV */
+ END: DEV */
+
+
+/* stats
+- - - - - - - - - - - - - - - - - - - */
+.date-range-controls{
+	float:left;
+	margin-left:-220px;
+	}
+	.date-range-control{
+		display:-moz-inline-stack;
+		display: inline-block;
+		zoom: 1;
+		*display: inline;
+		vertical-align:top;
+		
+		margin:0 0 0 20px;
+		font-size:11px;
+		line-height:15px;
+		border-bottom:1px dotted #5D5D5D;
+		cursor:pointer;
+		} 
+		span.date-range-control:hover{
+			color:#2ea8bd;
+			border-bottom-color:#2ea8bd;
+		}
+		span.date-range-control:active{
+			color:#fc0;
+			border-bottom-color:#fc0;
+		}
+
+	.date-range-controls .active{
+		border:none;
+		font-weight:bold;
+		color:#ff6766;
+	}
+  	.date-range-controls .motive{
+        text-transform: uppercase;
+        color: #898989;
+        line-height: 17px;
+    }
+
+
+.stats-components{
+	position:relative;
+	/*top:3px;*/
+	float:right;
+	}
+	.stats-components .stats-component{
+		margin-left:7px;
+	}
+	.stats-components .cust-checkbox-title{
+		line-height:13px;
+	}
+
+.stats-period{
+	width:620px;
+	padding:30px 0 0;
+	margin:0 auto 20px;
+	font-size:11px;
+	}
+	.stats-period-title{
+		padding:2px 40px 0 0;
+		text-transform:uppercase;
+		color:#bcbcbc;
+	}
+	.stats-period .dt-day,
+	.stats-period .dt-time{
+		font-size:12px;
+		line-height:18px;
+		font-weight:bold;
+	}
+	.stats-period .dt-day{
+		color:#5f5e59;
+	}
+	.stats-period .dt-time{
+		padding-left:10px;
+		font-size:11px;
+		color:#bab7ae;
+	}
+	.stats-period-devider{
+		padding:0 25px;
+	}
+
+.stats-block{
+    width:600px;
+    margin:0 auto 10px;
+    padding:10px 10px 34px;
+    background:#474338;
+	}
+	.stats-block-header{
+		color:#fc0;
+		font-size:12px;
+		font-weight:bold;
+		text-align:center;
+	}
+	.stats-block .stats-graph{
+		display:block;
+		margin:0 auto;
+	}	
+
+

web/js/actions.js

@@ -733,8 +733,8 @@ App.Actions.loadStats = function(type)
             break;
     }
     
-    $('#actions-toolbar .sub-active').removeClass('sub-active');
+    $('#actions-toolbar .active').removeClass('active');
-    $('#actions-toolbar .'+type).addClass('sub-active');
+    $('#actions-toolbar .'+type).addClass('active');
     
     App.Ajax.request('STATS.getList', {period: period}, function(reply) {
 		if (!reply.result) {

web/js/html.js

@@ -512,7 +512,6 @@ App.HTML.Build.stats_list = function(stats)
 	if (!stats || stats.length == 0) {
 		return '<br /><br /><center><h1>Stats are not available</h1></center>';
 	}
-	
 	var acc = [];
 	$.each(stats, function(key) {
 		var stat = stats[key];
@@ -523,8 +522,31 @@ App.HTML.Build.stats_list = function(stats)
         acc[acc.length++] = tpl.finalize()
 	});
 	
-	var wrap = App.Templates.get('WRAPPER', 'backup');
+	var wrap = App.Templates.get('WRAPPER', 'stats');
+
+    var period_start = new Date();
+    var period_end = new Date();
+    switch (stats[1]['PERIOD'])
+    {
+        case "daily": period_start.setDate(period_start.getDate()-1); break;
+        case "weekly": period_start.setDate(period_start.getDate()-7); break;
+        case "monthly": period_start.setMonth(period_start.getMonth()-1); break;
+        case "yearly": period_start.setFullYear(period_start.getFullYear()-1); break;
+    }
+
+    var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    
+    var period_tpl = App.Templates.get('PERIOD', 'stats');
+    period_tpl.set(':PERIOD_START_DATE', period_start.getDate() + ' ' + month[period_start.getMonth()] + ' ' + period_start.getFullYear());
+    period_tpl.set(':PERIOD_START_TIME', (period_start.getHours() < 10 ? '0' + period_start.getHours() : period_start.getHours()) 
+                                 + ':' + (period_start.getMinutes() < 10 ? '0' + period_start.getMinutes() : period_start.getMinutes()));
+    period_tpl.set(':PERIOD_END_DATE', period_end.getDate() + ' ' + month[period_end.getMonth()] + ' ' + period_end.getFullYear());
+    period_tpl.set(':PERIOD_END_TIME', (period_end.getHours() < 10 ? '0' + period_end.getHours() : period_end.getHours()) 
+                                 + ':' + (period_end.getMinutes() < 10 ? '0' + period_end.getMinutes() : period_end.getMinutes()));
+    var period = period_tpl.finalize();
+
 	wrap.set(':CONTENT', acc.done());
+	wrap.set(':PERIOD', period);
 	
 	return wrap.finalize();
 }

web/js/pages.js

@@ -41,6 +41,7 @@ App.Pages.prepareHTML = function()
 	$('.d-popup').remove();
     App.Actions.reset_batch();
     $('#actions-toolbar .stats-subbar').remove();
+	$('#actions-toolbar .stats-components').remove();
     $('#actions-toolbar .do_action_new_entry').removeClass('hidden');
 	$('.active').removeClass('active');
     $('.row-filters').removeClass('hidden');
@@ -176,8 +177,12 @@ App.Pages.STATS.prepareHTML = function()
     $('.row-filters').addClass('hidden');
     $('#actions-toolbar .do_action_new_entry').addClass('hidden');
     $('#actions-toolbar .stats-subbar').remove();
+	$('#actions-toolbar .stats-components').remove();
     $('#actions-toolbar .do_action_new_entry').after(App.Templates.get('SUBMENU', 'stats').finalize());
+	$('#actions-toolbar .date-range-controls').after(App.Templates.get('FILTERS', 'stats').finalize());
     
+	$('#content .stats-list').after('zzz');
+	
 	$('#primary-nav-box .active').removeClass('active');
 	$('#STATS').addClass('active');
 	$('#new-entry-keyword').text(App.Helpers.getHumanTabName());

web/js/templates.js

@@ -1091,17 +1091,70 @@ App.Templates.html = {
 					</div><!-- // .row 1 -->']
 	},
     stats: {
-        WRAPPER: ['<div class="stats-list">~!:CONTENT~!</div>'],
+        WRAPPER: ['<div class="stats-list">\
-        ENTRY: ['<div class="stats-block" style="min-height: 252px">\
+                    ~!:PERIOD~!\
+                    ~!:CONTENT~!\
+                    </div>'],
+        PERIOD: ['<div class="stats-period">\
+							<span class="stats-period-title">Statistics for:</span>\
+							<span class="stats-dtstart">\
+								<span class="dt-day">~!:PERIOD_START_DATE~!</span>\
+								<span class="dt-time">~!:PERIOD_START_TIME~!</span>\
+							</span>\
+							<span class="stats-period-devider">&mdash;</span>\
+							<span class="stats-dtend">\
+								<span class="dt-day">~!:PERIOD_END_DATE~!</span>\
+								<span class="dt-time">~!:PERIOD_END_TIME~!</span>\
+							</span>\
+						</div>'],
+        ENTRY: ['<div class="stats-block">\
                 <h2 class="stats-block-header">~!:HEADER~!</h2>\
                 <div class="stats-block-wrap">\
                     <img class="stats-graph" src="~!:IMG_SRC~!" alt="" />\
                 </div>\
             </div>'],
-        SUBMENU: ['<span class="stats-subbar"><span class="today sub-active" onClick="App.Actions.loadStats(\'today\')">today</span>\
+        SUBMENU: ['<div class="date-range-controls stats-subbar"><span class="motive">Genarate For:</span><span class="date-range-control today active" onClick="App.Actions.loadStats(\'today\')">today</span>\
-                <span class="week" onClick="App.Actions.loadStats(\'week\')">week</span>\
+                <span class="date-range-control week" onClick="App.Actions.loadStats(\'week\')">week</span>\
-                <span class="month" onClick="App.Actions.loadStats(\'month\')">month</span>\
+                <span class="date-range-control month" onClick="App.Actions.loadStats(\'month\')">month</span>\
-                <span class="year" onClick="App.Actions.loadStats(\'year\')">year</span></div>']
+                <span class="date-range-control year" onClick="App.Actions.loadStats(\'year\')">year</span></div>'],
+		FILTERS: ['<div class="stats-components">\
+						<span class="cust-checkbox-wrap stats-component">\
+							<input id="stats-la" class="cust-checkbox" type="checkbox" value=""/>\
+							<label for="stats-la" class="cust-checkbox-title">la</label>\
+						</span>\
+						<span class="cust-checkbox-wrap stats-component">\
+							<input id="stats-mem" class="cust-checkbox" type="checkbox" value=""/>\
+							<label for="stats-mem" class="cust-checkbox-title">mem</label>\
+						</span>\
+						<span class="cust-checkbox-wrap stats-component">\
+							<input id="stats-mysql" class="cust-checkbox" type="checkbox" value="" />\
+							<label for="stats-mysql" class="cust-checkbox-title">mysql</label>\
+						</span>\
+						<span class="cust-checkbox-wrap stats-component">\
+							<input id="stats-postgres" class="cust-checkbox" type="checkbox" value="" />\
+							<label for="stats-postgres" class="cust-checkbox-title">postgres</label>\
+						</span>\
+						<span class="cust-checkbox-wrap stats-component">\
+							<input id="stats-vsftpd" class="cust-checkbox" type="checkbox" value="" />\
+							<label for="stats-vsftpd" class="cust-checkbox-title">vsftpd</label>\
+						</span>\
+						<span class="cust-checkbox-wrap stats-component">\
+							<input id="stats-httpd" class="cust-checkbox" type="checkbox" value="" />\
+							<label for="stats-httpd" class="cust-checkbox-title">httpd</label>\
+						</span>\
+						<span class="cust-checkbox-wrap stats-component">\
+							<input id="stats-nginx" class="cust-checkbox" type="checkbox" value="" />\
+							<label for="stats-nginx" class="cust-checkbox-title">nginx</label>\
+						</span>\
+						<span class="cust-checkbox-wrap stats-component">\
+							<input id="stats-bandwidth" class="cust-checkbox" type="checkbox" value="" />\
+							<label for="stats-bandwidth" class="cust-checkbox-title">bandwidth</label>\
+						</span>\
+						<span class="cust-checkbox-wrap stats-component">\
+							<input id="stats-ssh" class="cust-checkbox" type="checkbox" value="" />\
+							<label for="stats-ssh" class="cust-checkbox-title">ssh</label>\
+						</span>\
+					</div>']
     }
 }