alert create including filters

rowers/templates/alert_create.html

@@ -5,23 +5,64 @@
 
 {% block main %}
 <h1>Alert Edit</h1>
+
+<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>
   
-<ul class="main-content">
-  <li class="grid_2">
-    <p>
-      <form action="" method="post">
+<form action="" method="post">
+  <ul class="main-content">
+    <li class="grid_2">
+      <h2>Alert</h2>
+      <p>
+	{{ formset.management_form }}
         {% csrf_token %}
 	<table>
 	  {{ form.as_table }}
 	  {{ measuredform.as_table }}
 	</table>
         <input type="submit" value="Save">
-      </form>
-    </p>
-  </li>
+      </p>
+    </li>
+    {% for filter_form in formset %}
+    <li class="grid_2">
+      <div class="fav-formset">
+	<h2>Filter {{ forloop.counter }}</h2>
+	<table width=100%>
+	  {{ filter_form.as_table }}
+	</table>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+</form>
 
-</ul>
-  
+<!-- Include formset plugin - including jQuery dependency -->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>
 
 
 {% endblock %}