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

{% block title %}Rowsandall - Analysis {% endblock %}

{% block main %}

<h1>Alerts for {{ rower.user.first_name }} {{ rower.user.last_name }}</h1>
<p>Set up automatic alerting for your workouts</p>


<ul class="main-content">
  {% if alerts %}
  {% for alert in alerts %}
  <li class="rounder" id="alert_{{ alert.id }}">
    <h2>{{ alert.name }}</h2>
    {% if alert.manager == request.user %}
    <a class="small" href="/rowers/alerts/{{ alert.id }}/edit/" title="Edit">
      <i class="fas fa-pencil-alt fa-fw"></i>
    </a>
    {% endif %}
    <a class="small" href="/rowers/alerts/{{ alert.id }}/delete/"
       title="Delete">
      <i class="fas fa-trash-alt fa-fw"></i>
    </a>
    <a class="small iteratorleft"
       data-nperiod="{{ stats|alertnperiod:forloop.counter }}"
       data-user="{{ rower.user.id }}"
       data-alertid="{{ alert.id }}"
       href="/rowers/alerts/{{ alert.id }}/report/">
      <i class="fas fa-arrow-alt-left fa-fw"></i>
    </a>
    <a class="small iteratorright"
       data-nperiod="{{ stats|alertnperiod:forloop.counter }}"
       data-user="{{ rower.user.id }}"
       data-alertid="{{ alert.id }}"
       href="/rowers/alerts/{{ alert.id }}/report/">
      <i class="fas fa-arrow-alt-right fa-fw"></i>
    </a>
    <hr>
    <a id="percentages" href="/rowers/alerts/{{ alert.id }}/report/">
      <div>
        <h1><span id="percentage">{{ stats|alertstatspercentage:forloop.counter }}</span>%</h1>
      </div>
    </a>
    <p>
      {{ alert.description }}
    </p>
    <p>
      Workout type: {{ alert.workouttype }}
    </p>
    <p id="dates">
      <span id="startdate">
        {{ stats|alertstartdate:forloop.counter }}
      </span> -
      <span id="enddate">
        {{ stats|alertenddate:forloop.counter }}
      </span>
    </p>
  </li>
  {% endfor %}
  {% else %}
  <li class="grid_4">
      <p>You have not set any alerts for {{ rower.user.first_name }}</p>
  </li>
  {% endif %}
  <li class="grid_4">
    <p>
      <a href="/rowers/alerts/new/user/{{ rower.user.id }}/">Create new alert</a>
    </p>
  </li>
</ul>



{% endblock %}

{% block scripts %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
<script>
  $(document).ready(function(){
  $(".iteratorleft").click(function( event ){
  event.preventDefault();
  var nperiod=$(this).data().nperiod+1;
  var user = $(this).data().user;
  var alertid = $(this).data().alertid;
  var thediv = $(this);
  url = "/rowers/alerts/"+alertid+"/report/"+nperiod+"/user/"+user+"/";
  console.log(url);
  $.getJSON(window.location.protocol + '//' + window.location.host + url,
  function(json) {
  var percentage = json['stats']['percentage'];
  var startdate = json['stats']['startdate'];
  var enddate = json['stats']['enddate'];
  console.log(percentage, startdate, enddate)
  thediv.siblings("#percentages").find("#percentage").text(percentage);
  thediv.siblings("#dates").find("#startdate").text(startdate);
  thediv.siblings("#dates").find("#enddate").text(enddate);
  thediv.data().nperiod=nperiod;
  if (nextperiod<0) {nextperiod=0};
                    var nextperiod = nperiod
  thediv.siblings(".iteratorright").data().nperiod=nextperiod;
  });
  });
  $(".iteratorright").click(function( event ){
  event.preventDefault();
  var nperiod=$(this).data().nperiod-1;
  if ( nperiod<0 ) {
                 nperiod=0
                 };

  var user = $(this).data().user;
                 var alertid = $(this).data().alertid;
                 var thediv = $(this)
  url = "/rowers/alerts/"+alertid+"/report/"+nperiod+"/user/"+user+"/";
  $.getJSON(window.location.protocol + '//' + window.location.host + url,
  function(json) {
                 var percentage = json['stats']['percentage'];
                 var startdate = json['stats']['startdate'];
                 var enddate = json['stats']['enddate'];
                 thediv.siblings("#percentages").find("#percentage").text(percentage);
                 thediv.siblings("#dates").find("#startdate").text(startdate);
                 thediv.siblings("#dates").find("#enddate").text(enddate);
                 thediv.data().nperiod=nperiod;
                 var nextperiod = nperiod;
                 thediv.siblings(".iteratorleft").data().nperiod=nextperiod;

  });
  });
  });
</script>
{% endblock %}

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