Add web time

extensions/web-time/manifest.json

@@ -0,0 +1,7 @@
+{
+  "name": "Web Time",
+  "description": "Display date and time",
+  "dependencies": ["web-base"],
+  "version": "1.0",
+  "script": "../web-base/web-ext.lua"
+}

extensions/web-time/web-time.js

@@ -0,0 +1,47 @@
+define(['./web-time.xml'], function(timeTemplate) {
+
+  var timeVue = new Vue({
+    template: timeTemplate,
+    data: {
+      date: '',
+      time: '',
+      timer: null
+    },
+    methods: {
+      onShow: function() {
+        var self = this;
+        var date = new Date();
+        self.refresh(date);
+        var ms = 1000 - (date.getTime() % 1000);
+        setTimeout(function() {
+          self.refresh(new Date());
+          self.registerTimer(1000);
+        }, ms);
+      },
+      onHide: function() {
+        this.clearTimer();
+      },
+      refresh: function(date) {
+        //console.info('refresh at ' + date.toISOString());
+        this.date = date.toLocaleDateString(undefined, {dateStyle: 'full'});
+        this.time = date.toLocaleTimeString(undefined, {timeStyle: 'short'});
+      },
+      registerTimer: function(ms) {
+        var self = this;
+        this.clearTimer();
+        this.timer = setInterval(function() {
+          self.refresh(new Date());
+        }, ms || 60000);
+      },
+      clearTimer: function() {
+        if (this.timer !== null) {
+          clearInterval(this.timer);
+          this.timer = null;
+        }
+      }
+    }
+  });
+
+  addPageComponent(timeVue, 'fa-clock');
+
+});

extensions/web-time/web-time.xml

@@ -0,0 +1,8 @@
+<app-page id="time" title="Time">
+  <page-article>
+    <div style="text-align: center; padding-top: 1rem; -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(255, 255, 255, 0.05));">
+      <p style="font-size: 2rem;">{{ date }}</p>
+      <p style="font-size: 4rem; font-weight: bold;">{{ time }}</p>
+    </div>
+  </page-article>
+</app-page>