From 54ee7f4c0d15498d6e242bf1e172d3d0808daf4f Mon Sep 17 00:00:00 2001
From: Tim <timvdwest@gmail.com>
Date: Wed, 24 Jun 2015 20:02:20 +0200
Subject: [PATCH] Add simple way to adjust date ranges on the graphs page

---
 data/interfaces/default/graphs.html | 117 ++++++++++++++++++----------
 1 file changed, 76 insertions(+), 41 deletions(-)

diff --git a/data/interfaces/default/graphs.html b/data/interfaces/default/graphs.html
index e3a939a5..5460c782 100644
--- a/data/interfaces/default/graphs.html
+++ b/data/interfaces/default/graphs.html
@@ -25,8 +25,15 @@ from plexpy import helpers
             <div class="wellbg">
                 <div class="wellheader">
                     <div class="dashboard-wellheader">
-                        <div id="currentActivityHeader">
-                            <h4>Daily Watch History (Past 30 days)</h4>
+                        <div class="span12">
+                            <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>
@@ -43,7 +50,7 @@ from plexpy import helpers
                         <div class="span6">
                             <div class="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 class="graphs-instance">
@@ -55,7 +62,7 @@ from plexpy import helpers
                         <div class="span6">
                             <div class="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 class="graphs-instance">
@@ -80,49 +87,77 @@ from plexpy import helpers
 <script src="interfaces/default/js/graphs/plays_by_hourofday.js"></script>
 <script>
     $(document).ready(function () {
-        $.ajax({
-            url: "get_plays_by_date",
-            type: 'get',
-            data: { time_range: '30' },
-            dataType: "json",
-            cache: false,
-            success: function(data) {
-                var dateArray = [];
-                for (var i = 0; i < data.categories.length; i++) {
-                    dateArray.push(moment(data.categories[i]).valueOf());
+
+        var current_range = 30;
+
+        function loadGraphs(time_range) {
+
+            $.ajax({
+                url: "get_plays_by_date",
+                type: 'get',
+                data: { time_range: time_range },
+                dataType: "json",
+                cache: false,
+                success: function(data) {
+                    var dateArray = [];
+                    for (var i = 0; i < data.categories.length; i++) {
+                        dateArray.push(moment(data.categories[i]).valueOf());
+                    }
+                    hc_plays_by_day_options.yAxis.min = 0;
+                    hc_plays_by_day_options.xAxis.categories = dateArray;
+                    hc_plays_by_day_options.series = data.series;
+                    var hc_plays_by_day = new Highcharts.Chart(hc_plays_by_day_options);
                 }
-                hc_plays_by_day_options.yAxis.min = 0;
-                hc_plays_by_day_options.xAxis.categories = dateArray;
-                hc_plays_by_day_options.series = data.series;
-                var hc_plays_by_day = new Highcharts.Chart(hc_plays_by_day_options);
-            }
+            });
+
+            $.ajax({
+                url: "get_plays_by_dayofweek",
+                type: 'get',
+                data: { time_range: time_range },
+                dataType: "json",
+                cache: false,
+                success: function(data) {
+                    hc_plays_by_dayofweek_options.xAxis.categories = data.categories;
+                    hc_plays_by_dayofweek_options.series = data.series;
+                    var hc_plays_by_dayofweek = new Highcharts.Chart(hc_plays_by_dayofweek_options);
+                }
+            });
+
+            $.ajax({
+                url: "get_plays_by_hourofday",
+                type: 'get',
+                data: { time_range: time_range },
+                dataType: "json",
+                cache: false,
+                success: function(data) {
+                    hc_plays_by_hourofday_options.xAxis.categories = data.categories;
+                    hc_plays_by_hourofday_options.series = data.series;
+                    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);
         });
 
-        $.ajax({
-            url: "get_plays_by_dayofweek",
-            type: 'get',
-            data: { time_range: '30' },
-            dataType: "json",
-            cache: false,
-            success: function(data) {
-                hc_plays_by_dayofweek_options.xAxis.categories = data.categories;
-                hc_plays_by_dayofweek_options.series = data.series;
-                var hc_plays_by_dayofweek = new Highcharts.Chart(hc_plays_by_dayofweek_options);
-            }
+        $('#graph-90').click(function() {
+            current_range = 90;
+            $('.days').html(current_range);
+            loadGraphs(90);
         });
 
-        $.ajax({
-            url: "get_plays_by_hourofday",
-            type: 'get',
-            data: { time_range: '30' },
-            dataType: "json",
-            cache: false,
-            success: function(data) {
-                hc_plays_by_hourofday_options.xAxis.categories = data.categories;
-                hc_plays_by_hourofday_options.series = data.series;
-                var hc_plays_by_hourofday = new Highcharts.Chart(hc_plays_by_hourofday_options);
-            }
+        $('#graph-365').click(function() {
+            current_range = 365;
+            $('.days').html(current_range);
+            loadGraphs(365);
         });
+
     });
 </script>
 </%def>
\ No newline at end of file