rowsandall/rowers/templates/otwrankings.html

{% extends "base.html" %}
{% load staticfiles %}
{% load rowerfilters %}

{% block scripts %}
{% include "monitorjobs.html" %}
{% endblock %}

{% block title %}Workouts{% endblock %}

{% block content %}

	<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>

	{{ interactiveplot |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, true, 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 theuser %}
    <h3>{{ theuser.first_name }}'s Ranking Pieces</h3>
    {% else %}
    <h3>{{ user.first_name }}'s Ranking Pieces</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">
        Change Rower
      </button>
      <div class="dropdown-content">
        {% for member in user|team_members %}
        {% if workouttype == 'water' %}
        <a class="button green small" href="/rowers/{{ member.id }}/otw-bests/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}">{{ member.first_name }} {{ member.last_name }}</a>
        {% else %}
        <a class="button green small" href="/rowers/{{ member.id }}/ote-ranking/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}">{{ member.first_name }} {{ member.last_name }}</a>
        {% endif %}
        {% endfor %}
    </div>
    {% else %}
    &nbsp;
    {% endif %}
  </div>
</div>

<div id="summary" class="grid_6 alpha">
	<p>Summary for {{ theuser.first_name }} {{ theuser.last_name }}
		between {{ startdate|date }} and {{ enddate|date }}</p>

	<p>Direct link for other users:
          {% if workouttype == 'water' %}
	  <a href="/rowers/{{ id }}/otw-bests/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}">https://rowsandall.com/rowers/{{ id }}/otw-bests/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}</a>
          {% else %}
          <a href="/rowers/{{ id }}/ote-ranking/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}">https://rowsandall.com/rowers/{{ id }}/ote-ranking/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}</a>
          {% endif %}
	</p>

        <p>The table gives the efforts you marked as Ranking Piece.
          The graph shows the best segments from those pieces, plotted as
          average power (over the segment) vs the duration of the segment/
          In other words: How long you can hold that power.
        </p>

        <p>When you change the date range, the algorithm calculates new
          parameters in a background process. You may have to reload the
          page to get an updated prediction.</p>
<p>At the bottom of the page, you will find predictions derived from the model.</p>
</div>
<div id="form" class="grid_6 omega">
	<p>Use this form to select a different date range:</p>
	<p>
	Select start and end date for a date range:
	<div class="grid_4 alpha">

	<form enctype="multipart/form-data" action="" method="post">

        	<table>
            	{{ dateform.as_table }}
        	</table>
        	{% csrf_token %}
	</div>
	<div class="grid_2 omega">
        <input name='daterange' class="button green" type="submit" value="Submit">	</form>
	</div>
	<div class="grid_4 alpha">
	<form enctype="multipart/form-data" action="" method="post">
	Or use the last {{ deltaform }} days.
	</div>
	<div class="grid_2 omega">
	{% csrf_token %}
        <input name='datedelta' class="button green" type="submit" value="Submit">
    	</form>
	</div>
</div>



<div id="theplot" class="grid_12 alpha">

<h2>Critical Power Plot</h2>

    {{ the_div|safe }}

</div>

<div class="grid_12 alpha">

<h2>Ranking Piece Results</h2>

	{% if rankingworkouts %}

	<table width="70%" class="listtable">
	<thead>
	<tr>
		<th> Distance</th>
		<th> Duration</th>
		<th> Avg Power</th>
		<th> Date</th>
		<th> Avg HR </th>
		<th> Max HR </th>
		<th> Edit</th>
	<tr>
	</thead>
	<tbody>
	{% for workout in rankingworkouts %}
		<tr>
			<td> {{ workout.distance }} m</td>
			<td> {{ workout.duration |durationprint:"%H:%M:%S.%f" }} </td>
                        <td> {{ avgpower|lookup:workout.id }} W</td>
			<td> {{ workout.date }} </td>
			<td> {{ workout.averagehr }} </td>
			<td> {{ workout.maxhr }} </td>
			<td> 
	<a href="/rowers/workout/{{ workout.id }}/edit">{{ workout.name }}</a> </td>

		</tr>
	
			{% endfor %}
		</tbody>
		</table>
	{% else %}
		<p> No ranking workouts found </p>
	{% endif %}

</div>

<div id="predictions" class="grid_12 alpha">
  <h2>Pace predictions for Ranking Pieces</h2>

  <p>Add non-ranking piece using the form. The piece will be added in the prediction tables below. </p>



  <div id="cpmodel" class="grid_6 alpha">
    <table width="70%" class="listtable">
      <thead>
        <tr>
	  <th> Duration</th>
	  <th> Power (upper)</th>
	  <th> Power</th>
        <tr>
      </thead>
      <tbody>
        {% for pred in cpredictions %}
        <tr>
	  {% for key, value in pred.items %}
	  {% if key == "power" or key == "upper" %}
	  <td> {{ value }} W </td>
	  {% endif %}
	  {% if key == "duration" %}
	  <td> {{ value |deltatimeprint }} </td>
	  {% endif %}
	  {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  
  </div>
  
  <div class="grid_3">
    <form enctype="multipart/form-data" action="{{ formloc }}" method="post">
      {{ form.value }} {{ form.pieceunit }}	
      
      {% csrf_token %}
  </div>
  <div class="grid_1">
    minutes
  </div>
  <div class="grid_2 omega">
    <input name="piece" class="button green"
           action=""
	   type="submit" value="Add">
  </form>
  </div>


</div>

{% endblock %}