mirror of
https://github.com/billz/raspap-webgui.git
synced 2025-03-01 10:31:47 +00:00
Added Morris.Js chart and jquery.datatable to bandwidth page.
Use ajax for getting bandwidth data. Added support for adding extra scripts in footer if needed. Signed-off-by: D9ping <D9ping@users.noreply.github.com>
This commit is contained in:
D9ping
@@ -6,7 +6,13 @@ $validated = ($user == $config['admin_user']) && password_verify($pass, $config[
|
||||
|
||||
if (!$validated) {
|
||||
header('WWW-Authenticate: Basic realm="RaspAP"');
|
||||
header('HTTP/1.0 401 Unauthorized');
|
||||
die ("Not authorized");
|
||||
if (function_exists('http_response_code')) {
|
||||
// http_response_code will respond with proper HTTP version back.
|
||||
http_response_code(401);
|
||||
} else {
|
||||
header('HTTP/1.0 401 Unauthorized');
|
||||
}
|
||||
|
||||
exit('Not authorized'.PHP_EOL);
|
||||
}
|
||||
|
||||
|
||||
@@ -5,116 +5,106 @@ include_once( 'includes/status_messages.php' );
|
||||
/**
|
||||
* Generate html output for tab with vnstat traffic amount information.
|
||||
*/
|
||||
function DisplayVnstat()
|
||||
function DisplayVnstat(&$extraFooterScripts)
|
||||
{
|
||||
$status = new StatusMessages();
|
||||
exec('vnstat -m ', $stdoutvnstatmonthly, $exitcodemonthly);
|
||||
if ($exitcodemonthly !== 0) {
|
||||
$status->addMessage(sprinf(_('Getting vnstat %s information failed.'), _('daily')), 'error');
|
||||
}
|
||||
|
||||
exec('vnstat -w ', $stdoutvnstatweekly, $exitcodeweekly);
|
||||
if ($exitcodeweekly !== 0) {
|
||||
$status->addMessage(sprinf(_('Getting vnstat %s information failed.'), _('weekly')), 'error');
|
||||
}
|
||||
|
||||
exec('vnstat -d ', $stdoutvnstatdaily, $exitcodedaily);
|
||||
if ($exitcodedaily !== 0) {
|
||||
$status->addMessage(sprinf(_('Getting vnstat %s information failed.'), _('monthly')),
|
||||
'error');
|
||||
}
|
||||
?>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading"><i class="fa fa-bar-chart fa-fw"></i> <?php echo _("Bandwidth monitoring"); ?></div>
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<p><?php $status->showMessages(); ?></p>
|
||||
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" class="active tabtrafficdaily"><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li>
|
||||
<li role="presentation" class="tabtrafficweekly"><a href="#weekly" aria-controls="weekly" role="tab" data-toggle="tab"><?php echo _("Weekly"); ?></a></li>
|
||||
<li role="presentation" class="tabtrafficmonthly"><a href="#monthly" aria-controls="monthly" role="tab" data-toggle="tab"><?php echo _("Monthly"); ?></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tabcontenttraffic tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="daily">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4>Daily traffic amount</h4>
|
||||
<div class="col-lg-12">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading"><i class="fa fa-bar-chart fa-fw"></i> <?php echo _("Bandwidth monitoring"); ?></div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<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>
|
||||
<?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>
|
||||
</ul>
|
||||
<div id="tabsBandwidth" class="tabcontenttraffic tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="daily">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4><?php echo _('Daily traffic amount'); ?></h4>
|
||||
<label for="cbxInterfacedaily"><?php echo _('interface'); ?></label> <select id="cbxInterfacedaily" class="form-control" name="interface">
|
||||
<?php
|
||||
foreach ($stdoutvnstatdaily as &$linedaily) {
|
||||
if (empty($linedaily)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
echo ' <code>' , str_replace(' ', ' ', htmlentities($linedaily, ENT_QUOTES)) ,
|
||||
'</code><br />';
|
||||
exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
|
||||
foreach ($interfacesWlo as $interface) {
|
||||
echo ' <option value="' , htmlentities($interface. ENT_QUOTES) , '">' ,
|
||||
htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
|
||||
}
|
||||
|
||||
?>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div role="tabpanel" class="tab-pane" id="weekly">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4><?php echo _("Weekly traffic amount"); ?></h4>
|
||||
</select>
|
||||
<div class="hidden alert alert-info" id="divLoaderBandwidthdaily">
|
||||
<?php echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?>
|
||||
</div>
|
||||
<div id="divBandwidthdaily"></div><br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
foreach ($stdoutvnstatweekly as &$lineweekly) {
|
||||
if (empty($lineweekly)) {
|
||||
continue;
|
||||
}
|
||||
/*
|
||||
<div role="tabpanel" class="tab-pane" id="hourly">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4>php echo _("Hourly traffic amount today"); ?</h4>
|
||||
<label for="cbxInterfacehours"><?php echo _('interface'); ?></label> <select id="cbxInterfacehours" class="form-control" name="interface">
|
||||
php
|
||||
foreach ($interfacesWlo as $interface) {
|
||||
echo ' <option value="' , htmlentities($interface. ENT_QUOTES) , '">' ,
|
||||
htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
|
||||
}
|
||||
|
||||
echo ' <code>' , str_replace(' ', ' ', htmlentities($lineweekly, ENT_QUOTES)) ,
|
||||
'</code><br />', 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
|
||||
foreach ($interfacesWlo as $interface) {
|
||||
echo ' <option value="' , htmlentities($interface. ENT_QUOTES) , '">' ,
|
||||
htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
</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>
|
||||
<?php
|
||||
foreach ($stdoutvnstatmonthly as &$linemonthly) {
|
||||
if (empty($linemonthly)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
echo ' <code>' , str_replace(' ', ' ', htmlentities($linemonthly, ENT_QUOTES)) ,
|
||||
'</code><br />' , PHP_EOL;
|
||||
}
|
||||
|
||||
?>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.tabcontenttraffic -->
|
||||
|
||||
</div><!-- /.panel-default -->
|
||||
</div><!-- /.col-md-6 -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /.panel-body -->
|
||||
|
||||
</div><!-- /.panel-primary -->
|
||||
<div class="panel-footer"><?php echo _("Information provided by vnstat"); ?></div>
|
||||
</div><!-- /.panel-primary -->
|
||||
</div><!-- /.col-lg-12 -->
|
||||
</select>
|
||||
<div class="hidden alert alert-info" id="divLoaderBandwidthmonthly">
|
||||
<?php echo sprintf(_("Loading %s bandwidth chart"), _('monthly')); ?>
|
||||
</div>
|
||||
<div id="divBandwidthmonthly"></div><br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.tabcontenttraffic -->
|
||||
</div><!-- /.panel-default -->
|
||||
</div><!-- /.col-md-6 -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /.panel-body -->
|
||||
</div><!-- /.panel-primary -->
|
||||
<div class="panel-footer"><?php echo _("Information provided by vnstat"); ?></div>
|
||||
</div><!-- /.panel-primary -->
|
||||
</div><!-- /.col-lg-12 -->
|
||||
</div><!-- /.row -->
|
||||
<?php
|
||||
$extraFooterScripts[] = array('src'=>'vendor/raphael/raphael.min.js',
|
||||
'defer'=>false);
|
||||
$extraFooterScripts[] = array('src'=>'vendor/morrisjs/morris.min.js', 'defer'=>false);
|
||||
$extraFooterScripts[] = array('src'=>'vendor/datatables/js/jquery.dataTables.min.js', 'defer'=>false);
|
||||
$extraFooterScripts[] = array('src'=>'js/bandwidthcharts.js', 'defer'=>false);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user