Skip to content

Commit d91adf9

Browse files
naumov-socolovnaumov-socolov
committed
[js, css] stats period added
1 parent 74c83ed commit d91adf9

File tree

5 files changed

+205
-16
lines changed

5 files changed

+205
-16
lines changed

‎web/css/main.css‎

Lines changed: 115 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ Title : Vesta
33
Author : Eugen Lobicov, eugen.lobicov@gmail.com
44
55
created : November 27, 2009
6-
last updated : February 1, 2012
6+
last updated : February 8, 2012
77
- - - - - - - - - - - - - - - - - - */
88

99
html{
@@ -579,7 +579,8 @@ input::-moz-focus-inner{
579579

580580
.checkbox-selector,
581581
.context-actions,
582-
.checkbox-selector .ui-checkbox{
582+
.checkbox-selector .ui-checkbox,
583+
.cust-checkbox-wrap .ui-checkbox{
583584
display:-moz-inline-stack;
584585
display: inline-block;
585586
zoom: 1;
@@ -589,15 +590,16 @@ input::-moz-focus-inner{
589590
.ui-helper-hidden-accessible{
590591
display:none;
591592
}
593+
.cust-checkbox-wrap span.ui-checkbox,
592594
.checkbox-selector span.ui-checkbox{
593595
float:none;
594596
width:10px;
595597
height:10px;
596598
margin:2px 2px 0 0;
597-
/*background:url(../i/checkbox-selector-2012-01-29.png) no-repeat;*/
598599
background:url(../images/checkbox-selector-2012-01-31.png) no-repeat;
599600
cursor:pointer;
600601
}
602+
.cust-checkbox-wrap .cust-checkbox-title,
601603
.checkbox-selector .selector-title{
602604
font-size:11px;
603605
line-height:15px;
@@ -606,22 +608,27 @@ input::-moz-focus-inner{
606608
cursor:pointer;
607609
white-space:nowrap;
608610
}
611+
.cust-checkbox-wrap span.ui-checkbox-hover,
609612
.checkbox-selector span.ui-checkbox-hover{
610613
background-position:0 -20px;
611614
-moz-box-shadow:0 0 5px rgba(82, 168, 236, 0.6);
612615
-webkit-box-shadow:0 0 5px rgba(82, 168, 236, 0.6);
613616
}
617+
.cust-checkbox-wrap span.ui-checkbox-state-checked,
614618
.checkbox-selector span.ui-checkbox-state-checked{
615619
background-position:0 -40px;
616620
}
621+
.cust-checkbox-wrap span.ui-checkbox-state-checked-hover,
617622
.checkbox-selector span.ui-checkbox-state-checked-hover{
618623
background-position:0 -60px;
619624
-moz-box-shadow:0 0 5px rgba(82, 168, 236, 0.6);
620625
-webkit-box-shadow:0 0 5px rgba(82, 168, 236, 0.6);
621626
}
627+
.cust-checkbox-wrap .cust-checkbox-title:hover,
622628
.checkbox-selector .selector-title:hover{
623629
color:#2ea8bd;
624630
}
631+
.cust-checkbox-wrap .cust-checkbox-title:active,
625632
.checkbox-selector .selector-title:active{
626633
color:#fc0;
627634
}
@@ -3196,6 +3203,7 @@ input::-moz-focus-inner{
31963203
.form-suspended .do_action_toggle_suspend {opacity: 1; filter: alpha(opacity = 100);}
31973204

31983205

3206+
/*
31993207
.stats-block{
32003208
background:#474338;
32013209
padding:10px;
@@ -3212,8 +3220,8 @@ input::-moz-focus-inner{
32123220
display:block;
32133221
margin:0 auto;
32143222
}
3215-
3216-
/* START: DEV!! */
3223+
*/
3224+
/* START: DEV!!
32173225
.stats-subbar span{
32183226
cursor: pointer;
32193227
margin-left: 22px;
@@ -3226,4 +3234,105 @@ input::-moz-focus-inner{
32263234
color: #FF6766;
32273235
border-bottom: 0;
32283236
}
3229-
/* END: DEV */
3237+
END: DEV */
3238+
3239+
3240+
/* stats
3241+
- - - - - - - - - - - - - - - - - - - */
3242+
.date-range-controls{
3243+
float:left;
3244+
margin-left:-220px;
3245+
}
3246+
.date-range-control{
3247+
display:-moz-inline-stack;
3248+
display: inline-block;
3249+
zoom: 1;
3250+
*display: inline;
3251+
vertical-align:top;
3252+
3253+
margin:0 0 0 20px;
3254+
font-size:11px;
3255+
line-height:15px;
3256+
border-bottom:1px dotted #5D5D5D;
3257+
cursor:pointer;
3258+
}
3259+
span.date-range-control:hover{
3260+
color:#2ea8bd;
3261+
border-bottom-color:#2ea8bd;
3262+
}
3263+
span.date-range-control:active{
3264+
color:#fc0;
3265+
border-bottom-color:#fc0;
3266+
}
3267+
3268+
.date-range-controls .active{
3269+
border:none;
3270+
font-weight:bold;
3271+
color:#ff6766;
3272+
}
3273+
.date-range-controls .motive{
3274+
text-transform: uppercase;
3275+
color: #898989;
3276+
line-height: 17px;
3277+
}
3278+
3279+
3280+
.stats-components{
3281+
position:relative;
3282+
/*top:3px;*/
3283+
float:right;
3284+
}
3285+
.stats-components .stats-component{
3286+
margin-left:7px;
3287+
}
3288+
.stats-components .cust-checkbox-title{
3289+
line-height:13px;
3290+
}
3291+
3292+
.stats-period{
3293+
width:620px;
3294+
padding:30px 0 0;
3295+
margin:0 auto 20px;
3296+
font-size:11px;
3297+
}
3298+
.stats-period-title{
3299+
padding:2px 40px 0 0;
3300+
text-transform:uppercase;
3301+
color:#bcbcbc;
3302+
}
3303+
.stats-period .dt-day,
3304+
.stats-period .dt-time{
3305+
font-size:12px;
3306+
line-height:18px;
3307+
font-weight:bold;
3308+
}
3309+
.stats-period .dt-day{
3310+
color:#5f5e59;
3311+
}
3312+
.stats-period .dt-time{
3313+
padding-left:10px;
3314+
font-size:11px;
3315+
color:#bab7ae;
3316+
}
3317+
.stats-period-devider{
3318+
padding:0 25px;
3319+
}
3320+
3321+
.stats-block{
3322+
width:600px;
3323+
margin:0 auto 10px;
3324+
padding:10px 10px 34px;
3325+
background:#474338;
3326+
}
3327+
.stats-block-header{
3328+
color:#fc0;
3329+
font-size:12px;
3330+
font-weight:bold;
3331+
text-align:center;
3332+
}
3333+
.stats-block .stats-graph{
3334+
display:block;
3335+
margin:0 auto;
3336+
}
3337+
3338+

‎web/js/actions.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -733,8 +733,8 @@ App.Actions.loadStats = function(type)
733733
break;
734734
}
735735

736-
$('#actions-toolbar .sub-active').removeClass('sub-active');
737-
$('#actions-toolbar .'+type).addClass('sub-active');
736+
$('#actions-toolbar .active').removeClass('active');
737+
$('#actions-toolbar .'+type).addClass('active');
738738

739739
App.Ajax.request('STATS.getList', {period: period}, function(reply) {
740740
if (!reply.result) {

‎web/js/html.js‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -512,7 +512,6 @@ App.HTML.Build.stats_list = function(stats)
512512
if (!stats || stats.length == 0) {
513513
return '<br /><br /><center><h1>Stats are not available</h1></center>';
514514
}
515-
516515
var acc = [];
517516
$.each(stats, function(key) {
518517
var stat = stats[key];
@@ -523,8 +522,31 @@ App.HTML.Build.stats_list = function(stats)
523522
acc[acc.length++] = tpl.finalize()
524523
});
525524

526-
var wrap = App.Templates.get('WRAPPER', 'backup');
525+
var wrap = App.Templates.get('WRAPPER', 'stats');
526+
527+
var period_start = new Date();
528+
var period_end = new Date();
529+
switch (stats[1]['PERIOD'])
530+
{
531+
case "daily": period_start.setDate(period_start.getDate()-1); break;
532+
case "weekly": period_start.setDate(period_start.getDate()-7); break;
533+
case "monthly": period_start.setMonth(period_start.getMonth()-1); break;
534+
case "yearly": period_start.setFullYear(period_start.getFullYear()-1); break;
535+
}
536+
537+
var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
538+
539+
var period_tpl = App.Templates.get('PERIOD', 'stats');
540+
period_tpl.set(':PERIOD_START_DATE', period_start.getDate() + ' ' + month[period_start.getMonth()] + ' ' + period_start.getFullYear());
541+
period_tpl.set(':PERIOD_START_TIME', (period_start.getHours() < 10 ? '0' + period_start.getHours() : period_start.getHours())
542+
+ ':' + (period_start.getMinutes() < 10 ? '0' + period_start.getMinutes() : period_start.getMinutes()));
543+
period_tpl.set(':PERIOD_END_DATE', period_end.getDate() + ' ' + month[period_end.getMonth()] + ' ' + period_end.getFullYear());
544+
period_tpl.set(':PERIOD_END_TIME', (period_end.getHours() < 10 ? '0' + period_end.getHours() : period_end.getHours())
545+
+ ':' + (period_end.getMinutes() < 10 ? '0' + period_end.getMinutes() : period_end.getMinutes()));
546+
var period = period_tpl.finalize();
547+
527548
wrap.set(':CONTENT', acc.done());
549+
wrap.set(':PERIOD', period);
528550

529551
return wrap.finalize();
530552
}

‎web/js/pages.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ App.Pages.prepareHTML = function()
4141
$('.d-popup').remove();
4242
App.Actions.reset_batch();
4343
$('#actions-toolbar .stats-subbar').remove();
44+
$('#actions-toolbar .stats-components').remove();
4445
$('#actions-toolbar .do_action_new_entry').removeClass('hidden');
4546
$('.active').removeClass('active');
4647
$('.row-filters').removeClass('hidden');
@@ -176,8 +177,12 @@ App.Pages.STATS.prepareHTML = function()
176177
$('.row-filters').addClass('hidden');
177178
$('#actions-toolbar .do_action_new_entry').addClass('hidden');
178179
$('#actions-toolbar .stats-subbar').remove();
180+
$('#actions-toolbar .stats-components').remove();
179181
$('#actions-toolbar .do_action_new_entry').after(App.Templates.get('SUBMENU', 'stats').finalize());
182+
$('#actions-toolbar .date-range-controls').after(App.Templates.get('FILTERS', 'stats').finalize());
180183

184+
$('#content .stats-list').after('zzz');
185+
181186
$('#primary-nav-box .active').removeClass('active');
182187
$('#STATS').addClass('active');
183188
$('#new-entry-keyword').text(App.Helpers.getHumanTabName());

‎web/js/templates.js‎

Lines changed: 59 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1091,17 +1091,70 @@ App.Templates.html = {
10911091
</div><!-- // .row 1 -->']
10921092
},
10931093
stats: {
1094-
WRAPPER: ['<div class="stats-list">~!:CONTENT~!</div>'],
1095-
ENTRY: ['<div class="stats-block" style="min-height: 252px">\
1094+
WRAPPER: ['<div class="stats-list">\
1095+
~!:PERIOD~!\
1096+
~!:CONTENT~!\
1097+
</div>'],
1098+
PERIOD: ['<div class="stats-period">\
1099+
<span class="stats-period-title">Statistics for:</span>\
1100+
<span class="stats-dtstart">\
1101+
<span class="dt-day">~!:PERIOD_START_DATE~!</span>\
1102+
<span class="dt-time">~!:PERIOD_START_TIME~!</span>\
1103+
</span>\
1104+
<span class="stats-period-devider">&mdash;</span>\
1105+
<span class="stats-dtend">\
1106+
<span class="dt-day">~!:PERIOD_END_DATE~!</span>\
1107+
<span class="dt-time">~!:PERIOD_END_TIME~!</span>\
1108+
</span>\
1109+
</div>'],
1110+
ENTRY: ['<div class="stats-block">\
10961111
<h2 class="stats-block-header">~!:HEADER~!</h2>\
10971112
<div class="stats-block-wrap">\
10981113
<img class="stats-graph" src="~!:IMG_SRC~!" alt="" />\
10991114
</div>\
11001115
</div>'],
1101-
SUBMENU: ['<span class="stats-subbar"><span class="today sub-active" onClick="App.Actions.loadStats(\'today\')">today</span>\
1102-
<span class="week" onClick="App.Actions.loadStats(\'week\')">week</span>\
1103-
<span class="month" onClick="App.Actions.loadStats(\'month\')">month</span>\
1104-
<span class="year" onClick="App.Actions.loadStats(\'year\')">year</span></div>']
1116+
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>\
1117+
<span class="date-range-control week" onClick="App.Actions.loadStats(\'week\')">week</span>\
1118+
<span class="date-range-control month" onClick="App.Actions.loadStats(\'month\')">month</span>\
1119+
<span class="date-range-control year" onClick="App.Actions.loadStats(\'year\')">year</span></div>'],
1120+
FILTERS: ['<div class="stats-components">\
1121+
<span class="cust-checkbox-wrap stats-component">\
1122+
<input id="stats-la" class="cust-checkbox" type="checkbox" value=""/>\
1123+
<label for="stats-la" class="cust-checkbox-title">la</label>\
1124+
</span>\
1125+
<span class="cust-checkbox-wrap stats-component">\
1126+
<input id="stats-mem" class="cust-checkbox" type="checkbox" value=""/>\
1127+
<label for="stats-mem" class="cust-checkbox-title">mem</label>\
1128+
</span>\
1129+
<span class="cust-checkbox-wrap stats-component">\
1130+
<input id="stats-mysql" class="cust-checkbox" type="checkbox" value="" />\
1131+
<label for="stats-mysql" class="cust-checkbox-title">mysql</label>\
1132+
</span>\
1133+
<span class="cust-checkbox-wrap stats-component">\
1134+
<input id="stats-postgres" class="cust-checkbox" type="checkbox" value="" />\
1135+
<label for="stats-postgres" class="cust-checkbox-title">postgres</label>\
1136+
</span>\
1137+
<span class="cust-checkbox-wrap stats-component">\
1138+
<input id="stats-vsftpd" class="cust-checkbox" type="checkbox" value="" />\
1139+
<label for="stats-vsftpd" class="cust-checkbox-title">vsftpd</label>\
1140+
</span>\
1141+
<span class="cust-checkbox-wrap stats-component">\
1142+
<input id="stats-httpd" class="cust-checkbox" type="checkbox" value="" />\
1143+
<label for="stats-httpd" class="cust-checkbox-title">httpd</label>\
1144+
</span>\
1145+
<span class="cust-checkbox-wrap stats-component">\
1146+
<input id="stats-nginx" class="cust-checkbox" type="checkbox" value="" />\
1147+
<label for="stats-nginx" class="cust-checkbox-title">nginx</label>\
1148+
</span>\
1149+
<span class="cust-checkbox-wrap stats-component">\
1150+
<input id="stats-bandwidth" class="cust-checkbox" type="checkbox" value="" />\
1151+
<label for="stats-bandwidth" class="cust-checkbox-title">bandwidth</label>\
1152+
</span>\
1153+
<span class="cust-checkbox-wrap stats-component">\
1154+
<input id="stats-ssh" class="cust-checkbox" type="checkbox" value="" />\
1155+
<label for="stats-ssh" class="cust-checkbox-title">ssh</label>\
1156+
</span>\
1157+
</div>']
11051158
}
11061159
}
11071160

0 commit comments

Comments
 (0)