89 lines
3.2 KiB
HTML
89 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="card mb-0">
|
|
<div class="card-header">
|
|
<h3 class="mb-0"><a href="{% url 'gymnast_details_tab' chrono.gymnast.id 'scores' %}">{{ chrono.gymnast }}</a></h3>
|
|
<h4 class="card-title"> Chrono of {{ chrono.date | date:'d N Y' }}</h4>
|
|
</div>
|
|
<div class="card-body pb-0 mb-0">
|
|
<div class="row mr-1 ml-1 pb-0 mb-0">
|
|
<div class="col-md-2 offset-md-1">
|
|
<table class="table tablesorter table-striped" data-sort="table" id="chrono_values_table">
|
|
{% for detail in chrono.details.all %}
|
|
<tr>
|
|
<td>{{ detail.order }}</td>
|
|
<td class="text-right">{{ detail.value }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
<tr>
|
|
<td></td>
|
|
<td class="text-right"><b>{{ chrono.score }}</b></td>
|
|
</tr>
|
|
</table>
|
|
<a href="{% url 'chrono_list_for_gymnast' chrono.gymnast.id %}">
|
|
<button type="submit" value="add" class="btn btn-icon btn-warning mr-2">
|
|
<i class="fal fa-stopwatch"></i>
|
|
</button>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-8 offset-md-1 alert {% if request.session.template == 0 %}skill-info{% else %}alert-secondary{% endif %} mr-0 pb-0 pl-1 pr-1">
|
|
<canvas id="chartjs_chrono_details" class="chartjs" width="800" height="400"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block footerscript %}
|
|
<script type="text/javascript">
|
|
var ctx = document.getElementById("chartjs_chrono_details").getContext("2d");
|
|
var gradient_stroke_1 = ctx.createLinearGradient(0, 450, 0, 0);
|
|
|
|
gradient_stroke_1.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
|
|
gradient_stroke_1.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
|
|
gradient_stroke_1.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
|
|
gradient_stroke_1.addColorStop(0.25, 'rgba(255, 99, 132, 0)');
|
|
|
|
new Chart(document.getElementById("chartjs_chrono_details"), {
|
|
type: 'line',
|
|
data: {
|
|
labels: [
|
|
{% for detail in chrono.details.all %}
|
|
{{ detail.order }},
|
|
{% endfor %}
|
|
],
|
|
datasets: [{
|
|
fill: true,
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
cubicInterpolationMode: 'monotone',
|
|
backgroundColor: gradient_stroke_1,
|
|
pointBackgroundColor: 'rgb(255, 99, 132)',
|
|
|
|
data: [
|
|
{% for detail in chrono.details.all %}
|
|
{{ detail.value }},
|
|
{% endfor %}
|
|
],
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
suggestedMin: {{ chart_min_value }},
|
|
suggestedMax: {{ chart_max_value }},
|
|
}
|
|
}]
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
{% endblock %}
|