From 1bbeefca7cabfbc691c7eb5a118c32fa8aa82506 Mon Sep 17 00:00:00 2001 From: billz Date: Sat, 1 Feb 2020 11:06:41 +0000 Subject: [PATCH 01/32] Add hostapdStatus to System --- app/lib/system.php | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/lib/system.php b/app/lib/system.php index 4e4c8879..9e374d5c 100644 --- a/app/lib/system.php +++ b/app/lib/system.php @@ -50,5 +50,10 @@ class System { $cpuTemp = file_get_contents("/sys/class/thermal/thermal_zone0/temp"); return number_format($cpuTemp/1000, 1); } -} + public function hostapdStatus() { + exec('pidof hostapd | wc -l', $status); + return $status; + } + +} From 2056236c424a69343682646b48214ece1104b0dd Mon Sep 17 00:00:00 2001 From: billz Date: Sat, 1 Feb 2020 11:07:54 +0000 Subject: [PATCH 02/32] Get hostapdStatus from System --- includes/hostapd.php | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/includes/hostapd.php b/includes/hostapd.php index aa06ebbb..d8a6810b 100755 --- a/includes/hostapd.php +++ b/includes/hostapd.php @@ -1,6 +1,7 @@ hostapdStatus(); $serviceStatus = $hostapdstatus[0] == 0 ? "down" : "up"; foreach ($hostapdconfig as $hostapdconfigline) { From 82db0a34b9d03e23807baf3bb158afc6d2bae0b8 Mon Sep 17 00:00:00 2001 From: billz Date: Sun, 2 Feb 2020 08:37:15 +0000 Subject: [PATCH 03/32] WIP: dashboard redesign --- app/js/dashboardchart.js | 106 ++++++++++++++++++++++++++++++++ app/js/linkquality.js | 126 ++++++++++++++++++++------------------- includes/dashboard.php | 3 +- index.php | 13 ++-- templates/dashboard.php | 54 +++++++++-------- 5 files changed, 209 insertions(+), 93 deletions(-) create mode 100644 app/js/dashboardchart.js diff --git a/app/js/dashboardchart.js b/app/js/dashboardchart.js new file mode 100644 index 00000000..45914885 --- /dev/null +++ b/app/js/dashboardchart.js @@ -0,0 +1,106 @@ +(function($, _t) { + "use strict"; + + /** + * Create a Chart.js barchart. + */ + function CreateChart(ctx, labels) { + var barchart = new Chart(ctx,{ + type: 'line', + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + xAxes: [{ + scaleLabel: { + display: true + }, + ticks: { + maxRotation: 0, + minRotation: 0 + } + }], + yAxes: [{ + id: 'y-axis-1', + type: 'linear', + display: true, + position: 'left', + ticks: { + beginAtZero: true + } + }] + } + }, + data: { + labels: labels, + datasets: [] + } + }); + return barchart; + } + + function ShowBandwidthChartHandler(e) { + // Remove hourly chartjs chart + $('#divChartBandwidthhourly').empty(); + // Construct ajax uri for getting the proper data + var timeunit = 'hourly'; + var uri = 'ajax/bandwidth/get_bandwidth.php?'; + uri += 'inet='; + uri += encodeURIComponent($('#divInterface').text()); + uri += '&tu='; + uri += encodeURIComponent(timeunit.substr(0, 1)); + var datasizeunits = 'mb'; + uri += '&dsu='+encodeURIComponent(datasizeunits); + // Get data for chart + $.ajax({ + url: uri, + dataType: 'json', + beforeSend: function() {} + }).done(function(jsondata) { + // Map json values to label array + var labels = jsondata.map(function(e) { + return e.date; + }); + // Init. chart with label series + var barchart = CreateChart('divChartBandwidth'+timeunit, labels); + var dataRx = jsondata.map(function(e) { + return e.rx; + }); + var dataTx = jsondata.map(function(e) { + return e.tx; + }); + addData(barchart, dataTx, dataRx, datasizeunits); + }).fail(function(xhr, textStatus) { + if (window.console) { + console.error('server error'); + } else { + alert("server error"); + } + }); + } + /** + * Add data array to datasets of current chart. + */ + function addData(chart, dataTx, dataRx, datasizeunits) { + chart.data.datasets.push({ + label: 'Send'+' '+datasizeunits.toUpperCase(), + yAxisID: 'y-axis-1', + borderColor: 'rgba(75, 192, 192, 1)', + backgroundColor: 'rgba(75, 192, 192, 0.2)', + data: dataTx + }); + chart.data.datasets.push({ + label: 'Receive'+' '+datasizeunits.toUpperCase(), + yAxisID: 'y-axis-1', + borderColor: 'rgba(192, 192, 192, 1)', + backgroundColor: 'rgba(192, 192, 192, 0.2)', + data: dataRx + }); + chart.update(); + } + $(document).ready(function() { + ShowBandwidthChartHandler(); + }); + +})(jQuery, t); + diff --git a/app/js/linkquality.js b/app/js/linkquality.js index 6e8dd34b..79d3ad1d 100644 --- a/app/js/linkquality.js +++ b/app/js/linkquality.js @@ -3,84 +3,86 @@ // Support for dark terminal theme theme = getCookie('theme'); if (theme == 'terminal.css') { - var bgColor1 = '#000'; - var bgColor2 = '#000'; - var borderColor = 'rgba(46, 230, 0, 1)'; - var labelColor = 'rgba(46, 230, 0, 1)'; + var bgColor1 = '#000'; + var bgColor2 = '#000'; + var borderColor = 'rgba(46, 230, 0, 1)'; + var labelColor = 'rgba(46, 230, 0, 1)'; } else { - var bgColor1 = '#d4edda'; - var bgColor2 = '#eaecf4'; - var borderColor = 'rgba(147, 210, 162, 1)'; - var labelColor = 'rgba(130, 130, 130, 1)'; + var bgColor1 = '#d4edda'; + var bgColor2 = '#eaecf4'; + var borderColor = 'rgba(147, 210, 162, 1)'; + var labelColor = 'rgba(130, 130, 130, 1)'; } let data1 = { - datasets: [{ - data: [linkQ, 100-linkQ], - backgroundColor: [bgColor1, bgColor2], - borderColor: borderColor, - }], + datasets: [{ + data: [linkQ, 100-linkQ], + backgroundColor: [bgColor1, bgColor2], + borderColor: borderColor, + }], }; let config = { - type: 'doughnut', - data: data1, - options: { - aspectRatio: 2, - responsive: true, - tooltips: {enabled: false}, - hover: {mode: null}, - legend: { - display: false, - }, - rotation: (2/3)*Math.PI,//2+(1/3), - circumference: (1+(2/3)) * Math.PI, // * Math.PI, - cutoutPercentage: 80, - animation: { - animateScale: false, - animateRotate: true - }, - tooltips: { - enabled: false - } - }, - centerText: { - display: true, - text: linkQ + "%" - } + type: 'doughnut', + data: data1, + options: { + aspectRatio: 2, + responsive: true, + maintainAspectRatio: false, + tooltips: {enabled: false}, + hover: {mode: null}, + legend: { + display: false, + }, + rotation: (2/3)*Math.PI,//2+(1/3), + circumference: (1+(2/3)) * Math.PI, // * Math.PI, + cutoutPercentage: 80, + animation: { + animateScale: false, + animateRotate: true + }, + tooltips: { + enabled: false + } + }, + centerText: { + display: true, + text: linkQ + "%" + } }; -Chart.Chart.pluginService.register({ - beforeDraw: function(chart) { - if (chart.config.centerText.display !== null && - typeof chart.config.centerText.display !== 'undefined' && - chart.config.centerText.display) { - drawLinkQ(chart); - } - } -}); +//Chart.Chart.pluginService.register({ +// beforeDraw: function(chart) { +// if (chart.config.centerText.display !== null && +// typeof chart.config.centerText.display !== 'undefined' && +// chart.config.centerText.display) { +// drawLinkQ(chart); +// } +// } +//}); function drawLinkQ(chart) { - let width = chart.chart.width; - let height = chart.chart.height; - let ctx = chart.chart.ctx; + let width = chart.chart.width; + let height = chart.chart.height; + let ctx = chart.chart.ctx; - ctx.restore(); - let fontSize = (height / 100).toFixed(2); - ctx.font = fontSize + "em sans-serif"; - ctx.fillStyle = labelColor; - ctx.textBaseline = "middle"; + ctx.restore(); + let fontSize = (height / 100).toFixed(2); + ctx.font = fontSize + "em sans-serif"; + ctx.fillStyle = labelColor; + ctx.textBaseline = "middle"; - let text = chart.config.centerText.text; - let textX = Math.round((width - ctx.measureText(text).width) * 0.5); - let textY = height / 2; - ctx.fillText(text, textX, textY); - ctx.save(); + let text = chart.config.centerText.text; + let textX = Math.round((width - ctx.measureText(text).width) * 0.5); + let textY = height / 2; + ctx.fillText(text, textX, textY); + ctx.save(); } window.onload = function() { - let ctx = document.getElementById("canvas").getContext("2d"); - window.myDoughnut = new Chart(ctx, config); + let ctx = document.getElementById("divChartLinkQ").getContext("2d"); + window.myDoughnut = new Chart(ctx, config); + //drawLinkQ(Chart); }; diff --git a/includes/dashboard.php b/includes/dashboard.php index aea43cb1..42d39b48 100755 --- a/includes/dashboard.php +++ b/includes/dashboard.php @@ -3,7 +3,7 @@ /** * Show dashboard page. */ -function DisplayDashboard() +function DisplayDashboard(&$extraFooterScripts) { $status = new StatusMessages(); @@ -194,6 +194,7 @@ function DisplayDashboard() "strLinkQuality", "wlan0up" )); + $extraFooterScripts[] = array('src'=>'app/js/dashboardchart.js', 'defer'=>false); } diff --git a/index.php b/index.php index 710fb2c5..5ffe2c63 100755 --- a/index.php +++ b/index.php @@ -108,13 +108,14 @@ if ($_COOKIE['sidebarToggled'] == 'true' ) { - + +
From 78fa4c2c9bed53553d07f9f4c4b5815fb1953b04 Mon Sep 17 00:00:00 2001 From: billz Date: Mon, 3 Feb 2020 09:56:30 +0000 Subject: [PATCH 31/32] Fix more indents --- index.php | 170 +++++++++++++++++++++++++++--------------------------- 1 file changed, 85 insertions(+), 85 deletions(-) diff --git a/index.php b/index.php index 1104d2ed..d95aa876 100755 --- a/index.php +++ b/index.php @@ -191,92 +191,92 @@ if ($_COOKIE['sidebarToggled'] == 'true' ) { - -
+ +
- -
- - - - -
- -
-
- -
-
-
- -
-
-
- -
+ +
+ + + + +
+ +
+
+ +
+
+
+ +
+
+
+ +
From 5ff1e85274203265783a398d4b70d1698b45b537 Mon Sep 17 00:00:00 2001 From: billz Date: Mon, 3 Feb 2020 10:13:57 +0000 Subject: [PATCH 32/32] Processed with phpcs/phpcbf --- index.php | 94 +++++++++++++++++++++++++++---------------------------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/index.php b/index.php index d95aa876..1b1e5a1b 100755 --- a/index.php +++ b/index.php @@ -1,7 +1,7 @@
@@ -313,7 +313,7 @@ if ($_COOKIE['sidebarToggled'] == 'true' ) { foreach ($extraFooterScripts as $script) { echo ' ' , PHP_EOL; }