summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-12-11 09:41:30 +0100
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:12:47 +0100
commit4ce65d8965bdebdf35e5f3a4272482c0f40ef2bd (patch)
treebac6b24ecfd7045975834c18b840dfd723baa2fb
parent6d8916c58d823b13b89477f59bf05373e87f3a98 (diff)
FUNCT Added homescreen
-rw-r--r--src/js/time.js49
-rw-r--r--src/styles/main.scss26
-rw-r--r--src/templates/time.template.html32
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