summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-11-07 18:38:21 +0100
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:12:47 +0100
commitb11ad29876a7c60e3e3e36b4791f010985f38fa4 (patch)
tree4bccdbecff62ecc8889e2ac63c2cfdb3f0c188be
parent701290bb5ea0bc8e68d19f055cd20e58fd071d3a (diff)
FUNCT Add support to dinamically update header time
-rw-r--r--src/index.html24
-rw-r--r--src/js/main.js2
-rw-r--r--src/js/time.js33
3 files changed, 48 insertions, 11 deletions
diff --git a/src/index.html b/src/index.html
index 1cd4732..90b9b19 100644
--- a/src/index.html
+++ b/src/index.html
@@ -32,17 +32,19 @@
</div>
</a>
</script>
- <div class="infoContainer">
- <div class="infoItem day">
- TUESDAY
- </div>
- <div class="infoItem hour">
- 7:26 AM
- </div>
- <div class="infoItem wheater">
- <span class="icon-rainy"></span>
- 20ºC
- </div>
+ <div class="infoContainer" id="timeContainer">
+ <script id="time-template" type="x-tmpl-mustache">
+ <div class="infoItem day">
+ {{ day }}
+ </div>
+ <div class="infoItem hour">
+ {{ hour }}
+ </div>
+ <div class="infoItem wheater">
+ <span class="icon-rainy"></span>
+ 20ºC
+ </div>
+ </script>
</div>
<div class="statusContainer" id="networkStatusContainer">
<script id="network-status-template" type="x-tmpl-mustache">
diff --git a/src/js/main.js b/src/js/main.js
index d26f701..f07c210 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,9 +1,11 @@
import { init as init_apps } from './apps';
import { init as init_weather } from './weather';
import { init as init_network } from './network';
+import { init as init_time } from './time';
export function init() {
init_apps();
init_weather();
init_network();
+ init_time();
} \ No newline at end of file
diff --git a/src/js/time.js b/src/js/time.js
new file mode 100644
index 0000000..55165c7
--- /dev/null
+++ b/src/js/time.js
@@ -0,0 +1,33 @@
+import Mustache from 'mustache';
+
+var template;
+
+var days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
+
+function formatAMPM(date) {
+ var hours = date.getHours();
+ var minutes = date.getMinutes();
+ var ampm = hours >= 12 ? 'PM' : 'AM';
+ hours = hours % 12;
+ hours = hours ? hours : 12;
+ minutes = minutes < 10 ? '0'+minutes : minutes;
+ var strTime = hours + ':' + minutes + ' ' + ampm;
+ return strTime;
+ }
+
+function initInterval() {
+ setInterval(function() {
+ var date = new Date();
+ document.getElementById('timeContainer').innerHTML = Mustache.render(template, {
+ day: days[date.getDay()],
+ hour: formatAMPM(date)
+ });
+ }, 1000);
+}
+
+export function init() {
+ template = document.getElementById('time-template').innerHTML;
+ Mustache.parse(template);
+
+ initInterval();
+} \ No newline at end of file