Update mindstate form
This commit is contained in:
Gregory Trullemans
parent
84427a49f0
commit
c2d8fca40e
|
|
@ -225,8 +225,6 @@
|
|||
<script src="{% static "js/plugins/bootstrap-tagsinput_0.8.0.js" %}"></script>
|
||||
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
|
||||
<script src="{% static "js/plugins/jasny-bootstrap_3.1.3.min.js" %}"></script>
|
||||
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
|
||||
<script src="{% static "js/plugins/jquery-jvectormap_2.0.4.js" %}"></script>
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="{% static "js/plugins/bootstrap-notify_3.1.5.js" %}"></script>
|
||||
<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc -->
|
||||
|
|
|
|||
|
|
@ -111,13 +111,6 @@
|
|||
<script src="{% static "js/plugins/jasny-bootstrap_3.1.3.min.js" %}"></script>
|
||||
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
|
||||
<script src="{% static "js/plugins/fullcalendar/main.js" %}"></script>
|
||||
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
|
||||
<script src="{% static "js/plugins/jquery-jvectormap_2.0.4.js" %}"></script>
|
||||
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
|
||||
<script src="{% static "js/plugins/nouislider_11.1.0.min.js" %}"></script>
|
||||
<!-- Google Maps Plugin -->
|
||||
<!-- Place this tag in your head or just before your close body tag. -->
|
||||
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script> -->
|
||||
|
||||
<!-- Notifications Plugin -->
|
||||
<script src="{% static "js/plugins/bootstrap-notify_3.1.5.js" %}"></script>
|
||||
|
|
|
|||
|
|
@ -268,42 +268,47 @@ class WellBeingForm(forms.ModelForm):
|
|||
"event": forms.HiddenInput(),
|
||||
"mindstate": forms.NumberInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"placeholder": "x",
|
||||
"min": "0",
|
||||
"type": "range",
|
||||
"min": "1",
|
||||
"max": "10",
|
||||
"step": 1,
|
||||
"class": "form-control",
|
||||
}
|
||||
),
|
||||
"sleep": forms.NumberInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"placeholder": "x",
|
||||
"min": "0",
|
||||
"type": "range",
|
||||
"min": "1",
|
||||
"max": "10",
|
||||
"step": 1,
|
||||
"class": "form-control",
|
||||
}
|
||||
),
|
||||
"stress": forms.NumberInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"placeholder": "x",
|
||||
"min": "0",
|
||||
"type": "range",
|
||||
"min": "1",
|
||||
"max": "10",
|
||||
"step": 1,
|
||||
"class": "form-control",
|
||||
}
|
||||
),
|
||||
"fatigue": forms.NumberInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"placeholder": "x",
|
||||
"min": "0",
|
||||
"type": "range",
|
||||
"min": "1",
|
||||
"max": "10",
|
||||
"step": 1,
|
||||
"class": "form-control",
|
||||
}
|
||||
),
|
||||
"muscle_soreness": forms.NumberInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"placeholder": "x",
|
||||
"min": "0",
|
||||
"type": "range",
|
||||
"min": "1",
|
||||
"max": "10",
|
||||
"step": 1,
|
||||
"class": "form-control",
|
||||
}
|
||||
),
|
||||
"informations": forms.Textarea(
|
||||
|
|
|
|||
|
|
@ -49,8 +49,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="form-group row ">
|
||||
<label for="id_mindstate" class="col-4 col-sm-3 col-md-4 col-lg-4 col-xl-3 col-form-label">Mind State <span class="text-danger"><b>*</b></span></label>
|
||||
<div class="col-3 col-sm-2 col-md-3 col-lg-2 {% if form.mindstate.errors %}has-danger{% endif %}">
|
||||
<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 %}">
|
||||
{{ form.mindstate }}
|
||||
{% if form.mindstate.errors %}
|
||||
<span class="btn btn-sm btn-danger-outline">
|
||||
|
|
@ -60,13 +60,11 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
</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 Bad - 10: Very Good)</small></p>
|
||||
</div>
|
||||
<div class="col-1 mt-2" 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-3 col-sm-2 col-md-3 col-lg-2 {% if form.sleep.errors %}has-danger{% endif %}">
|
||||
<div class="col-7 col-xl-8 {% if form.sleep.errors %}has-danger{% endif %}">
|
||||
{{ form.sleep }}
|
||||
{% if form.sleep.errors %}
|
||||
<span class="btn btn-sm btn-danger-outline">
|
||||
|
|
@ -76,13 +74,11 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
</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 Bad - 10: Very Good)</small></p>
|
||||
</div>
|
||||
<div class="col-1 mt-2" 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-3 col-sm-2 col-md-3 col-lg-2 {% if form.stress.errors %}has-danger{% endif %}">
|
||||
<div class="col-7 col-xl-8 {% if form.stress.errors %}has-danger{% endif %}">
|
||||
{{ form.stress }}
|
||||
{% if form.stress.errors %}
|
||||
<span class="btn btn-sm btn-danger-outline">
|
||||
|
|
@ -92,13 +88,11 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
</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>
|
||||
<div class="col-1 mt-2" 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-3 col-sm-2 col-md-3 col-lg-2 {% if form.fatigue.errors %}has-danger{% endif %}">
|
||||
<div class="col-7 col-xl-8 {% if form.fatigue.errors %}has-danger{% endif %}">
|
||||
{{ form.fatigue }}
|
||||
{% if form.fatigue.errors %}
|
||||
<span class="btn btn-sm btn-danger-outline">
|
||||
|
|
@ -108,13 +102,11 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
</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>
|
||||
<div class="col-1 mt-2" 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-3 col-sm-2 col-md-3 col-lg-2 {% if form.muscle_soreness.errors %}has-danger{% endif %}">
|
||||
<div class="col-7 col-xl-8 {% if form.muscle_soreness.errors %}has-danger{% endif %}">
|
||||
{{ form.muscle_soreness }}
|
||||
{% if form.muscle_soreness.errors %}
|
||||
<span class="btn btn-sm btn-danger-outline">
|
||||
|
|
@ -124,9 +116,10 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-4 col-sm-3 col-md-5 col-lg-5 pl-0 pr-0">
|
||||
<div class="col-1 mt-2" 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>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="form-group row mb-0">
|
||||
<label class="col-12 text-center text-danger mb-0" id="note_info"><b>Please provide details regarding the scores.</b></label>
|
||||
|
|
@ -144,6 +137,7 @@
|
|||
<div class="form-group text-center" id="div_submit">
|
||||
<input type="submit" value="{% if wellbeing_id %}Update{% else %}Add{% endif %}" class="btn btn-warning" />
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,6 +147,40 @@
|
|||
|
||||
{% block footerscript %}
|
||||
<script type="text/javascript" >
|
||||
var mindstate_slider = document.getElementById("id_mindstate");
|
||||
var sleep_slider = document.getElementById("id_sleep");
|
||||
var stress_slider = document.getElementById("id_stress");
|
||||
var fatigue_slider = document.getElementById("id_fatigue");
|
||||
var muscle_soreness_slider = document.getElementById("id_muscle_soreness");
|
||||
|
||||
var output_sleep = document.getElementById("sleep_value");
|
||||
var output_mindstate = document.getElementById("mindstate_value");
|
||||
var output_stress = document.getElementById("stress_value");
|
||||
var output_fatigue = document.getElementById("fatigue_value");
|
||||
var output_muscle_soreness = document.getElementById("muscle_soreness_value");
|
||||
|
||||
output_mindstate.innerHTML = mindstate_slider.value;
|
||||
output_sleep.innerHTML = sleep_slider.value;
|
||||
output_stress.innerHTML = stress_slider.value;
|
||||
output_fatigue.innerHTML = fatigue_slider.value;
|
||||
output_muscle_soreness.innerHTML = muscle_soreness_slider.value;
|
||||
|
||||
mindstate_slider.oninput = function(){
|
||||
output_mindstate.innerHTML = this.value;
|
||||
}
|
||||
sleep_slider.oninput = function(){
|
||||
output_sleep.innerHTML = this.value;
|
||||
}
|
||||
stress_slider.oninput = function(){
|
||||
output_stress.innerHTML = this.value;
|
||||
}
|
||||
fatigue_slider.oninput = function(){
|
||||
output_fatigue.innerHTML = this.value;
|
||||
}
|
||||
muscle_soreness_slider.oninput = function(){
|
||||
output_muscle_soreness.innerHTML = this.value;
|
||||
}
|
||||
|
||||
$().ready(function(){
|
||||
$("#note_info").hide();
|
||||
$("#span_info_required").hide();
|
||||
|
|
@ -233,5 +261,4 @@
|
|||
<script src="{% static "js/template_users/event_autocomplete.js" %}"></script>
|
||||
{% endif %}
|
||||
|
||||
<link rel="stylesheet" href="{% static "js/plugins/nouislider/nouislider.css" %}" />
|
||||
{% endblock %}
|
||||
|
|
@ -149,4 +149,40 @@ textarea.form-control {
|
|||
.not-displayed-on-phone {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* INPUT RANGE */
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
width: 25vw;
|
||||
}
|
||||
|
||||
/* range track */
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
background: #317BB5;
|
||||
border-radius: 3px;
|
||||
/* margin-bottom: .25rem; */
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track {
|
||||
background: #317BB5;
|
||||
border-radius: 3px;
|
||||
/* margin-bottom: .25rem; */
|
||||
/* height: .5rem; */
|
||||
}
|
||||
|
||||
/* bullet */
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: #BEBEBE;
|
||||
width: 2rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 3px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue