prototype fitness-progress chart

rowers/templates/fitnessmetric.html

@@ -0,0 +1,114 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load rowerfilters %}
+
+{% block title %}Rowsandall Fitness Progress {% endblock %}
+
+{% block content %}
+<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
+<script>
+  $(function() {
+  
+  // Get the form fields and hidden div
+  var checkbox = $("#id_water");
+  var hidden = $("#id_waterboattype");
+
+  
+  // Hide the fields.
+  // Use JS to do this in case the user doesn't have JS 
+  // enabled.
+
+  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("");
+    }
+  });
+});
+</script>
+
+<script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>
+<script async="true" type="text/javascript">
+  Bokeh.set_log_level("info");
+</script>
+
+{{ chartscript |safe }}
+
+<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>
+<style>
+  /* Need this to get the page in "desktop mode"; not having an infinite height.*/
+  html, body {height: 100%; margin:5px;}
+</style>
+
+
+<div id="title" class="grid_12 alpha">
+  <div class="grid_10 alpha">
+    {% if therower.user %}
+    <h3>{{ therower.user.first_name }} Fitness Progress</h3>
+    {% else %}
+    <h3>{{ user.first_name }} Fitness progress</h3>
+    {% endif %}
+  </div>
+  <div class="grid_2 omega">
+    {% if user.is_authenticated and user|is_manager %}
+    <div class="grid_2 alpha dropdown">
+      <button class="grid_2 alpha button green small dropbtn">
+        {{ therower.user.first_name }} {{ therower.user.last_name }}
+      </button>
+      <div class="dropdown-content">
+        {% for member in user|team_members %}
+        <a class="button green small"
+           href="/rowers/fitness-progress/rower/{{ member.id }}/{{ mode }}">{{ member.first_name }} {{ member.last_name }}</a>
+        {% endfor %}
+      </div>
+      {% else %}
+      &nbsp;
+    </div>
+    {% endif %}
+  </div>
+  
+  
+</div>
+
+<div id="graph" class="grid_12 alpha">
+  
+  {{ the_div|safe }}
+  
+</div>
+
+{% endblock %}