github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-11 15:56:07 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Save graph config to local storage instead of server

Browse source
This commit is contained in:
JonnyWong16 2018-10-13 18:07:26 -07:00
parent be0144bbe1
commit 0e0fb2e2b8
4 changed files with 128 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

117
data/interfaces/default/graphs.html
View file

@ -21,56 +21,33 @@
</label> </label>
</div> </div>
<div class="btn-group" style="margin-right: 2px;" data-toggle="buttons" id="yaxis-selection"> <div class="btn-group" style="margin-right: 2px;" data-toggle="buttons" id="yaxis-selection">
% if config['graph_type'] == 'duration':
<label class="btn btn-dark"> <label class="btn btn-dark">
<input type="radio" name="yaxis-options" id="yaxis-count" value="plays" autocomplete="off"> Play Count <input type="radio" name="yaxis-options" id="yaxis-plays" value="plays" autocomplete="off"> Play Count
</label>
<label class="btn btn-dark active">
<input type="radio" name="yaxis-options" id="yaxis-duration" value="duration" autocomplete="off" checked> Play Duration
</label>
% else:
<label class="btn btn-dark active">
<input type="radio" name="yaxis-options" id="yaxis-count" value="plays" autocomplete="off" checked> Play Count
</label> </label>
<label class="btn btn-dark"> <label class="btn btn-dark">
<input type="radio" name="yaxis-options" id="yaxis-duration" value="duration" autocomplete="off"> Play Duration <input type="radio" name="yaxis-options" id="yaxis-duration" value="duration" autocomplete="off"> Play Duration
</label> </label>
% endif
</div> </div>
<div class="input-group pull-right" style="width: 1px;" id="days-selection"> <div class="input-group pull-right" style="width: 1px;" id="days-selection">
<span class="input-group-addon btn-dark inactive">Last</span> <span class="input-group-addon btn-dark inactive">Last</span>
<input type="number" class="form-control number-input" name="graph-days" id="graph-days" value="${config['graph_days']}" min="1" data-default="7" data-toggle="tooltip" title="Min: 1 day" /> <input type="number" class="form-control number-input" name="graph-days" id="graph-days" value="30" min="1" data-default="7" data-toggle="tooltip" title="Min: 1 day" />
<span class="input-group-addon btn-dark inactive">days</span> <span class="input-group-addon btn-dark inactive">days</span>
</div> </div>
<div class="input-group pull-right" style="width: 1px;" id="months-selection"> <div class="input-group pull-right" style="width: 1px;" id="months-selection">
<span class="input-group-addon btn-dark inactive">Last</span> <span class="input-group-addon btn-dark inactive">Last</span>
<input type="number" class="form-control number-input" name="graph-months" id="graph-months" value="${config['graph_months']}" min="1" data-default="12" data-toggle="tooltip" title="Min: 1 month" /> <input type="number" class="form-control number-input" name="graph-months" id="graph-months" value="12" min="1" data-default="12" data-toggle="tooltip" title="Min: 1 month" />
<span class="input-group-addon btn-dark inactive">months</span> <span class="input-group-addon btn-dark inactive">months</span>
</div> </div>
</div> </div>
</div> </div>
<div class='table-card-back'> <div class='table-card-back'>
<ul class="nav nav-pills" role="tablist" id="graph-tabs"> <ul class="nav nav-pills" role="tablist" id="graph-tabs">
% if config['graph_tab'] == 'tabs-3': <li role="presentation"><a href="#tabs-1" aria-controls="tabs-1" data-toggle="tab" role="tab">Plays by Period</a></li>
<li role="presentation"><a href="#tabs-1" aria-controls="tabs-1" data-toggle="tab" role="tab">Plays by period</a></li>
<li role="presentation"><a href="#tabs-2" aria-controls="tabs-2" data-toggle="tab" role="tab">Stream Info</a></li>
<li role="presentation" class="active"><a href="#tabs-3" aria-controls="tabs-3" data-toggle="tab" role="tab">Play Totals</a></li>
% elif config['graph_tab'] == 'tabs-2':
<li role="presentation"><a href="#tabs-1" aria-controls="tabs-1" data-toggle="tab" role="tab">Plays by period</a></li>
<li role="presentation" class="active"><a href="#tabs-2" aria-controls="tabs-2" data-toggle="tab" role="tab">Stream Info</a></li>
<li role="presentation"><a href="#tabs-3" aria-controls="tabs-3" data-toggle="tab" role="tab">Play Totals</a></li>
% else:
<li role="presentation" class="active"><a href="#tabs-1" aria-controls="tabs-1" data-toggle="tab" role="tab">Plays by period</a></li>
<li role="presentation"><a href="#tabs-2" aria-controls="tabs-2" data-toggle="tab" role="tab">Stream Info</a></li> <li role="presentation"><a href="#tabs-2" aria-controls="tabs-2" data-toggle="tab" role="tab">Stream Info</a></li>
<li role="presentation"><a href="#tabs-3" aria-controls="tabs-3" data-toggle="tab" role="tab">Play Totals</a></li> <li role="presentation"><a href="#tabs-3" aria-controls="tabs-3" data-toggle="tab" role="tab">Play Totals</a></li>
% endif
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
% if config['graph_tab'] != 'tabs-2' and config['graph_tab'] != 'tabs-3':
<div role="tabpanel" class="tab-pane active" id="tabs-1">
% else:
<div role="tabpanel" class="tab-pane" id="tabs-1"> <div role="tabpanel" class="tab-pane" id="tabs-1">
% endif
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h4><i class="fa fa-history"></i> Daily <span class="yaxis-text">Play count</span> <small>Last <span class="days">30</span> days</small></h4> <h4><i class="fa fa-history"></i> Daily <span class="yaxis-text">Play count</span> <small>Last <span class="days">30</span> days</small></h4>
@ -146,12 +123,7 @@
</div> </div>
</div> </div>
</div> </div>
% if config['graph_tab'] == 'tabs-2':
<div role="tabpanel" class="tab-pane active" id="tabs-2">
% else:
<div role="tabpanel" class="tab-pane" id="tabs-2"> <div role="tabpanel" class="tab-pane" id="tabs-2">
% endif
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h4><i class="fa fa-video-camera"></i> Daily Stream type breakdown <small>Last <span class="days">30</span> days</small></h4> <h4><i class="fa fa-video-camera"></i> Daily Stream type breakdown <small>Last <span class="days">30</span> days</small></h4>
@ -223,12 +195,7 @@
</div> </div>
</div> </div>
</div> </div>
% if config['graph_tab'] == 'tabs-3':
<div role="tabpanel" class="tab-pane active" id="tabs-3">
% else:
<div role="tabpanel" class="tab-pane" id="tabs-3"> <div role="tabpanel" class="tab-pane" id="tabs-3">
% endif
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h4><i class="fa fa-calendar"></i> Plays by month <small>Last <span class="months">12</span> months</small></h4> <h4><i class="fa fa-calendar"></i> Plays by month <small>Last <span class="months">12</span> months</small></h4>
@ -266,7 +233,7 @@
<script src="${http_root}js/dataTables.bootstrap.pagination.js"></script> <script src="${http_root}js/dataTables.bootstrap.pagination.js"></script>
<script> <script>
var selected_user_id = null var selected_user_id = null;
// Modal popup dialog // Modal popup dialog
function selectHandler(selectedDate, selectedSeries) { function selectHandler(selectedDate, selectedSeries) {
@ -321,13 +288,11 @@
return obj; return obj;
}, {}); }, {});
var new_series = data_series.map(function(s) { return data_series.map(function(s) {
var obj = Object.assign({}, s); var obj = Object.assign({}, s);
obj.visible = (chart_visibility[s.name] !== false); obj.visible = (chart_visibility[s.name] !== false);
return obj return obj
}); });
return new_series
} }
function setGraphVisibility(chart_name, data_series, series_name) { function setGraphVisibility(chart_name, data_series, series_name) {
@ -354,11 +319,19 @@
<script> <script>
$(document).ready(function () { $(document).ready(function () {
// Initial values for graph from config // Initial values for graph from local storage
var yaxis = "${config['graph_type']}"; var yaxis = getLocalStorage('graph_type', 'plays');
var current_day_range = ${config['graph_days']}; var current_day_range = getLocalStorage('graph_days', 30);
var current_month_range = ${config['graph_months']}; var current_month_range = getLocalStorage('graph_months', 12);
var current_tab = "${'#' + config['graph_tab']}"; var current_tab = '#' + getLocalStorage('graph_tab', 'tabs-1');
$('#yaxis-' + yaxis).prop('checked', true);
$('#yaxis-' + yaxis).closest('label').addClass('active');
$('#graph-days').val(current_day_range);
$('#graph-months').val(current_month_range);
$('#graph-tabs a[href="' + current_tab + '"]').closest('li').addClass('active');
$(current_tab).addClass('active');
$('.days').html(current_day_range); $('.days').html(current_day_range);
$('.months').html(current_month_range); $('.months').html(current_month_range);
@ -404,8 +377,8 @@
$.each(data.categories, function (i, day) { $.each(data.categories, function (i, day) {
dateArray.push(moment(day, 'YYYY-MM-DD').valueOf()); dateArray.push(moment(day, 'YYYY-MM-DD').valueOf());
// Highlight the weekend // Highlight the weekend
if ((moment(day, 'YYYY-MM-DD').format('ddd') == 'Sat') || if ((moment(day, 'YYYY-MM-DD').format('ddd') === 'Sat') ||
(moment(day, 'YYYY-MM-DD').format('ddd') == 'Sun')) { (moment(day, 'YYYY-MM-DD').format('ddd') === 'Sun')) {
hc_plays_by_day_options.xAxis.plotBands.push({ hc_plays_by_day_options.xAxis.plotBands.push({
from: i-0.5, from: i-0.5,
to: i+0.5, to: i+0.5,
@ -472,6 +445,8 @@
var hc_plays_by_user = new Highcharts.Chart(hc_plays_by_user_options); var hc_plays_by_user = new Highcharts.Chart(hc_plays_by_user_options);
} }
}); });
$('#graph-tabs a[href="#tabs-1"]').tab('show')
} }
function loadGraphsTab2(time_range, yaxis) { function loadGraphsTab2(time_range, yaxis) {
@ -558,6 +533,8 @@
var hc_plays_by_user_by_stream_type = new Highcharts.Chart(hc_plays_by_user_by_stream_type_options); var hc_plays_by_user_by_stream_type = new Highcharts.Chart(hc_plays_by_user_by_stream_type_options);
} }
}); });
$('#graph-tabs a[href="#tabs-2"]').tab('show')
} }
function loadGraphsTab3(time_range, yaxis) { function loadGraphsTab3(time_range, yaxis) {
@ -579,46 +556,48 @@
var hc_plays_by_month = new Highcharts.Chart(hc_plays_by_month_options); var hc_plays_by_month = new Highcharts.Chart(hc_plays_by_month_options);
} }
}); });
$('#graph-tabs a[href="#tabs-3"]').tab('show')
} }
// Set initial state // Set initial state
if (current_tab == '#tabs-1') { loadGraphsTab1(current_day_range, yaxis); } if (current_tab === '#tabs-1') { loadGraphsTab1(current_day_range, yaxis); }
if (current_tab == '#tabs-2') { loadGraphsTab2(current_day_range, yaxis); } if (current_tab === '#tabs-2') { loadGraphsTab2(current_day_range, yaxis); }
if (current_tab == '#tabs-3') { loadGraphsTab3(current_month_range, yaxis); } if (current_tab === '#tabs-3') { loadGraphsTab3(current_month_range, yaxis); }
// Tab1 opened // Tab1 opened
$('#graph-tabs a[href="#tabs-1"]').on('shown.bs.tab', function (e) { $('#graph-tabs a[href="#tabs-1"]').on('shown.bs.tab', function (e) {
e.preventDefault(); e.preventDefault();
current_tab = $(this).attr('href'); current_tab = $(this).attr('href');
loadGraphsTab1(current_day_range, yaxis); loadGraphsTab1(current_day_range, yaxis);
$.post('set_graph_config', { graph_tab: current_tab.replace('#','') }); setLocalStorage('graph_tab', current_tab.replace('#',''));
}) });
// Tab2 opened // Tab2 opened
$('#graph-tabs a[href="#tabs-2"]').on('shown.bs.tab', function (e) { $('#graph-tabs a[href="#tabs-2"]').on('shown.bs.tab', function (e) {
e.preventDefault(); e.preventDefault();
current_tab = $(this).attr('href'); current_tab = $(this).attr('href');
loadGraphsTab2(current_day_range, yaxis); loadGraphsTab2(current_day_range, yaxis);
$.post('set_graph_config', { graph_tab: current_tab.replace('#','') }); setLocalStorage('graph_tab', current_tab.replace('#',''));
}) });
// Tab3 opened // Tab3 opened
$('#graph-tabs a[href="#tabs-3"]').on('shown.bs.tab', function (e) { $('#graph-tabs a[href="#tabs-3"]').on('shown.bs.tab', function (e) {
e.preventDefault(); e.preventDefault();
current_tab = $(this).attr('href'); current_tab = $(this).attr('href');
loadGraphsTab3(current_month_range, yaxis); loadGraphsTab3(current_month_range, yaxis);
$.post('set_graph_config', { graph_tab: current_tab.replace('#','') }); setLocalStorage('graph_tab', current_tab.replace('#',''));
}) });
// Date range changed // Date range changed
$('#graph-days').tooltip({ container: 'body', placement: 'top', html: true }); $('#graph-days').tooltip({ container: 'body', placement: 'top', html: true });
$('#graph-days').on('change', function() { $('#graph-days').on('change', function() {
forceMinMax($(this)); forceMinMax($(this));
current_day_range = $(this).val(); current_day_range = $(this).val();
if (current_tab == '#tabs-1') { loadGraphsTab1(current_day_range, yaxis); } if (current_tab === '#tabs-1') { loadGraphsTab1(current_day_range, yaxis); }
if (current_tab == '#tabs-2') { loadGraphsTab2(current_day_range, yaxis); } if (current_tab === '#tabs-2') { loadGraphsTab2(current_day_range, yaxis); }
$('.days').html(current_day_range); $('.days').html(current_day_range);
$.post('set_graph_config', { graph_days: current_day_range }); setLocalStorage('graph_days', current_day_range);
}); });
// Month range changed // Month range changed
@ -626,26 +605,26 @@
$('#graph-months').on('change', function() { $('#graph-months').on('change', function() {
forceMinMax($(this)); forceMinMax($(this));
current_month_range = $(this).val(); current_month_range = $(this).val();
if (current_tab == '#tabs-3') { loadGraphsTab3(current_month_range, yaxis); } if (current_tab === '#tabs-3') { loadGraphsTab3(current_month_range, yaxis); }
$('.months').html(current_month_range); $('.months').html(current_month_range);
$.post('set_graph_config', { graph_months: current_month_range }); setLocalStorage('graph_months', current_month_range);
}); });
// User changed // User changed
$('#graph-user').on('change', function() { $('#graph-user').on('change', function() {
selected_user_id = $(this).val() || null; selected_user_id = $(this).val() || null;
if (current_tab == '#tabs-1') { loadGraphsTab1(current_day_range, yaxis); } if (current_tab === '#tabs-1') { loadGraphsTab1(current_day_range, yaxis); }
if (current_tab == '#tabs-2') { loadGraphsTab2(current_day_range, yaxis); } if (current_tab === '#tabs-2') { loadGraphsTab2(current_day_range, yaxis); }
if (current_tab == '#tabs-3') { loadGraphsTab3(current_month_range, yaxis); } if (current_tab === '#tabs-3') { loadGraphsTab3(current_month_range, yaxis); }
}); });
// Y-axis changed // Y-axis changed
$('#yaxis-selection').on('change', function() { $('#yaxis-selection').on('change', function() {
yaxis = $('input[name=yaxis-options]:checked', '#yaxis-selection').val(); yaxis = $('input[name=yaxis-options]:checked', '#yaxis-selection').val();
if (current_tab == '#tabs-1') { loadGraphsTab1(current_day_range, yaxis); } if (current_tab === '#tabs-1') { loadGraphsTab1(current_day_range, yaxis); }
if (current_tab == '#tabs-2') { loadGraphsTab2(current_day_range, yaxis); } if (current_tab === '#tabs-2') { loadGraphsTab2(current_day_range, yaxis); }
if (current_tab == '#tabs-3') { loadGraphsTab3(current_month_range, yaxis); } if (current_tab === '#tabs-3') { loadGraphsTab3(current_month_range, yaxis); }
$.post('set_graph_config', { graph_type: yaxis }); setLocalStorage('graph_type', yaxis);
}); });
function setGraphFormat(type) { function setGraphFormat(type) {

10
data/interfaces/default/js/script.js
View file

@ -520,8 +520,14 @@ function PopupCenter(url, title, w, h) {
function setLocalStorage(key, value) { function setLocalStorage(key, value) {
localStorage.setItem(key, value); localStorage.setItem(key, value);
} }
function getLocalStorage(key) { function getLocalStorage(key, default_value) {
return localStorage.getItem(key); var value = localStorage.getItem(key);
if (value !== null) {
return value
} else if (default_value) {
setLocalStorage(key, default_value);
return default_value
}
} }
if (!getLocalStorage('Tautulli_ClientId')) { if (!getLocalStorage('Tautulli_ClientId')) {

4
plexpy/config.py
View file

@ -182,10 +182,6 @@ _CONFIG_DEFINITIONS = {
'GIT_TOKEN': (str, 'General', ''), 'GIT_TOKEN': (str, 'General', ''),
'GIT_USER': (str, 'General', 'Tautulli'), 'GIT_USER': (str, 'General', 'Tautulli'),
'GIT_REPO': (str, 'General', 'Tautulli'), 'GIT_REPO': (str, 'General', 'Tautulli'),
'GRAPH_TYPE': (str, 'General', 'plays'),
'GRAPH_DAYS': (int, 'General', 30),
'GRAPH_MONTHS': (int, 'General', 12),
'GRAPH_TAB': (str, 'General', 'tabs-1'),
'GROUP_HISTORY_TABLES': (int, 'General', 1), 'GROUP_HISTORY_TABLES': (int, 'General', 1),
'GROWL_ENABLED': (int, 'Growl', 0), 'GROWL_ENABLED': (int, 'Growl', 0),
'GROWL_HOST': (str, 'Growl', ''), 'GROWL_HOST': (str, 'Growl', ''),

18
plexpy/webserve.py
View file

@ -1849,24 +1849,6 @@ class WebInterface(object):
return serve_template(templatename="graphs.html", title="Graphs", config=config) return serve_template(templatename="graphs.html", title="Graphs", config=config)
@cherrypy.expose
@requireAuth(member_of("admin"))
def set_graph_config(self, graph_type=None, graph_days=None, graph_months=None, graph_tab=None, **kwargs):
if graph_type:
plexpy.CONFIG.__setattr__('GRAPH_TYPE', graph_type)
plexpy.CONFIG.write()
if graph_days:
plexpy.CONFIG.__setattr__('GRAPH_DAYS', graph_days)
plexpy.CONFIG.write()
if graph_months:
plexpy.CONFIG.__setattr__('GRAPH_MONTHS', graph_months)
plexpy.CONFIG.write()
if graph_tab:
plexpy.CONFIG.__setattr__('GRAPH_TAB', graph_tab)
plexpy.CONFIG.write()
return "Updated graphs config values."
@cherrypy.expose @cherrypy.expose
@cherrypy.tools.json_out() @cherrypy.tools.json_out()
@requireAuth() @requireAuth()