Add Playlist tab to user page

This commit is contained in:
JonnyWong16 2020-10-02 11:57:13 -07:00
commit 501f08dd5e
No known key found for this signature in database
GPG key ID: B1F1F9807184697A
6 changed files with 175 additions and 70 deletions

View file

@ -43,7 +43,9 @@ DOCUMENTATION :: END
<div class="summary-navbar">
<div class="col-md-12">
<div class="summary-navbar-list">
<ul class="list-unstyled breadcrumb"></ul>
<ul class="list-unstyled breadcrumb">
<li class="active">${data['friendly_name']}</li>
</ul>
</div>
</div>
</div>
@ -69,10 +71,11 @@ DOCUMENTATION :: END
<div class="user-info-nav">
<ul class="nav nav-list nav-pills" role="tablist">
<li class="active"><a href="#tabs-profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a id="history-tab-btn" href="#tabs-history" role="tab" data-toggle="tab">History</a></li>
<li><a id="sync-tab-btn" href="#tabs-synceditems" role="tab" data-toggle="tab">Synced Items</a></li>
<li><a id="ip-tab-btn" href="#tabs-ipaddresses" role="tab" data-toggle="tab">IP Addresses</a></li>
<li><a id="login-tab-btn" href="#tabs-tautullilogins" role="tab" data-toggle="tab">Tautulli Logins</a></li>
<li><a href="#tabs-history" role="tab" data-toggle="tab">History</a></li>
<li><a href="#tabs-playlists" role="tab" data-toggle="tab">Playlists</a></li>
<li><a href="#tabs-synceditems" role="tab" data-toggle="tab">Synced Items</a></li>
<li><a href="#tabs-ipaddresses" role="tab" data-toggle="tab">IP Addresses</a></li>
<li><a href="#tabs-tautullilogins" role="tab" data-toggle="tab">Tautulli Logins</a></li>
</ul>
</div>
</div>
@ -210,6 +213,53 @@ DOCUMENTATION :: END
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tabs-playlists">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class='table-card-header'>
<div class="header-bar">
<span>
<i class="fa fa-list-alt"></i> Playlists for <strong>
<span class="set-username">${data['friendly_name']}</span>
</strong>
</span>
</div>
<div class="button-bar">
% if _session['user_group'] == 'admin':
<% playlist_sub_media_type = {'movie': 'video', 'show': 'video', 'artist': 'audio', 'photo': 'photo'} %>
<div class="btn-group">
<button class="btn btn-dark export-button" id="toggle-export-modal" data-toggle="modal" data-target="#export-modal"
data-media_type="playlist" data-sub_media_type=""
data-library_export="playlist">
<i class="fa fa-file-export"></i> Export playlists
</button>
</div>
% endif
<div class="btn-group">
<button class="btn btn-dark refresh-playlists-table-button" id="refresh-playlists-table">
<i class="fa fa-refresh"></i> Refresh playlists
</button>
</div>
<div class="btn-group colvis-button-bar" id="button-bar-playlists"></div>
</div>
</div>
<div class="table-card-back">
<table class="display playlists_table" id="playlists_table-SID-${data['user_id']}" width="100%">
<thead>
<tr>
<th align="left" id="playlistTitle">Playlist Title</th>
<th align="left" id="playlistLeafCount">Playlist Items</th>
<th align="left" id="playlistDuration">Playlist Duration</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tabs-synceditems">
<div class="container-fluid">
<div class="row">
@ -412,6 +462,7 @@ DOCUMENTATION :: END
</script>
<script src="${http_root}js/moment-with-locale.js"></script>
<script src="${http_root}js/tables/history_table.js${cache_param}"></script>
<script src="${http_root}js/tables/playlists_table.js${cache_param}"></script>
<script src="${http_root}js/tables/user_ips.js${cache_param}"></script>
<script src="${http_root}js/tables/sync_table.js${cache_param}"></script>
<script src="${http_root}js/tables/login_logs.js${cache_param}"></script>
@ -420,6 +471,8 @@ DOCUMENTATION :: END
$.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
});
$(".inactive-user-tooltip").tooltip();
function loadHistoryTable(media_type) {
// Build watch history table
history_table_options.ajax = {
@ -451,6 +504,49 @@ DOCUMENTATION :: END
});
}
$('a[href="#tabs-history"]').on('shown.bs.tab', function() {
if (typeof(history_table) === 'undefined') {
var media_type = getLocalStorage('user_' + user_id + '-history_media_type', 'all');
$('#history-' + media_type).prop('checked', true);
$('#history-' + media_type).closest('label').addClass('active');
loadHistoryTable(media_type);
}
});
$("#refresh-history-list").click(function () {
history_table.draw();
});
function loadPlaylistsTable() {
// Build playlists table
playlists_table_options.ajax = {
url: 'get_playlists_list',
type: 'POST',
data: function ( d ) {
return {
json_data: JSON.stringify( d ),
user_id: user_id
};
}
};
playlists_table = $('#playlists_table-SID-${data["user_id"]}').DataTable(playlists_table_options);
var colvis = new $.fn.dataTable.ColVis(playlists_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark' });
$(colvis.button()).appendTo('#button-bar-playlists');
clearSearchButton('playlists_table-SID-${data["user_id"]}', playlists_table);
}
$('a[href="#tabs-playlists"]').on('shown.bs.tab', function() {
if (typeof(playlists_table) === 'undefined') {
loadPlaylistsTable();
}
});
$("#refresh-playlists-table").click(function () {
playlists_table.draw();
});
function loadSyncTable() {
// Build user sync table
sync_table_options.ajax = {
@ -466,6 +562,16 @@ DOCUMENTATION :: END
clearSearchButton('sync_table-UID-${data["user_id"]}', sync_table);
}
$('a[href="#tabs-synceditems"]').on('shown.bs.tab', function() {
if (typeof(sync_table) === 'undefined') {
loadSyncTable(user_id);
}
});
$("#refresh-syncs-list").click(function() {
sync_table.ajax.reload();
});
function loadIPAddressTable() {
// Build user IP table
user_ip_table_options.ajax = {
@ -483,6 +589,16 @@ DOCUMENTATION :: END
clearSearchButton('user_ip_table-UID-${data["user_id"]}', user_ip_table);
}
$('a[href="#tabs-ipaddresses"]').on('shown.bs.tab', function() {
if (typeof(user_ip_table) === 'undefined') {
loadIPAddressTable(user_id);
}
});
$("#refresh-ip-address-list").click(function () {
user_ip_table.draw();
});
function loadLoginTable() {
// Build user login table
login_log_table_options.ajax = {
@ -504,51 +620,16 @@ DOCUMENTATION :: END
clearSearchButton('login_log_table-UID-${data["user_id"]}', login_log_table);
}
$('a[href="#tabs-history"]').on('shown.bs.tab', function() {
if (typeof(history_table) === 'undefined') {
var media_type = getLocalStorage('user_' + user_id + '-history_media_type', 'all');
$('#history-' + media_type).prop('checked', true);
$('#history-' + media_type).closest('label').addClass('active');
loadHistoryTable(media_type);
}
});
$('a[href="#tabs-synceditems"]').on('shown.bs.tab', function() {
if (typeof(sync_table) === 'undefined') {
loadSyncTable(user_id);
}
});
$('a[href="#tabs-ipaddresses"]').on('shown.bs.tab', function() {
if (typeof(user_ip_table) === 'undefined') {
loadIPAddressTable(user_id);
}
});
$('a[href="#tabs-tautullilogins"]').on('shown.bs.tab', function() {
if (typeof(login_log_table) === 'undefined') {
loadLoginTable(user_id);
}
});
$("#refresh-history-list").click(function () {
history_table.draw();
});
$("#refresh-syncs-list").click(function() {
sync_table.ajax.reload();
});
$("#refresh-ip-address-list").click(function () {
user_ip_table.draw();
});
$("#refresh-login-list").click(function () {
login_log_table.draw();
});
$(".inactive-user-tooltip").tooltip();
function recentlyWatched() {
// Populate recently watched
$.ajax({