WIP: dashboard redesign

2020-02-02 08:37:15 +00:00 · 2020-02-02 08:37:15 +00:00 · 82db0a34b9
parent 2056236c42
commit 82db0a34b9
5 changed files with 209 additions and 93 deletions
--- a/app/js/dashboardchart.js
+++ 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);
+
--- 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);
 };

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


--- a/index.php
+++ b/index.php
@ -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();
--- a/templates/dashboard.php
+++ b/templates/dashboard.php
@ -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>