Add simple way to adjust date ranges on the graphs page

This commit is contained in:
Tim 2015-06-24 20:02:20 +02:00
parent 9ca9b5e9ae
commit 54ee7f4c0d

View file

@ -25,8 +25,15 @@ from plexpy import helpers
<div class="wellbg"> <div class="wellbg">
<div class="wellheader"> <div class="wellheader">
<div class="dashboard-wellheader"> <div class="dashboard-wellheader">
<div id="currentActivityHeader"> <div class="span12">
<h4>Daily Watch History (Past 30 days)</h4> <div class="span8"><h4>Daily Watch History (Past <span class="days">30</span> days)</h4></div>
<div class="span4" style="text-align: right; padding-right: 30px;">
<h5>
<a href="javascript:void(0)" id="graph-30"> 30 days</a> |
<a href="javascript:void(0)" id="graph-90"> 90 days</a> |
<a href="javascript:void(0)" id="graph-365"> 1 year</a>
</h5>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -43,7 +50,7 @@ from plexpy import helpers
<div class="span6"> <div class="span6">
<div class="wellheader"> <div class="wellheader">
<div class="dashboard-wellheader"> <div class="dashboard-wellheader">
<h4>Watches by day of week (Past 30 days)</h4> <h4>Watches by day of week (Past <span class="days">30</span> days)</h4>
</div> </div>
</div> </div>
<div class="graphs-instance"> <div class="graphs-instance">
@ -55,7 +62,7 @@ from plexpy import helpers
<div class="span6"> <div class="span6">
<div class="wellheader"> <div class="wellheader">
<div class="dashboard-wellheader"> <div class="dashboard-wellheader">
<h4>Watches by hour of day (Past 30 days)</h4> <h4>Watches by hour of day (Past <span class="days">30</span> days)</h4>
</div> </div>
</div> </div>
<div class="graphs-instance"> <div class="graphs-instance">
@ -80,10 +87,15 @@ from plexpy import helpers
<script src="interfaces/default/js/graphs/plays_by_hourofday.js"></script> <script src="interfaces/default/js/graphs/plays_by_hourofday.js"></script>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
var current_range = 30;
function loadGraphs(time_range) {
$.ajax({ $.ajax({
url: "get_plays_by_date", url: "get_plays_by_date",
type: 'get', type: 'get',
data: { time_range: '30' }, data: { time_range: time_range },
dataType: "json", dataType: "json",
cache: false, cache: false,
success: function(data) { success: function(data) {
@ -101,7 +113,7 @@ from plexpy import helpers
$.ajax({ $.ajax({
url: "get_plays_by_dayofweek", url: "get_plays_by_dayofweek",
type: 'get', type: 'get',
data: { time_range: '30' }, data: { time_range: time_range },
dataType: "json", dataType: "json",
cache: false, cache: false,
success: function(data) { success: function(data) {
@ -114,7 +126,7 @@ from plexpy import helpers
$.ajax({ $.ajax({
url: "get_plays_by_hourofday", url: "get_plays_by_hourofday",
type: 'get', type: 'get',
data: { time_range: '30' }, data: { time_range: time_range },
dataType: "json", dataType: "json",
cache: false, cache: false,
success: function(data) { success: function(data) {
@ -123,6 +135,29 @@ from plexpy import helpers
var hc_plays_by_hourofday = new Highcharts.Chart(hc_plays_by_hourofday_options); var hc_plays_by_hourofday = new Highcharts.Chart(hc_plays_by_hourofday_options);
} }
}); });
}
// Set initial state
loadGraphs(current_range);
$('#graph-30').click(function() {
current_range = 30;
$('.days').html(current_range);
loadGraphs(30);
});
$('#graph-90').click(function() {
current_range = 90;
$('.days').html(current_range);
loadGraphs(90);
});
$('#graph-365').click(function() {
current_range = 365;
$('.days').html(current_range);
loadGraphs(365);
});
}); });
</script> </script>
</%def> </%def>