From d6d89df0244ec5ad785ee44e758ffc33a2d13b6e Mon Sep 17 00:00:00 2001 From: D9ping Date: Tue, 21 Aug 2018 16:34:01 +0200 Subject: [PATCH 01/11] Display bandwidth use total per day, week, month from vnstat. Signed-off-by: D9ping --- includes/vnstat.php | 120 +++++++++++++++++++++++++++++++++++++++++ index.php | 11 ++++ installers/raspbian.sh | 2 +- 3 files changed, 132 insertions(+), 1 deletion(-) create mode 100644 includes/vnstat.php diff --git a/includes/vnstat.php b/includes/vnstat.php new file mode 100644 index 00000000..d9735f25 --- /dev/null +++ b/includes/vnstat.php @@ -0,0 +1,120 @@ +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'); + } +?> +
+
+
+
+
+ +
+
+
+
+

showMessages(); ?>

+ +
    + + + +
+ +
+
+
+
+

Daily traffic amount

+' , str_replace(' ', ' ', htmlentities($linedaily, ENT_QUOTES)) , + '
'; +} + +?> +
+
+
+
+ +
+
+
+

+' , str_replace(' ', ' ', htmlentities($lineweekly, ENT_QUOTES)) , + '
', PHP_EOL; +} + +?> + +
+
+
+ +
+
+
+

+' , str_replace(' ', ' ', htmlentities($linemonthly, ENT_QUOTES)) , + '
' , PHP_EOL; +} + +?> +
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+
+
+ + +
  • + +
    • +
    • @@ -207,6 +215,9 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES); case "theme_conf": DisplayThemeConfig(); break; + case "vnstat": + DisplayVnstat(); + break; case "system_info": DisplaySystem(); break; diff --git a/installers/raspbian.sh b/installers/raspbian.sh index ecf395c7..01de6c1a 100755 --- a/installers/raspbian.sh +++ b/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 From 6d37fd79fa95fcc9bf934a42ee064192d0efa47a Mon Sep 17 00:00:00 2001 From: D9ping Date: Fri, 24 Aug 2018 21:16:05 +0200 Subject: [PATCH 02/11] Added RASPI_VNSTAT_ENABLED to config.php. Signed-off-by: D9ping --- includes/config.php | 1 + index.php | 6 ++---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/includes/config.php b/includes/config.php index 46536280..70f271f8 100755 --- a/includes/config.php +++ b/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'); diff --git a/index.php b/index.php index a7f51ee5..ffd4bd53 100755 --- a/index.php +++ b/index.php @@ -156,13 +156,11 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES); - +
    • - +
    • From 7b2f42f3265d36c325999d82ce3406b0d55cd32e Mon Sep 17 00:00:00 2001 From: D9ping Date: Mon, 10 Sep 2018 16:53:05 +0200 Subject: [PATCH 03/11] 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 --- ajax/bandwidth/get_bandwidth.php | 96 ++++++++++++++++ includes/authenticate.php | 10 +- includes/vnstat.php | 184 +++++++++++++++---------------- index.php | 25 +++-- js/bandwidthcharts.js | 80 ++++++++++++++ 5 files changed, 289 insertions(+), 106 deletions(-) create mode 100644 ajax/bandwidth/get_bandwidth.php create mode 100644 js/bandwidthcharts.js diff --git a/ajax/bandwidth/get_bandwidth.php b/ajax/bandwidth/get_bandwidth.php new file mode 100644 index 00000000..48cd5156 --- /dev/null +++ b/ajax/bandwidth/get_bandwidth.php @@ -0,0 +1,96 @@ + 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']; +//} elseif ($timeunits === 'h') { +// $jsonData = $jsonobj['interfaces'][0]['traffic']['hours']; +} 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']); +// } 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 { + $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 , '" }'; +// } elseif ($timeunits === 'h') { +// echo '{ "date": "' , $dt->format('Y-m-d H:i') , '", "rx": ' , $datareceived , +// ', "tx": ' , $datasend , ' }'; + } else { + echo '{ "date": "' , $dt->format('Y-m-d') , '", "rx": "' , $datareceived , + '", "tx": "' , $datasend , '" }'; + } +} + +echo ' ]'; + + diff --git a/includes/authenticate.php b/includes/authenticate.php index 79151a24..d6cd2c6e 100755 --- a/includes/authenticate.php +++ b/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'); - 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); } diff --git a/includes/vnstat.php b/includes/vnstat.php index d9735f25..a0035b9f 100644 --- a/includes/vnstat.php +++ b/includes/vnstat.php @@ -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'); - } ?>
    -
    -
    -
    -
    - -
    -
    -
    -
    -

    showMessages(); ?>

    - -
      - - - -
    - -
    -
    -
    -
    -

    Daily traffic amount

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +

    + + +

    +
    +
    +
    +
    +
    +
    +

    php echo _("Hourly traffic amount today"); ?

    + + +
    +
    +*/ +?> +
    +
    +
    +

    + + +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    '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); } diff --git a/index.php b/index.php index ffd4bd53..420483f1 100755 --- a/index.php +++ b/index.php @@ -181,6 +181,7 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
    + +?>
    @@ -238,15 +240,24 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES); - - - - - + +' , PHP_EOL; +} + +?> diff --git a/js/bandwidthcharts.js b/js/bandwidthcharts.js new file mode 100644 index 00000000..df9178c4 --- /dev/null +++ b/js/bandwidthcharts.js @@ -0,0 +1,80 @@ +(function($) { + "use strict"; + + /** + * Create a Morris.js barchart. + */ + function CreateBarChart(placeholder, datasizeunits) { + var barchart = new Morris.Bar({ + element: placeholder, + xkey: 'date', + ykeys: ['rx', 'tx'], + labels: ['Received '+datasizeunits, 'Send '+datasizeunits] // NOI18N + }); + + return barchart; + } + + /** + * Create a bootstrap data table. + */ + function CreateDataTable(placeholder) { + $("#"+placeholder).append('
    daterxtx
    '); + } + + /** + * Figure out which tab is selected and remove all existing charts and then + * construct the proper barchart. + */ + function ShowBandwidthChartHandler(e) { + // Remove all charts + $("#divBandwidthdaily").empty(); + $("#divBandwidthweekly").empty(); + $("#divBandwidthmonthly").empty(); + // Construct ajax uri for getting 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('divBandwidth'+timeunit, datasizeunits); + // Init. datatable + var datatable = CreateDataTable('divBandwidth'+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').DataTable({ + "searching": false, + data: jsondata, + "columns": [ + { "data": "date" }, + { "data": "rx", "title": "received "+datasizeunits }, + { "data": "tx", "title": "send "+datasizeunits }] + }); + }).fail(function(xhr, textStatus) { + if (window.console) { + console.error("server error"); + } else { + alert("server error"); + } + }); + } + + $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler); + $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler); + $('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler); + $('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler); + ShowBandwidthChartHandler(); + +})(jQuery); \ No newline at end of file From 7c3820d9ab6012c7bb3e96232ca057810a4595b8 Mon Sep 17 00:00:00 2001 From: D9ping Date: Mon, 10 Sep 2018 21:41:35 +0200 Subject: [PATCH 04/11] Use seperate container for chart and datatable. Cleanup unused code comments. Signed-off-by: D9ping --- ajax/bandwidth/get_bandwidth.php | 13 +------ includes/vnstat.php | 65 ++++++++++---------------------- js/bandwidthcharts.js | 41 +++++++++++--------- 3 files changed, 44 insertions(+), 75 deletions(-) diff --git a/ajax/bandwidth/get_bandwidth.php b/ajax/bandwidth/get_bandwidth.php index 48cd5156..ea0c103e 100644 --- a/ajax/bandwidth/get_bandwidth.php +++ b/ajax/bandwidth/get_bandwidth.php @@ -2,12 +2,12 @@ require_once '../../includes/config.php'; require_once RASPI_CONFIG.'/raspap.php'; -// For privacy require authentication. 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. @@ -37,15 +37,12 @@ $timeunits = filter_input(INPUT_GET, 'tu'); if ($timeunits === 'm') { // months $jsonData = $jsonobj['interfaces'][0]['traffic']['months']; -//} elseif ($timeunits === 'h') { -// $jsonData = $jsonobj['interfaces'][0]['traffic']['hours']; } 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 '[ '; @@ -54,11 +51,6 @@ for ($i = count($jsonData) - 1; $i >= 0; --$i) { if ($timeunits === 'm') { $dt = DateTime::createFromFormat('Y n', $jsonData[$i]['date']['year'].' '. $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 { $dt = DateTime::createFromFormat('Y n j', $jsonData[$i]['date']['year'].' '. $jsonData[$i]['date']['month'].' '. @@ -82,9 +74,6 @@ for ($i = count($jsonData) - 1; $i >= 0; --$i) { if ($timeunits === 'm') { echo '{ "date": "' , $dt->format('Y-m') , '", "rx": "' , $datareceived , '", "tx": "' , $datasend , '" }'; -// } elseif ($timeunits === 'h') { -// echo '{ "date": "' , $dt->format('Y-m-d H:i') , '", "rx": ' , $datareceived , -// ', "tx": ' , $datasend , ' }'; } else { echo '{ "date": "' , $dt->format('Y-m-d') , '", "rx": "' , $datareceived , '", "tx": "' , $datasend , '" }'; diff --git a/includes/vnstat.php b/includes/vnstat.php index a0035b9f..86762ad8 100644 --- a/includes/vnstat.php +++ b/includes/vnstat.php @@ -19,19 +19,18 @@ function DisplayVnstat(&$extraFooterScripts)
    -
    +
    -
    +

    -php -foreach ($interfacesWlo as $interface) { - echo ' ' , PHP_EOL; -} - -? - - -
    -
    -*/ -?> -
    -
    -
    -

    - ' , + echo ' ' , PHP_EOL; } ?> - + -

    -
    +
    +
    +
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    diff --git a/js/bandwidthcharts.js b/js/bandwidthcharts.js index df9178c4..bbb82da4 100644 --- a/js/bandwidthcharts.js +++ b/js/bandwidthcharts.js @@ -18,8 +18,8 @@ /** * Create a bootstrap data table. */ - function CreateDataTable(placeholder) { - $("#"+placeholder).append('
    daterxtx
    '); + function CreateDataTable(placeholder, timeunits) { + $("#"+placeholder).append('
    daterxtx
    '); } /** @@ -27,11 +27,13 @@ * construct the proper barchart. */ function ShowBandwidthChartHandler(e) { - // Remove all charts - $("#divBandwidthdaily").empty(); - $("#divBandwidthweekly").empty(); - $("#divBandwidthmonthly").empty(); - // Construct ajax uri for getting proper data. + // 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='; @@ -41,9 +43,9 @@ var datasizeunits = 'mb'; uri += '&dsu='+encodeURIComponent(datasizeunits); // Init. chart - var barchart = CreateBarChart('divBandwidth'+timeunit, datasizeunits); - // Init. datatable - var datatable = CreateDataTable('divBandwidth'+timeunit); + var barchart = CreateBarChart('divChartBandwidth'+timeunit, datasizeunits); + // Init. datatable html + var datatable = CreateDataTable('divTableBandwidth'+timeunit, timeunit); // Get data for chart $.ajax({ url: uri, @@ -54,10 +56,11 @@ }).done(function(jsondata) { $("#divLoaderBandwidth"+timeunit).addClass("hidden"); barchart.setData(jsondata); - $('#tableBandwidth').DataTable({ - "searching": false, + $('#tableBandwidth'+timeunit).DataTable({ + searching: false, + paging: false, data: jsondata, - "columns": [ + columns: [ { "data": "date" }, { "data": "rx", "title": "received "+datasizeunits }, { "data": "tx", "title": "send "+datasizeunits }] @@ -71,10 +74,12 @@ }); } - $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler); - $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler); - $('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler); - $('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler); - ShowBandwidthChartHandler(); + $( 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); \ No newline at end of file From 23d271885496d0c74cbb44aba8ddad1a24cae26b Mon Sep 17 00:00:00 2001 From: D9ping Date: Tue, 11 Sep 2018 16:15:31 +0200 Subject: [PATCH 05/11] Renamed vnstat.php to bandwidth.php. Disabled bandwidth page by default. Signed-off-by: D9ping --- includes/{vnstat.php => bandwidth.php} | 5 +++-- includes/config.php | 2 +- index.php | 8 ++++---- installers/raspbian.sh | 2 +- js/bandwidthcharts.js | 3 ++- 5 files changed, 11 insertions(+), 9 deletions(-) rename includes/{vnstat.php => bandwidth.php} (96%) diff --git a/includes/vnstat.php b/includes/bandwidth.php similarity index 96% rename from includes/vnstat.php rename to includes/bandwidth.php index 86762ad8..11bdd5af 100644 --- a/includes/vnstat.php +++ b/includes/bandwidth.php @@ -3,9 +3,10 @@ include_once( 'includes/status_messages.php' ); /** - * Generate html output for tab with vnstat traffic amount information. + * Generate html output for tab with charts and datatables + * with vnstat bandwidth use information. */ -function DisplayVnstat(&$extraFooterScripts) +function DisplayBandwidth(&$extraFooterScripts) { ?>
    diff --git a/includes/config.php b/includes/config.php index 70f271f8..0b122f06 100755 --- a/includes/config.php +++ b/includes/config.php @@ -26,7 +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 ); +define('RASPI_VNSTAT_ENABLED', false ); // Locale settings define('LOCALE_ROOT', 'locale'); diff --git a/index.php b/index.php index 420483f1..cdc1df3b 100755 --- a/index.php +++ b/index.php @@ -33,7 +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/vnstat.php' ); +include_once( 'includes/bandwidth.php' ); $output = $return = 0; $page = $_GET['page']; @@ -158,7 +158,7 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
  • - +
  • @@ -214,8 +214,8 @@ $extraFooterScripts = array(); case "theme_conf": DisplayThemeConfig(); break; - case "vnstat": - DisplayVnstat($extraFooterScripts); + case "bandwidth": + DisplayBandwidth($extraFooterScripts); break; case "system_info": DisplaySystem(); diff --git a/installers/raspbian.sh b/installers/raspbian.sh index 01de6c1a..ecf395c7 100755 --- a/installers/raspbian.sh +++ b/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 vnstat || install_error "Unable to install dependencies" + sudo apt-get install lighttpd $php_package git hostapd dnsmasq || install_error "Unable to install dependencies" } install_raspap diff --git a/js/bandwidthcharts.js b/js/bandwidthcharts.js index bbb82da4..55c6c518 100644 --- a/js/bandwidthcharts.js +++ b/js/bandwidthcharts.js @@ -82,4 +82,5 @@ ShowBandwidthChartHandler(); }); -})(jQuery); \ No newline at end of file +})(jQuery); + From b3d7c06c60002a473bb3289acd283276542cabb7 Mon Sep 17 00:00:00 2001 From: D9ping Date: Tue, 11 Sep 2018 21:00:23 +0200 Subject: [PATCH 06/11] Translatable strings in bandwidthcharts.js. Signed-off-by: D9ping --- includes/bandwidth.php | 18 +++++++++++++----- js/bandwidthcharts.js | 17 ++++++++++------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/includes/bandwidth.php b/includes/bandwidth.php index 11bdd5af..175642b7 100644 --- a/includes/bandwidth.php +++ b/includes/bandwidth.php @@ -27,7 +27,8 @@ function DisplayBandwidth(&$extraFooterScripts)

    - - +
    @@ -49,7 +49,8 @@ foreach ($interfacesWlo as $interface) {

    - ' , @@ -76,7 +77,14 @@ foreach ($interfacesWlo as $interface) {
    + 'vendor/raphael/raphael.min.js', 'defer'=>false); $extraFooterScripts[] = array('src'=>'vendor/morrisjs/morris.min.js', 'defer'=>false); diff --git a/js/bandwidthcharts.js b/js/bandwidthcharts.js index 55c6c518..ac2ecaf8 100644 --- a/js/bandwidthcharts.js +++ b/js/bandwidthcharts.js @@ -1,4 +1,4 @@ -(function($) { +(function($, _t) { "use strict"; /** @@ -9,7 +9,8 @@ element: placeholder, xkey: 'date', ykeys: ['rx', 'tx'], - labels: ['Received '+datasizeunits, 'Send '+datasizeunits] // NOI18N + labels: [_t['send']+' '+datasizeunits.toUpperCase(), + _t['receive']+' '+datasizeunits.toUpperCase()] }); return barchart; @@ -19,7 +20,9 @@ * Create a bootstrap data table. */ function CreateDataTable(placeholder, timeunits) { - $("#"+placeholder).append('
    daterxtx
    '); + $("#"+placeholder).append(''+ + '
    daterxtx
    '); } /** @@ -62,8 +65,8 @@ data: jsondata, columns: [ { "data": "date" }, - { "data": "rx", "title": "received "+datasizeunits }, - { "data": "tx", "title": "send "+datasizeunits }] + { "data": "rx", "title": _t['send']+' '+datasizeunits.toUpperCase() }, + { "data": "tx", "title": _t['receive']+' '+datasizeunits.toUpperCase() }] }); }).fail(function(xhr, textStatus) { if (window.console) { @@ -74,7 +77,7 @@ }); } - $( document ).ready(function() { + $(document).ready(function() { $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler); $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler); $('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler); @@ -82,5 +85,5 @@ ShowBandwidthChartHandler(); }); -})(jQuery); +})(jQuery, t); From 3bf4a74f3ba43560c438be2bcfe0de79b6917cfd Mon Sep 17 00:00:00 2001 From: D9ping Date: Fri, 14 Sep 2018 01:06:13 +0200 Subject: [PATCH 07/11] Renamed bandwidth.php to data_usage.php. Removed unused status_messages.php include in data_usage.php. Use single quote style in bandwidthcharts.js. Signed-off-by: D9ping --- includes/{bandwidth.php => data_usage.php} | 9 ++---- index.php | 8 ++--- js/bandwidthcharts.js | 35 +++++++++++----------- 3 files changed, 25 insertions(+), 27 deletions(-) rename includes/{bandwidth.php => data_usage.php} (94%) diff --git a/includes/bandwidth.php b/includes/data_usage.php similarity index 94% rename from includes/bandwidth.php rename to includes/data_usage.php index 175642b7..db2e4cb4 100644 --- a/includes/bandwidth.php +++ b/includes/data_usage.php @@ -1,18 +1,15 @@
    -
    +
    diff --git a/index.php b/index.php index cdc1df3b..e76e830a 100755 --- a/index.php +++ b/index.php @@ -33,7 +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/bandwidth.php' ); +include_once( 'includes/data_usage.php' ); $output = $return = 0; $page = $_GET['page']; @@ -158,7 +158,7 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
  • - +
  • @@ -214,8 +214,8 @@ $extraFooterScripts = array(); case "theme_conf": DisplayThemeConfig(); break; - case "bandwidth": - DisplayBandwidth($extraFooterScripts); + case "data_use": + DisplayDataUsage($extraFooterScripts); break; case "system_info": DisplaySystem(); diff --git a/js/bandwidthcharts.js b/js/bandwidthcharts.js index ac2ecaf8..dc89f14d 100644 --- a/js/bandwidthcharts.js +++ b/js/bandwidthcharts.js @@ -17,7 +17,7 @@ } /** - * Create a bootstrap data table. + * Create a jquery bootstrap datatable. */ function CreateDataTable(placeholder, timeunits) { $("#"+placeholder).append(' Date: Fri, 14 Sep 2018 01:07:23 +0200 Subject: [PATCH 08/11] Enable data usage page by default. Signed-off-by: D9ping --- includes/config.php | 2 +- installers/raspbian.sh | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/includes/config.php b/includes/config.php index 0b122f06..70f271f8 100755 --- a/includes/config.php +++ b/includes/config.php @@ -26,7 +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', false ); +define('RASPI_VNSTAT_ENABLED', true ); // Locale settings define('LOCALE_ROOT', 'locale'); diff --git a/installers/raspbian.sh b/installers/raspbian.sh index ecf395c7..01de6c1a 100755 --- a/installers/raspbian.sh +++ b/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 From 99a451a3e9e6fe09efcb2c20fdb513ec5fbbc228 Mon Sep 17 00:00:00 2001 From: billz Date: Mon, 17 Sep 2018 11:37:19 +0000 Subject: [PATCH 09/11] Style additions for data usage UI --- dist/css/terminal.css | 237 +++++++++++++++++++++++------------------- 1 file changed, 128 insertions(+), 109 deletions(-) diff --git a/dist/css/terminal.css b/dist/css/terminal.css index ace1fc60..a62d2667 100644 --- a/dist/css/terminal.css +++ b/dist/css/terminal.css @@ -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; } From da1f602f86fae4d23b3a77ec7ba6fd29b349ae39 Mon Sep 17 00:00:00 2001 From: Bill Zimmerman Date: Mon, 17 Sep 2018 22:23:44 +0200 Subject: [PATCH 10/11] Added vnstat to list of dependencies --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4950b4f4..604708ef 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,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 From 3b52d0f2119dceec76733198403f642815c6b537 Mon Sep 17 00:00:00 2001 From: Bill Zimmerman Date: Sat, 22 Sep 2018 13:02:02 +0200 Subject: [PATCH 11/11] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 604708ef..34b28953 100644 --- a/README.md +++ b/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.