diff options
| -rw-r--r-- | src/js/time.js | 49 | ||||
| -rw-r--r-- | src/styles/main.scss | 26 | ||||
| -rw-r--r-- | src/templates/time.template.html | 32 |
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 |