From c2d8fca40eeaae9eb12495b68ee8d858e3cb8042 Mon Sep 17 00:00:00 2001
From: Gregory Trullemans <redj@MacBook-Pro-de-Gregory.local>
Date: Mon, 22 Apr 2024 10:36:30 +0200
Subject: [PATCH] Update mindstate form

---
 jarvis/core/templates/base.html               |  2 -
 jarvis/core/templates/login.html              |  7 --
 jarvis/followup/forms.py                      | 35 ++++++----
 .../followup/templates/wellbeing/create.html  | 69 +++++++++++++------
 static/css/jarvis.css                         | 38 +++++++++-
 5 files changed, 105 insertions(+), 46 deletions(-)

diff --git a/jarvis/core/templates/base.html b/jarvis/core/templates/base.html
index 78d3a30..e4c828a 100644
--- a/jarvis/core/templates/base.html
+++ b/jarvis/core/templates/base.html
@@ -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 -->
diff --git a/jarvis/core/templates/login.html b/jarvis/core/templates/login.html
index 18289a9..1617ccc 100644
--- a/jarvis/core/templates/login.html
+++ b/jarvis/core/templates/login.html
@@ -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>
diff --git a/jarvis/followup/forms.py b/jarvis/followup/forms.py
index 64aa8f4..ccb41d6 100644
--- a/jarvis/followup/forms.py
+++ b/jarvis/followup/forms.py
@@ -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(
diff --git a/jarvis/followup/templates/wellbeing/create.html b/jarvis/followup/templates/wellbeing/create.html
index efca661..91ac966 100644
--- a/jarvis/followup/templates/wellbeing/create.html
+++ b/jarvis/followup/templates/wellbeing/create.html
@@ -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 %}
\ No newline at end of file
diff --git a/static/css/jarvis.css b/static/css/jarvis.css
index 23a6714..1083ff9 100644
--- a/static/css/jarvis.css
+++ b/static/css/jarvis.css
@@ -149,4 +149,40 @@ textarea.form-control {
     .not-displayed-on-phone {
         display: none;
     }
-}
\ No newline at end of file
+}
+
+/* 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;
+}