e7b305a1d5
Note: To edit friendly name, go to user page and click the pencil icon next to the user name. Currently only works on home stats and user info page. Adjust some table styling issues. Fix bug with user IP modal details not showing. Fix users default list order.
306 lines
13 KiB
HTML
306 lines
13 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: user [string]
|
|
|
|
user :: Usable parameters
|
|
|
|
user Returns the name of the user.
|
|
friendly_name Returns the friendly name of the user.
|
|
|
|
DOCUMENTATION :: END
|
|
|
|
</%doc>
|
|
|
|
<%inherit file="base.html"/>
|
|
<%!
|
|
from plexpy import helpers
|
|
%>
|
|
|
|
<%def name="headIncludes()">
|
|
<link rel="stylesheet" href="interfaces/default/css/plexwatch-tables.css">
|
|
<link rel="stylesheet" href="interfaces/default/css/dataTables.responsive.css">
|
|
</%def>
|
|
|
|
% 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" id="user-gravatar">
|
|
<img src="interfaces/default/images/gravatar-default-80x80.png">
|
|
</div>
|
|
<div class="user-info-username">
|
|
<span class="set-username">${friendly_name}</span> <a href="#edit-user-modal" data-toggle="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 href="#userHistory" data-toggle="tab">History</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="edit-user-modal" class="modal hide fade" tabindex="-1" role="dialog"
|
|
aria-labelledby="edit-user-modal" aria-hidden="true">
|
|
</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 class='muted'><i class="fa fa-refresh fa-spin"></i> Loading data...</div>
|
|
<br>
|
|
</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 class='muted'><i class="fa fa-refresh fa-spin"></i> Loading data...</div>
|
|
<br>
|
|
</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">
|
|
<div class='muted'><i class="fa fa-refresh fa-spin"></i> Loading data...</div>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="userAddresses">
|
|
<div class="container-fluid">
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="table-card-back">
|
|
<h3>IP Addresses for <strong>
|
|
<span class="set-username">${friendly_name}</span>
|
|
</strong></h3>
|
|
</div>
|
|
<div class="table-card-back">
|
|
<table id="user_ip_table" class="display" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th class="all" align="left">Last seen</th>
|
|
<th class="all" align="left">IP Address</th>
|
|
<th class="min-tablet" align="left">Play Count</th>
|
|
<th class="min-tablet" align="left">Platform (Last Seen)</th>
|
|
<th class="desktop" align="left">Last Watched</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
<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="modal_header_ip_address"></span></strong></h3>
|
|
</div>
|
|
<div class="modal-body" id="modal-text">
|
|
<div class="span6">
|
|
<h4>Location Details</h4>
|
|
<ul>
|
|
<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>
|
|
<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="modal-footer"></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="table-card-back">
|
|
<h3>Watch History for <strong>
|
|
<span class="set-username">${friendly_name}</span>
|
|
</strong></h3>
|
|
</div>
|
|
<div class="table-card-back">
|
|
<table class="display" id="history_table" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th class="never" align='left' id="id">ID</th>
|
|
<th class="all" align='left' id="time">Time</th>
|
|
<th class="never" align='left' id="user">User</th>
|
|
<th class="min-tablet" align='left' id="platform">Platform</th>
|
|
<th class="desktop" align='left' id="ip_address">IP Address</th>
|
|
<th class="min-tablet" align='left' id="title">Title</th>
|
|
<th class="desktop" align='left' id="started">Started</th>
|
|
<th class="desktop" align='left' id="paused_counter">Paused</th>
|
|
<th class="desktop" align='left' id="stopped">Stopped</th>
|
|
<th class="desktop" align='left' id="duration">Duration</th>
|
|
<th class="desktop" align='left' id="percent_complete">Completed</th>
|
|
<th class="never" align='left' id="rating_key">RatingKey</th>
|
|
<th class="never" align='left' id="xml"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<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>
|
|
<footer></footer>
|
|
</%def>
|
|
|
|
<%def name="javascriptIncludes()">
|
|
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
|
|
<script src="interfaces/default/js/dataTables.responsive.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 () {
|
|
|
|
// Populate watch time stats
|
|
$.ajax({
|
|
url: 'get_user_watch_time_stats',
|
|
async: true,
|
|
data: { user: '${user}' },
|
|
complete: function(xhr, status) {
|
|
$("#user-time-stats").html(xhr.responseText);
|
|
}
|
|
});
|
|
|
|
// Populate platform stats
|
|
$.ajax({
|
|
url: 'get_user_platform_stats',
|
|
async: true,
|
|
data: { user: '${user}' },
|
|
complete: function(xhr, status) {
|
|
$("#user-platform-stats").html(xhr.responseText);
|
|
}
|
|
});
|
|
|
|
// Populate recently watched
|
|
$.ajax({
|
|
url: 'get_user_recently_watched',
|
|
async: true,
|
|
data: { user: '${user}' },
|
|
complete: function(xhr, status) {
|
|
$("#user-recently-watched").html(xhr.responseText);
|
|
}
|
|
});
|
|
|
|
// Build watch history table
|
|
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
|
|
|
|
// Build user IP table
|
|
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);
|
|
|
|
// Load user gravatar image
|
|
$.ajax({
|
|
url: 'get_user_gravatar_image',
|
|
async: true,
|
|
data: { user: '${user}' },
|
|
success: function(data) {
|
|
if (data.user_thumb !== '') {
|
|
thumb = data.user_thumb;
|
|
$('#user-gravatar').html('<img src="' + thumb + '">');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Load edit user modal
|
|
$("#toggle-edit-user-modal").click(function() {
|
|
$.ajax({
|
|
url: 'edit_user',
|
|
data: {user: '${user}'},
|
|
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 |