Migrated DateTimeWeather and Calendar widgets

platypush/backend/http/webapp/public/index.html

@@ -4,11 +4,6 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <script type="text/javascript">
-        window.config = JSON.parse(`{
-            "websocketPort": "{{ websocket_port }}"
-        }`)
-    </script>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

platypush/backend/http/webapp/src/App.vue

@@ -1,43 +1,43 @@
 <template>
-  <router-view />
+  <Events ref="events" :ws-port="config['backend.http'].websocket_port" v-if="config['backend.http']" />
   <Notifications ref="notifications" />
-  <Events ref="events" />
+  <router-view />
 </template>
 
 <script>
 import Notifications from "@/components/Notifications";
 import Utils from "@/Utils";
-import { bus } from '@/bus';
 import Events from "@/Events";
+import { bus } from "@/bus";
 
 export default {
   name: 'App',
   components: {Events, Notifications},
   mixins: [Utils],
 
-  computed: {
+  data() {
-    config() {
+    return {
-      const cfg = {
+      config: {},
-        websocketPort: 8009,
-      }
-
-      if (this._config.websocketPort && !this._config.websocketPort.startsWith('{{')) {
-        cfg.websocketPort = parseInt(this._config.websocketPort)
-      }
-
-      return cfg;
     }
   },
 
   methods: {
     onNotification(notification) {
       this.$refs.notifications.create(notification)
+    },
+
+    async initConfig() {
+      this.config = await this.request('config.get')
     }
   },
 
+  created() {
+    this.initConfig()
+  },
+
   mounted() {
     bus.on('notification-create', this.onNotification)
-  }
+  },
 }
 </script>
 

platypush/backend/http/webapp/src/Events.vue

@@ -1,10 +1,15 @@
-<template>
-  <div id="__platypush_events"/>
-</template>
-
 <script>
+import { bus } from "@/bus";
+
 export default {
   name: "Events",
+  props: {
+    wsPort: {
+      type: Number,
+      default: 8009,
+    }
+  },
+
   data() {
     return {
       ws: null,
@@ -12,37 +17,21 @@ export default {
       opened: false,
       timeout: null,
       reconnectMsecs: 30000,
-      handlers: [],
+      handlers: {},
     }
   },
 
   methods: {
-    init() {
+    onWebsocketTimeout() {
-      try {
-        const protocol = location.protocol === 'https:' ? 'wss:' : 'ws'
-        const url = `${protocol}://${location.hostname}:${this.$root.config.websocketPort}`
-        this.ws = new WebSocket(url)
-      } catch (err) {
-        console.error('Websocket initialization error')
-        console.log(err)
-        return
-      }
-
-      this.pending = true
-
-      const onWebsocketTimeout = function(self) {
       return function() {
         console.log('Websocket reconnection timed out, retrying')
         this.pending = false
-          self.close()
+        this.close()
-          self.onclose()
+        this.onclose()
-        }
       }
+    },
 
-      this.timeout = setTimeout(
+    onMessage(event) {
-          onWebsocketTimeout(this.ws), this.reconnectMsecs)
-
-      this.ws.onmessage = (event) => {
       const handlers = []
       event = event.data
 
@@ -69,12 +58,12 @@ export default {
         handlers.push(...this.handlers[event.args.type])
       }
 
-        for (const handler of handlers) {
+      for (const [handler] of handlers) {
         handler(event.args)
       }
-      }
+    },
 
-      this.ws.onopen = () => {
+    onOpen() {
       if (this.opened) {
         console.log("There's already an opened websocket connection, closing the newly opened one")
         this.onclose = () => {}
@@ -92,13 +81,14 @@ export default {
         clearTimeout(this.timeout)
         this.timeout = undefined
       }
-      }
+    },
 
-      this.ws.onerror = (event) => {
+    onError(error) {
-        console.error(event)
+      console.error('Websocket error')
-      }
+      console.error(error)
+    },
 
-      this.ws.onclose = (event) => {
+    onClose(event) {
       if (event) {
         console.log('Websocket closed - code: ' + event.code + ' - reason: ' + event.reason)
       }
@@ -109,11 +99,62 @@ export default {
         this.pending = true
         this.init()
       }
+    },
+
+    init() {
+      try {
+        const protocol = location.protocol === 'https:' ? 'wss:' : 'ws'
+        const url = `${protocol}://${location.hostname}:${this.wsPort}`
+        this.ws = new WebSocket(url)
+      } catch (err) {
+        console.error('Websocket initialization error')
+        console.error(err)
+        return
       }
+
+      this.pending = true
+      this.timeout = setTimeout(this.onWebsocketTimeout, this.reconnectMsecs)
+      this.ws.onmessage = this.onMessage
+      this.ws.onopen = this.onOpen
+      this.ws.onerror = this.onError
+      this.ws.onclose = this.onClose
+    },
+
+    subscribe(msg) {
+      const handler = msg.handler
+      const events = msg.events.length ? msg.events : [null]
+
+      for (const event of events) {
+        if (!(event in this.handlers)) {
+          this.handlers[event] = []
+        }
+
+        this.handlers[event].push(handler)
       }
     },
 
-  mounted() {
+    unsubscribe(msg) {
+      const handler = msg.handler
+      const events = msg.events.length ? msg.events : [null]
+
+      for (const event of events) {
+        if (!(event in this.handlers))
+          continue
+
+        const idx = this.handlers[event].indexOf(handler)
+        if (idx < 0)
+          continue
+
+        this.handlers[event] = this.handlers[event].splice(idx, 1)[1]
+        if (!this.handlers[event].length)
+          delete this.handlers[event]
+      }
+    },
+  },
+
+  created() {
+    bus.on('subscribe', this.subscribe)
+    bus.on('unsubscribe', this.unsubscribe)
     this.init()
   },
 }

platypush/backend/http/webapp/src/Utils.vue

@@ -1,9 +1,12 @@
 <script>
 import Api from "@/utils/Api";
+import DateTime from "@/utils/DateTime";
+import Events from "@/utils/Events";
 import Notification from "@/utils/Notification";
+import Types from "@/utils/Types";
 
 export default {
   name: "Utils",
-  mixins: [Api, Notification],
+  mixins: [Api, Notification, Events, DateTime, Types],
 }
 </script>

platypush/backend/http/webapp/src/components/Sensor.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="sensor">
+    <div class="label-container col-6" v-if="iconClass || name">
+      <i :class="iconClass" v-if="iconClass" />
+      <span v-text="name" v-else-if="name" />
+    </div>
+
+    <div class="value-container col-6">
+      <span class="value" v-text="_value" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Sensor",
+  props: {
+    // The FontAwesome icon class to be used.
+    iconClass: {
+      type: String,
+      required: false,
+    },
+
+    // The name of the sensor metric.
+    name: {
+      type: String,
+      required: false,
+    },
+
+    // Sensor value.
+    value: {
+      required: false,
+    },
+
+    // Sensor unit.
+    unit: {
+      type: String,
+      required: false,
+    },
+
+    // Number of decimal units.
+    decimals: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
+
+    // Set to true if the sensor holds a binary value.
+    isBoolean: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  computed: {
+    _value() {
+      if (this.value == null)
+        return 'N/A'
+
+      if (this.isBoolean)
+        return this.parseBoolean(this.value)
+
+      let value = parseFloat(this.value)
+      if (this.decimals != null)
+        value = value.toFixed(this.decimals)
+      if (this.unit)
+        value = `${value}${this.unit}`
+
+      return value
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.label-container {
+  text-align: left;
+}
+
+.value-container {
+  text-align: right;
+}
+</style>

platypush/backend/http/webapp/src/utils/DateTime.vue

@@ -0,0 +1,14 @@
+<script>
+export default {
+  name: "DateTime",
+  methods: {
+    formatDate(date) {
+      return date.toDateString().substring(0, 10)
+    },
+
+    formatTime(date, seconds=true) {
+      return date.toTimeString().substring(0, seconds ? 8 : 5)
+    },
+  },
+}
+</script>

platypush/backend/http/webapp/src/utils/Events.vue

@@ -0,0 +1,15 @@
+<script>
+import { bus } from "@/bus";
+
+export default {
+  name: "Events",
+  methods: {
+    subscribe(handler, ...events) {
+      bus.emit('subscribe', {
+        events: events,
+        handler: handler,
+      })
+    },
+  }
+}
+</script>

platypush/backend/http/webapp/src/utils/Notification.vue

@@ -1,5 +1,5 @@
 <script>
-import { bus } from '@/bus';
+import { bus } from "@/bus";
 
 export default {
   name: "Notification",

platypush/backend/http/webapp/src/utils/Types.vue

@@ -0,0 +1,20 @@
+<script>
+export default {
+  name: "Types",
+  methods: {
+    parseBoolean(value) {
+      if (typeof value === 'string') {
+        value = value.toLowerCase()
+        if (value === 'true')
+          return true
+        if (value === 'false')
+          return false
+
+        return !!parseInt(value)
+      }
+
+      return !!value
+    },
+  },
+}
+</script>

platypush/backend/http/webapp/src/widgets/Calendar/Index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="calendar">
+    <Loading v-if="loading" />
+
+    <div class="no-events" v-else-if="!events.length">
+      No events found
+    </div>
+
+    <div class="event upcoming-event" v-else-if="events.length > 0">
+      <div class="date" v-text="formatDate(events[0].start)"></div>
+      <div class="summary" v-text="events[0].summary"></div>
+      <div class="time">
+        {{ formatTime(events[0].start, false) }} -
+        {{ formatTime(events[0].end, false) }}
+      </div>
+    </div>
+
+    <div class="event-list" v-if="events.length > 1">
+      <div class="event" v-for="event in events.slice(1, maxEvents)" :key="event.id">
+        <div class="date col-2" v-text="formatDate(event.start)"></div>
+        <div class="time col-2" v-text="formatTime(event.start, false)"></div>
+        <div class="summary col-8" v-text="event.summary"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Utils from "@/Utils";
+import Loading from "@/components/Loading";
+
+export default {
+  name: "Calendar",
+  components: {Loading},
+  mixins: [Utils],
+  props: {
+    // Maximum number of events to be rendered.
+    maxEvents: {
+      type: Number,
+      required: false,
+      default: 10,
+    },
+
+    // Refresh interval in seconds.
+    refreshSeconds: {
+      type: Number,
+      required: false,
+      default: 600,
+    },
+  },
+
+  data: function() {
+    return {
+      events: [],
+      loading: false,
+    }
+  },
+
+  methods: {
+    refresh: async function() {
+      this.loading = true
+
+      try {
+        this.events = (await this.request('calendar.get_upcoming_events')).map(event => {
+          if (event.start)
+            event.start = new Date(event.start.dateTime || event.start.date)
+          if (event.end)
+            event.end = new Date(event.end.dateTime || event.end.date)
+
+          return event
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+
+  mounted: function() {
+    this.refresh()
+    setInterval(this.refresh, parseInt((this.refreshSeconds*1000).toFixed(0)))
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.calendar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  .no-events {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.75em;
+  }
+
+  .event {
+    font-size: .95em;
+  }
+
+  .event-list {
+    margin-top: 2em;
+  }
+
+  .upcoming-event {
+    text-align: center;
+    margin-bottom: .15em;
+    font-size: 1.2em;
+
+    .summary {
+      text-transform: uppercase;
+      font-size: 1.3em;
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/widgets/DateTime/Index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="date-time">
+    <div class="date" v-text="formatDate(now)" v-if="_showDate" />
+    <div class="time" v-text="formatTime(now, _showSeconds)" v-if="_showTime" />
+  </div>
+</template>
+
+<script>
+import Utils from "@/Utils";
+
+// Widget to show date and time
+export default {
+  name: 'DateTime',
+  mixins: [Utils],
+  props: {
+    // If false then don't display the date.
+    showDate: {
+      required: false,
+      default: true,
+    },
+
+    // If false then don't display the time.
+    showTime: {
+      required: false,
+      default: true,
+    },
+
+    // If false then don't display the seconds.
+    showSeconds: {
+      required: false,
+      default: true,
+    },
+  },
+
+  computed: {
+    _showTime() {
+      return this.parseBoolean(this.showTime)
+    },
+
+    _showDate() {
+      return this.parseBoolean(this.showDate)
+    },
+
+    _showSeconds() {
+      return this.parseBoolean(this.showSeconds)
+    },
+  },
+
+  data: function() {
+    return {
+      now: new Date(),
+    };
+  },
+
+  methods: {
+    refreshTime() {
+      this.now = new Date()
+    },
+  },
+
+  mounted: function() {
+    this.refreshTime()
+    setInterval(this.refreshTime, 1000)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.date-time {
+  .date {
+    font-size: 1.3em;
+  }
+
+  .time {
+    font-size: 2em;
+  }
+}
+</style>

platypush/backend/http/webapp/src/widgets/DateTimeWeather/Index.vue

@@ -1,30 +1,28 @@
 <template>
   <div class="date-time-weather">
-    <div class="date" v-text="formatDate(now)"></div>
+    <div class="row date-time-container">
-    <div class="time" v-text="formatTime(now)"></div>
+      <DateTime :show-date="_showDate" :show-time="_showTime" :animate="animate"
-
+                v-if="_showDate || _showTime" />
-    <h1 class="weather">
-      <skycons :condition="weatherIcon" :paused="animPaused" :size="iconSize" v-if="weatherIcon" />
-      <span class="temperature" v-if="weather">
-        {{ Math.round(parseFloat(weather.temperature)) + '&deg;' }}
-      </span>
-    </h1>
-
-    <div class="summary" v-if="weather && weather.summary" v-text="weather.summary"></div>
-
-    <div class="sensors" v-if="Object.keys(sensors).length">
-      <div class="sensor temperature col-6" v-if="sensors.temperature">
-        <i class="fas fa-thermometer-half"></i> &nbsp;
-        <span class="temperature">
-          {{ parseFloat(sensors.temperature).toFixed(1) + '&deg;' }}
-        </span>
     </div>
 
-      <div class="sensor humidity col-6" v-if="sensors.humidity">
+    <div class="row weather-container">
-        <i class="fa fa-tint"></i> &nbsp;
+      <Weather :show-summary="_showSummary" :animate="_animate" :icon-size="iconSize"
-        <span class="humidity">
+               :refresh-seconds="weatherRefreshSeconds" v-if="showWeather"/>
-          {{ parseFloat(sensors.humidity).toFixed(1) + '%' }}
+    </div>
-        </span>
+
+    <div class="row sensors-container">
+      <div class="row" v-if="_showSensors && Object.keys(sensors).length">
+        <div class="col-3">
+          <Sensor icon-class="fas fa-thermometer-half" :value="sensors.temperature" unit="°"
+                  v-if="sensors.temperature != null" />
+        </div>
+
+        <div class="col-6">&nbsp;</div>
+
+        <div class="col-3">
+          <Sensor icon-class="fas fa-tint" :value="sensors.humidity" unit="%"
+                  v-if="sensors.humidity != null" />
+        </div>
       </div>
     </div>
   </div>
@@ -32,88 +30,128 @@
 
 <script>
 import Utils from "@/Utils";
-import Skycons from "vue-skycons"
+import DateTime from "@/widgets/DateTime/Index";
+import Weather from "@/widgets/Weather/Index";
+import Sensor from "@/components/Sensor";
 
 // Widget to show date, time, weather and temperature information
 export default {
   name: 'DateTimeWeather',
   mixins: [Utils],
-  components: {Skycons},
+  components: {Sensor, DateTime, Weather},
   props: {
     // If false then the weather icon will be animated.
     // Otherwise, it will be a static image.
-    paused: {
+    animate: {
-      type: Boolean,
       required: false,
       default: false,
     },
 
-    // Size of the weather icon in pixels
+    // Size of the weather icon in pixels.
     iconSize: {
       type: Number,
       required: false,
       default: 50,
     },
+
+    // If false then don't display the date.
+    showDate: {
+      required: false,
+      default: true,
+    },
+
+    // If false then don't display the time.
+    showTime: {
+      required: false,
+      default: true,
+    },
+
+    // If false then don't display the weather.
+    showWeather: {
+      required: false,
+      default: true,
+    },
+
+    // If false then the weather summary won't be displayed.
+    showSummary: {
+      required: false,
+      default: true,
+    },
+
+    // If false then temperature/humidity sensor data won't be shown.
+    showSensors: {
+      required: false,
+      default: true,
+    },
+
+    // Name of the attribute on a received SensorDataChangeEvent that
+    // represents the temperature value to be rendered.
+    sensorTemperatureAttr: {
+      type: String,
+      required: false,
+      default: 'temperature',
+    },
+
+    // Name of the attribute on a received SensorDataChangeEvent that
+    // represents the humidity value to be rendered.
+    sensorHumidityAttr: {
+      type: String,
+      required: false,
+      default: 'humidity',
+    },
+
+    // Weather refresh interval in seconds.
+    weatherRefreshSeconds: {
+      type: Number,
+      required: false,
+      default: 900,
+    },
   },
 
   computed: {
-    animPaused() {
+    _showDate() {
-      return !!parseInt(this.paused)
+      return this.parseBoolean(this.showDate)
+    },
+
+    _showTime() {
+      return this.parseBoolean(this.showTime)
+    },
+
+    _showWeather() {
+      return this.parseBoolean(this.showWeather)
+    },
+
+    _showSummary() {
+      return this.parseBoolean(this.showSummary)
+    },
+
+    _showSensors() {
+      return this.parseBoolean(this.showSensors)
+    },
+
+    _animate() {
+      return this.parseBoolean(this.animate)
     },
   },
 
   data: function() {
     return {
-      weather: undefined,
       sensors: {},
-      now: new Date(),
-      weatherIcon: undefined,
     };
   },
 
   methods: {
-    async refresh() {
-      const weather = (await this.request('weather.darksky.get_hourly_forecast')).data[0]
-      this.onWeatherChange(weather)
-    },
-
-    refreshTime() {
-      this.now = new Date()
-    },
-
-    formatDate(date) {
-      return date.toDateString().substring(0, 10)
-    },
-
-    formatTime(date) {
-      return date.toTimeString().substring(0, 8)
-    },
-
-    onWeatherChange(event) {
-      if (!this.weather)
-        this.weather = {}
-
-      this.weather = {...this.weather, ...event}
-      this.weatherIcon = this.weather.icon
-    },
-
     onSensorData(event) {
-      if ('temperature' in event.data)
+      if (this.sensorTemperatureAttr in event.data)
         this.sensors.temperature = event.data.temperature
 
-      if ('humidity' in event.data)
+      if (this.sensorHumidityAttr in event.data)
-        this.sensors.temperature = event.data.humidity
+        this.sensors.humidity = event.data.humidity
     },
   },
 
-  mounted: function() {
+  mounted() {
-    this.refresh()
+    this.subscribe(this.onSensorData, 'platypush.message.event.sensor.SensorDataChangeEvent');
-    setInterval(this.refresh, 900000)
-    setInterval(this.refreshTime, 1000)
-
-    // TODO
-    // registerEventHandler(this.onWeatherChange, 'platypush.message.event.weather.NewWeatherConditionEvent')
-    // registerEventHandler(this.onSensorData, 'platypush.message.event.sensor.SensorDataChangeEvent')
   },
 }
 </script>
@@ -126,42 +164,27 @@ export default {
   align-items: center;
   padding-top: 0.1em;
 
-  .date {
+  .row {
-    font-size: 1.3em;
+    text-align: center;
-    height: 10%;
   }
 
-  .time {
+  .date-time-container {
-    font-size: 2em;
+    height: 40%;
-    height: 14%;
   }
 
-  .weather {
+  .weather-container {
-    height: 25%;
+    height: 40%;
-    display: flex;
-    align-items: center;
-    margin-top: 15%;
-
-    .temperature {
-      font-size: 3.1em;
-      margin-left: 0.4em;
-    }
   }
 
-  .summary {
+  .sensors-container {
-    height: 28%;
-  }
-
-  .sensors {
     width: 100%;
-    height: 13%;
+    height: 20%;
+    position: relative;
 
-    .sensor {
+    .row {
-      padding: 0 0.1em;
+      width: 100%;
-    }
+      position: absolute;
-
+      bottom: 0;
-    .humidity {
-      text-align: right;
     }
   }
 }

platypush/backend/http/webapp/src/widgets/Weather/Index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="weather">
+    <Loading v-if="loading" />
+
+    <h1 v-else>
+      <skycons :condition="weatherIcon" :paused="animate" :size="iconSize" v-if="weatherIcon" />
+      <span class="temperature" v-if="weather">
+        {{ Math.round(parseFloat(weather.temperature)) + '&deg;' }}
+      </span>
+    </h1>
+
+    <div class="summary" v-if="_showSummary && weather && weather.summary" v-text="weather.summary"></div>
+  </div>
+</template>
+
+<script>
+import Utils from "@/Utils";
+import Skycons from "vue-skycons"
+import Loading from "@/components/Loading";
+
+// Widget to show date, time, weather and temperature information
+export default {
+  name: 'Weather',
+  mixins: [Utils],
+  components: {Loading, Skycons},
+  props: {
+    // If false then the weather icon will be animated.
+    // Otherwise, it will be a static image.
+    animate: {
+      required: false,
+      default: false,
+    },
+
+    // Size of the weather icon in pixels.
+    iconSize: {
+      type: Number,
+      required: false,
+      default: 50,
+    },
+
+    // If false then the weather summary won't be displayed.
+    showSummary: {
+      required: false,
+      default: true,
+    },
+
+    // Refresh interval in seconds.
+    refreshSeconds: {
+      type: Number,
+      required: false,
+      default: 900,
+    },
+  },
+
+  data: function() {
+    return {
+      weather: undefined,
+      weatherIcon: undefined,
+      loading: false,
+    };
+  },
+
+  computed: {
+    _showSummary() {
+      return this.parseBoolean(this.showSummary)
+    },
+  },
+
+  methods: {
+    async refresh() {
+      this.loading = true
+
+      try {
+        const weather = (await this.request('weather.darksky.get_hourly_forecast')).data[0]
+        this.onWeatherChange(weather)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    onWeatherChange(event) {
+      if (!this.weather)
+        this.weather = {}
+
+      this.weather = {...this.weather, ...event}
+      this.weatherIcon = this.weather.icon
+    },
+  },
+
+  mounted: function() {
+    this.refresh()
+    this.subscribe(this.onWeatherChange, 'platypush.message.event.weather.NewWeatherConditionEvent')
+    setInterval(this.refresh, parseInt((this.refreshSeconds*1000).toFixed(0)))
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.weather {
+  display: flex;
+  flex-direction: column;
+
+  h1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .temperature {
+    font-size: 3.1em;
+    margin-left: 0.4em;
+  }
+}
+</style>

platypush/backend/http/webapp/src/widgets/Widget.vue

@@ -15,7 +15,11 @@ export default {
 .widget {
   background: $background-color;
   border-radius: 5px;
-  margin-bottom: 1em;
+  margin: 0 1em 1em 0;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  position: relative;
   overflow: hidden;
   box-shadow: 0 3px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
 }