From f866983d6b6cbfd7b6202921b1cf9c33732d7fdc Mon Sep 17 00:00:00 2001
From: loviuz <loviuz@gmail.com>
Date: Sat, 8 Aug 2020 22:23:21 +0200
Subject: [PATCH] Aggiunta generazione grafico per vendor

---
 gui/index.php                   | 15 ++-----
 gui/js/wifi-probe-aggregator.js | 78 ++++++++++++++++++++++++++++++++-
 gui/orari.php                   |  4 +-
 ws/reader.php                   | 70 +++++++++++++++++++++++++++++
 4 files changed, 152 insertions(+), 15 deletions(-)

diff --git a/gui/index.php b/gui/index.php
index cd4fe8f..5e9084f 100755
--- a/gui/index.php
+++ b/gui/index.php
@@ -86,18 +86,7 @@ include('parts/header.php');
       <!-- Card Body -->
       <div class="card-body">
         <div class="chart-pie pt-4 pb-2">
-          <canvas id="vendor-chart"></canvas>
-        </div>
-        <div class="mt-4 text-center small">
-          <span class="mr-2">
-            <i class="fas fa-circle text-primary"></i> Samsung
-          </span>
-          <span class="mr-2">
-            <i class="fas fa-circle text-success"></i> Apple
-          </span>
-          <span class="mr-2">
-            <i class="fas fa-circle text-info"></i> Huawei
-          </span>
+          <canvas id="chart-vendor"></canvas>
         </div>
       </div>
 
@@ -107,6 +96,8 @@ include('parts/header.php');
 
 <script>
   $('#menu-dashboard').addClass('active');
+
+  drawPieChart( 'chart-vendor', 'get-devices-by-vendor' );
   
   
   // Intervallo in secondi fra ogni lettura dati
diff --git a/gui/js/wifi-probe-aggregator.js b/gui/js/wifi-probe-aggregator.js
index fe3aa7e..0c4afc1 100644
--- a/gui/js/wifi-probe-aggregator.js
+++ b/gui/js/wifi-probe-aggregator.js
@@ -95,7 +95,7 @@ Date.prototype.formatMMDDYYYY = function() {
     "/" +  this.getFullYear();
 }
 
-function drawLineChart( id, resource ) {
+function drawBarChart( id, resource ) {
     $.post( reader_url, { op: resource }, function(response){
         response = $.parseJSON(response);
 
@@ -189,4 +189,80 @@ function drawLineChart( id, resource ) {
             }
         });
     });
+}
+
+
+function drawPieChart( id, resource ) {
+    $.post( reader_url, { op: resource }, function(response){
+        response = $.parseJSON(response);
+
+        // Split timestamp and data into separate arrays
+        var labels = [], data=[], extra_data=[], colors=[];
+        for( i=0; i<response.records.length; i++ ){
+            result = response.records[i];
+            
+            labels.push(result.indice);
+            data.push(result.valore);
+            extra_data.push(result.valore_extra);
+            colors.push( getRandomColor() );
+        }
+
+        // Create the chart.js data structure using 'labels' and 'data'
+        var full_chart_data = {
+            labels : labels,
+            datasets : [{
+                backgroundColor : colors,
+                data            : data
+            }]
+        };
+
+        // Get the context of the canvas element we want to select
+        var ctx = document.getElementById(id).getContext("2d");
+
+        new Chart(ctx, {
+            type: 'pie',
+            data: full_chart_data,
+            options: {
+                maintainAspectRatio: false,
+                layout: {
+                    padding: {
+                        left: 10,
+                        right: 25,
+                        top: 25,
+                        bottom: 0
+                    }
+                },
+                legend: {
+                    display: false
+                },
+                tooltips: {
+                    titleMarginBottom: 10,
+                    titleFontColor: '#6e707e',
+                    titleFontSize: 14,
+                    backgroundColor: "rgb(255,255,255)",
+                    bodyFontColor: "#858796",
+                    borderColor: '#dddfeb',
+                    borderWidth: 1,
+                    displayColors: true,
+                    caretPadding: 10,
+                    callbacks: {
+                        label: function(tooltipItem, chart) {
+                            var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
+                            return extra_data[ tooltipItem.index ] + ' devices';
+                        }
+                    }
+                },
+            }
+        });
+    });
+}
+
+
+function getRandomColor() {
+    var letters = '0123456789ABCDEF';
+    var color = '#';
+    for (var i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
 }
\ No newline at end of file
diff --git a/gui/orari.php b/gui/orari.php
index c3d7cef..b2d17d7 100755
--- a/gui/orari.php
+++ b/gui/orari.php
@@ -46,8 +46,8 @@ include('parts/header.php');
 <script>
   $('#menu-orari').addClass('active');
 
-  drawLineChart( 'chart-orari', 'get-devices-by-hour' );
-  drawLineChart( 'chart-giorno', 'get-devices-by-weekday' );
+  drawBarChart( 'chart-orari', 'get-devices-by-hour' );
+  drawBarChart( 'chart-giorno', 'get-devices-by-weekday' );
 </script>
 
 <?php
diff --git a/ws/reader.php b/ws/reader.php
index e2a1254..f7059bc 100644
--- a/ws/reader.php
+++ b/ws/reader.php
@@ -10,6 +10,7 @@ $result = [];
 
 switch( $_POST['op'] ){
     case 'get-last-devices':
+        // Vendor cache
         $oui = file_get_contents($config['oui_path']);
 
         if (!empty($_POST['date_start']) && !empty($_POST['date_end'])) {
@@ -278,4 +279,73 @@ switch( $_POST['op'] ){
         $stmt->close();
         $mysqli->close();
     break;
+
+
+    case 'get-devices-by-vendor':
+        // Vendor cache
+        $oui = file_get_contents($config['oui_path']);
+
+        // Connessione al database
+        $mysqli = mysqli_connect($config['db_host'], $config['db_user'], $config['db_pass'], $config['db_name']);
+
+        // Errore nella connessione a database
+        if (mysqli_connect_errno($mysqli)) {
+                
+            $result = [
+                'status' => 'ERR',
+                'message' => mysqli_connect_error(),
+            ];
+        } else {
+            $sql = "
+                SELECT
+                    SUBSTRING(mac, 1, 8) AS indice,
+                    COUNT(mac) AS valore
+                FROM
+                    `logs`
+                GROUP BY
+                    SUBSTRING(mac, 1, 8)
+                ORDER BY
+                    valore DESC
+                LIMIT
+                    0, 10";
+
+            $stmt = $mysqli->prepare($sql);
+            
+            // Errore nella preparazione query
+            if (!$stmt) {
+                $result = [
+                    'status' => 'ERR',
+                    'message' => $mysqli->error,
+                ];
+            } else {
+                // Esecuzione statement
+                $stmt->execute();
+
+                $rs = $stmt->get_result();
+                
+                while ($row = $rs->fetch_assoc()) {
+                    // Lettura vendor
+                    $mac = str_replace( ':', '-', substr($row['indice'], 0, 8) );
+
+                    $row['valore_extra'] = '';
+
+                    if( preg_match( '/^'.preg_quote($mac).'([\s\t]+)\(hex\)(.+?)$/im', $oui, $m) ){
+                        $row['valore_extra'] = trim($m[2]);
+                    }
+
+                    $records[] = $row;
+                }
+
+                $result = [
+                    'status' => 'OK',
+                    'records' => $records,
+                ];
+            }
+        }
+
+        echo json_encode($result);
+
+        $stmt->close();
+        $mysqli->close();
+    break;
 }