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" >
2024-01-24 13:15:48 +01: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 >
2024-01-24 13:15:48 +01:00
< div class = "card-body text-center pb-0" >
< 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 >
2023-07-05 10:51:49 +02:00
{% if wellbeing.to_markdown %}
{{ wellbeing.to_markdown | safe }}
{% endif %}
2023-10-11 12:12:01 +02:00
< / div >
2024-01-23 12:42:16 +01:00
< div class = "card-footer row" >
< div class = "col-6" >
< a href = "{% url 'wellbeing_list' %}" >
< button type = "submit" value = "back" class = "btn btn-icon btn-warning" >
< i class = "tim-icons icon-double-left" > < / i >
< / button >
< / a >
< / div >
< div class = "col-6 col-1 ml-auto text-right" >
< a href = "{% url 'wellbeing_update' wellbeing.id %}" >
< button type = "submit" value = "update" class = "btn btn-icon btn-warning" >
2024-01-23 12:52:10 +01:00
< i class = "tim-icons icon-pencil" > < / i >
2024-01-23 12:42:16 +01:00
< / button >
< / a >
< / div >
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 %}