FUNCT Add temperature management

4 files changed, 85 insertions, 115 deletions

diff --git a/src/index.html b/src/index.html
index 4ffbb28..45a53d0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -19,7 +19,6 @@
                     FAN SPEED
                 </div>
             </div>
-
         </div>
         <div class="center">
             <a id="LeftChair" value="0" href="#" class="seat left item button" onclick="CHAIR.left()">
@@ -44,59 +43,7 @@
                 <img class="two" src="../images/HMI_HVAC_ChairIndicator_Two.svg"/>
             </a>
             <div class="temperatures item">
-                <div class="temperatures-container">
-                    <div class="temperature">
-                        LO
-                    </div>
-                    <div class="temperature">
-                        16º
-                    </div>
-                    <div class="temperature">
-                        17º
-                    </div>
-                    <div class="temperature">
-                        18º
-                    </div>
-                    <div class="temperature">
-                        19º
-                    </div>
-                    <div class="temperature">
-                        20º
-                    </div>
-                    <div class="temperature">
-                        21º
-                    </div>
-                    <div class="temperature">
-                        22º
-                    </div>
-                    <div class="temperature">
-                        23º
-                    </div>
-                    <div class="temperature">
-                        24º
-                    </div>
-                    <div class="temperature">
-                        25º
-                    </div>
-                    <div class="temperature">
-                        26º
-                    </div>
-                    <div class="temperature">
-                        27º
-                    </div>
-                    <div class="temperature">
-                        28º
-                    </div>
-                    <div class="temperature">
-                        29º
-                    </div>
-                    <div class="temperature">
-                        HI
-                    </div>
-                    <div class="temperature">
-
-                    </div>
-                </div>
+                <div id="lefttemperature" class="temperatures-container" onscroll="TEMPERATURE.left(this)"></div>
             </div>
             <div class="block item">
                 <a id="autobutton" value="false" href="#" class="auto item button" onclick="BUTTON.auto()">
@@ -111,60 +58,8 @@
                     <img class="enabled" src="../images/HMI_HVAC_Circulation_Active.svg"/>
                 </a>
             </div>
-            <div class=" temperatures item">
-                <div class="temperatures-container">
-                    <div class="temperature">
-                        LO
-                    </div>
-                    <div class="temperature">
-                        16º
-                    </div>
-                    <div class="temperature">
-                        17º
-                    </div>
-                    <div class="temperature">
-                        18º
-                    </div>
-                    <div class="temperature">
-                        19º
-                    </div>
-                    <div class="temperature">
-                        20º
-                    </div>
-                    <div class="temperature">
-                        21º
-                    </div>
-                    <div class="temperature">
-                        22º
-                    </div>
-                    <div class="temperature">
-                        23º
-                    </div>
-                    <div class="temperature">
-                        24º
-                    </div>
-                    <div class="temperature">
-                        25º
-                    </div>
-                    <div class="temperature">
-                        26º
-                    </div>
-                    <div class="temperature">
-                        27º
-                    </div>
-                    <div class="temperature">
-                        28º
-                    </div>
-                    <div class="temperature">
-                        29º
-                    </div>
-                    <div class="temperature">
-                        HI
-                    </div>
-                    <div class="temperature">
-
-                    </div>
-                </div>
+            <div class="temperatures item">
+                <div id="righttemperature" class="temperatures-container" onscroll="TEMPERATURE.right(this)"></div>
             </div>
         </div>
         <div class="bottom">
diff --git a/src/index.js b/src/index.js
index b5d367b..d71dd0c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,9 @@
 /* JS */
 import './js/AFB.js';
-import { init, launch } from './js/app.js';
 
 /* CSS */
 import './styles/app.scss';
 
-document.addEventListener('DOMContentLoaded', init);
\ No newline at end of file
+document.addEventListener('DOMContentLoaded', function(){
+    TEMPERATURE.init();
+});
\ No newline at end of file
diff --git a/src/js/temperature.js b/src/js/temperature.js
new file mode 100644
index 0000000..45cbe8c
--- /dev/null
+++ b/src/js/temperature.js
@@ -0,0 +1,73 @@
+var left = 22;
+var right = 22;
+
+var lowTemperature = 15;
+var hiTemperature = 30;
+var temperatures = [];
+
+var isScrolling;
+var elementHeight;
+
+function createTemperatureElement() {
+    var element = document.createElement('div');
+    element.classList = ['temperature'];
+    element.style.height = elementHeight+'px';
+    element.style.lineHeight = elementHeight+'px';
+    return element;
+}
+
+function update(node, index) {
+    node.scrollTop = index*elementHeight;
+
+    for( var i=0; i<node.children.length; i++) {
+        node.children[i].setAttribute('enabled',false);
+    }
+    node.children[index].setAttribute('enabled', true);
+}
+
+module.exports = {
+    left: function(node) {
+        clearTimeout(isScrolling);
+
+        isScrolling = setTimeout(function(){
+            var index = Math.round(node.scrollTop/elementHeight);
+            left = temperatures[index];
+            update(node, index);
+            console.log('LEFT', left);
+        }, 100);
+    },
+    right: function(node) {
+        clearTimeout(isScrolling);
+
+        isScrolling = setTimeout(function(){
+            var index = Math.round(node.scrollTop/elementHeight);
+            right = temperatures[index];
+            update(node, index);
+            console.log('RIGHT', right);
+        }, 100);
+    },
+    init: function() {
+        var leftTemperature = document.getElementById('lefttemperature');
+        var rightTemperature = document.getElementById('righttemperature');
+        elementHeight = leftTemperature.offsetHeight/2;
+
+        for( var i=lowTemperature; i<=hiTemperature; i++) {
+            var element = createTemperatureElement();
+            if( i === lowTemperature) {
+                element.innerHTML = 'LO';
+            } else if( i === hiTemperature ) {
+                element.innerHTML = 'HI';
+            } else {
+                element.innerHTML = i+'º';
+            }
+            leftTemperature.appendChild(element);
+            rightTemperature.appendChild(element.cloneNode(true));
+            temperatures[temperatures.length] = i;
+        }
+        leftTemperature.appendChild(createTemperatureElement());
+        rightTemperature.appendChild(createTemperatureElement());
+
+        update(leftTemperature, temperatures.indexOf(left));
+        update(rightTemperature, temperatures.indexOf(right));
+    }
+}
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 698d3ee..660fb92 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -191,16 +191,17 @@ body {
                     width: 100%;
                     height: 480px;
                     overflow-y: scroll;
-                    scroll-snap-type: y mandatory;
-                    scroll-behavior: smooth;
 
                     .temperature {
+                        &[enabled='true'] {
+                            color: map-get($colors, primary);
+                        }
+                        &[enabled='false'] {
+                            color: map-get($colors, grey);
+                        }
                         font-size: 10rem;
                         text-align: center;
                         width: 100%;
-                        height: 240px;
-                        line-height: 240px;
-                        scroll-snap-align: start;
                     }
                 }
             }