FUNCT Improve time rendering

3 files changed, 50 insertions, 31 deletions

diff --git a/src/index.js b/src/index.js
index eb7b4ac..9d2cce0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,7 +21,9 @@ import { api } from 'agl-js-api';
 
 import * as app from './js/app';
 import * as apps from './js/apps';
+import * as time from './js/time';
 
 window.apps = apps;
+window.time = time;
 api.init();
 app.init();
\ No newline at end of file
diff --git a/src/js/time.js b/src/js/time.js
index d4c3aa3..3c22419 100644
--- a/src/js/time.js
+++ b/src/js/time.js
@@ -5,6 +5,7 @@ import { weather } from 'agl-js-api';
 var template;
 var root;
 var counter = 0;
+var interval;
 var updateTime = 10000;
 var page = {
     date: {
@@ -65,7 +66,8 @@ function update() {
 }
 
 function initInterval() {
-    setInterval(update, updateTime);
+    clearInterval(interval);
+    interval = setInterval(update, updateTime);
 }
 
 export function init(node) {
@@ -78,4 +80,11 @@ export function init(node) {
     }, function(error) {
         console.error('ERRROR loading main template', error);
     });
+}
+
+export function refresh() {
+    clearInterval();
+    counter = 0;
+    update();
+    initInterval();
 }
\ No newline at end of file
diff --git a/src/templates/time.template.html b/src/templates/time.template.html
index 5be8b5d..d107ae4 100644
--- a/src/templates/time.template.html
+++ b/src/templates/time.template.html
@@ -4,35 +4,43 @@
 <div class="infoItem hour">
     {{ date.hour }}
 </div>
-<div class="infoItem wheater">
-    {{ #showTemperature }}
-        <div class="temperature weatherItem">
-            <img src="http://openweathermap.org/img/wn/{{ weather.weather.0.icon }}.png">
-            {{ weather.main.temp }}ºF
+<a class="infoItem wheater" href="#" onclick="time.refresh()">
+    {{ #weather }}
+        {{ #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}}
+    {{ /weather }}
+    {{ ^weather }}
+        <div class="weatherItem">
+            <i class="fas fa-exclamation-circle"></i>
+            Weather no available
         </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}}
+    {{ /weather }}
 </div>
\ No newline at end of file