ruwin
/
product-iots
forked from community/product-iots
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add statistic selection options with updated date range picker

Browse Source
application-manager-new
charithag 10 years ago
parent 62467ac564
commit e2eafa1320
4 changed files with 1870 additions and 1969 deletions
Show Stats Download Patch File Download Diff File

22
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/mydevice.hbs
Unescape View File

@ -24,16 +24,22 @@
<hr> <hr>
</div> </div>
</div> </div>
<div class="row float-right margin-top"> <div id="rangeSliderWrapper" class="pull-right" style="width: 550px;">
<div class="right margin-right"> <div class="row-fluid">
<p style="color:#000;float:left;margin-top:25px">Date Range:</p> <div class="span12">
<input class="right margin-right" id="date-range1" size="60" value="" style="margin-top: 20px"> <div id="dateRangePickerContainer">
<button type="button" id="btn-draw-graphs" class="btn btn-primary" style="margin-top: 20px"> <div class="btn-group" role="group">
Draw Graphs <button id="hour-btn" type="button" class="btn btn-default date-range">Hour</button>
</button> <button id="today-btn" type="button" class="btn btn-default date-range">Day</button>
<button id="week-btn" type="button" class="btn btn-default date-range">Week</button>
<button id="month-btn" type="button" class="btn btn-default date-range">Month</button>
<button id="date-range" type="button" class="btn btn-default date-range last-child" data-toggle="popup" title="Click to set custom date range"></button>
</div>
<span class="add-on-cal"><i style="margin-right:0px;" class="icon-calendar"></i></span>
</div>
</div>
</div> </div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div class="row margin-double"> <div class="row margin-double">
<div> <div>

563
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/css/daterangepicker.css
Unescape View File

@ -1,232 +1,331 @@
.date-picker .date-picker {
{ width: 170px;
width:170px; height: 25px;
height:25px; padding: 0;
padding:0; border: 0;
border:0; line-height: 25px;
line-height:25px; padding-left: 10px;
padding-left:10px; font-size: 12px;
font-size:12px; font-family: Arial;
font-family:Arial; font-weight: bold;
font-weight:bold; cursor: pointer;
cursor:pointer; color: #303030;
color:#303030; position: relative;
position:relative; z-index: 2;
z-index:2; }
}
.date-picker-wrapper .date-picker-wrapper {
{ position: absolute;
position:absolute; z-index: 1;
z-index:1; border: 1px solid #bfbfbf;
border:1px solid #bfbfbf; background-color: #efefef;
background-color:#efefef; width: 448px;
width:428px; padding: 5px 12px;
padding: 5px 12px; font-size: 12px;
font-size:12px; line-height: 20px;
line-height:20px; color: #aaa;
color:#aaa; font-family: Arial;
font-family:Arial; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
box-shadow:3px 3px 10px rgba(0,0,0,0.5); }
}
.date-picker-wrapper.single-date { .date-picker-wrapper.single-date {
width:auto; width: auto;
} }
.date-picker-wrapper.no-shortcuts { padding-bottom:12px;}
.date-picker-wrapper .footer .date-picker-wrapper.no-shortcuts {
{ padding-bottom: 12px;
font-size:11px; }
padding-top: 3px;
} .date-picker-wrapper .footer {
.date-picker-wrapper b display: none;
{ font-size: 11px;
color:#666; padding-top: 3px;
font-weight:700; }
}
.date-picker-wrapper a .date-picker-wrapper b {
{ color: #666;
color: rgb(107, 180, 214); font-weight: 700;
text-decoration:underline; }
}
.date-picker-wrapper .month-name .date-picker-wrapper a {
{ color: rgb(107, 180, 214);
text-transform: uppercase; text-decoration: underline;
} }
.date-picker-wrapper .month-wrapper
{ .date-picker-wrapper .month-wrapper {
border:1px solid #bfbfbf; border: 1px solid #bfbfbf;
border-radius:3px; border-radius: 3px;
background-color:#fff; background-color: #fff;
padding:5px; padding: 5px;
cursor:default; cursor: default;
position:relative; position: relative;
_overflow:hidden; _overflow: hidden;
} }
.date-picker-wrapper .month-wrapper table
{ .date-picker-wrapper .month-wrapper table {
width:190px; width: 190px;
float:left; float: left;
} }
.date-picker-wrapper .month-wrapper table.month2
{ .date-picker-wrapper .month-wrapper table.month2 {
width:190px; width: 190px;
float:right; float: right;
} }
.date-picker-wrapper .month-wrapper table th,
.date-picker-wrapper .month-wrapper table td .date-picker-wrapper .month-wrapper table th,
{ .date-picker-wrapper .month-wrapper table td {
vertical-align:middle; vertical-align: middle;
text-align:center; text-align: center;
line-height:14px; line-height: 14px;
margin : 0px; margin: 0px;
padding : 0px; padding: 0px;
} }
.date-picker-wrapper .month-wrapper table .day
{ .date-picker-wrapper .month-wrapper table .day {
height:19px; height: 19px;
line-height:19px; line-height: 19px;
font-size:12px; font-size: 12px;
margin-bottom:1px; margin-bottom: 1px;
color:#999; color: #999;
cursor:default; cursor: default;
} }
.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth .date-picker-wrapper .month-wrapper table div.day.lastMonth,
{ .date-picker-wrapper .month-wrapper table div.day.nextMonth {
color:#999; color: #999;
cursor:default; cursor: default;
} }
.date-picker-wrapper .month-wrapper table .day.checked
{ .date-picker-wrapper .month-wrapper table .day.checked {
background-color: rgba(156, 219, 247, 0.5); background-color: rgb(156, 219, 247);
} }
.date-picker-wrapper .month-wrapper table .week-name
{ .date-picker-wrapper .month-wrapper table .week-name {
height:20px; height: 20px;
line-height:20px; line-height: 20px;
font-weight:100; font-weight: 100;
text-transform: uppercase; }
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip {
.date-picker-wrapper .month-wrapper table .day.has-tooltip { cursor:help !important;} cursor: help !important;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid
{ .date-picker-wrapper .month-wrapper table .day.toMonth.valid {
color:#333; color: #333;
cursor:pointer; cursor: pointer;
} }
.date-picker-wrapper .month-wrapper table .day.real-today { background-color: rgb(255, 230, 132); } .date-picker-wrapper .month-wrapper table .day.real-today {
.date-picker-wrapper .month-wrapper table .day.real-today.checked { background-color: rgb(112, 204, 213); } background-color: rgb(255, 230, 132);
}
.date-picker-wrapper table .caption .date-picker-wrapper .month-wrapper table .day.real-today.checked {
{ background-color: rgb(112, 204, 213);
height:40px; }
}
.date-picker-wrapper table .caption .next, .date-picker-wrapper table .caption {
.date-picker-wrapper table .caption .prev height: 40px;
{ }
padding:0 5px;
cursor:pointer; .date-picker-wrapper table .caption .next,
} .date-picker-wrapper table .caption .prev {
.date-picker-wrapper table .caption .next:hover, padding: 0 5px;
.date-picker-wrapper table .caption .prev:hover cursor: pointer;
{ }
background-color:#ccc;
color:white; .date-picker-wrapper table .caption .next:hover,
} .date-picker-wrapper table .caption .prev:hover {
.date-picker-wrapper .gap background-color: #ccc;
{ color: white;
position:absolute; }
display:none;
top:0px; .date-picker-wrapper .gap {
left:204px; position: absolute;
z-index: 1; display: none;
width:15px; top: 0px;
height: 100%; left: 204px;
background-color:red; z-index: 1;
font-size:0; width: 15px;
line-height:0; height: 100%;
} background-color: red;
.date-picker-wrapper .gap .gap-lines { height: 100%; overflow:hidden; } font-size: 0;
.date-picker-wrapper .gap .gap-line { height:15px;width:15px; position:relative; } line-height: 0;
.date-picker-wrapper .gap .gap-line .gap-1 { z-index:1; height:0; border-left:8px solid white; border-top:8px solid #eee;border-bottom:8px solid #eee; } }
.date-picker-wrapper .gap .gap-line .gap-2 { position:absolute; right:0; top:0px; z-index:2; height:0; border-left:8px solid transparent; border-top:8px solid white; }
.date-picker-wrapper .gap .gap-line .gap-3 { position:absolute; right:0; top:8px; z-index:2; height:0; border-left:8px solid transparent; border-bottom:8px solid white; } .date-picker-wrapper .gap .gap-lines {
.date-picker-wrapper .gap .gap-top-mask { width: 6px; height:1px; position:absolute; top: -1px; left: 1px; background-color: #eee; z-index:3; } height: 100%;
.date-picker-wrapper .gap .gap-bottom-mask { width: 6px; height:1px; position:absolute; bottom: -1px; left: 7px; background-color: #eee; z-index:3; } overflow: hidden;
}
.date-picker-wrapper .selected-days
{ .date-picker-wrapper .gap .gap-line {
display:none; height: 15px;
} width: 15px;
.date-picker-wrapper .drp_top-bar position: relative;
{ }
line-height:40px;
height:40px; .date-picker-wrapper .gap .gap-line .gap-1 {
position:relative; z-index: 1;
} height: 0;
.date-picker-wrapper .drp_top-bar .error-top { display:none; } border-left: 8px solid white;
.date-picker-wrapper .drp_top-bar .normal-top { display:none; } border-top: 8px solid #eee;
.date-picker-wrapper .drp_top-bar .default-top { display:block; } border-bottom: 8px solid #eee;
}
.date-picker-wrapper .drp_top-bar.error .default-top { display:none; }
.date-picker-wrapper .drp_top-bar.error .error-top { display:block; color:red; } .date-picker-wrapper .gap .gap-line .gap-2 {
position: absolute;
.date-picker-wrapper .drp_top-bar.normal .default-top { display:none; } right: 0;
.date-picker-wrapper .drp_top-bar.normal .normal-top { display:block; } top: 0px;
z-index: 2;
.date-picker-wrapper .drp_top-bar .apply-btn height: 0;
{ border-left: 8px solid transparent;
position:absolute; border-top: 8px solid white;
right: 0px; }
top: 6px;
padding:3px 5px; .date-picker-wrapper .gap .gap-line .gap-3 {
margin:0; position: absolute;
font-size:12px; right: 0;
border-radius:4px; top: 8px;
cursor:pointer; z-index: 2;
height: 0;
color: #d9eef7; border-left: 8px solid transparent;
border: solid 1px #0076a3; border-bottom: 8px solid white;
background: #0095cd; }
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5); .date-picker-wrapper .gap .gap-top-mask {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); width: 6px;
color:white; height: 1px;
} position: absolute;
top: -1px;
.date-picker-wrapper .drp_top-bar .apply-btn.disabled left: 1px;
{ background-color: #eee;
cursor: pointer; z-index: 3;
color: #606060; }
border: solid 1px #b7b7b7;
background: #fff; .date-picker-wrapper .gap .gap-bottom-mask {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); width: 6px;
background: -moz-linear-gradient(top, #fff, #ededed); height: 1px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); position: absolute;
} bottom: -1px;
/*time styling*/ left: 7px;
.time { background-color: #eee;
position: relative; z-index: 3;
} }
.time input[type=range] {
vertical-align: middle; .date-picker-wrapper .selected-days {
} display: none;
.time1, .time2 { }
width: 180px;
padding: 0 5px; .date-picker-wrapper .drp_top-bar {
text-align: center; line-height: 40px;
} height: 40px;
.time1 { position: relative;
float: left; }
}
.time2 { .date-picker-wrapper .drp_top-bar .error-top {
float: right; display: none;
} }
.hour, .minute {
text-align: right; .date-picker-wrapper .drp_top-bar .normal-top {
} display: none;
.hide { }
display: none;
} .date-picker-wrapper .drp_top-bar .default-top {
display: block;
}
.date-picker-wrapper .drp_top-bar.error .default-top {
display: none;
}
.date-picker-wrapper .drp_top-bar.error .error-top {
display: block;
color: red;
}
.date-picker-wrapper .drp_top-bar.normal .default-top {
display: none;
}
.date-picker-wrapper .drp_top-bar.normal .normal-top {
display: block;
}
.date-picker-wrapper .drp_top-bar .apply-btn {
position: absolute;
right: 0px;
top: 6px;
padding: 3px 5px;
margin: 0;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
color: white;
}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
pointer-events: none;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
/*time styling*/
.time {
position: relative;
}
.time input[type=range] {
vertical-align: middle;
}
.time1, .time2 {
width: 180px;
padding: 0 5px;
text-align: center;
}
.time1 {
float: left;
}
.time2 {
float: right;
}
.hour, .minute {
text-align: left;
}
.hide {
display: none;
}
input.hour-range, input.minute-range {
width: 150px;
}
#dateRangePickerContainer .date-range, #dateRangePickerContainer .input-append {
background: none !important;
}
#date-range{
padding-right:30px;
width:300px;
height:100%;
display:inline-block;
}
#dateRangePickerContainer{
float:right;
margin-top:-6px;
}

195
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graph_util.js
Unescape View File

@ -11,76 +11,96 @@ Rickshaw.Graph.Renderer.BarNoGap = Rickshaw.Class.create(Rickshaw.Graph.Renderer
} }
}); });
var configObject = {
format: 'DD.MM.YYYY HH:mm', var currentDay = new Date();
var startDate = new Date(currentDay.getTime() - (60 * 60 * 24 * 100));
var endDate = new Date(currentDay.getTime());
var configObject = {
startOfWeek: 'monday',
separator: ' to ', separator: ' to ',
language: 'auto', format: 'YYYY-MM-DD HH:mm',
startOfWeek: 'sunday',// or sunday autoClose: false,
time: {
enabled: true
},
shortcuts: 'hide',
endDate: currentDay,
getValue: function () { getValue: function () {
return this.value; return this.value;
}, },
setValue: function (s) { setValue: function (s) {
this.value = s; this.value = s;
}, }
startDate: false,
endDate: false,
minDays: 0,
maxDays: 0,
showShortcuts: true,
time: {
enabled: true
},
shortcuts: {
//'prev-days': [1,3,5,7],
'next-days': [3, 5, 7],
//'prev' : ['week','month','year'],
'next': ['week', 'month', 'year']
},
customShortcuts: [],
inline: false,
container: 'body',
alwaysOpen: false,
singleDate: false,
batchMode: false,
stickyMonths: false
}; };
$('#date-range1').dateRangePicker(configObject) var DateRange = convertDate(startDate) + " " + configObject.separator + " " + convertDate(endDate);
$('#date-range').dateRangePicker(configObject)
.bind('datepicker-apply', function (event, dateRange) { .bind('datepicker-apply', function (event, dateRange) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
fromDate = dateRange.date1 != "Invalid Date" ? dateRange.date1.getTime() / 1000 : null; fromDate = dateRange.date1 != "Invalid Date" ? dateRange.date1.getTime() / 1000 : null;
toDate = dateRange.date2 != "Invalid Date" ? dateRange.date2.getTime() / 1000 : null; toDate = dateRange.date2 != "Invalid Date" ? dateRange.date2.getTime() / 1000 : null;
}); getStats(fromDate, toDate);
}
var now = new Date(); );
var startDate = new Date(now.getTime() - (60*60*24*100));
var endDate = new Date(now.getTime());
var DateRange = customFormatDate(startDate,configObject.format) +" "+ configObject.separator +" "+ customFormatDate(endDate,configObject.format);
console.log(DateRange);
$( document ).ready(function() { $(document).ready(function () {
$('#date-range1').val(DateRange); $('#date-range').html(DateRange);
$('#date-range1').trigger('datepicker-apply', $('#date-range').trigger('datepicker-apply',
{ {
'value': DateRange, 'value': DateRange,
'date1' : startDate, 'date1': startDate,
'date2' : endDate 'date2': endDate
}); });
});
$('#btn-draw-graphs').trigger("click"); //day picker
$('#today-btn').on('click', function () {
getDateTime(currentDay.getTime() - 86400000, currentDay.getTime());
}); });
//26.04.2015 08:46 to 22.07.2015 08:46 //hour picker
$('#hour-btn').on('click', function () {
getDateTime(currentDay.getTime() - 3600000, currentDay.getTime());
})
$('#btn-draw-graphs').on('click', function () { //week picker
var deviceId = getUrlParameter('deviceId'); $('#week-btn').on('click', function () {
var deviceType = getUrlParameter('deviceType'); getDateTime(currentDay.getTime() - 604800000, currentDay.getTime());
console.log("device id:"+deviceId); })
getStats(deviceId, deviceType, fromDate, toDate);
//month picker
$('#month-btn').on('click', function () {
getDateTime(currentDay.getTime() - (604800000 * 4), currentDay.getTime());
}); });
function getStats(deviceId, deviceType, from, to) { $('body').on('click', '.btn-group button', function (e) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
function getDateTime(from, to) {
startDate = new Date(from);
endDate = new Date(to);
DateRange = convertDate(startDate) + " " + configObject.separator + " " + convertDate(endDate);
console.log(DateRange);
$('#date-range').html(DateRange);
$('#date-range').trigger('datepicker-apply',
{
'value': DateRange,
'date1': startDate,
'date2': endDate
}
);
getStats(from / 1000, to / 1000);
}
function getStats(from, to) {
var deviceId = getUrlParameter('deviceId');
var deviceType = getUrlParameter('deviceType');
var requestData = new Object(); var requestData = new Object();
@ -148,7 +168,7 @@ function updateGraphs(stats) {
function scaleGraphs() { function scaleGraphs() {
var sliders = $('.right_handle'); var sliders = $('.right_handle');
if (sliders.length == 0){ if (sliders.length == 0) {
return; return;
} }
@ -179,7 +199,9 @@ function scaleGraphs() {
function convertStatsToGraphData(stats) { function convertStatsToGraphData(stats) {
var graphData = new Array(); var graphData = new Array();
if(!stats){return graphData;} if (!stats) {
return graphData;
}
for (var i = 0; i < stats.length; i++) { for (var i = 0; i < stats.length; i++) {
graphData.push({x: parseInt(stats[i]['time']) * 1000, y: stats[i]['value']}) graphData.push({x: parseInt(stats[i]['time']) * 1000, y: stats[i]['value']})
} }
@ -188,65 +210,34 @@ function convertStatsToGraphData(stats) {
} }
function convertStateStatsToGraphData(stats) {
function convertStateStatsToGraphData(stats){
var graphData = new Array(); var graphData = new Array();
if(!stats){return graphData;} if (!stats) {
return graphData;
}
var yValue; var yValue;
for(var i = 0; i < stats.length; i++){ for (var i = 0; i < stats.length; i++) {
yValue = -1; yValue = -1;
if(stats[i]['value'].toUpperCase() == 'ON'){
yValue = 1;
}else if(stats[i]['value'].toUpperCase() == 'OFF'){
yValue = 0;
}
graphData.push({x: parseInt(stats[i]['time']) * 1000, y: yValue})
}
return graphData;
}
function arrayMin(arr) { if (stats[i]['value'].toUpperCase() == 'ON') {
var len = arr.length, min = Infinity; yValue = 1;
while (len--) { } else if (stats[i]['value'].toUpperCase() == 'OFF') {
if (arr[len] < min) { yValue = 0;
min = arr[len];
} }
}
return min;
};
function arrayMax(arr) { graphData.push({x: parseInt(stats[i]['time']) * 1000, y: yValue})
var len = arr.length, max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
} }
return max;
};
return graphData;
}
function customFormatDate(timeStamp, formatString){ function convertDate(date) {
console.log("came"+formatString); var month = date.getMonth() + 1;
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th; var day = date.getDate();
YYYY=timeStamp.getFullYear(); var hour=date.getHours();
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M; var minute=date.getMinutes();
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3); return date.getFullYear() + '-' + (('' + month).length < 2 ? '0' : '')
DD = (D=timeStamp.getDate())<10?('0'+D):D; + month + '-' + (('' + day).length < 2 ? '0' : '') + day +" "+ (('' + hour).length < 2 ? '0' : '')
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3); + hour +":"+(('' + minute).length < 2 ? '0' : '')+ minute;
formatString = formatString.replace("YYYY",YYYY).replace("MM",MM).replace("DD",DD).replace("D",D);
console.log(formatString);
h=(hhh=timeStamp.getHours());
if (h==0) h=24;
if (h>12) h-=12;
hh = h<10?('0'+h):h;
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
return formatString.replace("hhh",hhh).replace("HH",hh).replace("h",h).replace("mm",mm).replace("m",m).replace("ss",ss).replace("s",s).replace("ampm",ampm).replace("AMPM",AMPM);
} }

3059
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/jquery.daterangepicker.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save