mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-07-30 11:38:36 -07:00
c02b7a0079
Allow IP address info modal on history page. Some minor styling changes to improve layout of settings on mobile.
337 lines
No EOL
14 KiB
HTML
337 lines
No EOL
14 KiB
HTML
<%doc>
|
|
USAGE DOCUMENTATION :: PLEASE LEAVE THIS AT THE TOP OF THIS FILE
|
|
|
|
For Mako templating syntax documentation please visit: http://docs.makotemplates.org/en/latest/
|
|
|
|
Filename: user.html
|
|
Version: 0.1
|
|
Variable names: data [list]
|
|
|
|
data :: Usable parameters
|
|
|
|
user_id Returns the user id of the user.
|
|
username Returns the user's username.
|
|
friendly_name Returns the friendly name of the user.
|
|
email Returns the user's email address.
|
|
thumb Returns the thumbnail for the user.
|
|
is_home_user Returns bool value for whether the user is part of a Plex Home.
|
|
is_allow_sync Returns bool value for whether the user has sync rights.
|
|
is_restricted Returns bool value for whether the user account is restricted.
|
|
|
|
DOCUMENTATION :: END
|
|
|
|
</%doc>
|
|
|
|
<%inherit file="base.html"/>
|
|
<%!
|
|
from plexpy import helpers
|
|
%>
|
|
|
|
<%def name="headIncludes()">
|
|
<link rel="stylesheet" href="interfaces/default/css/dataTables.bootstrap.css">
|
|
<link rel="stylesheet" href="interfaces/default/css/dataTables.colVis.css">
|
|
<link rel="stylesheet" href="interfaces/default/css/plexpy-dataTables.css">
|
|
</%def>
|
|
|
|
% if user != None:
|
|
<%def name="body()">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="user-info-wrapper">
|
|
<div class="user-info-poster-face" id="user-gravatar">
|
|
<img src="${data['thumb']}" height="80px" width="80px">
|
|
</div>
|
|
<div class="user-info-username">
|
|
<span class="set-username">${data['friendly_name']}</span> <a href="#" data-toggle="modal" data-target="#edit-user-modal" id="toggle-edit-user-modal"><i class="fa fa-pencil"></i></a>
|
|
</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 id="history-tab-btn" href="#userHistory" data-toggle="tab">History</a></li>
|
|
<li><a id="sync-tab-btn" href="#userSyncItems" data-toggle="tab">Synced Items</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="edit-user-modal" class="modal fade" tabindex="-1" role="dialog"
|
|
aria-labelledby="edit-user-modal">
|
|
</div>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="profile">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="padded-header">
|
|
<h3>Global Stats</h3>
|
|
</div>
|
|
<div id="user-time-stats" class="user-overview-stats-wrapper">
|
|
<div class='muted'><i class="fa fa-refresh fa-spin"></i> Loading data...</div>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="padded-header">
|
|
<h3>Platform Stats</h3>
|
|
</div>
|
|
<div id="user-platform-stats" class="user-platforms">
|
|
<div class='muted'><i class="fa fa-refresh fa-spin"></i> Loading data...</div>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="padded-header">
|
|
<h3>Recently watched</h3>
|
|
</div>
|
|
<div id="user-recently-watched">
|
|
<div class='muted'><i class="fa fa-refresh fa-spin"></i> Loading data...</div>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="userAddresses">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="table-card-back">
|
|
<div class="header-bar">
|
|
<span>IP Addresses for <strong>
|
|
<span class="set-username">${data['friendly_name']}</span>
|
|
</strong></span>
|
|
</div>
|
|
</div>
|
|
<div class="table-card-back">
|
|
<table id="user_ip_table" class="display" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th align="left">Last seen</th>
|
|
<th align="left">IP Address</th>
|
|
<th align="left">Play Count</th>
|
|
<th align="left">Platform (Last Seen)</th>
|
|
<th align="left">Last Watched</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
<div id="ip-info-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="ip-info-modal">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="userHistory">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class='table-card-back'>
|
|
<div class="header-bar">
|
|
<span>Watch History for <strong>
|
|
<span class="set-username">${data['friendly_name']}</span>
|
|
</strong></span>
|
|
</div>
|
|
<div class="colvis-button-bar hidden-xs" id="button-bar-history">
|
|
</div>
|
|
</div>
|
|
<div class="table-card-back">
|
|
<table class="display" id="history_table" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th align='left' id="time">Time</th>
|
|
<th align='left' id="friendly_name">User</th>
|
|
<th align='left' id="platform">Platform</th>
|
|
<th align='left' id="ip_address">IP Address</th>
|
|
<th align='left' id="title">Title</th>
|
|
<th align='left' id="started">Started</th>
|
|
<th align='left' id="paused_counter">Paused</th>
|
|
<th align='left' id="stopped">Stopped</th>
|
|
<th align='left' id="duration">Duration</th>
|
|
<th align='left' id="percent_complete"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="info-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="info-modal"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="userSyncItems">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class='table-card-back'>
|
|
<div class="header-bar">
|
|
<span>Synced Items for <strong>
|
|
<span class="set-username">${data['friendly_name']}</span>
|
|
</strong></span>
|
|
</div>
|
|
<div class="colvis-button-bar hidden-xs" id="button-bar-sync">
|
|
</div>
|
|
</div>
|
|
<div class="table-card-back">
|
|
<table class="display" id="sync_table" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th align='left' id="state">State</th>
|
|
<th align='left' id="username">Username</th>
|
|
<th align='left' id="sync_title">Title</th>
|
|
<th align='left' id="type">Type</th>
|
|
<th align='left' id="device">Device</th>
|
|
<th align='left' id="sync_platform">Platform</th>
|
|
<th align='left' id="size">Total Size</th>
|
|
<th align='left' id="items">Total Items</th>
|
|
<th align='left' id="converted">Converted</th>
|
|
<th align='left' id="downloaded">Downloaded</th>
|
|
<th align='left' id="sync_percent_complete">Complete</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer></footer>
|
|
</%def>
|
|
|
|
<%def name="javascriptIncludes()">
|
|
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
|
|
<script src="interfaces/default/js/dataTables.colVis.js"></script>
|
|
<script src="interfaces/default/js/dataTables.bootstrap.min.js"></script>
|
|
<script src="interfaces/default/js/dataTables.bootstrap.pagination.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 src="interfaces/default/js/tables/sync_table.js"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
% if data['user_id']:
|
|
var user_id = ${data['user_id']};
|
|
% else:
|
|
var user_id = null;
|
|
% endif
|
|
|
|
// Populate watch time stats
|
|
$.ajax({
|
|
url: 'get_user_watch_time_stats',
|
|
async: true,
|
|
data: { user_id: user_id, user: '${data['username']}' },
|
|
complete: function(xhr, status) {
|
|
$("#user-time-stats").html(xhr.responseText);
|
|
}
|
|
});
|
|
|
|
// Populate platform stats
|
|
$.ajax({
|
|
url: 'get_user_platform_stats',
|
|
async: true,
|
|
data: { user_id: user_id, user: '${data['username']}' },
|
|
complete: function(xhr, status) {
|
|
$("#user-platform-stats").html(xhr.responseText);
|
|
}
|
|
});
|
|
|
|
// Populate recently watched
|
|
$.ajax({
|
|
url: 'get_user_recently_watched',
|
|
async: true,
|
|
data: { user_id: user_id, user: '${data['username']}' },
|
|
complete: function(xhr, status) {
|
|
$("#user-recently-watched").html(xhr.responseText);
|
|
}
|
|
});
|
|
|
|
$( "#history-tab-btn" ).one( "click", function() {
|
|
// Build watch history table
|
|
history_table_options.ajax = {
|
|
"url": "get_history",
|
|
type: 'post',
|
|
data: function ( d ) {
|
|
return { 'json_data': JSON.stringify( d ),
|
|
'user_id': user_id,
|
|
'user': "${data['username']}"
|
|
};
|
|
}
|
|
}
|
|
history_table = $('#history_table').DataTable(history_table_options);
|
|
history_table.column(1).visible(false);
|
|
|
|
var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' });
|
|
$(colvis.button()).appendTo('#button-bar-history');
|
|
});
|
|
|
|
$( "#ip-tab-btn" ).one( "click", function() {
|
|
// Build user IP table
|
|
user_ip_table_options.ajax = {
|
|
"url": "get_user_ips",
|
|
type: 'post',
|
|
data: function ( d ) {
|
|
return { 'json_data': JSON.stringify( d ),
|
|
'user_id': user_id,
|
|
'user': "${data['username']}"
|
|
};
|
|
}
|
|
}
|
|
user_ip_table = $('#user_ip_table').DataTable(user_ip_table_options);
|
|
});
|
|
|
|
$( "#sync-tab-btn" ).one( "click", function() {
|
|
// Build user sync table
|
|
sync_table_options.ajax = {
|
|
"url": "get_sync",
|
|
"data": function(d) {
|
|
d.user_id = user_id;
|
|
d.user = "${data['username']}";
|
|
}
|
|
}
|
|
sync_table = $('#sync_table').DataTable(sync_table_options);
|
|
history_table.column(1).visible(false);
|
|
|
|
var colvis_sync = new $.fn.dataTable.ColVis( sync_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' } );
|
|
$( colvis_sync.button() ).appendTo('#button-bar-sync');
|
|
});
|
|
|
|
// Load edit user modal
|
|
$("#toggle-edit-user-modal").click(function() {
|
|
$.ajax({
|
|
url: 'edit_user_dialog',
|
|
data: { user_id: user_id, user: '${data['username']}' },
|
|
cache: false,
|
|
async: true,
|
|
complete: function(xhr, status) {
|
|
$("#edit-user-modal").html(xhr.responseText);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</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 |