Reimpostazione menu e impostazione pagina orari

gui/index.php

@@ -2,13 +2,13 @@
 include('parts/header.php');
 ?>
 
-          <!-- Page Heading -->
+<!-- Page Heading -->
-          <div class="d-sm-flex align-items-center justify-content-between mb-4">
+<div class="d-sm-flex align-items-center justify-content-between mb-4">
   <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
-          </div>
+</div>
 
-          <!-- Content Row -->
+<!-- Content Row -->
-          <div class="row">
+<div class="row">
 
   <!-- Dispositivi online -->
   <div class="col-xl-3 col-md-6 mb-4">
@@ -27,11 +27,11 @@ include('parts/header.php');
     </div>
   </div>
 
-          </div>
+</div>
 
-          <!-- Content Row -->
+<!-- Content Row -->
 
-          <div class="row">
+<div class="row">
 
   <!-- Lista dispositivi -->
   <div class="col-lg-9">
@@ -103,7 +103,38 @@ include('parts/header.php');
 
     </div>
   </div>
-          </div>
+</div>
+
+<script>
+  $('#menu-dashboard').addClass('active');
+  
+  
+  // Intervallo in secondi fra ogni lettura dati
+  var interval = 5;
+
+  // Timeout per indicare che un dispositivo era online
+  var timeout_online_check = 30;
+
+  // Prime lettura
+  leggi_devices(60);
+  online_devices(timeout_online_check);
+
+  // Lettura dispositivi ogni X secondi
+  setInterval(
+      function(){
+          leggi_devices(interval);
+      },
+      interval*1000
+  );
+
+  // Lettura numero di dispositivi ogni 30 secondi
+  setInterval(
+      function(){
+          online_devices(timeout_online_check);
+      },
+      interval*1000
+  );
+</script>
 
 <?php
 include('parts/footer.php');

gui/js/wifi-probe-aggregator.js

@@ -1,31 +1,3 @@
-$(document).ready( function(){
-    // Intervallo in secondi fra ogni lettura dati
-    var interval = 5;
-
-    // Timeout per indicare che un dispositivo era online
-    var timeout_online_check = 30;
-
-    // Prime lettura
-    leggi_devices(60);
-    online_devices(timeout_online_check);
-
-    // Lettura dispositivi ogni X secondi
-    setInterval(
-        function(){
-            leggi_devices(interval);
-        },
-        interval*1000
-    );
-
-    // Lettura numero di dispositivi ogni 30 secondi
-    setInterval(
-        function(){
-            online_devices(timeout_online_check);
-        },
-        interval*1000
-    );
-});
-
 function leggi_devices(interval){
     var date_start = moment().subtract(interval, 'seconds').format('YYYY-MM-DD H:mm:ss');
     var date_end = moment().format('YYYY-MM-DD H:mm:ss');
@@ -90,3 +62,28 @@ function online_devices(interval){
         }
     }, 'json');
 }
+
+function number_format(number, decimals, dec_point, thousands_sep) {
+    // *     example: number_format(1234.56, 2, ',', ' ');
+    // *     return: '1 234,56'
+    number = (number + '').replace(',', '').replace(' ', '');
+    var n = !isFinite(+number) ? 0 : +number,
+      prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
+      sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
+      dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
+      s = '',
+      toFixedFix = function(n, prec) {
+        var k = Math.pow(10, prec);
+        return '' + Math.round(n * k) / k;
+      };
+    // Fix for IE parseFloat(0.55).toFixed(0) = 0;
+    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
+    if (s[0].length > 3) {
+      s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
+    }
+    if ((s[1] || '').length < prec) {
+      s[1] = s[1] || '';
+      s[1] += new Array(prec - s[1].length + 1).join('0');
+    }
+    return s.join(dec);
+}

gui/orari.php

@@ -0,0 +1,125 @@
+<?php
+include('parts/header.php');
+?>
+
+<!-- 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>
+
+
+<!-- Content Row -->
+
+<div class="row">
+
+  <!-- Lista dispositivi -->
+  <div class="col-lg-9">
+    <div class="card shadow mb-4">
+        <div class="card-header py-3">
+          <h6 class="m-0 font-weight-bold text-primary">Dispositivi per orario</h6>
+        </div>
+        <div class="card-body">
+          <div class="chart-bar">
+            <canvas id="chart-giorni"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<script>
+  $('#menu-orari').addClass('active');
+
+  Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+  Chart.defaults.global.defaultFontColor = '#858796';
+
+  
+
+  // Bar Chart Example
+  var ctx = document.getElementById("chart-giorni");
+  var myBarChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: ["January", "February", "March", "April", "May", "June"],
+      datasets: [{
+        label: "Revenue",
+        backgroundColor: "#4e73df",
+        hoverBackgroundColor: "#2e59d9",
+        borderColor: "#4e73df",
+        data: [4215, 5312, 6251, 7841, 9821, 14984],
+      }],
+    },
+    options: {
+      maintainAspectRatio: false,
+      layout: {
+        padding: {
+          left: 10,
+          right: 25,
+          top: 25,
+          bottom: 0
+        }
+      },
+      scales: {
+        xAxes: [{
+          time: {
+            unit: 'month'
+          },
+          gridLines: {
+            display: false,
+            drawBorder: false
+          },
+          ticks: {
+            maxTicksLimit: 6
+          },
+          maxBarThickness: 25,
+        }],
+        yAxes: [{
+          ticks: {
+            min: 0,
+            max: 15000,
+            maxTicksLimit: 5,
+            padding: 10,
+            // Include a dollar sign in the ticks
+            callback: function(value, index, values) {
+              return '$' + number_format(value);
+            }
+          },
+          gridLines: {
+            color: "rgb(234, 236, 244)",
+            zeroLineColor: "rgb(234, 236, 244)",
+            drawBorder: false,
+            borderDash: [2],
+            zeroLineBorderDash: [2]
+          }
+        }],
+      },
+      legend: {
+        display: false
+      },
+      tooltips: {
+        titleMarginBottom: 10,
+        titleFontColor: '#6e707e',
+        titleFontSize: 14,
+        backgroundColor: "rgb(255,255,255)",
+        bodyFontColor: "#858796",
+        borderColor: '#dddfeb',
+        borderWidth: 1,
+        xPadding: 15,
+        yPadding: 15,
+        displayColors: false,
+        caretPadding: 10,
+        callbacks: {
+          label: function(tooltipItem, chart) {
+            var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
+            return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
+          }
+        }
+      },
+    }
+  });
+</script>
+
+<?php
+include('parts/footer.php');

gui/parts/footer.php

@@ -44,28 +44,6 @@
       </div>
     </div>
   </div>
-
-  <!-- Bootstrap core JavaScript-->
-  <script src="vendor/jquery/jquery.min.js"></script>
-  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-
-  <!-- Core plugin JavaScript-->
-  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
-
-  <!-- Custom scripts for all pages-->
-  <script src="js/sb-admin-2.min.js"></script>
-
-  <!-- Page level plugins -->
-  <script src="vendor/chart.js/Chart.min.js"></script>
-
-  <script>
-    var reader_url = '<?php echo $config['reader_url']; ?>';
-  </script>
-
-  <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/wifi-probe-aggregator.js"></script>
 </body>
 
 </html>

gui/parts/header.php

@@ -17,6 +17,27 @@ $config = parse_ini_file('../config.ini');
   <!-- Custom styles for this template-->
   <link href="css/sb-admin-2.min.css" rel="stylesheet">
 
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+  <script>
+    var reader_url = '<?php echo $config['reader_url']; ?>';
+  </script>
+
+  <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/wifi-probe-aggregator.js"></script>
+
+  <!-- Page level plugins -->
+  <script src="vendor/chart.js/Chart.min.js"></script>
 </head>
 
 <body id="page-top">
@@ -28,7 +49,7 @@ $config = parse_ini_file('../config.ini');
     <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
 
       <!-- Sidebar - Brand -->
-      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
+      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.php">
         <div class="sidebar-brand-icon rotate-n-15">
           <i class="fas fa-wifi"></i>
         </div>
@@ -39,8 +60,8 @@ $config = parse_ini_file('../config.ini');
       <hr class="sidebar-divider my-0">
 
       <!-- Nav Item - Dashboard -->
-      <li class="nav-item active">
+      <li class="nav-item" id="menu-dashboard">
-        <a class="nav-link" href="index.html">
+        <a class="nav-link" href="index.php">
           <i class="fas fa-fw fa-tachometer-alt"></i>
           <span>Dashboard</span></a>
       </li>
@@ -53,21 +74,28 @@ $config = parse_ini_file('../config.ini');
         Cerca
       </div>
 
-      <li class="nav-item">
+      <li class="nav-item" id="menu-mappa">
         <a class="nav-link" href="#">
           <i class="fas fa-fw fa-map"></i>
           <span>Mappa</span>
         </a>
       </li>
 
-      <li class="nav-item">
+      <li class="nav-item" id="menu-orari">
+        <a class="nav-link" href="orari.php">
+          <i class="fas fa-fw fa-clock"></i>
+          <span>Orari</span>
+        </a>
+      </li>
+
+      <li class="nav-item" id="menu-luoghi">
         <a class="nav-link" href="#">
           <i class="fas fa-fw fa-marker"></i>
           <span>Luoghi</span>
         </a>
       </li>
 
-      <li class="nav-item">
+      <li class="nav-item" id="menu-ap">
         <a class="nav-link" href="#">
           <i class="fas fa-fw fa-signal"></i>
           <span>Access Point</span>