Private
Public Access
1
0

starting some ajax

This commit is contained in:
Sander Roosendaal
2019-08-27 11:59:13 +02:00
parent fce222ebeb
commit 0adaf12495
4 changed files with 114 additions and 48 deletions

View File

@@ -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/">
<div id="id_alert_{{ forloop.counter }}">
<h1>{{ stats|alertstatspercentage:forloop.counter }}%</h1>
<a id="percentages" href="/rowers/alerts/{{ alert.id }}/report/">
<div>
<h1><span id="percentage">{{ stats|alertstatspercentage:forloop.counter }}</span>%</h1>
</div>
</a>
<p>
@@ -34,51 +48,16 @@
<p>
Workout type: {{ alert.workouttype }}
</p>
<p>
Next Run: {{ alert.next_run }}
<p id="dates">
<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' %}