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

{% block title %}Rowsandall Fitness Progress {% endblock %}

{% block scripts %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
<script>

  function submit_form() {
  console.log("form changed");
  var frm = $("#performanceform");

  var data = new FormData(frm[0]);

  $.ajax({
    url:"/rowers/performancemanager/user/{{ rower.user.id }}/",
    type: "POST",
    contentType: false,
    processData: false,
    data: data,
    dataType: 'json',

    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>');
        $("#endfitness").html(data.endfitness)
        $("#endfatigue").html(data.endfatigue)
        $("#endform").html(data.endform)
        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>
{% 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>

<div id="id_script">
  {{ chartscript |safe }}
</div>



{% if rower.user %}
<h1>Fitness Progress for {{ rower.user.first_name }} </h1>
{% else %}
<h1>Fitness Progress for {{ user.first_name }} </h1>
{% endif %}


<ul class="main-content">
  <li class="grid_4">
    <div id="id_chart">
    {{ the_div|safe }}
    </div>
  </li>
  <li class="grid_1">
    <form id="performanceform" enctype="multipart/form-data" method="post">
      <table>
        {{ form.as_table }}
      </table>
      {% csrf_token %}
      <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>
    <p>
      For this chart to reflect your fitness and freshness, it is important to have all workouts on
      Rowsandall.com. You can automatically import workouts from other fitness platforms. Change
      your <a href="/rowers/me/exportsettings/">Import and Export Settings here.</a>
    </p>
    <p>
        The time constants used in generating this performance chart were
        a fitness decay constant of {{ rower.kfit }} days
        and a fatigue decay constant of {{ rower.kfatigue }} days.
        You can change these values in your  <a href="/rowers/me/preferences/">Profile Settings</a>.
    </p>
  </li>
  <li class="grid_1">
    <div class="rounder">
      <p>
      <table width="100%">
        <tbody>
        <tr>
          <td><h2>Fitness</h2></td><td><h2><span id="endfitness">{{ endfitness }}</span></h2></td>
        </tr>
        <tr>
          <td><h2>Fatigue</h2></td><td><h2><span id="endfatigue"> {{ endfatigue }}</span></h2></td>
        </tr>
        <tr>
          <td><h2>Freshness</h2></td><td><h2><span id="endform"> {{ endform }}</span></h2></td>
        </tr>
        </tbody>
      </table>
      </p>
    </div>
  </li>
</ul>



{% endblock %}



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