rowsandall/rowers/templates/plannedsessionsmanage.html

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

{% block title %}Planned Sessions{% endblock %}

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


{% block content %}
<div class="grid_12 alpha">
  {% include "planningbuttons.html" %}
</div>
<div class="grid_12 alpha">
<div class="grid_6 alpha">
  <h1>Manage Plan Execution for {{ rower.user.first_name }} {{ rower.user.last_name }}</h1>
</div>

<div id="timeperiod" class="grid_2 dropdown">
  <button class="grid_2 alpha button gray small dropbtn">Select Time Period  ({{ timeperiod|verbosetimeperiod }})</button>
  <div class="dropdown-content">
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/today/rower/{{ rower.id }}">
      Today
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/thisweek/rower/{{ rower.id }}">
      This Week
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/thismonth/rower/{{ rower.id }}">
      This Month
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/lastweek/rower/{{ rower.id }}">
      Last Week
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/lastmonth/rower/{{ rower.id }}">
      Last Month
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/nextweek/rower/{{ rower.id }}">
      Next Week
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/nextmonth/rower/{{ rower.id }}">
      Next Month
    </a>
  </div>
  </div>
{% if user.is_authenticated and user|is_manager %}
<div class="grid_2 dropdown">
  <button class="grid_2 alpha button green small dropbtn">
    Change Rower
  </button>
  <div class="dropdown-content">
    {% for member in user|team_rowers %}
    <a class="button green small" href="/rowers/sessions/manage/{{ timeperiod }}/rower/{{ member.id }}">{{ member.user.first_name }} {{ member.user.last_name }}</a>
    {% endfor %}
  </div>
</div>
{% endif %}
</div>
<div class="grid_12 alpha">
  <p>Select one session on the left, and one or more workouts on the right
    to match the workouts to the session. For tests and training sessions,
    the selected workouts must be done on the same date. For all sessions,
    the workout dates must be between the start and end date for the
    session.
  </p>
  <p>
    If you select a workout that has already been matched to another session,
    it will change to match this session.
  </p>
  <p>
    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">
    <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">
    <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">
  {% csrf_token %}
  <input class="button green" type="submit" value="Submit">
</div>


</form>
{% endblock %}

{% block scripts %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $(document).ready(function(){

      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();
      
      if (url.indexOf("/session/") >= 0) {
      url = url.replace(/\/session\/\d+/g, "/session/"+selectedsession);
      } else {
      url += "/session/"+selectedsession
      };

      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;
                    }).prop("checked",true);
                    } else {
                    $(":checkbox").filter(function() {
                    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 %}