nicolas/librenms
1
0
Fork 0
mirror of https://github.com/stylersnico/librenms.git synced 2026-07-28 08:02:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

custom range picker for graphs browser. (thanks to Michael Hsu).

Browse Source 
git-svn-id: http://www.observium.org/svn/observer/trunk@2896 61d68cd4-352d-0410-923a-c4978735b2b8
This commit is contained in:
Adam Amstrong
2012-03-16 10:35:12 +00:00
parent e291e8de4d
commit 34c4793265
20 changed files with 2002 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/pages/graphs.inc.php
+102
View File
@@ -48,6 +48,92 @@ if (!$auth)
echo($title);
print_optionbar_end();
// css and js for datetimepicker
echo("
<link type='text/css' href='css/ui-lightness/jquery-ui-1.8.18.custom.css' rel='stylesheet' />
<script type='text/javascript' src='js/jquery-ui.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-timepicker-addon.js'></script>
<script type='text/javascript' src='js/jquery-ui-sliderAccess.js'></script>
<script type='text/javascript'>
$(function()
{
$('#dtpickerfrom').datetimepicker({
hourGrid: 4,
minuteGrid: 10,
onClose: function(dateText, inst) {
var toDateTextBox = $('#dtpickerto');
if (toDateTextBox.val() != '') {
var testStartDate = new Date(dateText);
var testEndDate = new Date(toDateTextBox.val());
if (testStartDate > testEndDate)
toDateTextBox.val(dateText);
}
else {
toDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
var toDateTextBox = $('#dtpickerto');
var toValue = toDateTextBox.val();
var start = $(this).datetimepicker('getDate');
toDateTextBox.datetimepicker('option', 'minDate', new Date(start.getTime()));
// we do this so the above datetimepicker call doesn't strip the time from the pre-set value in the text box.
toDateTextBox.val(toValue);
}
});
$('#dtpickerto').datetimepicker({
hourGrid: 4,
minuteGrid: 10,
maxDate: 0,
onClose: function(dateText, inst) {
var startDateTextBox = $('#dtpickerfrom');
if (startDateTextBox.val() != '') {
var testStartDate = new Date(startDateTextBox.val());
var testEndDate = new Date(dateText);
if (testStartDate > testEndDate)
startDateTextBox.val(dateText);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
var fromDateTextBox = $('#dtpickerfrom');
var fromValue = fromDateTextBox.val();
var end = $(this).datetimepicker('getDate');
fromDateTextBox.datetimepicker('option', 'maxDate', new Date(end.getTime()) );
// we do this so the above datetimepicker call doesn't strip the time from the pre-set value in the text box.
fromDateTextBox.val(fromValue);
}
});
});
function submitCustomRange(frmdata){
var reto = /to=([0-9])+/g;
var refrom = /from=([0-9])+/g;
var tsto = new Date(frmdata.dtpickerto.value);
var tsfrom = new Date(frmdata.dtpickerfrom.value);
tsto = tsto.getTime() / 1000;
tsfrom = tsfrom.getTime() / 1000;
frmdata.selfaction.value = frmdata.selfaction.value.replace(reto, 'to=' + tsto);
frmdata.selfaction.value = frmdata.selfaction.value.replace(refrom, 'from=' + tsfrom);
frmdata.action = frmdata.selfaction.value
return true;
}
</script>
<style type='text/css'>
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
");
print_optionbar_start();
$thumb_array = array('sixhour' => '6 Hours', 'day' => '24 Hours', 'twoday' => '48 Hours', 'week' => 'One Week', 'twoweek' => 'Two Weeks',
@@ -82,6 +168,22 @@ if (!$auth)
echo("<hr />");
// datetime range picker
echo("
<form id='customrange' action=\"test\">
<p>
");
echo("<input type=hidden id='selfaction' value='" . $_SERVER['PHP_SELF'] . "'>");
echo("
<strong>From:</strong> <input type='text' id='dtpickerfrom' maxlength=16 value='" . date('m/d/Y H:m', $graph_array['from']) . "'>
<strong>To:</strong> <input type='text' id='dtpickerto' maxlength=16 value='" . date('m/d/Y H:m', $graph_array['to']) . "'>
<input type='submit' id='submit' value='Update' onclick='javascript:submitCustomRange(this.form);'>
</p>
</form>
");
echo("<hr />");
if ($vars['legend'] == "no")
{
echo(generate_link("Show Legend",$vars, array('page' => "graphs", 'legend' => NULL)));