slightly working prototype

only boxplot implemented, doesn't change y param

rowers/templates/user_analysis_select.html

@@ -0,0 +1,158 @@
+{% extends "newbase.html" %}
+{% load staticfiles %}
+{% load rowerfilters %}
+
+{% block title %}Workouts{% endblock %}
+
+{% block main %}
+<script>
+  function toggle(source) {
+  checkboxes = document.querySelectorAll("input[name='workouts']");
+  for(var i=0, n=checkboxes.length;i<n;i++) {
+       checkboxes[i].checked = source.checked;
+  }
+ }
+</script>
+<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
+<script>
+  $(function() {
+  
+  // Get the form fields and hidden div
+  var modality = $("#id_modality");
+  var hidden = $("#id_waterboattype");
+
+  
+  // Hide the fields.
+  // Use JS to do this in case the user doesn't have JS 
+  // enabled.
+
+  hidden.hide();
+
+  if (modality.val() == 'water') {
+  hidden.show();
+  }
+
+  
+  // Setup an event listener for when the state of the 
+  // checkbox changes.
+  modality.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.
+    var Value = modality.val();
+    if (Value=='water') {
+  // 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("");
+    }
+  });
+
+
+  });
+</script>
+
+<script src="https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.min.js"></script>
+<script async="true" type="text/javascript">
+  Bokeh.set_log_level("info");
+</script>
+
+<div id="id_script">
+</div>
+
+<ul class="main-content">
+  <li class="grid_4">
+    <div id="id_chart">
+      {{ the_div|safe }}
+    </div>
+  </li>
+  <li class="grid_4">
+    <p>You can use the date and search forms to search through all
+      workouts from this team.</p>
+    <p>TIP: Agree with your team members to put tags (e.g. '8x500m') in the notes section of
+      your workouts. That makes it easy to search.</p>
+  </li>
+  <li class="grid_2 maxheight">
+    <form id="searchform" action=""
+          method="get" accept-charset="utf-8">
+      {{ searchform }}
+      <input type="submit" value="GO"></input>
+    </form>
+    <form enctype="multipart/form-data" action="" method="post">
+      
+      {% if workouts %}
+      
+      <input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
+      <table width="100%" class="listtable">
+	{{ form.as_table }}
+      </table>
+      {% else %}
+      <p> No workouts found </p>
+      {% endif %}
+  </li>
+  <li class="grid_2">
+    <p>Select two or more workouts, set your plot settings below,
+      and press submit
+    </p>
+    {% csrf_token %}
+    <table>
+      {{ chartform.as_table }}
+    </table>
+  </li>
+  <li class="grid_2">
+    <form enctype="multipart/form-data" method="post">
+      <table>
+        {{ dateform.as_table }}
+      </table>
+      <table>
+        {{ optionsform.as_table }}
+      </table>
+      {% csrf_token %}
+      <input name='optionsform' type="submit" value="Submit">
+    </form>
+  </li>
+</ul>
+
+
+{% endblock %}
+
+{% block scripts %}
+{% if request.method == 'POST' %}
+<script type='text/javascript'
+        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
+</script>
+
+<script>
+  $(function($) {
+  console.log('loading script');
+  $.getJSON(window.location.protocol + '//'+window.location.host + '/rowers/analysisdata/', function(json) {
+  var counter=0;
+  var script = json.script;
+  var div = json.div;
+  $("#id_sitready").remove();
+  $("#id_chart").append(div);
+  console.log(div);
+  $("#id_script").append("<script>"+script+"</s"+"cript>");
+
+  });
+  });
+  </script>
+
+{% endif %}
+
+{% endblock %}
+
+{% block sidebar %}
+{% include 'menu_analytics.html' %}
+{% endblock %}