Aggiunto click su mac con dettagli

gui/ajax.php

@@ -0,0 +1,54 @@
+<?php
+
+$config = parse_ini_file('../config.ini');
+include __DIR__.'/lib/util.php';
+
+if( $_GET['op'] == 'get-details' && !empty($_GET['mac']) ){
+    ?>
+    <!-- Page Heading -->
+    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+    <h1 class="h3 mb-0 text-gray-800">Orari</h1>
+    </div>
+
+
+    <!-- Dispositivi per orario -->
+    <div class="row">
+    <div class="col-lg-12">
+        <div class="card shadow mb-4">
+        <div class="card-header py-3">
+            <h6 class="m-0 font-weight-bold text-primary">Visibilità per orario</h6>
+        </div>
+        <div class="card-body">
+            <div class="chart-bar">
+            <canvas id="chart-orari"></canvas>
+            </div>
+        </div>
+        </div>
+    </div>
+    </div>
+
+
+    <!-- Dispositivi per giorno -->
+    <div class="row">
+    <div class="col-lg-12">
+        <div class="card shadow mb-4">
+        <div class="card-header py-3">
+            <h6 class="m-0 font-weight-bold text-primary">Visibilità per giorno</h6>
+        </div>
+        <div class="card-body">
+            <div class="chart-bar">
+            <canvas id="chart-giorno"></canvas>
+            </div>
+        </div>
+        </div>
+    </div>
+    </div>
+
+
+
+    <script>
+        drawBarChart( 'chart-orari', 'get-activity-by-hour', '<?php echo $_GET['mac']; ?>' );
+        drawBarChart( 'chart-giorno', 'get-activity-by-weekday', '<?php echo $_GET['mac']; ?>' );
+    </script>
+<?php
+}

gui/css/wpa.css

@@ -1,3 +1,7 @@
 td.vendor-img > img{
     width: 40px;
 }
+
+.clickable{
+    cursor: pointer;
+}

gui/js/util.js

@@ -0,0 +1,51 @@
+// Modal
+function openModal(title, href) {
+    // Fix - Select2 does not function properly when I use it inside a Bootstrap modal.
+    $.fn.modal.Constructor.prototype.enforceFocus = function () {
+    };
+
+    // Generazione dinamica modal
+    do {
+        id = '#bs-popup-' + Math.floor(Math.random() * 100);
+    } while ($(id).length != 0);
+
+    if ($(id).length == 0) {
+        $('#modals').append('<div class="modal fade" id="' + id.replace("#", "") + '" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="true"></div>');
+    }
+
+    $(id).on('hidden.bs.modal', function () {
+        if ($('.modal-backdrop').length < 1) {
+            $(this).html('');
+            $(this).data('modal', null);
+        }
+    });
+
+    var content = '<div class="modal-dialog modal-lg">\
+    <div class="modal-content">\
+        <div class="modal-header">\
+            <h5 class="modal-title">\
+                <i class="fa fa-pencil"></i> ' + title + '\
+            </h5>\
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">\
+                <span aria-hidden="true">&times;</span>\
+            </button>\
+        </div>\
+        <div class="modal-body">|data|</div>\
+    </div>\
+</div>';
+
+    // Lettura contenuto div
+    if (href.substr(0, 1) == '#') {
+        var data = $(href).html();
+
+        $(id).html(content.replace("|data|", data));
+        $(id).modal('show');
+    } else {
+        $.get(href, function (data, response) {
+            if (response == 'success') {
+                $(id).html(content.replace("|data|", data));
+                $(id).modal('show');
+            }
+        });
+    }
+}

gui/js/wifi-probe-aggregator.js

@@ -29,9 +29,9 @@ function leggi_devices(interval){
                 // Aggiungo il dispositivo in lista se ancora non c'è
                 row_id = 'mac_' + (result.records[i].mac).replace(/:/g, '_');
 
-                if( $('#devices-table > tbody').find('tr[data-id="' + row_id + '"]').length == 0 ){
+                if( $('#devices-table > tbody').find('tr[id="' + row_id + '"]').length == 0 ){
                     $('#devices-table > tbody').prepend(
-                        '<tr data-id="' + row_id + '">' +
+                        '<tr class="clickable" id="' + row_id + '" data-name="' + (result.records[i].nome != null ? result.records[i].nome : '' ) + '" data-mac="' + result.records[i].mac + '">' +
                         '<td class="vendor-img"><img title="' + result.records[i].vendor + '" src="vendor.php?name=' + result.records[i].vendor + '"></td>' + 
                         '<td>' + device + '</td>' +
                         '<td>' + result.records[i].ssid + '</td>' +
@@ -39,6 +39,11 @@ function leggi_devices(interval){
                         '<td><div class="progress"><div class="progress-bar bg-' + progress_class + '" style="width:' + result.records[i].dbm + '%;"></div></div></td>' +
                         '</tr>'
                     );
+
+                    // Bind modal
+                    $('#' + row_id).on('click', function(){
+                        openModal( 'Dettagli su <b>' + $(this).data('name') + '</b> ' + $(this).data('mac'), 'ajax.php?op=get-details&mac=' + $(this).data('mac') );
+                    });
                 }
             }
 
@@ -95,8 +100,8 @@ Date.prototype.formatMMDDYYYY = function() {
     "/" +  this.getFullYear();
 }
 
-function drawBarChart( id, resource ) {
+function drawBarChart( id, resource, mac ) {
-    $.post( reader_url, { op: resource }, function(response){
+    $.post( reader_url, { op: resource, mac: mac }, function(response){
         response = $.parseJSON(response);
 
         // Split timestamp and data into separate arrays
@@ -182,7 +187,7 @@ function drawBarChart( id, resource ) {
                     callbacks: {
                         label: function(tooltipItem, chart) {
                             var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
-                            return tooltipItem.yLabel + ' devices';
+                            return tooltipItem.yLabel;
                         }
                     }
                 },

gui/lib/util.php

@@ -0,0 +1,16 @@
+<?php
+
+function webservice_post( $url, $post_data ){
+    $ch = curl_init();
+
+    curl_setopt($ch, CURLOPT_URL, $url);
+    curl_setopt($ch, CURLOPT_POST, 1);
+    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($post_data) );
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+
+    $server_output = curl_exec($ch);
+
+    curl_close ($ch);
+
+    return $server_output;
+}

gui/orari.php

@@ -46,8 +46,8 @@ include('parts/header.php');
 <script>
   $('#menu-orari').addClass('active');
 
-  drawBarChart( 'chart-orari', 'get-devices-by-hour' );
+  drawBarChart( 'chart-orari', 'get-devices-by-hour', '' );
-  drawBarChart( 'chart-giorno', 'get-devices-by-weekday' );
+  drawBarChart( 'chart-giorno', 'get-devices-by-weekday', '' );
 </script>
 
 <?php

gui/parts/footer.php

@@ -25,25 +25,7 @@
     <i class="fas fa-angle-up"></i>
   </a>
 
-  <!-- Logout Modal-->
+  <div id="modals"></div>
-  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-    aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
-          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">×</span>
-          </button>
-        </div>
-        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
-        <div class="modal-footer">
-          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
-          <a class="btn btn-primary" href="login.html">Logout</a>
-        </div>
-      </div>
-    </div>
-  </div>
 </body>
 
 </html>

gui/parts/header.php

@@ -35,6 +35,7 @@ $config = parse_ini_file('../config.ini');
   <script src="js/moment.min.js"></script>
   <script src="js/jquery.timeago.js"></script>
   <script src="js/jquery.timeago.it.js"></script>
+  <script src="js/util.js"></script>
   <script src="js/wifi-probe-aggregator.js"></script>
 
   <!-- Page level plugins -->

ws/reader.php

@@ -280,6 +280,128 @@ switch( $_POST['op'] ){
         $mysqli->close();
     break;
 
+    case 'get-activity-by-hour':
+        // 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 {
+            // Lettura numero di device unico nell'intervallo di date
+            $sql = "
+                SELECT
+                    CONCAT( DATE_FORMAT(received_at, '%H'), ':00' ) AS indice,
+                    COUNT(id) AS valore
+                FROM
+                    `logs`
+                WHERE
+                    mac='".$_POST['mac']."'
+                GROUP BY
+                    DATE_FORMAT(received_at, '%H')";
+
+            $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()) {
+                    $records[] = $row;
+                }
+
+                $result = [
+                    'status' => 'OK',
+                    'records' => $records,
+                ];
+            }
+        }
+
+        echo json_encode($result);
+
+        $stmt->close();
+        $mysqli->close();
+    break;
+
+
+    case 'get-activity-by-weekday':
+        $weekdays = [
+            0 => 'domenica',
+            1 => 'lunedì',
+            2 => 'martedì',
+            3 => 'mercoledì',
+            4 => 'giovedì',
+            5 => 'venerdì',
+            6 => 'sabato',
+        ];
+
+        // 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 {
+            // Lettura numero di device unico nell'intervallo di date
+            $sql = "
+                SELECT
+                    DATE_FORMAT(received_at, '%w') AS indice,
+                    COUNT(id) AS valore
+                FROM
+                    `logs`
+                WHERE
+                    mac='".$_POST['mac']."'
+                GROUP BY
+                    DATE_FORMAT(received_at, '%w')";
+
+            $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()) {
+                    $row['indice'] = $weekdays[ $row['indice'] ];
+                    $records[] = $row;
+                }
+
+                $result = [
+                    'status' => 'OK',
+                    'records' => $records,
+                ];
+            }
+        }
+
+        echo json_encode($result);
+
+        $stmt->close();
+        $mysqli->close();
+    break;
+
 
     case 'get-devices-by-vendor':
         // Vendor cache