aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-07-05 13:37:04 +0200
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 09:42:15 +0100
commit7c3999c0457e5cc9a273b2ae5029c35ecab0792c (patch)
tree54e8fdd212764793c92db355a9b3761f2611a0b2 /src
parentc614436d29a11ddbb1218485a05da7dde0e57038 (diff)
FUNCT Add temperature management
Diffstat (limited to 'src')
-rw-r--r--src/index.html111
-rw-r--r--src/index.js5
-rw-r--r--src/js/temperature.js73
-rw-r--r--src/styles/main.scss11
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;
}
}
}