Pi.Alert 3.00
This commit is contained in:
pucherot
@@ -27,65 +27,67 @@
|
||||
<!-- top small box 1 ------------------------------------------------------- -->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-3 col-sm-6 col-xs-6">
|
||||
<div class="col-lg-2 col-sm-4 col-xs-6">
|
||||
<a href="#" onclick="javascript: getDevicesList('all');">
|
||||
<div class="small-box bg-aqua pa-small-box-aqua">
|
||||
|
||||
<div class="inner">
|
||||
<h4>Total Devices</h4>
|
||||
<h3 id="devicesAll"> -- </h3>
|
||||
</div>
|
||||
|
||||
<div class="icon"> <i class="fa fa-laptop"></i> </div>
|
||||
<div class="small-box-footer"> Details <i class="fa fa-arrow-circle-right"></i> </div>
|
||||
<div class="small-box bg-aqua pa-small-box-aqua pa-small-box-2">
|
||||
<div class="inner"> <h3 id="devicesAll"> -- </h3> </div>
|
||||
<div class="icon"> <i class="fa fa-laptop text-aqua-20"></i> </div>
|
||||
<div class="small-box-footer pa-small-box-footer"> All Devices <i class="fa fa-arrow-circle-right"></i> </div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- top small box 2 ------------------------------------------------------- -->
|
||||
<div class="col-lg-3 col-sm-6 col-xs-6">
|
||||
<div class="col-lg-2 col-sm-4 col-xs-6">
|
||||
<a href="#" onclick="javascript: getDevicesList('connected');">
|
||||
<div class="small-box bg-green pa-small-box-green">
|
||||
|
||||
<div class="inner">
|
||||
<h4>Connected</h4>
|
||||
<h3 id="devicesConnected"> -- </h3>
|
||||
</div>
|
||||
|
||||
<div class="icon"> <i class="fa fa-plug"></i> </div>
|
||||
<div class="small-box-footer"> Details <i class="fa fa-arrow-circle-right"></i> </div>
|
||||
<div class="small-box bg-green pa-small-box-green pa-small-box-2">
|
||||
<div class="inner"> <h3 id="devicesConnected"> -- </h3> </div>
|
||||
<div class="icon"> <i class="fa fa-plug text-green-20"></i> </div>
|
||||
<div class="small-box-footer pa-small-box-footer"> Connected <i class="fa fa-arrow-circle-right"></i> </div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- top small box 3 ------------------------------------------------------- -->
|
||||
<div class="col-lg-3 col-sm-6 col-xs-6">
|
||||
<a href="#" onclick="javascript: getDevicesList('new');">
|
||||
<div class="small-box bg-yellow pa-small-box-yellow">
|
||||
|
||||
<div class="inner">
|
||||
<h4>New Devices</h4>
|
||||
<h3 id="devicesNew"> -- </h3>
|
||||
</div>
|
||||
|
||||
<div class="icon"> <i class="ion ion-plus-round"></i> </div>
|
||||
<div class="small-box-footer"> Details <i class="fa fa-arrow-circle-right"></i> </div>
|
||||
<div class="col-lg-2 col-sm-4 col-xs-6">
|
||||
<a href="#" onclick="javascript: getDevicesList('favorites');">
|
||||
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
|
||||
<div class="inner"> <h3 id="devicesFavorites"> -- </h3> </div>
|
||||
<div class="icon"> <i class="fa fa-star text-yellow-20"></i> </div>
|
||||
<div class="small-box-footer pa-small-box-footer"> Favorites <i class="fa fa-arrow-circle-right"></i> </div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- top small box 4 ------------------------------------------------------- -->
|
||||
<div class="col-lg-3 col-sm-6 col-xs-6">
|
||||
<div class="col-lg-2 col-sm-4 col-xs-6">
|
||||
<a href="#" onclick="javascript: getDevicesList('new');">
|
||||
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
|
||||
<div class="inner"> <h3 id="devicesNew"> -- </h3> </div>
|
||||
<div class="icon"> <i class="ion ion-plus-round text-yellow-20"></i> </div>
|
||||
<div class="small-box-footer pa-small-box-footer"> New Devices <i class="fa fa-arrow-circle-right"></i> </div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- top small box 5 ------------------------------------------------------- -->
|
||||
<div class="col-lg-2 col-sm-4 col-xs-6">
|
||||
<a href="#" onclick="javascript: getDevicesList('down');">
|
||||
<div class="small-box bg-red pa-small-box-red">
|
||||
<div class="small-box bg-red pa-small-box-red pa-small-box-2">
|
||||
<div class="inner"> <h3 id="devicesDown"> -- </h3> </div>
|
||||
<div class="icon"> <i class="fa fa-warning text-red-20"></i> </div>
|
||||
<div class="small-box-footer pa-small-box-footer"> Down Alerts <i class="fa fa-arrow-circle-right"></i> </div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="inner">
|
||||
<h4>Down Alerts</h4>
|
||||
<h3 id="devicesDown"> -- </h3>
|
||||
</div>
|
||||
|
||||
<div class="icon"> <i class="fa fa-warning"></i> </div>
|
||||
<div class="small-box-footer"> Details <i class="fa fa-arrow-circle-right"></i> </div>
|
||||
<!-- top small box 6 ------------------------------------------------------- -->
|
||||
<div class="col-lg-2 col-sm-4 col-xs-6">
|
||||
<a href="#" onclick="javascript: getDevicesList('archived');">
|
||||
<div class="small-box bg-gray pa-small-box-gray pa-small-box-2">
|
||||
<div class="inner"> <h3 id="devicesArchived"> -- </h3> </div>
|
||||
<div class="icon"> <i class="fa fa-eye-slash text-gray-20"></i> </div>
|
||||
<div class="small-box-footer pa-small-box-footer"> Archived <i class="fa fa-arrow-circle-right"></i> </div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -110,15 +112,17 @@
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Owner</th>
|
||||
<th>Device type</th>
|
||||
<th>Type</th>
|
||||
<th>Favorite</th>
|
||||
<th>Group</th>
|
||||
<th>First Session</th>
|
||||
<th>Last Session</th>
|
||||
<th>Last IP</th>
|
||||
<th>MAC</th>
|
||||
<th>Status</th>
|
||||
<th>MAC</th>
|
||||
<th>Last IP Order</th>
|
||||
<th>Rowid</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
@@ -187,8 +191,8 @@ function main () {
|
||||
// query data
|
||||
getDevicesTotals();
|
||||
getDevicesList (deviceStatus);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
@@ -209,15 +213,16 @@ function initializeDatatable () {
|
||||
// 'order' : [[3,'desc'], [0,'asc']],
|
||||
|
||||
'columnDefs' : [
|
||||
{visible: false, targets: [9, 10] },
|
||||
{className: 'text-center', targets: [3, 8] },
|
||||
{width: '0px', targets: 8 },
|
||||
{orderData: [10], targets: 7 },
|
||||
{visible: false, targets: [10, 11, 12] },
|
||||
{className: 'text-center', targets: [3, 8, 9] },
|
||||
{width: '80px', targets: [5, 6] },
|
||||
{width: '0px', targets: 9 },
|
||||
{orderData: [11], targets: 7 },
|
||||
|
||||
// Device Name
|
||||
{targets: [0],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
$(td).html ('<b><a href="deviceDetails.php?mac='+ rowData[9] +'" class="">'+ cellData +'</a></b>');
|
||||
$(td).html ('<b><a href="deviceDetails.php?mac='+ rowData[10] +'" class="">'+ cellData +'</a></b>');
|
||||
} },
|
||||
|
||||
// Favorite
|
||||
@@ -236,18 +241,29 @@ function initializeDatatable () {
|
||||
$(td).html (translateHTMLcodes (cellData));
|
||||
} },
|
||||
|
||||
// Status color
|
||||
// Random MAC
|
||||
{targets: [8],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
if (cellData == 1){
|
||||
$(td).html ('<i data-toggle="tooltip" data-placement="right" title="Random MAC" style="font-size: 16px;" class="text-yellow glyphicon glyphicon-random"></i>');
|
||||
} else {
|
||||
$(td).html ('');
|
||||
}
|
||||
} },
|
||||
|
||||
// Status color
|
||||
{targets: [9],
|
||||
'createdCell': function (td, cellData, rowData, row, col) {
|
||||
switch (cellData) {
|
||||
case 'Down': color='red'; break;
|
||||
case 'New': color='yellow'; break;
|
||||
case 'On-line': color='green'; break;
|
||||
case 'Off-line': color='gray text-white'; break;
|
||||
case 'Archived': color='gray text-white'; break;
|
||||
default: color='aqua'; break;
|
||||
};
|
||||
|
||||
$(td).html ('<a href="deviceDetails.php?mac='+ rowData[9] +'" class="badge bg-'+ color +'">'+ cellData +'</a>');
|
||||
$(td).html ('<a href="deviceDetails.php?mac='+ rowData[10] +'" class="badge bg-'+ color +'">'+ cellData +'</a>');
|
||||
} },
|
||||
],
|
||||
|
||||
@@ -259,13 +275,18 @@ function initializeDatatable () {
|
||||
}
|
||||
});
|
||||
|
||||
// Save Parameters rows & order when changed
|
||||
// Save cookie Rows displayed, and Parameters rows & order
|
||||
$('#tableDevices').on( 'length.dt', function ( e, settings, len ) {
|
||||
setParameter (parTableRows, len);
|
||||
} );
|
||||
|
||||
$('#tableDevices').on( 'order.dt', function () {
|
||||
setParameter (parTableOrder, JSON.stringify (table.order()) );
|
||||
setCookie ('devicesList',JSON.stringify (table.column(12, { 'search': 'applied' }).data().toArray()) );
|
||||
} );
|
||||
|
||||
$('#tableDevices').on( 'search.dt', function () {
|
||||
setCookie ('devicesList', JSON.stringify (table.column(12, { 'search': 'applied' }).data().toArray()) );
|
||||
} );
|
||||
};
|
||||
|
||||
@@ -281,8 +302,10 @@ function getDevicesTotals () {
|
||||
|
||||
$('#devicesAll').html (totalsDevices[0].toLocaleString());
|
||||
$('#devicesConnected').html (totalsDevices[1].toLocaleString());
|
||||
$('#devicesNew').html (totalsDevices[2].toLocaleString());
|
||||
$('#devicesDown').html (totalsDevices[3].toLocaleString());
|
||||
$('#devicesFavorites').html (totalsDevices[2].toLocaleString());
|
||||
$('#devicesNew').html (totalsDevices[3].toLocaleString());
|
||||
$('#devicesDown').html (totalsDevices[4].toLocaleString());
|
||||
$('#devicesArchived').html (totalsDevices[5].toLocaleString());
|
||||
|
||||
// Timer for refresh data
|
||||
newTimerRefreshData (getDevicesTotals);
|
||||
@@ -297,12 +320,13 @@ function getDevicesList (status) {
|
||||
|
||||
// Define color & title for the status selected
|
||||
switch (deviceStatus) {
|
||||
case 'all': tableTitle = 'Total Devices'; color = 'aqua'; break;
|
||||
case 'connected': tableTitle = 'Connected Devices'; color = 'green'; break;
|
||||
case 'new': tableTitle = 'New Devices'; color = 'yellow'; break;
|
||||
case 'down': tableTitle = 'Down Alerts'; color = 'red'; break;
|
||||
case 'favorites': tableTitle = 'Favorites'; color = 'yellow'; break;
|
||||
default: tableTitle = 'Devices'; boxClass = ''; break;
|
||||
case 'all': tableTitle = 'All Devices'; color = 'aqua'; break;
|
||||
case 'connected': tableTitle = 'Connected Devices'; color = 'green'; break;
|
||||
case 'favorites': tableTitle = 'Favorites'; color = 'yellow'; break;
|
||||
case 'new': tableTitle = 'New Devices'; color = 'yellow'; break;
|
||||
case 'down': tableTitle = 'Down Alerts'; color = 'red'; break;
|
||||
case 'archived': tableTitle = 'Archived Devices'; color = 'gray'; break;
|
||||
default: tableTitle = 'Devices'; color = 'gray'; break;
|
||||
}
|
||||
|
||||
// Set title and color
|
||||
|
||||
Reference in New Issue
Block a user