frodovdr/raspap-webgui
1
0
Fork 0
mirror of https://github.com/billz/raspap-webgui.git synced 2023-10-10 13:37:24 +02:00
Code Issues Releases Wiki Activity

Use seperate container for chart and datatable.

Browse Source 
Cleanup unused code comments.

Signed-off-by: D9ping <D9ping@users.noreply.github.com>
This commit is contained in:
D9ping 2018-09-10 21:41:35 +02:00
parent 7b2f42f326
commit 7c3820d9ab
3 changed files with 44 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ajax/bandwidth/get_bandwidth.php
View File

@ -2,12 +2,12 @@
require_once '../../includes/config.php'; require_once '../../includes/config.php';
require_once RASPI_CONFIG.'/raspap.php'; require_once RASPI_CONFIG.'/raspap.php';
// For privacy require authentication.
session_start(); session_start();
header('X-Frame-Options: DENY'); header('X-Frame-Options: DENY');
header("Content-Security-Policy: default-src 'none'; connect-src 'self'"); header("Content-Security-Policy: default-src 'none'; connect-src 'self'");
require_once '../../includes/authenticate.php'; require_once '../../includes/authenticate.php';
$interface = filter_input(INPUT_GET, 'inet', FILTER_SANITIZE_SPECIAL_CHARS); $interface = filter_input(INPUT_GET, 'inet', FILTER_SANITIZE_SPECIAL_CHARS);
if (empty($interface)) { if (empty($interface)) {
// Use first interface if inet parameter not provided. // Use first interface if inet parameter not provided.
@ -37,15 +37,12 @@ $timeunits = filter_input(INPUT_GET, 'tu');
if ($timeunits === 'm') { if ($timeunits === 'm') {
// months // months
$jsonData = $jsonobj['interfaces'][0]['traffic']['months']; $jsonData = $jsonobj['interfaces'][0]['traffic']['months'];
//} elseif ($timeunits === 'h') {
// $jsonData = $jsonobj['interfaces'][0]['traffic']['hours'];
} else { } else {
// default: days // default: days
$jsonData = $jsonobj['interfaces'][0]['traffic']['days']; $jsonData = $jsonobj['interfaces'][0]['traffic']['days'];
} }
$datasizeunits = filter_input(INPUT_GET, 'dsu'); $datasizeunits = filter_input(INPUT_GET, 'dsu');
header('X-Content-Type-Options: nosniff'); header('X-Content-Type-Options: nosniff');
header('Content-Type: application/json'); header('Content-Type: application/json');
echo '[ '; echo '[ ';
@ -54,11 +51,6 @@ for ($i = count($jsonData) - 1; $i >= 0; --$i) {
if ($timeunits === 'm') { if ($timeunits === 'm') {
$dt = DateTime::createFromFormat('Y n', $jsonData[$i]['date']['year'].' '. $dt = DateTime::createFromFormat('Y n', $jsonData[$i]['date']['year'].' '.
$jsonData[$i]['date']['month']); $jsonData[$i]['date']['month']);
// } elseif ($timeunits === 'h') {
// $dt = DateTime::createFromFormat('Y n j G i', $jsonData[$i]['date']['year'].' '.
// $jsonData[$i]['date']['month'].' '.
// $jsonData[$i]['date']['day'].' '.
// $i.' 00');
} else { } else {
$dt = DateTime::createFromFormat('Y n j', $jsonData[$i]['date']['year'].' '. $dt = DateTime::createFromFormat('Y n j', $jsonData[$i]['date']['year'].' '.
$jsonData[$i]['date']['month'].' '. $jsonData[$i]['date']['month'].' '.
@ -82,9 +74,6 @@ for ($i = count($jsonData) - 1; $i >= 0; --$i) {
if ($timeunits === 'm') { if ($timeunits === 'm') {
echo '{ "date": "' , $dt->format('Y-m') , '", "rx": "' , $datareceived , echo '{ "date": "' , $dt->format('Y-m') , '", "rx": "' , $datareceived ,
'", "tx": "' , $datasend , '" }'; '", "tx": "' , $datasend , '" }';
// } elseif ($timeunits === 'h') {
// echo '{ "date": "' , $dt->format('Y-m-d H:i') , '", "rx": ' , $datareceived ,
// ', "tx": ' , $datasend , ' }';
} else { } else {
echo '{ "date": "' , $dt->format('Y-m-d') , '", "rx": "' , $datareceived , echo '{ "date": "' , $dt->format('Y-m-d') , '", "rx": "' , $datareceived ,
'", "tx": "' , $datasend , '" }'; '", "tx": "' , $datasend , '" }';

65
includes/vnstat.php
View File

@ -19,19 +19,18 @@ function DisplayVnstat(&$extraFooterScripts)
<div class="panel-body"> <div class="panel-body">
<ul id="tabbarBandwidth" class="nav nav-tabs" role="tablist"> <ul id="tabbarBandwidth" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li> <li role="presentation" class="active"><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li>
<?php /* <li role="presentation" class=""><a href="#hours" aria-controls="hours" role="tab" data-toggle="tab">php echo _("Hourly"); ?</a></li> */ ?>
<li role="presentation" class=""><a href="#monthly" aria-controls="monthly" role="tab" data-toggle="tab"><?php echo _("Monthly"); ?></a></li> <li role="presentation" class=""><a href="#monthly" aria-controls="monthly" role="tab" data-toggle="tab"><?php echo _("Monthly"); ?></a></li>
</ul> </ul>
<div id="tabsBandwidth" class="tabcontenttraffic tab-content"> <div id="tabsBandwidth" class="tabcontenttraffic tab-content">
<div role="tabpanel" class="tab-pane active" id="daily"> <div role="tabpanel" class="tab-pane active fade in" id="daily">
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-12">
<h4><?php echo _('Daily traffic amount'); ?></h4> <h4><?php echo _('Daily traffic amount'); ?></h4>
<label for="cbxInterfacedaily"><?php echo _('interface'); ?></label> <select id="cbxInterfacedaily" class="form-control" name="interface"> <label for="cbxInterfacedaily"><?php echo _('interface'); ?></label> <select id="cbxInterfacedaily" class="form-control" name="interface">
<?php <?php
exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo); exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
foreach ($interfacesWlo as $interface) { foreach ($interfacesWlo as $interface) {
echo ' <option value="' , htmlentities($interface. ENT_QUOTES) , '">' , echo ' <option value="' , htmlentities($interface, ENT_QUOTES) , '">' ,
htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL; htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
} }
@ -40,60 +39,36 @@ foreach ($interfacesWlo as $interface) {
<div class="hidden alert alert-info" id="divLoaderBandwidthdaily"> <div class="hidden alert alert-info" id="divLoaderBandwidthdaily">
<?php echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?> <?php echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?>
</div> </div>
<div id="divBandwidthdaily"></div><br /> <div id="divChartBandwidthdaily"></div>
<br /> <div id="divTableBandwidthdaily"></div>
</div> </div>
</div> </div>
</div> </div><!-- /.tab-pane -->
<?php <div role="tabpanel" class="tab-pane fade" id="monthly">
/*
<div role="tabpanel" class="tab-pane" id="hourly">
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-12">
<h4>php echo _("Hourly traffic amount today"); ?</h4> <h4><?php echo _("Monthly traffic amount"); ?></h4>
<label for="cbxInterfacehours"><?php echo _('interface'); ?></label> <select id="cbxInterfacehours" class="form-control" name="interface"> <label for="cbxInterfacemonthly"><?php echo _('interface'); ?></label> <select id="cbxInterfacemonthly" class="form-control" name="interface">
php
foreach ($interfacesWlo as $interface) {
echo ' <option value="' , htmlentities($interface. ENT_QUOTES) , '">' ,
htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
}
?
</select>
<div class="hidden alert alert-info" id="divLoaderBandwidthhourly">
<hp echo sprintf(_("Loading %s bandwidth chart"), _('hourly')); ?
</div>
<div id="divBandwidthhours"></div><br />
</div>
</div>
</div>
*/
?>
<div role="tabpanel" class="tab-pane" id="monthly">
<div class="row">
<div class="col-lg-6">
<h4><?php echo _("Monthly traffic amount"); ?></h4>
<label for="cbxInterfacemonthly"><?php echo _('interface'); ?></label> <select id="cbxInterfacemonthly" class="form-control" name="interface">
<?php <?php
foreach ($interfacesWlo as $interface) { foreach ($interfacesWlo as $interface) {
echo ' <option value="' , htmlentities($interface. ENT_QUOTES) , '">' , echo ' <option value="' , htmlentities($interface, ENT_QUOTES) , '">' ,
htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL; htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
} }
?> ?>
</select> </select>
<div class="hidden alert alert-info" id="divLoaderBandwidthmonthly"> <div class="hidden alert alert-info" id="divLoaderBandwidthmonthly">
<?php echo sprintf(_("Loading %s bandwidth chart"), _('monthly')); ?> <?php echo sprintf(_("Loading %s bandwidth chart"), _('monthly')); ?>
</div> </div>
<div id="divBandwidthmonthly"></div><br /> <div id="divChartBandwidthmonthly"></div>
<br /> <div id="divTableBandwidthmonthly"></div>
</div>
</div> </div>
</div> </div><!-- /.tab-pane -->
</div> </div><!-- /.tabsBandwidth -->
</div><!-- /.tabcontenttraffic --> </div><!-- /.panel-default -->
</div><!-- /.panel-default --> </div><!-- /.col-md-6 -->
</div><!-- /.col-md-6 --> </div><!-- /.row -->
</div><!-- /.row -->
</div><!-- /.panel-body --> </div><!-- /.panel-body -->
</div><!-- /.panel-primary --> </div><!-- /.panel-primary -->
<div class="panel-footer"><?php echo _("Information provided by vnstat"); ?></div> <div class="panel-footer"><?php echo _("Information provided by vnstat"); ?></div>

41
js/bandwidthcharts.js
View File

@ -18,8 +18,8 @@
/** /**
* Create a bootstrap data table. * Create a bootstrap data table.
*/ */
function CreateDataTable(placeholder) { function CreateDataTable(placeholder, timeunits) {
$("#"+placeholder).append('<br /><table id="tableBandwidth" class="table table-striped container-fluid"><thead><tr><th>date</th><th>rx</th><th>tx</th></tr></thead><tbody></tbody></table>'); $("#"+placeholder).append('<table id="tableBandwidth'+timeunits+'" class="table table-striped container-fluid"><thead><tr><th>date</th><th>rx</th><th>tx</th></tr></thead><tbody></tbody></table>');
} }
/** /**
@ -27,11 +27,13 @@
* construct the proper barchart. * construct the proper barchart.
*/ */
function ShowBandwidthChartHandler(e) { function ShowBandwidthChartHandler(e) {
// Remove all charts // Remove all morrisjs charts
$("#divBandwidthdaily").empty(); $("#divChartBandwidthdaily").empty();
$("#divBandwidthweekly").empty(); $("#divChartBandwidthmonthly").empty();
$("#divBandwidthmonthly").empty(); // Remove all datatables
// Construct ajax uri for getting proper data. $("#divTableBandwidthdaily").empty();
$("#divTableBandwidthmonthly").empty();
// Construct ajax uri for getting the proper data.
var timeunit = $("ul#tabbarBandwidth li.active a").attr("href").substr(1); var timeunit = $("ul#tabbarBandwidth li.active a").attr("href").substr(1);
var uri = 'ajax/bandwidth/get_bandwidth.php?'; var uri = 'ajax/bandwidth/get_bandwidth.php?';
uri += 'inet='; uri += 'inet=';
@ -41,9 +43,9 @@
var datasizeunits = 'mb'; var datasizeunits = 'mb';
uri += '&dsu='+encodeURIComponent(datasizeunits); uri += '&dsu='+encodeURIComponent(datasizeunits);
// Init. chart // Init. chart
var barchart = CreateBarChart('divBandwidth'+timeunit, datasizeunits); var barchart = CreateBarChart('divChartBandwidth'+timeunit, datasizeunits);
// Init. datatable // Init. datatable html
var datatable = CreateDataTable('divBandwidth'+timeunit); var datatable = CreateDataTable('divTableBandwidth'+timeunit, timeunit);
// Get data for chart // Get data for chart
$.ajax({ $.ajax({
url: uri, url: uri,
@ -54,10 +56,11 @@
}).done(function(jsondata) { }).done(function(jsondata) {
$("#divLoaderBandwidth"+timeunit).addClass("hidden"); $("#divLoaderBandwidth"+timeunit).addClass("hidden");
barchart.setData(jsondata); barchart.setData(jsondata);
$('#tableBandwidth').DataTable({ $('#tableBandwidth'+timeunit).DataTable({
"searching": false, searching: false,
paging: false,
data: jsondata, data: jsondata,
"columns": [ columns: [
{ "data": "date" }, { "data": "date" },
{ "data": "rx", "title": "received "+datasizeunits }, { "data": "rx", "title": "received "+datasizeunits },
{ "data": "tx", "title": "send "+datasizeunits }] { "data": "tx", "title": "send "+datasizeunits }]
@ -71,10 +74,12 @@
}); });
} }
$('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler); $( document ).ready(function() {
$('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler); $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler);
$('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler); $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler);
$('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler); $('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler);
ShowBandwidthChartHandler(); $('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler);
ShowBandwidthChartHandler();
});
})(jQuery); })(jQuery);