mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-07-11 15:56:07 -07:00
Add sortable homepage cards
This commit is contained in:
Jonathan Wong
parent
636f898da8
commit
95b55760ad
4 changed files with 175 additions and 53 deletions
|
|
@ -2610,7 +2610,6 @@ table[id^='history_child'] thead th {
|
||||||
-o-transition: background 0.3s;
|
-o-transition: background 0.3s;
|
||||||
transition: background 0.3s;
|
transition: background 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-params {
|
.notification-params {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
background-color: #282828;
|
background-color: #282828;
|
||||||
|
|
@ -2635,7 +2634,6 @@ table[id^='history_child'] thead th {
|
||||||
.notification-params tr:nth-child(even) td {
|
.notification-params tr:nth-child(even) td {
|
||||||
background-color: rgba(255,255,255,0.010);
|
background-color: rgba(255,255,255,0.010);
|
||||||
}
|
}
|
||||||
|
|
||||||
#days-selection label {
|
#days-selection label {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -2644,3 +2642,33 @@ table[id^='history_child'] thead th {
|
||||||
width: 75px;
|
width: 75px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
}
|
}
|
||||||
|
.card-sortable {
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 20px 0 0;
|
||||||
|
line-height: 34px;
|
||||||
|
cursor: move;
|
||||||
|
cursor: -webkit-grab;
|
||||||
|
cursor: grab;
|
||||||
|
border-bottom: 1px solid #232323;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-o-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
background-color: #282828;
|
||||||
|
border-top: 1px solid #2d2d2d;
|
||||||
|
}
|
||||||
|
.card label {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.card-handle {
|
||||||
|
display: inline-block;
|
||||||
|
width: 30px;
|
||||||
|
margin-right: 10px;
|
||||||
|
color: #444;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #2f2f2f;
|
||||||
|
}
|
||||||
2
data/interfaces/default/js/Sortable.min.js
vendored
Normal file
2
data/interfaces/default/js/Sortable.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -98,24 +98,78 @@ available_notification_agents = sorted(notifiers.available_notification_agents()
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="home_stats_cards">Cards</label>
|
<label for="sortable_home_stats_cards">Cards</label>
|
||||||
|
<p class="help-block">
|
||||||
|
Select the cards to show in the watch statistics on the home page. Select none to disable.<br>
|
||||||
|
Drag the items below to reorder your homepage content.
|
||||||
|
</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<select multiple class="form-control" id="home_stats_cards" name="home_stats_cards" data-parsley-trigger="change">
|
<ul class="list-unstyled" id="sortable_home_stats_cards" data-parsley-trigger="change">
|
||||||
<option id="card-top_tv" value="top_tv">Most Watched TV</option>
|
<li class="card card-sortable">
|
||||||
<option id="card-popular_tv" value="popular_tv">Most Popular TV</option>
|
<div class="card-handle"><i class="fa fa-bars"></i></div>
|
||||||
<option id="card-top_movies" value="top_movies">Most Watched Movie</option>
|
<label>
|
||||||
<option id="card-popular_movies" value="popular_movies">Most Popular Movie</option>
|
<input type="checkbox" id="hscard-top_tv" name="hscard-top_tv" value="top_tv"> Most Watched TV
|
||||||
<option id="card-top_music" value="top_music">Most Listened Music</option>
|
</label>
|
||||||
<option id="card-popular_music" value="popular_music">Most Popular Music</option>
|
</li>
|
||||||
<option id="card-last_watched" value="last_watched">Last Watched</option>
|
<li class="card card-sortable">
|
||||||
<option id="card-top_users" value="top_users">Most Active User</option>
|
<div class="card-handle"><i class="fa fa-bars"></i></div>
|
||||||
<option id="card-top_platforms" value="top_platforms">Most Active Platform</option>
|
<label>
|
||||||
<option id="card-most_concurrent" value="most_concurrent">Most Concurrent Streams</option>
|
<input type="checkbox" id="hscard-popular_tv" name="hscard-popular_tv" value="popular_tv"> Most Popular TV
|
||||||
</select>
|
</label>
|
||||||
|
</li>
|
||||||
|
<li class="card card-sortable">
|
||||||
|
<div class="card-handle"><i class="fa fa-bars"></i></div>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="hscard-top_movies" name="hscard-top_movies" value="top_movies"> Most Watched Movie
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li class="card card-sortable">
|
||||||
|
<div class="card-handle"><i class="fa fa-bars"></i></div>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="hscard-popular_movies" name="hscard-popular_movies" value="popular_movies"> Most Popular Movie
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li class="card card-sortable">
|
||||||
|
<div class="card-handle"><i class="fa fa-bars"></i></div>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="hscard-top_music" name="hscard-top_music" value="top_music"> Most Listened Music
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li class="card card-sortable">
|
||||||
|
<div class="card-handle"><i class="fa fa-bars"></i></div>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="hscard-popular_music" name="hscard-popular_music" value="popular_music"> Most Popular Music
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li class="card card-sortable">
|
||||||
|
<div class="card-handle"><i class="fa fa-bars"></i></div>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="hscard-last_watched" name="hscard-last_watched" value="last_watched"> Last Watched
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li class="card card-sortable">
|
||||||
|
<div class="card-handle"><i class="fa fa-bars"></i></div>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="hscard-top_users" name="hscard-top_users" value="top_users"> Most Active User
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li class="card card-sortable">
|
||||||
|
<div class="card-handle"><i class="fa fa-bars"></i></div>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="hscard-top_platforms" name="hscard-top_platforms" value="top_platforms"> Most Active Platform
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li class="card card-sortable">
|
||||||
|
<div class="card-handle"><i class="fa fa-bars"></i></div>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="hscard-most_concurrent" name="hscard-most_concurrent" value="most_concurrent"> Most Concurrent Streams
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<input type="text" id="home_stats_cards" name="home_stats_cards" style="display: none;" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="help-block">Select the cards to show in the watch statistics on the home page. Select none to disable.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="home_stats_length">Time Frame</label>
|
<label for="home_stats_length">Time Frame</label>
|
||||||
|
|
@ -150,13 +204,17 @@ available_notification_agents = sorted(notifiers.available_notification_agents()
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="home_library_cards">Cards</label>
|
<label for="home_library_cards">Cards</label>
|
||||||
|
<p class="help-block">
|
||||||
|
Select the cards to show in the library statistics on the home page. Select none to disable.<br>
|
||||||
|
Drag the items below to reorder your homepage content.
|
||||||
|
</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<select multiple class="form-control" id="home_library_cards" name="home_library_cards" data-parsley-trigger="change">
|
<ul class="list-unstyled" id="sortable_home_library_cards" data-parsley-trigger="change">
|
||||||
</select>
|
</ul>
|
||||||
|
<input type="text" id="home_library_cards" name="home_library_cards" style="display: none;" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="help-block">Select the cards to show in the library statistics on the home page. Select none to disable.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<p><input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully"></p>
|
<p><input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully"></p>
|
||||||
|
|
||||||
|
|
@ -1335,6 +1393,7 @@ available_notification_agents = sorted(notifiers.available_notification_agents()
|
||||||
|
|
||||||
<%def name="javascriptIncludes()">
|
<%def name="javascriptIncludes()">
|
||||||
<script src="interfaces/default/js/parsley.min.js"></script>
|
<script src="interfaces/default/js/parsley.min.js"></script>
|
||||||
|
<script src="interfaces/default/js/Sortable.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
|
@ -1621,19 +1680,44 @@ $(document).ready(function() {
|
||||||
var accordion_timeline = new Accordion($('#accordion-timeline'), false);
|
var accordion_timeline = new Accordion($('#accordion-timeline'), false);
|
||||||
var accordion_scripts = new Accordion($('#accordion-scripts'), false);
|
var accordion_scripts = new Accordion($('#accordion-scripts'), false);
|
||||||
|
|
||||||
var cards = ${config['home_stats_cards']|n};
|
|
||||||
cards.forEach(function (item) {
|
// Sortable home_stats_cards
|
||||||
$('#card-'+item).prop('selected', !$(this).prop('selected'));
|
function set_home_stats_cards() {
|
||||||
|
var home_stats_cards = [];
|
||||||
|
var hscards = $('[id^=hscard-]').serializeArray();
|
||||||
|
$.each(hscards, function(i, card) {
|
||||||
|
home_stats_cards.push(card.value);
|
||||||
});
|
});
|
||||||
$('#home_stats_cards').on('mousedown', function(e) {
|
$('#home_stats_cards').val(home_stats_cards);
|
||||||
e.preventDefault();
|
};
|
||||||
var scroll = this.scrollTop;
|
|
||||||
e.target.selected = !e.target.selected;
|
var config_cards = ${config['home_stats_cards'] | n};
|
||||||
this.scrollTop = scroll;
|
config_cards.reverse().forEach(function (item) {
|
||||||
}).on('mousemove', function(e) {
|
$('#hscard-' + item).prop('checked', !$(this).prop('checked'))
|
||||||
e.preventDefault()
|
$('#hscard-' + item).closest('li.card').prependTo('#sortable_home_stats_cards');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Sortable.create(sortable_home_stats_cards, {
|
||||||
|
animation: 250,
|
||||||
|
onSort: function(elem, ui) {
|
||||||
|
set_home_stats_cards();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('[id^=hscard-]').change(function() { set_home_stats_cards(); });
|
||||||
|
set_home_stats_cards()
|
||||||
|
|
||||||
|
|
||||||
|
// Sortable home_library_cards
|
||||||
|
function set_home_library_cards() {
|
||||||
|
var home_library_cards = [];
|
||||||
|
var hlcards = $('[id^=hlcard-]').serializeArray();
|
||||||
|
$.each(hlcards, function(i, card) {
|
||||||
|
home_library_cards.push(card.value);
|
||||||
|
});
|
||||||
|
$('#home_library_cards').val(home_library_cards);
|
||||||
|
};
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: 'get_library_sections',
|
url: 'get_library_sections',
|
||||||
data: { },
|
data: { },
|
||||||
|
|
@ -1643,23 +1727,33 @@ $(document).ready(function() {
|
||||||
for (var i in libraries_list) {
|
for (var i in libraries_list) {
|
||||||
var title = libraries_list[i].section_name;
|
var title = libraries_list[i].section_name;
|
||||||
var key = libraries_list[i].section_id;
|
var key = libraries_list[i].section_id;
|
||||||
$('#home_library_cards').append('<option id="card-' + key + '" value="' + key + '">' + title + '</option>')
|
$('#sortable_home_library_cards').append(
|
||||||
|
'<li class="card card-sortable">' +
|
||||||
|
'<div class="card-handle"><i class="fa fa-bars"></i></div>' +
|
||||||
|
'<label>' +
|
||||||
|
'<input type="checkbox" id="hlcard-' + key + '" name="hlcard-' + key + '" value="' + key + '"> ' + title +
|
||||||
|
'</label>' +
|
||||||
|
'</li>'
|
||||||
|
);
|
||||||
}
|
}
|
||||||
var cards = ${config['home_library_cards']|n};
|
var config_cards = ${config['home_library_cards'] | n};
|
||||||
cards.forEach(function (item) {
|
config_cards.reverse().forEach(function (item) {
|
||||||
$('#card-' + item).prop('selected', !$(this).prop('selected'));
|
$('#hlcard-' + item).prop('checked', !$(this).prop('checked'));
|
||||||
|
$('#hlcard-' + item).closest('li.card').prependTo('#sortable_home_library_cards');
|
||||||
});
|
});
|
||||||
|
$('[id^=hlcard-]').change(function() { set_home_library_cards(); });
|
||||||
|
set_home_library_cards()
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$('#home_library_cards').on('mousedown', function(e) {
|
|
||||||
e.preventDefault();
|
Sortable.create(sortable_home_library_cards, {
|
||||||
var scroll = this.scrollTop;
|
animation: 250,
|
||||||
e.target.selected = !e.target.selected;
|
onSort: function(elem, ui) {
|
||||||
this.scrollTop = scroll;
|
set_home_library_cards();
|
||||||
}).on('mousemove', function(e) {
|
}
|
||||||
e.preventDefault()
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// auto resizing textarea for custom notification message body
|
// auto resizing textarea for custom notification message body
|
||||||
$('textarea[data-autoresize]').each(function() {
|
$('textarea[data-autoresize]').each(function() {
|
||||||
var offset = this.offsetHeight - this.clientHeight;
|
var offset = this.offsetHeight - this.clientHeight;
|
||||||
|
|
|
||||||
|
|
@ -1070,19 +1070,17 @@ class WebInterface(object):
|
||||||
refresh_libraries = True
|
refresh_libraries = True
|
||||||
refresh_users = True
|
refresh_users = True
|
||||||
|
|
||||||
if 'home_stats_cards' not in kwargs:
|
# Remove config with 'hscard-' prefix and change home_stats_cards to list
|
||||||
kwargs['home_stats_cards'] = []
|
for k in kwargs.keys():
|
||||||
elif kwargs['home_stats_cards'] == 'first_run_wizard':
|
if k.startswith('hscard-'):
|
||||||
kwargs['home_stats_cards'] = plexpy.CONFIG.HOME_STATS_CARDS
|
del kwargs[k]
|
||||||
elif type(kwargs['home_stats_cards']) != list:
|
kwargs['home_stats_cards'] = kwargs['home_stats_cards'].split(',')
|
||||||
kwargs['home_stats_cards'] = [kwargs['home_stats_cards']]
|
|
||||||
|
|
||||||
if 'home_library_cards' not in kwargs:
|
# Remove config with 'hlcard-' prefix and change home_library_cards to list
|
||||||
kwargs['home_library_cards'] = []
|
for k in kwargs.keys():
|
||||||
elif kwargs['home_library_cards'] == 'first_run_wizard':
|
if k.startswith('hlcard-'):
|
||||||
kwargs['home_library_cards'] = plexpy.CONFIG.HOME_LIBRARY_CARDS
|
del kwargs[k]
|
||||||
elif type(kwargs['home_library_cards']) != list:
|
kwargs['home_library_cards'] = kwargs['home_library_cards'].split(',')
|
||||||
kwargs['home_library_cards'] = [kwargs['home_library_cards']]
|
|
||||||
|
|
||||||
plexpy.CONFIG.process_kwargs(kwargs)
|
plexpy.CONFIG.process_kwargs(kwargs)
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue