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

{% block title %}Analysis{% 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 src="https://d3js.org/d3.v6.js"></script>
<script>
  $(function() {
      
      // Get the form fields and hidden div
      var modality = $("#id_modality");
      var hidden = $("#id_waterboattype");
      var boattypes = {
	  '1x': '1x (single)',
	  '2x': '2x (double)',
	  '2x+': '2x+ (coxed double)',
	  '2-': '2- (pair)',
	  '2+': '2+ (coxed pair)',
	  '3x+': '3x+ (coxed triple)',
	  '3x-': '3x- (triple)',
	  '4x': '4x (quad)',
	  '4x+': '4x+ (coxed quad)',
	  '4-': '4- (four)',
	  '4+': '4+ (coxed four)',
	  '8+': '8+ (eight)',
	  '8x+': '8x+ (octuple scull)',
      }
      
      var ergtypes = {
	  'static': 'Concept2 static',
	  'dynamic': 'Concept2 dynamic',
	  'slides': 'Concept2 slides',
	  'rp3': 'RP3',
	  'waterrower': 'Water Rower',
	  'other': 'Other Indoor Rower',	  
      }


      // 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();
	  var $el = $('#id_waterboattype');
	  $el.empty();
	  $.each(boattypes, function(key,value) {
	      $el.append($("<option></option").attr("value", key).attr("selected", "selected").text(value));
	  });
	  $el.toggle(true);
      } else if  (modality.val() == 'rower') {
	  hidden.show();
	  var $el = $('#id_waterboattype');
	  $el.empty();
	  $.each(ergtypes, function(key,value) {
	      $el.append($("<option></option").attr("value", key).attr("selected", "selected").text(value));
	  });
	  $el.toggle(true);	  
      }


      // 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();
	  var otwtypes = ['water','coastal','c-boat','churchboat']
	  if (otwtypes.includes(Value)) {
	      // Show the hidden fields.
	      hidden.show();
	      var $el = $('#id_waterboattype');
	      var $label = $("label[for='"+$el.attr('id') + "']")
	      $el.empty();
	      $.each(boattypes, function(key,value) {
		  $el.append($("<option></option").attr("value", key).attr("selected", "selected").text(value));
	      });
	      $label.text("Water Boat Type")
	      $el.toggle(true);
	  } else if (Value == 'rower') {
	      hidden.show();
	      var $el = $('#id_waterboattype');
	      var $label = $("label[for='"+$el.attr('id') + "']")
	      $el.empty();
	      $.each(ergtypes, function(key,value) {
		  $el.append($("<option></option").attr("value", key).attr("selected", "selected").text(value));
	      });
	      $label.text("Erg Boat Type")
	      $el.toggle(true);	      
	  } 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>
  // script for chart options form
  $(function() {

      // Get the form fields and hidden div
      var functionfield = $("#id_function");
      var plotfield = $("#id_plotfield").parent().parent();
      var x_param = $("#id_xparam").parent().parent();
      var y_param = $("#id_yparam").parent().parent();

      var groupby = $("#id_groupby").parent().parent();
      var binsize = $("#id_binsize").parent().parent();
      var errorbars = $("#id_ploterrorbars").parent().parent();
      var palette = $("#id_palette").parent().parent();
      var spmmin = $("#id_spmmin").parent().parent();
      var spmmax = $("#id_spmmax").parent().parent();
      var workmin = $("#id_workmin").parent().parent();
      var workmax = $("#id_workmax").parent().parent();

      var xaxis = $("#id_xaxis").parent().parent();
      var yaxis1 = $("#id_yaxis1").parent().parent();
      var yaxis2 = $("#id_yaxis2").parent().parent();
      var plottype = $("#id_plottype").parent().parent();

			var reststrokes = $("#id_includereststrokes").parent().parent();
			var trendline = $("#id_trendline").parent().parent();
			var piece = $("#id_piece").parent().parent();
			var cpfit = $("#id_cpfit").parent().parent();
			var cpoverlay = $("#id_cpoverlay").parent().parent();


      // Hide the fields.
      // Use JS to do this in case the user doesn't have JS
      // enabled.
      plotfield.hide();
      x_param.hide();
      y_param.hide();
      groupby.hide();
      errorbars.hide();
      palette.hide();
      binsize.hide();
      xaxis.hide();
      yaxis1.hide();
      yaxis2.hide();
      plottype.hide();
			// reststrokes.hide();
			workmin.hide();
			workmax.hide();
			spmmin.hide();
			spmmax.hide();
			cpfit.hide();
			cpoverlay.hide();
			piece.hide();
			trendline.hide();

      if (functionfield.val() == 'boxplot') {
	  plotfield.show();
      };

      if (functionfield.val() == 'histo') {
	  plotfield.show()
      };

      if (functionfield.val() == 'trendflex') {
	  x_param.show();
	  y_param.show();
	  groupby.show();
	  palette.show();
	  binsize.show();
	  errorbars.show();
		workmin.show();
		workmax.show();
      };

      if (functionfield.val() == 'flexall') {
	  xaxis.show();
	  yaxis1.show();
	  yaxis2.show();
		trendline.show();
      }

      if (functionfield.val() == 'stats') {
	  plotfield.hide();
      }

      if (functionfield.val() == 'compare') {
	  xaxis.show();
	  yaxis1.show();
	  plottype.show();
		piece.hide();
		reststrokes.show();
      }

			if (functionfield.val() == 'cp') {
				cpfit.show();
				piece.show();
				cpoverlay.show();
			}


      // Setup an event listener for when the state of the
      // checkbox changes.
      functionfield.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 = functionfield.val();
	  if (Value=='boxplot') {
	      // Show the hidden fields.
	      plotfield.show();
	      spmmin.show();
	      spmmax.show();
	      workmin.show();
	      workmax.show();
	      x_param.hide();
	      y_param.hide();
	      groupby.hide();
	      palette.hide();
	      binsize.hide();
	      errorbars.hide();
				trendline.hide();
	      xaxis.hide();
	      yaxis1.hide();
	      yaxis2.hide();
	      plottype.hide();
				reststrokes.show();
				cpfit.hide();
				cpoverlay.hide();
				piece.hide();
	  }
	  else if (Value=='histo') {
	      plotfield.show();
	      spmmin.show();
	      spmmax.show();
	      workmin.show();
	      workmax.show();
	      x_param.hide();
	      y_param.hide();
	      groupby.hide();
	      palette.hide();
	      binsize.hide();
				trendline.hide();
	      errorbars.hide();
	      xaxis.hide();
	      yaxis1.hide();
	      yaxis2.hide();
	      plottype.hide();
				reststrokes.show();
				cpfit.hide();
				cpoverlay.hide();
				piece.hide();

	  }
	  else if (Value=='trendflex') {
	      x_param.show();
	      y_param.show();
	      groupby.show();
	      palette.show();
	      binsize.show();
	      errorbars.show();
	      spmmin.show();
	      spmmax.show();
	      workmin.show();
				trendline.hide();
	      workmax.show();
	      plotfield.hide();
	      xaxis.hide();
	      yaxis1.hide();
	      yaxis2.hide();
	      plottype.hide();
				reststrokes.show();
				cpfit.hide();
				cpoverlay.hide();
				piece.hide();

	  }
	  else if (Value=='flexall') {
	      xaxis.show();
	      yaxis1.show();
	      yaxis2.show();
	      x_param.hide();
	      y_param.hide();
	      groupby.hide();
	      spmmin.hide();
				trendline.show();
	      spmmax.hide();
	      workmin.hide();
	      workmax.hide();
	      plotfield.hide();
	      palette.hide();
	      binsize.hide();
	      plottype.hide();
	      errorbars.hide();
				reststrokes.show();
				cpfit.hide();
				cpoverlay.hide();
				piece.hide();
	  }
	  else if (Value=='stats') {
	      xaxis.hide();
	      yaxis1.hide();
	      yaxis2.hide();
	      x_param.hide();
	      y_param.hide();
	      groupby.hide();
	      plotfield.hide();
	      palette.hide();
	      binsize.hide();
	      errorbars.hide();
	      plottype.hide();
				trendline.hide();
				reststrokes.show();
				cpfit.hide();
				cpoverlay.hide();
				piece.hide();
	  }
	  else if (Value=='compare') {
	      xaxis.show();
	      yaxis1.show();
	      yaxis2.hide();
	      x_param.hide();
	      y_param.hide();
	      groupby.hide();
	      spmmin.hide();
	      spmmax.hide();
	      workmin.hide();
	      workmax.hide();
	      plotfield.hide();
	      palette.hide();
				trendline.hide();
	      binsize.hide();
	      plottype.show();
	      errorbars.hide();
				piece.hide();
				cpfit.hide();
				cpoverlay.hide();
				reststrokes.show();


	  }
		else if (Value=='cp') {
	      plotfield.hide();
	      spmmin.hide();
	      spmmax.hide();
	      workmin.hide();
	      workmax.hide();
	      x_param.hide();
	      y_param.hide();
				trendline.hide();
	      groupby.hide();
	      palette.hide();
	      binsize.hide();
	      errorbars.hide();
	      xaxis.hide();
	      yaxis1.hide();
	      yaxis2.hide();
	      plottype.hide();
				reststrokes.hide();
				cpfit.show();
				cpoverlay.hide();
				piece.show();
	  }
      });
  });

</script>


<ul class="main-content">
  <canvas hidden id="canvas"></canvas>
  <li class="grid_4">
    <div id="id_chart">
      {{ the_div|safe }}
    </div>
    <div id="id_script">
    </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">
    <form enctype="multipart/form-data" method="post">
      <table>
        {{ dateform.as_table }}
      </table>
      <table>
        {{ optionsform.as_table }}
      </table>
  </li>
  <li class="grid_2">
    <p>Select two or more workouts, set your plot settings below,
      and press submit
    </p>
    <table>
      {{ chartform.as_table }}
    </table>
  </li>
  <li class="grid_2 maxheight">
    <p>{{ searchform }}</p>
    
    {% 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">
    {% csrf_token %}
    <input name='optionsform' type="submit" value="Submit">
	</form>
</li>
{% if worldclass %}
{% if age and sex != 'not specified' %}
<li class="grid_4">
  <h2>Gold Medal Standards</h2>
  <p>The dashed lines are based on the
    <a href="https://log.concept2.com/rankings">Concept2</a>
    rankings for your age ({{ age }}), gender ({{ sex }})
    and weight category ({{ weightcategory }}). The Gold Medal
    Standard power is derived from the
    <a href="http://www.concept2.com/indoor-rowers/racing/records/world">
      World Record</a> for your category.
    The percentile lines are estimates of where the percentiles
    of the Concept2 rankings historically are for those of exactly
    your age, gender and weight class.
  </p>
  <p>
    For rowing on the water, the results are corrected for the expected
    difference in power between the Concept2 indoor rower and power
    values on the water.
  </p>
</li>
<li>
  <table width="100%" class="listtable">
    <tbody>
      <tr>
	<td>
	  <a target="_"
	     href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/100m/">100m
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a target="_"
	     href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/500m/">500m
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a target="_"
	     href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/1000m/">1000m
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a target="_"
	     href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/2000m/">2000m
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a target="_"
	     href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/5000m/">5000m
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a target="_"
	     href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/6000m/">6000m
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a target="_"
	     href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/10000m/">10000m
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a target="_"
	     href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/21097m/">Half Marathon
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a
	    href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/42195m/">Full Marathon
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a
	    href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/1min/">1 minute
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a
	    href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/4min/">4 minutes
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a
	    href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/30min/">30 minutes
	  </a>
	</td>
      </tr>
      <tr>
	<td>
	  <a
	    href="/rowers/agegrouprecords/{{ sex }}/{{ weightcategory }}/60min/">1 hour
	  </a>
	</td>
      </tr>
    </tbody>
  </table>
</li>
{% endif %}
{% endif %}
</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/user/{{ rower.user.id }}', function(json) {
  var counter=0;
  var script = json.script;
  var div = json.div;
  $("#id_sitready").remove();
      $("#id_chart").append(div);
      
      $("#id_script").append(script); 
      /* $("#id_script").append("<script>"+script+"</s"+"cript>"); */

  });
  });
  </script>

{% endif %}

{% endblock %}

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