mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
Added support for a datetime picker and used on graphs page
This commit is contained in:
laf
5
html/css/bootstrap-datetimepicker.min.css
vendored
Normal file
5
html/css/bootstrap-datetimepicker.min.css
vendored
Normal 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}}
|
||||
@@ -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
|
||||
|
||||
@@ -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"); }
|
||||
?>
|
||||
|
||||
1384
html/js/bootstrap-datetimepicker.js
vendored
Normal file
1384
html/js/bootstrap-datetimepicker.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
html/js/bootstrap-datetimepicker.min.js
vendored
Normal file
1
html/js/bootstrap-datetimepicker.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
10
html/js/moment-with-locales.min.js
vendored
Normal file
10
html/js/moment-with-locales.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
html/js/moment.min.js
vendored
Normal file
7
html/js/moment.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user