2023-07-05 10:51:49 +02:00
{% extends "base.html" %}
{% block content %}
< div class = "row justify-content-center" >
< div class = "col-12 col-sm-8 col-md-6" >
< div class = "card" >
< div class = "card-header" >
2023-10-11 12:12:01 +02:00
< h4 class = "card-title mb-0" > < a href = "{% url 'gymnast_details_tab' wellbeing.gymnast.id 'physiological' %}" > {{ wellbeing.gymnast }}< / a > 's well being on {{ wellbeing.date | date:"j F Y" }}< / h4 >
2023-07-05 10:51:49 +02:00
< / div >
2023-10-11 12:12:01 +02:00
< div class = "card-body text-center" >
2023-07-05 10:51:49 +02:00
{% if wellbeing.to_markdown %}
{{ wellbeing.to_markdown | safe }}
{% else %}
< p class = "text-muted" > No additionnal details.< / p >
{% endif %}
2023-10-11 12:12:01 +02:00
< canvas id = "chart_radar_wellbeing" class = "chartjs" width = "400" height = "400" > < / canvas >
< p class = "text-muted" > Mindstate : {{ wellbeing.mindstate }} | Sleep : {{ wellbeing.sleep }} | Stress : {{ wellbeing.stress }} | Fatigue : {{ wellbeing.fatigue }} | Muscle soreness : {{ wellbeing.muscle_soreness }}< / p >
< / div >
< div class = "card-footer" >
< a href = "{% url 'wellbeing_list' %}" >
< button type = "submit" value = "add" class = "btn btn-icon btn-warning " >
< i class = "tim-icons icon-double-left" > < / i >
< / button >
< / a >
2023-07-05 10:51:49 +02:00
< / div >
< / div >
< / div >
< / div >
2023-10-11 12:12:01 +02:00
{% endblock %}
{% block footerscript %}
< script type = "text/javascript" >
var ctx = document.getElementById("chart_radar_wellbeing").getContext("2d");
const data = {
labels: [
'Mind State',
'Sleep',
'Zen',
'Rest',
'Muscle',
],
datasets: [{
data: [{{ wellbeing.mindstate }}, {{ wellbeing.sleep }}, {{ wellbeing.get_inversed_stress }}, {{ wellbeing.get_inversed_fatigue }}, {{ wellbeing.get_inversed_muscle_soreness }}],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}]
};
2023-07-05 10:51:49 +02:00
2023-10-11 12:12:01 +02:00
new Chart(ctx, {
responsive: true,
type: 'radar',
data: data,
options: {
elements: {
line: {
borderWidth: 3
}
},
scales: {
r: {
// angleLines: {
// display: false
// },
suggestedMin: 0,
suggestedMax: 10,
}
},
plugins: {
legend: {
display: false,
}
}
},
});
< / script >
2023-07-05 10:51:49 +02:00
{% endblock %}