responsive frm

rowers/interactiveplots.py

@@ -1680,6 +1680,7 @@ def performance_chart(user,startdate=None,enddate=None,kfitness=42,kfatigue=7,
                       metricchoice='trimp',doform=False,dofatigue=False):
 
     TOOLS = 'save,pan,box_zoom,wheel_zoom,reset,tap,hover,crosshair'
+    TOOLS2 = 'box_zoom,hover'
 
 
     fatigues = []
@@ -1777,18 +1778,18 @@ def performance_chart(user,startdate=None,enddate=None,kfitness=42,kfatigue=7,
         fitlabel = 'PTE (fitness)'
         fatiguelabel = 'NTE (fatigue)'
         formlabel = 'Performance'
-        rightaxlabel = 'NTE'
+        rightaxlabel = 'Performance'
-        if doform:
+        if dofatigue:
-            yaxlabel = 'PTE/Performance'
+            yaxlabel = 'PTE/NTE'
         else:
             yaxlabel = 'PTE'
     else:
         fitlabel = 'Fitness'
         fatiguelabel = 'Fatigue'
         formlabel = 'Freshness'
-        rightaxlabel = 'Fatigue'
+        rightaxlabel = 'Freshness'
-        if doform:
+        if dofatigue:
-            yaxlabel = 'Fitness/Freshness'
+            yaxlabel = 'Fitness/Fatigue'
         else:
             yaxlabel = 'Fitness'
 
@@ -1829,13 +1830,6 @@ def performance_chart(user,startdate=None,enddate=None,kfitness=42,kfatigue=7,
 
     plot.legend.location = "top_left"
 
-    #plot.xaxis.formatter = DatetimeTickFormatter(
-    #    days=["%d %B %Y"],
-    #    months=["%d %B %Y"],
-    #    years=["%d %B %Y"],
-    #    )
-
-    #plot.xaxis.major_label_orientation = pi/4
     plot.sizing_mode = 'scale_both'
 
     #plot.y_range = Range1d(0,1.5*max(df['testpower']))
@@ -1854,19 +1848,26 @@ def performance_chart(user,startdate=None,enddate=None,kfitness=42,kfatigue=7,
 
     hover = plot.select(dict(type=HoverTool))
 
+    linked_crosshair = CrosshairTool(dimensions='height')
+
     hover.tooltips = OrderedDict([
         #(legend_label,'@testpower'),
         ('Date','@fdate'),
         (fitlabel,'@fitness'),
         (fatiguelabel,'@fatigue'),
-        (formlabel,'@form')
+        (formlabel,'@form'),
+        ('Impulse','@impulse')
     ])
 
-    plot2 = Figure(tools=TOOLS,x_axis_type='datetime',
+
+
+    plot2 = Figure(tools=TOOLS2,x_axis_type='datetime',
                   plot_width=900,plot_height=150,
                   toolbar_location=None,
                   toolbar_sticky=False)
 
+    
+
     plot2.x_range  = xrange
     plot2.y_range = Range1d(0,df['impulse'].max())
 
@@ -1876,6 +1877,9 @@ def performance_chart(user,startdate=None,enddate=None,kfitness=42,kfatigue=7,
     plot2.yaxis.axis_label = 'Impulse'
     plot2.xaxis.axis_label = 'Date'
 
+    plot.add_tools(linked_crosshair)
+    plot2.add_tools(linked_crosshair)
+
     layout = layoutcolumn([plot,plot2])
     layout.sizing_mode = 'stretch_both'
 

rowers/templates/performancemanager.html

@@ -4,72 +4,72 @@
 
 {% block title %}Rowsandall Fitness Progress {% endblock %}
 
-{% block main %}
+{% block scripts %}
-<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
+<script type='text/javascript'
+        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
+</script>
 <script>
-  $(function() {
 
-  // Get the form fields and hidden div
+  function submit_form() {
-  var checkbox = $("#id_water");
+  console.log("form changed");
-  var hidden = $("#id_waterboattype");
+  var frm = $("#performanceform");
 
+  var data = new FormData(frm[0]);
 
-  // Hide the fields.
+  $.ajax({
-  // Use JS to do this in case the user doesn't have JS
+    url:"/rowers/performancemanager/user/{{ rower.user.id }}/",
-  // enabled.
+    type: "POST",
+    contentType: false,
+    processData: false,
+    data: data,
+    dataType: 'json',
 
-  hidden.hide();
+    success: function(data) {
-
+      console.log(data);
-
+      // var parsedJSON = $.parseJSON(data); //
-  // Setup an event listener for when the state of the
+      $("#id_script").replaceWith('<div id="id_script">'+data.script+'</d'+'iv>');
-  // checkbox changes.
+      $("#id_chart").replaceWith('<div id="id_chart">'+data.div+'/d'+'iv>');
-  checkbox.change(function() {
+        console.log('done');
-    // Check to see if the checkbox is checked.
-    // If it is, show the fields and populate the input.
-    // If not, hide the fields.
-    if (checkbox.is(':checked')) {
-  // Show the hidden fields.
-  hidden.show();
-  } else {
-  // Make sure that the hidden fields are indeed
-  // hidden.
-  hidden.hide();
-
-      // You may also want to clear the value of the
-      // hidden fields here. Just in case somebody
-      // shows the fields, enters data to them and then
-      // unticks the checkbox.
-      //
-      // This would do the job:
-      //
-      // $("#hidden_field").val("");
     }
   });
+};
+
+
+  $(document).ready(function() {
+  var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
+  console.log("CSRF token",csrftoken);
+
+  function csrfSafeMethod(method) {
+  // these HTTP methods do not require CSRF protection
+  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+  }
+  $.ajaxSetup({
+  beforeSend: function(xhr, settings) {
+  if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
+  xhr.setRequestHeader("X-CSRFToken", csrftoken);
+  }
+  }
+  });
+  $("#performanceform").on('change', function(evt) {
+  submit_form();
+  });
 });
-</script>
+  </script>
+{% endblock %}
+
+{% block main %}
+
 
 <script src="https://cdn.pydata.org/bokeh/release/bokeh-2.2.3.min.js"></script>
 <script async="true" type="text/javascript">
   Bokeh.set_log_level("info");
 </script>
 
-{{ chartscript |safe }}
+<div id="id_script">
+  {{ chartscript |safe }}
+</div>
+
 
-<script>
-  // Set things up to resize the plot on a window resize. You can play with
-  // the arguments of resize_width_height() to change the plot's behavior.
-  var plot_resize_setup = function () {
-  var plotid = Object.keys(Bokeh.index)[0]; // assume we have just one plot
-  var plot = Bokeh.index[plotid];
-  var plotresizer = function() {
-  // arguments: use width, use height, maintain aspect ratio
-  plot.resize_width_height(true, false, false);
-  };
-  window.addEventListener('resize', plotresizer);
-  plotresizer();
-  };
-  window.addEventListener('load', plot_resize_setup);
-</script>
 
 {% if rower.user %}
 <h1>Fitness Progress for {{ rower.user.first_name }} </h1>
@@ -77,31 +77,48 @@
 <h1>Fitness Progress for {{ user.first_name }} </h1>
 {% endif %}
 
-<p>
-  Text Explaining Performance Manager
-</p>
-
 
 <ul class="main-content">
+  <li class="grid_4">
+    <div id="id_chart">
+    {{ the_div|safe }}
+    </div>
+  </li>
   <li class="grid_2">
-    <form enctype="multipart/form-data" action="/rowers/performancemanager/user/{{ rower.user.id }}/" method="post">
+    <form id="performanceform" enctype="multipart/form-data" method="post">
       <table>
         {{ form.as_table }}
       </table>
       {% csrf_token %}
-      <input name='daterange' class="button green" type="submit" value="Submit">
+      <input name='form' class="button" type="submit" value="Submit">
     </form>
+  </li>
+  <li class="grid_2">
+    <p>
+      The Performance Manager on this page is based on scientific literature
+      on modeling human performance. A good description can be found
+      <a href="https://fellrnr.com/wiki/Modeling_Human_Performance" target="_">here</a>.
+      Every person is different. This statement has implications for training and modeling of
+      training impact. Each person differs in their response to training, diet, rest, or
+      other factors. You are an experiment of one, a unique person and all models are
+      wrong (but some are useful). Be prepared to learn from this chart, to experiment
+      and perhaps to go against established advice.
+    </p>
+    <p>
+      The chart models your performance over a time period that you can set with the form
+      on the left. The model balances out after a few weeks of regular training, so don't
+      make this chart shorter than a few months.
+    </p>
+  </li>
 
-  </li>
-  <li class="grid_4">
-    {{ the_div|safe }}
-  </li>
 </ul>
 
 
 
 {% endblock %}
 
+
+
 {% block sidebar %}
 {% include 'menu_analytics.html' %}
 {% endblock %}

rowers/templates/virtualevents.html

@@ -65,7 +65,7 @@
         {% csrf_token %}
     </p>
     <p>
-      <input name='form' class='green button' type='submit' value="Submit">
+      <input name='form' class='button' type='submit' value="Submit">
     </form>
   </p>
 </li>

rowers/views/analysisviews.py

@@ -6,6 +6,7 @@ from __future__ import unicode_literals, absolute_import
 from rowers.views.statements import *
 
 import collections
+import simplejson
 from jinja2 import Template,Environment,FileSystemLoader
 
 def floatformat(x,prec=2):
@@ -1547,6 +1548,10 @@ def performancemanager_view(request,userid=0,mode='rower',
                             startdate=timezone.now()-timezone.timedelta(days=365),
                             enddate=timezone.now()):
 
+    is_ajax = False
+    if request.is_ajax():
+        is_ajax = True
+
     therower = getrequestrower(request,userid=userid)
     theuser = therower.user
 
@@ -1590,6 +1595,14 @@ def performancemanager_view(request,userid=0,mode='rower',
         }
     ]
 
+    if is_ajax:
+        response = json.dumps({
+            'script':script,
+            'div':thediv,
+        })
+        
+        return(HttpResponse(response,content_type='application/json'))
+
 
     return render(request,'performancemanager.html',
                   {