Merge branch 'master' into Branch_D9ping

README.md

@@ -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

ajax/bandwidth/get_bandwidth.php

@@ -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 ' ]';
+
+

dist/css/terminal.css

@@ -1,216 +1,216 @@
 html * {
-    font-family: Courier New, Andale Mono, monospace;
+  font-family: Courier New, Andale Mono, monospace;
-    font-size: 10pt;
+  font-size: 10pt;
-    color: #33ff00;
+  color: #33ff00;
 }
 
 #page-wrapper {
-    padding: 0 20px;
+  padding: 0 20px;
-    border-left: 1px solid #33ff00;
+  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;
+  color: #33ff00;
-    cursor: default;
+  cursor: default;
-    background-color: #000;
+  background-color: #000;
-    border: 1px solid #33ff00;
+  border: 1px solid #33ff00;
-    border-bottom-color: #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;
+  visibility: collapse;
-    width: 0px;
+  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;
+  border-color: #33ff00;
-    background-color: #33ff00;
+  background-color: #33ff00;
-    color: #000;
+  color: #000;
-    font-size: 12pt;
+  font-size: 12pt;
 }
 
 .panel-primary>.panel-heading .fa {
-    color: #000;
+  color: #000;
 }
 
 .panel {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
-    border: 1px solid #33ff00;
+  border: 1px solid #33ff00;
-    border-radius: 0px;
+  border-radius: 0px;
-    background-color: #000;
+  background-color: #000;
 }
 
 hr { 
-    border-top: 1px solid #33ff00;
+  border-top: 1px solid #33ff00;
 }
 
 .page-header {
-    font-size: 24pt;
+  font-size: 24pt;
-    margin: 10px 0 20px;
+  margin: 10px 0 20px;
-    border-bottom: 1px solid #33ff00;
+  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;
+  background-color: #000;
-    border-top: 1px solid #33ff00;
+  border-top: 1px solid #33ff00;
 }
 
 .panel-primary>.panel-heading::before, .navbar-default::before {
-    content: " ";
+  content: " ";
-    display: block;
+  display: block;
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    bottom: 0;
+  bottom: 0;
-    right: 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));
+  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;
+  z-index: 2;
-    background-size: 100% 2px, 3px 100%;
+  background-size: 100% 2px, 3px 100%;
-    pointer-events: none;
+  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;
+  color: #33ff00;
-    border-color: #33ff00;
+  border-color: #33ff00;
 }
 
 .btn-primary:hover,.btn-primary:focus,.btn-warning:hover,.btn-warning:focus,.btn-primary:active {
-    color: #33ff00;
+  color: #33ff00;
-    background-color: #000;
+  background-color: #000;
-    border-color: #33ff00;
+  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;
+  background-color: #33ff00;
-    border-color: #33ff00;
+  border-color: #33ff00;
-    color: #000;
+  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;
+  background-color: #000;
-    border-top: 1px solid #000;
+  border-top: 1px solid #000;
 }
 
 .table>thead>tr>th {
-    vertical-align: bottom;
+  vertical-align: bottom;
-    border-bottom: 1px solid #33ff00;
+  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;
+  background-color: #000;
-    border-color: #33ff00;
+  border-color: #33ff00;
-    color: #33ff00;
+  color: #33ff00;
 }
 
 .btn {
-    background-color: #000;
+  background-color: #000;
-    border-radius: 0px;
+  border-radius: 0px;
 }
 
 .alert {
-    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;
-    border: 1px dashed;
+  border: 1px dashed;
 }
 
 .close {
-    font-size: 18px;
+  font-size: 18px;
-    font-weight: normal;
+  font-weight: normal;
-    text-shadow: 0 0px 0 #000;
+  text-shadow: 0 0px 0 #000;
-    opacity: 1;
+  opacity: 1;
 }
 
 .form-control, .form-control:focus {
-    color: #33ff00;
+  color: #33ff00;
-    background-color: #000;
+  background-color: #000;
-    border: 1px solid #33ff00;
+  border: 1px solid #33ff00;
-    border-radius: 0px;
+  border-radius: 0px;
-    transition: unset;
+  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;
+  background-color: #000;
-    border-radius: 0px;
+  border-radius: 0px;
 }
 
 .progress-bar {
-    color: #000;
+  color: #000;
 }
 
 .info-item {
-    width: 140px;
+  width: 140px;
-    float: left;
+  float: left;
 }
 
 .logoutput {
-    width: 100%;
+  width: 100%;
-    height: 300px;
+  height: 300px;
-    background-color: #000;
+  background-color: #000;
-    border-color: #33ff00;
+  border-color: #33ff00;
 }
 
 .webconsole {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    border-color: #33ff00;
+  border-color: #33ff00;
-    border-bottom: 1px solid;
+  border-bottom: 1px solid;
-    border-left: 1px solid;
+  border-left: 1px solid;
-    border-top: 0px;
+  border-top: 0px;
-    border-right: 1px solid;
+  border-right: 1px solid;
 }
 
 #console {
-    height: 500px;
+  height: 500px;
 }
 
 .systemtabcontent {
-    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;
 }

includes/authenticate.php

@@ -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');
+  if (function_exists('http_response_code')) {
-  die ("Not authorized");
+    // 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);
 }
 

includes/config.php

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

includes/data_usage.php

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

index.php

@@ -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>

installers/raspbian.sh

@@ -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

js/bandwidthcharts.js

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