frodovdr/raspap-webgui
1
0
Fork 0
mirror of https://github.com/billz/raspap-webgui.git synced 2025-03-01 10:31:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into Branch_D9ping

Browse Source
This commit is contained in:
D9ping
2018-09-25 21:33:50 +02:00
parent b292ee218c 3b52d0f211
commit b9a1692d61
9 changed files with 433 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -1,5 +1,6 @@
![](http://i.imgur.com/xeKD93p.png)
# `$ raspap-webgui` [![Release 1.3.1](https://img.shields.io/badge/Release-1.3.1-green.svg)](https://github.com/billz/raspap-webgui/releases) [![Awesome](https://awesome.re/badge.svg)](https://github.com/thibmaek/awesome-raspberry-pi)
# `$ raspap-webgui` [![Release 1.3.1](https://img.shields.io/badge/Release-1.3.1-green.svg)](https://github.com/billz/raspap-webgui/releases) [![Awesome](https://awesome.re/badge.svg)](https://github.com/thibmaek/awesome-raspberry-pi) [![Beerpay](https://img.shields.io/beerpay/hashdog/scrapfy-chrome-extension.svg)](https://beerpay.io/billz/raspap-webgui)
A simple, responsive web interface to control wifi, hostapd and related services on the Raspberry Pi.
This project was inspired by a [**blog post**](http://sirlagz.net/2013/02/06/script-web-configuration-page-for-raspberry-pi/) by SirLagz about using a web page rather than ssh to configure wifi and hostapd settings on the Raspberry Pi. I mostly just prettified the UI by wrapping it in [**SB Admin 2**](https://github.com/BlackrockDigital/startbootstrap-sb-admin-2), a Bootstrap based admin theme. Since then, the project has evolved to include greater control over many aspects of a networked RPi, better security, authentication, a Quick Installer, support for themes and more. RaspAP has been featured on sites such as [Instructables](http://www.instructables.com/id/Raspberry-Pi-As-Completely-Wireless-Router/), [Adafruit](https://blog.adafruit.com/2016/06/24/raspap-wifi-configuration-portal-piday-raspberrypi-raspberry_pi/), [Raspberry Pi Weekly](https://www.raspberrypi.org/weekly/commander/) and [Awesome Raspberry Pi](https://project-awesome.org/thibmaek/awesome-raspberry-pi) and implemented in countless projects.
@@ -53,7 +54,7 @@ configured as an access point as follows:
## Manual installation
These steps apply to the latest release of Raspbian (currently [Stretch](https://www.raspberrypi.org/downloads/raspbian/)). Notes for previously released versions are provided, where applicable. Start off by installing git, lighttpd, php7, hostapd and dnsmasq.
```sh
$ sudo apt-get install git lighttpd php7.0-cgi hostapd dnsmasq
$ sudo apt-get install git lighttpd php7.0-cgi hostapd dnsmasq vnstat
```
**Note:** for Raspbian Jessie and Wheezy, replace `php7.0-cgi` with `php5-cgi`. After that, enable PHP for lighttpd and restart it for the settings to take effect.
```sh

85
ajax/bandwidth/get_bandwidth.php Normal file
View File

@@ -0,0 +1,85 @@
<?php
require_once '../../includes/config.php';
require_once RASPI_CONFIG.'/raspap.php';
session_start();
header('X-Frame-Options: DENY');
header("Content-Security-Policy: default-src 'none'; connect-src 'self'");
require_once '../../includes/authenticate.php';
$interface = filter_input(INPUT_GET, 'inet', FILTER_SANITIZE_SPECIAL_CHARS);
if (empty($interface)) {
// Use first interface if inet parameter not provided.
exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
if (count($interfacesWlo) > 0) {
$interface = $interfacesWlo[0];
} else {
exit('No network interfaces found.');
}
}
define('IFNAMSIZ', 16);
if (strlen($interface) > IFNAMSIZ) {
exit('Interface name too long.');
} elseif(!preg_match('/^[a-zA-Z0-9]+$/', $interface)) {
exit('Invalid interface name.');
}
exec(sprintf('vnstat -i %s --json ', escapeshellarg($interface)), $jsonstdoutvnstat,
$exitcodedaily);
if ($exitcodedaily !== 0) {
exit('vnstat error');
}
$jsonobj = json_decode($jsonstdoutvnstat[0], true);
$timeunits = filter_input(INPUT_GET, 'tu');
if ($timeunits === 'm') {
// months
$jsonData = $jsonobj['interfaces'][0]['traffic']['months'];
} else {
// default: days
$jsonData = $jsonobj['interfaces'][0]['traffic']['days'];
}
$datasizeunits = filter_input(INPUT_GET, 'dsu');
header('X-Content-Type-Options: nosniff');
header('Content-Type: application/json');
echo '[ ';
$firstelm = true;
for ($i = count($jsonData) - 1; $i >= 0; --$i) {
if ($timeunits === 'm') {
$dt = DateTime::createFromFormat('Y n', $jsonData[$i]['date']['year'].' '.
$jsonData[$i]['date']['month']);
} else {
$dt = DateTime::createFromFormat('Y n j', $jsonData[$i]['date']['year'].' '.
$jsonData[$i]['date']['month'].' '.
$jsonData[$i]['date']['day']);
}
if ($firstelm) {
$firstelm = false;
} else {
echo ',';
}
if ($datasizeunits == 'mb') {
$datasend = round($jsonData[$i]['tx'] / 1024, 0);
$datareceived = round($jsonData[$i]['rx'] / 1024, 0);
} else {
$datasend = $jsonData[$i]['rx'];
$datareceived = $jsonData[$i]['rx'];
}
if ($timeunits === 'm') {
echo '{ "date": "' , $dt->format('Y-m') , '", "rx": "' , $datareceived ,
'", "tx": "' , $datasend , '" }';
} else {
echo '{ "date": "' , $dt->format('Y-m-d') , '", "rx": "' , $datareceived ,
'", "tx": "' , $datasend , '" }';
}
}
echo ' ]';

237
dist/css/terminal.css vendored
View File

@@ -1,216 +1,216 @@
html * {
font-family: Courier New, Andale Mono, monospace;
font-size: 10pt;
color: #33ff00;
font-family: Courier New, Andale Mono, monospace;
font-size: 10pt;
color: #33ff00;
}
#page-wrapper {
padding: 0 20px;
border-left: 1px solid #33ff00;
padding: 0 20px;
border-left: 1px solid #33ff00;
}
.nav>li>a {
font-size: 10pt;
font-size: 10pt;
}
.nav>li>a:focus, .nav>li>a:hover {
background-color: #000;
background-color: #000;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #33ff00;
cursor: default;
background-color: #000;
border: 1px solid #33ff00;
border-bottom-color: #33ff00;
color: #33ff00;
cursor: default;
background-color: #000;
border: 1px solid #33ff00;
border-bottom-color: #33ff00;
}
.nav-tabs>li>a,.nav-tabs>li>a:hover {
border: 1px solid #33ff00;
border: 1px solid #33ff00;
}
.nav-tabs {
border-bottom: 1px solid #33ff00;
border-bottom: 1px solid #33ff00;
}
.navbar-default {
border-color: #33ff00;
border-color: #33ff00;
}
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
color: #33ff00;
color: #33ff00;
}
.navbar-default .navbar-toggle {
border-color: #33ff00;
border-color: #33ff00;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #33ff00;
background-color: #33ff00;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: #000;
background-color: #000;
}
.logo {
visibility: collapse;
width: 0px;
visibility: collapse;
width: 0px;
}
a:focus, a:hover {
color: #33ff00;
color: #33ff00;
}
.panel-primary {
border-color: #33ff00;
border-color: #33ff00;
}
.panel-primary>.panel-heading, .panel-default>.panel-heading {
border-color: #33ff00;
background-color: #33ff00;
color: #000;
font-size: 12pt;
border-color: #33ff00;
background-color: #33ff00;
color: #000;
font-size: 12pt;
}
.panel-primary>.panel-heading .fa {
color: #000;
color: #000;
}
.panel {
margin-bottom: 20px;
border: 1px solid #33ff00;
border-radius: 0px;
background-color: #000;
margin-bottom: 20px;
border: 1px solid #33ff00;
border-radius: 0px;
background-color: #000;
}
hr {
border-top: 1px solid #33ff00;
border-top: 1px solid #33ff00;
}
.page-header {
font-size: 24pt;
margin: 10px 0 20px;
border-bottom: 1px solid #33ff00;
font-size: 24pt;
margin: 10px 0 20px;
border-bottom: 1px solid #33ff00;
}
#wrapper,#page-wrapper,.panel-body,.nav>li>a,.navbar-default {
background-color: #000;
background-color: #000;
}
.panel-footer {
background-color: #000;
border-top: 1px solid #33ff00;
background-color: #000;
border-top: 1px solid #33ff00;
}
.panel-primary>.panel-heading::before, .navbar-default::before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
.sidebar ul li a.active,.sidebar ul li a.hover {
background-color: #000;
background-color: #000;
}
.sidebar ul li {
border-bottom: 1px solid #33ff00;
border-bottom: 1px solid #33ff00;
}
.btn-primary.btn-outline,.btn-warning {
color: #33ff00;
border-color: #33ff00;
color: #33ff00;
border-color: #33ff00;
}
.btn-primary:hover,.btn-primary:focus,.btn-warning:hover,.btn-warning:focus,.btn-primary:active {
color: #33ff00;
background-color: #000;
border-color: #33ff00;
color: #33ff00;
background-color: #000;
border-color: #33ff00;
}
.btn-primary.btn-outline:hover,.btn-success, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover {
color: #33ff00;
color: #33ff00;
}
label.btn.btn-primary {
color: #33ff00;
color: #33ff00;
}
label.btn.btn-primary.active, label.btn.btn-warning.active {
background-color: #33ff00;
border-color: #33ff00;
color: #000;
background-color: #33ff00;
border-color: #33ff00;
color: #000;
}
.label-warning {
background-color: #33ff00;
background-color: #33ff00;
}
span.label.label-warning {
color: #000;
color: #000;
}
.btn.btn-primary {
border-color: #33ff00;
border-color: #33ff00;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
background-color: #000;
border-top: 1px solid #000;
background-color: #000;
border-top: 1px solid #000;
}
.table>thead>tr>th {
vertical-align: bottom;
border-bottom: 1px solid #33ff00;
vertical-align: bottom;
border-bottom: 1px solid #33ff00;
}
.btn-info, .btn-info:hover, .btn-info[disabled], .btn-danger.disabled, .btn-danger.disabled.active, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled], .btn-danger[disabled].active, .btn-danger[disabled].focus, .btn-danger[disabled]:active, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger.active, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover, .btn-info:hover {
background-color: #000;
border-color: #33ff00;
color: #33ff00;
background-color: #000;
border-color: #33ff00;
color: #33ff00;
}
.btn {
background-color: #000;
border-radius: 0px;
background-color: #000;
border-radius: 0px;
}
.alert {
border-radius: 0px;
border-radius: 0px;
}
.alert-success,.alert-warning,.alert-ifo,.alert-dismissable,.alert-danger {
color: #33ff00;
background-color: #000;
border-color: #33ff00;
border: 1px dashed;
.alert-success,.alert-warning,.alert-info,.alert-dismissable,.alert-danger {
color: #33ff00;
background-color: #000;
border-color: #33ff00;
border: 1px dashed;
}
.close {
font-size: 18px;
font-weight: normal;
text-shadow: 0 0px 0 #000;
opacity: 1;
font-size: 18px;
font-weight: normal;
text-shadow: 0 0px 0 #000;
opacity: 1;
}
.form-control, .form-control:focus {
color: #33ff00;
background-color: #000;
border: 1px solid #33ff00;
border-radius: 0px;
transition: unset;
color: #33ff00;
background-color: #000;
border: 1px solid #33ff00;
border-radius: 0px;
transition: unset;
}
input[type="text"]{
color: #33ff00 !important
color: #33ff00 !important
}
.form-control::-webkit-input-placeholder { color: #33ff00; }
@@ -220,41 +220,60 @@ input[type="text"]{
.form-control::-ms-input-placeholder { color: #33ff00; }
.progress {
background-color: #000;
border-radius: 0px;
background-color: #000;
border-radius: 0px;
}
.progress-bar {
color: #000;
color: #000;
}
.info-item {
width: 140px;
float: left;
width: 140px;
float: left;
}
.logoutput {
width: 100%;
height: 300px;
background-color: #000;
border-color: #33ff00;
width: 100%;
height: 300px;
background-color: #000;
border-color: #33ff00;
}
.webconsole {
width: 100%;
height: 100%;
border-color: #33ff00;
border-bottom: 1px solid;
border-left: 1px solid;
border-top: 0px;
border-right: 1px solid;
width: 100%;
height: 100%;
border-color: #33ff00;
border-bottom: 1px solid;
border-left: 1px solid;
border-top: 0px;
border-right: 1px solid;
}
#console {
height: 500px;
height: 500px;
}
.systemtabcontent {
height: 100%;
min-height: 500px;
height: 100%;
min-height: 500px;
}
tspan, rect {
fill: #33ff00;
}
.morris-hover.morris-default-style {
background: none;
border-radius: 0px;
border-color: #33ff00;
border: dashed 1px #33ff00;
}
.morris-hover-point {
color: #33ff00 !important;
}
path {
stroke: #33ff00;
}

10
includes/authenticate.php
View File

@@ -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);
}

1
includes/config.php
View File

@@ -26,6 +26,7 @@ define('RASPI_OPENVPN_ENABLED', false );
define('RASPI_TORPROXY_ENABLED', false );
define('RASPI_CONFAUTH_ENABLED', true );
define('RASPI_CHANGETHEME_ENABLED', true );
define('RASPI_VNSTAT_ENABLED', true );
// Locale settings
define('LOCALE_ROOT', 'locale');

91
includes/data_usage.php Normal file
View File

@@ -0,0 +1,91 @@
<?php
/**
* Generate html for displaying data usage.
*/
function DisplayDataUsage(&$extraFooterScripts)
{
?>
<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 _("Data usage 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>
<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 fade in" id="daily">
<div class="row">
<div class="col-lg-12">
<h4><?php echo _('Daily traffic amount'); ?></h4>
<label for="cbxInterfacedaily"><?php echo _('interface'); ?></label>
<select id="cbxInterfacedaily" class="form-control" name="interfacedaily">
<?php
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;
}
?>
</select>
<div class="hidden alert alert-info" id="divLoaderBandwidthdaily"><?php
echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?></div>
<div id="divChartBandwidthdaily"></div>
<div id="divTableBandwidthdaily"></div>
</div>
</div>
</div><!-- /.tab-pane -->
<div role="tabpanel" class="tab-pane fade" id="monthly">
<div class="row">
<div class="col-lg-12">
<h4><?php echo _("Monthly traffic amount"); ?></h4>
<label for="cbxInterfacemonthly"><?php echo _('interface'); ?></label>
<select id="cbxInterfacemonthly" class="form-control" name="interfacemonthly">
<?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="divLoaderBandwidthmonthly">
<?php echo sprintf(_("Loading %s bandwidth chart"), _('monthly')); ?>
</div>
<div id="divChartBandwidthmonthly"></div>
<div id="divTableBandwidthmonthly"></div>
</div>
</div>
</div><!-- /.tab-pane -->
</div><!-- /.tabsBandwidth -->
</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 -->
<script type="text/javascript"<?php //echo ' nonce="'.$csp_page_nonce.'"'; ?>>
// js translations:
var t = new Array();
t['send'] = '<?php echo addslashes(_('Send')); ?>';
t['receive'] = '<?php echo addslashes(_('Receive')); ?>';
</script>
<?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);
}

32
index.php
View File

@@ -33,6 +33,7 @@ include_once( 'includes/system.php' );
include_once( 'includes/configure_client.php' );
include_once( 'includes/networking.php' );
include_once( 'includes/themes.php' );
include_once( 'includes/data_usage.php' );
$output = $return = 0;
$page = $_GET['page'];
@@ -155,6 +156,11 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
<a href="index.php?page=theme_conf"><i class="fa fa-wrench fa-fw"></i> <?php echo _("Change Theme"); ?></a>
</li>
<?php endif; ?>
<?php if ( RASPI_VNSTAT_ENABLED ) : ?>
<li>
<a href="index.php?page=data_use"><i class="fa fa-bar-chart fa-fw"></i> <?php echo _("Data usage"); ?></a>
</li>
<?php endif; ?>
<li>
<a href="index.php?page=system_info"><i class="fa fa-cube fa-fw"></i> <?php echo _("System"); ?></a>
</li>
@@ -175,6 +181,7 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
</div><!-- /.row -->
<?php
$extraFooterScripts = array();
// handle page actions
switch( $page ) {
case "wlan0_info":
@@ -207,13 +214,17 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
case "theme_conf":
DisplayThemeConfig();
break;
case "data_use":
DisplayDataUsage($extraFooterScripts);
break;
case "system_info":
DisplaySystem();
break;
default:
DisplayDashboard();
}
?>
?>
</div><!-- /#page-wrapper -->
</div><!-- /#wrapper -->
@@ -229,15 +240,24 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
<!-- Metis Menu Plugin JavaScript -->
<script src="vendor/metisMenu/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<!--script src="vendor/raphael/raphael-min.js"></script-->
<!--script src="vendor/morrisjs/morris.min.js"></script-->
<!--script src="js/morris-data.js"></script-->
<!-- Custom Theme JavaScript -->
<script src="dist/js/sb-admin-2.js"></script>
<!-- Custom RaspAP JS -->
<script src="js/custom.js"></script>
<?php
// Load non default JS/ECMAScript in footer.
foreach ($extraFooterScripts as $script) {
echo ' <script type="text/javascript" src="' , $script['src'] , '"';
if ($script['defer']) {
echo ' defer="defer"';
}
// if ($script['async']) { echo ( echo ' defer="async"'; ), intrigity=, nonce= etc. etc.
echo '></script>' , PHP_EOL;
}
?>
</body>
</html>

2
installers/raspbian.sh
View File

@@ -9,7 +9,7 @@ function update_system_packages() {
function install_dependencies() {
install_log "Installing required packages"
sudo apt-get install lighttpd $php_package git hostapd dnsmasq || install_error "Unable to install dependencies"
sudo apt-get install lighttpd $php_package git hostapd dnsmasq vnstat || install_error "Unable to install dependencies"
}
install_raspap

90
js/bandwidthcharts.js Normal file
View File

@@ -0,0 +1,90 @@
(function($, _t) {
"use strict";
/**
* Create a Morris.js barchart.
*/
function CreateBarChart(placeholder, datasizeunits) {
var barchart = new Morris.Bar({
element: placeholder,
xkey: 'date',
ykeys: ['rx', 'tx'],
labels: [_t['send']+' '+datasizeunits.toUpperCase(),
_t['receive']+' '+datasizeunits.toUpperCase()]
});
return barchart;
}
/**
* Create a jquery bootstrap datatable.
*/
function CreateDataTable(placeholder, timeunits) {
$("#"+placeholder).append('<table id="tableBandwidth'+timeunits+
'" class="table table-responsive table-striped container-fluid"><thead>'+
'<tr><th>date</th><th>rx</th><th>tx</th></tr></thead><tbody></tbody></table>');
}
/**
* Figure out which tab is selected and remove all existing charts and then
* construct the proper barchart.
*/
function ShowBandwidthChartHandler(e) {
// Remove all morrisjs charts
$('#divChartBandwidthdaily').empty();
$('#divChartBandwidthmonthly').empty();
// Remove all datatables
$('#divTableBandwidthdaily').empty();
$('#divTableBandwidthmonthly').empty();
// Construct ajax uri for getting the proper data.
var timeunit = $('ul#tabbarBandwidth li.active a').attr('href').substr(1);
var uri = 'ajax/bandwidth/get_bandwidth.php?';
uri += 'inet=';
uri += encodeURIComponent($('#cbxInterface'+timeunit+' option:selected').text());
uri += '&tu=';
uri += encodeURIComponent(timeunit.substr(0, 1));
var datasizeunits = 'mb';
uri += '&dsu='+encodeURIComponent(datasizeunits);
// Init. chart
var barchart = CreateBarChart('divChartBandwidth'+timeunit, datasizeunits);
// Init. datatable html
var datatable = CreateDataTable('divTableBandwidth'+timeunit, timeunit);
// Get data for chart
$.ajax({
url: uri,
dataType: 'json',
beforeSend: function() {
$('#divLoaderBandwidth'+timeunit).removeClass('hidden');
}
}).done(function(jsondata) {
$('#divLoaderBandwidth'+timeunit).addClass('hidden');
barchart.setData(jsondata);
$('#tableBandwidth'+timeunit).DataTable({
'searching': false,
'paging': false,
'data': jsondata,
'order': [[ 0, 'ASC' ]],
'columns': [
{ 'data': 'date' },
{ 'data': 'rx', "title": _t['send']+' '+datasizeunits.toUpperCase() },
{ 'data': 'tx', "title": _t['receive']+' '+datasizeunits.toUpperCase() }]
});
}).fail(function(xhr, textStatus) {
if (window.console) {
console.error('server error');
} else {
alert("server error");
}
});
}
$(document).ready(function() {
$('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler);
$('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler);
$('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler);
$('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler);
ShowBandwidthChartHandler();
});
})(jQuery, t);