Update Mindstate form interface
This commit is contained in:
Gregory Trullemans
parent
c2d8fca40e
commit
a908bacfa9
|
|
@ -271,7 +271,7 @@ class WellBeingForm(forms.ModelForm):
|
|||
"type": "range",
|
||||
"min": "1",
|
||||
"max": "10",
|
||||
"step": 1,
|
||||
"step": "1",
|
||||
"class": "form-control",
|
||||
}
|
||||
),
|
||||
|
|
@ -280,7 +280,7 @@ class WellBeingForm(forms.ModelForm):
|
|||
"type": "range",
|
||||
"min": "1",
|
||||
"max": "10",
|
||||
"step": 1,
|
||||
"step": "1",
|
||||
"class": "form-control",
|
||||
}
|
||||
),
|
||||
|
|
@ -289,7 +289,7 @@ class WellBeingForm(forms.ModelForm):
|
|||
"type": "range",
|
||||
"min": "1",
|
||||
"max": "10",
|
||||
"step": 1,
|
||||
"step": "1",
|
||||
"class": "form-control",
|
||||
}
|
||||
),
|
||||
|
|
@ -298,7 +298,7 @@ class WellBeingForm(forms.ModelForm):
|
|||
"type": "range",
|
||||
"min": "1",
|
||||
"max": "10",
|
||||
"step": 1,
|
||||
"step": "1",
|
||||
"class": "form-control",
|
||||
}
|
||||
),
|
||||
|
|
@ -307,7 +307,7 @@ class WellBeingForm(forms.ModelForm):
|
|||
"type": "range",
|
||||
"min": "1",
|
||||
"max": "10",
|
||||
"step": 1,
|
||||
"step": "1",
|
||||
"class": "form-control",
|
||||
}
|
||||
),
|
||||
|
|
|
|||
|
|
@ -33,7 +33,13 @@
|
|||
<label for="id_date" class="col-4 col-sm-3 col-md-4 col-lg-4 col-xl-3 col-form-label">Date <span class="text-danger"><b>*</b></span></label>
|
||||
<div class="col-5 col-sm-3 col-md-4 col-lg-4 col-xl-3 {% if form.date.errors %}has-danger{% endif %}">
|
||||
{{ form.date }}
|
||||
{% if form.date.errors %}<span class="btn btn-sm btn-danger-outline">{% for error in form.date.errors %}{{ error }}{% endfor %}</span>{% endif %}
|
||||
{% if form.date.errors %}
|
||||
<span class="btn btn-sm btn-danger-outline">
|
||||
{% for error in form.date.errors %}
|
||||
{{ error }}
|
||||
{% endfor %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row ">
|
||||
|
|
@ -43,14 +49,16 @@
|
|||
{{ form.event_related }}
|
||||
{% if form.event.errors %}
|
||||
<label class="text-danger" for="id_event" id="event-error">
|
||||
{% for error in form.event.errors %}{{ error }}{% endfor %}
|
||||
{% for error in form.event.errors %}
|
||||
{{ error }}
|
||||
{% endfor %}
|
||||
</label>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row ">
|
||||
<div class="form-group row">
|
||||
<label for="id_mindstate" class="col-4 col-xl-3 col-form-label">Mind State <span class="text-danger"><b>*</b></span></label>
|
||||
<div class="col-7 col-xl-8 {% if form.mindstate.errors %}has-danger{% endif %}">
|
||||
<div class="col-6 col-xl-7 pr-0 {% if form.mindstate.errors %}has-danger{% endif %}">
|
||||
{{ form.mindstate }}
|
||||
{% if form.mindstate.errors %}
|
||||
<span class="btn btn-sm btn-danger-outline">
|
||||
|
|
@ -60,11 +68,11 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-1 mt-2" id="mindstate_value"></div>
|
||||
<div class="col-2 mt-2 text-center" id="mindstate_value"></div>
|
||||
</div>
|
||||
<div class="form-group row ">
|
||||
<label for="id_sleep" class="col-4 col-sm-3 col-md-4 col-lg-4 col-xl-3 col-form-label">Sleep <span class="text-danger"><b>*</b></span></label>
|
||||
<div class="col-7 col-xl-8 {% if form.sleep.errors %}has-danger{% endif %}">
|
||||
<div class="col-6 col-xl-7 pr-0 {% if form.sleep.errors %}has-danger{% endif %}">
|
||||
{{ form.sleep }}
|
||||
{% if form.sleep.errors %}
|
||||
<span class="btn btn-sm btn-danger-outline">
|
||||
|
|
@ -74,11 +82,11 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-1 mt-2" id="sleep_value"></div>
|
||||
<div class="col-2 mt-2 text-center" id="sleep_value"></div>
|
||||
</div>
|
||||
<div class="form-group row ">
|
||||
<label for="id_stress" class="col-4 col-sm-3 col-md-4 col-lg-4 col-xl-3 col-form-label">Stress <span class="text-danger"><b>*</b></span></label>
|
||||
<div class="col-7 col-xl-8 {% if form.stress.errors %}has-danger{% endif %}">
|
||||
<div class="col-6 col-xl-7 pr-0 {% if form.stress.errors %}has-danger{% endif %}">
|
||||
{{ form.stress }}
|
||||
{% if form.stress.errors %}
|
||||
<span class="btn btn-sm btn-danger-outline">
|
||||
|
|
@ -88,11 +96,11 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-1 mt-2" id="stress_value"></div>
|
||||
<div class="col-2 mt-2 text-center" id="stress_value"></div>
|
||||
</div>
|
||||
<div class="form-group row ">
|
||||
<label for="id_fatigue" class="col-4 col-sm-3 col-md-4 col-lg-4 col-xl-3 col-form-label">Fatigue <span class="text-danger"><b>*</b></span></label>
|
||||
<div class="col-7 col-xl-8 {% if form.fatigue.errors %}has-danger{% endif %}">
|
||||
<div class="col-6 col-xl-7 pr-0 {% if form.fatigue.errors %}has-danger{% endif %}">
|
||||
{{ form.fatigue }}
|
||||
{% if form.fatigue.errors %}
|
||||
<span class="btn btn-sm btn-danger-outline">
|
||||
|
|
@ -102,11 +110,11 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-1 mt-2" id="fatigue_value"></div>
|
||||
<div class="col-2 mt-2 text-center" id="fatigue_value"></div>
|
||||
</div>
|
||||
<div class="form-group row ">
|
||||
<label for="id_muscle_soreness" class="col-4 col-sm-3 col-md-4 col-lg-4 col-xl-3 col-form-label">Muscle Soreness <span class="text-danger"><b>*</b></span></label>
|
||||
<div class="col-7 col-xl-8 {% if form.muscle_soreness.errors %}has-danger{% endif %}">
|
||||
<div class="col-6 col-xl-7 pr-0 {% if form.muscle_soreness.errors %}has-danger{% endif %}">
|
||||
{{ form.muscle_soreness }}
|
||||
{% if form.muscle_soreness.errors %}
|
||||
<span class="btn btn-sm btn-danger-outline">
|
||||
|
|
@ -116,7 +124,7 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-1 mt-2" id="muscle_soreness_value"></div>
|
||||
<div class="col-2 mt-2 text-center" id="muscle_soreness_value"></div>
|
||||
<!-- <div class="col-4 col-sm-3 col-md-5 col-lg-5 pl-0 pr-0">
|
||||
<p class="text-muted text-form-info mb-0 mt-2"><small>(1: Very Low - 10: Very High)</small></p>
|
||||
</div> -->
|
||||
|
|
@ -166,19 +174,34 @@
|
|||
output_muscle_soreness.innerHTML = muscle_soreness_slider.value;
|
||||
|
||||
mindstate_slider.oninput = function(){
|
||||
output_mindstate.innerHTML = this.value;
|
||||
if(this.value < 5)
|
||||
output_mindstate.innerHTML = '<b class="text-danger">' + this.value + '</b>';
|
||||
else
|
||||
output_mindstate.innerHTML = this.value;
|
||||
}
|
||||
sleep_slider.oninput = function(){
|
||||
output_sleep.innerHTML = this.value;
|
||||
if(this.value < 5)
|
||||
output_sleep.innerHTML = '<b class="text-danger">' + this.value + '</b>';
|
||||
else
|
||||
output_mindstate.innerHTML = this.value;
|
||||
}
|
||||
stress_slider.oninput = function(){
|
||||
output_stress.innerHTML = this.value;
|
||||
if(this.value > 5)
|
||||
output_stress.innerHTML = '<b class="text-danger">' + this.value + '</b>';
|
||||
else
|
||||
output_stress.innerHTML = this.value;
|
||||
}
|
||||
fatigue_slider.oninput = function(){
|
||||
output_fatigue.innerHTML = this.value;
|
||||
if(this.value > 5)
|
||||
output_fatigue.innerHTML = '<b class="text-danger">' + this.value + '</b>';
|
||||
else
|
||||
output_fatigue.innerHTML = this.value;
|
||||
}
|
||||
muscle_soreness_slider.oninput = function(){
|
||||
output_muscle_soreness.innerHTML = this.value;
|
||||
if(this.value > 5)
|
||||
output_muscle_soreness.innerHTML = '<b class="text-danger">' + this.value + '</b>';
|
||||
else
|
||||
output_muscle_soreness.innerHTML = this.value;
|
||||
}
|
||||
|
||||
$().ready(function(){
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@ input[type="range"] {
|
|||
background: transparent;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
width: 25vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* range track */
|
||||
|
|
|
|||
Loading…
Reference in New Issue