some fine tuning of plannedsession UI

rowers/templates/plannedsession_multicreate.html

@@ -2,7 +2,7 @@
 {% load staticfiles %}
 {% load rowerfilters %}
 
-{% block title %}New Planned Session{% endblock %}
+{% block title %}Plan entire microcycle{% endblock %}
 
 {% block content %}
 <div class="grid_12 alpha">
@@ -55,7 +55,12 @@
 <div class="grid_12 alpha">
   <p>
     On this page, you can create and edit sessions for an entire time
-    period.
+    period. You see a list of the current sessions planned for the
+    selected time period. Each row in the table is a session. You can
+    remove a session by clicking "remove" at the end of a row.
+    You can edit the date in the forms. If you need to add a new session,
+    click the "Add More" button to add a new session. Use the "Submit"
+    button to commit any changes you made.
     </p>
   <form id="ps-form-table" method="post">
     {% csrf_token %}
@@ -71,7 +76,7 @@
       </thead>
       <tbody>
         {% for form in ps_formset %}
-        <tr id="id_form_row">
+        <tr class="session_form_row">
           <td> {{ forloop.counter }}
             {% if form.instance.pk %}{{ form.DELETE }}{% endif %}
             {{ form.id }}
@@ -105,40 +110,40 @@
   addText: ''
   });
 
-  $("td #id_sessionmode").change(function() {
 
+
+  $("tr.session_form_row").each(function() {
+  var myrow = this;
+  $( myrow ).find('*[id*=sessionmode]').change(function() {
   if (this.value == 'TRIMP') {
-  $("td #id_sessionunit").prop("value","None");
+  $( myrow ).find("*[id*=sessionunit]").prop('value','None');
   }
   if (this.value == 'distance') {
-  $("td #id_sessionunit").prop("value","m");
+  $( myrow ).find("*[id*=sessionunit]").prop('value','m');
   }
   if (this.value == 'time') {
-  $("td #id_sessionunit").prop("value","min");
+  $( myrow ).find("*[id*=sessionunit]").prop('value','min');
   }
-
   if (this.value == 'rScore') {
-  $("td #id_sessionunit").prop("value","None");
+  $( myrow ).find("*[id*=sessionunit]").prop('value','None');
   }
-
   });
-
-  $("td #id_sessiontype").change(function() {
-
-  if (this.value == 'session') {
-  $("td #id_criterium").prop("value","none");
+  $( myrow ).find('*[id*=sessionunit]').change(function() {
+  if (this.value == 'km') {
+  $( myrow ).find("*[id*=sessionmode]").prop('value','distance');
   }
-  if (this.value == 'test') {
-  $("td #id_criterium").prop("value","exact");
+  if (this.value == 'm') {
+  $( myrow ).find("*[id*=sessionmode]").prop('value','distance');
   }
-  if (this.value == 'challenge') {
-  $("td #id_criterium").prop("value","minimum");
+  if (this.value == 'None') {
+  $( myrow ).find("*[id*=sessionmode]").prop('value','rScore');
   }
-
+  if (this.value == 'min') {
+  $( myrow ).find("*[id*=sessionmode]").prop('value','time');
   }
-
-  );
-
+  });
+  });
+  
 
   });
 

rowers/templates/plannedsessioncreate.html

@@ -160,10 +160,32 @@
   $("td #id_criterium").prop("value","minimum");
   }
 
+  if (this.value == 'cycletarget') {
+  $("td #id_criterium").prop("value","none");
+  }
+
   }
 
   );
 
+  $("td #id_sessionunit").change(function() {
+
+  if (this.value == 'm') {
+  $("td #id_sessionmode").prop("value","distance");
+  }
+  if (this.value == 'km') {
+  $("td #id_sessionmode").prop("value","distance");
+  }
+  if (this.value == 'None') {
+  $("td #id_sessionmode").prop("value","rScore");
+  }
+  if (this.value == 'min') {
+  $("td #id_sessionmode").prop("value","time");
+  }
+
+  }
+
+  );  
 
   });
 

rowers/templates/plannedsessionedit.html

@@ -165,10 +165,33 @@
   $("td #id_criterium").prop("value","minimum");
   }
 
+  if (this.value == 'cycletarget') {
+  $("td #id_criterium").prop("value","none");
+  }
+
   }
 
   );
 
+  $("td #id_sessionunit").change(function() {
+
+  if (this.value == 'm') {
+  $("td #id_sessionmode").prop("value","distance");
+  }
+  if (this.value == 'km') {
+  $("td #id_sessionmode").prop("value","distance");
+  }
+  if (this.value == 'None') {
+  $("td #id_sessionmode").prop("value","rScore");
+  }
+  if (this.value == 'min') {
+  $("td #id_sessionmode").prop("value","time");
+  }
+
+  }
+
+  );  
+
 
 
   });

rowers/templates/plannedsessionsmanage.html

@@ -75,17 +75,41 @@
     it will change to match this session.
   </p>
   <p>
-    We will make this form smarter in the near future.
+    Workouts marked with a red check mark (<span style="color:red"><b>&#10004;</b></span>)
+    are currently linked to one of your sessions. A workout can only be assigned to
+    one session at a time.
   </p>
 </div>
 <form id="session_form" action="/rowers/sessions/manage/{{ timeperiod }}/rower/{{ rower.id }}"
       method="post">
 <div class="grid_12 alpha">
   <div class="grid_6 alpha">
-    {{ ps_form.as_table}}
+    <p>Planned Sessions</p>
+    <table width="100%">
+      <tr>
+      {% for field in ps_form.hidden_fields %}
+      {{ field }}
+      {% endfor %}
+      {% for field in ps_form.visible_fields %}
+      <td> {{ field }}</td>
+      {% endfor %}
+      </tr>
+      </table>
   </div>
   <div class="grid_6 omega">
-    {{ w_form.as_table}}
+    <p>Workouts</p>
+    <table width="100%">
+      <tr>
+      {% for field in w_form.hidden_fields %}
+      {{ field }}
+      {% endfor %}
+      {% for field in w_form.visible_fields %}
+      <td>
+        {{ field }}
+      </td>
+      {% endfor %}
+      </tr>
+    </table>
   </div>
 </div>
 <div class="grid_2 prefix_2 suffix_8">
@@ -101,21 +125,33 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <script>
       $(document).ready(function(){
-      $('#id_plannedsession').on('click', function(evt) {
+
+      function addLink( el ){
+      var linked = el.next("span.linked");
+      if (linked.length == 0) {
+      el.after("<span class='linked' style='color:red'><b>&#10004;</b></span>");
+      }
+      }
+
+      function getURL() {
+      var url = window.location.pathname;
       var selectedsession = $("input:radio[name='plannedsession']:checked").val();
       
-      var url = window.location.pathname;
       if (url.indexOf("/session/") >= 0) {
       url = url.replace(/\/session\/\d+/g, "/session/"+selectedsession);
       } else {
       url += "/session/"+selectedsession
-      }
-      // window.location.replace(url); 
+      };
+
+      return url};
+
+      function loadJSON( url ) {
       $.getJSON(url, function(json) {
       var workouts = json['workouts'];
       for (i=0; i < workouts.length; i++) {
                     var wid = workouts[i][0];
                     var wcheck = workouts[i][2];
+                    var lcheck = workouts[i][3];
                     if (wcheck) {
                     $(":checkbox").filter(function() {
                     return this.value == wid;
@@ -125,9 +161,25 @@
                     return this.value == wid;
                     }).prop("checked",false);
                     }
-                    }
-                    });
-                    });
+                    if (lcheck) {
+                    addLink( $(":checkbox").filter(function() {
+                    return this.value == wid;
+                    }) );
+                    };
+                    };
                     });
+
+      }
+
+      loadJSON( getURL() );
+
+      $('#id_plannedsession').on('click', function(evt) {
+      loadJSON( getURL() );
+      });
+      
+      })
+
+      
+
     </script>
 {% endblock %}

rowers/templates/planningbuttons.html

@@ -33,7 +33,7 @@
   </p>
 </div>
 <div class="grid_2">
-  <a class="button gray small" href="/rowers/sessions/multicreate/{{ timeperiod }}/rower/{{ rower.id }}">Bulk Session Edit ({{ timeperiod|verbosetimeperiod }})</a>
+  <a class="button blue small" href="/rowers/sessions/multicreate/{{ timeperiod }}/rower/{{ rower.id }}">Plan Complete MicroCycle ({{ timeperiod|verbosetimeperiod }})</a>
 </div>
 <div class="grid_2">
   {% if user.is_authenticated and user|is_manager %}