FUNCT Added homescreen

3 files changed, 94 insertions, 13 deletions

diff --git a/src/js/time.js b/src/js/time.js
index 1757257..d4c3aa3 100644
--- a/src/js/time.js
+++ b/src/js/time.js
@@ -1,16 +1,31 @@
 import { load as load_template } from './templates';
 import Mustache from 'mustache';
+import { weather } from 'agl-js-api';
 
 var template;
 var root;
+var counter = 0;
+var updateTime = 10000;
 var page = {
     date: {
         day: '',
         hour: ''
     },
-    weather: {
-        icon: 'fas fa-cloud-sun-rain',
-        temperature: '20ºC'
+    weather: undefined,
+    showTemperature: function() {
+        return counter%5 === 0;
+    },
+    showWind: function() {
+        return counter%5 === 1;
+    },
+    showPosition: function() {
+        return counter%5 === 2;
+    },
+    showHumidity: function() {
+        return counter%5 === 3;
+    },
+    showDescription: function() {
+        return counter%5 === 4;
     }
 }
 
@@ -29,15 +44,28 @@ function formatAMPM(date) {
     minutes = minutes < 10 ? '0'+minutes : minutes;
     var strTime = hours + ':' + minutes + ' ' + ampm;
     return strTime;
-  }
+}
 
-function initInterval() {
-    setInterval(function() {
-        var date = new Date();
-        page.date.day = days[date.getDay()],
-        page.date.hour = formatAMPM(date);
+function update() {
+    var date = new Date();
+    page.date.day = days[date.getDay()],
+    page.date.hour = formatAMPM(date);
+    if( counter === 0 || !page.weather) {
+        weather.current_weather().then(function(result) {
+            page.weather = result;
+            show();
+        }, function(error) {
+            console.error(error);
+            show();
+        });
+    } else {
         show();
-    }, 1000);
+    }
+    counter = (counter+1) % Math.floor(300000/updateTime);
+}
+
+function initInterval() {
+    setInterval(update, updateTime);
 }
 
 export function init(node) {
@@ -45,6 +73,7 @@ export function init(node) {
         template = result;
         root = node;
         Mustache.parse(template);
+        update();
         initInterval();
     }, function(error) {
         console.error('ERRROR loading main template', error);
diff --git a/src/styles/main.scss b/src/styles/main.scss
index f96dacc..b89ee6f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -8,6 +8,17 @@ html {
     -webkit-overflow-scrolling: touch;
 }
 
+@keyframes zoomIn {
+    from {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3);
+    }
+  
+    50% {
+      opacity: 1;
+    }
+}
+
 body {
     font-family: Arial;
     color: map-get($colors, font);
@@ -18,6 +29,11 @@ body {
         text-decoration: none;
     }
 
+    a:hover {
+        color: map-get($colors, font);
+        text-decoration: none;
+    }
+
     .top {
         position: absolute;
         top: 0;
@@ -35,7 +51,7 @@ body {
                 flex: 1 1 0px;
                 text-align: center;
                 background-color: map-get($colors, button);
-    
+                
                 .icon {
                     width: 100%;
                     height: $header_size*0.70;
@@ -76,6 +92,14 @@ body {
             .wheater {
                 font-size: 1.5em;
                 letter-spacing: 2px;
+                height: 50px;
+
+                .weatherItem {
+                    animation-name: zoomIn;
+                    animation-iteration-count: 1;
+                    animation-duration: 1s;
+                    animation-delay: 0s;
+                }
             }
         }
 
diff --git a/src/templates/time.template.html b/src/templates/time.template.html
index c8ed97e..5be8b5d 100644
--- a/src/templates/time.template.html
+++ b/src/templates/time.template.html
@@ -5,6 +5,34 @@
     {{ date.hour }}
 </div>
 <div class="infoItem wheater">
-    <i class="{{ weather.icon }}"></i>
-    {{ weather.temperature }}
+    {{ #showTemperature }}
+        <div class="temperature weatherItem">
+            <img src="http://openweathermap.org/img/wn/{{ weather.weather.0.icon }}.png">
+            {{ weather.main.temp }}ºF
+        </div>
+    {{ /showTemperature }}
+    {{ #showWind }}
+        <div class="wind weatherItem">
+            <i class="fas fa-wind"></i>
+            {{ weather.wind.speed }}KMH
+        </div>
+    {{ /showWind }}
+    {{ #showPosition }}
+        <div class="position weatherItem">
+            <i class="fas fa-map-marker-alt"></i>
+            {{ weather.name }}
+        </div>
+    {{ /showPosition }}
+    {{ #showHumidity }}
+        <div class="humidity weatherItem">
+            <i class="fas fa-tint"></i>
+            {{ weather.main.humidity }}%
+        </div>
+    {{ /showHumidity }}
+    {{ #showDescription }}
+        <div class="description weatherItem">
+            <i class="fas fa-info-circle"></i>
+            {{ weather.weather.0.description }}
+        </div>
+    {{ /showDescription}}
 </div>
\ No newline at end of file