Added sensors component

platypush/backend/http/webapp/src/components/widgets/Component/components/Run.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="run component-row" @click="run">
-    <div :class="{'col-10': hasIcon, 'col-12': !hasIcon}" v-text="name" />
+    <div class="col-1 icon-container" v-if="hasIcon">
-    <div class="col-2 icon-container" v-if="hasIcon">
       <img class="icon" :src="iconUrl" :alt="name" v-if="iconUrl?.length">
       <i class="icon" :class="iconClass" :style="iconStyle" v-else />
     </div>
+    <div :class="{'col-11': hasIcon, 'col-12': !hasIcon}" v-text="name" />
   </div>
 </template>
 
@@ -17,63 +17,9 @@ import mixins from './mixins';
 export default {
   name: "Run",
   mixins: [mixins],
-  props: {
-    /**
-     * Component name
-     */
-    name: {
-      type: String,
-      default: '[Unnamed action]',
-    },
-
-    /**
-     * Action (FontAwesome) icon class (default: `fa fa-play`)
-     */
-    iconClass: {
-      type: String,
-    },
-
-    /**
-     * Action icon URL (default: `fa fa-play`)
-     */
-    iconUrl: {
-      type: String,
-    },
-
-    /**
-     * Action icon color override, for FontAwesome icons
-     */
-    iconColor: {
-      type: String,
-    },
-  },
-
-  computed: {
-    iconStyle() {
-      if (!this.iconClass?.length && this.iconColor?.length)
-        return
-
-      return {'color': this.iconColor}
-    },
-
-    hasIcon() {
-      return this.iconUrl?.length || this.iconClass?.length
-    },
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import "mixins";
-
-.run {
-  .icon-container {
-    position: relative;
-
-    .icon {
-      position: absolute;
-      right: 0;
-    }
-  }
-}
 </style>

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="sensor component-row" @click="run">
+    <div class="col-1 icon-container" v-if="hasIcon">
+      <img class="icon" :src="iconUrl" :alt="name" v-if="iconUrl?.length">
+      <i class="icon" :class="iconClass" :style="iconStyle" v-else />
+    </div>
+    <div :class="{'col-8': hasIcon, 'col-9': !hasIcon}" v-text="name" />
+    <div class="col-3 value-container">
+      <div class="value">
+        {{ value }}
+        <span v-if="unit" v-text="unit" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from './mixins';
+
+/**
+ * This component is used to monitor values from sensors.
+ */
+export default {
+  name: "Sensor",
+  mixins: [mixins],
+  props: {
+    /**
+     * Optional unit used for the sensor value
+     */
+    unit: {
+      type: String,
+    },
+  },
+
+  methods: {
+    async run() {
+      if (this.handlers.beforeActions)
+        await this.handlers.beforeActions(this)
+
+      if (this.actions?.length)
+        for (const action of this.actions)
+          await this.request_(action)
+      else
+        await this.refresh()
+
+      if (this.handlers.afterActions) {
+        await this.handlers.afterActions(this)
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "mixins";
+
+.sensor {
+  .value-container {
+    position: relative;
+
+    .value {
+      position: absolute;
+      right: 0;
+      font-weight: bold;
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/widgets/Component/components/Slider.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="slider-root component-row">
-    <div class="col-7" v-text="name" />
+    <div class="col-1 icon-container" v-if="hasIcon">
+      <img class="icon" :src="iconUrl" :alt="name" v-if="iconUrl?.length">
+      <i class="icon" :class="iconClass" :style="iconStyle" v-else />
+    </div>
+    <div :class="{'col-6': hasIcon, 'col-7': !hasIcon}" v-text="name" />
     <div class="col-5 slider-container">
       <div class="slider">
         <SliderElement :value="value" :range="[parseFloat(min), parseFloat(max)]" @mouseup="run" />
@@ -22,14 +26,6 @@ export default {
   components: {SliderElement},
   mixins: [mixins],
   props: {
-    /**
-     * Display name for this slider.
-     */
-    name: {
-      type: String,
-      default: '[Unnamed slider]',
-    },
-
     /**
      * Minimum value for the slider (default: 0).
      */
@@ -60,12 +56,6 @@ export default {
       }
     },
   },
-
-  data() {
-    return {
-      value: undefined,
-    }
-  },
 }
 </script>
 

platypush/backend/http/webapp/src/components/widgets/Component/components/Switch.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="switch component-row" @click="run">
-    <div class="col-10" v-text="name" />
+    <div class="col-1 icon-container" v-if="hasIcon">
+      <img class="icon" :src="iconUrl" :alt="name" v-if="iconUrl?.length">
+      <i class="icon" :class="iconClass" :style="iconStyle" v-else />
+    </div>
+    <div :class="{'col-9': hasIcon, 'col-10': !hasIcon}" v-text="name" />
     <div class="col-2 toggle-container">
       <div class="toggle">
         <ToggleSwitch :value="value" @input.stop="run" />
@@ -21,21 +25,6 @@ export default {
   name: "Switch",
   components: {ToggleSwitch},
   mixins: [mixins],
-  props: {
-    /**
-     * Display name for this switch.
-     */
-    name: {
-      type: String,
-      default: '[Unnamed switch]',
-    },
-  },
-
-  data() {
-    return {
-      value: undefined,
-    }
-  },
 }
 </script>
 

platypush/backend/http/webapp/src/components/widgets/Component/components/mixins.js

@@ -3,51 +3,88 @@ import Utils from "@/Utils";
 export default {
     mixins: [Utils],
     props: {
-        // Actions to run upon interaction with the widget. Format:
+        /**
-        //
+         * Component name
-        // [
+         */
-        //   {
+        name: {
-        //     "action": "light.hue.toggle",
+            type: String,
-        //     "args": {
+            default: '[Unnamed sensor]',
-        //       "lights": ["Bulb 1", "Bulb 2"]
+        },
-        //     }
+
-        //   },
+        /**
-        //   {
+         * Action (FontAwesome) icon class (default: `fa fa-play`)
-        //     "action": "music.mpd.pause"
+         */
-        //   }
+        iconClass: {
-        // ]
+            type: String,
+        },
+
+        /**
+         * Action icon URL (default: `fa fa-play`)
+         */
+        iconUrl: {
+            type: String,
+        },
+
+        /**
+         * Action icon color override, for FontAwesome icons
+         */
+        iconColor: {
+            type: String,
+        },
+
+        /**
+         * Actions to run upon interaction with the widget. Format:
+         *
+         * [
+         *   {
+         *     "action": "light.hue.toggle",
+         *     "args": {
+         *       "lights": ["Bulb 1", "Bulb 2"]
+         *     }
+         *   },
+         *   {
+         *     "action": "music.mpd.pause"
+         *   }
+         * ]
+         */
         actions: {
             type: Array,
             default: () => { return [] },
         },
 
-        // Map of variables used by this component, in the form
+        /**
-        // of variable_name -> variable_value.
+         * Map of variables used by this component, in the form
+         * variable_name -> variable_value.
+         */
         _vars: {
             type: Object,
             default: () => { return {} },
         },
 
-        // Map of handlers, in the form of event_type -> functions.
+        /**
-        // Supported event handler types:
+         * Map of handlers, in the form of event_type -> functions.
-        //
+         * Supported event handler types:
-        //   - mounted: Function to execute when the component is mounted.
+         *
-        //   - beforeActions: Function to execute before the component action is run.
+         *   - mounted: Function to execute when the component is mounted.
-        //   - afterActions: Function to execute after the component action is run.
+         *   - beforeActions: Function to execute before the component action is run.
-        //   - refresh: Function to be called at startup (if mounted is also specified
+         *   - afterActions: Function to execute after the component action is run.
-        //              then refresh will be called after mounted when the component is
+         *   - refresh: Function to be called at startup (if mounted is also specified
-        //              first mounted) and at regular intervals defined on the
+         *              then refresh will be called after mounted when the component is
-        //              interval property (default: 10 seconds).
+         *              first mounted) and at regular intervals defined on the
-        //   - events: This is a mapping of functions that react to Platypush
+         *              interval property (default: 10 seconds).
-        //             platform events published on the websocket (e.g. lights or
+         *   - events: This is a mapping of functions that react to Platypush
-        //             switches toggles, media events etc.). The form is
+         *             platform events published on the websocket (e.g. lights or
-        //             platypush_event_type -> function.
+         *             switches toggles, media events etc.). The form is
+         *             platypush_event_type -> function.
+         */
         handlers: {
             type: Object,
             default: () => { return {} },
         },
 
-        // Event bus
+        /**
+         * Event bus
+         */
         bus: {
             type: Object,
         },
@@ -60,9 +97,23 @@ export default {
             refresh: null,
             refreshInterval: null,
             value: null,
+            loading: false,
         }
     },
 
+    computed: {
+        iconStyle() {
+            if (!this.iconClass?.length && this.iconColor?.length)
+                return
+
+            return {'color': this.iconColor}
+        },
+
+        hasIcon() {
+            return this.iconUrl?.length || this.iconClass?.length
+        },
+    },
+
     methods: {
         async run() {
             if (this.handlers.input)

platypush/backend/http/webapp/src/components/widgets/Component/index.js

@@ -1,9 +1,11 @@
 import Run from './components/Run'
 import Switch from './components/Switch'
 import Slider from './components/Slider'
+import Sensor from "@/components/widgets/Component/components/Sensor";
 
 export default {
     Run,
     Switch,
     Slider,
+    Sensor,
 }