mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-15 21:36:36 +00:00
Add a Z-Wave config panel (#209)
This commit is contained in:
Paulus Schoutsen
GitHub
parent
a6b2c36982
commit
62aa635390
@ -52,8 +52,7 @@
|
||||
}
|
||||
</style>
|
||||
<ha-config-section
|
||||
narrow='[[narrow]]'
|
||||
show-menu='[[showMenu]]'
|
||||
is-wide='[[isWide]]'
|
||||
>
|
||||
<span slot='header'>Server Management</span>
|
||||
<span slot='introduction'>
|
||||
@ -140,11 +139,7 @@ Polymer({
|
||||
type: Object,
|
||||
},
|
||||
|
||||
narrow: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
showMenu: {
|
||||
isWide: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
@ -32,10 +32,7 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
<ha-config-section
|
||||
narrow='[[narrow]]'
|
||||
show-menu='[[showMenu]]'
|
||||
>
|
||||
<ha-config-section is-wide='[[isWide]]'>
|
||||
<span slot='header'>Bring Hassbian to the next level</span>
|
||||
<span slot='introduction'>
|
||||
Discover exciting add-ons to enhance your Home Assistant installation. Add an MQTT server or control a connected TV via HDMI-CEC.
|
||||
@ -76,15 +73,10 @@ Polymer({
|
||||
type: Object,
|
||||
},
|
||||
|
||||
narrow: {
|
||||
isWide: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
showMenu: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
suiteStatus: {
|
||||
type: Object,
|
||||
value: null,
|
||||
@ -94,7 +86,7 @@ Polymer({
|
||||
updateStatus: function () {
|
||||
// TODO tapping install while something is installing triggers a second
|
||||
// update loop to start.
|
||||
this.hass.callApi('GET', 'hassbian/suites').then(function (suites) {
|
||||
this.hass.callApi('GET', 'config/hassbian/suites').then(function (suites) {
|
||||
this.suiteStatus = suites;
|
||||
|
||||
var isInstalling = false;
|
||||
@ -169,7 +161,7 @@ Polymer({
|
||||
|
||||
suiteActionTapped: function () {
|
||||
// TODO install tapped suite
|
||||
this.hass.callApi('POST', 'hassbian/suites/openzwave/install').then(this.updateStatus);
|
||||
this.hass.callApi('POST', 'config/hassbian/suites/openzwave/install').then(this.updateStatus);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
252
panels/config/ha-config-section-zwave.html
Normal file
252
panels/config/ha-config-section-zwave.html
Normal file
@ -0,0 +1,252 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
|
||||
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
|
||||
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
|
||||
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
||||
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
||||
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
|
||||
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
|
||||
|
||||
<link rel="import" href="../../src/resources/ha-style.html">
|
||||
|
||||
<link rel="import" href="./ha-config-section.html">
|
||||
|
||||
<dom-module id="ha-config-section-zwave">
|
||||
<template>
|
||||
<style include="iron-flex ha-style">
|
||||
.device-picker {
|
||||
@apply(--layout-horizontal);
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-placeholder {
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-center);
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
padding: 4px 16px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
@apply(--layout-flex-2);
|
||||
}
|
||||
|
||||
.form-group .form-control {
|
||||
@apply(--layout-flex-1);
|
||||
}
|
||||
</style>
|
||||
<ha-config-section is-wide='[[isWide]]'>
|
||||
<span slot='header'>Z-Wave</span>
|
||||
<span slot='introduction'>
|
||||
Z-Wave devices contain a lot of options. These controls will allow you to get into the nitty gritty details.
|
||||
</span>
|
||||
|
||||
<paper-card>
|
||||
<div class='card-content'>
|
||||
<div class='device-picker'>
|
||||
<paper-dropdown-menu
|
||||
label='Device'
|
||||
class='flex'
|
||||
disabled='[[!entities.length]]'
|
||||
>
|
||||
<paper-listbox
|
||||
class="dropdown-content"
|
||||
selected='{{selectedEntity}}'
|
||||
>
|
||||
<template is='dom-repeat' items='[[entities]]' as='state'>
|
||||
<paper-item>[[computeSelectCaption(state)]]</paper-item>
|
||||
</template>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
|
||||
<div class='form-container'>
|
||||
<template is='dom-if' if='[[computeShowPlaceholder(formState)]]'>
|
||||
<div class='form-placeholder'>
|
||||
<template is='dom-if' if='[[computeShowNoDevices(formState)]]'>
|
||||
No Z-Wave devices found! :-(
|
||||
</template>
|
||||
|
||||
<template is='dom-if' if='[[computeShowSpinner(formState)]]'>
|
||||
<paper-spinner active alt='[[formState]]'></paper-spinner>
|
||||
[[formState]]
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template is='dom-if' if='[[computeShowForm(formState)]]'>
|
||||
<div class='form-group'>
|
||||
<paper-checkbox
|
||||
checked='{{entityIgnored}}'
|
||||
class='form-control'
|
||||
>
|
||||
Exclude from Home Assistant
|
||||
</paper-checkbox>
|
||||
</div>
|
||||
|
||||
<div class='form-group'>
|
||||
<paper-dropdown-menu
|
||||
class='form-control flex'
|
||||
label='Polling intensity'
|
||||
disabled='[[entityIgnored]]'
|
||||
>
|
||||
<paper-listbox
|
||||
class="dropdown-content"
|
||||
selected='{{entityPollingIntensity}}'
|
||||
>
|
||||
<paper-item>Do not poll (0)</paper-item>
|
||||
<paper-item>Poll every time (1)</paper-item>
|
||||
<paper-item>Poll every other time (2)</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class='card-actions'>
|
||||
<paper-button
|
||||
on-tap='saveEntity'
|
||||
disabled='[[computeShowPlaceholder(formState)]]'
|
||||
>SAVE</paper-button>
|
||||
</div>
|
||||
</paper-card>
|
||||
|
||||
</ha-config-section>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'ha-config-section-zwave',
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
isWide: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
entities: {
|
||||
type: Array,
|
||||
computed: 'computeEntities(hass)',
|
||||
observer: 'entitiesChanged',
|
||||
},
|
||||
|
||||
selectedEntity: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
observer: 'entityChanged',
|
||||
},
|
||||
|
||||
entityIgnored: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
entityPollingIntensity: {
|
||||
type: Number,
|
||||
},
|
||||
|
||||
formState: {
|
||||
type: String,
|
||||
// no-devices, loading, saving, editing
|
||||
value: 'no-devices',
|
||||
},
|
||||
},
|
||||
|
||||
computeEntities: function (hass) {
|
||||
return Object.keys(hass.states).map(function (key) { return hass.states[key]; })
|
||||
.filter(function (el) {
|
||||
return (!el.attributes.hidden &&
|
||||
true);
|
||||
// 'node_id' in el.attributes);
|
||||
})
|
||||
.sort(function (entityA, entityB) {
|
||||
if (entityA.entity_id < entityB.entity_id) {
|
||||
return -1;
|
||||
}
|
||||
if (entityA.entity_id > entityB.entity_id) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
|
||||
computeSelectCaption: function (stateObj) {
|
||||
return window.hassUtil.computeStateName(stateObj) +
|
||||
' (' + window.hassUtil.computeDomain(stateObj) + ')';
|
||||
},
|
||||
|
||||
computeShowNoDevices: function (formState) {
|
||||
return formState === 'no-devices';
|
||||
},
|
||||
|
||||
computeShowSpinner: function (formState) {
|
||||
return formState === 'loading' || formState === 'saving';
|
||||
},
|
||||
|
||||
computeShowPlaceholder: function (formState) {
|
||||
return formState !== 'editing';
|
||||
},
|
||||
|
||||
computeShowForm: function (formState) {
|
||||
return formState === 'editing';
|
||||
},
|
||||
|
||||
entitiesChanged: function (entities, oldEntities) {
|
||||
if (entities.length === 0) {
|
||||
this.formState = 'no-devices';
|
||||
return;
|
||||
} else if (!oldEntities) {
|
||||
this.selectedEntity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
var oldEntityId = oldEntities[this.selectedEntity].entity_id;
|
||||
|
||||
var newIndex = entities.findIndex(function (ent) {
|
||||
return ent.entity_id === oldEntityId;
|
||||
});
|
||||
|
||||
if (newIndex === -1) {
|
||||
this.selectedEntity = 0;
|
||||
} else if (newIndex !== this.selectedEntity) {
|
||||
// Entity moved index
|
||||
this.selectedEntity = newIndex;
|
||||
}
|
||||
},
|
||||
|
||||
entityChanged: function (index) {
|
||||
if (!this.entities) return;
|
||||
var entity = this.entities[index];
|
||||
this.formState = 'loading';
|
||||
var el = this;
|
||||
this.hass.callApi('GET', 'config/zwave/device_config/' + entity.entity_id)
|
||||
.then(function (data) {
|
||||
el.entityIgnored = data.ignored || false;
|
||||
el.entityPollingIntensity = data.polling_intensity || 0;
|
||||
el.formState = 'editing';
|
||||
});
|
||||
},
|
||||
|
||||
saveEntity: function () {
|
||||
var entity = this.entities[this.selectedEntity];
|
||||
var data = {
|
||||
ignored: this.entityIgnored,
|
||||
polling_intensity: this.entityPollingIntensity,
|
||||
};
|
||||
this.formState = 'saving';
|
||||
var el = this;
|
||||
this.hass.callApi('POST', 'config/zwave/device_config/' + entity.entity_id, data)
|
||||
.then(function () {
|
||||
el.formState = 'editing';
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -1,5 +1,4 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
|
||||
<link rel="import" href="../../src/resources/ha-style.html">
|
||||
|
||||
<dom-module id="ha-config-section">
|
||||
@ -53,11 +52,6 @@
|
||||
max-width: 500px;
|
||||
}
|
||||
</style>
|
||||
<iron-media-query query="(min-width: 1040px)" query-matches="{{wide}}">
|
||||
</iron-media-query>
|
||||
<iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
|
||||
</iron-media-query>
|
||||
|
||||
<div class$='[[computeContentClasses(isWide)]]'>
|
||||
<div class='header'><slot name="header"></slot></div>
|
||||
<div class$='[[computeClasses(isWide)]]'>
|
||||
@ -90,22 +84,10 @@ Polymer({
|
||||
value: false,
|
||||
},
|
||||
|
||||
wide: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
wideSidebar: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
isWide: {
|
||||
type: Boolean,
|
||||
computed: 'computeIsWide(showMenu, wideSidebar, wide)'
|
||||
}
|
||||
},
|
||||
|
||||
computeIsWide: function (showMenu, wideSidebar, wide) {
|
||||
return showMenu ? wideSidebar : wide;
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
|
||||
computeContentClasses: function (isWide) {
|
||||
|
||||
@ -3,9 +3,10 @@
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
|
||||
<link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
|
||||
<link rel="import" href="./ha-config-section-core.html">
|
||||
<link rel="import" href="./ha-config-section-hassbian.html">
|
||||
<link rel="import" href="./ha-config-section-zwave.html">
|
||||
|
||||
<dom-module id="ha-panel-config">
|
||||
<template>
|
||||
@ -13,10 +14,25 @@
|
||||
app-header-layout {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.spacer {
|
||||
height: 32px;
|
||||
|
||||
.content {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.border {
|
||||
margin: 32px auto 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
max-width: 1040px;
|
||||
}
|
||||
|
||||
.narrow .border {
|
||||
max-width: 640px;
|
||||
}
|
||||
</style>
|
||||
<iron-media-query query="(min-width: 1040px)" query-matches="{{wide}}">
|
||||
</iron-media-query>
|
||||
<iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
|
||||
</iron-media-query>
|
||||
<app-header-layout has-scrolling-region>
|
||||
<app-header fixed>
|
||||
<app-toolbar>
|
||||
@ -25,20 +41,28 @@
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<ha-config-section-core
|
||||
narrow='[[narrow]]'
|
||||
show-menu='[[showMenu]]'
|
||||
hass='[[hass]]'
|
||||
></ha-config-section-core>
|
||||
|
||||
<template is='dom-if' if='[[computeIsHassbianLoaded(hass)]]'>
|
||||
<ha-config-section-hassbian
|
||||
narrow='[[narrow]]'
|
||||
show-menu='[[showMenu]]'
|
||||
<div class$='[[computeClasses(isWide)]]'>
|
||||
<ha-config-section-core
|
||||
is-wide='[[isWide]]'
|
||||
hass='[[hass]]'
|
||||
></ha-config-section-hassbian>
|
||||
</template>
|
||||
<div class='spacer'></div>
|
||||
></ha-config-section-core>
|
||||
|
||||
<template is='dom-if' if='[[computeIsHassbianLoaded(hass)]]'>
|
||||
<div class='border'></div>
|
||||
<ha-config-section-hassbian
|
||||
is-wide='[[isWide]]'
|
||||
hass='[[hass]]'
|
||||
></ha-config-section-hassbian>
|
||||
</template>
|
||||
|
||||
<template is='dom-if' if='[[computeIsZwaveLoaded(hass)]]'>
|
||||
<div class='border'></div>
|
||||
<ha-config-section-zwave
|
||||
is-wide='[[isWide]]'
|
||||
hass='[[hass]]'
|
||||
></ha-config-section-zwave>
|
||||
</template>
|
||||
</div>
|
||||
</app-header-layout>
|
||||
</template>
|
||||
</dom-module>
|
||||
@ -60,10 +84,35 @@ Polymer({
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
wide: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
wideSidebar: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
isWide: {
|
||||
type: Boolean,
|
||||
computed: 'computeIsWide(showMenu, wideSidebar, wide)'
|
||||
},
|
||||
},
|
||||
|
||||
computeIsWide: function (showMenu, wideSidebar, wide) {
|
||||
return showMenu ? wideSidebar : wide;
|
||||
},
|
||||
|
||||
computeClasses: function (isWide) {
|
||||
return isWide ? 'content' : 'content narrow';
|
||||
},
|
||||
|
||||
computeIsHassbianLoaded(hass) {
|
||||
return window.hassUtil.isComponentLoaded(hass, 'config.hassbian');
|
||||
},
|
||||
|
||||
computeIsZwaveLoaded(hass) {
|
||||
return window.hassUtil.isComponentLoaded(hass, 'config.zwave');
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -77,8 +77,8 @@
|
||||
@apply(--paper-font-title);
|
||||
}
|
||||
|
||||
.card-actions > paper-button,
|
||||
.card-actions > ha-call-service-button {
|
||||
.card-actions > paper-button:not([disabled]),
|
||||
.card-actions > ha-call-service-button:not([disabled]) {
|
||||
color: var(--default-primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user