Merge pull request #2183 from laf/issue-2156

Centralised the date selector for graphs for re-use
This commit is contained in:
Mike Rostermund
2015-10-21 00:14:38 +02:00
7 changed files with 94 additions and 66 deletions
+40
View File
@@ -0,0 +1,40 @@
<?php
echo "
<center>
<form class='form-inline' id='customrange'>
<input type=hidden id='selfaction' value='" . $_SERVER['REQUEST_URI'] . "'>
";
echo '
<div class="form-group">
<label for="dtpickerfrom">From</label>
<input type="text" class="form-control" id="dtpickerfrom" maxlength="16" value="' . $graph_array['from'] . '" data-date-format="YYYY-MM-DD HH:mm">
</div>
<div class="form-group">
<label for="dtpickerto">To</label>
<input type="text" class="form-control" id="dtpickerto" maxlength=16 value="' . $graph_array['to'] . '" data-date-format="YYYY-MM-DD HH:mm">
</div>
<input type="submit" class="btn btn-default" id="submit" value="Update" onclick="javascript:submitCustomRange(this.form);">
</form>
<script type="text/javascript">
$(function () {
var strfrom = new Date($("#dtpickerfrom").val()*1000);
$("#dtpickerfrom").val(strfrom.getFullYear()+"-"+
("0"+(strfrom.getMonth()+1)).slice(-2)+"-"+
("0"+strfrom.getDate()).slice(-2)+" "+
("0"+strfrom.getHours()).slice(-2)+":"+
("0"+strfrom.getMinutes()).slice(-2)
);
var strto = new Date($("#dtpickerto").val()*1000);
$("#dtpickerto").val(strto.getFullYear()+"-"+
("0"+(strto.getMonth()+1)).slice(-2)+"-"+
("0"+strto.getDate()).slice(-2)+" "+
("0"+strto.getHours()).slice(-2)+":"+
("0"+strto.getMinutes()).slice(-2)
);
$("#dtpickerfrom").datetimepicker({useCurrent: true, sideBySide: true, useStrict: false});
$("#dtpickerto").datetimepicker({useCurrent: true, sideBySide: true, useStrict: false});
});
</script></center>
';
+1
View File
@@ -165,6 +165,7 @@ else {
<script src="js/pace.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script src="js/lazyload.js"></script>
<script src="js/librenms.js"></script>
<script type="text/javascript">
<!-- Begin
+12
View File
@@ -97,3 +97,15 @@ $(document).ready(function() {
});
});
});
function submitCustomRange(frmdata) {
var reto = /to=([0-9])+/g;
var refrom = /from=([0-9])+/g;
var tsto = moment(frmdata.dtpickerto.value).unix();
var tsfrom = moment(frmdata.dtpickerfrom.value).unix();
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;
}
-2
View File
@@ -65,8 +65,6 @@ else {
print_optionbar_end();
echo '<script src="js/librenms.js"></script>';
if (is_file("pages/device/edit/".mres($vars['section']).".inc.php")) {
require "pages/device/edit/".mres($vars['section']).".inc.php";
}
+40 -12
View File
@@ -51,7 +51,7 @@ foreach ($menu_options as $option => $text) {
if ($vars['format'] == 'graph_'.$option) {
echo("<span class='pagemenu-selected'>");
}
echo('<a href="' . generate_url($vars, array('format' => 'graph_'.$option)) . '">' . $text . '</a>');
echo('<a href="' . generate_url($vars, array('format' => 'graph_'.$option, 'from' => $config['time']['day'], 'to' => $config['time']['now'])) . '">' . $text . '</a>');
if ($vars['format'] == 'graph_'.$option) {
echo("</span>");
}
@@ -90,6 +90,34 @@ print_optionbar_end();
list($format, $subformat) = explode("_", $vars['format'], 2);
if($format == "graph") {
if (!is_numeric($vars['from'])) {
$graph_array['from'] = $config['time']['day'];
}
else {
$graph_array['from'] = $vars['from'];
}
if (!is_numeric($vars['to'])) {
$graph_array['to'] = $config['time']['now'];
}
else {
$graph_array['to'] = $vars['to'];
}
echo "
<div class='well well-sm'>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
";
include_once 'includes/print-date-selector.inc.php';
echo '
</div>
</div>
</div>
</div>
';
$sql_param = array();
if(isset($vars['state'])) {
@@ -191,17 +219,17 @@ if($format == "graph") {
$width=315;
}
$graph_array = array();
$graph_array['type'] = $graph_type;
$graph_array['device'] = $device['device_id'];
$graph_array['to'] = $config['time']['now'];
$graph_array['from'] = $config['time']['day'];
$graph_array['height'] = '110';
$graph_array['width'] = $width;
$graph_array['legend'] = 'no';
$graph_array['title'] = 'yes';
$graph_array_new = array();
$graph_array_new['type'] = $graph_type;
$graph_array_new['device'] = $device['device_id'];
$graph_array_new['height'] = '110';
$graph_array_new['width'] = $width;
$graph_array_new['legend'] = 'no';
$graph_array_new['title'] = 'yes';
$graph_array_new['from'] = $graph_array['from'];
$graph_array_new['to'] = $graph_array['to'];
$graph_array_zoom = $graph_array;
$graph_array_zoom = $graph_array_new;
$graph_array_zoom['height'] = '150';
$graph_array_zoom['width'] = '400';
$graph_array_zoom['legend'] = 'yes';
@@ -209,7 +237,7 @@ if($format == "graph") {
$overlib_link = "device/device=".$device['device_id']."/";
echo "<div style='display: block; padding: 1px; margin: 2px; min-width: ".($width+90)."px; max-width:".($width+90)."px; min-height:170px; max-height:170px; text-align: center; float: left; background-color: #f5f5f5;'>";
echo '<div class="panel panel-default">';
echo overlib_link($overlib_link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
echo overlib_link($overlib_link, generate_lazy_graph_tag($graph_array_new), generate_graph_tag($graph_array_zoom), NULL);
echo "</div></div>\n\n";
}
}
+1 -50
View File
@@ -113,57 +113,8 @@ else {
echo("<hr />");
// datetime range picker
?>
<script type="text/javascript">
function submitCustomRange(frmdata) {
var reto = /to=([0-9])+/g;
var refrom = /from=([0-9])+/g;
var tsto = moment(frmdata.dtpickerto.value).unix();
var tsfrom = moment(frmdata.dtpickerfrom.value).unix();
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>
<?php
echo("<center>
<form class='form-inline' id='customrange' action='test'>
<input type=hidden id='selfaction' value='" . $_SERVER['REQUEST_URI'] . "'>");
echo('
<div class="form-group">
<label for="dtpickerfrom">From</label>
<input type="text" class="form-control" id="dtpickerfrom" maxlength="16" value="' . $graph_array['from'] . '" data-date-format="YYYY-MM-DD HH:mm">
</div>
<div class="form-group">
<label for="dtpickerto">To</label>
<input type="text" class="form-control" id="dtpickerto" maxlength=16 value="' . $graph_array['to'] . '" data-date-format="YYYY-MM-DD HH:mm">
</div>
<input type="submit" class="btn btn-default" id="submit" value="Update" onclick="javascript:submitCustomRange(this.form);">
</form>
<script type="text/javascript">
$(function () {
var strfrom = new Date($("#dtpickerfrom").val()*1000);
$("#dtpickerfrom").val(strfrom.getFullYear()+"-"+
("0"+(strfrom.getMonth()+1)).slice(-2)+"-"+
("0"+strfrom.getDate()).slice(-2)+" "+
("0"+strfrom.getHours()).slice(-2)+":"+
("0"+strfrom.getMinutes()).slice(-2)
);
var strto = new Date($("#dtpickerto").val()*1000);
$("#dtpickerto").val(strto.getFullYear()+"-"+
("0"+(strto.getMonth()+1)).slice(-2)+"-"+
("0"+strto.getDate()).slice(-2)+" "+
("0"+strto.getHours()).slice(-2)+":"+
("0"+strto.getMinutes()).slice(-2)
);
$("#dtpickerfrom").datetimepicker({useCurrent: true, sideBySide: true, useStrict: false});
$("#dtpickerto").datetimepicker({useCurrent: true, sideBySide: true, useStrict: false});
});
</script></center>
include_once 'includes/print-date-selector.inc.php';
');
echo ('<div style="padding-top: 5px";></div>');
echo('<center>');
if ($vars['legend'] == "no") {
-2
View File
@@ -35,8 +35,6 @@ $pagetitle[] = $page_name . ' Settings';
$config['memcached']['enable'] = false;
?>
<script src="js/librenms.js"></script>
<div class="container-fluid">
<h2>
<?php