{% extends "newbase.html" %}
{% load staticfiles %}
{% load rowerfilters %}
{% load tz %}

{% block title %}Change Workout {% endblock %}

{% block scripts %}
{% include "monitorjobs.html" %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
		console.log({{ activeminutesmin }}, {{ activeminutesmax}}, 'active range');
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: {{ maxminutes }},
      values: [ {{ activeminutesmin }}, {{ activeminutesmax }} ],
      slide: function( event, ui ) {
        $( "#amount" ).val(ui.values[ 0 ] + " min - " + ui.values[ 1 ] + " min " );
				$("#id_activeminutesmin").val(ui.values[0]);
				$("#id_activeminutesmax").val(ui.values[1]);
      }
    });
    $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
      " min - " + $( "#slider-range" ).slider( "values", 1 ) + " min ");
  } );
  </script>
{% endblock %}

{% block main %}
<p>
  {% if workout|previousworkout:rower.user %}
  <a href="/rowers/workout/{{ workout|previousworkout:rower.user }}/editintervals/"
     title="Jump to preceding workout"><em>Previous</em></a>&nbsp;
  {% endif %}
  {% if workout|nextworkout:rower.user %}
  <a href="/rowers/workout/{{ workout|nextworkout:rower.user }}/editintervals/"
     title="Jump to following workout"><em>Next</em></a>
  {% endif %}
</p>

<h1>Edit Workout Interval Data</h1>
<ul class="main-content">
  <li class="grid_2">
    <table width=100%>
      <tr>
        <th>Name</th><td>{{ workout.name }}</td>
      </tr><tr>
        <th>Distance:</th><td>{{ workout.distance }}m</td>
      </tr><tr>
        <th>Duration:</th><td>{{ workout.duration |durationprint:"%H:%M:%S.%f" }}</td>
      </tr><tr>
        <th>Public link to this workout</th>
        <td>
	  <a href="/rowers/workout/{{ workout.id|encode }}/">https://rowsandall.com/rowers/workout/{{ workout.id|encode }}</a>
        <td>
      </tr>
    </table>
    <h1>Interval Shorthand</h1>
    <p>
      See the how-to <a href="#howto">at the bottom of this page</a> for details on how to use this form.
    </p>
    <form enctype="multipart/form-data" action="/rowers/workout/{{ workout.id|encode }}/editintervals/" method="post">
      <table width=100%>
        {{ form.as_table }}
      </table>
      {% csrf_token %}
      <input class="button" type="submit" value="Update">
    </form>
    <h1>Intervals by Power/Pace</h1>

    <p>With this form, you can specify a power or pace level. Everything faster/harder than the
      specified pace/power will become a work interval. Everything slower will become a rest
      interval. Use the slider to limit the active range. Everything outside the active range will
			become rest (warming up and cooling down).
    </p>

    <form ecntype="multipart/form-data" method="post">
			<div id="slider-range"></div>
			<p>
				<label for="amount">Active Range:</label>
				<input type="text" id="amount" readonly style="border:0; color:#1c75bc; font-weight:bold;">
			</p>
      <table>
        {{ powerupdateform.as_table }}
      </table>

      {% csrf_token %}
      <input class="button" type="submit" value="Submit">
    </form>
  </li>
  <li class="grid_2">
    <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>

    {{ interactiveplot |safe }}

    {{ the_div |safe }}
  </li>
  <li class="grid_2">
    <h1>Updated Summary</h1>
    <form enctype="multipart/form-data" action="/rowers/workout/{{ workout.id|encode }}/editintervals/" method="post">
      {% csrf_token %}
      <input type="hidden" name="{{ savebutton }}" value="{{ intervalstring }}">
      <input type="hidden" name="nrintervals" value={{ nrintervals }}>
      {% for key,value in formvalues.items %}
      <input type="hidden" name="{{ key }}" value="{{ value|safe }}">
      {% endfor %}
      {% for field in detailform %}
      {{ field.as_hidden }}
      {% endfor %}
      <p>
        <input type="submit" value="Save">
      </p>
      <span>
        <a href="">Reset to last saved</a>
        &nbsp;
        <a href="/rowers/workout/{{ workout.id|encode }}/restore/">Restore Original data</a>
      </span>
    </form>
    <p>
      <pre>
        {{ intervalstats }}
      </pre>
    </p>
  </li>
  <li class="grid_2">
    <h1>Detailed Summary Edit</h1>
    <p>This is still experimental and there are known bugs. Use at your own risk. Nothing is stored permanently until you hit Save in the Updated Summary section. You can use the restore original button to restore the original values.</p>
    <form enctype="multipart/form-data" action="/rowers/workout/{{ workout.id|encode }}/editintervals/" method="post">
      <table width=100%>
        <thead>
          <tr>
            <th>#</th><th>Time</th><th>Distance</th><th>Type</th>
          </tr>
        </thead>
        <tbody>
          {% for i in nrintervals|times %}
          <tr>
            <td>{{ i }}&nbsp;</td>
	    <td>
	      {% get_field_id i "intervalt_" detailform %}
	    </td>
	    <td>
	      {% get_field_id i "intervald_" detailform %}
	    </td>
	    <td>
	      {% get_field_id i "type_" detailform %}
	    </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% csrf_token %}
      <input type="hidden" name="nrintervals" value={{ nrintervals }}>
      <input class="button" type="submit" value="Update">
    </form>
  </li>
  <li class="grid_4">
    <h1 id="howto">Interval Shorthand How-To</h1>
    <p>This is a quick way to enter the intervals using a special mini-language.</p>
    <p>You enter something like <em>8x500m/3min</em>, press "Update" and the site will interpret this for you and update the summary on the right. If you're happy with the result, press the green Save button to update the values. Nothing will be changed permanently until you hit Save.</p>

    <p>Special characters are <em>x</em> (times), <em>+</em> and <em>/</em> (denotes a rest interval), as well as <em>(</em> and <em>)</em>. Units are <em>min</em> (minutes), <em>sec</em> (seconds), <em>m</em> (meters) and <em>km</em> (km). </p>

    <p>A typical interval is described as "<b>10min/5min</b>", with the work part before the "<b>/</b>" and the rest part after it. A zero rest can be omitted, so a single 1000m piece could be described either as "<b>1km</b>" or "<b>1000m</b>". The basic units can be combined with "<b>+</b>" and "<b>Nx</b>". You can use parentheses as in the example below.</p>

    <p>Here are a few examples.</p>
    <table class="listtable" width=100%>
      <tr>
        <td>8x500m/2min</td><td>8 times 500m with 2 minutes rest</td>
      </tr>
      <tr>
        <td>10km</td><td>Single distance of 10km</td>
      </tr>
      <tr>
        <td>6min/3min + 5min/3min + 3min/3min + 3min </td>
        <td>Four intervals of 6, 5, 3 and 3 minutes length, 3 minutes rest</td>
      </tr>
      <tr>
        <td>8x500m/3:30min </td>
        <td>8 times 500m with 3 minutes 30 seconds rest</td>
      </tr>
      <tr>
        <td>4x((500m+500m)/5min)</td><td>4 times 1km, but each km is reported as two 500m intervals without rest. Note the nested parentheses.</td>
      </tr>
      <tr>
        <td>2x500m/500m</td><td>A 2k rowed as 500m "on", 500m "off"</td>
      </tr>
    </table>
  </li>
</ul>
{% endblock %}


{% block sidebar %}
{% include 'menu_workout.html' %}
{% endblock %}