{% extends "newbase.html" %}
{% load staticfiles %}
{% load rowerfilters %}
xo
{% block title %}Rowsandall Workouts List{% endblock %}

{% block scripts %}
<script>
  setTimeout("location.reload(true);",60000);
</script>
<script
  type='text/javascript'
  src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
<script>
  $(function() {
  $("td.rankingtoggle").click( function() {
  var workout_id = $(this).attr('workoutid');
  console.log(workout_id);
  $.getJSON(window.location.protocol + '//'+window.location.host + '/rowers/workout/'+workout_id+'/toggle-ranking', function(json) {
  console.log(JSON.stringify(json));
  rankingpiece = json.result;
  tdid = "#star"+workout_id;
  console.log(rankingpiece);
  console.log($(tdid).length);
  if (rankingpiece) {
  $(tdid).addClass('yellow');
  $(tdid).removeClass('notyellow');
  $(tdid).html('&starf;');
  console.log('adding yellow '+tdid);
  } else {
  $(tdid).removeClass('yellow');
  $(tdid).addClass('notyellow');
  $(tdid).html('&star;');
  console.log('remove yellow '+tdid);
  };
  });
  });
  });
</script>

{% endblock %}

{% block main %}
<style>
  #mypointer {
  cursor: pointer;
  }
</style>

<ul class="main-content">
  <li class="grid_2">
    <p>
    <form enctype="multipart/form-data"  method="post">
      <table>
        {{ dateform.as_table }}
      </table>
      {% csrf_token %}
      <input name='daterange' type="submit" value="Submit">
    </form>
    </p>
    {% if team %}
    <p>
    <form id="searchform" action="/rowers/list-workouts/team/{{ team.id }}/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}"
          method="get" accept-charset="utf-8">
      {% else %}
      <form id="searchform" action="/rowers/list-workouts/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}"
            method="get" accept-charset="utf-8">
        {% endif %}    
        <input class="searchfield" id="searchbox" name="q" type="text" placeholder="Search">
        <input type="submit">
        </input>
      </form>
    </p>
  </li>
  <li class="grid_2">
    <script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>
    <script async="true" type="text/javascript">
      Bokeh.set_log_level("info");
    </script>
    
    {{ interactiveplot |safe }}
    
    {{ the_div |safe }}
  </li>
  <li>
      {% if team %}
      <h3>{{ team.name }} Team Workouts</h3>
      {% else %}
      <h3>
        Workouts of {{ rower.user.first_name }} {{ rower.user.last_name }}
      </h3>
      {% endif %}
  </li>
  <li>
    <p>
      <span>
        {% if workouts.has_previous %}
        {% if request.GET.q %}
        <a class="wh" href="?page=1&q={{ request.GET.q }}">
          <i class="fas fa-arrow-alt-to-left"></i>
        </a>
        <a class="wh" href="?page={{ workouts.previous_page_number }}&q={{ request.GET.q }}">
          <i class="fas fa-arrow-alt-left"></i>
        </a>
        {% else %}
        <a class="wh" href="?page=1">
          <i class="fas fa-arrow-alt-to-left"></i>
        </a>
        <a class="wh" href="?page={{ workouts.previous_page_number }}">
          <i class="fas fa-arrow-alt-left"></i>
        </a>
        {% endif %}
        {% endif %}
        
        <span>
          Page {{ workouts.number }} of {{ workouts.paginator.num_pages }}.
        </span>
        
        {% if workouts.has_next %}
        {% if request.GET.q %}
        <a class="wh" href="/rowers/list-workouts/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}?page={{ workouts.next_page_number }}&q={{ request.GET.q }}">
          <i class="fas fa-arrow-alt-right"></i>
        </a>
        <a class="wh" href="?page={{ workouts.paginator.num_pages }}&q={{ request.GET.q }}">
          <i class="fas fa-arrow-alt-to-right">
        </a>
        {% else %}
        <a class="wh" href="/rowers/list-workouts/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}?page={{ workouts.next_page_number }}">
          <i class="fas fa-arrow-alt-right"></i>
        </a>
        <a class="wh" href="?page={{ workouts.paginator.num_pages }}">
          <i class="fas fa-arrow-alt-to-right"></i>
        </a>
        {% endif %}
        {% endif %}
      </span>
    </p>
  </li>
  <li>
    <p>
    {% if rankingonly and not team %}
    <a href="/rowers/list-workouts">
      <i class="far fa-star"></i>Show All Workouts
    </a>
    {% elif not team %}
    <a href="/rowers/list-workouts/ranking">
      <i class="fas fa-star"></i>Show Only Ranking Pieces
    </a>
    {% endif %}
    </p>
  </li>
  <li class="maxheight grid_4">
    
    {% if workouts %}
    <table width="100%" class="listtable shortpadded">
      <thead>
        <tr>
          <th> R</th>
          <th style="width:80"> Date</th>
          <th> Time</th>
          <th> Name</th>
          <th> Type</th>
          <th> Distance </th>
          <th> Duration </th>
          <th> Avg HR </th>
          <th> Max HR </th>
          {% if not team %}
          <th> &nbsp;</th>
          <th> &nbsp;</th>
          {% else %}
          <th colspan="2">
            Owner
          </th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for workout in workouts %}
        {% if workout.rankingpiece %}
        <tr style="font-weight:bold">
          {% else %}
        <tr>
          {% endif %}
          <td  id="mypointer"
               class="rankingtoggle" workoutid="{{ workout.id }}">
            {% if workout.rankingpiece %}
            <span id="star{{ workout.id }}" class="yellow">&starf;</span>
            {% else %}
            <span id="star{{ workout.id }}" class="notyellow">&star;</span>
            {% endif %}
          </td>
          <td> {{ workout.date|date:"Y-m-d" }} </td>
          <td> {{ workout.starttime|date:"H:i" }} </td>
          {% if workout.user.user == user or user == team.manager %}
          {% if workout.name != '' %}
          <td>
            <a href={% url rower.defaultlandingpage id=workout.id %}>
              {{ workout.name }}
            </a>
          </td>
          {% else %}
          <td>
            <a href={% url rower.defaultlandingpage id=workout.id %}>No Name
          </a></td> 
          {% endif %}
          {% else %}
          {% if workout.name != '' %}
          <td><a href="/rowers/workout/{{ workout.id }}/">{{ workout.name }}</a></td>
          {% else %}
          <td><a href="/rowers/workout/{{ workout.id }}/">No Name</a> </td>
          {% endif %}
          {% endif %}
          <td> {{ workout.workouttype }} </td>
          <td> {{ workout.distance }}m</td>
          <td> {{ workout.duration |durationprint:"%H:%M:%S.%f" }} </td>
          <td> {{ workout.averagehr }} </td>
          <td> {{ workout.maxhr }} </td>
          {% if not team %}
          <td>
            <a class="small" href="/rowers/workout/{{ workout.id }}/export">Export</a>
          </td>
          {% else %}
          <td colspan="2">
          <a class="small" href="/rowers/{{ workout.user.id }}/list-workouts">
            {{ workout.user.user.first_name }}
            {{ workout.user.user.last_name }}
          </a>
          </td>
          {% endif %}
          <td> <a class="small" href="/rowers/workout/{{ workout.id }}/flexchart">Flex</a> </td>
          <td>
            <a class="small" href="/rowers/workout/{{ workout.id }}/deleteconfirm">Delete
          </td>
        
        </tr>
        
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p> No workouts found </p>
    {% endif %}
  </li>
    {% if announcements %}
  <li class="grid_4">
    <h3>What's New?</h3>
  </li>
  {% for a in announcements %}
  <li>
    <div class="site-announcement-box">
      <div class="site-announcement">
        <em>{{ a.created }}:</em>
        {{ a.announcement|urlize }}
      </div>
    </div>
  </li>
  {% endfor %}
  {% endif %}
</ul>
  
{% endblock %}

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