plexpy/data/interfaces/default/user.html
Tim b8f2ea951d Remove responsive datatables plugin - use normal media queries.
Set datatables stateSave to true as default
Remove some old images.
Change button on edit user modal
2015-07-20 01:16:43 +02:00

377 lines
No EOL
16 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/plexwatch-tables.css">
<link rel="stylesheet" href="interfaces/default/css/dataTables.colVis.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="${data['thumb']}" height="80px" width="80px">
</div>
<div class="user-info-username">
<span class="set-username">${data['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 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 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">${data['friendly_name']}</span>
</strong></h3>
</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 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'>
<div class="header-bar">
<h3>Watch History for <strong>
<span class="set-username">${data['friendly_name']}</span>
</strong></h3>
</div>
<div class="colvis-button-bar hidden-phone" 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 hide fade" tabindex="-1" role="dialog"
aria-labelledby="info-modal" aria-hidden="true">
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="userSyncItems">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class='table-card-back'>
<div class="header-bar">
<h3>Synced Items for <strong>
<span class="set-username">${data['friendly_name']}</span>
</strong></h3>
</div>
<div class="colvis-button-bar hidden-phone" 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/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 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);
$(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 );
$( 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