Autres
/
RaspAP
mirror of https://github.com/billz/raspap-webgui.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

WIP: dashboard redesign

pull/491/head
billz 3 years ago
parent
2056236c42
commit
82db0a34b9
5 changed files with 209 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 106
      app/js/dashboardchart.js
  2. 126
      app/js/linkquality.js
  3. 3
      includes/dashboard.php
  4. 13
      index.php
  5. 54
      templates/dashboard.php

106
app/js/dashboardchart.js
View File

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

126
app/js/linkquality.js
View File

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

3
includes/dashboard.php
View File

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

13
index.php
View File

@ -108,13 +108,14 @@ if ($_COOKIE['sidebarToggled'] == 'true' ) {
<ul class="navbar-nav sidebar sidebar-light d-none d-md-block accordion <?php echo $toggleState; ?>" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.php?page=wlan0_info">
<div class="sidebar-brand-icon">
<img src="app/img/raspAP-logo64px.png" width="32" height="32">
</div>
<div class="sidebar-brand-text ml-1">RaspAP</div>
</a>
<div class="sidebar-brand-text ml-1">RaspAP</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<div class="sidebar-brand-icon">
<img src="app/img/raspAP-logo64px.png" width="32" height="32">
</div>
<li class="nav-item">
<a class="nav-link" href="index.php?page=wlan0_info"><i class="fas fa-tachometer-alt fa-fw mr-2"></i><span class="nav-label"><?php echo _("Dashboard"); ?></span></a>
</li>
@ -214,7 +215,7 @@ if ($_COOKIE['sidebarToggled'] == 'true' ) {
// handle page actions
switch ($page) {
case "wlan0_info":
DisplayDashboard();
DisplayDashboard($extraFooterScripts);
break;
case "dhcpd_conf":
DisplayDHCPConfig();

54
templates/dashboard.php
View File

@ -24,47 +24,47 @@ $ifaceStatus = $wlan0up ? "up" : "down";
</div>
</div><!-- /.row -->
</div><!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<div class="card mb-3">
<div class="card-body">
<h4><?php echo _("Hourly traffic amount"); ?></h4>
<div id="divInterface" class="d-none"><?php echo RASPI_WIFI_CLIENT_INTERFACE; ?></div>
<div class="col-md-12">
<canvas id="divChartBandwidthhourly"></canvas>
</div>
</div><!-- /.card-body -->
</div><!-- /.card-->
</div>
<div class="col-md-6 mb-3">
<div class="card h-100">
<div class="card">
<div class="card-body wireless">
<h4><?php echo _("Wireless Information"); ?></h4>
<h4><?php echo _("Wireless Client"); ?></h4>
<div class="row justify-content-md-center">
<div class="col-md-8">
<div class="info-item"><?php echo _("Connected To"); ?></div><div><?php echo htmlspecialchars($connectedSSID, ENT_QUOTES); ?></div>
<div class="info-item"><?php echo _("AP Mac Address"); ?></div><div><?php echo htmlspecialchars($connectedBSSID, ENT_QUOTES); ?></div>
<div class="info-item"><?php echo _("Bitrate"); ?></div><div><?php echo htmlspecialchars($bitrate, ENT_QUOTES); ?></div>
<div class="info-item"><?php echo _("Signal Level"); ?></div><div><?php echo htmlspecialchars($signalLevel, ENT_QUOTES); ?></div>
<div class="info-item"><?php echo _("Transmit Power"); ?></div><div><?php echo htmlspecialchars($txPower, ENT_QUOTES); ?></div>
<div class="info-item"><?php echo _("Frequency"); ?></div><div><?php echo htmlspecialchars($frequency, ENT_QUOTES); ?></div>
<div class="info-item"><?php echo _("Link Quality"); ?></div>
</div>
<div class="col-md-4">
<script>var linkQ = <?php echo json_encode($strLinkQuality); ?>;</script>
<div class="chart-container">
<canvas id="canvas" class="chartjs-render-monitor"></canvas>
<canvas id="divChartLinkQ"></canvas>
</div>
</div><!--row-->
</div>
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col-md-6 -->
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<h4><?php echo _("Interface Information"); ?></h4>
<div class="info-item"><?php echo _("Interface Name"); ?></div><div><?php echo RASPI_WIFI_CLIENT_INTERFACE; ?></div>
<div class="info-item"><?php echo _("IPv4 Address"); ?></div><div><?php echo htmlspecialchars($ipv4Addrs, ENT_QUOTES); ?></div>
<div class="info-item"><?php echo _("Subnet Mask"); ?></div><div><?php echo htmlspecialchars($ipv4Netmasks, ENT_QUOTES); ?></div>
<div class="info-item"><?php echo _("IPv6 Address"); ?></div><div><?php echo htmlspecialchars($ipv6Addrs, ENT_QUOTES); ?></div>
<div class="info-item"><?php echo _("Mac Address"); ?></div><div><?php echo htmlspecialchars($macAddr, ENT_QUOTES); ?></div>
</div><!-- /.card-body -->
</div><!-- /.card-->
<div class="card mb-3">
<div class="card-body">
<h4><?php echo _("Interface Statistics"); ?></h4>
<div class="info-item"><?php echo _("Received Packets"); ?></div><div><?php echo number_format($strRxPackets); ?></div>
<div class="info-item"><?php echo _("Received Bytes"); ?></div><div><?php echo number_format($strRxBytes); ?></div>
<div class="info-item"><?php echo _("Transferred Packets"); ?></div><div><?php echo number_format($strTxPackets); ?></div>
<div class="info-item"><?php echo _("Transferred Bytes"); ?></div><div><?php echo number_format($strTxBytes); ?></div>
</div><!-- /.card-body -->
</div><!-- /.card -->
<div class="card mb-3">
<div class="card mb-3">
<div class="card-body wireless">
<h4><?php echo _("Connected Devices"); ?></h4>
<div class="table-responsive">
@ -114,3 +114,9 @@ $ifaceStatus = $wlan0up ? "up" : "down";
</div><!-- /.card -->
</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>
Write Preview
Loading…
Cancel
Save