From 3dd68aad0b037f4894494a7f07b1cc1adaa7e603 Mon Sep 17 00:00:00 2001
From: tspeed90 <tspeed90@gmail.com>
Date: Fri, 11 May 2018 16:25:57 +0100
Subject: [PATCH] adds slider with comment text and scale number box

---
 public/dom.js              | 26 ++++++++++----------------
 src/controllers/addData.js |  2 +-
 src/views/addData.hbs      | 21 ++++++++++++---------
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/public/dom.js b/public/dom.js
index d7bfff1..719f7f4 100644
--- a/public/dom.js
+++ b/public/dom.js
@@ -1,23 +1,17 @@
 /* eslint-disable */
 var scales = document.querySelectorAll('input[type=range]')
-
 // we need to use an array of comments from the database - this one is for testing only
-const test = ['Comment for 1', '', 'Comment for 3', 'Comment for 4', 'Comment for 5'];
-
-scales.forEach( (scale) => {
-    scale.addEventListener('click', function(){
-        var currentScale = `${this.id}`;
-        var commentBoxId = `result${currentScale.slice(currentScale.indexOf('-'))}`;
-        
-        console.log(`the current scale is: ${currentScale}`);
-        console.log(`the comment box associated with the current scale has an id of ${commentBoxId}`);
+const test = ['No pain', '', '', '', '4 means I take some pain medication', '', '', '', 'Can\'t focus on anything but my pain', '', ''];
 
-        var commentBox = document.getElementById('commentBoxId'); //Not working 
-       
+scales.forEach((scale) => {
+    scale.addEventListener('change', function () {
+        var currentScaleId = `${this.id}`;
+        var commentBoxId = `result${currentScaleId.slice(currentScaleId.indexOf('-'))}`;
+        var scaleNumberId = `${this.id}-number`;
+        var scaleNumber = document.querySelector(`#${scaleNumberId}`);
+        var commentBox = document.querySelector(`#${commentBoxId}`);
 
-        
-        //commentBox.innerHTML = test[`${this.value}`];
-        
-        // result.innerHTML = `the scale is on ${this.value} and the comment is ${arr[this.value-1]}`;
+        scaleNumber.textContent = `${this.value}`;
+        commentBox.textContent = test[this.value] === '' ? "Any comments you've saved will appear here as you move the scale" : `Hint: ${test[this.value]}`
     })
 })
\ No newline at end of file
diff --git a/src/controllers/addData.js b/src/controllers/addData.js
index e4b34ba..5d5dda2 100644
--- a/src/controllers/addData.js
+++ b/src/controllers/addData.js
@@ -1,4 +1,4 @@
-const symptomsList = [{ symptom: 'fatigue' }, { symptom: 'dry skin' }];
+const symptomsList = [{ symptom: 'fatigue' }, { symptom: 'dandruff' }];
 const factorsList = [{ factor: 'water' }, { factor: 'sleep' }];
 
 
diff --git a/src/views/addData.hbs b/src/views/addData.hbs
index fb915c9..2607839 100644
--- a/src/views/addData.hbs
+++ b/src/views/addData.hbs
@@ -3,14 +3,17 @@
 <h2>Symptoms</h2>
 <ul>
   {{#each symptomsList}}
-  <span>
-    <li>{{this.symptom}}</li>
-    {{!-- need to add icon at the end --}}
-    <button class="expand">E</button>
-    <input id="scale-{{this.symptom}}" type="range" min="1" max="10" value="5">
-    <p id="result-{{this.symptom}}"></p>
-  </span>
-
+  <div id="symptom-rating">
+    <span>
+      <li>{{this.symptom}}</li>
+      {{!-- need to add icon at the end --}}
+      <button class="expand">E</button>
+    </span>
+    <br>
+    <input id="scale-{{this.symptom}}" type="range" min="0" max="10" value="0" steps="1">
+    <span id="scale-{{this.symptom}}-number"></span>
+    <p id="result-{{this.symptom}}">Any comments you've saved will appear here as you move the scale</p>
+  </div>
   {{/each}}
 </ul>
 
@@ -18,7 +21,7 @@
 
 <ul>
   {{#each factorsList}}
-  <span>
+  <span id="factors-rating">
     <li>{{this.factor}}</li>
     {{!-- need to add icon at the end --}}
     <button class="expand">E</button>