mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-08-14 02:26:58 -07:00
Template the Datatables JS
Add Links to user screen Add Public IP list to user screen Add Watch history to user screen
This commit is contained in:
Tim
parent
c4504d8be0
commit
6a026d510d
12 changed files with 536 additions and 335 deletions
|
|
@ -25,7 +25,7 @@
|
|||
<!-- <img src="interfaces/default/images/platforms/roku.png"> platform image -->
|
||||
</div>
|
||||
<div class="dashboard-activity-metadata-user">
|
||||
${a['user']} is ${a['state']}
|
||||
<a href="user?user=${a['user']}">${a['user']}</a> is ${a['state']}
|
||||
</div>
|
||||
<div class="dashboard-activity-metadata-title">
|
||||
% if a['type'] == 'episode':
|
||||
|
|
|
|||
|
|
@ -207,4 +207,14 @@ function getPlatformImagePath(platformName) {
|
|||
} else {
|
||||
return 'interfaces/default/images/platforms/default.png';
|
||||
}
|
||||
}
|
||||
|
||||
function isPrivateIP(ip_address) {
|
||||
var parts = ip_address.split('.');
|
||||
if (parts[0] === '10' ||
|
||||
(parts[0] === '172' && (parseInt(parts[1], 10) >= 16 && parseInt(parts[1], 10) <= 31)) ||
|
||||
(parts[0] === '192' && parts[1] === '168')) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ history_table_options = {
|
|||
"infoFiltered":"(filtered from _MAX_ total entries)",
|
||||
"emptyTable": "No data in table",
|
||||
},
|
||||
"stateSave": true,
|
||||
"stateSave": false,
|
||||
"sPaginationType": "bootstrap",
|
||||
"processing": false,
|
||||
"serverSide": true,
|
||||
|
|
@ -48,7 +48,14 @@ history_table_options = {
|
|||
},
|
||||
{
|
||||
"targets": [2],
|
||||
"data":"user"
|
||||
"data":"user",
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
if (cellData !== '') {
|
||||
$(td).html('<a href="user?user=' + cellData + '">' + cellData + '</a>');
|
||||
} else {
|
||||
$(td).html(cellData);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
"targets": [3],
|
||||
|
|
|
|||
41
data/interfaces/default/js/tables/logs.js
Normal file
41
data/interfaces/default/js/tables/logs.js
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
$('#log_table').dataTable( {
|
||||
"processing": false,
|
||||
"serverSide": true,
|
||||
"ajax": {
|
||||
"url": "getLog"
|
||||
},
|
||||
"sPaginationType": "bootstrap",
|
||||
"order": [ 0, 'desc'],
|
||||
"pageLength": 10,
|
||||
"stateSave": true,
|
||||
"language": {
|
||||
"search":"Search: ",
|
||||
"lengthMenu":"Show _MENU_ lines per page",
|
||||
"emptyTable": "No log information available",
|
||||
"info":"Showing _START_ to _END_ of _TOTAL_ lines",
|
||||
"infoEmpty":"Showing 0 to 0 of 0 lines",
|
||||
"infoFiltered":"(filtered from _MAX_ total lines)"},
|
||||
"columnDefs": [
|
||||
{
|
||||
"targets": [0],
|
||||
"width": "15%"
|
||||
},
|
||||
{
|
||||
"targets": [1],
|
||||
"width": "10%"
|
||||
},
|
||||
{
|
||||
"targets": [2],
|
||||
"width": "75%"
|
||||
}
|
||||
],
|
||||
"drawCallback": function (settings) {
|
||||
// Jump to top of page
|
||||
$('html,body').scrollTop(0);
|
||||
$('#ajaxMsg').addClass('success').fadeOut();
|
||||
},
|
||||
"preDrawCallback": function(settings) {
|
||||
$('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>Fetching rows...</div>");
|
||||
$('#ajaxMsg').addClass('success').fadeIn();
|
||||
}
|
||||
});
|
||||
105
data/interfaces/default/js/tables/user_ips.js
Normal file
105
data/interfaces/default/js/tables/user_ips.js
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
user_ip_table_options = {
|
||||
"destroy": true,
|
||||
"language": {
|
||||
"search": "Search: ",
|
||||
"lengthMenu":"Show _MENU_ entries per page",
|
||||
"info":"Showing _START_ to _END_ of _TOTAL_ results",
|
||||
"infoEmpty":"Showing 0 to 0 of 0 entries",
|
||||
"infoFiltered":"(filtered from _MAX_ total entries)",
|
||||
"emptyTable": "No data in table",
|
||||
},
|
||||
"stateSave": false,
|
||||
"sPaginationType": "bootstrap",
|
||||
"processing": false,
|
||||
"serverSide": true,
|
||||
"pageLength": 10,
|
||||
"order": [ 0, 'desc'],
|
||||
"autoWidth": false,
|
||||
"columnDefs": [
|
||||
{
|
||||
"targets": [0],
|
||||
"data":"last_seen",
|
||||
"render": function ( data, type, full ) {
|
||||
return moment(data, "X").fromNow();
|
||||
},
|
||||
"searchable": false,
|
||||
"width": "15%"
|
||||
},
|
||||
{
|
||||
"targets": [1],
|
||||
"data":"ip_address",
|
||||
"width": "15%",
|
||||
"className": "modal-control",
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
if (isPrivateIP(cellData)) {
|
||||
$(td).html(cellData);
|
||||
} else {
|
||||
$(td).html('<a href="#ip-info-modal" data-toggle="modal"><span data-toggle="ip-tooltip" data-placement="left" title="IP Address Info" id="ip-info"><i class="icon-map-marker icon-white"></i></span> ' + cellData +'</a>');
|
||||
}
|
||||
},
|
||||
"width": "15%"
|
||||
},
|
||||
{
|
||||
"targets": [2],
|
||||
"data":"play_count",
|
||||
"width": "10%"
|
||||
},
|
||||
{
|
||||
"targets": [3],
|
||||
"data":"platform",
|
||||
"width": "15%"
|
||||
},
|
||||
{
|
||||
"targets": [4],
|
||||
"data":"last_watched",
|
||||
"width": "30%"
|
||||
}
|
||||
],
|
||||
"drawCallback": function (settings) {
|
||||
// Jump to top of page
|
||||
// $('html,body').scrollTop(0);
|
||||
$('#ajaxMsg').addClass('success').fadeOut();
|
||||
},
|
||||
"preDrawCallback": function(settings) {
|
||||
$('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>Fetching rows...</div>");
|
||||
$('#ajaxMsg').addClass('success').fadeIn();
|
||||
}
|
||||
}
|
||||
|
||||
$('#user_ip_table').on('mouseenter', 'td.modal-control span', function () {
|
||||
$(this).tooltip();
|
||||
});
|
||||
|
||||
$('#user_ip_table').on('click', 'td.modal-control', function () {
|
||||
var tr = $(this).parents('tr');
|
||||
var row = user_ip_table.row( tr );
|
||||
var rowData = row.data();
|
||||
|
||||
function getUserLocation(ip_address) {
|
||||
if (isPrivateIP(ip_address)) {
|
||||
return "n/a"
|
||||
} else {
|
||||
$.ajax({
|
||||
url: 'http://ip-api.com/json/' + ip_address,
|
||||
cache: true,
|
||||
async: true,
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
$('#ip_address').html(ip_address);
|
||||
$('#country').html(data.country);
|
||||
$('#city').html(data.city);
|
||||
$('#region').html(data.regionName);
|
||||
$('#timezone').html(data.timezone);
|
||||
$('#lat').html(data.lat);
|
||||
$('#lon').html(data.lon);
|
||||
$('#isp').html(data.isp);
|
||||
$('#org').html(data.org);
|
||||
$('#as').html(data.as);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getUserLocation(rowData['ip_address']);
|
||||
});
|
||||
77
data/interfaces/default/js/tables/users.js
Normal file
77
data/interfaces/default/js/tables/users.js
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
users_list_table_options = {
|
||||
"language": {
|
||||
"search": "Search: ",
|
||||
"lengthMenu":"Show _MENU_ entries per page",
|
||||
"info":"Showing _START_ to _END_ of _TOTAL_ active users",
|
||||
"infoEmpty":"Showing 0 to 0 of 0 entries",
|
||||
"infoFiltered":"",
|
||||
"emptyTable": "No data in table",
|
||||
},
|
||||
"destroy": true,
|
||||
"processing": false,
|
||||
"serverSide": true,
|
||||
"pageLength": 10,
|
||||
"order": [ 0, 'asc'],
|
||||
"ajax": {
|
||||
"url": "get_user_list"
|
||||
},
|
||||
"bLengthChange": true,
|
||||
"bInfo": true,
|
||||
"bAutoWidth": true,
|
||||
"aaSorting": [[ 0, "asc" ]],
|
||||
"bStateSave": true,
|
||||
"bSortClasses": true,
|
||||
"sPaginationType": "bootstrap",
|
||||
"columnDefs": [
|
||||
{
|
||||
"targets": [0],
|
||||
"data": null,
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
//if (rowData['user_thumb'] === '') {
|
||||
$(td).html('<img src="interfaces/default/images/gravatar-default-80x80.png" alt="User Logo"/>');
|
||||
//} else {
|
||||
// $(td).html('<img src="' + rowData['user_thumb'] + '" alt="User Logo"/>');
|
||||
//}
|
||||
},
|
||||
"orderable": false,
|
||||
"className": "users-poster-face",
|
||||
"width": "40px"
|
||||
},
|
||||
{
|
||||
"targets": [1],
|
||||
"data": "user",
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
if (cellData !== '') {
|
||||
$(td).html('<a href="user?user=' + cellData + '">' + cellData + '</a>');
|
||||
} else {
|
||||
$(td).html(cellData);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
"targets": [2],
|
||||
"data": "time",
|
||||
"render": function ( data, type, full ) {
|
||||
return moment(data, "X").fromNow();
|
||||
}
|
||||
},
|
||||
{
|
||||
"targets": [3],
|
||||
"data": "ip_address",
|
||||
"searchable": false
|
||||
},
|
||||
{
|
||||
"targets": [4],
|
||||
"data": "plays"
|
||||
}
|
||||
],
|
||||
"drawCallback": function (settings) {
|
||||
// Jump to top of page
|
||||
$('html,body').scrollTop(0);
|
||||
$('#ajaxMsg').addClass('success').fadeOut();
|
||||
},
|
||||
"preDrawCallback": function(settings) {
|
||||
$('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>Fetching rows...</div>");
|
||||
$('#ajaxMsg').addClass('success').fadeIn();
|
||||
}
|
||||
}
|
||||
|
|
@ -24,7 +24,12 @@
|
|||
<div class="span12">
|
||||
<div class="wellheader-bg">
|
||||
<div class="dashboard-wellheader-no-chevron">
|
||||
<h2><i class="fa fa-book"></i> Logs</h2>
|
||||
<div class="span9"><h2><i class="fa fa-book"></i> Logs</h2></div>
|
||||
<div class="span3">
|
||||
<div class="pull-right">
|
||||
<h5><a id="menu_link_edit" href="clearLogs"><i class="fa fa-trash-o"></i> Clear log</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -68,69 +73,23 @@
|
|||
<%def name="javascriptIncludes()">
|
||||
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
|
||||
<script src="interfaces/default/js/jquery.dataTables.bootstrap.pagination.integration.js"></script>
|
||||
|
||||
<script src="interfaces/default/js/tables/logs.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$('#log_table').dataTable( {
|
||||
"processing": false,
|
||||
"serverSide": true,
|
||||
"ajax": {
|
||||
"url": "getLog"
|
||||
},
|
||||
"sPaginationType": "bootstrap",
|
||||
"order": [ 0, 'desc'],
|
||||
"pageLength": 10,
|
||||
"stateSave": true,
|
||||
"language": {
|
||||
"search":"Search: ",
|
||||
"lengthMenu":"Show _MENU_ lines per page",
|
||||
"emptyTable": "No log information available",
|
||||
"info":"Showing _START_ to _END_ of _TOTAL_ lines",
|
||||
"infoEmpty":"Showing 0 to 0 of 0 lines",
|
||||
"infoFiltered":"(filtered from _MAX_ total lines)"},
|
||||
"columnDefs": [
|
||||
{
|
||||
"targets": [0],
|
||||
"width": "15%"
|
||||
},
|
||||
{
|
||||
"targets": [1],
|
||||
"width": "10%"
|
||||
},
|
||||
{
|
||||
"targets": [2],
|
||||
"width": "75%"
|
||||
}
|
||||
],
|
||||
"drawCallback": function (settings) {
|
||||
// Jump to top of page
|
||||
$('html,body').scrollTop(0);
|
||||
$('#ajaxMsg').addClass('success').fadeOut();
|
||||
},
|
||||
"preDrawCallback": function(settings) {
|
||||
$('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>Fetching rows...</div>");
|
||||
$('#ajaxMsg').addClass('success').fadeIn();
|
||||
var timer;
|
||||
function setRefresh()
|
||||
{
|
||||
refreshrate = document.getElementById('refreshrate');
|
||||
if(refreshrate != null)
|
||||
{
|
||||
if(timer)
|
||||
{
|
||||
clearInterval(timer);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
var timer;
|
||||
function setRefresh()
|
||||
{
|
||||
refreshrate = document.getElementById('refreshrate');
|
||||
if(refreshrate != null)
|
||||
{
|
||||
if(timer)
|
||||
{
|
||||
clearInterval(timer);
|
||||
}
|
||||
if(refreshrate.value != 0)
|
||||
{
|
||||
timer = setInterval("$('#log_table').dataTable().fnDraw()",1000*refreshrate.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
if(refreshrate.value != 0)
|
||||
{
|
||||
timer = setInterval("$('#log_table').dataTable().fnDraw()",1000*refreshrate.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</%def>
|
||||
|
|
|
|||
|
|
@ -7,218 +7,214 @@
|
|||
<link rel="stylesheet" href="interfaces/default/css/plexwatch-tables.css">
|
||||
</%def>
|
||||
|
||||
<%def name="body()">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="user-info-wrapper">
|
||||
<div class="user-info-poster-face">
|
||||
<img src="interfaces/default/images/gravatar-default-80x80.png">
|
||||
</div>
|
||||
<div class="user-info-username">
|
||||
Username
|
||||
</div>
|
||||
<div class="user-info-nav">
|
||||
<ul class="user-info-nav">
|
||||
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
|
||||
<li><a id="ip-tab-btn" href="#userAddresses" data-toggle="tab">IP Addresses</a></li>
|
||||
<li><a href="#userHistory" data-toggle="tab">History</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="profile">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="wellbg">
|
||||
<div class="wellheader">
|
||||
<div class="dashboard-wellheader">
|
||||
<h3>Global Stats</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="user-time-stats" class="user-overview-stats-wrapper">
|
||||
<div id="user-stats-spinner" class="spinner"></div>
|
||||
</div>
|
||||
% if user != None:
|
||||
<%def name="body()">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="user-info-wrapper">
|
||||
<div class="user-info-poster-face">
|
||||
<img src="interfaces/default/images/gravatar-default-80x80.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="wellbg">
|
||||
<div class="wellheader">
|
||||
<div class="dashboard-wellheader">
|
||||
<h3>Platform Stats</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="user-platform-stats" class="user-platforms">
|
||||
<div id="user-platform-spinner" class="spinner"></div>
|
||||
</div>
|
||||
<div class="user-info-username">
|
||||
${user}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="wellbg">
|
||||
<div class="wellheader">
|
||||
<div class="dashboard-wellheader">
|
||||
<h3>Recently watched</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="user-recently-watched" class="dashboard-recent-media-row">
|
||||
<div id="user-watched-spinner" class="spinner"></div>
|
||||
</div>
|
||||
<div class="user-info-nav">
|
||||
<ul class="user-info-nav">
|
||||
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
|
||||
<li><a id="ip-tab-btn" href="#userAddresses" data-toggle="tab">IP Addresses</a></li>
|
||||
<li><a href="#userHistory" data-toggle="tab">History</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="userAddresses">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="wellbg">
|
||||
<div class="wellheader">
|
||||
<div class="dashboard-wellheader">
|
||||
<h3>Public IP Addresses for <strong>
|
||||
Username
|
||||
</strong></h3>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="profile">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="wellbg">
|
||||
<div class="wellheader">
|
||||
<div class="dashboard-wellheader">
|
||||
<h3>Global Stats</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="user-time-stats" class="user-overview-stats-wrapper">
|
||||
<div id="user-stats-spinner" class="spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="wellbg">
|
||||
<div class="wellheader">
|
||||
<div class="dashboard-wellheader">
|
||||
<h3>Platform Stats</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="user-platform-stats" class="user-platforms">
|
||||
<div id="user-platform-spinner" class="spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="wellbg">
|
||||
<div class="wellheader">
|
||||
<div class="dashboard-wellheader">
|
||||
<h3>Recently watched</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="user-recently-watched" class="dashboard-recent-media-row">
|
||||
<div id="user-watched-spinner" class="spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<table id="tableUserIpAddresses" class="display" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left"><i class="fa fa-sort"></i> Last seen</th>
|
||||
<th align="left"><i class="fa fa-sort"></i> IP Address</th>
|
||||
<th align="left"><i class="fa fa-sort"></i> Play Count</th>
|
||||
<th align="left"><i class="fa fa-sort"></i> Platform (Last Seen)</th>
|
||||
<th align="left"><i class="fa fa-sort"></i> Location</th>
|
||||
<th align="left"><i class="fa fa-sort"></i> Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="userHistory">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="wellbg">
|
||||
<div class="wellheader">
|
||||
<div class="dashboard-wellheader">
|
||||
<h3>Watching History for <strong>
|
||||
Username
|
||||
</strong></h3>
|
||||
<div class="tab-pane" id="userAddresses">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="wellbg">
|
||||
<div class="wellheader">
|
||||
<div class="dashboard-wellheader">
|
||||
<h3>Public IP Addresses for <strong>
|
||||
${user}
|
||||
</strong></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="display" id="history_table" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th align='left' id="id"><i class='fa fa-sort'></i> ID</th>
|
||||
<th align='left' id="date"><i class='fa fa-sort'></i> Time</th>
|
||||
<th align='left' id="user"><i class='fa fa-sort'></i> User</th>
|
||||
<th align='left' id="platform"><i class='fa fa-sort'></i> Platform</th>
|
||||
<th align='left' id="ip_address"><i class='fa fa-sort'></i> IP Address</th>
|
||||
<th align='left' id="title"><i class='fa fa-sort'></i> Title</th>
|
||||
<th align='left' id="started"><i class='fa fa-sort'></i> Started</th>
|
||||
<th align='left' id="paused_counter"><i class='fa fa-sort'></i> Paused</th>
|
||||
<th align='left' id="stopped"><i class='fa fa-sort'></i> Stopped</th>
|
||||
<th align='left' id="duration"><i class='fa fa-sort'></i> Duration</th>
|
||||
<th align='left' id="percent_complete"> Completed</th>
|
||||
<th align='left' id="rating_key"> RatingKey</th>
|
||||
<th align='left' id="xml"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="info-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="info-modal" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
|
||||
<h3 id="myModalLabel">Stream Info: <strong><span id="modal-stream-info"></span></strong></h3>
|
||||
</div>
|
||||
<div class="modal-body" id="modal-text">
|
||||
<div class="span4">
|
||||
<h4>Stream Details</h4>
|
||||
<table id="user_ip_table" class="display" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="left"><i class="fa fa-sort"></i> Last seen</th>
|
||||
<th align="left"><i class="fa fa-sort"></i> IP Address</th>
|
||||
<th align="left"><i class="fa fa-sort"></i> Play Count</th>
|
||||
<th align="left"><i class="fa fa-sort"></i> Platform (Last Seen)</th>
|
||||
<th align="left"> Last Watched</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<div id="ip-info-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="ip-info-modal" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
|
||||
<h3 id="myModalLabel">IP Address: <strong><span id="ip_address"></span></strong></h3>
|
||||
</div>
|
||||
<div class="modal-body" id="modal-text">
|
||||
<div class="span6">
|
||||
<h4>Location Details</h4>
|
||||
<ul>
|
||||
<h5>Video</h5>
|
||||
<li>Stream Type: <strong><span id="transcode_video_dec"></span></strong></li>
|
||||
<li>Video Resolution: <strong><span id="transcode_video_resolution"></span>p</strong></li>
|
||||
<li>Video Codec: <strong><span id="transcode_video_codec"></span></strong></li>
|
||||
<li>Video Width: <strong><span id="transcode_video_width"></span></strong></li>
|
||||
<li>Video Height: <strong><span id="transcode_video_height"></span></strong></li>
|
||||
<li>Country: <strong><span id="country"></span></strong></li>
|
||||
<li>City: <strong><span id="city"></span></strong></li>
|
||||
<li>Region: <strong><span id="region"></span></strong></li>
|
||||
<li>Timezone: <strong><span id="timezone"></span></strong></li>
|
||||
<li>Latitude: <strong><span id="lat"></span></strong></li>
|
||||
<li>Longitude: <strong><span id="lon"></span></strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h4>Connection Details</h4>
|
||||
<ul>
|
||||
<h5>Audio</h5>
|
||||
<li>Stream Type: <strong><span id="transcode_audio_dec"></span></strong></li>
|
||||
<li>Audio Codec: <strong><span id="transcode_audio_codec"></span></strong></li>
|
||||
<li>Audio Channels: <strong><span id="transcode_audio_channels"></span></strong></li>
|
||||
<li>ISP: <strong><span id="isp"></span></strong></li>
|
||||
<li>Organization: <strong><span id="org"></span></strong></li>
|
||||
<li>AS: <strong><span id="as"></span></strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>Media Source Details</h4>
|
||||
<li>Container: <strong><span id="media_container"></span></strong></li>
|
||||
<li>Resolution: <strong><span id="media_resolution"></span>p</strong></li>
|
||||
<li>Bitrate: <strong><span id="media_bitrate"></span> kbps</strong></li>
|
||||
<div class="modal-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="userHistory">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="wellbg">
|
||||
<div class="wellheader">
|
||||
<div class="dashboard-wellheader">
|
||||
<h3>Watch History for <strong>
|
||||
${user}
|
||||
</strong></h3>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>Video Source Details</h4>
|
||||
<ul>
|
||||
<li>Width: <strong><span id="video_width"></span></strong></li>
|
||||
<li>Height: <strong><span id="video_height"></span></strong></li>
|
||||
<li>Aspect Ratio: <strong><span id="video_aspect"></span></strong></li>
|
||||
<li>Video Frame Rate: <strong><span id="video_framerate"></span></strong></li>
|
||||
<li>Video Codec: <strong><span id="video_codec"></span></strong></li>
|
||||
</ul>
|
||||
<ul></ul>
|
||||
<h4>Audio Source Details</h4>
|
||||
<ul>
|
||||
<li>Audio Codec: <strong><span id="audio_codec"></span></strong></li>
|
||||
<li>Audio Channels: <strong><span id="audio_channels"></span></strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="display" id="history_table" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th align='left' id="id"><i class='fa fa-sort'></i> ID</th>
|
||||
<th align='left' id="date"><i class='fa fa-sort'></i> Time</th>
|
||||
<th align='left' id="user"><i class='fa fa-sort'></i> User</th>
|
||||
<th align='left' id="platform"><i class='fa fa-sort'></i> Platform</th>
|
||||
<th align='left' id="ip_address"><i class='fa fa-sort'></i> IP Address</th>
|
||||
<th align='left' id="title"><i class='fa fa-sort'></i> Title</th>
|
||||
<th align='left' id="started"><i class='fa fa-sort'></i> Started</th>
|
||||
<th align='left' id="paused_counter"><i class='fa fa-sort'></i> Paused</th>
|
||||
<th align='left' id="stopped"><i class='fa fa-sort'></i> Stopped</th>
|
||||
<th align='left' id="duration"><i class='fa fa-sort'></i> Duration</th>
|
||||
<th align='left' id="percent_complete"> Completed</th>
|
||||
<th align='left' id="rating_key"> RatingKey</th>
|
||||
<th align='left' id="xml"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="info-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="info-modal" aria-hidden="true">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer></footer>
|
||||
</%def>
|
||||
<footer></footer>
|
||||
</%def>
|
||||
|
||||
<%def name="javascriptIncludes()">
|
||||
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
|
||||
<script src="interfaces/default/js/jquery.dataTables.bootstrap.pagination.integration.js"></script>
|
||||
<script src="interfaces/default/js/moment-with-locale.js"></script>
|
||||
|
||||
<script src="interfaces/default/js/tables/history_table.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
history_table_options.ajax = {
|
||||
"url": "get_history",
|
||||
"data": function(d) {
|
||||
d.user = "drzoidberg33";
|
||||
<%def name="javascriptIncludes()">
|
||||
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
|
||||
<script src="interfaces/default/js/jquery.dataTables.bootstrap.pagination.integration.js"></script>
|
||||
<script src="interfaces/default/js/moment-with-locale.js"></script>
|
||||
<script src="interfaces/default/js/tables/history_table.js"></script>
|
||||
<script src="interfaces/default/js/tables/user_ips.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
history_table_options.ajax = {
|
||||
"url": "get_history",
|
||||
"data": function(d) {
|
||||
d.user = "${user}";
|
||||
}
|
||||
}
|
||||
}
|
||||
history_table = $('#history_table').DataTable(history_table_options);
|
||||
history_table.column(2).visible(false); // Hide the title column
|
||||
|
||||
history_table = $('#history_table').DataTable(history_table_options);
|
||||
|
||||
// Hide the title column
|
||||
// history_table.column(5).visible(false);
|
||||
});
|
||||
</script>
|
||||
</%def>
|
||||
user_ip_table_options.ajax = {
|
||||
"url": "get_user_ips",
|
||||
"data": function(d) {
|
||||
d.user = "${user}";
|
||||
}
|
||||
}
|
||||
user_ip_table = $('#user_ip_table').DataTable(user_ip_table_options);
|
||||
});
|
||||
</script>
|
||||
</%def>
|
||||
% else:
|
||||
<div class="clear"></div>
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span10 offset1">
|
||||
<h3>Error retrieving user information. Please see the logs for more details.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
% endif
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<div class='row-fluid'>
|
||||
<div class='span12'>
|
||||
<div class='wellbg'>
|
||||
<table id="usersTable" class="display" width="100%">
|
||||
<table id="users_list_table" class="display" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="right" id="avatar"></th>
|
||||
|
|
@ -48,79 +48,8 @@
|
|||
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
|
||||
<script src="interfaces/default/js/jquery.dataTables.bootstrap.pagination.integration.js"></script>
|
||||
<script src="interfaces/default/js/moment-with-locale.js"></script>
|
||||
|
||||
<script src="interfaces/default/js/tables/users.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
var oTable = $('#usersTable').dataTable({
|
||||
"language": {
|
||||
"search": "Search: ",
|
||||
"lengthMenu":"Show _MENU_ entries per page",
|
||||
"info":"Showing _START_ to _END_ of _TOTAL_ active users",
|
||||
"infoEmpty":"Showing 0 to 0 of 0 entries",
|
||||
"infoFiltered":"",
|
||||
"emptyTable": "No data in table",
|
||||
},
|
||||
"destroy": true,
|
||||
"processing": false,
|
||||
"serverSide": true,
|
||||
"pageLength": 10,
|
||||
"order": [ 0, 'asc'],
|
||||
"ajax": {
|
||||
"url": "get_user_list"
|
||||
},
|
||||
"bLengthChange": true,
|
||||
"bInfo": true,
|
||||
"bAutoWidth": true,
|
||||
"aaSorting": [[ 0, "asc" ]],
|
||||
"bStateSave": true,
|
||||
"bSortClasses": true,
|
||||
"sPaginationType": "bootstrap",
|
||||
"columnDefs": [
|
||||
{
|
||||
"targets": [0],
|
||||
"data": null,
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
//if (rowData['user_thumb'] === '') {
|
||||
$(td).html('<img src="interfaces/default/images/gravatar-default-80x80.png" alt="User Logo"/>');
|
||||
//} else {
|
||||
// $(td).html('<img src="' + rowData['user_thumb'] + '" alt="User Logo"/>');
|
||||
//}
|
||||
},
|
||||
"orderable": false,
|
||||
"className": "users-poster-face",
|
||||
"width": "40px"
|
||||
},
|
||||
{
|
||||
"targets": [1],
|
||||
"data": "user"
|
||||
},
|
||||
{
|
||||
"targets": [2],
|
||||
"data": "time",
|
||||
"render": function ( data, type, full ) {
|
||||
return moment(data, "X").fromNow();
|
||||
}
|
||||
},
|
||||
{
|
||||
"targets": [3],
|
||||
"data": "ip_address",
|
||||
"searchable": false
|
||||
},
|
||||
{
|
||||
"targets": [4],
|
||||
"data": "plays"
|
||||
}
|
||||
],
|
||||
"drawCallback": function (settings) {
|
||||
// Jump to top of page
|
||||
$('html,body').scrollTop(0);
|
||||
$('#ajaxMsg').addClass('success').fadeOut();
|
||||
},
|
||||
"preDrawCallback": function(settings) {
|
||||
$('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>Fetching rows...</div>");
|
||||
$('#ajaxMsg').addClass('success').fadeIn();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
var users_list_table = $('#users_list_table').DataTable(users_list_table_options);
|
||||
</script>
|
||||
</%def>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue