diff --git a/web/css/main.css b/web/css/main.css index 910e5e50..2a91b6a5 100644 --- a/web/css/main.css +++ b/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; + } + + diff --git a/web/js/actions.js b/web/js/actions.js index cf0d1868..c8f3cd72 100644 --- a/web/js/actions.js +++ b/web/js/actions.js @@ -733,8 +733,8 @@ App.Actions.loadStats = function(type) break; } - $('#actions-toolbar .sub-active').removeClass('sub-active'); - $('#actions-toolbar .'+type).addClass('sub-active'); + $('#actions-toolbar .active').removeClass('active'); + $('#actions-toolbar .'+type).addClass('active'); App.Ajax.request('STATS.getList', {period: period}, function(reply) { if (!reply.result) { diff --git a/web/js/html.js b/web/js/html.js index 4d58fe1f..529e693a 100644 --- a/web/js/html.js +++ b/web/js/html.js @@ -512,7 +512,6 @@ App.HTML.Build.stats_list = function(stats) if (!stats || stats.length == 0) { return '

Stats are not available

'; } - 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(); } diff --git a/web/js/pages.js b/web/js/pages.js index e5d465ea..9c3e9b9d 100644 --- a/web/js/pages.js +++ b/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()); diff --git a/web/js/templates.js b/web/js/templates.js index 46545bb9..eea39e12 100644 --- a/web/js/templates.js +++ b/web/js/templates.js @@ -1091,17 +1091,70 @@ App.Templates.html = { '] }, stats: { - WRAPPER: ['
~!:CONTENT~!
'], - ENTRY: ['
\ + WRAPPER: ['
\ + ~!:PERIOD~!\ + ~!:CONTENT~!\ +
'], + PERIOD: ['
\ + Statistics for:\ + \ + ~!:PERIOD_START_DATE~!\ + ~!:PERIOD_START_TIME~!\ + \ + —\ + \ + ~!:PERIOD_END_DATE~!\ + ~!:PERIOD_END_TIME~!\ + \ +
'], + ENTRY: ['
\

~!:HEADER~!

\
\ \
\
'], - SUBMENU: ['today\ - week\ - month\ - year
'] + SUBMENU: ['
Genarate For:today\ + week\ + month\ + year
'], + FILTERS: ['
\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ +
'] } }