responsive frm

rowers/templates/performancemanager.html

@@ -4,72 +4,72 @@
 
 {% block title %}Rowsandall Fitness Progress {% endblock %}
 
-{% block main %}
-<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
+{% block scripts %}
+<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
-  var checkbox = $("#id_water");
-  var hidden = $("#id_waterboattype");
+  function submit_form() {
+  console.log("form changed");
+  var frm = $("#performanceform");
 
+  var data = new FormData(frm[0]);
 
-  // Hide the fields.
-  // Use JS to do this in case the user doesn't have JS
-  // enabled.
+  $.ajax({
+    url:"/rowers/performancemanager/user/{{ rower.user.id }}/",
+    type: "POST",
+    contentType: false,
+    processData: false,
+    data: data,
+    dataType: 'json',
 
-  hidden.hide();
-
-
-  // Setup an event listener for when the state of the
-  // checkbox changes.
-  checkbox.change(function() {
-    // 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("");
+    success: function(data) {
+      console.log(data);
+      // var parsedJSON = $.parseJSON(data); //
+      $("#id_script").replaceWith('<div id="id_script">'+data.script+'</d'+'iv>');
+      $("#id_chart").replaceWith('<div id="id_chart">'+data.div+'/d'+'iv>');
+        console.log('done');
     }
   });
+};
+
+
+  $(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 %}