starting some ajax

rowers/alerts.py

@@ -108,6 +108,7 @@ def alert_get_stats(alert,nperiod=0):
             'nr_strokes':0,
             'nr_strokes_qualifying':0,
             'percentage':0,
+            'nperiod':nperiod,
         }
 
     # check if filters are in columns list
@@ -139,6 +140,7 @@ def alert_get_stats(alert,nperiod=0):
             'nr_strokes':0,
             'nr_strokes_qualifying':0,
             'percentage':0,
+            'nperiod':nperiod,
         }
         
         
@@ -175,6 +177,7 @@ def alert_get_stats(alert,nperiod=0):
         'nr_strokes':nr_strokes,
         'nr_strokes_qualifying':nr_strokes_qualifying,
         'percentage': percentage,
+            'nperiod':nperiod,
     }
 
 # run alert report

rowers/templates/alerts.html

@@ -13,7 +13,7 @@
 <ul class="main-content">
   {% if alerts %}
   {% for alert in alerts %}
-  <li class="rounder">
+  <li class="rounder" id="alert_{{ alert.id }}">
     <h2>{{ alert.name }}</h2>
     <a class="small" href="/rowers/alerts/{{ alert.id }}/edit/" title="Edit">
       <i class="fas fa-pencil-alt fa-fw"></i>
@@ -22,10 +22,24 @@
        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 href="/rowers/alerts/{{ alert.id }}/report/">      
+    <a id="percentages" href="/rowers/alerts/{{ alert.id }}/report/">      
-      <div id="id_alert_{{ forloop.counter }}">
+      <div>
-        <h1>{{ stats|alertstatspercentage:forloop.counter }}%</h1>
+        <h1><span id="percentage">{{ stats|alertstatspercentage:forloop.counter }}</span>%</h1>
       </div>
     </a>
     <p>
@@ -34,51 +48,16 @@
     <p>
       Workout type: {{ alert.workouttype }}
     </p>
-    <p>
+    <p id="dates">
-      Next Run: {{ alert.next_run }}
+      <span id="startdate">
+        {{ stats|alertstartdate:forloop.counter }}
+      </span> -
+      <span id="enddate">
+        {{ stats|alertenddate:forloop.counter }}
+      </span>
     </p>
   </li>
   {% endfor %}
-  <li class="grid_4">
-    <table width="100%" class="listtable shortpadded">
-      <thead>
-	<tr>
-	  <th>Name</th>
-	  <th>metric</th>
-	  <th>Workout type</th>
-	  <th>Next Run</th>
-	</tr>
-      </thead>
-      <tbody>
-	{% for alert in alerts %}
-	<tr>
-	  <td>{{ alert.name }}</td>
-	  <td>{{ alert.measured.metric }}</td>
-	  <td>{{ alert.workouttype }}</td>
-	  <td>{{ alert.next_run }}</td>
-	  <td>
-	    <a class="small" href="/rowers/alerts/{{ alert.id }}/edit/" title="Edit">
-	      <i class="fas fa-pencil-alt fa-fw"></i>
-	    </a>
-	  </td>
-          <td>
-            <a class="small"
-               href="/rowers/alerts/{{ alert.id }}/report/"
-               title="Report">
-              <i class="fal fa-table fa-fw"></i>
-            </a>
-          </td>
-          <td>
-            <a class="small" href="/rowers/alerts/{{ alert.id }}/delete/"
-               title="Delete">
-              <i class="fas fa-trash-alt fa-fw"></i>
-              </a>
-          </td>
-	</tr>
-	{% endfor %}
-	</tbody>
-    </table>
-  </li>
   {% else %}
   <li class="grid_4">
       <p>You have not set any alerts for {{ rower.user.first_name }}</p>
@@ -95,6 +74,73 @@
 
 {% 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(){
+  console.log('scripts loaded');
+  $(".iteratorleft").click(function( event ){
+  event.preventDefault();
+  console.log('-----');
+  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);
+  url = "/rowers/alerts/"+alertid+"/report/"+nperiod+"/user/"+user+"/";               
+  console.log(url);
+  $.getJSON(window.location.protocol + '//' + window.location.host + url,
+  function(json) {
+  console.log(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-1
+  thediv.siblings(".iteratorright").data().nperiod=nextperiod;
+  });
+  });
+  $(".iteratorright").click(function( event ){
+  event.preventDefault();
+  console.log('-----');
+  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+"/";               
+  console.log(url);
+  $.getJSON(window.location.protocol + '//' + window.location.host + url,
+  function(json) {
+                 console.log(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;
+                 var nextperiod = nperiod+1;
+                 thediv.siblings(".iteratorleft").data().nperiod=nextperiod;
+                 console.log(thediv.siblings(".iteratorleft"));
+
+  });
+  });
+  });  
+</script>
+{% endblock %}
 
 {% block sidebar %}
 {% include 'menu_analytics.html' %}

rowers/templates/analysis.html

@@ -86,7 +86,7 @@
     </p>
   </li>
   <li class="rounder">
-    <h1>Power Progress</h1>
+    <h2>Power Progress</h2>
       <a href="/rowers/fitness-progress/">
       <div class="vignet">
         <img src="/static/img/powerprogress.png" alt="Power Progress">

rowers/templatetags/rowerfilters.py

@@ -71,10 +71,27 @@ from rowers.teams import rower_get_managers
 @register.filter
 def alertstatspercentage(list,i):
     alertstats = list[i-1]
-    print(alertstats)
     
     return alertstats["percentage"]
 
+@register.filter
+def alertstartdate(list,i):
+    alertstats = list[i-1]
+    
+    return alertstats["startdate"]
+
+@register.filter
+def alertnperiod(list,i):
+    alertstats = list[i-1]
+
+    return alertstats["nperiod"]
+
+@register.filter
+def alertenddate(list,i):
+    alertstats = list[i-1]
+    
+    return alertstats["enddate"]
+
 @register.filter
 def is_coach(rower,rowers):
     for r in rowers: