mirror/librenms-librenms
1
0
Fork 0
mirror of https://github.com/librenms/librenms.git synced 2024-10-07 16:52:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updated graphs page to use bootstrap datetimepicker PR#306

Browse Source 
- Separated from removal of jqplot code
- Merge remote-tracking branch 'laf/issue-laf-52'

Conflicts:
	html/index.php
This commit is contained in:
Paul Gear
2014-10-28 08:37:49 +10:00
parent ce62a1d324 1ab63f43ba
commit f7821198da
1 changed files with 43 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/pages/graphs.inc.php
+43 -96
View File
@@ -89,98 +89,6 @@ if (!$auth)
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({
showOn: 'button',
buttonImage: 'images/16/date.png',
buttonImageOnly: true,
dateFormat: 'yy-mm-dd',
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({
showOn: 'button',
buttonImage: 'images/16/date.png',
buttonImageOnly: true,
dateFormat: 'yy-mm-dd',
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.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>
<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',
@@ -221,12 +129,51 @@ if (!$auth)
<p>
");
echo("<input type=hidden id='selfaction' value='" . $_SERVER['REQUEST_URI'] . "'>");
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);'>
echo('<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label for="dtpickerfrom">From: </label>
<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 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>');
?>
<script type="text/javascript">
$(function () {
$('#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("
<input type='submit' class='btn btn-default' id='submit' value='Update' onclick='javascript:submitCustomRange(this.form);'>
</p>
</form>
");
echo("<hr />");