Aggiunto click su mac con dettagli
This commit is contained in:
parent
ac04aafb63
commit
bdf4f5b9e1
|
@ -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
|
||||
}
|
|
@ -1,3 +1,7 @@
|
|||
td.vendor-img > img{
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.clickable{
|
||||
cursor: pointer;
|
||||
}
|
|
@ -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">×</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');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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>
|
|
@ -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 -->
|
||||
|
|
122
ws/reader.php
122
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
|
||||
|
|
Loading…
Reference in New Issue