Aggiunto click su mac con dettagli

This commit is contained in:
loviuz 2020-08-15 13:25:07 +02:00
parent ac04aafb63
commit bdf4f5b9e1
9 changed files with 261 additions and 26 deletions

54
gui/ajax.php Normal file
View File

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

View File

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

51
gui/js/util.js Normal file
View File

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

View File

@ -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 ) {
$.post( reader_url, { op: resource }, function(response){
function drawBarChart( id, resource, mac ) {
$.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;
}
}
},

16
gui/lib/util.php Normal file
View File

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

View File

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

View File

@ -25,25 +25,7 @@
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<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>
<div id="modals"></div>
</body>
</html>

View File

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

View File

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