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

Added support for a datetime picker and used on graphs page

Browse Source
This commit is contained in:
laf
2014-10-04 20:09:52 +01:00
parent 2ed285e4b1
commit 61f94e05cc
9 changed files with 1438 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.scrutinizer.yml
+1 -1
View File
@@ -5,4 +5,4 @@ imports:
# please keep the excluded paths list sorted
filter:
excluded_paths: [ html/includes/geshi/*, html/includes/jpgraph/*, html/js/bootstrap*, html/js/jqplot/*, html/js/jquery.cycle*, html/js/jquery-ui-timepicker-addon.js, html/js/sorttable.js, html/js/tw-sack.js, includes/phpmailer/*, html/css/bootstrap*, html/includes/Slim/* ]
excluded_paths: [ html/includes/geshi/*, html/includes/jpgraph/*, html/js/bootstrap*, html/js/jqplot/*, html/js/jquery.cycle*, html/js/jquery-ui-timepicker-addon.js, html/js/sorttable.js, html/js/tw-sack.js, includes/phpmailer/*, html/css/bootstrap*, html/includes/Slim/*, html/js/moment* ]
html/css/bootstrap-datetimepicker.min.css
Vendored
+5
View File
@@ -0,0 +1,5 @@
/*!
* Datetimepicker for Bootstrap v3
//! version : 3.1.3
* https://github.com/Eonasdan/bootstrap-datetimepicker/
*/.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999!important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget>ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget a[data-action]{padding:6px 0}.bootstrap-datetimepicker-widget a[data-action]:active{box-shadow:none}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:54px;font-weight:700;font-size:1.2em;margin:0}.bootstrap-datetimepicker-widget button[data-action]{padding:6px}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;border-radius:4px}.bootstrap-datetimepicker-widget td{height:54px;line-height:54px;width:54px}.bootstrap-datetimepicker-widget td.cw{font-size:10px;height:20px;line-height:20px;color:#777}.bootstrap-datetimepicker-widget td.day{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#777}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:inline-block;width:54px;height:54px;line-height:54px;margin:2px 1.5px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td span.old{color:#777}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget th{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget th.picker-switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody>tr>td{padding:0!important}@media screen and (max-width:767px){.bootstrap-datetimepicker-widget.timepicker-sbs{width:283px}}
html/includes/print-menubar.php
-83
View File
@@ -111,34 +111,6 @@ if ($config['show_locations'])
</ul>
</li>
<script class="code" type="text/javascript">
$(document).ready(function() {
var data = [
['Up', <?php echo($devices['up']); ?>],
['Down', <?php echo($devices['down']); ?>],
['Ignored', <?php echo($devices['ignored']); ?>],
['Disabled', <?php echo($devices['disabled']); ?>]
];
var plot1 = jQuery.jqplot ('devices_chart', [data],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Turn off filling of slices.
fill: true,
showDataLabels: true,
// Add a margin to seperate the slices.
sliceMargin: 0,
// stroke the slices with a little thicker line.
lineWidth: 5
}
},
legend: { show:true, location: 'e' }
}
);
});
</script>
<?php
if ($config['show_services'])
@@ -168,33 +140,6 @@ if ($_SESSION['userlevel'] >= '10')
?>
</ul>
</li>
<script class="code" type="text/javascript">
$(document).ready(function() {
var data = [
['Up', <?php echo($services['up']); ?>],
['Down', <?php echo($services['down']); ?>],
];
var plot2 = jQuery.jqplot ('services_chart', [data],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Turn off filling of slices.
fill: true,
showDataLabels: true,
// Add a margin to seperate the slices.
sliceMargin: 0,
// stroke the slices with a little thicker line.
lineWidth: 5
}
},
legend: { show:true, location: 'e' }
}
);
});
</script>
<?php
}
@@ -267,34 +212,6 @@ if ($deleted_ports) { echo(' <li><a href="deleted-ports/"><img src="i
?>
<script class="code" type="text/javascript">
$(document).ready(function() {
var data = [
['Up', <?php echo($ports['up']); ?>],
['Down', <?php echo($ports['down']); ?>],
['Shutdown', <?php echo($ports['admindown']); ?>],
['Ignored', <?php echo($ports['ignored']); ?>],
['Deleted', <?php echo($ports['deleted']); ?>]
];
var plot3 = jQuery.jqplot ('ports_chart', [data],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Turn off filling of slices.
fill: true,
showDataLabels: true,
// Add a margin to seperate the slices.
sliceMargin: 0,
// stroke the slices with a little thicker line.
lineWidth: 5
}
},
legend: { show:true, location: 'e' }
}
);
});
</script>
</ul>
</li>
<?php
html/index.php
+2
View File
@@ -139,6 +139,8 @@ if ($config['page_refresh']) { echo(' <meta http-equiv="refresh" content="'.$co
<script src="js/typeahead.min.js"></script>
<script src="js/hogan-2.0.0.js"></script>
<script src="js/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<?php
if ($config['favicon']) { echo(' <link rel="shortcut icon" href="'.$config['favicon'].'" />' . "\n"); }
?>
html/js/bootstrap-datetimepicker.js
Vendored
+1384
View File
File diff suppressed because it is too large Load Diff
html/js/bootstrap-datetimepicker.min.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
html/js/moment-with-locales.min.js
Vendored
+10
View File
File diff suppressed because one or more lines are too long
html/js/moment.min.js
Vendored
+7
View File
File diff suppressed because one or more lines are too long
html/pages/graphs.inc.php
+28 -47
View File
@@ -89,12 +89,6 @@ if (!$auth)
print_optionbar_end();
// css and js for datetimepicker
echo("
<script type='text/javascript' src='js/moment-with-locales.min.js'></script>
<script type='text/javascript' src='js/bootstrap-datetimepicker.min.js'></script>
");
print_optionbar_start();
$thumb_array = array('sixhour' => '6 Hours', 'day' => '24 Hours', 'twoday' => '48 Hours', 'week' => 'One Week', 'twoweek' => 'Two Weeks',
@@ -135,61 +129,48 @@ if (!$auth)
<p>
");
echo("<input type=hidden id='selfaction' value='" . $_SERVER['REQUEST_URI'] . "'>");
echo('
<div class="row">
echo('<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label for="dtpickerfrom">From: </label>
<div class="input-group date" id="dtpickerfrom1">
<input type="text" class="form-control" id="dtpickerfrom" maxlength="16" value="' . date('Y-m-d H:i', $graph_array['from']) . '">
<div class="input-group date" id="dtpicker1">
<input type="text" class="form-control" id="dtpickerfrom" maxlength="16" value="' . date('Y-m-d H:i', $graph_array['from']) . '" data-date-format="YYYY-MM-DD HH:mm">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#dtpickerfrom1").datetimepicker();
});
</script>');
<div class="col-sm-2">
<div class="form-group">
<label for="dtpickerto">To: </label>
<div class="input-group date" id="dtpicker2">
<input type="text" class="form-control" id="dtpickerto" maxlength=16 value="' . date('Y-m-d H:i', $graph_array['to']) . '" data-date-format="YYYY-MM-DD HH:mm">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</div>');
?>
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker9'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker10'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker9').datetimepicker();
$('#datetimepicker10').datetimepicker();
$("#datetimepicker9").on("dp.change",function (e) {
$('#datetimepicker10').data("DateTimePicker").setMinDate(e.date);
});
$("#datetimepicker10").on("dp.change",function (e) {
$('#datetimepicker9').data("DateTimePicker").setMaxDate(e.date);
});
$('#dtpicker1').datetimepicker({useSeconds: false, useCurrent: true, sideBySide: true, useStrict: false, showToday: true});
$('#dtpicker2').datetimepicker({useSeconds: false, useCurrent: true, sideBySide: true, useStrict: false, showToday: true});
});
function submitCustomRange(frmdata) {
var reto = /to=([0-9])+/g;
var refrom = /from=([0-9])+/g;
var tsto = new Date(frmdata.dtpickerto.value.replace(' ','T'));
var tsfrom = new Date(frmdata.dtpickerfrom.value.replace(' ','T'));
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>
<?php
echo("
<strong>From:</strong> <input type='text' id='dtpickerfrom' maxlength=16 value='" . date('Y-m-d H:i', $graph_array['from']) . "'>
<strong>To:</strong> <input type='text' id='dtpickerto' maxlength=16 value='" . date('Y-m-d H:i', $graph_array['to']) . "'>
<input type='submit' id='submit' value='Update' onclick='javascript:submitCustomRange(this.form);'>
<input type='submit' class='btn btn-default' id='submit' value='Update' onclick='javascript:submitCustomRange(this.form);'>
</p>
</form>