mirror of
https://github.com/billz/raspap-webgui.git
synced 2023-10-10 13:37:24 +02:00
Merge branch 'master' into Branch_D9ping
This commit is contained in:
commit
b9a1692d61
@ -1,5 +1,6 @@
|
|||||||
![](http://i.imgur.com/xeKD93p.png)
|
![](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.
|
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.
|
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
|
## 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.
|
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
|
```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.
|
**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
|
```sh
|
||||||
|
85
ajax/bandwidth/get_bandwidth.php
Normal file
85
ajax/bandwidth/get_bandwidth.php
Normal 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 ' ]';
|
||||||
|
|
||||||
|
|
21
dist/css/terminal.css
vendored
21
dist/css/terminal.css
vendored
@ -187,7 +187,7 @@ span.label.label-warning {
|
|||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-success,.alert-warning,.alert-ifo,.alert-dismissable,.alert-danger {
|
.alert-success,.alert-warning,.alert-info,.alert-dismissable,.alert-danger {
|
||||||
color: #33ff00;
|
color: #33ff00;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
border-color: #33ff00;
|
border-color: #33ff00;
|
||||||
@ -258,3 +258,22 @@ input[type="text"]{
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 500px;
|
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;
|
||||||
|
}
|
||||||
|
@ -6,7 +6,13 @@ $validated = ($user == $config['admin_user']) && password_verify($pass, $config[
|
|||||||
|
|
||||||
if (!$validated) {
|
if (!$validated) {
|
||||||
header('WWW-Authenticate: Basic realm="RaspAP"');
|
header('WWW-Authenticate: Basic realm="RaspAP"');
|
||||||
|
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');
|
header('HTTP/1.0 401 Unauthorized');
|
||||||
die ("Not authorized");
|
}
|
||||||
|
|
||||||
|
exit('Not authorized'.PHP_EOL);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -26,6 +26,7 @@ define('RASPI_OPENVPN_ENABLED', false );
|
|||||||
define('RASPI_TORPROXY_ENABLED', false );
|
define('RASPI_TORPROXY_ENABLED', false );
|
||||||
define('RASPI_CONFAUTH_ENABLED', true );
|
define('RASPI_CONFAUTH_ENABLED', true );
|
||||||
define('RASPI_CHANGETHEME_ENABLED', true );
|
define('RASPI_CHANGETHEME_ENABLED', true );
|
||||||
|
define('RASPI_VNSTAT_ENABLED', true );
|
||||||
|
|
||||||
// Locale settings
|
// Locale settings
|
||||||
define('LOCALE_ROOT', 'locale');
|
define('LOCALE_ROOT', 'locale');
|
||||||
|
91
includes/data_usage.php
Normal file
91
includes/data_usage.php
Normal 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);
|
||||||
|
}
|
||||||
|
|
30
index.php
30
index.php
@ -33,6 +33,7 @@ include_once( 'includes/system.php' );
|
|||||||
include_once( 'includes/configure_client.php' );
|
include_once( 'includes/configure_client.php' );
|
||||||
include_once( 'includes/networking.php' );
|
include_once( 'includes/networking.php' );
|
||||||
include_once( 'includes/themes.php' );
|
include_once( 'includes/themes.php' );
|
||||||
|
include_once( 'includes/data_usage.php' );
|
||||||
|
|
||||||
$output = $return = 0;
|
$output = $return = 0;
|
||||||
$page = $_GET['page'];
|
$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>
|
<a href="index.php?page=theme_conf"><i class="fa fa-wrench fa-fw"></i> <?php echo _("Change Theme"); ?></a>
|
||||||
</li>
|
</li>
|
||||||
<?php endif; ?>
|
<?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>
|
<li>
|
||||||
<a href="index.php?page=system_info"><i class="fa fa-cube fa-fw"></i> <?php echo _("System"); ?></a>
|
<a href="index.php?page=system_info"><i class="fa fa-cube fa-fw"></i> <?php echo _("System"); ?></a>
|
||||||
</li>
|
</li>
|
||||||
@ -175,6 +181,7 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
|
|||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
|
$extraFooterScripts = array();
|
||||||
// handle page actions
|
// handle page actions
|
||||||
switch( $page ) {
|
switch( $page ) {
|
||||||
case "wlan0_info":
|
case "wlan0_info":
|
||||||
@ -207,12 +214,16 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
|
|||||||
case "theme_conf":
|
case "theme_conf":
|
||||||
DisplayThemeConfig();
|
DisplayThemeConfig();
|
||||||
break;
|
break;
|
||||||
|
case "data_use":
|
||||||
|
DisplayDataUsage($extraFooterScripts);
|
||||||
|
break;
|
||||||
case "system_info":
|
case "system_info":
|
||||||
DisplaySystem();
|
DisplaySystem();
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
DisplayDashboard();
|
DisplayDashboard();
|
||||||
}
|
}
|
||||||
|
|
||||||
?>
|
?>
|
||||||
</div><!-- /#page-wrapper -->
|
</div><!-- /#page-wrapper -->
|
||||||
</div><!-- /#wrapper -->
|
</div><!-- /#wrapper -->
|
||||||
@ -229,15 +240,24 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
|
|||||||
<!-- Metis Menu Plugin JavaScript -->
|
<!-- Metis Menu Plugin JavaScript -->
|
||||||
<script src="vendor/metisMenu/metisMenu.min.js"></script>
|
<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 -->
|
<!-- Custom Theme JavaScript -->
|
||||||
<script src="dist/js/sb-admin-2.js"></script>
|
<script src="dist/js/sb-admin-2.js"></script>
|
||||||
|
|
||||||
<!-- Custom RaspAP JS -->
|
<!-- Custom RaspAP JS -->
|
||||||
<script src="js/custom.js"></script>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -9,7 +9,7 @@ function update_system_packages() {
|
|||||||
|
|
||||||
function install_dependencies() {
|
function install_dependencies() {
|
||||||
install_log "Installing required packages"
|
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
|
install_raspap
|
||||||
|
90
js/bandwidthcharts.js
Normal file
90
js/bandwidthcharts.js
Normal 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);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user