Merge pull request #2183 from laf/issue-2156

Centralised the date selector for graphs for re-use

html/includes/print-date-selector.inc.php

@@ -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>
+';

html/index.php

@@ -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

html/js/librenms.js

@@ -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;
+}
+

html/pages/device/edit.inc.php

@@ -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";
   }

html/pages/devices.inc.php

@@ -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_new                = array();
-                $graph_array['type']        = $graph_type;
+                $graph_array_new['type']        = $graph_type;
-                $graph_array['device']      = $device['device_id'];
+                $graph_array_new['device']      = $device['device_id'];
-                $graph_array['to']          = $config['time']['now'];
+                $graph_array_new['height']      = '110';
-                $graph_array['from']        = $config['time']['day'];
+                $graph_array_new['width']       = $width;
-                $graph_array['height']      = '110';
+                $graph_array_new['legend']      = 'no';
-                $graph_array['width']       = $width;
+                $graph_array_new['title']       = 'yes';
-                $graph_array['legend']      = 'no';
+                $graph_array_new['from']        = $graph_array['from'];
-                $graph_array['title']       = 'yes';
+                $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";
             }
         }

html/pages/graphs.inc.php

@@ -113,57 +113,8 @@ else {
 
     echo("<hr />");
 
-    // datetime range picker
+    include_once 'includes/print-date-selector.inc.php';
-?>
-    <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>
 
-  ');
     echo ('<div style="padding-top: 5px";></div>');
     echo('<center>');
     if ($vars['legend'] == "no") {

html/pages/settings.inc.php

@@ -35,8 +35,6 @@ $pagetitle[] = $page_name . ' Settings';
 $config['memcached']['enable'] = false;
 ?>
 
-<script src="js/librenms.js"></script>
-
 <div class="container-fluid">
     <h2>
 <?php