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

{% block title %}Metric Alert{% endblock %}

{% block main %}
<p>
  Alerts are useful to give you a regular update on how you are doing. For example, if you are
  worried about rowing too short, you can set an alert on drive length, and the site will automatically
  tell you how well you are doing.
</p>

<p>
  To set an alert on a minimum drive length, you would select "Drive Length (degree)" as the metric in the
  form below, then set the condition to "&gt;" (greater than), and value 1 to the minimum drive length
  that you find acceptable. The value 2 is only relevant for alerts where you want to have a metric
  between two values. Set the workout type to "Standard Racing Shell", or whatever boat class you
  want this metric to run for, select the period over which you want to monitor and get regular
  reports (7 days). 
</p>

<p>
  Optionally, you can add filters. With filters, the alert considers only those strokes that
  fulfill all filters. For example, you could set a filter on power between 200 and 300 Watt,
  to only look at drive length in that power zone.
</p>
  
<form action="" method="post">
  <ul class="main-content">
    <li class="grid_2">
      <h2>Alert {{ alert.name }} for {{ alert.rower.user.first_name }}</h2>
      <p>Alert managed by {{ alert.manager.first_name }} {{ alert.manager.last_name }}</p>
      <p>
	{{ formset.management_form }}
        {% csrf_token %}
	<table>
	  {{ form.as_table }}
	  {{ measuredform.as_table }}
	</table>
        <input type="submit" value="Save">
      </p>
    </li>
    <li class="grid_2">
    {% for filter_form in formset %}
      <div class="fav-formset">
	<h2>Filter {{ forloop.counter }}</h2>
	<table width=100%>
	  {{ filter_form.as_table }}
	</table>
      </div>
    {% endfor %}
    </li>
  </ul>
</form>
{% endblock %}

{% block scripts %}
<!-- Include formset plugin - including jQuery dependency -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/static/js/jquery.formset.js"></script>
<script>
    $('.fav-formset').formset({
        addText: '<div>&nbsp;</div><div>add filter</div>',
        deleteText: '<div><p>&nbsp;</p></div><div>remove</div>'
    });
    </script>
<script>
  $( document ).ready(function() {
      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',	  
      }

      $('#id_workouttype').on('change', function(){
          if (
              $(this).val() == 'water'
		  || $(this).val() == 'coastal'
		  || $(this).val() == 'c-boat'
		  || $(this).val() == 'churchboat'
          ) {
              var $el = $('#id_boattype');
	      $el.empty();
	      $.each(boattypes, function(key,value) {
		  if ( key == '{{ workout.boattype }}') {
		      $el.append($("<option></option").attr("value", key).attr("selected", "selected").text(value));
		  } else {
		      $el.append($("<option></option").attr("value", key).text(value));
		  }
	      });
	      $el.toggle(true);
	      
          }
	  else if (
	      $(this).val() == 'rower'
	  ) {
              var $el = $('#id_boattype');
	      $el.empty();
	      $.each(ergtypes, function(key,value) {
		  if ( key == '{{ workout.boattype }}') {
		      $el.append($("<option></option").attr("value", key).attr("selected", "selected").text(value));
		  } else {
		      $el.append($("<option></option").attr("value", key).text(value));
		  }
	      });
	      $el.toggle(true);	    
	  }
	  else {
              $('#id_boattype').toggle(false);
              $('#id_boattype').val('1x');
	  }
	  if (
              $(this).val() == 'rower'
		  || $(this).val() == 'dynamic'
		  || $(this).val() == 'slides'
	  ) {
              $('#id_dragfactor').toggle(true);
	  } else {
              $('#id_dragfactor').toggle(false);
              $('#id_dragfactor').val('0');
	  }
	  
      });
      $('#id_workouttype').change();
  });
  </script>
{% endblock %}



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