Improve look of collections and playlists tables

This commit is contained in:
JonnyWong16 2020-09-30 21:01:14 -07:00
parent c5ea50d480
commit 1061c334ae
No known key found for this signature in database
GPG key ID: B1F1F9807184697A
7 changed files with 59 additions and 30 deletions

View file

@ -1968,6 +1968,8 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
list-style: none; list-style: none;
margin: 0; margin: 0;
overflow: auto; overflow: auto;
}
.item-children-instance.max-height {
max-height: 875px; max-height: 875px;
} }
.item-children-instance li { .item-children-instance li {

View file

@ -189,7 +189,7 @@ DOCUMENTATION :: END
<span></span> <span></span>
</div> </div>
% if data['media_type'] == 'playlist' and data['smart']: % if data['media_type'] == 'playlist' and data['smart']:
<span class="smart-playlist-image" title="Smart Playlist"><i class="fa fa-gear"></i></span> <span class="smart-playlist-image" title="Smart Playlist"><i class="fa fa-cog"></i></span>
% endif % endif
</div> </div>
% if _session['user_group'] == 'admin': % if _session['user_group'] == 'admin':

View file

@ -32,7 +32,7 @@ DOCUMENTATION :: END
%> %>
% if data['children_count'] > 0: % if data['children_count'] > 0:
<div class="item-children-wrapper"> <div class="item-children-wrapper">
<ul class="item-children-instance list-unstyled"> <ul class="item-children-instance ${'max-height' if media_type == 'playlist' else ''} list-unstyled">
% for child in data['children_list']: % for child in data['children_list']:
% if child['rating_key']: % if child['rating_key']:
% if data['children_type'] == 'track' or media_type == 'playlist': % if data['children_type'] == 'track' or media_type == 'playlist':

View file

@ -24,7 +24,7 @@ collections_table_options = {
"data": "title", "data": "title",
"createdCell": function (td, cellData, rowData, row, col) { "createdCell": function (td, cellData, rowData, row, col) {
if (cellData !== '') { if (cellData !== '') {
$(td).html('<a href="' + page('info', rowData['ratingKey']) + '">' + cellData + '</a>'); $(td).html('<a href="' + page('info', rowData['ratingKey']) + '"><i class="fa fa-blank fa-fw"></i>' + cellData + '</a>');
} }
}, },
"width": "50%", "width": "50%",
@ -35,7 +35,17 @@ collections_table_options = {
"data": "collectionMode", "data": "collectionMode",
"createdCell": function (td, cellData, rowData, row, col) { "createdCell": function (td, cellData, rowData, row, col) {
if (cellData !== '') { if (cellData !== '') {
$(td).html(cellData); var mode = '';
if (cellData === -1) {
mode = 'Library default';
} else if (cellData === 0) {
mode = 'Hide collection';
} else if (cellData === 1) {
mode = 'Hide items in this collection';
} else if (cellData === 2) {
mode = 'Show this collection and its items';
}
$(td).html(mode);
} }
}, },
"width": "20%", "width": "20%",
@ -46,7 +56,13 @@ collections_table_options = {
"data": "collectionSort", "data": "collectionSort",
"createdCell": function (td, cellData, rowData, row, col) { "createdCell": function (td, cellData, rowData, row, col) {
if (cellData !== '') { if (cellData !== '') {
$(td).html(cellData); var sort = '';
if (cellData === 0) {
sort = 'Release date';
} else if (cellData === 1) {
sort = 'Alphabetical';
}
$(td).html(sort);
} }
}, },
"width": "20%", "width": "20%",

View file

@ -24,10 +24,14 @@ playlists_table_options = {
"data": "title", "data": "title",
"createdCell": function (td, cellData, rowData, row, col) { "createdCell": function (td, cellData, rowData, row, col) {
if (cellData !== '') { if (cellData !== '') {
$(td).html('<a href="' + page('info', rowData['ratingKey']) + '&section_id=' + rowData['librarySectionID'] +'">' + cellData + '</a>'); var smart = '<i class="fa fa-blank fa-fw"></i>';
if (rowData['smart']) {
smart = '<span class="media-type-tooltip" data-toggle="tooltip" title="Smart Playlist"><i class="fa fa-cog fa-fw"></i></span>&nbsp;'
}
$(td).html('<a href="' + page('info', rowData['ratingKey']) + '&section_id=' + rowData['librarySectionID'] +'">' + smart + cellData + '</a>');
} }
}, },
"width": "50%", "width": "60%",
"className": "no-wrap" "className": "no-wrap"
}, },
{ {
@ -51,27 +55,23 @@ playlists_table_options = {
}, },
"width": "20%", "width": "20%",
"className": "no-wrap" "className": "no-wrap"
},
{
"targets": [3],
"data": "smart",
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData !== '') {
$(td).html(cellData);
}
},
"width": "10%",
"className": "no-wrap"
} }
], ],
"drawCallback": function (settings) { "drawCallback": function (settings) {
// Jump to top of page // Jump to top of page
//$('html,body').scrollTop(0); //$('html,body').scrollTop(0);
$('#ajaxMsg').fadeOut(); $('#ajaxMsg').fadeOut();
// Create the tooltips.
$('body').tooltip({
selector: '[data-toggle="tooltip"]',
container: 'body'
});
}, },
"preDrawCallback": function(settings) { "preDrawCallback": function(settings) {
var msg = "<i class='fa fa-refresh fa-spin'></i>&nbsp; Fetching rows..."; var msg = "<i class='fa fa-refresh fa-spin'></i>&nbsp; Fetching rows...";
showMsg(msg, false, false, 0); showMsg(msg, false, false, 0);
$('[data-toggle="tooltip"]').tooltip('destroy');
}, },
"rowCallback": function (row, rowData, rowIndex) { "rowCallback": function (row, rowData, rowIndex) {
} }

View file

@ -335,10 +335,10 @@ DOCUMENTATION :: END
<table class="display collections_table" id="collections_table-SID-${data['section_id']}" width="100%"> <table class="display collections_table" id="collections_table-SID-${data['section_id']}" width="100%">
<thead> <thead>
<tr> <tr>
<th align="left" id="title">Title</th> <th align="left" id="collectionTitle">Collection Title</th>
<th align="left" id="collectionMode">Collection Mode</th> <th align="left" id="collectionMode">Collection Mode</th>
<th align="left" id="collectionSort">Collection Sort</th> <th align="left" id="collectionSort">Collection Sort</th>
<th align="left" id="items">Items</th> <th align="left" id="collectionItems">Collection Items</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
@ -375,10 +375,9 @@ DOCUMENTATION :: END
<table class="display playlists_table" id="playlists_table-SID-${data['section_id']}" width="100%"> <table class="display playlists_table" id="playlists_table-SID-${data['section_id']}" width="100%">
<thead> <thead>
<tr> <tr>
<th align="left" id="title">Title</th> <th align="left" id="playlistTitle">Playlist Title</th>
<th align="left" id="leafCount">Items</th> <th align="left" id="playlistLeafCount">Playlist Items</th>
<th align="left" id="duration">Duration</th> <th align="left" id="playlistDuration">Playlist Duration</th>
<th align="left" id="smart">Smart</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>

View file

@ -153,12 +153,20 @@ def get_collections(section_id):
collections_list = [] collections_list = []
for collection in collections: for collection in collections:
collection_mode = collection.collectionMode
if collection_mode is None:
collection_mode = -1
collection_sort = collection.collectionSort
if collection_sort is None:
collection_sort = 0
collection_dict = { collection_dict = {
'addedAt': helpers.datetime_to_iso(collection.addedAt), 'addedAt': helpers.datetime_to_iso(collection.addedAt),
'art': collection.art, 'art': collection.art,
'childCount': collection.childCount, 'childCount': collection.childCount,
'collectionMode': collection.collectionMode, 'collectionMode': helpers.cast_to_int(collection_mode),
'collectionSort': collection.collectionSort, 'collectionSort': helpers.cast_to_int(collection_sort),
'contentRating': collection.contentRating, 'contentRating': collection.contentRating,
'guid': collection.guid, 'guid': collection.guid,
'librarySectionID': collection.librarySectionID, 'librarySectionID': collection.librarySectionID,
@ -181,7 +189,8 @@ def get_collections(section_id):
def get_collections_list(section_id=None, **kwargs): def get_collections_list(section_id=None, **kwargs):
if not section_id: if not section_id:
default_return = {'recordsTotal': 0, default_return = {'recordsFiltered': 0,
'recordsTotal': 0,
'draw': 0, 'draw': 0,
'data': 'null', 'data': 'null',
'error': 'Unable to execute database query.'} 'error': 'Unable to execute database query.'}
@ -189,7 +198,8 @@ def get_collections_list(section_id=None, **kwargs):
collections = get_collections(section_id) collections = get_collections(section_id)
data = {'recordsTotal': len(collections), data = {'recordsFiltered': len(collections),
'recordsTotal': len(collections),
'data': collections, 'data': collections,
'draw': kwargs.get('draw', 0) 'draw': kwargs.get('draw', 0)
} }
@ -237,7 +247,8 @@ def get_playlists(section_id):
def get_playlists_list(section_id=None, **kwargs): def get_playlists_list(section_id=None, **kwargs):
if not section_id: if not section_id:
default_return = {'recordsTotal': 0, default_return = {'recordsFiltered': 0,
'recordsTotal': 0,
'draw': 0, 'draw': 0,
'data': 'null', 'data': 'null',
'error': 'Unable to execute database query.'} 'error': 'Unable to execute database query.'}
@ -245,7 +256,8 @@ def get_playlists_list(section_id=None, **kwargs):
playlists = get_playlists(section_id) playlists = get_playlists(section_id)
data = {'recordsTotal': len(playlists), data = {'recordsFiltered': len(playlists),
'recordsTotal': len(playlists),
'data': playlists, 'data': playlists,
'draw': kwargs.get('draw', 0) 'draw': kwargs.get('draw', 0)
} }