Commit 6ec31a25 authored by Fabio Manganiello's avatar Fabio Manganiello
Browse files

Added sensors component

parent 88b78843
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>platypush</title><link href="/static/css/chunk-0021f7ee.0a2f05d9.css" rel="prefetch"><link href="/static/css/chunk-01c1b3b0.6bf22fce.css" rel="prefetch"><link href="/static/css/chunk-052643ba.b0333423.css" rel="prefetch"><link href="/static/css/chunk-06539e5d.a37063a7.css" rel="prefetch"><link href="/static/css/chunk-07773226.3ce5e818.css" rel="prefetch"><link href="/static/css/chunk-0827360a.54ee8b20.css" rel="prefetch"><link href="/static/css/chunk-09eaa919.38a05394.css" rel="prefetch"><link href="/static/css/chunk-0b810405.96d60845.css" rel="prefetch"><link href="/static/css/chunk-178b19d7.33531ad8.css" rel="prefetch"><link href="/static/css/chunk-20811ed4.a68561be.css" rel="prefetch"><link href="/static/css/chunk-31bc5041.49496a07.css" rel="prefetch"><link href="/static/css/chunk-3b44ec4e.37d24614.css" rel="prefetch"><link href="/static/css/chunk-40ee55e4.58afedb7.css" rel="prefetch"><link href="/static/css/chunk-437beeb4.1582e2d0.css" rel="prefetch"><link href="/static/css/chunk-45557166.080e2847.css" rel="prefetch"><link href="/static/css/chunk-571780de.f28ca7e9.css" rel="prefetch"><link href="/static/css/chunk-57f8147d.b22779c7.css" rel="prefetch"><link href="/static/css/chunk-5d632024.4e589a50.css" rel="prefetch"><link href="/static/css/chunk-60dbbc82.55f7ede0.css" rel="prefetch"><link href="/static/css/chunk-690ef4aa.6711f0b2.css" rel="prefetch"><link href="/static/css/chunk-6c9a679d.83cde918.css" rel="prefetch"><link href="/static/css/chunk-6ee47cbe.d1c66125.css" rel="prefetch"><link href="/static/css/chunk-74fb6755.a7fa242b.css" rel="prefetch"><link href="/static/css/chunk-75da0704.0ac8383d.css" rel="prefetch"><link href="/static/css/chunk-75e68c24.397c4e62.css" rel="prefetch"><link href="/static/css/chunk-9684cd10.7cdaa500.css" rel="prefetch"><link href="/static/css/chunk-972487d6.f475a218.css" rel="prefetch"><link href="/static/css/chunk-9ab30700.c557c44b.css" rel="prefetch"><link href="/static/css/chunk-a018ff46.edca8ceb.css" rel="prefetch"><link href="/static/css/chunk-b6886800.594b16d3.css" rel="prefetch"><link href="/static/css/chunk-c4aee99e.c669bc57.css" rel="prefetch"><link href="/static/css/chunk-d8561e02.cbfca9f4.css" rel="prefetch"><link href="/static/css/chunk-db69e00c.dccd4270.css" rel="prefetch"><link href="/static/css/chunk-e017dc3e.2ebc3de8.css" rel="prefetch"><link href="/static/css/chunk-faa2aa9a.42375467.css" rel="prefetch"><link href="/static/js/chunk-0021f7ee.d66579e6.js" rel="prefetch"><link href="/static/js/chunk-01c1b3b0.33dec1bb.js" rel="prefetch"><link href="/static/js/chunk-052643ba.e6175d94.js" rel="prefetch"><link href="/static/js/chunk-06539e5d.1a0f4e72.js" rel="prefetch"><link href="/static/js/chunk-07773226.6dacd37d.js" rel="prefetch"><link href="/static/js/chunk-0827360a.dc951e0a.js" rel="prefetch"><link href="/static/js/chunk-09eaa919.4ce3bde5.js" rel="prefetch"><link href="/static/js/chunk-0b810405.8d15fdfc.js" rel="prefetch"><link href="/static/js/chunk-178b19d7.d303358e.js" rel="prefetch"><link href="/static/js/chunk-20811ed4.c414d9c3.js" rel="prefetch"><link href="/static/js/chunk-2d0aa612.e0afa3cd.js" rel="prefetch"><link href="/static/js/chunk-2d0b270c.6c0f5d6c.js" rel="prefetch"><link href="/static/js/chunk-2d0c1eb0.13e71eba.js" rel="prefetch"><link href="/static/js/chunk-2d0c229a.89f6da32.js" rel="prefetch"><link href="/static/js/chunk-2d0cc2be.2dbd327d.js" rel="prefetch"><link href="/static/js/chunk-2d0d5f97.804f6cc8.js" rel="prefetch"><link href="/static/js/chunk-2d0d6b06.619bfe58.js" rel="prefetch"><link href="/static/js/chunk-2d0da3df.1ed597cb.js" rel="prefetch"><link href="/static/js/chunk-2d208116.78fc8daf.js" rel="prefetch"><link href="/static/js/chunk-2d2091df.f4b1ca67.js" rel="prefetch"><link href="/static/js/chunk-2d21b0dc.d599a7c3.js" rel="prefetch"><link href="/static/js/chunk-2d21da1a.7fc760ec.js" rel="prefetch"><link href="/static/js/chunk-2d22495e.eee3df12.js" rel="prefetch"><link href="/static/js/chunk-2d231217.4d511b64.js" rel="prefetch"><link href="/static/js/chunk-2d237d41.7c3c1e49.js" rel="prefetch"><link href="/static/js/chunk-31bc5041.821f5281.js" rel="prefetch"><link href="/static/js/chunk-3b44ec4e.7824d0f7.js" rel="prefetch"><link href="/static/js/chunk-40ee55e4.0f249e23.js" rel="prefetch"><link href="/static/js/chunk-437beeb4.a95dbde9.js" rel="prefetch"><link href="/static/js/chunk-45557166.38c65779.js" rel="prefetch"><link href="/static/js/chunk-571780de.56f07ce7.js" rel="prefetch"><link href="/static/js/chunk-57f8147d.da91a3db.js" rel="prefetch"><link href="/static/js/chunk-5d632024.5840de9b.js" rel="prefetch"><link href="/static/js/chunk-60dbbc82.478f9d0a.js" rel="prefetch"><link href="/static/js/chunk-690ef4aa.f4ca9bdd.js" rel="prefetch"><link href="/static/js/chunk-6c9a679d.32394b9f.js" rel="prefetch"><link href="/static/js/chunk-6ee47cbe.3a207d3e.js" rel="prefetch"><link href="/static/js/chunk-74fb6755.ac3b8fd6.js" rel="prefetch"><link href="/static/js/chunk-75da0704.8ee2e66d.js" rel="prefetch"><link href="/static/js/chunk-75e68c24.0b0c9dd6.js" rel="prefetch"><link href="/static/js/chunk-9684cd10.16a1722a.js" rel="prefetch"><link href="/static/js/chunk-972487d6.5f1981e6.js" rel="prefetch"><link href="/static/js/chunk-9ab30700.2d0a4b4e.js" rel="prefetch"><link href="/static/js/chunk-a018ff46.c0daa80d.js" rel="prefetch"><link href="/static/js/chunk-b6886800.dc96fe16.js" rel="prefetch"><link href="/static/js/chunk-c4aee99e.9dc547f2.js" rel="prefetch"><link href="/static/js/chunk-d8561e02.586340f2.js" rel="prefetch"><link href="/static/js/chunk-db69e00c.ff21720b.js" rel="prefetch"><link href="/static/js/chunk-e017dc3e.9ac840e4.js" rel="prefetch"><link href="/static/js/chunk-faa2aa9a.30241645.js" rel="prefetch"><link href="/static/css/app.7f989b45.css" rel="preload" as="style"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="preload" as="style"><link href="/static/js/app.24b6b5a6.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.f40d2e53.js" rel="preload" as="script"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="stylesheet"><link href="/static/css/app.7f989b45.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.f40d2e53.js"></script><script src="/static/js/app.24b6b5a6.js"></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>platypush</title><link href="/static/css/chunk-0021f7ee.0a2f05d9.css" rel="prefetch"><link href="/static/css/chunk-01c1b3b0.6bf22fce.css" rel="prefetch"><link href="/static/css/chunk-052643ba.b0333423.css" rel="prefetch"><link href="/static/css/chunk-06539e5d.a37063a7.css" rel="prefetch"><link href="/static/css/chunk-07773226.3ce5e818.css" rel="prefetch"><link href="/static/css/chunk-0827360a.54ee8b20.css" rel="prefetch"><link href="/static/css/chunk-09eaa919.38a05394.css" rel="prefetch"><link href="/static/css/chunk-0b810405.96d60845.css" rel="prefetch"><link href="/static/css/chunk-178b19d7.33531ad8.css" rel="prefetch"><link href="/static/css/chunk-20811ed4.a68561be.css" rel="prefetch"><link href="/static/css/chunk-31bc5041.49496a07.css" rel="prefetch"><link href="/static/css/chunk-3b44ec4e.37d24614.css" rel="prefetch"><link href="/static/css/chunk-40ee55e4.58afedb7.css" rel="prefetch"><link href="/static/css/chunk-437beeb4.1582e2d0.css" rel="prefetch"><link href="/static/css/chunk-45557166.080e2847.css" rel="prefetch"><link href="/static/css/chunk-571780de.f28ca7e9.css" rel="prefetch"><link href="/static/css/chunk-57f8147d.b22779c7.css" rel="prefetch"><link href="/static/css/chunk-5d632024.4e589a50.css" rel="prefetch"><link href="/static/css/chunk-60dbbc82.55f7ede0.css" rel="prefetch"><link href="/static/css/chunk-690ef4aa.6711f0b2.css" rel="prefetch"><link href="/static/css/chunk-6c9a679d.83cde918.css" rel="prefetch"><link href="/static/css/chunk-6ee47cbe.d1c66125.css" rel="prefetch"><link href="/static/css/chunk-74fb6755.a7fa242b.css" rel="prefetch"><link href="/static/css/chunk-75da0704.0ac8383d.css" rel="prefetch"><link href="/static/css/chunk-75e68c24.397c4e62.css" rel="prefetch"><link href="/static/css/chunk-9684cd10.7cdaa500.css" rel="prefetch"><link href="/static/css/chunk-972487d6.f475a218.css" rel="prefetch"><link href="/static/css/chunk-a018ff46.edca8ceb.css" rel="prefetch"><link href="/static/css/chunk-b6886800.594b16d3.css" rel="prefetch"><link href="/static/css/chunk-b8b1872e.355b7f9b.css" rel="prefetch"><link href="/static/css/chunk-c4aee99e.c669bc57.css" rel="prefetch"><link href="/static/css/chunk-d8561e02.cbfca9f4.css" rel="prefetch"><link href="/static/css/chunk-db69e00c.dccd4270.css" rel="prefetch"><link href="/static/css/chunk-e017dc3e.2ebc3de8.css" rel="prefetch"><link href="/static/css/chunk-faa2aa9a.42375467.css" rel="prefetch"><link href="/static/js/chunk-0021f7ee.d66579e6.js" rel="prefetch"><link href="/static/js/chunk-01c1b3b0.33dec1bb.js" rel="prefetch"><link href="/static/js/chunk-052643ba.e6175d94.js" rel="prefetch"><link href="/static/js/chunk-06539e5d.1a0f4e72.js" rel="prefetch"><link href="/static/js/chunk-07773226.6dacd37d.js" rel="prefetch"><link href="/static/js/chunk-0827360a.dc951e0a.js" rel="prefetch"><link href="/static/js/chunk-09eaa919.4ce3bde5.js" rel="prefetch"><link href="/static/js/chunk-0b810405.8d15fdfc.js" rel="prefetch"><link href="/static/js/chunk-178b19d7.d303358e.js" rel="prefetch"><link href="/static/js/chunk-20811ed4.c414d9c3.js" rel="prefetch"><link href="/static/js/chunk-2d0aa612.e0afa3cd.js" rel="prefetch"><link href="/static/js/chunk-2d0b270c.6c0f5d6c.js" rel="prefetch"><link href="/static/js/chunk-2d0c1eb0.13e71eba.js" rel="prefetch"><link href="/static/js/chunk-2d0c229a.89f6da32.js" rel="prefetch"><link href="/static/js/chunk-2d0cc2be.2dbd327d.js" rel="prefetch"><link href="/static/js/chunk-2d0d5f97.804f6cc8.js" rel="prefetch"><link href="/static/js/chunk-2d0d6b06.619bfe58.js" rel="prefetch"><link href="/static/js/chunk-2d0da3df.1ed597cb.js" rel="prefetch"><link href="/static/js/chunk-2d208116.78fc8daf.js" rel="prefetch"><link href="/static/js/chunk-2d2091df.f4b1ca67.js" rel="prefetch"><link href="/static/js/chunk-2d21b0dc.d599a7c3.js" rel="prefetch"><link href="/static/js/chunk-2d21da1a.7fc760ec.js" rel="prefetch"><link href="/static/js/chunk-2d22495e.eee3df12.js" rel="prefetch"><link href="/static/js/chunk-2d231217.4d511b64.js" rel="prefetch"><link href="/static/js/chunk-2d237d41.7c3c1e49.js" rel="prefetch"><link href="/static/js/chunk-31bc5041.821f5281.js" rel="prefetch"><link href="/static/js/chunk-3b44ec4e.7824d0f7.js" rel="prefetch"><link href="/static/js/chunk-40ee55e4.0f249e23.js" rel="prefetch"><link href="/static/js/chunk-437beeb4.a95dbde9.js" rel="prefetch"><link href="/static/js/chunk-45557166.38c65779.js" rel="prefetch"><link href="/static/js/chunk-571780de.56f07ce7.js" rel="prefetch"><link href="/static/js/chunk-57f8147d.da91a3db.js" rel="prefetch"><link href="/static/js/chunk-5d632024.5840de9b.js" rel="prefetch"><link href="/static/js/chunk-60dbbc82.478f9d0a.js" rel="prefetch"><link href="/static/js/chunk-690ef4aa.f4ca9bdd.js" rel="prefetch"><link href="/static/js/chunk-6c9a679d.32394b9f.js" rel="prefetch"><link href="/static/js/chunk-6ee47cbe.3a207d3e.js" rel="prefetch"><link href="/static/js/chunk-74fb6755.ac3b8fd6.js" rel="prefetch"><link href="/static/js/chunk-75da0704.8ee2e66d.js" rel="prefetch"><link href="/static/js/chunk-75e68c24.0b0c9dd6.js" rel="prefetch"><link href="/static/js/chunk-9684cd10.16a1722a.js" rel="prefetch"><link href="/static/js/chunk-972487d6.5f1981e6.js" rel="prefetch"><link href="/static/js/chunk-a018ff46.c0daa80d.js" rel="prefetch"><link href="/static/js/chunk-b6886800.dc96fe16.js" rel="prefetch"><link href="/static/js/chunk-b8b1872e.33831618.js" rel="prefetch"><link href="/static/js/chunk-c4aee99e.9dc547f2.js" rel="prefetch"><link href="/static/js/chunk-d8561e02.586340f2.js" rel="prefetch"><link href="/static/js/chunk-db69e00c.ff21720b.js" rel="prefetch"><link href="/static/js/chunk-e017dc3e.9ac840e4.js" rel="prefetch"><link href="/static/js/chunk-faa2aa9a.30241645.js" rel="prefetch"><link href="/static/css/app.7f989b45.css" rel="preload" as="style"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="preload" as="style"><link href="/static/js/app.0816b5b2.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.f40d2e53.js" rel="preload" as="script"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="stylesheet"><link href="/static/css/app.7f989b45.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.f40d2e53.js"></script><script src="/static/js/app.0816b5b2.js"></script></body></html>
\ No newline at end of file
<template>
<div class="run component-row" @click="run">
<div :class="{'col-10': hasIcon, 'col-12': !hasIcon}" v-text="name" />
<div class="col-2 icon-container" v-if="hasIcon">
<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-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>
<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>
<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>
......
<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>
......
......@@ -3,51 +3,88 @@ import Utils from "@/Utils";
export default {
mixins: [Utils],
props: {
// Actions to run upon interaction with the widget. Format:
//
// [
// {
// "action": "light.hue.toggle",
// "args": {
// "lights": ["Bulb 1", "Bulb 2"]
// }
// },
// {
// "action": "music.mpd.pause"
// }
// ]
/**
* Component name
*/
name: {
type: String,
default: '[Unnamed sensor]',
},
/**
* 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,
},
/**
* 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:
//
// - mounted: Function to execute when the component is mounted.
// - beforeActions: Function to execute before the component action is run.
// - afterActions: Function to execute after the component action is run.
// - refresh: Function to be called at startup (if mounted is also specified
// then refresh will be called after mounted when the component is
// first mounted) and at regular intervals defined on the
// interval property (default: 10 seconds).
// - events: This is a mapping of functions that react to Platypush
// platform events published on the websocket (e.g. lights or
// switches toggles, media events etc.). The form is
// platypush_event_type -> function.
/**
* 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.
* - afterActions: Function to execute after the component action is run.
* - refresh: Function to be called at startup (if mounted is also specified
* then refresh will be called after mounted when the component is
* first mounted) and at regular intervals defined on the
* interval property (default: 10 seconds).
* - events: This is a mapping of functions that react to Platypush
* platform events published on the websocket (e.g. lights or
* 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)
......
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,
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment