github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Convert remaining elements to ES6 classes (#538) 

* Convert remaining elements to ES6 classes

* Use native DOM methods for tests

* Fix Polymer 2 debounce call
This commit is contained in:
Adam Mills 2017-10-30 00:47:03 -04:00 committed by Paulus Schoutsen
parent 7e40cfef09
commit fb0b1286d2
111 changed files with 4482 additions and 3963 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
panels/config/automation/ha-automation-editor.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -16,6 +16,8 @@
<link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../ha-config-section.html">
<script src='../../../build-temp/automation-editor.js'></script>
@ -108,80 +110,84 @@
</dom-module>
<script>
Polymer({
is: 'ha-automation-editor',
class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-automation-editor'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
errors: {
type: Object,
value: null,
},
errors: {
type: Object,
value: null,
},
dirty: {
type: Boolean,
value: false,
},
dirty: {
type: Boolean,
value: false,
},
config: {
type: Object,
value: null,
},
config: {
type: Object,
value: null,
},
automation: {
type: Object,
observer: 'automationChanged',
},
automation: {
type: Object,
observer: 'automationChanged',
},
creatingNew: {
type: Boolean,
observer: 'creatingNewChanged',
},
creatingNew: {
type: Boolean,
observer: 'creatingNewChanged',
},
name: {
type: String,
computed: 'computeName(automation)'
},
name: {
type: String,
computed: 'computeName(automation)'
},
isWide: {
type: Boolean,
observer: 'isWideChanged',
},
},
isWide: {
type: Boolean,
observer: 'isWideChanged',
},
};
}
created: function () {
constructor() {
super();
this.configChanged = this.configChanged.bind(this);
this._rendered = null;
},
}
detached: function () {
disconnectedCallback() {
super.disconnectedCallback();
if (this._rendered) {
window.unmountPreact(this._rendered);
}
},
}
configChanged: function (config) {
configChanged(config) {
// onChange gets called a lot during initial rendering causing recursing calls.
if (this._rendered === null) return;
this.config = config;
this.errors = null;
this.dirty = true;
this._updateComponent(config);
},
}
automationChanged: function (newVal, oldVal) {
automationChanged(newVal, oldVal) {
if (!newVal) return;
if (!this.hass) {
setTimeout(this.automationChanged.bind(this, newVal, oldVal), 0);
@ -204,9 +210,9 @@ Polymer({
this.config = config;
this._updateComponent();
}.bind(this));
},
}
creatingNewChanged: function (newVal) {
creatingNewChanged(newVal) {
if (!newVal) {
return;
}
@ -222,31 +228,31 @@ Polymer({
],
};
this._updateComponent();
},
}
isWideChanged: function () {
isWideChanged() {
if (this.config === null) return;
this._updateComponent();
},
}
backTapped: function () {
backTapped() {
if (this.dirty &&
// eslint-disable-next-line
!confirm('You have unsaved changes. Are you sure you want to leave?')) {
return;
}
history.back();
},
}
_updateComponent: function () {
_updateComponent() {
this._rendered = window.AutomationEditor(this.$.root, {
automation: this.config,
onChange: this.configChanged,
isWide: this.isWide,
}, this._rendered);
},
}
saveAutomation: function () {
saveAutomation() {
var id = this.creatingNew ? '' + Date.now() : this.automation.attributes.id;
this.hass.callApi('post', 'config/automation/config/' + id, this.config).then(function () {
this.dirty = false;
@ -259,10 +265,12 @@ Polymer({
this.errors = errors.body.message;
throw errors;
}.bind(this));
},
}
computeName: function (automation) {
computeName(automation) {
return automation && window.hassUtil.computeStateName(automation);
},
});
}
}
customElements.define(HaAutomationEditor.is, HaAutomationEditor);
</script>

70
panels/config/automation/ha-automation-picker.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -8,6 +8,8 @@
<link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../ha-config-section.html">
<dom-module id="ha-automation-picker">
@ -92,54 +94,58 @@
</dom-module>
<script>
Polymer({
is: 'ha-automation-picker',
class HaAutomationPicker extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-automation-picker'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
automations: {
type: Array,
},
automations: {
type: Array,
},
isWide: {
type: Boolean,
},
},
isWide: {
type: Boolean,
},
};
}
automationTapped: function (ev) {
automationTapped(ev) {
history.pushState(null, null, '/config/automation/edit/' + this.automations[ev.model.index].attributes.id);
this.fire('location-changed');
},
}
addAutomation: function () {
addAutomation() {
history.pushState(null, null, '/config/automation/new');
this.fire('location-changed');
},
}
computeName: function (automation) {
computeName(automation) {
return window.hassUtil.computeStateName(automation);
},
}
// Still thinking of something to add here.
// eslint-disable-next-line
computeDescription: function (automation) {
computeDescription(automation) {
return '';
},
}
_backTapped: function () {
_backTapped() {
history.back();
},
});
}
}
customElements.define(HaAutomationPicker.is, HaAutomationPicker);
</script>

70
panels/config/automation/ha-config-automation.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel='import' href='../../../bower_components/app-route/app-route.html'>
<link rel="import" href="./ha-automation-picker.html">
@ -45,37 +45,39 @@
</dom-module>
<script>
Polymer({
is: 'ha-config-automation',
class HaConfigAutomation extends Polymer.Element {
static get is() { return 'ha-config-automation'; }
properties: {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
route: Object,
isWide: Boolean,
_routeData: Object,
_routeMatches: Boolean,
_creatingNew: Boolean,
_edittingAutomation: Boolean,
static get properties() {
return {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
route: Object,
isWide: Boolean,
_routeData: Object,
_routeMatches: Boolean,
_creatingNew: Boolean,
_edittingAutomation: Boolean,
automations: {
type: Array,
computed: 'computeAutomations(hass)',
},
automations: {
type: Array,
computed: 'computeAutomations(hass)',
},
automation: {
type: Object,
computed: 'computeAutomation(automations, _edittingAutomation, _routeData)',
},
automation: {
type: Object,
computed: 'computeAutomation(automations, _edittingAutomation, _routeData)',
},
showEditor: {
type: Boolean,
computed: 'computeShowEditor(_edittingAutomation, _creatingNew)',
}
},
showEditor: {
type: Boolean,
computed: 'computeShowEditor(_edittingAutomation, _creatingNew)',
}
};
}
computeAutomation: function (automations, edittingAddon, routeData) {
computeAutomation(automations, edittingAddon, routeData) {
if (!automations || !edittingAddon) {
return null;
}
@ -85,9 +87,9 @@ Polymer({
}
}
return null;
},
}
computeAutomations: function (hass) {
computeAutomations(hass) {
var automations = [];
Object.keys(hass.states).forEach(function (key) {
@ -113,10 +115,12 @@ Polymer({
}
return 0;
});
},
}
computeShowEditor: function (_edittingAutomation, _creatingNew) {
computeShowEditor(_edittingAutomation, _creatingNew) {
return _creatingNew || _edittingAutomation;
},
});
}
}
customElements.define(HaConfigAutomation.is, HaConfigAutomation);
</script>

5
panels/config/core/ha-config-section-hassbian.html
View File

@ -101,12 +101,13 @@ class HaConfigSectionHassbian extends Polymer.Element {
}
if (isInstalling) {
this.async(this.updateStatus, 5000);
setTimeout(() => this.updateStatus(), 5000);
}
}.bind(this));
}
attached() {
connectedCallback() {
super.connectedCallback();
this.updateStatus = this.updateStatus.bind(this);
this.updateStatus();
}

104
panels/config/dashboard/ha-config-navigation.html
View File

@ -1,9 +1,11 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<dom-module id="ha-config-navigation">
<template>
<style include="iron-flex">
@ -31,63 +33,67 @@
</dom-module>
<script>
Polymer({
is: 'ha-config-navigation',
class HaConfigNavigation extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-config-navigation'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
pages: {
type: Array,
value: [
{
domain: 'core',
caption: 'General',
description: 'Validate your configuration file and control the server.',
loaded: true,
},
{
domain: 'customize',
caption: 'Customization',
description: 'Customize your entities.',
loaded: true,
},
{
domain: 'automation',
caption: 'Automation',
description: 'Create and edit automations.',
},
{
domain: 'script',
caption: 'Script',
description: 'Create and edit scripts.',
},
{
domain: 'zwave',
caption: 'Z-Wave',
description: 'Manage your Z-Wave network.',
}
],
}
},
pages: {
type: Array,
value: [
{
domain: 'core',
caption: 'General',
description: 'Validate your configuration file and control the server.',
loaded: true,
},
{
domain: 'customize',
caption: 'Customization',
description: 'Customize your entities.',
loaded: true,
},
{
domain: 'automation',
caption: 'Automation',
description: 'Create and edit automations.',
},
{
domain: 'script',
caption: 'Script',
description: 'Create and edit scripts.',
},
{
domain: 'zwave',
caption: 'Z-Wave',
description: 'Manage your Z-Wave network.',
}
],
}
};
}
_computeLoaded: function (hass, component) {
_computeLoaded(hass, component) {
return component.loaded || window.hassUtil.isComponentLoaded(hass, component.domain);
},
}
_computeCaption: function (component) {
_computeCaption(component) {
return component.caption;
},
}
_computeDescription: function (component) {
_computeDescription(component) {
return component.description;
},
}
_navigate: function (ev) {
_navigate(ev) {
history.pushState(null, null, '/config/' + ev.model.item.domain);
this.fire('location-changed');
},
});
}
}
customElements.define(HaConfigNavigation.is, HaConfigNavigation);
</script>

52
panels/config/ha-config-section.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../src/resources/ha-style.html">
<dom-module id="ha-config-section">
@ -67,39 +67,43 @@
</dom-module>
<script>
Polymer({
is: 'ha-config-section',
class HaConfigSection extends Polymer.Element {
static get is() { return 'ha-config-section'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
isWide: {
type: Boolean,
value: false,
},
},
isWide: {
type: Boolean,
value: false,
},
};
}
computeContentClasses: function (isWide) {
computeContentClasses(isWide) {
var classes = 'content ';
return isWide ? classes : classes + 'narrow';
},
}
computeClasses: function (isWide) {
computeClasses(isWide) {
var classes = 'together layout ';
return classes + (isWide ? 'horizontal' : 'vertical narrow');
},
});
}
}
customElements.define(HaConfigSection.is, HaConfigSection);
</script>

114
panels/config/ha-entity-config.html
View File

@ -1,3 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="ha-entity-config">
<template>
<style include="iron-flex ha-style">
@ -80,83 +81,86 @@
</dom-module>
<script>
Polymer({
is: 'ha-entity-config',
class HaEntityConfig extends Polymer.Element {
static get is() { return 'ha-entity-config'; }
properties: {
hass: {
type: Object,
observer: 'hassChanged',
},
static get properties() {
return {
hass: {
type: Object,
observer: 'hassChanged',
},
label: {
type: String,
value: 'Device',
},
label: {
type: String,
value: 'Device',
},
entities: {
type: Array,
observer: 'entitiesChanged',
},
entities: {
type: Array,
observer: 'entitiesChanged',
},
allowDelete: {
type: Boolean,
value: false,
},
allowDelete: {
type: Boolean,
value: false,
},
selectedEntity: {
type: Number,
value: -1,
observer: 'entityChanged',
},
selectedEntity: {
type: Number,
value: -1,
observer: 'entityChanged',
},
formState: {
type: String,
// no-devices, loading, saving, editing
value: 'no-devices',
},
formState: {
type: String,
// no-devices, loading, saving, editing
value: 'no-devices',
},
config: {
type: Object,
}
},
config: {
type: Object,
}
};
}
attached: function () {
connectedCallback() {
super.connectedCallback();
this.formEl = document.createElement(this.config.component);
this.formEl.hass = this.hass;
this.$.form.appendChild(this.formEl);
this.entityChanged(this.selectedEntity);
},
}
computeSelectCaption: function (stateObj) {
computeSelectCaption(stateObj) {
return this.config.computeSelectCaption ?
this.config.computeSelectCaption(stateObj) :
window.hassUtil.computeStateName(stateObj);
},
}
computeShowNoDevices: function (formState) {
computeShowNoDevices(formState) {
return formState === 'no-devices';
},
}
computeShowSpinner: function (formState) {
computeShowSpinner(formState) {
return formState === 'loading' || formState === 'saving';
},
}
computeShowPlaceholder: function (formState) {
computeShowPlaceholder(formState) {
return formState !== 'editing';
},
}
computeShowForm: function (formState) {
computeShowForm(formState) {
return formState === 'editing';
},
}
hassChanged: function (hass) {
hassChanged(hass) {
if (this.formEl) {
this.formEl.hass = hass;
}
},
}
entitiesChanged: function (entities, oldEntities) {
entitiesChanged(entities, oldEntities) {
if (entities.length === 0) {
this.formState = 'no-devices';
return;
@ -177,9 +181,9 @@ Polymer({
// Entity moved index
this.selectedEntity = newIndex;
}
},
}
entityChanged: function (index) {
entityChanged(index) {
if (!this.entities || !this.formEl) return;
var entity = this.entities[index];
if (!entity) return;
@ -190,15 +194,17 @@ Polymer({
.then(function () {
el.formState = 'editing';
});
},
}
saveEntity: function () {
saveEntity() {
this.formState = 'saving';
var el = this;
this.formEl.saveEntity()
.then(function () {
el.formState = 'editing';
});
},
});
}
}
customElements.define(HaEntityConfig.is, HaEntityConfig);
</script>

70
panels/config/script/ha-config-script.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel='import' href='../../../bower_components/app-route/app-route.html'>
<link rel="import" href="./ha-script-picker.html">
@ -45,37 +45,39 @@
</dom-module>
<script>
Polymer({
is: 'ha-config-script',
class HaConfigScript extends Polymer.Element {
static get is() { return 'ha-config-script'; }
properties: {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
route: Object,
isWide: Boolean,
_routeData: Object,
_routeMatches: Boolean,
_creatingNew: Boolean,
_edittingScript: Boolean,
static get properties() {
return {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
route: Object,
isWide: Boolean,
_routeData: Object,
_routeMatches: Boolean,
_creatingNew: Boolean,
_edittingScript: Boolean,
scripts: {
type: Array,
computed: 'computeScripts(hass)',
},
scripts: {
type: Array,
computed: 'computeScripts(hass)',
},
script: {
type: Object,
computed: 'computeScript(scripts, _edittingScript, _routeData)',
},
script: {
type: Object,
computed: 'computeScript(scripts, _edittingScript, _routeData)',
},
showEditor: {
type: Boolean,
computed: 'computeShowEditor(_edittingScript, _creatingNew)',
}
},
showEditor: {
type: Boolean,
computed: 'computeShowEditor(_edittingScript, _creatingNew)',
}
};
}
computeScript: function (scripts, edittingAddon, routeData) {
computeScript(scripts, edittingAddon, routeData) {
if (!scripts || !edittingAddon) {
return null;
}
@ -85,9 +87,9 @@ Polymer({
}
}
return null;
},
}
computeScripts: function (hass) {
computeScripts(hass) {
var scripts = [];
Object.keys(hass.states).forEach(function (key) {
@ -110,10 +112,12 @@ Polymer({
}
return 0;
});
},
}
computeShowEditor: function (_edittingScript, _creatingNew) {
computeShowEditor(_edittingScript, _creatingNew) {
return _creatingNew || _edittingScript;
},
});
}
}
customElements.define(HaConfigScript.is, HaConfigScript);
</script>

136
panels/config/script/ha-script-editor.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -16,6 +16,8 @@
<link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../ha-config-section.html">
<script src='../../../build-temp/script-editor.js'></script>
@ -108,80 +110,84 @@
</dom-module>
<script>
Polymer({
is: 'ha-script-editor',
class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-script-editor'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
errors: {
type: Object,
value: null,
},
errors: {
type: Object,
value: null,
},
dirty: {
type: Boolean,
value: false,
},
dirty: {
type: Boolean,
value: false,
},
config: {
type: Object,
value: null,
},
config: {
type: Object,
value: null,
},
script: {
type: Object,
observer: 'scriptChanged',
},
script: {
type: Object,
observer: 'scriptChanged',
},
creatingNew: {
type: Boolean,
observer: 'creatingNewChanged',
},
creatingNew: {
type: Boolean,
observer: 'creatingNewChanged',
},
name: {
type: String,
computed: 'computeName(script)'
},
name: {
type: String,
computed: 'computeName(script)'
},
isWide: {
type: Boolean,
observer: 'isWideChanged',
},
},
isWide: {
type: Boolean,
observer: 'isWideChanged',
},
};
}
created: function () {
constructor() {
super();
this.configChanged = this.configChanged.bind(this);
this._rendered = null;
},
}
detached: function () {
disconnectedCallback() {
super.disconnectedCallback();
if (this._rendered) {
window.unmountPreact(this._rendered);
}
},
}
configChanged: function (config) {
configChanged(config) {
// onChange gets called a lot during initial rendering causing recursing calls.
if (this._rendered === null) return;
this.config = config;
this.errors = null;
this.dirty = true;
this._updateComponent(config);
},
}
scriptChanged: function (newVal, oldVal) {
scriptChanged(newVal, oldVal) {
if (!newVal) return;
if (!this.hass) {
setTimeout(this.scriptChanged.bind(this, newVal, oldVal), 0);
@ -203,9 +209,9 @@ Polymer({
this.config = config;
this._updateComponent();
}.bind(this));
},
}
creatingNewChanged: function (newVal) {
creatingNewChanged(newVal) {
if (!newVal) {
return;
}
@ -217,31 +223,31 @@ Polymer({
],
};
this._updateComponent();
},
}
isWideChanged: function () {
isWideChanged() {
if (this.config === null) return;
this._updateComponent();
},
}
backTapped: function () {
backTapped() {
if (this.dirty &&
// eslint-disable-next-line
!confirm('You have unsaved changes. Are you sure you want to leave?')) {
return;
}
history.back();
},
}
_updateComponent: function () {
_updateComponent() {
this._rendered = window.ScriptEditor(this.$.root, {
script: this.config,
onChange: this.configChanged,
isWide: this.isWide,
}, this._rendered);
},
}
saveScript: function () {
saveScript() {
var id = this.creatingNew ? '' + Date.now() : window.hassUtil.computeObjectId(this.script);
this.hass.callApi('post', 'config/script/config/' + id, this.config).then(function () {
this.dirty = false;
@ -254,10 +260,12 @@ Polymer({
this.errors = errors.body.message;
throw errors;
}.bind(this));
},
}
computeName: function (script) {
computeName(script) {
return script && window.hassUtil.computeStateName(script);
},
});
}
}
customElements.define(HaScriptEditor.is, HaScriptEditor);
</script>

70
panels/config/script/ha-script-picker.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -8,6 +8,8 @@
<link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../ha-config-section.html">
<dom-module id="ha-script-picker">
@ -88,54 +90,58 @@
</dom-module>
<script>
Polymer({
is: 'ha-script-picker',
class HaScriptPicker extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-script-picker'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
scripts: {
type: Array,
},
scripts: {
type: Array,
},
isWide: {
type: Boolean,
},
},
isWide: {
type: Boolean,
},
};
}
scriptTapped: function (ev) {
scriptTapped(ev) {
history.pushState(null, null, '/config/script/edit/' + this.scripts[ev.model.index].entity_id);
this.fire('location-changed');
},
}
addScript: function () {
addScript() {
history.pushState(null, null, '/config/script/new');
this.fire('location-changed');
},
}
computeName: function (script) {
computeName(script) {
return window.hassUtil.computeStateName(script);
},
}
// Still thinking of something to add here.
// eslint-disable-next-line
computeDescription: function (script) {
computeDescription(script) {
return '';
},
}
_backTapped: function () {
_backTapped() {
history.back();
},
});
}
}
customElements.define(HaScriptPicker.is, HaScriptPicker);
</script>

241
panels/config/zwave/ha-config-zwave.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../src/components/ha-menu-button.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
@ -319,101 +319,104 @@
</dom-module>
<script>
Polymer({
is: 'ha-config-zwave',
class HaConfigZwave extends Polymer.Element {
static get is() { return 'ha-config-zwave'; }
properties: {
hass: Object,
isWide: Boolean,
static get properties() {
return {
hass: Object,
isWide: Boolean,
nodes: {
type: Array,
computed: 'computeNodes(hass)'
},
selectedNode: {
type: Number,
value: -1,
observer: 'selectedNodeChanged'
},
config: {
type: Array,
value: function () {
return [];
}
},
entities: {
type: Array,
computed: 'computeEntities(selectedNode)',
},
entityInfoActive: {
type: Boolean,
},
selectedEntity: {
type: Number,
value: -1,
observer: 'selectedEntityChanged',
},
selectedEntityAttrs: {
type: Array,
computed: 'computeSelectedEntityAttrs(selectedEntity)'
},
values: {
type: Array,
},
groups: {
type: Array,
},
newNodeNameInput: {
type: String,
},
userCodes: {
type: Array,
value: function () {
return [];
nodes: {
type: Array,
computed: 'computeNodes(hass)'
},
},
hasNodeUserCodes: {
type: Boolean,
value: false,
},
selectedNode: {
type: Number,
value: -1,
observer: 'selectedNodeChanged'
},
showHelp: {
type: Boolean,
value: false,
},
config: {
type: Array,
value: function () {
return [];
}
},
entityIgnored: {
type: Boolean,
},
entities: {
type: Array,
computed: 'computeEntities(selectedNode)',
},
entityPollingIntensity: {
type: Number,
},
},
entityInfoActive: {
type: Boolean,
},
listeners: {
'hass-service-called': 'serviceCalled',
},
selectedEntity: {
type: Number,
value: -1,
observer: 'selectedEntityChanged',
},
serviceCalled: function (ev) {
selectedEntityAttrs: {
type: Array,
computed: 'computeSelectedEntityAttrs(selectedEntity)'
},
values: {
type: Array,
},
groups: {
type: Array,
},
newNodeNameInput: {
type: String,
},
userCodes: {
type: Array,
value: function () {
return [];
},
},
hasNodeUserCodes: {
type: Boolean,
value: false,
},
showHelp: {
type: Boolean,
value: false,
},
entityIgnored: {
type: Boolean,
},
entityPollingIntensity: {
type: Number,
},
};
}
ready() {
super.ready();
this.addEventListener('hass-service-called', ev => this.serviceCalled(ev));
}
serviceCalled(ev) {
var el = this;
if ((ev.detail.success) && (ev.detail.service === 'set_poll_intensity')) {
el.saveEntity();
}
},
}
computeNodes: function (hass) {
computeNodes(hass) {
return Object.keys(hass.states)
.map(function (key) { return hass.states[key]; })
.filter(function (ent) {
@ -421,9 +424,9 @@ Polymer({
(ent.entity_id).match('zwave[.]'));
})
.sort(window.hassUtil.sortByName);
},
}
computeEntities: function (selectedNode) {
computeEntities(selectedNode) {
if (!this.nodes || selectedNode === -1) return -1;
var hass = this.hass;
var nodeid = this.nodes[this.selectedNode].attributes.node_id;
@ -439,9 +442,9 @@ Polymer({
(!(ent.entity_id).match('zwave[.]')));
})
.sort(window.hassUtil.sortByName);
},
}
selectedNodeChanged: function (selectedNode) {
selectedNodeChanged(selectedNode) {
this.newNodeNameInput = '';
if (selectedNode === -1) return;
@ -468,9 +471,9 @@ Polymer({
this.hasNodeUserCodes = this.userCodes.length > 0;
this.notifyPath('hasNodeUserCodes');
});
},
}
selectedEntityChanged: function (selectedEntity) {
selectedEntityChanged(selectedEntity) {
if (selectedEntity === -1) return;
var el = this;
el.hass.callApi('GET', 'zwave/values/' + el.nodes[el.selectedNode].attributes.node_id).then((values) => {
@ -485,9 +488,9 @@ Polymer({
el.entityIgnored = data.ignored || false;
el.entityPollingIntensity = el.values[valueIndex].value.poll_intensity;
});
},
}
computeSelectedEntityAttrs: function (selectedEntity) {
computeSelectedEntityAttrs(selectedEntity) {
if (selectedEntity === -1) return 'No entity selected';
var entityAttrs = this.entities[selectedEntity].attributes;
var att = [];
@ -495,71 +498,71 @@ Polymer({
att.push(key + ': ' + entityAttrs[key]);
});
return att.sort();
},
}
computeSelectCaption: function (stateObj) {
computeSelectCaption(stateObj) {
return window.hassUtil.computeStateName(stateObj) + ' (Node:' +
stateObj.attributes.node_id + ' ' +
stateObj.attributes.query_stage + ')';
},
}
computeSelectCaptionEnt: function (stateObj) {
computeSelectCaptionEnt(stateObj) {
return (window.hassUtil.computeDomain(stateObj) + '.'
+ window.hassUtil.computeStateName(stateObj));
},
}
computeIsNodeSelected: function () {
computeIsNodeSelected() {
return (this.nodes && this.selectedNode !== -1);
},
}
computeIsEntitySelected: function (selectedEntity) {
computeIsEntitySelected(selectedEntity) {
return (selectedEntity === -1);
},
}
computeNodeServiceData: function (selectedNode) {
computeNodeServiceData(selectedNode) {
return { node_id: this.nodes[selectedNode].attributes.node_id };
},
}
computeGetNodeName: function (selectedNode) {
computeGetNodeName(selectedNode) {
if (this.selectedNode === -1 ||
!this.nodes[selectedNode].entity_id) return -1;
return this.nodes[selectedNode].attributes.node_name;
},
}
computeNodeNameServiceData: function (newNodeNameInput) {
computeNodeNameServiceData(newNodeNameInput) {
return {
node_id: this.nodes[this.selectedNode].attributes.node_id,
name: newNodeNameInput
};
},
}
computeRefreshEntityServiceData: function (selectedEntity) {
computeRefreshEntityServiceData(selectedEntity) {
if (selectedEntity === -1) return -1;
return { entity_id: this.entities[selectedEntity].entity_id };
},
}
computePollIntensityServiceData: function (entityPollingIntensity) {
computePollIntensityServiceData(entityPollingIntensity) {
if (!this.selectedNode === -1 || this.selectedEntity === -1) return -1;
return {
node_id: this.nodes[this.selectedNode].attributes.node_id,
value_id: this.entities[this.selectedEntity].attributes.value_id,
poll_intensity: parseInt(entityPollingIntensity),
};
},
}
saveEntity: function () {
saveEntity() {
var data = {
ignored: this.entityIgnored,
polling_intensity: parseInt(this.entityPollingIntensity),
};
return this.hass.callApi('POST', 'config/zwave/device_config/' + this.entities[this.selectedEntity].entity_id, data);
},
}
toggleHelp: function () {
toggleHelp() {
this.showHelp = !this.showHelp;
},
}
_objToArray: function (obj) {
_objToArray(obj) {
var array = [];
Object.keys(obj).forEach(function (key) {
array.push({
@ -568,10 +571,12 @@ Polymer({
});
});
return array;
},
}
_backTapped: function () {
_backTapped() {
history.back();
},
});
}
}
customElements.define(HaConfigZwave.is, HaConfigZwave);
</script>

143
panels/config/zwave/zwave-groups.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
@ -96,82 +96,85 @@
</dom-module>
<script>
Polymer({
is: 'zwave-groups',
class ZwaveGroups extends Polymer.Element {
static get is() { return 'zwave-groups'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
nodes: {
type: Array,
},
nodes: {
type: Array,
},
groups: {
type: Array,
},
groups: {
type: Array,
},
selectedNode: {
type: Number,
},
selectedNode: {
type: Number,
},
selectedTargetNode: {
type: Number,
value: -1
},
selectedTargetNode: {
type: Number,
value: -1
},
selectedGroup: {
type: Number,
value: -1,
observer: 'selectedGroupChanged'
},
selectedGroup: {
type: Number,
value: -1,
observer: 'selectedGroupChanged'
},
otherGroupNodes: {
type: Array,
value: -1,
computed: 'computeOtherGroupNodes(selectedGroup)'
},
otherGroupNodes: {
type: Array,
value: -1,
computed: 'computeOtherGroupNodes(selectedGroup)'
},
maxAssociations: {
type: String,
value: '',
computed: 'computeMaxAssociations(selectedGroup)'
},
maxAssociations: {
type: String,
value: '',
computed: 'computeMaxAssociations(selectedGroup)'
},
noAssociationsLeft: {
type: Boolean,
value: true,
computed: 'computeAssociationsLeft(selectedGroup)'
},
},
noAssociationsLeft: {
type: Boolean,
value: true,
computed: 'computeAssociationsLeft(selectedGroup)'
},
};
}
listeners: {
'hass-service-called': 'serviceCalled',
},
ready() {
super.ready();
this.addEventListener('hass-service-called', ev => this.serviceCalled(ev));
}
serviceCalled: function (ev) {
serviceCalled(ev) {
if (ev.detail.success) {
var foo = this;
setTimeout(function () {
foo.refreshGroups(foo.selectedNode);
}, 5000);
}
},
}
computeAssociationsLeft: function (selectedGroup) {
computeAssociationsLeft(selectedGroup) {
if (selectedGroup === -1) return true;
return (this.maxAssociations === this.otherGroupNodes.length);
},
}
computeMaxAssociations: function (selectedGroup) {
computeMaxAssociations(selectedGroup) {
if (selectedGroup === -1) return -1;
var maxAssociations = this.groups[selectedGroup].value.max_associations;
if (!maxAssociations) return 'None';
return maxAssociations;
},
}
computeOtherGroupNodes: function (selectedGroup) {
computeOtherGroupNodes(selectedGroup) {
if (selectedGroup === -1) return -1;
var associations = Object.values(this.groups[selectedGroup].value.association_instances);
if (!associations.length) return ['None'];
@ -191,34 +194,34 @@ Polymer({
}
return caption;
});
},
}
computeTargetInGroup: function (selectedGroup, selectedTargetNode) {
computeTargetInGroup(selectedGroup, selectedTargetNode) {
if (selectedGroup === -1 || selectedTargetNode === -1) return false;
const associations = Object.values(this.groups[selectedGroup].value.associations);
if (!associations.length) return false;
return associations.indexOf(this.nodes[selectedTargetNode].attributes.node_id) !== -1;
},
}
computeSelectCaption: function (stateObj) {
computeSelectCaption(stateObj) {
return window.hassUtil.computeStateName(stateObj) + ' (Node:' +
stateObj.attributes.node_id + ' ' +
stateObj.attributes.query_stage + ')';
},
}
computeSelectCaptionGroup: function (stateObj) {
computeSelectCaptionGroup(stateObj) {
return (stateObj.key + ': ' + stateObj.value.label);
},
}
computeIsTargetNodeSelected: function (selectedTargetNode) {
computeIsTargetNodeSelected(selectedTargetNode) {
return this.nodes && selectedTargetNode !== -1;
},
}
computeIsGroupSelected: function (selectedGroup) {
computeIsGroupSelected(selectedGroup) {
return this.nodes && this.selectedNode !== -1 && selectedGroup !== -1;
},
}
computeAssocServiceData: function (selectedGroup, type) {
computeAssocServiceData(selectedGroup, type) {
if (!this.groups === -1 || selectedGroup === -1 || this.selectedNode === -1) return -1;
return {
node_id: this.nodes[this.selectedNode].attributes.node_id,
@ -226,9 +229,9 @@ Polymer({
target_node_id: this.nodes[this.selectedTargetNode].attributes.node_id,
group: this.groups[selectedGroup].key
};
},
}
refreshGroups: function (selectedNode) {
refreshGroups(selectedNode) {
var groupData = [];
this.hass.callApi('GET', 'zwave/groups/' + this.nodes[selectedNode].attributes.node_id).then(function (groups) {
Object.keys(groups).forEach(function (key) {
@ -240,12 +243,14 @@ Polymer({
this.groups = groupData;
this.selectedGroupChanged(this.selectedGroup);
}.bind(this));
},
}
selectedGroupChanged: function (selectedGroup) {
selectedGroupChanged(selectedGroup) {
if (this.selectedGroup === -1 || selectedGroup === -1) return;
this.maxAssociations = this.groups[selectedGroup].value.max_associations;
this.otherGroupNodes = Object.values(this.groups[selectedGroup].value.associations);
},
});
}
}
customElements.define(ZwaveGroups.is, ZwaveGroups);
</script>

42
panels/config/zwave/zwave-log.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
@ -32,31 +32,35 @@
</dom-module>
<script>
Polymer({
is: 'ozw-log',
class OzwLog extends Polymer.Element {
static get is() { return 'ozw-log'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
isWide: {
type: Boolean,
value: false,
},
isWide: {
type: Boolean,
value: false,
},
ozwLogs: {
type: String,
value: 'Refresh to pull log'
},
},
ozwLogs: {
type: String,
value: 'Refresh to pull log'
},
};
}
refreshLog: function () {
refreshLog() {
this.ozwLogs = 'Loading ozw log...';
this.hass.callApi('GET', 'zwave/ozwlog')
.then((info) => {
this.ozwLogs = info;
});
},
});
}
}
customElements.define(OzwLog.is, OzwLog);
</script>

40
panels/config/zwave/zwave-network.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
@ -169,27 +169,31 @@
</dom-module>
<script>
Polymer({
is: 'zwave-network',
class ZwaveNetwork extends Polymer.Element {
static get is() { return 'zwave-network'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
isWide: {
type: Boolean,
value: false,
},
isWide: {
type: Boolean,
value: false,
},
showDescription: {
type: Boolean,
value: false,
},
},
showDescription: {
type: Boolean,
value: false,
},
};
}
helpTap: function () {
helpTap() {
this.showDescription = !this.showDescription;
}
});
}
customElements.define(ZwaveNetwork.is, ZwaveNetwork);
</script>

195
panels/config/zwave/zwave-node-config.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
@ -120,106 +120,109 @@
</dom-module>
<script>
Polymer({
is: 'zwave-node-config',
class ZwaveNodeConfig extends Polymer.Element {
static get is() { return 'zwave-node-config'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
nodes: {
type: Array,
observer: 'nodesChanged'
},
nodes: {
type: Array,
observer: 'nodesChanged'
},
selectedNode: {
type: Number,
value: -1,
observer: 'nodesChanged'
},
selectedNode: {
type: Number,
value: -1,
observer: 'nodesChanged'
},
config: {
type: Array,
value: function () {
return [];
}
},
config: {
type: Array,
value: function () {
return [];
}
},
selectedConfigParameter: {
type: Number,
value: -1,
observer: 'selectedConfigParameterChanged'
},
selectedConfigParameter: {
type: Number,
value: -1,
observer: 'selectedConfigParameterChanged'
},
configParameterMax: {
type: Number,
value: -1
},
configParameterMax: {
type: Number,
value: -1
},
configParameterMin: {
type: Number,
value: -1
},
configParameterMin: {
type: Number,
value: -1
},
configValueHelpText: {
type: String,
value: '',
computed: 'computeConfigValueHelp(selectedConfigParameter)'
},
configValueHelpText: {
type: String,
value: '',
computed: 'computeConfigValueHelp(selectedConfigParameter)'
},
selectedConfigParameterType: {
type: String,
value: ''
},
selectedConfigParameterType: {
type: String,
value: ''
},
selectedConfigValue: {
type: Number,
value: -1,
observer: 'computeSetConfigParameterServiceData'
},
selectedConfigValue: {
type: Number,
value: -1,
observer: 'computeSetConfigParameterServiceData'
},
selectedConfigParameterValues: {
type: Array,
value: function () {
return [];
}
},
selectedConfigParameterValues: {
type: Array,
value: function () {
return [];
}
},
selectedConfigParameterNumValues: {
type: String,
value: ''
},
selectedConfigParameterNumValues: {
type: String,
value: ''
},
loadedConfigValue: {
type: Number,
value: -1
},
loadedConfigValue: {
type: Number,
value: -1
},
wakeupInput: {
type: Number,
},
wakeupInput: {
type: Number,
},
wakeupNode: {
type: Boolean,
value: false,
},
},
wakeupNode: {
type: Boolean,
value: false,
},
};
}
listeners: {
'hass-service-called': 'serviceCalled',
},
ready() {
super.ready();
this.addEventListener('hass-service-called', ev => this.serviceCalled(ev));
}
serviceCalled: function (ev) {
serviceCalled(ev) {
if (ev.detail.success) {
var foo = this;
setTimeout(function () {
foo.refreshConfig(foo.selectedNode);
}, 5000);
}
},
}
nodesChanged: function () {
nodesChanged() {
if (!this.nodes) return;
this.wakeupNode = (this.nodes[this.selectedNode].attributes.wake_up_interval === 0 ||
this.nodes[this.selectedNode].attributes.wake_up_interval);
@ -227,29 +230,29 @@ Polymer({
if (this.nodes[this.selectedNode].attributes.wake_up_interval === 0) this.wakeupInput = '';
else this.wakeupInput = this.nodes[this.selectedNode].attributes.wake_up_interval;
}
},
}
computeGetWakeupValue: function (selectedNode) {
computeGetWakeupValue(selectedNode) {
if (this.selectedNode === -1 ||
!this.nodes[selectedNode].attributes.wake_up_interval) return 'unknown';
return (this.nodes[selectedNode].attributes.wake_up_interval);
},
}
computeWakeupServiceData: function (wakeupInput) {
computeWakeupServiceData(wakeupInput) {
return {
node_id: this.nodes[this.selectedNode].attributes.node_id,
value: wakeupInput
};
},
}
computeConfigValueHelp: function (selectedConfigParameter) {
computeConfigValueHelp(selectedConfigParameter) {
if (selectedConfigParameter === -1) return '';
var helpText = this.config[selectedConfigParameter].value.help;
if (!helpText) return ['No helptext available'];
return helpText;
},
}
computeSetConfigParameterServiceData: function (selectedConfigValue) {
computeSetConfigParameterServiceData(selectedConfigValue) {
if (this.selectedNode === -1 || this.selectedConfigParameter === -1) return -1;
var valueData = null;
if (('Short Byte Int').includes(this.selectedConfigParameterType)) {
@ -264,9 +267,9 @@ Polymer({
parameter: this.config[this.selectedConfigParameter].key,
value: valueData
};
},
}
selectedConfigParameterChanged: function (selectedConfigParameter) {
selectedConfigParameterChanged(selectedConfigParameter) {
if (selectedConfigParameter === -1) return;
this.selectedConfigValue = -1;
this.loadedConfigValue = -1;
@ -289,20 +292,20 @@ Polymer({
if (('List').includes(this.selectedConfigParameterType)) {
this.selectedConfigParameterValues = this.config[selectedConfigParameter].value.data_items;
}
},
}
isConfigParameterSelected: function (selectedConfigParameter, type) {
isConfigParameterSelected(selectedConfigParameter, type) {
if (selectedConfigParameter === -1) return false;
if (this.config[selectedConfigParameter].value.type === type) return true;
if (type.includes(this.config[selectedConfigParameter].value.type)) return true;
return false;
},
}
computeSelectCaptionConfigParameter: function (stateObj) {
computeSelectCaptionConfigParameter(stateObj) {
return (stateObj.key + ': ' + stateObj.value.label);
},
}
refreshConfig: function (selectedNode) {
refreshConfig(selectedNode) {
var configData = [];
this.hass.callApi('GET', 'zwave/config/' + this.nodes[selectedNode].attributes.node_id).then(function (config) {
Object.keys(config).forEach(function (key) {
@ -314,6 +317,8 @@ Polymer({
this.config = configData;
this.selectedConfigParameterChanged(this.selectedConfigParameter);
}.bind(this));
},
});
}
}
customElements.define(ZwaveNodeConfig.is, ZwaveNodeConfig);
</script>

50
panels/config/zwave/zwave-node-information.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<dom-module id='zwave-node-information'>
@ -43,31 +43,33 @@
</dom-module>
<script>
Polymer({
is: 'zwave-node-information',
class ZwaveNodeInformation extends Polymer.Element {
static get is() { return 'zwave-node-information'; }
properties: {
nodes: {
type: Array,
observer: 'nodeChanged'
},
static get properties() {
return {
nodes: {
type: Array,
observer: 'nodeChanged'
},
selectedNode: {
type: Number,
value: -1,
observer: 'nodeChanged'
},
selectedNode: {
type: Number,
value: -1,
observer: 'nodeChanged'
},
selectedNodeAttrs: {
type: Array,
},
selectedNodeAttrs: {
type: Array,
},
nodeInfoActive: {
type: Boolean,
},
},
nodeInfoActive: {
type: Boolean,
},
};
}
nodeChanged: function (selectedNode) {
nodeChanged(selectedNode) {
if (!this.nodes || selectedNode === -1) return;
var nodeAttrs = this.nodes[this.selectedNode].attributes;
var att = [];
@ -75,6 +77,8 @@ Polymer({
att.push(key + ': ' + nodeAttrs[key]);
});
this.selectedNodeAttrs = att.sort();
},
});
}
}
customElements.define(ZwaveNodeInformation.is, ZwaveNodeInformation);
</script>

60
panels/config/zwave/zwave-node-options.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.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">
@ -32,37 +32,39 @@
</dom-module>
<script>
Polymer({
is: 'zwave-node-options',
class ZwaveNodeOptions extends Polymer.Element {
static get is() { return 'zwave-node-options'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
isWide: {
type: Boolean,
value: false,
},
isWide: {
type: Boolean,
value: false,
},
entities: {
type: Array,
computed: 'computeEntities(hass)',
},
entities: {
type: Array,
computed: 'computeEntities(hass)',
},
entityConfig: {
type: Object,
value: {
component: 'ha-form-zwave-device',
computeSelectCaption: function (stateObj) {
return window.hassUtil.computeStateName(stateObj) +
' (' + window.hassUtil.computeDomain(stateObj) + ')';
},
entityConfig: {
type: Object,
value: {
component: 'ha-form-zwave-device',
computeSelectCaption: function (stateObj) {
return window.hassUtil.computeStateName(stateObj) +
' (' + window.hassUtil.computeDomain(stateObj) + ')';
},
}
}
}
},
};
}
computeEntities: function (hass) {
computeEntities(hass) {
return Object.keys(hass.states)
.map(function (key) { return hass.states[key]; })
.filter(function (ent) {
@ -70,6 +72,8 @@ Polymer({
'node_id' in ent.attributes);
})
.sort(window.hassUtil.sortByName);
},
});
}
}
customElements.define(ZwaveNodeOptions.is, ZwaveNodeOptions);
</script>

98
panels/config/zwave/zwave-usercodes.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
@ -73,73 +73,77 @@
</dom-module>
<script>
Polymer({
is: 'zwave-usercodes',
class ZwaveUsercodes extends Polymer.Element {
static get is() { return 'zwave-usercodes'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
nodes: {
type: Array,
},
nodes: {
type: Array,
},
selectedNode: {
type: Number,
},
selectedNode: {
type: Number,
},
userCodes: {
type: Object,
},
userCodes: {
type: Object,
},
userCodeMaxLen: {
type: Number,
value: 4
},
userCodeMaxLen: {
type: Number,
value: 4
},
selectedUserCode: {
type: Number,
value: -1,
observer: 'selectedUserCodeChanged'
},
selectedUserCode: {
type: Number,
value: -1,
observer: 'selectedUserCodeChanged'
},
selectedUserCodeValue: {
type: Number,
value: -1
},
},
selectedUserCodeValue: {
type: Number,
value: -1
},
};
}
listeners: {
'hass-service-called': 'serviceCalled',
},
serviceCalled: function (ev) {
ready() {
super.ready();
this.addEventListener('hass-service-called', ev => this.serviceCalled(ev));
}
serviceCalled(ev) {
if (ev.detail.success) {
var foo = this;
setTimeout(function () {
foo.refreshUserCodes(foo.selectedNode);
}, 5000);
}
},
}
isUserCodeSelected: function (selectedUserCode) {
isUserCodeSelected(selectedUserCode) {
if (selectedUserCode === -1) return false;
return true;
},
}
computeSelectCaptionUserCodes: function (stateObj) {
computeSelectCaptionUserCodes(stateObj) {
return (stateObj.key + ': ' + stateObj.value.label);
},
}
selectedUserCodeChanged: function (selectedUserCode) {
selectedUserCodeChanged(selectedUserCode) {
if (this.selectedUserCode === -1 || selectedUserCode === -1) return;
var value = (parseInt((this.userCodes[selectedUserCode].value.code).trim()));
this.userCodeMaxLen = (this.userCodes[selectedUserCode].value.length);
if (isNaN(value)) this.selectedUserCodeValue = '';
else this.selectedUserCodeValue = value;
},
}
computeUserCodeServiceData: function (selectedUserCodeValue, type) {
computeUserCodeServiceData(selectedUserCodeValue, type) {
if (this.selectedNode === -1 || !selectedUserCodeValue) return -1;
var serviceData = null;
var valueData = null;
@ -158,9 +162,9 @@ Polymer({
};
}
return serviceData;
},
}
refreshUserCodes: function (selectedNode) {
refreshUserCodes(selectedNode) {
this.selectedUserCodeValue = '';
var userCodes = [];
this.hass.callApi('GET', 'zwave/usercodes/' + this.nodes[selectedNode].attributes.node_id).then(function (usercodes) {
@ -173,6 +177,8 @@ Polymer({
this.userCodes = userCodes;
this.selectedUserCodeChanged(this.selectedUserCode);
}.bind(this));
},
});
}
}
customElements.define(ZwaveUsercodes.is, ZwaveUsercodes);
</script>

85
panels/config/zwave/zwave-values.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
@ -68,59 +68,62 @@
</dom-module>
<script>
Polymer({
is: 'zwave-values',
class ZwaveValues extends Polymer.Element {
static get is() { return 'zwave-values'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
nodes: {
type: Array,
},
nodes: {
type: Array,
},
values: {
type: Array,
},
values: {
type: Array,
},
selectedNode: {
type: Number,
},
selectedNode: {
type: Number,
},
selectedValue: {
type: Number,
value: -1,
observer: 'selectedValueChanged'
},
},
selectedValue: {
type: Number,
value: -1,
observer: 'selectedValueChanged'
},
};
}
listeners: {
'hass-service-called': 'serviceCalled',
},
ready() {
super.ready();
this.addEventListener('hass-service-called', ev => this.serviceCalled(ev));
}
serviceCalled: function (ev) {
serviceCalled(ev) {
var foo = this;
if (ev.detail.success) {
setTimeout(function () {
foo.refreshValues(foo.selectedNode);
}, 5000);
}
},
}
computeSelectCaption: function (item) {
computeSelectCaption(item) {
return item.value.label + ' (Instance: ' + item.value.instance + ', Index: ' + item.value.index + ')';
},
}
computeGetValueName: function (selectedValue) {
computeGetValueName(selectedValue) {
return this.values[selectedValue].value.label;
},
}
computeIsValueSelected: function (selectedValue) {
computeIsValueSelected(selectedValue) {
return (!this.nodes || this.selectedNode === -1 || selectedValue === -1);
},
}
refreshValues: function (selectedNode) {
refreshValues(selectedNode) {
var valueData = [];
this.hass.callApi('GET', 'zwave/values/' + this.nodes[selectedNode].attributes.node_id).then(function (values) {
Object.keys(values).forEach(function (key) {
@ -132,18 +135,18 @@ Polymer({
this.values = valueData;
this.selectedValueChanged(this.selectedValue);
}.bind(this));
},
}
computeValueNameServiceData: function (newValueNameInput) {
computeValueNameServiceData(newValueNameInput) {
if (!this.selectedNode === -1 || this.selectedValue === -1) return -1;
return {
node_id: this.nodes[this.selectedNode].attributes.node_id,
value_id: this.values[this.selectedValue].key,
name: newValueNameInput,
};
},
}
selectedValueChanged: function (selectedValue) {
selectedValueChanged(selectedValue) {
if (!this.selectedNode === -1 || this.selectedValue === -1) return;
var el = this;
this.hass.callApi('GET', 'config/zwave/device_config/' + this.values[selectedValue].value.entity_id)
@ -151,7 +154,9 @@ Polymer({
el.entityIgnored = data.ignored || false;
el.entityPollingIntensity = el.values[selectedValue].value.poll_intensity;
});
},
});
}
}
customElements.define(ZwaveValues.is, ZwaveValues);
</script>

36
panels/dev-event/events-list.html
View File

@ -1,5 +1,6 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<dom-module id="events-list">
<template>
@ -31,10 +32,11 @@
</dom-module>
<script>
Polymer({
is: 'events-list',
class EventsList extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'events-list'; }
properties: {
static get properties() {
return {
hass: {
type: Object,
},
@ -42,17 +44,21 @@
events: {
type: Array,
},
},
};
}
attached: function () {
this.hass.callApi('GET', 'events').then(function (events) {
this.events = events;
}.bind(this));
},
connectedCallback() {
super.connectedCallback();
this.hass.callApi('GET', 'events').then(function (events) {
this.events = events;
}.bind(this));
}
eventSelected: function (ev) {
ev.preventDefault();
this.fire('event-selected', { eventType: ev.model.event.event });
},
});
eventSelected(ev) {
ev.preventDefault();
this.fire('event-selected', { eventType: ev.model.event.event });
}
}
customElements.define(EventsList.is, EventsList);
</script>

67
panels/dev-event/ha-panel-dev-event.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
@ -12,6 +12,7 @@
<link rel="import" href="../../src/components/ha-menu-button.html">
<link rel="import" href="../../src/resources/ha-style.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel="import" href="./events-list.html">
@ -71,40 +72,42 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-dev-event',
class HaPanelDevEvent extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-panel-dev-event'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
value: false,
},
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
eventType: {
type: String,
value: '',
},
eventType: {
type: String,
value: '',
},
eventData: {
type: String,
value: '',
},
},
eventData: {
type: String,
value: '',
},
};
}
eventSelected: function (ev) {
eventSelected(ev) {
this.eventType = ev.detail.eventType;
},
}
fireEvent: function () {
fireEvent() {
var eventData;
try {
@ -122,11 +125,13 @@ Polymer({
message: 'Event ' + this.eventType + ' successful fired!',
});
}.bind(this));
},
}
computeFormClasses: function (narrow) {
computeFormClasses(narrow) {
return narrow ?
'content fit' : 'content fit layout horizontal';
},
});
}
}
customElements.define(HaPanelDevEvent.is, HaPanelDevEvent);
</script>

63
panels/dev-info/ha-panel-dev-info.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
@ -103,40 +103,43 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-dev-info',
class HaPanelDevInfo extends Polymer.Element {
static get is() { return 'ha-panel-dev-info'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
value: false,
},
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
polymerVersion: {
type: String,
value: Polymer.version,
},
polymerVersion: {
type: String,
value: Polymer.version,
},
errorLog: {
type: String,
value: '',
},
},
errorLog: {
type: String,
value: '',
},
};
}
attached: function () {
connectedCallback() {
super.connectedCallback();
this.refreshErrorLog();
},
}
refreshErrorLog: function (ev) {
refreshErrorLog(ev) {
if (ev) ev.preventDefault();
this.errorLog = 'Loading error log…';
@ -144,6 +147,8 @@ Polymer({
this.hass.callApi('GET', 'error_log').then(function (log) {
this.errorLog = log || 'No errors have been reported.';
}.bind(this));
},
});
}
}
customElements.define(HaPanelDevInfo.is, HaPanelDevInfo);
</script>

30
panels/dev-mqtt/ha-panel-dev-mqtt.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../bower_components/app-layout/app-header-layout/app-header-layout.html'>
<link rel='import' href='../../bower_components/app-layout/app-header/app-header.html'>
@ -79,22 +79,26 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-dev-mqtt',
class HaPanelDevMqtt extends Polymer.Element {
static get is() { return 'ha-panel-dev-mqtt'; }
properties: {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
topic: String,
payload: String,
},
static get properties() {
return {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
topic: String,
payload: String,
};
}
_publish: function () {
_publish() {
this.hass.callService('mqtt', 'publish', {
topic: this.topic,
payload_template: this.payload,
});
},
});
}
}
customElements.define(HaPanelDevMqtt.is, HaPanelDevMqtt);
</script>

130
panels/dev-service/ha-panel-dev-service.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
<link rel='import' href='../../bower_components/paper-input/paper-textarea.html'>
@ -147,62 +147,64 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-dev-service',
class HaPanelDevService extends Polymer.Element {
static get is() { return 'ha-panel-dev-service'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
value: false,
},
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
domain: {
type: String,
value: '',
observer: 'domainChanged',
},
domain: {
type: String,
value: '',
observer: 'domainChanged',
},
service: {
type: String,
value: '',
observer: 'serviceChanged',
},
service: {
type: String,
value: '',
observer: 'serviceChanged',
},
serviceData: {
type: String,
value: '',
},
serviceData: {
type: String,
value: '',
},
_attributes: {
type: Array,
computed: 'computeAttributesArray(serviceDomains, domain, service)',
},
_attributes: {
type: Array,
computed: 'computeAttributesArray(serviceDomains, domain, service)',
},
_description: {
type: String,
computed: 'computeDescription(serviceDomains, domain, service)',
},
_description: {
type: String,
computed: 'computeDescription(serviceDomains, domain, service)',
},
serviceDomains: {
type: Object,
computed: 'computeServiceDomains(hass)',
},
},
serviceDomains: {
type: Object,
computed: 'computeServiceDomains(hass)',
},
};
}
computeServiceDomains: function (hass) {
computeServiceDomains(hass) {
return hass.config.services;
},
}
computeAttributesArray: function (serviceDomains, domain, service) {
computeAttributesArray(serviceDomains, domain, service) {
if (!serviceDomains) return [];
if (!(domain in serviceDomains)) return [];
if (!(service in serviceDomains[domain])) return [];
@ -211,49 +213,49 @@ Polymer({
return Object.keys(fields).map(function (field) {
return Object.assign({}, fields[field], { key: field });
});
},
}
computeDescription: function (serviceDomains, domain, service) {
computeDescription(serviceDomains, domain, service) {
if (!serviceDomains) return undefined;
if (!(domain in serviceDomains)) return undefined;
if (!(service in serviceDomains[domain])) return undefined;
return serviceDomains[domain][service].description;
},
}
computeDomains: function (serviceDomains) {
computeDomains(serviceDomains) {
return Object.keys(serviceDomains).sort();
},
}
computeServices: function (serviceDomains, domain) {
computeServices(serviceDomains, domain) {
if (!(domain in serviceDomains)) return [];
return Object.keys(serviceDomains[domain]).sort();
},
}
computeServiceKey: function (domain) {
computeServiceKey(domain) {
if (!domain) {
return 'panel-dev-service-state-service';
}
return 'panel-dev-service-state-service.' + domain;
},
}
computeServicedataKey: function (domain, service) {
computeServicedataKey(domain, service) {
if (!domain || !service) {
return 'panel-dev-service-state-servicedata';
}
return 'panel-dev-service-state-servicedata.' + domain + '.' + service;
},
}
domainChanged: function () {
domainChanged() {
this.service = '';
this.serviceData = '';
},
}
serviceChanged: function () {
serviceChanged() {
this.serviceData = '';
},
}
callService: function () {
callService() {
var serviceData;
try {
serviceData = this.serviceData ? JSON.parse(this.serviceData) : {};
@ -265,6 +267,8 @@ Polymer({
}
this.hass.callService(this.domain, this.service, serviceData);
},
});
}
}
customElements.define(HaPanelDevService.is, HaPanelDevService);
</script>

98
panels/dev-state/ha-panel-dev-state.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
@ -98,59 +98,61 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-dev-state',
class HaPanelDevState extends Polymer.Element {
static get is() { return 'ha-panel-dev-state'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
value: false,
},
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
_entityId: {
type: String,
value: '',
},
_entityId: {
type: String,
value: '',
},
_state: {
type: String,
value: '',
},
_state: {
type: String,
value: '',
},
_stateAttributes: {
type: String,
value: '',
},
_stateAttributes: {
type: String,
value: '',
},
_showAttributes: {
type: Boolean,
value: true,
},
_showAttributes: {
type: Boolean,
value: true,
},
_entities: {
type: Array,
computed: 'computeEntities(hass)',
},
},
_entities: {
type: Array,
computed: 'computeEntities(hass)',
},
};
}
entitySelected: function (ev) {
entitySelected(ev) {
var state = ev.model.entity;
this._entityId = state.entity_id;
this._state = state.state;
this._stateAttributes = JSON.stringify(state.attributes, null, ' ');
ev.preventDefault();
},
}
handleSetState: function () {
handleSetState() {
var attr;
var attrRaw = this._stateAttributes.replace(/^\s+|\s+$/g, '');
try {
@ -167,9 +169,9 @@ Polymer({
state: this._state,
attributes: attr,
});
},
}
computeEntities: function (hass) {
computeEntities(hass) {
return Object.keys(hass.states).map(function (key) { return hass.states[key]; })
.sort(function (entityA, entityB) {
if (entityA.entity_id < entityB.entity_id) {
@ -180,13 +182,13 @@ Polymer({
}
return 0;
});
},
}
computeShowAttributes: function (narrow, _showAttributes) {
computeShowAttributes(narrow, _showAttributes) {
return !narrow && _showAttributes;
},
}
attributeString: function (entity) {
attributeString(entity) {
var output = '';
var i;
var keys;
@ -203,6 +205,8 @@ Polymer({
}
return output;
},
});
}
}
customElements.define(HaPanelDevState.is, HaPanelDevState);
</script>

147
panels/dev-template/ha-panel-dev-template.html
View File

@ -1,4 +1,5 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/utils/debounce.html">
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
@ -88,89 +89,95 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-dev-template',
class HaPanelDevTemplate extends Polymer.Element {
static get is() { return 'ha-panel-dev-template'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
value: false,
},
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
error: {
type: Boolean,
value: false,
},
error: {
type: Boolean,
value: false,
},
rendering: {
type: Boolean,
value: false,
},
rendering: {
type: Boolean,
value: false,
},
template: {
type: String,
/* eslint-disable max-len */
value: 'Imitate available variables:\n' +
'{% set my_test_json = {\n' +
' "temperature": 25,\n' +
' "unit": "°C"\n' +
'} %}\n' +
'\n' +
'The temperature is {{ my_test_json.temperature }} {{ my_test_json.unit }}. \n' +
'\n' +
'{% if is_state("device_tracker.paulus", "home") and \n' +
' is_state("device_tracker.anne_therese", "home") -%}\n' +
'\n' +
' You are both home, you silly\n' +
'\n' +
'{%- else -%}\n' +
'\n' +
' Anne Therese is at {{ states("device_tracker.anne_therese") }} and ' +
'Paulus is at {{ states("device_tracker.paulus") }}\n' +
'\n' +
'{%- endif %}\n' +
'\n' +
'For loop example:\n' +
'{% for state in states.sensor -%}\n' +
' {%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%}\n' +
' {{ state.name | lower }} is {{state.state_with_unit}}\n' +
'{%- endfor -%}.',
/* eslint-enable max-len */
observer: 'templateChanged',
},
template: {
type: String,
/* eslint-disable max-len */
value: 'Imitate available variables:\n' +
'{% set my_test_json = {\n' +
' "temperature": 25,\n' +
' "unit": "°C"\n' +
'} %}\n' +
'\n' +
'The temperature is {{ my_test_json.temperature }} {{ my_test_json.unit }}. \n' +
'\n' +
'{% if is_state("device_tracker.paulus", "home") and \n' +
' is_state("device_tracker.anne_therese", "home") -%}\n' +
'\n' +
' You are both home, you silly\n' +
'\n' +
'{%- else -%}\n' +
'\n' +
' Anne Therese is at {{ states("device_tracker.anne_therese") }} and ' +
'Paulus is at {{ states("device_tracker.paulus") }}\n' +
'\n' +
'{%- endif %}\n' +
'\n' +
'For loop example:\n' +
'{% for state in states.sensor -%}\n' +
' {%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%}\n' +
' {{ state.name | lower }} is {{state.state_with_unit}}\n' +
'{%- endfor -%}.',
/* eslint-enable max-len */
observer: 'templateChanged',
},
processed: {
type: String,
value: '',
},
},
processed: {
type: String,
value: '',
},
};
}
computeFormClasses: function (narrow) {
computeFormClasses(narrow) {
return narrow ?
'content fit' : 'content fit layout horizontal';
},
}
computeRenderedClasses: function (error) {
computeRenderedClasses(error) {
return error ? 'error rendered' : 'rendered';
},
}
templateChanged: function () {
templateChanged() {
if (this.error) {
this.error = false;
}
this.debounce('render-template', this.renderTemplate.bind(this), 500);
},
this._debouncer = Polymer.Debouncer.debounce(
this._debouncer,
Polymer.Async.timeOut.after(500),
() => { this.renderTemplate(); }
);
}
renderTemplate: function () {
renderTemplate() {
this.rendering = true;
this.hass.callApi('POST', 'template', { template: this.template })
@ -182,6 +189,8 @@ Polymer({
this.error = true;
this.rendering = false;
}.bind(this));
},
});
}
}
customElements.define(HaPanelDevTemplate.is, HaPanelDevTemplate);
</script>

42
panels/hassio/addon-store/hassio-addon-repository.html
View File

@ -1,8 +1,10 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<dom-module id="hassio-addon-repository">
<template>
<style include="iron-flex ha-style">
@ -41,35 +43,39 @@
</dom-module>
<script>
Polymer({
is: 'hassio-addon-repository',
class HassioAddonRepository extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-addon-repository'; }
properties: {
repo: {
type: Object,
},
static get properties() {
return {
repo: {
type: Object,
},
addons: {
type: Array,
},
},
addons: {
type: Array,
},
};
}
computeShowIntro: function (repo) {
computeShowIntro(repo) {
return repo.url || repo.maintainer;
},
}
computeInstallStatus: function (addon) {
computeInstallStatus(addon) {
if (!addon.installed) {
return 'Not installed';
} else if (addon.installed !== addon.version) {
return addon.installed + ' (update available)';
}
return addon.installed;
},
}
addonTapped: function (ev) {
addonTapped(ev) {
history.pushState(null, null, '/hassio/store/' + this.addons[ev.model.index].slug);
this.fire('location-changed');
},
});
}
}
customElements.define(HassioAddonRepository.is, HassioAddonRepository);
</script>

66
panels/hassio/addon-store/hassio-addon-store-overview.html
View File

@ -1,9 +1,11 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="./hassio-repositories-editor.html">
<link rel="import" href="./hassio-addon-repository.html">
@ -56,46 +58,50 @@
</dom-module>
<script>
Polymer({
is: 'hassio-addon-store-overview',
class HassioAddonStoreOverview extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-addon-store-overview'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
selectedAddon: {
type: String,
value: null,
notify: true,
},
selectedAddon: {
type: String,
value: null,
notify: true,
},
addons: {
type: Array,
value: [],
},
addons: {
type: Array,
value: [],
},
repos: {
type: Array,
},
repos: {
type: Array,
},
supervisorInfo: {
type: Object,
}
},
supervisorInfo: {
type: Object,
}
};
}
computeAddOns: function (repo) {
computeAddOns(repo) {
return this.addons.filter(function (addon) {
return addon.repository === repo;
});
},
}
refreshTapped: function () {
refreshTapped() {
this.fire('hassio-store-refresh');
},
}
backTapped: function () {
backTapped() {
history.back();
},
});
}
}
customElements.define(HassioAddonStoreOverview.is, HassioAddonStoreOverview);
</script>

68
panels/hassio/addon-store/hassio-addon-store-view.html
View File

@ -1,9 +1,10 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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="../../../bower_components/paper-card/paper-card.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
<dom-module id="hassio-addon-store-view">
@ -90,50 +91,55 @@
</dom-module>
<script>
Polymer({
is: 'hassio-addon-store-view',
class HassioAddonStoreView extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-addon-store-view'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
selectedAddon: {
type: String,
value: null,
notify: true,
},
selectedAddon: {
type: String,
value: null,
notify: true,
},
addon: {
type: Object,
},
addon: {
type: Object,
},
repo: {
type: Object,
},
},
repo: {
type: Object,
},
};
}
listeners: {
'hass-api-called': 'apiCalled',
},
ready() {
super.ready();
this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
}
pathInstall: function (addon) {
pathInstall(addon) {
return addon && 'hassio/addons/' + addon.slug + '/install';
},
}
apiCalled: function (ev) {
apiCalled(ev) {
if (ev.detail.success) {
this.openAddon();
}
},
}
openAddon: function () {
openAddon() {
history.pushState(null, null, '/hassio/addon/' + this.addon.slug);
this.fire('location-changed');
},
}
backTapped: function () {
backTapped() {
history.back();
},
});
}
}
customElements.define(HassioAddonStoreView.is, HassioAddonStoreView);
</script>

99
panels/hassio/addon-store/hassio-addon-store.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -39,61 +39,64 @@
</dom-module>
<script>
Polymer({
is: 'hassio-addon-store',
class HassioAddonStore extends Polymer.Element {
static get is() { return 'hassio-addon-store'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
visible: {
type: Boolean,
observer: '_visibleChanged',
},
visible: {
type: Boolean,
observer: '_visibleChanged',
},
route: Object,
_routeData: Object,
_routeMatches: Boolean,
route: Object,
_routeData: Object,
_routeMatches: Boolean,
selectedAddonObject: {
type: Object,
computed: 'computeActiveAddon(addons, _routeData.addon)',
},
selectedAddonObject: {
type: Object,
computed: 'computeActiveAddon(addons, _routeData.addon)',
},
addons: {
type: Array,
value: [],
},
addons: {
type: Array,
value: [],
},
repos: {
type: Array,
value: []
},
repos: {
type: Array,
value: []
},
supervisorInfo: {
type: Object,
}
},
supervisorInfo: {
type: Object,
}
};
}
listeners: {
'hass-api-called': 'apiCalled',
'hassio-store-refresh': 'refreshData',
},
ready() {
super.ready();
this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
this.addEventListener('hassio-store-refresh', ev => this.refreshData(ev));
}
apiCalled: function (ev) {
apiCalled(ev) {
if (ev.detail.success) {
this._loadData();
}
},
}
_visibleChanged: function (visible) {
_visibleChanged(visible) {
if (visible) {
this._loadData();
}
},
}
_loadData: function () {
_loadData() {
this.hass.callApi('get', 'hassio/addons')
.then(function (info) {
this.addons = info.data.addons;
@ -102,18 +105,18 @@ Polymer({
this.addons = [];
this.repos = [];
}.bind(this));
},
}
computeActiveAddon: function (addons, selectedAddon) {
computeActiveAddon(addons, selectedAddon) {
for (var i = 0; i < addons.length; i++) {
if (addons[i].slug === selectedAddon) {
return addons[i];
}
}
return null;
},
}
computeActiveRepo: function (repos, selectedAddonObject) {
computeActiveRepo(repos, selectedAddonObject) {
if (!selectedAddonObject) return null;
for (var i = 0; i < repos.length; i++) {
@ -122,13 +125,15 @@ Polymer({
}
}
return null;
},
}
refreshData: function () {
refreshData() {
this.hass.callApi('post', 'hassio/addons/reload')
.then(function () {
this._loadData();
}.bind(this));
},
});
}
}
customElements.define(HassioAddonStore.is, HassioAddonStore);
</script>

46
panels/hassio/addon-store/hassio-repositories-editor.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
@ -34,39 +34,43 @@
</dom-module>
<script>
Polymer({
is: 'hassio-repositories-editor',
class HassioRepositoriesEditor extends Polymer.Element {
static get is() { return 'hassio-repositories-editor'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
options: {
type: String,
value: '',
},
options: {
type: String,
value: '',
},
repos: {
type: Array,
observer: 'reposChanged',
},
},
repos: {
type: Array,
observer: 'reposChanged',
},
};
}
reposChanged: function (repos) {
reposChanged(repos) {
this.options = repos
.filter(function (el) { return el.source !== null; })
.map(function (el) { return el.source; })
.join('\n');
},
}
computeOptionsData: function (options) {
computeOptionsData(options) {
var parsed = options.trim();
parsed = parsed ?
parsed.split('\n').map(function (ent) { return ent.trim(); }) : [];
return {
addons_repositories: parsed,
};
},
});
}
}
customElements.define(HassioRepositoriesEditor.is, HassioRepositoriesEditor);
</script>

76
panels/hassio/addon-view/hassio-addon-info.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -172,66 +172,70 @@
</dom-module>
<script>
Polymer({
is: 'hassio-addon-info',
class HassioAddonInfo extends Polymer.Element {
static get is() { return 'hassio-addon-info'; }
properties: {
hass: Object,
addonInfo: Object,
addonState: Object,
static get properties() {
return {
hass: Object,
addonInfo: Object,
addonState: Object,
_isRunning: {
type: Boolean,
computed: '_computeIsRunning(addonState)',
},
},
_isRunning: {
type: Boolean,
computed: '_computeIsRunning(addonState)',
},
};
}
_computeIsRunning: function (addonState) {
_computeIsRunning(addonState) {
return addonState && addonState.state === 'started';
},
}
_computeUpdateAvailable: function (data) {
_computeUpdateAvailable(data) {
return data && !data.detached && data.version !== data.last_version;
},
}
_pathStart: function (addon) {
_pathStart(addon) {
return 'hassio/addons/' + addon + '/start';
},
}
_pathStop: function (addon) {
_pathStop(addon) {
return 'hassio/addons/' + addon + '/stop';
},
}
_pathRestart: function (addon) {
_pathRestart(addon) {
return 'hassio/addons/' + addon + '/restart';
},
}
_pathUninstall: function (addon) {
_pathUninstall(addon) {
return 'hassio/addons/' + addon + '/uninstall';
},
}
_pathUpdate: function (addon) {
_pathUpdate(addon) {
return 'hassio/addons/' + addon + '/update';
},
}
_pathAddonOptions: function (addon) {
_pathAddonOptions(addon) {
return 'hassio/addons/' + addon + '/options';
},
}
_pathWebui: function (webui) {
_pathWebui(webui) {
return webui && webui.replace('[HOST]', document.location.hostname);
},
}
_pathLogo: function (addon) {
_pathLogo(addon) {
return '/api/hassio/addons/' + addon + '/logo';
},
}
_dataToggleAutoUpdate: function (addon, addonState) {
_dataToggleAutoUpdate(addon, addonState) {
return addonState && { auto_update: !addonState.auto_update };
},
}
_dataToggleBoot: function (addon, addonState) {
_dataToggleBoot(addon, addonState) {
return addonState && { boot: addonState.boot === 'manual' ? 'auto' : 'manual' };
}
});
}
customElements.define(HassioAddonInfo.is, HassioAddonInfo);
</script>

46
panels/hassio/addon-view/hassio-addon-logs.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
@ -22,39 +22,43 @@
</dom-module>
<script>
Polymer({
is: 'hassio-addon-logs',
class HassioAddonLogs extends Polymer.Element {
static get is() { return 'hassio-addon-logs'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
addon: {
type: String,
observer: 'addonChanged',
},
addon: {
type: String,
observer: 'addonChanged',
},
addonLogs: {
type: String,
value: '',
},
},
addonLogs: {
type: String,
value: '',
},
};
}
addonChanged: function (addon) {
addonChanged(addon) {
if (!this.hass) {
setTimeout(function () { this.addonChanged(addon); }.bind(this), 0);
return;
}
this.refresh();
},
}
refresh: function () {
refresh() {
this.hass.callApi('get', 'hassio/addons/' + this.addon + '/logs')
.then(function (info) {
this.addonLogs = info;
}.bind(this));
},
});
}
}
customElements.define(HassioAddonLogs.is, HassioAddonLogs);
</script>

74
panels/hassio/addon-view/hassio-addon-network.html
View File

@ -1,7 +1,9 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
<dom-module id="hassio-addon-network">
@ -67,36 +69,38 @@
</dom-module>
<script>
Polymer({
is: 'hassio-addon-network',
class HassioAddonNetwork extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-addon-network'; }
properties: {
hass: Object,
addon: String,
errors: {
type: String,
value: null,
},
_data: {
type: Object,
value: [],
},
addonState: {
type: Object,
observer: '_addonStateChanged',
},
_resetData: {
type: Object,
value: {
network: null,
static get properties() {
return {
hass: Object,
addon: String,
errors: {
type: String,
value: null,
},
},
},
_addonStateChanged: function (addonState) {
_data: {
type: Object,
value: [],
},
addonState: {
type: Object,
observer: '_addonStateChanged',
},
_resetData: {
type: Object,
value: {
network: null,
},
},
};
}
_addonStateChanged(addonState) {
if (!addonState) return;
var network = addonState.network || {};
@ -107,9 +111,9 @@ Polymer({
};
});
this._data = items.sort(function (el1, el2) { return el1.host - el2.host; });
},
}
_saveTapped: function () {
_saveTapped() {
this.errors = null;
var toSend = {};
this._data.forEach(function (item) {
@ -124,10 +128,12 @@ Polymer({
}.bind(this), function (resp) {
this.errors = resp.body.message;
}.bind(this));
},
}
_pathAddonOptions: function (addon) {
_pathAddonOptions(addon) {
return 'hassio/addons/' + addon + '/options';
},
});
}
}
customElements.define(HassioAddonNetwork.is, HassioAddonNetwork);
</script>

90
panels/hassio/addon-view/hassio-addon-options.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
@ -51,58 +51,60 @@
</dom-module>
<script>
Polymer({
is: 'hassio-addon-options',
class HassioAddonOptions extends Polymer.Element {
static get is() { return 'hassio-addon-options'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
addon: {
type: String,
},
addon: {
type: String,
},
options: {
type: String,
value: '',
},
options: {
type: String,
value: '',
},
optionsParsed: {
type: Object,
computed: 'parseOptions(options)',
},
optionsParsed: {
type: Object,
computed: 'parseOptions(options)',
},
errors: {
type: String,
value: null,
},
errors: {
type: String,
value: null,
},
addonState: {
type: Object,
value: null,
observer: 'addonStateChanged',
},
addonState: {
type: Object,
value: null,
observer: 'addonStateChanged',
},
_resetOptionsData: {
type: Object,
value: { options: {} },
},
},
_resetOptionsData: {
type: Object,
value: { options: {} },
},
};
}
addonStateChanged: function (addonState) {
addonStateChanged(addonState) {
this.options = addonState ? JSON.stringify(addonState.options, null, 2) : '';
},
}
parseOptions: function (options) {
parseOptions(options) {
try {
return JSON.parse(options);
} catch (err) {
return null;
}
},
}
saveTapped: function () {
saveTapped() {
this.errors = null;
this.hass.callApi('post', 'hassio/addons/' + this.addon + '/options', {
@ -110,16 +112,18 @@ Polymer({
}).catch(function (resp) {
this.errors = resp.body.message;
}.bind(this));
},
}
computeOptionsData: function (optionsParsed) {
computeOptionsData(optionsParsed) {
return {
options: optionsParsed,
};
},
}
pathOptions: function (addon) {
pathOptions(addon) {
return 'hassio/addons/' + addon + '/options';
},
});
}
}
customElements.define(HassioAddonOptions.is, HassioAddonOptions);
</script>

85
panels/hassio/addon-view/hassio-addon-view.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -70,45 +70,48 @@
</dom-module>
<script>
Polymer({
is: 'hassio-addon-view',
class HassioAddonView extends Polymer.Element {
static get is() { return 'hassio-addon-view'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
route: Object,
_routeData: {
type: Object,
observer: '_routeDataChanged',
},
route: Object,
_routeData: {
type: Object,
observer: '_routeDataChanged',
},
supervisorInfo: {
type: Object,
},
supervisorInfo: {
type: Object,
},
addonInfo: {
type: Object,
computed: 'computeAddonInfo(supervisorInfo, _routeData.addon)',
},
addonInfo: {
type: Object,
computed: 'computeAddonInfo(supervisorInfo, _routeData.addon)',
},
addonState: {
type: Object,
value: null,
},
addonState: {
type: Object,
value: null,
},
addonLogs: {
type: String,
value: '',
},
},
addonLogs: {
type: String,
value: '',
},
};
}
listeners: {
'hass-api-called': 'apiCalled',
},
ready() {
super.ready();
this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
}
apiCalled: function (ev) {
apiCalled(ev) {
var path = ev.detail.path;
if (!path) return;
@ -118,9 +121,9 @@ Polymer({
} else {
this._routeDataChanged(this._routeData);
}
},
}
_routeDataChanged: function (routeData) {
_routeDataChanged(routeData) {
if (!routeData || !routeData.addon) return;
this.hass.callApi('get', 'hassio/addons/' + routeData.addon + '/info')
.then(function (info) {
@ -128,9 +131,9 @@ Polymer({
}.bind(this), function () {
this.addonState = null;
}.bind(this));
},
}
computeAddonInfo: function (supervisorInfo, addon) {
computeAddonInfo(supervisorInfo, addon) {
if (!supervisorInfo) return null;
for (var i = 0; i < supervisorInfo.addons.length; i++) {
@ -138,10 +141,12 @@ Polymer({
if (addonInfo.slug === addon) return addonInfo;
}
return null;
},
}
backTapped: function () {
backTapped() {
history.back();
},
});
}
}
customElements.define(HassioAddonView.is, HassioAddonView);
</script>

50
panels/hassio/advanced/hassio-advanced.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -67,32 +67,36 @@
</dom-module>
<script>
Polymer({
is: 'hassio-advanced',
class HassioAdvanced extends Polymer.Element {
static get is() { return 'hassio-advanced'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
supervisorInfo: {
type: Object,
value: {},
},
supervisorInfo: {
type: Object,
value: {},
},
hostInfo: {
type: Object,
value: {},
},
hostInfo: {
type: Object,
value: {},
},
hassInfo: {
type: Object,
value: {},
},
},
hassInfo: {
type: Object,
value: {},
},
};
}
backTapped: function () {
backTapped() {
history.back();
},
});
}
}
customElements.define(HassioAdvanced.is, HassioAdvanced);
</script>

45
panels/hassio/advanced/hassio-hass-info.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
@ -57,25 +57,28 @@
</dom-module>
<script>
Polymer({
is: 'hassio-hass-info',
class HassioHassInfo extends Polymer.Element {
static get is() { return 'hassio-hass-info'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
data: {
type: Object,
value: {},
},
},
data: {
type: Object,
value: {},
},
};
}
listeners: {
'hass-api-called': 'apiCalled',
},
ready() {
super.ready();
this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
}
apiCalled: function (ev) {
apiCalled(ev) {
if (ev.detail.success) {
this.errors = null;
return;
@ -88,10 +91,12 @@ Polymer({
} else {
this.errors = response.body;
}
},
}
computeUpdateAvailable: function (data) {
computeUpdateAvailable(data) {
return data.version !== data.last_version;
},
});
}
}
customElements.define(HassioHassInfo.is, HassioHassInfo);
</script>

55
panels/hassio/advanced/hassio-host-info.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
@ -76,27 +76,30 @@
</dom-module>
<script>
Polymer({
is: 'hassio-host-info',
class HassioHostInfo extends Polymer.Element {
static get is() { return 'hassio-host-info'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
data: {
type: Object,
value: {},
},
data: {
type: Object,
value: {},
},
errors: String,
},
errors: String,
};
}
listeners: {
'hass-api-called': 'apiCalled',
},
ready() {
super.ready();
this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
}
apiCalled: function (ev) {
apiCalled(ev) {
if (ev.detail.success) {
this.errors = null;
return;
@ -109,18 +112,20 @@ Polymer({
} else {
this.errors = response.body;
}
},
}
computeUpdateAvailable: function (data) {
computeUpdateAvailable(data) {
return data.version !== data.last_version;
},
}
computeRebootAvailable: function (data) {
computeRebootAvailable(data) {
return data.features && data.features.indexOf('reboot') !== -1;
},
}
computeShutdownAvailable: function (data) {
computeShutdownAvailable(data) {
return data.features && data.features.indexOf('shutdown') !== -1;
},
});
}
}
customElements.define(HassioHostInfo.is, HassioHostInfo);
</script>

50
panels/hassio/advanced/hassio-supervisor-info.html
View File

@ -1,6 +1,7 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
<dom-module id="hassio-supervisor-info">
@ -60,27 +61,30 @@
</dom-module>
<script>
Polymer({
is: 'hassio-supervisor-info',
class HassioSupervisorInfo extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-supervisor-info'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
data: {
type: Object,
value: {},
},
data: {
type: Object,
value: {},
},
errors: String,
},
errors: String,
};
}
listeners: {
'hass-api-called': 'apiCalled',
},
ready() {
super.ready();
this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
}
apiCalled: function (ev) {
apiCalled(ev) {
if (ev.detail.success) {
this.errors = null;
return;
@ -93,15 +97,17 @@ Polymer({
} else {
this.errors = response.body;
}
},
}
computeUpdateAvailable: function (data) {
computeUpdateAvailable(data) {
return data.version !== data.last_version;
},
}
supervisorLogsTapped: function () {
supervisorLogsTapped() {
history.pushState(null, null, '/hassio/supervisor');
this.fire('location-changed');
}
});
}
customElements.define(HassioSupervisorInfo.is, HassioSupervisorInfo);
</script>

52
panels/hassio/dashboard/hassio-addons.html
View File

@ -1,8 +1,10 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<dom-module id="hassio-addons">
<template>
<style include="ha-style">
@ -36,39 +38,43 @@
</dom-module>
<script>
Polymer({
is: 'hassio-addons',
class HassioAddons extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-addons'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
data: {
type: Object,
value: [],
},
},
data: {
type: Object,
value: [],
},
};
}
addonTapped: function (ev) {
addonTapped(ev) {
history.pushState(null, null, '/hassio/addon/' + this.data[ev.model.index].slug);
this.fire('location-changed');
ev.target.blur();
},
}
openStore: function (ev) {
openStore(ev) {
history.pushState(null, null, '/hassio/store');
this.fire('location-changed');
ev.target.blur();
}
});
}
customElements.define(HassioAddons.is, HassioAddons);
</script>

68
panels/hassio/dashboard/hassio-dashboard.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -10,7 +10,7 @@
<link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../../../src/components/ha-menu-button.html">
<link rel="import" href="./hassio-addons.html">
@ -87,58 +87,62 @@
</dom-module>
<script>
Polymer({
is: 'hassio-dashboard',
class HassioDashboard extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-dashboard'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
supervisorInfo: {
type: Object,
value: {},
},
supervisorInfo: {
type: Object,
value: {},
},
hassInfo: {
type: Object,
value: {},
},
},
hassInfo: {
type: Object,
value: {},
},
};
}
_openStore: function (ev) {
_openStore(ev) {
history.pushState(null, null, '/hassio/store');
this.fire('location-changed');
ev.target.blur();
},
}
_openAdvanced: function (ev) {
_openAdvanced(ev) {
history.pushState(null, null, '/hassio/advanced');
this.fire('location-changed');
ev.target.blur();
},
}
_openSnapshot: function (ev) {
_openSnapshot(ev) {
history.pushState(null, null, '/hassio/snapshot');
this.fire('location-changed');
ev.target.blur();
},
}
_restartHomeAssistant: function (ev) {
_restartHomeAssistant(ev) {
ev.target.blur();
// eslint-disable-next-line no-alert
if (confirm('Are you sure you want to restart Home Assistant?')) {
this.hass.callApi('POST', 'hassio/homeassistant/restart');
}
}
});
}
customElements.define(HassioDashboard.is, HassioDashboard);
</script>

35
panels/hassio/dashboard/hassio-hass-update.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
@ -38,19 +38,22 @@
</dom-module>
<script>
Polymer({
is: 'hassio-hass-update',
class HassioHassUpdate extends Polymer.Element {
static get is() { return 'hassio-hass-update'; }
properties: {
hass: Object,
data: Object,
},
static get properties() {
return {
hass: Object,
data: Object,
};
}
listeners: {
'hass-api-called': 'apiCalled',
},
ready() {
super.ready();
this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
}
apiCalled: function (ev) {
apiCalled(ev) {
if (ev.detail.success) {
this.errors = null;
return;
@ -63,10 +66,12 @@ Polymer({
} else {
this.errors = response.body;
}
},
}
_computeUpdateAvailable: function (data) {
_computeUpdateAvailable(data) {
return data.version !== data.last_version;
},
});
}
}
customElements.define(HassioHassUpdate.is, HassioHassUpdate);
</script>

39
panels/hassio/ha-panel-hassio.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="./hassio-main.html">
<dom-module id="ha-panel-hassio">
@ -19,28 +19,33 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-hassio',
class HaPanelHassio extends Polymer.Element {
static get is() { return 'ha-panel-hassio'; }
properties: {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
route: Object,
static get properties() {
return {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
route: Object,
loaded: {
type: Boolean,
value: false,
},
},
loaded: {
type: Boolean,
value: false,
},
};
}
attached: function () {
connectedCallback() {
super.connectedCallback();
if (!window.HASS_DEV) {
this.importHref('/api/hassio/panel', null, function () {
Polymer.importHref('/api/hassio/panel', null, () => {
// eslint-disable-next-line
alert('Failed to load the Hass.io panel from supervisor.');
});
}
},
});
}
}
customElements.define(HaPanelHassio.is, HaPanelHassio);
</script>

67
panels/hassio/hassio-data.html
View File

@ -1,60 +1,65 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<script>
Polymer({
is: 'hassio-data',
class HassioData extends Polymer.Element {
static get is() { return 'hassio-data'; }
properties: {
supervisor: {
type: Object,
value: {},
notify: true,
},
static get properties() {
return {
supervisor: {
type: Object,
value: {},
notify: true,
},
host: {
type: Object,
value: {},
notify: true,
},
host: {
type: Object,
value: {},
notify: true,
},
homeassistant: {
type: Object,
value: {},
notify: true,
},
},
homeassistant: {
type: Object,
value: {},
notify: true,
},
};
}
attached: function () {
connectedCallback() {
super.connectedCallback();
this.refresh();
},
}
refresh: function () {
refresh() {
return Promise.all([
this.fetchSupervisorInfo(),
this.fetchHostInfo(),
this.fetchHassInfo(),
]);
},
}
fetchSupervisorInfo: function () {
fetchSupervisorInfo() {
return this.hass.callApi('get', 'hassio/supervisor/info')
.then(function (info) {
this.supervisor = info.data;
}.bind(this));
},
}
fetchHostInfo: function () {
fetchHostInfo() {
return this.hass.callApi('get', 'hassio/host/info')
.then(function (info) {
this.host = info.data;
}.bind(this));
},
}
fetchHassInfo: function () {
fetchHassInfo() {
return this.hass.callApi('get', 'hassio/homeassistant/info')
.then(function (info) {
this.homeassistant = info.data;
}.bind(this));
},
});
}
}
customElements.define(HassioData.is, HassioData);
</script>

107
panels/hassio/hassio-main.html
View File

@ -1,9 +1,10 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/app-route/app-route.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../src/layouts/hass-loading-screen.html">
<link rel="import" href="../../src/layouts/hass-error-screen.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel="import" href="./dashboard/hassio-dashboard.html">
<link rel="import" href="./advanced/hassio-advanced.html">
@ -102,61 +103,65 @@
</dom-module>
<script>
Polymer({
is: 'hassio-main',
class HassioMain extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-main'; }
properties: {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
route: {
type: Object,
// Fake route object
value: {
prefix: '/hassio',
path: '/dashboard',
__queryParams: {}
static get properties() {
return {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
route: {
type: Object,
// Fake route object
value: {
prefix: '/hassio',
path: '/dashboard',
__queryParams: {}
},
observer: '_routeChanged',
},
observer: '_routeChanged',
},
_routeData: Object,
_routeTail: Object,
_routeData: Object,
_routeTail: Object,
addon: {
type: String,
value: '',
},
addon: {
type: String,
value: '',
},
supervisorInfo: {
type: Object,
value: null,
},
supervisorInfo: {
type: Object,
value: null,
},
hostInfo: {
type: Object,
value: null,
},
hostInfo: {
type: Object,
value: null,
},
hassInfo: {
type: Object,
value: null,
},
hassInfo: {
type: Object,
value: null,
},
loaded: {
type: Boolean,
computed: '_computeIsLoaded(supervisorInfo, hostInfo, hassInfo)',
},
},
loaded: {
type: Boolean,
computed: '_computeIsLoaded(supervisorInfo, hostInfo, hassInfo)',
},
};
}
listeners: {
'hass-api-called': '_apiCalled',
},
ready() {
super.ready();
this.addEventListener('hass-api-called', ev => this._apiCalled(ev));
}
attached: function () {
connectedCallback() {
super.connectedCallback();
this._routeChanged(this.route);
},
}
_apiCalled: function (ev) {
_apiCalled(ev) {
if (ev.detail.success) {
var tries = 1;
@ -169,19 +174,21 @@ Polymer({
tryUpdate();
}
},
}
_computeIsLoaded: function (supervisorInfo, hostInfo, hassInfo) {
_computeIsLoaded(supervisorInfo, hostInfo, hassInfo) {
return (supervisorInfo !== null &&
hostInfo !== null &&
hassInfo !== null);
},
}
_routeChanged: function (route) {
_routeChanged(route) {
if (route.path === '' && route.prefix === '/hassio') {
history.replaceState(null, null, '/hassio/dashboard');
this.fire('location-changed');
}
}
});
}
customElements.define(HassioMain.is, HassioMain);
</script>

77
panels/hassio/snapshot/hassio-snapshot.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -7,6 +7,8 @@
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../../../src/components/ha-menu-button.html">
<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
@ -98,50 +100,53 @@
</dom-module>
<script>
Polymer({
is: 'hassio-snapshot',
class HassioSnapshot extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-snapshot'; }
properties: {
hass: Object,
visible: {
type: Boolean,
observer: '_visibleChanged',
},
_snapshotName: String,
_creatingSnapshot: Boolean,
_error: Object,
_data: {
type: Array,
value: [],
},
},
static get properties() {
return {
hass: Object,
visible: {
type: Boolean,
observer: '_visibleChanged',
},
_snapshotName: String,
_creatingSnapshot: Boolean,
_error: Object,
_data: {
type: Array,
value: [],
},
};
}
listeners: {
'hass-api-called': '_apiCalled',
},
ready() {
super.ready();
this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
}
_visibleChanged: function (visible) {
_visibleChanged(visible) {
if (visible) {
this._updateData();
}
},
}
_apiCalled: function (ev) {
_apiCalled(ev) {
if (ev.detail.success) {
this._updateData();
}
},
}
_updateData: function () {
_updateData() {
this.hass.callApi('get', 'hassio/snapshots')
.then(function (result) {
this._data = result.data.snapshots;
}.bind(this), function (error) {
this._error = error.message;
}.bind(this));
},
}
_createSnapshot: function () {
_createSnapshot() {
this._creatingSnapshot = true;
this.hass.callApi('post', 'hassio/snapshots/new/full', {
name: this._snapshotName,
@ -156,21 +161,23 @@ Polymer({
this._creatingSnapshot = false;
this._error = error.message;
}.bind(this));
},
}
_computeRestorePath: function (snapshot) {
_computeRestorePath(snapshot) {
return 'hassio/snapshots/' + snapshot.slug + '/restore/full';
},
}
_backTapped: function () {
_backTapped() {
history.back();
},
}
_refreshTapped: function () {
_refreshTapped() {
this.hass.callApi('post', 'hassio/snapshots/reload')
.then(function () {
this._updateData();
}.bind(this));
},
});
}
}
customElements.define(HassioSnapshot.is, HassioSnapshot);
</script>

54
panels/hassio/supervisor/hassio-supervisor.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -36,46 +36,50 @@
</dom-module>
<script>
Polymer({
is: 'hassio-supervisor',
class HassioSupervisor extends Polymer.Element {
static get is() { return 'hassio-supervisor'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
visible: {
type: Boolean,
observer: '_visibleChanged',
},
visible: {
type: Boolean,
observer: '_visibleChanged',
},
logs: {
type: String,
value: '',
},
},
logs: {
type: String,
value: '',
},
};
}
_visibleChanged: function (visible) {
_visibleChanged(visible) {
if (visible) {
this._loadData();
}
},
}
_loadData: function () {
_loadData() {
this.hass.callApi('get', 'hassio/supervisor/logs')
.then(function (info) {
this.logs = info;
}.bind(this), function () {
this.logs = 'Error fetching logs';
}.bind(this));
},
}
_refreshTapped: function () {
_refreshTapped() {
this._loadData();
},
}
_backTapped: function () {
_backTapped() {
history.back();
},
});
}
}
customElements.define(HassioSupervisor.is, HassioSupervisor);
</script>

147
panels/history/ha-panel-history.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
@ -91,70 +91,73 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-history',
class HaPanelHistory extends Polymer.Element {
static get is() { return 'ha-panel-history'; }
properties: {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
stateHistoryInput: {
type: Object,
value: null,
observer: 'stateHistoryObserver'
},
stateHistoryOutput: {
type: Object,
value: null,
},
_periodIndex: {
type: Number,
value: 0,
},
isLoadingData: {
type: Boolean,
value: false,
},
endTime: {
type: Object,
computed: '_computeEndTime(_currentDate, _periodIndex)',
},
// ISO8601 formatted date string
_currentDate: {
type: String,
value: function () {
var value = new Date();
var today = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
return today.toISOString().split('T')[0];
static get properties() {
return {
hass: {
type: Object,
},
},
_filterType: {
type: String,
value: 'date',
},
},
narrow: {
type: Boolean,
},
datepickerFocus: function () {
showMenu: {
type: Boolean,
value: false,
},
stateHistoryInput: {
type: Object,
value: null,
observer: 'stateHistoryObserver'
},
stateHistoryOutput: {
type: Object,
value: null,
},
_periodIndex: {
type: Number,
value: 0,
},
isLoadingData: {
type: Boolean,
value: false,
},
endTime: {
type: Object,
computed: '_computeEndTime(_currentDate, _periodIndex)',
},
// ISO8601 formatted date string
_currentDate: {
type: String,
value: function () {
var value = new Date();
var today = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
return today.toISOString().split('T')[0];
},
},
_filterType: {
type: String,
value: 'date',
},
};
}
datepickerFocus() {
this.datePicker.adjustPosition();
},
}
attached: function () {
connectedCallback() {
super.connectedCallback();
// We are unable to parse date because we use intl api to render date
// So we just return last known date.
var lastFormatDate = new Date();
@ -165,23 +168,23 @@ Polymer({
lastFormatDate = date;
return window.hassUtil.formatDate(date);
});
},
}
_computeStartTime: function (_currentDate) {
_computeStartTime(_currentDate) {
if (!_currentDate) return undefined;
var parts = _currentDate.split('-');
parts[1] = parseInt(parts[1]) - 1;
return new Date(parts[0], parts[1], parts[2]);
},
}
_computeEndTime: function (_currentDate, periodIndex) {
_computeEndTime(_currentDate, periodIndex) {
var startTime = this._computeStartTime(_currentDate);
var endTime = new Date(startTime);
endTime.setDate(startTime.getDate() + this._computeFilterDays(periodIndex));
return endTime;
},
}
_computeFilterDays: function (periodIndex) {
_computeFilterDays(periodIndex) {
switch (periodIndex) {
case 1:
return 3;
@ -189,15 +192,17 @@ Polymer({
return 7;
default: return 1;
}
},
}
stateHistoryObserver: function (newVal) {
this.async(function () {
stateHistoryObserver(newVal) {
setTimeout(() => {
if (newVal === this.stateHistoryInput) {
// Input didn't change
this.stateHistoryOutput = newVal;
}
}.bind(this), 1);
},
});
}, 1);
}
}
customElements.define(HaPanelHistory.is, HaPanelHistory);
</script>

34
panels/iframe/ha-panel-iframe.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@ -28,21 +28,25 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-iframe',
class HaPanelIframe extends Polymer.Element {
static get is() { return 'ha-panel-iframe'; }
properties: {
panel: {
type: Object,
},
static get properties() {
return {
panel: {
type: Object,
},
narrow: {
type: Boolean,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
},
},
});
showMenu: {
type: Boolean,
},
};
}
}
customElements.define(HaPanelIframe.is, HaPanelIframe);
</script>

20
panels/kiosk/ha-panel-kiosk.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel='import' href='../../src/layouts/partial-cards.html'>
@ -15,12 +15,16 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-kiosk',
class HaPanelKiosk extends Polymer.Element {
static get is() { return 'ha-panel-kiosk'; }
properties: {
hass: Object,
route: Object,
},
});
static get properties() {
return {
hass: Object,
route: Object,
};
}
}
customElements.define(HaPanelKiosk.is, HaPanelKiosk);
</script>

72
panels/logbook/ha-logbook-data.html
View File

@ -1,45 +1,47 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<script>
(function () {
{
var DATE_CACHE = {};
Polymer({
is: 'ha-logbook-data',
class HaLogbookData extends Polymer.Element {
static get is() { return 'ha-logbook-data'; }
properties: {
hass: {
type: Object,
observer: 'hassChanged',
},
static get properties() {
return {
hass: {
type: Object,
observer: 'hassChanged',
},
filterDate: {
type: String,
observer: 'filterDateChanged',
},
filterDate: {
type: String,
observer: 'filterDateChanged',
},
isLoading: {
type: Boolean,
value: true,
readOnly: true,
notify: true,
},
isLoading: {
type: Boolean,
value: true,
readOnly: true,
notify: true,
},
entries: {
type: Object,
value: null,
readOnly: true,
notify: true,
},
},
entries: {
type: Object,
value: null,
readOnly: true,
notify: true,
},
};
}
hassChanged: function (newHass, oldHass) {
hassChanged(newHass, oldHass) {
if (!oldHass && this.filterDate) {
this.filterDateChanged(this.filterDate);
}
},
}
filterDateChanged: function (filterDate) {
filterDateChanged(filterDate) {
if (!this.hass) return;
this._setIsLoading(true);
@ -48,9 +50,9 @@
this._setEntries(logbookEntries);
this._setIsLoading(false);
}.bind(this));
},
}
getDate: function (date) {
getDate(date) {
if (!DATE_CACHE[date]) {
DATE_CACHE[date] = this.hass.callApi('GET', 'logbook/' + date).then(
function (logbookEntries) {
@ -65,7 +67,9 @@
}
return DATE_CACHE[date];
},
});
}());
}
}
customElements.define(HaLogbookData.is, HaLogbookData);
}
</script>

40
panels/logbook/ha-logbook.html
View File

@ -1,6 +1,8 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../src/components/domain-icon.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<dom-module id="ha-logbook">
@ -60,27 +62,31 @@
</dom-module>
<script>
Polymer({
is: 'ha-logbook',
class HaLogbook extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-logbook'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
entries: {
type: Array,
value: [],
},
},
entries: {
type: Array,
value: [],
},
};
}
formatTime: function (date) {
formatTime(date) {
return window.hassUtil.formatTime(new Date(date));
},
}
entityClicked: function (ev) {
entityClicked(ev) {
ev.preventDefault();
this.fire('hass-more-info', { entityId: ev.model.item.entity_id });
},
});
}
}
customElements.define(HaLogbook.is, HaLogbook);
</script>

87
panels/logbook/ha-panel-logbook.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
@ -78,48 +78,51 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-logbook',
class HaPanelLogbook extends Polymer.Element {
static get is() { return 'ha-panel-logbook'; }
properties: {
hass: {
type: Object,
},
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
// ISO8601 formatted date string
_currentDate: {
type: String,
value: function () {
var value = new Date();
var today = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
return today.toISOString().split('T')[0];
static get properties() {
return {
hass: {
type: Object,
},
},
isLoading: {
type: Boolean,
},
narrow: {
type: Boolean,
value: false,
},
entries: {
type: Array,
},
showMenu: {
type: Boolean,
value: false,
},
datePicker: {
type: Object,
},
},
// ISO8601 formatted date string
_currentDate: {
type: String,
value: function () {
var value = new Date();
var today = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
return today.toISOString().split('T')[0];
},
},
attached: function () {
isLoading: {
type: Boolean,
},
entries: {
type: Array,
},
datePicker: {
type: Object,
},
};
}
connectedCallback() {
super.connectedCallback();
// We are unable to parse date because we use intl api to render date
// So we just return last known date.
var lastFormatDate = new Date();
@ -130,13 +133,15 @@ Polymer({
lastFormatDate = date;
return window.hassUtil.formatDate(date);
});
},
}
_computeFilterDate: function (_currentDate) {
_computeFilterDate(_currentDate) {
if (!_currentDate) return undefined;
var parts = _currentDate.split('-');
parts[1] = parseInt(parts[1]) - 1;
return new Date(parts[0], parts[1], parts[2]).toISOString();
},
});
}
}
customElements.define(HaPanelLogbook.is, HaPanelLogbook);
</script>

95
panels/mailbox/ha-panel-mailbox.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
<link rel='import' href='../../bower_components/paper-dialog/paper-dialog.html'>
@ -144,37 +144,41 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-mailbox',
properties: {
hass: {
type: Object,
},
class HaPanelMailbox extends Polymer.Element {
static get is() { return 'ha-panel-mailbox'; }
narrow: {
type: Boolean,
value: false,
},
static get properties() {
return {
hass: {
type: Object,
},
showMenu: {
type: Boolean,
value: false,
},
narrow: {
type: Boolean,
value: false,
},
platforms: {
type: Array,
},
showMenu: {
type: Boolean,
value: false,
},
_messages: {
type: Array,
},
platforms: {
type: Array,
},
currentMessage: {
type: Object,
},
},
_messages: {
type: Array,
},
attached: function () {
currentMessage: {
type: Object,
},
};
}
connectedCallback() {
super.connectedCallback();
this.hassChanged = this.hassChanged.bind(this);
this.hass.connection.subscribeEvents(this.hassChanged, 'mailbox_updated')
.then(function (unsub) { this._unsubEvents = unsub; }.bind(this));
@ -182,22 +186,23 @@ Polymer({
this.platforms = platforms;
this.hassChanged();
}.bind(this));
},
}
detached: function () {
disconnectedCallback() {
super.disconnectedCallback();
if (this._unsubEvents) this._unsubEvents();
},
}
hassChanged: function () {
hassChanged() {
if (!this._messages) {
this._messages = [];
}
this.getMessages().then(function (items) {
this._messages = items;
}.bind(this));
},
}
openMP3Dialog: function (event) {
openMP3Dialog(event) {
var platform = event.model.item.platform;
this.currentMessage = event.model.item;
this.$.mp3dialog.open();
@ -205,22 +210,22 @@ Polymer({
this.$.transcribe.innerText = event.model.item.message;
this.$.mp3.load();
this.$.mp3.play();
},
}
_mp3Closed: function () {
_mp3Closed() {
this.$.mp3.pause();
},
}
openDeleteDialog: function () {
openDeleteDialog() {
this.$.confirmdel.open();
},
}
deleteSelected: function () {
deleteSelected() {
var msg = this.currentMessage;
this.hass.callApi('DELETE', 'mailbox/delete/' + msg.platform + '/' + msg.sha);
this.$.mp3dialog.close();
},
getMessages: function () {
}
getMessages() {
const items = this.platforms.map(function (platform) {
return this.hass.callApi('GET', 'mailbox/messages/' + platform).then(function (values) {
var platformItems = [];
@ -250,11 +255,13 @@ Polymer({
});
return final;
});
},
}
computePlatforms: function () {
computePlatforms() {
return this.hass.callApi('GET', 'mailbox/platforms');
},
});
}
}
customElements.define(HaPanelMailbox.is, HaPanelMailbox);
</script>

65
panels/map/ha-entity-marker.html
View File

@ -1,7 +1,9 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../bower_components/iron-image/iron-image.html'>
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<dom-module id='ha-entity-marker'>
<template>
<style is="custom-style" include="iron-positioning"></style>
@ -36,45 +38,44 @@
</dom-module>
<script>
Polymer({
is: 'ha-entity-marker',
class HaEntityMarker extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-entity-marker'; }
hostAttributes: {
entityId: null,
entityName: null,
entityPicture: null,
},
static get properties() {
return {
hass: {
type: Object,
},
properties: {
hass: {
type: Object,
},
entityId: {
type: String,
value: '',
},
entityId: {
type: String,
value: '',
},
entityName: {
type: String,
value: null,
},
entityName: {
type: String,
value: null,
},
entityPicture: {
type: String,
value: null,
}
};
}
entityPicture: {
type: String,
value: null,
}
},
ready() {
super.ready();
this.addEventListener('tap', ev => this.badgeTap(ev));
}
listeners: {
tap: 'badgeTap',
},
badgeTap: function (ev) {
badgeTap(ev) {
ev.stopPropagation();
if (this.entityId) {
this.fire('hass-more-info', { entityId: this.entityId });
}
},
});
}
}
customElements.define(HaEntityMarker.is, HaEntityMarker);
</script>

55
panels/map/ha-panel-map.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@ -29,26 +29,29 @@
<script>
window.L.Icon.Default.imagePath = '/static/images/leaflet';
Polymer({
is: 'ha-panel-map',
class HaPanelMap extends Polymer.Element {
static get is() { return 'ha-panel-map'; }
properties: {
hass: {
type: Object,
observer: 'drawEntities',
},
static get properties() {
return {
hass: {
type: Object,
observer: 'drawEntities',
},
narrow: {
type: Boolean,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
},
showMenu: {
type: Boolean,
value: false,
},
};
}
attached: function () {
connectedCallback() {
super.connectedCallback();
var map = this._map = window.L.map(this.$.map);
var style = document.createElement('link');
style.setAttribute('href', window.HASS_DEV ?
@ -67,13 +70,13 @@ Polymer({
this.drawEntities(this.hass);
this.async(function () {
setTimeout(() => {
map.invalidateSize();
this.fitMap();
}.bind(this), 1);
},
}, 1);
}
fitMap: function () {
fitMap() {
var bounds;
if (this._mapItems.length === 0) {
@ -85,9 +88,9 @@ Polymer({
bounds = new window.L.latLngBounds(this._mapItems.map(item => item.getLatLng()));
this._map.fitBounds(bounds.pad(0.5));
}
},
}
drawEntities: function (hass) {
drawEntities(hass) {
/* eslint-disable vars-on-top */
var map = this._map;
if (!map) return;
@ -186,6 +189,8 @@ Polymer({
).addTo(map));
}
});
},
});
}
}
customElements.define(HaPanelMap.is, HaPanelMap);
</script>

95
panels/shopping-list/ha-panel-shopping-list.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<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">
@ -138,55 +138,60 @@
</dom-module>
<script>
Polymer({
is: 'ha-panel-shopping-list',
class HaPanelShoppingList extends Polymer.Element {
static get is() { return 'ha-panel-shopping-list'; }
properties: {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
items: {
type: Array,
value: [],
},
_editIndex: {
type: Number,
value: -1,
},
_editValue: {
type: String,
value: '',
},
},
static get properties() {
return {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
items: {
type: Array,
value: [],
},
_editIndex: {
type: Number,
value: -1,
},
_editValue: {
type: String,
value: '',
},
};
}
listeners: {
keydown: '_checkEsc'
},
ready() {
super.ready();
this.addEventListener('keydown', ev => this._checkEsc(ev));
}
attached: function () {
connectedCallback() {
super.connectedCallback();
this._fetchData = this._fetchData.bind(this);
this.hass.connection.subscribeEvents(this._fetchData, 'shopping_list_updated')
.then(function (unsub) { this._unsubEvents = unsub; }.bind(this));
this._fetchData();
},
}
detached: function () {
disconnectedCallback() {
super.disconnectedCallback();
if (this._unsubEvents) this._unsubEvents();
},
}
_fetchData: function () {
_fetchData() {
this.hass.callApi('get', 'shopping_list')
.then(function (items) {
this.items = items;
}.bind(this));
},
}
_computeIsEditting(editIndex, index) {
return editIndex === index;
},
}
_itemCompleteTapped: function (ev) {
_itemCompleteTapped(ev) {
ev.stopPropagation();
var item = ev.model.item;
this.hass.callApi('post', 'shopping_list/item/' + item.id, {
@ -194,9 +199,9 @@ Polymer({
}).catch(function () {
this._fetchData();
}.bind(this));
},
}
_enableEditting: function (ev) {
_enableEditting(ev) {
var item = ev.model.item;
var index = this.items.indexOf(item);
@ -204,14 +209,14 @@ Polymer({
this._editValue = item.name;
this._editIndex = index;
},
}
_cancelEditting: function () {
_cancelEditting() {
this._editIndex = -1;
this._editValue = '';
},
}
_finishEditting: function (ev) {
_finishEditting(ev) {
ev.stopPropagation();
var index = this._editIndex;
@ -231,22 +236,24 @@ Polymer({
}).catch(function () {
this._fetchData();
}.bind(this));
},
}
_editKeyPress: function (ev) {
_editKeyPress(ev) {
if (ev.keyCode === 13) {
this._finishEditting(ev);
}
},
}
_checkEsc: function (ev) {
_checkEsc(ev) {
if (ev.keyCode === 27) {
this._cancelEditting();
}
},
}
_clearCompleted: function () {
_clearCompleted() {
this.hass.callApi('POST', 'shopping_list/clear_completed');
}
});
}
customElements.define(HaPanelShoppingList.is, HaPanelShoppingList);
</script>

6
src/cards/ha-weather-card.html
View File

@ -70,9 +70,7 @@
</dom-module>
<script>
(function () {
'use strict';
{
var _WEATHER_TO_ICON = {
cloudy: '\u2601\ufe0f',
fog: '\uD83C\uDF2B\ufe0f',
@ -216,5 +214,5 @@
}
}
customElements.define(HaWeatherCard.is, HaWeatherCard);
}());
}
</script>

62
src/components/buttons/ha-call-api-button.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="./ha-progress-button.html">
<dom-module id='ha-call-api-button'>
@ -13,40 +13,42 @@
</dom-module>
<script>
Polymer({
is: 'ha-call-api-button',
class HaCallApiButton extends Polymer.Element {
static get is() { return 'ha-call-api-button'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
progress: {
type: Boolean,
value: false,
},
progress: {
type: Boolean,
value: false,
},
path: {
type: String,
},
path: {
type: String,
},
method: {
type: String,
value: 'POST',
},
method: {
type: String,
value: 'POST',
},
data: {
type: Object,
value: {},
},
data: {
type: Object,
value: {},
},
disabled: {
type: Boolean,
value: false,
},
},
disabled: {
type: Boolean,
value: false,
},
};
}
buttonTapped: function () {
buttonTapped() {
this.progress = true;
var el = this;
var eventData = {
@ -70,5 +72,7 @@ Polymer({
el.fire('hass-api-called', eventData);
});
}
});
}
customElements.define(HaCallApiButton.is, HaCallApiButton);
</script>

54
src/components/buttons/ha-call-service-button.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="./ha-progress-button.html">
<dom-module id='ha-call-service-button'>
@ -12,34 +12,36 @@
</dom-module>
<script>
Polymer({
is: 'ha-call-service-button',
class HaCallServiceButton extends Polymer.Element {
static get is() { return 'ha-call-service-button'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
progress: {
type: Boolean,
value: false,
},
progress: {
type: Boolean,
value: false,
},
domain: {
type: String,
},
domain: {
type: String,
},
service: {
type: String,
},
service: {
type: String,
},
serviceData: {
type: Object,
value: {},
},
},
serviceData: {
type: Object,
value: {},
},
};
}
buttonTapped: function () {
buttonTapped() {
this.progress = true;
var el = this;
var eventData = {
@ -60,6 +62,8 @@ Polymer({
}).then(function () {
el.fire('hass-service-called', eventData);
});
},
});
}
}
customElements.define(HaCallServiceButton.is, HaCallServiceButton);
</script>

67
src/components/buttons/ha-progress-button.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/paper-spinner/paper-spinner.html">
@ -58,51 +58,56 @@
</dom-module>
<script>
Polymer({
is: 'ha-progress-button',
class HaProgressButton extends Polymer.Element {
static get is() { return 'ha-progress-button'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
progress: {
type: Boolean,
value: false,
},
progress: {
type: Boolean,
value: false,
},
disabled: {
type: Boolean,
value: false,
},
},
disabled: {
type: Boolean,
value: false,
},
};
}
tempClass: function (className) {
tempClass(className) {
var classList = this.$.container.classList;
classList.add(className);
this.async(function () {
setTimeout(() => {
classList.remove(className);
}, 1000);
},
}
listeners: {
tap: 'buttonTapped',
},
ready() {
super.ready();
this.addEventListener('tap', ev => this.buttonTapped(ev));
}
buttonTapped: function (ev) {
buttonTapped(ev) {
if (this.progress) ev.stopPropagation();
},
}
actionSuccess: function () {
actionSuccess() {
this.tempClass('success');
},
}
actionError: function () {
actionError() {
this.tempClass('error');
},
}
computeDisabled: function (disabled, progress) {
computeDisabled(disabled, progress) {
return disabled || progress;
},
});
}
}
customElements.define(HaProgressButton.is, HaProgressButton);
</script>

36
src/components/domain-icon.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
@ -9,23 +9,27 @@
</dom-module>
<script>
Polymer({
is: 'domain-icon',
class DomainIcon extends Polymer.Element {
static get is() { return 'domain-icon'; }
properties: {
domain: {
type: String,
value: '',
},
static get properties() {
return {
domain: {
type: String,
value: '',
},
state: {
type: String,
value: '',
},
},
state: {
type: String,
value: '',
},
};
}
computeIcon: function (domain, state) {
computeIcon(domain, state) {
return window.hassUtil.domainIcon(domain, state);
},
});
}
}
customElements.define(DomainIcon.is, DomainIcon);
</script>

92
src/components/entity/ha-entity-toggle.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
@ -36,43 +36,43 @@
</dom-module>
<script>
Polymer({
is: 'ha-entity-toggle',
class HaEntityToggle extends Polymer.Element {
static get is() { return 'ha-entity-toggle'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
stateObj: {
type: Object,
},
toggleChecked: {
type: Boolean,
value: false,
},
toggleChecked: {
type: Boolean,
value: false,
},
isOn: {
type: Boolean,
computed: 'computeIsOn(stateObj)',
observer: 'isOnChanged',
},
},
isOn: {
type: Boolean,
computed: 'computeIsOn(stateObj)',
observer: 'isOnChanged',
},
};
}
listeners: {
tap: 'onTap',
},
onTap: function (ev) {
ev.stopPropagation();
},
ready: function () {
ready() {
super.ready();
this.addEventListener('tap', ev => this.onTap(ev));
this.forceStateChange();
},
}
toggleChanged: function (ev) {
onTap(ev) {
ev.stopPropagation();
}
toggleChanged(ev) {
var newVal = ev.target.checked;
if (newVal && !this.isOn) {
@ -80,36 +80,36 @@ Polymer({
} else if (!newVal && this.isOn) {
this.callService(false);
}
},
}
isOnChanged: function (newVal) {
isOnChanged(newVal) {
this.toggleChecked = newVal;
},
}
forceStateChange: function () {
forceStateChange() {
if (this.toggleChecked === this.isOn) {
this.toggleChecked = !this.toggleChecked;
}
this.toggleChecked = this.isOn;
},
}
turnOn: function () {
turnOn() {
this.callService(true);
},
}
turnOff: function () {
turnOff() {
this.callService(false);
},
}
computeIsOn: function (stateObj) {
computeIsOn(stateObj) {
return stateObj && window.hassUtil.OFF_STATES.indexOf(stateObj.state) === -1;
},
}
// We call updateToggle after a successful call to re-sync the toggle
// with the state. It will be out of sync if our service call did not
// result in the entity to be turned on. Since the state is not changing,
// the resync is not called automatic.
callService: function (turnOn) {
callService(turnOn) {
var stateDomain = window.hassUtil.computeDomain(this.stateObj);
var serviceDomain;
var service;
@ -140,6 +140,8 @@ Polymer({
}
}.bind(this), 2000);
}.bind(this));
},
});
}
}
customElements.define(HaEntityToggle.is, HaEntityToggle);
</script>

26
src/components/entity/ha-state-icon.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
@ -9,17 +9,21 @@
</dom-module>
<script>
Polymer({
is: 'ha-state-icon',
class HaStateIcon extends Polymer.Element {
static get is() { return 'ha-state-icon'; }
properties: {
stateObj: {
type: Object,
},
},
static get properties() {
return {
stateObj: {
type: Object,
},
};
}
computeIcon: function (stateObj) {
computeIcon(stateObj) {
return window.hassUtil.stateIcon(stateObj);
},
});
}
}
customElements.define(HaStateIcon.is, HaStateIcon);
</script>

71
src/components/entity/ha-state-label-badge.html
View File

@ -1,4 +1,6 @@
<link rel='import' href='../../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel='import' href='../ha-label-badge.html'>
@ -45,30 +47,33 @@
</dom-module>
<script>
Polymer({
is: 'ha-state-label-badge',
class HaStateLabelBadge extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-state-label-badge'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
state: {
type: Object,
observer: 'stateChanged',
},
},
state: {
type: Object,
observer: 'stateChanged',
},
};
}
listeners: {
tap: 'badgeTap',
},
ready() {
super.ready();
this.addEventListener('tap', ev => this.badgeTap(ev));
}
badgeTap: function (ev) {
badgeTap(ev) {
ev.stopPropagation();
this.fire('hass-more-info', { entityId: this.state.entity_id });
},
}
computeClasses: function (state) {
computeClasses(state) {
switch (window.hassUtil.computeDomain(state)) {
case 'binary_sensor':
case 'updater':
@ -76,9 +81,9 @@ Polymer({
default:
return '';
}
},
}
computeValue: function (state) {
computeValue(state) {
switch (window.hassUtil.computeDomain(state)) {
case 'binary_sensor':
case 'device_tracker':
@ -90,9 +95,9 @@ Polymer({
default:
return state.state === 'unknown' ? '-' : state.state;
}
},
}
computeIcon: function (state) {
computeIcon(state) {
if (state.state === 'unavailable') {
return null;
}
@ -120,13 +125,13 @@ Polymer({
default:
return null;
}
},
}
computeImage: function (state) {
computeImage(state) {
return state.attributes.entity_picture || null;
},
}
computeLabel: function (state) {
computeLabel(state) {
if (state.state === 'unavailable') {
return 'unavai';
}
@ -146,14 +151,16 @@ Polymer({
default:
return state.attributes.unit_of_measurement || null;
}
},
}
computeDescription: function (state) {
computeDescription(state) {
return window.hassUtil.computeStateName(state);
},
}
stateChanged: function () {
stateChanged() {
this.updateStyles();
},
});
}
}
customElements.define(HaStateLabelBadge.is, HaStateLabelBadge);
</script>

38
src/components/entity/state-info.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="./state-badge.html">
<link rel="import" href="../ha-relative-time.html">
@ -57,26 +57,30 @@
</dom-module>
<script>
Polymer({
is: 'state-info',
class StateInfo extends Polymer.Element {
static get is() { return 'state-info'; }
properties: {
detailed: {
type: Boolean,
value: false,
},
static get properties() {
return {
detailed: {
type: Boolean,
value: false,
},
stateObj: {
type: Object,
},
stateObj: {
type: Object,
},
inDialog: {
type: Boolean,
},
},
inDialog: {
type: Boolean,
},
};
}
computeStateName: function (stateObj) {
computeStateName(stateObj) {
return window.hassUtil.computeStateName(stateObj);
}
});
}
customElements.define(StateInfo.is, StateInfo);
</script>

69
src/components/ha-attributes.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
@ -30,12 +30,11 @@
</dom-module>
<script>
(function () {
'use strict';
class HaAttributes extends Polymer.Element {
static get is() { return 'ha-attributes'; }
Polymer({
is: 'ha-attributes',
properties: {
static get properties() {
return {
stateObj: {
type: Object,
},
@ -47,37 +46,39 @@
type: Array,
computed: 'computeFiltersArray(extraFilters)',
},
},
};
}
computeFiltersArray: function (extraFilters) {
return Object.keys(window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(extraFilters ? extraFilters.split(',') : []);
},
computeFiltersArray(extraFilters) {
return Object.keys(window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(extraFilters ? extraFilters.split(',') : []);
}
computeDisplayAttributes: function (stateObj, filtersArray) {
if (!stateObj) {
return [];
}
return Object.keys(stateObj.attributes).filter(function (key) {
return filtersArray.indexOf(key) === -1;
});
},
computeDisplayAttributes(stateObj, filtersArray) {
if (!stateObj) {
return [];
}
return Object.keys(stateObj.attributes).filter(function (key) {
return filtersArray.indexOf(key) === -1;
});
}
formatAttribute: function (attribute) {
return attribute.replace(/_/g, ' ');
},
formatAttribute(attribute) {
return attribute.replace(/_/g, ' ');
}
formatAttributeValue: function (stateObj, attribute) {
var value = stateObj.attributes[attribute];
if (value === null) return '-';
if (Array.isArray(value)) {
return value.join(', ');
}
return (value instanceof Object) ? JSON.stringify(value, null, 2) : value;
},
formatAttributeValue(stateObj, attribute) {
var value = stateObj.attributes[attribute];
if (value === null) return '-';
if (Array.isArray(value)) {
return value.join(', ');
}
return (value instanceof Object) ? JSON.stringify(value, null, 2) : value;
}
computeAttribution: function (stateObj) {
return stateObj.attributes.attribution;
},
});
}());
computeAttribution(stateObj) {
return stateObj.attributes.attribution;
}
}
customElements.define(HaAttributes.is, HaAttributes);
</script>

38
src/components/ha-card.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<dom-module id='ha-card'>
@ -28,21 +28,25 @@
</dom-module>
<script>
Polymer({
is: 'ha-card',
class HaCard extends Polymer.Element {
static get is() { return 'ha-card'; }
properties: {
header: {
type: String,
},
/**
* The z-depth of the card, from 0-5.
*/
elevation: {
type: Number,
value: 1,
reflectToAttribute: true,
},
},
});
static get properties() {
return {
header: {
type: String,
},
/**
* The z-depth of the card, from 0-5.
*/
elevation: {
type: Number,
value: 1,
reflectToAttribute: true,
},
};
}
}
customElements.define(HaCard.is, HaCard);
</script>

1
src/components/ha-cards.html
View File

@ -1,4 +1,5 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/utils/debounce.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">

130
src/components/ha-climate-control.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
@ -40,66 +40,70 @@
</div>
</div>
</template>
<script>
Polymer({
is: 'ha-climate-control',
properties: {
value: {
type: Number,
observer: 'valueChanged'
},
units: {
type: String,
},
min: {
type: Number,
},
max: {
type: Number,
},
step: {
type: Number,
value: 1,
},
},
incrementValue: function () {
var newval = this.value + this.step;
this.last_changed = Date.now();
if (newval <= this.max) {
this.value = newval;
} else {
this.value = this.max;
}
},
decrementValue: function () {
var newval = this.value - this.step;
this.last_changed = Date.now();
if (newval >= this.min) {
this.value = newval;
} else {
this.value = this.min;
}
},
valueChanged: function () {
// when the value is changed, trigger a potential even fire in
// the future, as long as last changed is far enough in the
// past.
//
// from a UX perspective it would probably be worth changing
// font color on the temperature when it's in the flux state
// (like set to red), then animate back to black when the
// change event is fired, and the signal sent to home-assistant.
if (this.last_changed) {
window.setTimeout(function (val) {
var now = Date.now();
if (now - val.last_changed >= 2000) {
val.fire('change');
val.last_changed = null;
}
}, 2010, this);
}
},
});
</script>
</dom-module>
<script>
class HaClimateControl extends Polymer.Element {
static get is() { return 'ha-climate-control'; }
static get properties() {
return {
value: {
type: Number,
observer: 'valueChanged'
},
units: {
type: String,
},
min: {
type: Number,
},
max: {
type: Number,
},
step: {
type: Number,
value: 1,
},
};
}
incrementValue() {
var newval = this.value + this.step;
this.last_changed = Date.now();
if (newval <= this.max) {
this.value = newval;
} else {
this.value = this.max;
}
}
decrementValue() {
var newval = this.value - this.step;
this.last_changed = Date.now();
if (newval >= this.min) {
this.value = newval;
} else {
this.value = this.min;
}
}
valueChanged() {
// when the value is changed, trigger a potential even fire in
// the future, as long as last changed is far enough in the
// past.
//
// from a UX perspective it would probably be worth changing
// font color on the temperature when it's in the flux state
// (like set to red), then animate back to black when the
// change event is fired, and the signal sent to home-assistant.
if (this.last_changed) {
window.setTimeout(function (val) {
var now = Date.now();
if (now - val.last_changed >= 2000) {
val.fire('change');
val.last_changed = null;
}
}, 2010, this);
}
}
}
customElements.define(HaClimateControl.is, HaClimateControl);
</script>

104
src/components/ha-color-picker.html
View File

@ -1,4 +1,6 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<dom-module id='ha-color-picker'>
<template>
@ -20,67 +22,75 @@
*
* Adapted to work with Polymer.
*/
Polymer({
is: 'ha-color-picker',
class HaColorPicker extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-color-picker'; }
properties: {
color: {
type: Object,
},
static get properties() {
return {
color: {
type: Object,
},
width: {
type: Number,
},
width: {
type: Number,
},
height: {
type: Number,
},
},
height: {
type: Number,
},
};
}
listeners: {
mousedown: 'onMouseDown',
mouseup: 'onMouseUp',
touchstart: 'onTouchStart',
touchend: 'onTouchEnd',
},
ready() {
super.ready();
this.addEventListener('mousedown', ev => this.onMouseDown(ev));
this.addEventListener('mouseup', ev => this.onMouseUp(ev));
this.addEventListener('touchstart', ev => this.onTouchStart(ev));
this.addEventListener('touchend', ev => this.onTouchEnd(ev));
this.setColor = this.setColor.bind(this);
this.mouseMoveIsThrottled = true;
this.canvas = this.$.canvas;
this.context = this.canvas.getContext('2d');
this.drawGradient();
}
onMouseDown: function (ev) {
onMouseDown(ev) {
this.onMouseMove(ev);
this.addEventListener('mousemove', this.onMouseMove);
},
}
onMouseUp: function () {
onMouseUp() {
this.removeEventListener('mousemove', this.onMouseMove);
},
}
onTouchStart: function (ev) {
onTouchStart(ev) {
this.onTouchMove(ev);
this.addEventListener('touchmove', this.onTouchMove);
},
}
onTouchEnd: function () {
onTouchEnd() {
this.removeEventListener('touchmove', this.onTouchMove);
},
}
onTouchMove: function (ev) {
onTouchMove(ev) {
if (!this.mouseMoveIsThrottled) {
return;
}
this.mouseMoveIsThrottled = false;
this.processColorSelect(ev.touches[0]);
this.async(function () { this.mouseMoveIsThrottled = true; }.bind(this), 100);
},
setTimeout(() => { this.mouseMoveIsThrottled = true; }, 100);
}
onMouseMove: function (ev) {
onMouseMove(ev) {
if (!this.mouseMoveIsThrottled) {
return;
}
this.mouseMoveIsThrottled = false;
this.processColorSelect(ev);
this.async(function () { this.mouseMoveIsThrottled = true; }.bind(this), 100);
},
}
processColorSelect: function (ev) {
processColorSelect(ev) {
var rect = this.canvas.getBoundingClientRect();
// boundary check because people can move off-canvas.
@ -90,29 +100,21 @@ Polymer({
}
this.onColorSelect(ev.clientX - rect.left, ev.clientY - rect.top);
},
}
onColorSelect: function (x, y) {
onColorSelect(x, y) {
var data = this.context.getImageData(x, y, 1, 1).data;
this.setColor({ r: data[0], g: data[1], b: data[2] });
},
}
setColor: function (rgb) {
setColor(rgb) {
this.color = rgb;
this.fire('colorselected', { rgb: this.color });
},
}
ready: function () {
this.setColor = this.setColor.bind(this);
this.mouseMoveIsThrottled = true;
this.canvas = this.$.canvas;
this.context = this.canvas.getContext('2d');
this.drawGradient();
},
drawGradient: function () {
drawGradient() {
var style;
var width;
var height;
@ -143,6 +145,8 @@ Polymer({
this.context.fillStyle = bwGradient;
this.context.fillRect(0, 0, width, height);
},
});
}
}
customElements.define(HaColorPicker.is, HaColorPicker);
</script>

61
src/components/ha-cover-controls.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../util/cover-model.html">
@ -28,42 +28,47 @@
</dom-module>
<script>
Polymer({
is: 'ha-cover-controls',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
entityObj: {
type: Object,
computed: 'computeEntityObj(hass, stateObj)',
},
},
computeEntityObj: function (hass, stateObj) {
class HaCoverControls extends Polymer.Element {
static get is() { return 'ha-cover-controls'; }
static get properties() {
return {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
entityObj: {
type: Object,
computed: 'computeEntityObj(hass, stateObj)',
},
};
}
computeEntityObj(hass, stateObj) {
return new window.CoverEntity(hass, stateObj);
},
computeOpenDisabled: function (stateObj, entityObj) {
}
computeOpenDisabled(stateObj, entityObj) {
var assumedState = stateObj.attributes.assumed_state === true;
return entityObj.isFullyOpen && !assumedState;
},
computeClosedDisabled: function (stateObj, entityObj) {
}
computeClosedDisabled(stateObj, entityObj) {
var assumedState = (stateObj.attributes.assumed_state === true);
return entityObj.isFullyClosed && !assumedState;
},
onOpenTap: function (ev) {
}
onOpenTap(ev) {
ev.stopPropagation();
this.entityObj.openCover();
},
onCloseTap: function (ev) {
}
onCloseTap(ev) {
ev.stopPropagation();
this.entityObj.closeCover();
},
onStopTap: function (ev) {
}
onStopTap(ev) {
ev.stopPropagation();
this.entityObj.stopCover();
},
});
}
}
customElements.define(HaCoverControls.is, HaCoverControls);
</script>

61
src/components/ha-cover-tilt-controls.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
@ -32,42 +32,47 @@
</dom-module>
<script>
Polymer({
is: 'ha-cover-tilt-controls',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
entityObj: {
type: Object,
computed: 'computeEntityObj(hass, stateObj)',
},
},
computeEntityObj: function (hass, stateObj) {
class HaCoverTiltControls extends Polymer.Element {
static get is() { return 'ha-cover-tilt-controls'; }
static get properties() {
return {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
entityObj: {
type: Object,
computed: 'computeEntityObj(hass, stateObj)',
},
};
}
computeEntityObj(hass, stateObj) {
return new window.CoverEntity(hass, stateObj);
},
computeOpenDisabled: function (stateObj, entityObj) {
}
computeOpenDisabled(stateObj, entityObj) {
var assumedState = stateObj.attributes.assumed_state === true;
return entityObj.isFullyOpenTilt && !assumedState;
},
computeClosedDisabled: function (stateObj, entityObj) {
}
computeClosedDisabled(stateObj, entityObj) {
var assumedState = (stateObj.attributes.assumed_state === true);
return entityObj.isFullyClosedTilt && !assumedState;
},
onOpenTiltTap: function (ev) {
}
onOpenTiltTap(ev) {
ev.stopPropagation();
this.entityObj.openCoverTilt();
},
onCloseTiltTap: function (ev) {
}
onCloseTiltTap(ev) {
ev.stopPropagation();
this.entityObj.closeCoverTilt();
},
onStopTiltTap: function (ev) {
}
onStopTiltTap(ev) {
ev.stopPropagation();
this.entityObj.stopCoverTilt();
},
});
}
}
customElements.define(HaCoverTiltControls.is, HaCoverTiltControls);
</script>

10
src/components/ha-demo-badge.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='./ha-label-badge.html'>
@ -19,7 +19,9 @@
</dom-module>
<script>
Polymer({
is: 'ha-demo-badge',
});
class HaDemoBadge extends Polymer.Element {
static get is() { return 'ha-demo-badge'; }
}
customElements.define(HaDemoBadge.is, HaDemoBadge);
</script>

17
src/components/ha-icon-check.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
<dom-module id='ha-icon-check'>
@ -37,10 +37,15 @@
</dom-module>
<script>
Polymer({
is: 'ha-icon-check',
properties: {
checked: Boolean,
class HaIconCheck extends Polymer.Element {
static get is() { return 'ha-icon-check'; }
static get properties() {
return {
checked: Boolean,
};
}
});
}
customElements.define(HaIconCheck.is, HaIconCheck);
</script>

48
src/components/ha-labeled-slider.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
@ -40,30 +40,34 @@
</dom-module>
<script>
Polymer({
is: 'ha-labeled-slider',
class HaLabeledSlider extends Polymer.Element {
static get is() { return 'ha-labeled-slider'; }
properties: {
caption: {
type: String,
},
static get properties() {
return {
caption: {
type: String,
},
icon: {
type: String,
},
icon: {
type: String,
},
min: {
type: Number,
},
min: {
type: Number,
},
max: {
type: Number,
},
max: {
type: Number,
},
value: {
type: Number,
notify: true,
},
},
});
value: {
type: Number,
notify: true,
},
};
}
}
customElements.define(HaLabeledSlider.is, HaLabeledSlider);
</script>

42
src/components/ha-menu-button.html
View File

@ -1,6 +1,8 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<dom-module id='ha-menu-button'>
<template>
<style>
@ -17,28 +19,32 @@
</dom-module>
<script>
Polymer({
is: 'ha-menu-button',
class HaMenuButton extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-menu-button'; }
properties: {
narrow: {
type: Boolean,
value: false,
},
static get properties() {
return {
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
},
showMenu: {
type: Boolean,
value: false,
},
};
}
computeMenuButtonClass: function (narrow, showMenu) {
computeMenuButtonClass(narrow, showMenu) {
return !narrow && showMenu ? 'invisible' : '';
},
}
toggleMenu: function (ev) {
toggleMenu(ev) {
ev.stopPropagation();
this.fire('hass-open-menu');
},
});
}
}
customElements.define(HaMenuButton.is, HaMenuButton);
</script>

73
src/components/ha-push-notifications-toggle.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
<dom-module id='ha-push-notifications-toggle'>
@ -13,31 +13,36 @@
</dom-module>
<script>
Polymer({
is: 'ha-push-notifications-toggle',
properties: {
hass: { type: Object, value: null },
pushSupported: {
type: Boolean,
readOnly: true,
notify: true,
value: (
'PushManager' in window &&
(document.location.protocol === 'https:' ||
document.location.hostname === 'localhost' ||
document.location.hostname === '127.0.0.1')
)
},
pushActive: {
type: Boolean,
value: 'Notification' in window && Notification.permission === 'granted'
},
loading: {
type: Boolean,
value: true,
}
},
attached: function () {
class HaPushNotificationsToggle extends Polymer.Element {
static get is() { return 'ha-push-notifications-toggle'; }
static get properties() {
return {
hass: { type: Object, value: null },
pushSupported: {
type: Boolean,
readOnly: true,
notify: true,
value: (
'PushManager' in window &&
(document.location.protocol === 'https:' ||
document.location.hostname === 'localhost' ||
document.location.hostname === '127.0.0.1')
)
},
pushActive: {
type: Boolean,
value: 'Notification' in window && Notification.permission === 'granted'
},
loading: {
type: Boolean,
value: true,
}
};
}
connectedCallback() {
super.connectedCallback();
if (!this.pushSupported) return;
var el = this;
@ -54,15 +59,15 @@ Polymer({
el._setPushSupported(false);
}
);
},
handlePushChange: function (ev) {
}
handlePushChange(ev) {
if (ev.target.checked) {
this.subscribePushNotifications();
} else {
this.unsubscribePushNotifications();
}
},
subscribePushNotifications: function () {
}
subscribePushNotifications() {
var el = this;
navigator.serviceWorker.ready
@ -101,8 +106,8 @@ Polymer({
el.pushActive = false;
}
);
},
unsubscribePushNotifications: function () {
}
unsubscribePushNotifications() {
var el = this;
navigator.serviceWorker.ready
@ -131,5 +136,7 @@ Polymer({
});
});
}
});
}
customElements.define(HaPushNotificationsToggle.is, HaPushNotificationsToggle);
</script>

65
src/components/ha-relative-time.html
View File

@ -1,54 +1,61 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<script>
Polymer({
is: 'ha-relative-time',
class HaRelativeTime extends Polymer.Element {
static get is() { return 'ha-relative-time'; }
properties: {
datetime: {
type: String,
observer: 'datetimeChanged',
},
static get properties() {
return {
datetime: {
type: String,
observer: 'datetimeChanged',
},
datetimeObj: {
type: Object,
observer: 'datetimeObjChanged',
},
datetimeObj: {
type: Object,
observer: 'datetimeObjChanged',
},
parsedDateTime: {
type: Object,
},
},
parsedDateTime: {
type: Object,
},
};
}
created: function () {
constructor() {
super();
this.updateRelative = this.updateRelative.bind(this);
},
}
attached: function () {
connectedCallback() {
super.connectedCallback();
// update every 60 seconds
this.updateInterval = setInterval(this.updateRelative, 60000);
},
}
detached: function () {
disconnectedCallback() {
super.disconnectedCallback();
clearInterval(this.updateInterval);
},
}
datetimeChanged: function (newVal) {
datetimeChanged(newVal) {
this.parsedDateTime = newVal ? new Date(newVal) : null;
this.updateRelative();
},
}
datetimeObjChanged: function (newVal) {
datetimeObjChanged(newVal) {
this.parsedDateTime = newVal;
this.updateRelative();
},
}
updateRelative: function () {
updateRelative() {
var root = Polymer.dom(this);
root.innerHTML = this.parsedDateTime ?
window.hassUtil.relativeTime(this.parsedDateTime) : 'never';
},
});
}
}
customElements.define(HaRelativeTime.is, HaRelativeTime);
</script>

26
src/components/ha-service-description.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id='ha-service-description'>
<template>
@ -7,21 +7,25 @@
</dom-module>
<script>
Polymer({
is: 'ha-service-description',
class HaServiceDescription extends Polymer.Element {
static get is() { return 'ha-service-description'; }
properties: {
hass: Object,
domain: String,
service: String,
},
static get properties() {
return {
hass: Object,
domain: String,
service: String,
};
}
_getDescription: function (hass, domain, service) {
_getDescription(hass, domain, service) {
var domainServices = hass.config.services[domain];
if (!domainServices) return '';
var serviceObject = domainServices[service];
if (!serviceObject) return '';
return serviceObject.description;
},
});
}
}
customElements.define(HaServiceDescription.is, HaServiceDescription);
</script>

42
src/components/ha-start-voice-button.html
View File

@ -1,6 +1,8 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<dom-module id='ha-start-voice-button'>
<template>
<paper-icon-button
@ -12,28 +14,32 @@
</dom-module>
<script>
Polymer({
is: 'ha-start-voice-button',
class HaStartVoiceButton extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-start-voice-button'; }
properties: {
hass: {
type: Object,
value: null,
},
static get properties() {
return {
hass: {
type: Object,
value: null,
},
canListen: {
type: Boolean,
computed: 'computeCanListen(hass)',
},
},
canListen: {
type: Boolean,
computed: 'computeCanListen(hass)',
},
};
}
computeCanListen: function (hass) {
computeCanListen(hass) {
return ('webkitSpeechRecognition' in window &&
window.hassUtil.isComponentLoaded(hass, 'conversation'));
},
}
handleListenClick: function () {
handleListenClick() {
this.fire('hass-start-voice');
},
});
}
}
customElements.define(HaStartVoiceButton.is, HaStartVoiceButton);
</script>

8
src/components/state-history-chart-line.html
View File

@ -2,9 +2,7 @@
<link rel="import" href="../../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
<script>
(function () {
'use strict';
{
function range(start, end) {
var result = [];
var i;
@ -58,7 +56,7 @@
this._isAttached = true;
this.drawChart();
this.addEventListener('iron-resize', () => {
this.async(this.drawChart, 10);
setTimeout(() => this.drawChart(), 10);
});
}
@ -244,5 +242,5 @@
}
}
customElements.define(StateHistoryChartLine.is, StateHistoryChartLine);
}());
}
</script>

2
src/components/state-history-chart-timeline.html
View File

@ -24,7 +24,7 @@ class StateHistoryChartTimeline extends
this._isAttached = true;
this.drawChart();
this.addEventListener('iron-resize', () => {
this.async(this.drawChart, 10);
setTimeout(() => this.drawChart(), 10);
});
}

82
src/dialogs/ha-voice-command-dialog.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
@ -133,36 +133,38 @@
</dom-module>
<script>
Polymer({
is: 'ha-voice-command-dialog',
class HaVoiceCommandDialog extends Polymer.Element {
static get is() { return 'ha-voice-command-dialog'; }
properties: {
hass: {
type: Object,
},
dialogOpen: {
type: Boolean,
value: false,
observer: 'dialogOpenChanged',
},
results: {
type: Object,
value: null,
observer: '_scrollMessagesBottom',
},
_conversation: {
type: Array,
value: function () {
return [{ who: 'hass', text: 'How can I help?' }];
static get properties() {
return {
hass: {
type: Object,
},
observer: '_scrollMessagesBottom',
}
},
initRecognition: function () {
dialogOpen: {
type: Boolean,
value: false,
observer: 'dialogOpenChanged',
},
results: {
type: Object,
value: null,
observer: '_scrollMessagesBottom',
},
_conversation: {
type: Array,
value: function () {
return [{ who: 'hass', text: 'How can I help?' }];
},
observer: '_scrollMessagesBottom',
}
};
}
initRecognition() {
/* eslint-disable new-cap */
this.recognition = new webkitSpeechRecognition();
/* eslint-enable new-cap */
@ -217,9 +219,9 @@ Polymer({
final: oldResults.final + finalTranscript,
};
}.bind(this);
},
}
startListening: function () {
startListening() {
if (!this.recognition) {
this.initRecognition();
}
@ -229,28 +231,30 @@ Polymer({
final: '',
};
this.recognition.start();
},
}
_scrollMessagesBottom: function () {
this.async(function () {
_scrollMessagesBottom() {
setTimeout(() => {
this.$.messages.scrollTop = this.$.messages.scrollHeight;
if (this.$.messages.scrollTop !== 0) {
this.$.dialog.fire('iron-resize');
}
}.bind(this), 10);
},
}, 10);
}
dialogOpenChanged: function (newVal) {
dialogOpenChanged(newVal) {
if (newVal) {
this.startListening();
} else if (!newVal && this.results) {
this.recognition.abort();
}
},
}
_computeMessageClasses: function (message) {
_computeMessageClasses(message) {
return 'message ' + message.who + (message.error ? ' error' : '');
}
});
}
customElements.define(HaVoiceCommandDialog.is, HaVoiceCommandDialog);
</script>

35
src/layouts/hass-error-screen.html
View File

@ -1,3 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
@ -34,23 +35,27 @@
</dom-module>
<script>
Polymer({
is: 'hass-error-screen',
class HassErrorScreen extends Polymer.Element {
static get is() { return 'hass-error-screen'; }
properties: {
title: {
type: String,
value: 'Home Assistant',
},
static get properties() {
return {
title: {
type: String,
value: 'Home Assistant',
},
error: {
type: String,
value: 'Oops! It looks like something went wrong.'
},
},
error: {
type: String,
value: 'Oops! It looks like something went wrong.'
},
};
}
backTapped: function () {
backTapped() {
history.back();
},
});
}
}
customElements.define(HassErrorScreen.is, HassErrorScreen);
</script>

39
src/layouts/hass-loading-screen.html
View File

@ -1,3 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel='import' href='../../bower_components/paper-spinner/paper-spinner.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
@ -29,24 +30,28 @@
</dom-module>
<script>
Polymer({
is: 'hass-loading-screen',
class HassLoadingScreen extends Polymer.Element {
static get is() { return 'hass-loading-screen'; }
properties: {
narrow: {
type: Boolean,
value: false,
},
static get properties() {
return {
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
title: {
type: String,
value: '',
},
},
});
title: {
type: String,
value: '',
},
};
}
}
customElements.define(HassLoadingScreen.is, HassLoadingScreen);
</script>

7
src/layouts/home-assistant-main.html
View File

@ -87,7 +87,7 @@
</dom-module>
<script>
(function () {
{
const NON_SWIPABLE_PANELS = ['kiosk', 'map'];
class HomeAssistantMain extends window.hassMixins.EventsMixin(Polymer.Element) {
@ -147,7 +147,8 @@
}
}
attached() {
connectedCallback() {
super.connectedCallback();
window.removeInitMsg();
if (document.location.pathname === '/') {
history.replaceState(null, null, '/states');
@ -172,5 +173,5 @@
}
customElements.define(HomeAssistantMain.is, HomeAssistantMain);
}());
}
</script>

112
src/layouts/login-form.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
@ -70,74 +70,78 @@
</dom-module>
<script>
Polymer({
is: 'login-form',
class LoginForm extends Polymer.Element {
static get is() { return 'login-form'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
connectionPromise: {
type: Object,
notify: true,
observer: 'handleConnectionPromiseChanged',
},
connectionPromise: {
type: Object,
notify: true,
observer: 'handleConnectionPromiseChanged',
},
errorMessage: {
type: String,
value: '',
},
errorMessage: {
type: String,
value: '',
},
isValidating: {
type: Boolean,
observer: 'isValidatingChanged',
value: false,
},
isValidating: {
type: Boolean,
observer: 'isValidatingChanged',
value: false,
},
showLoading: {
type: Boolean,
value: false,
},
showLoading: {
type: Boolean,
value: false,
},
showSpinner: {
type: Boolean,
computed: 'computeShowSpinner(showLoading, isValidating)',
},
showSpinner: {
type: Boolean,
computed: 'computeShowSpinner(showLoading, isValidating)',
},
password: {
type: String,
value: '',
},
},
password: {
type: String,
value: '',
},
};
}
listeners: {
keydown: 'passwordKeyDown',
},
ready() {
super.ready();
this.addEventListener('keydown', ev => this.passwordKeyDown(ev));
}
attached: function () {
connectedCallback() {
super.connectedCallback();
window.removeInitMsg();
},
}
computeLoadingMsg: function (isValidating) {
computeLoadingMsg(isValidating) {
return isValidating ? 'Connecting' : 'Loading data';
},
}
computeShowSpinner: function (forceShowLoading, isValidating) {
computeShowSpinner(forceShowLoading, isValidating) {
return forceShowLoading || isValidating;
},
}
isValidatingChanged: function (newVal) {
isValidatingChanged(newVal) {
if (!newVal) {
this.async(function () {
setTimeout(() => {
if (this.$.passwordInput.inputElement.inputElement) {
this.$.passwordInput.inputElement.inputElement.focus();
}
}.bind(this), 10);
}, 10);
}
},
}
passwordKeyDown: function (ev) {
passwordKeyDown(ev) {
// validate on enter
if (ev.keyCode === 13) {
this.validatePassword();
@ -146,9 +150,9 @@ Polymer({
} else if (this.errorMessage) {
this.errorMessage = '';
}
},
}
validatePassword: function () {
validatePassword() {
var auth = this.password;
this.$.hideKeyboardOnFocus.focus();
this.connectionPromise = window.createHassConnection(auth);
@ -158,9 +162,9 @@ Polymer({
localStorage.authToken = auth;
});
}
},
}
handleConnectionPromiseChanged: function (newVal) {
handleConnectionPromiseChanged(newVal) {
if (!newVal) return;
var el = this;
@ -184,5 +188,7 @@ Polymer({
}
);
}
});
}
customElements.define(LoginForm.is, LoginForm);
</script>

481
src/layouts/partial-cards.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
@ -13,6 +13,8 @@
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel='import' href='../../bower_components/app-route/app-route.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel="import" href="../components/ha-menu-button.html">
<link rel="import" href="../components/ha-start-voice-button.html">
<link rel="import" href="../components/ha-cards.html">
@ -132,232 +134,257 @@
</dom-module>
<script>
Polymer({
DEFAULT_VIEW_ENTITY_ID: 'group.default_view',
ALWAYS_SHOW_DOMAIN: ['persistent_notification', 'configurator'],
{
const DEFAULT_VIEW_ENTITY_ID = 'group.default_view';
const ALWAYS_SHOW_DOMAIN = ['persistent_notification', 'configurator'];
is: 'partial-cards',
class PartialCards extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'partial-cards'; }
properties: {
hass: {
type: Object,
value: null,
observer: 'hassChanged'
},
static get properties() {
return {
narrow: {
type: Boolean,
value: false,
},
hass: {
type: Object,
value: null,
observer: 'hassChanged'
},
showMenu: {
type: Boolean,
observer: 'handleWindowChange',
},
narrow: {
type: Boolean,
value: false,
},
panelVisible: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
observer: 'handleWindowChange',
},
route: Object,
routeData: Object,
routeMatch: Boolean,
panelVisible: {
type: Boolean,
value: false,
},
_columns: {
type: Number,
value: 1,
},
route: Object,
routeData: Object,
routeMatch: Boolean,
introductionLoaded: {
type: Boolean,
computed: 'computeIntroductionLoaded(hass)',
},
_columns: {
type: Number,
value: 1,
},
locationName: {
type: String,
value: '',
computed: 'computeLocationName(hass)',
},
introductionLoaded: {
type: Boolean,
computed: 'computeIntroductionLoaded(hass)',
},
currentView: {
type: String,
computed: '_computeCurrentView(routeMatch, routeData)',
},
locationName: {
type: String,
value: '',
computed: 'computeLocationName(hass)',
},
views: {
type: Array,
},
currentView: {
type: String,
computed: '_computeCurrentView(routeMatch, routeData)',
},
defaultView: {
type: Object,
},
views: {
type: Array,
},
viewStates: {
type: Object,
computed: 'computeViewStates(currentView, hass, defaultView)',
},
defaultView: {
type: Object,
},
orderedGroups: {
type: Array,
computed: 'computeOrderedGroups(currentView, hass, defaultView)',
},
viewStates: {
type: Object,
computed: 'computeViewStates(currentView, hass, defaultView)',
},
showTabs: {
type: Boolean,
value: false,
},
},
orderedGroups: {
type: Array,
computed: 'computeOrderedGroups(currentView, hass, defaultView)',
},
created: function () {
this.handleWindowChange = this.handleWindowChange.bind(this);
this.mqls = [300, 600, 900, 1200].map(function (width) {
var mql = window.matchMedia('(min-width: ' + width + 'px)');
mql.addListener(this.handleWindowChange);
return mql;
}.bind(this));
},
detached: function () {
this.mqls.forEach(function (mql) {
mql.removeListener(this.handleWindowChange);
});
},
handleWindowChange: function () {
var matchColumns = this.mqls.reduce(function (cols, mql) {
return cols + mql.matches;
}, 0);
// Do -1 column if the menu is docked and open
this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
},
areTabsHidden: function (views, showTabs) {
return !views || !views.length || !showTabs;
},
/**
* Scroll to a specific y coordinate.
*
* Copied from paper-scroll-header-panel.
*
* @method scroll
* @param {number} top The coordinate to scroll to, along the y-axis.
* @param {boolean} smooth true if the scroll position should be smoothly adjusted.
*/
scrollToTop: function () {
// the scroll event will trigger _updateScrollState directly,
// However, _updateScrollState relies on the previous `scrollTop` to update the states.
// Calling _updateScrollState will ensure that the states are synced correctly.
var top = 0;
var scroller = this.$.layout.header.scrollTarget;
var easingFn = function easeOutQuad(t, b, c, d) {
/* eslint-disable no-param-reassign, space-infix-ops, no-mixed-operators */
t /= d;
return -c * t*(t-2) + b;
/* eslint-enable no-param-reassign, space-infix-ops, no-mixed-operators */
};
var animationId = Math.random();
var duration = 200;
var startTime = Date.now();
var currentScrollTop = scroller.scrollTop;
var deltaScrollTop = top - currentScrollTop;
this._currentAnimationId = animationId;
(function updateFrame() {
var now = Date.now();
var elapsedTime = now - startTime;
if (elapsedTime > duration) {
scroller.scrollTop = top;
} else if (this._currentAnimationId === animationId) {
scroller.scrollTop = easingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration);
requestAnimationFrame(updateFrame.bind(this));
}
}).call(this);
},
handleViewSelected: function (ev) {
var view = ev.detail.item.getAttribute('data-entity') || null;
var current = this.currentView;
if (view !== current) {
var path = '/states';
if (view) {
path += '/' + view;
}
history.pushState(null, null, path);
this.fire('location-changed');
}
},
_computeCurrentView: function (routeMatch, routeData) {
return routeMatch ? routeData.view : '';
},
computeTitle: function (views, locationName) {
return views && views.length > 0 ? 'Home Assistant' : locationName;
},
computeShowIntroduction: function (currentView, introductionLoaded, states) {
return currentView === '' && (introductionLoaded || Object.keys(states).length === 0);
},
computeStateName: function (stateObj) {
if (stateObj.entity_id === this.DEFAULT_VIEW_ENTITY_ID) {
if (stateObj.attributes.friendly_name &&
stateObj.attributes.friendly_name !== 'default_view') {
return stateObj.attributes.friendly_name;
}
return this.computeLocationName(this.hass);
}
return window.hassUtil.computeStateName(stateObj);
},
computeLocationName: function (hass) {
return window.hassUtil.computeLocationName(hass);
},
computeIntroductionLoaded: function (hass) {
return window.hassUtil.isComponentLoaded(hass, 'introduction');
},
hassChanged: function (hass) {
if (!hass) return;
var views = window.HAWS.extractViews(hass.states);
// If default view present, it's in first index.
if (views.length > 0 && views[0].entity_id === this.DEFAULT_VIEW_ENTITY_ID) {
this.defaultView = views.shift();
} else {
this.defaultView = null;
showTabs: {
type: Boolean,
value: false,
},
};
}
this.views = views;
},
constructor() {
super();
this.handleWindowChange = this.handleWindowChange.bind(this);
this.mqls = [300, 600, 900, 1200].map(function (width) {
var mql = window.matchMedia('(min-width: ' + width + 'px)');
mql.addListener(this.handleWindowChange);
return mql;
}.bind(this));
}
isView: function (currentView, defaultView) {
return currentView || defaultView;
},
disconnectedCallback() {
super.disconnectedCallback();
this.mqls.forEach(function (mql) {
mql.removeListener(this.handleWindowChange);
});
}
/*
Compute the states to show for current view.
handleWindowChange() {
var matchColumns = this.mqls.reduce(function (cols, mql) {
return cols + mql.matches;
}, 0);
// Do -1 column if the menu is docked and open
this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
}
Will make sure we always show entities from ALWAYS_SHOW_DOMAINS domains.
*/
computeViewStates: function (currentView, hass, defaultView) {
var i;
var entityId;
var state;
var states;
var entityIds = Object.keys(hass.states);
areTabsHidden(views, showTabs) {
return !views || !views.length || !showTabs;
}
// If we base off all entities, only have to filter out hidden
if (!this.isView(currentView, defaultView)) {
states = {};
/**
* Scroll to a specific y coordinate.
*
* Copied from paper-scroll-header-panel.
*
* @method scroll
* @param {number} top The coordinate to scroll to, along the y-axis.
* @param {boolean} smooth true if the scroll position should be smoothly adjusted.
*/
scrollToTop() {
// the scroll event will trigger _updateScrollState directly,
// However, _updateScrollState relies on the previous `scrollTop` to update the states.
// Calling _updateScrollState will ensure that the states are synced correctly.
var top = 0;
var scroller = this.$.layout.header.scrollTarget;
var easingFn = function easeOutQuad(t, b, c, d) {
/* eslint-disable no-param-reassign, space-infix-ops, no-mixed-operators */
t /= d;
return -c * t*(t-2) + b;
/* eslint-enable no-param-reassign, space-infix-ops, no-mixed-operators */
};
var animationId = Math.random();
var duration = 200;
var startTime = Date.now();
var currentScrollTop = scroller.scrollTop;
var deltaScrollTop = top - currentScrollTop;
this._currentAnimationId = animationId;
(function updateFrame() {
var now = Date.now();
var elapsedTime = now - startTime;
if (elapsedTime > duration) {
scroller.scrollTop = top;
} else if (this._currentAnimationId === animationId) {
scroller.scrollTop = easingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration);
requestAnimationFrame(updateFrame.bind(this));
}
}).call(this);
}
handleViewSelected(ev) {
var view = ev.detail.item.getAttribute('data-entity') || null;
var current = this.currentView;
if (view !== current) {
var path = '/states';
if (view) {
path += '/' + view;
}
history.pushState(null, null, path);
this.fire('location-changed');
}
}
_computeCurrentView(routeMatch, routeData) {
return routeMatch ? routeData.view : '';
}
computeTitle(views, locationName) {
return views && views.length > 0 ? 'Home Assistant' : locationName;
}
computeShowIntroduction(currentView, introductionLoaded, states) {
return currentView === '' && (introductionLoaded || Object.keys(states).length === 0);
}
computeStateName(stateObj) {
if (stateObj.entity_id === DEFAULT_VIEW_ENTITY_ID) {
if (stateObj.attributes.friendly_name &&
stateObj.attributes.friendly_name !== 'default_view') {
return stateObj.attributes.friendly_name;
}
return this.computeLocationName(this.hass);
}
return window.hassUtil.computeStateName(stateObj);
}
computeLocationName(hass) {
return window.hassUtil.computeLocationName(hass);
}
computeIntroductionLoaded(hass) {
return window.hassUtil.isComponentLoaded(hass, 'introduction');
}
hassChanged(hass) {
if (!hass) return;
var views = window.HAWS.extractViews(hass.states);
// If default view present, it's in first index.
if (views.length > 0 && views[0].entity_id === DEFAULT_VIEW_ENTITY_ID) {
this.defaultView = views.shift();
} else {
this.defaultView = null;
}
this.views = views;
}
isView(currentView, defaultView) {
return currentView || defaultView;
}
/*
Compute the states to show for current view.
Will make sure we always show entities from ALWAYS_SHOW_DOMAINS domains.
*/
computeViewStates(currentView, hass, defaultView) {
var i;
var entityId;
var state;
var states;
var entityIds = Object.keys(hass.states);
// If we base off all entities, only have to filter out hidden
if (!this.isView(currentView, defaultView)) {
states = {};
for (i = 0; i < entityIds.length; i++) {
entityId = entityIds[i];
state = hass.states[entityId];
// We can filter out hidden and domain at the same time.
if (!state.attributes.hidden) {
states[entityId] = state;
}
}
return states;
}
if (currentView) {
states = window.HAWS.getViewEntities(hass.states, hass.states[currentView]);
} else {
states = window.HAWS.getViewEntities(hass.states, hass.states[DEFAULT_VIEW_ENTITY_ID]);
}
// Make sure certain domains are always shown.
for (i = 0; i < entityIds.length; i++) {
entityId = entityIds[i];
state = hass.states[entityId];
// We can filter out hidden and domain at the same time.
if (!state.attributes.hidden) {
if (ALWAYS_SHOW_DOMAIN.indexOf(window.hassUtil.computeDomain(state)) !== -1) {
states[entityId] = state;
}
}
@ -365,41 +392,25 @@ Polymer({
return states;
}
if (currentView) {
states = window.HAWS.getViewEntities(hass.states, hass.states[currentView]);
} else {
states = window.HAWS.getViewEntities(hass.states, hass.states[this.DEFAULT_VIEW_ENTITY_ID]);
}
// Make sure certain domains are always shown.
for (i = 0; i < entityIds.length; i++) {
entityId = entityIds[i];
state = hass.states[entityId];
if (this.ALWAYS_SHOW_DOMAIN.indexOf(window.hassUtil.computeDomain(state)) !== -1) {
states[entityId] = state;
/*
Compute the ordered list of groups for this view
*/
computeOrderedGroups(currentView, hass, defaultView) {
if (!this.isView(currentView, defaultView)) {
return null;
}
var orderedGroups = {};
var entitiesList = hass.states[currentView || DEFAULT_VIEW_ENTITY_ID].attributes.entity_id;
for (var i = 0; i < entitiesList.length; i++) {
orderedGroups[entitiesList[i]] = i;
}
return orderedGroups;
}
}
return states;
},
/*
Compute the ordered list of groups for this view
*/
computeOrderedGroups: function (currentView, hass, defaultView) {
if (!this.isView(currentView, defaultView)) {
return null;
}
var orderedGroups = {};
var entitiesList = hass.states[currentView || this.DEFAULT_VIEW_ENTITY_ID].attributes.entity_id;
for (var i = 0; i < entitiesList.length; i++) {
orderedGroups[entitiesList[i]] = i;
}
return orderedGroups;
},
});
customElements.define(PartialCards.is, PartialCards);
}
</script>

104
src/layouts/partial-panel-resolver.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../bower_components/app-route/app-route.html'>
<link rel="import" href="./hass-loading-screen.html">
@ -29,58 +29,60 @@
</dom-module>
<script>
Polymer({
is: 'partial-panel-resolver',
class PartialPanelResolver extends Polymer.Element {
static get is() { return 'partial-panel-resolver'; }
properties: {
hass: {
type: Object,
observer: 'updateAttributes',
},
static get properties() {
return {
hass: {
type: Object,
observer: 'updateAttributes',
},
narrow: {
type: Boolean,
value: false,
observer: 'updateAttributes',
},
narrow: {
type: Boolean,
value: false,
observer: 'updateAttributes',
},
showMenu: {
type: Boolean,
value: false,
observer: 'updateAttributes',
},
showMenu: {
type: Boolean,
value: false,
observer: 'updateAttributes',
},
route: Object,
route: Object,
routeData: Object,
routeData: Object,
routeTail: {
type: Object,
observer: 'updateAttributes',
},
routeTail: {
type: Object,
observer: 'updateAttributes',
},
resolved: {
type: Boolean,
value: false,
},
resolved: {
type: Boolean,
value: false,
},
errorLoading: {
type: Boolean,
value: false,
},
errorLoading: {
type: Boolean,
value: false,
},
panel: {
type: Object,
computed: 'computeCurrentPanel(hass, routeData)',
observer: 'panelChanged',
},
},
panel: {
type: Object,
computed: 'computeCurrentPanel(hass, routeData)',
observer: 'panelChanged',
},
};
}
computeCurrentPanel: function (hass, routeData) {
computeCurrentPanel(hass, routeData) {
return routeData ? hass.config.panels[routeData.panel] : null;
},
}
panelChanged: function (panel) {
panelChanged(panel) {
if (!panel) {
if (this.$.panel.lastChild) {
this.$.panel.removeChild(this.$.panel.lastChild);
@ -91,10 +93,10 @@ Polymer({
this.resolved = false;
this.errorLoading = false;
this.importHref(
Polymer.importHref(
panel.url,
function success() {
() => {
window.hassUtil.dynamicContentUpdater(this.$.panel, 'ha-panel-' + panel.component_name, {
hass: this.hass,
narrow: this.narrow,
@ -103,23 +105,25 @@ Polymer({
panel: panel,
});
this.resolved = true;
}.bind(this),
},
function error() {
() => {
this.errorLoading = true;
}.bind(this),
},
true /* async */
);
},
}
updateAttributes: function () {
updateAttributes() {
var customEl = Polymer.dom(this.$.panel).lastChild;
if (!customEl) return;
customEl.hass = this.hass;
customEl.narrow = this.narrow;
customEl.showMenu = this.showMenu;
customEl.route = this.routeTail;
},
});
}
}
customElements.define(PartialPanelResolver.is, PartialPanelResolver);
</script>

81
src/managers/notification-manager.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
@ -25,61 +25,68 @@
</dom-module>
<script>
Polymer({
is: 'notification-manager',
class NotificationManager extends Polymer.Element {
static get is() { return 'notification-manager'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
isStreaming: {
type: Boolean,
computed: 'computeIsStreaming(hass)',
},
isStreaming: {
type: Boolean,
computed: 'computeIsStreaming(hass)',
},
_cancelOnOutsideClick: {
type: Boolean,
value: false,
},
_cancelOnOutsideClick: {
type: Boolean,
value: false,
},
_text: {
type: String,
readOnly: true,
},
_text: {
type: String,
readOnly: true,
},
toastClass: {
type: String,
value: '',
},
},
toastClass: {
type: String,
value: '',
},
};
}
computeIsStreaming: function (hass) {
computeIsStreaming(hass) {
return !hass || hass.connected;
},
}
created: function () {
constructor() {
super();
this.handleWindowChange = this.handleWindowChange.bind(this);
this._mediaq = window.matchMedia('(max-width: 599px)');
this._mediaq.addListener(this.handleWindowChange);
},
}
attached: function () {
connectedCallback() {
super.connectedCallback();
this.handleWindowChange(this._mediaq);
},
}
detached: function () {
disconnectedCallback() {
super.disconnectedCallback();
this._mediaq.removeListener(this.handleWindowChange);
},
}
handleWindowChange: function (ev) {
handleWindowChange(ev) {
this.$.toast.classList.toggle('fit-bottom', ev.matches);
this.$.connToast.classList.toggle('fit-bottom', ev.matches);
},
}
showNotification: function (message) {
showNotification(message) {
this._set_text(message);
this.$.toast.show();
},
});
}
}
customElements.define(NotificationManager.is, NotificationManager);
</script>

124
src/more-infos/more-info-alarm_control_panel.html
View File

@ -1,10 +1,12 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<dom-module id='more-info-alarm_control_panel'>
<template>
<style is="custom-style" include="iron-flex"></style>
@ -38,61 +40,63 @@
</dom-module>
<script>
Polymer({
is: 'more-info-alarm_control_panel',
class MoreInfoAlarmControlPanel extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'more-info-alarm_control_panel'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
enteredCode: {
type: String,
value: '',
},
disarmButtonVisible: {
type: Boolean,
value: false,
},
armHomeButtonVisible: {
type: Boolean,
value: false,
},
armAwayButtonVisible: {
type: Boolean,
value: false,
},
codeInputVisible: {
type: Boolean,
value: false,
},
codeInputEnabled: {
type: Boolean,
value: false,
},
codeFormat: {
type: String,
value: '',
},
codeValid: {
type: Boolean,
computed: 'validateCode(enteredCode, codeFormat)',
},
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
enteredCode: {
type: String,
value: '',
},
disarmButtonVisible: {
type: Boolean,
value: false,
},
armHomeButtonVisible: {
type: Boolean,
value: false,
},
armAwayButtonVisible: {
type: Boolean,
value: false,
},
codeInputVisible: {
type: Boolean,
value: false,
},
codeInputEnabled: {
type: Boolean,
value: false,
},
codeFormat: {
type: String,
value: '',
},
codeValid: {
type: Boolean,
computed: 'validateCode(enteredCode, codeFormat)',
},
};
}
validateCode: function (code, format) {
validateCode(code, format) {
var re = new RegExp(format);
if (format === null) {
return true;
}
return re.test(code);
},
}
stateObjChanged: function (newVal, oldVal) {
stateObjChanged(newVal, oldVal) {
if (newVal) {
this.codeFormat = newVal.attributes.code_format;
this.codeInputVisible = this.codeFormat !== null;
@ -111,31 +115,33 @@ Polymer({
this.armAwayButtonVisible = newVal.state === 'disarmed';
}
if (oldVal) {
this.async(function () {
setTimeout(() => {
this.fire('iron-resize');
}.bind(this), 500);
}, 500);
}
},
}
handleDisarmTap: function () {
handleDisarmTap() {
this.callService('alarm_disarm', { code: this.enteredCode });
},
}
handleHomeTap: function () {
handleHomeTap() {
this.callService('alarm_arm_home', { code: this.enteredCode });
},
}
handleAwayTap: function () {
handleAwayTap() {
this.callService('alarm_arm_away', { code: this.enteredCode });
},
}
callService: function (service, data) {
callService(service, data) {
var serviceData = data || {};
serviceData.entity_id = this.stateObj.entity_id;
this.hass.callService('alarm_control_panel', service, serviceData)
.then(function () {
this.enteredCode = '';
}.bind(this));
},
});
}
}
customElements.define(MoreInfoAlarmControlPanel.is, MoreInfoAlarmControlPanel);
</script>

32
src/more-infos/more-info-automation.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
@ -28,23 +28,27 @@
</dom-module>
<script>
Polymer({
is: 'more-info-automation',
class MoreInfoAutomation extends Polymer.Element {
static get is() { return 'more-info-automation'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
},
stateObj: {
type: Object,
},
};
}
handleTriggerTapped: function () {
handleTriggerTapped() {
this.hass.callService('automation', 'trigger', {
entity_id: this.stateObj.entity_id,
});
},
});
}
}
customElements.define(MoreInfoAutomation.is, MoreInfoAutomation);
</script>

50
src/more-infos/more-info-camera.html
View File

@ -1,4 +1,6 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<dom-module id='more-info-camera'>
<template>
@ -18,33 +20,35 @@
</dom-module>
<script>
Polymer({
is: 'more-info-camera',
class MoreInfoCamera extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'more-info-camera'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
stateObj: {
type: Object,
},
isVisible: {
type: Boolean,
value: true,
},
},
isVisible: {
type: Boolean,
value: true,
},
};
}
imageLoaded: function () {
imageLoaded() {
this.fire('iron-resize');
},
}
computeStateName: function (stateObj) {
computeStateName(stateObj) {
return window.hassUtil.computeStateName(stateObj);
},
}
computeCameraImageUrl: function (hass, stateObj, isVisible) {
computeCameraImageUrl(hass, stateObj, isVisible) {
if (hass.demo) {
return '/demo/webcam.jpg';
} else if (stateObj && isVisible) {
@ -53,6 +57,8 @@ Polymer({
}
// Return an empty image if no stateObj (= dialog not open) or in cleanup mode.
return 'data:image/gif;base64,R0lGODlhAQABAAAAACw=';
},
});
}
}
customElements.define(MoreInfoCamera.is, MoreInfoCamera);
</script>

138
src/more-infos/more-info-climate.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
@ -8,6 +8,8 @@
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel="import" href='../components/ha-climate-control.html'>
<dom-module id='more-info-climate'>
@ -179,47 +181,49 @@
</dom-module>
<script>
Polymer({
is: 'more-info-climate',
class MoreInfoClimate extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'more-info-climate'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
operationIndex: {
type: Number,
value: -1,
observer: 'handleOperationmodeChanged',
},
operationIndex: {
type: Number,
value: -1,
observer: 'handleOperationmodeChanged',
},
fanIndex: {
type: Number,
value: -1,
observer: 'handleFanmodeChanged',
},
fanIndex: {
type: Number,
value: -1,
observer: 'handleFanmodeChanged',
},
swingIndex: {
type: Number,
value: -1,
observer: 'handleSwingmodeChanged',
},
swingIndex: {
type: Number,
value: -1,
observer: 'handleSwingmodeChanged',
},
awayToggleChecked: {
type: Boolean,
},
awayToggleChecked: {
type: Boolean,
},
auxToggleChecked: {
type: Boolean,
},
},
auxToggleChecked: {
type: Boolean,
},
};
}
stateObjChanged: function (newVal, oldVal) {
stateObjChanged(newVal, oldVal) {
this.awayToggleChecked = newVal.attributes.away_mode === 'on';
this.auxToggleChecked = newVal.attributes.aux_heat === 'on';
@ -243,52 +247,52 @@ Polymer({
}
if (oldVal) {
this.async(function () {
setTimeout(() => {
this.fire('iron-resize');
}.bind(this), 500);
}, 500);
}
},
}
computeTemperatureStepSize: function (stateObj) {
computeTemperatureStepSize(stateObj) {
if (stateObj.attributes.target_temp_step) {
return stateObj.attributes.target_temp_step;
} else if (stateObj.attributes.unit_of_measurement.indexOf('F') !== -1) {
return 1;
}
return 0.5;
},
}
computeTargetTempHidden: function (stateObj) {
computeTargetTempHidden(stateObj) {
return !stateObj.attributes.temperature &&
!stateObj.attributes.target_temp_low &&
!stateObj.attributes.target_temp_high;
},
}
computeHideTempRangeSlider: function (stateObj) {
computeHideTempRangeSlider(stateObj) {
return !stateObj.attributes.target_temp_low &&
!stateObj.attributes.target_temp_high;
},
}
computeHideTempSlider: function (stateObj) {
computeHideTempSlider(stateObj) {
return !stateObj.attributes.temperature;
},
}
computeClassNames: function (stateObj) {
computeClassNames(stateObj) {
return 'more-info-climate ' + window.hassUtil.attributeClassNames(stateObj, [
'away_mode', 'aux_heat', 'temperature', 'humidity', 'operation_list',
'fan_list', 'swing_list',
]);
},
}
targetTemperatureChanged: function (ev) {
targetTemperatureChanged(ev) {
var temperature = ev.target.value;
if (temperature === this.stateObj.attributes.temperature) return;
this.callServiceHelper('set_temperature', { temperature: temperature });
},
}
targetTemperatureRangeSliderChanged: function (ev) {
targetTemperatureRangeSliderChanged(ev) {
var targetTempLow = ev.currentTarget.valueMin;
var targetTempHigh = ev.currentTarget.valueMax;
@ -298,35 +302,35 @@ Polymer({
target_temp_low: targetTempLow,
target_temp_high: targetTempHigh,
});
},
}
targetHumiditySliderChanged: function (ev) {
targetHumiditySliderChanged(ev) {
var humidity = ev.target.value;
if (humidity === this.stateObj.attributes.humidity) return;
this.callServiceHelper('set_humidity', { humidity: humidity });
},
}
awayToggleChanged: function (ev) {
awayToggleChanged(ev) {
var oldVal = this.stateObj.attributes.away_mode === 'on';
var newVal = ev.target.checked;
if (oldVal === newVal) return;
this.callServiceHelper('set_away_mode', { away_mode: newVal });
},
}
auxToggleChanged: function (ev) {
auxToggleChanged(ev) {
var oldVal = this.stateObj.attributes.aux_heat === 'on';
var newVal = ev.target.checked;
if (oldVal === newVal) return;
this.callServiceHelper('set_aux_heat', { aux_heat: newVal });
},
}
handleFanmodeChanged: function (fanIndex) {
handleFanmodeChanged(fanIndex) {
var fanInput;
// Selected Option will transition to '' before transitioning to new value
if (fanIndex === '' || fanIndex === -1) return;
@ -335,9 +339,9 @@ Polymer({
if (fanInput === this.stateObj.attributes.fan_mode) return;
this.callServiceHelper('set_fan_mode', { fan_mode: fanInput });
},
}
handleOperationmodeChanged: function (operationIndex) {
handleOperationmodeChanged(operationIndex) {
var operationInput;
// Selected Option will transition to '' before transitioning to new value
if (operationIndex === '' || operationIndex === -1) return;
@ -346,9 +350,9 @@ Polymer({
if (operationInput === this.stateObj.attributes.operation_mode) return;
this.callServiceHelper('set_operation_mode', { operation_mode: operationInput });
},
}
handleSwingmodeChanged: function (swingIndex) {
handleSwingmodeChanged(swingIndex) {
var swingInput;
// Selected Option will transition to '' before transitioning to new value
if (swingIndex === '' || swingIndex === -1) return;
@ -357,9 +361,9 @@ Polymer({
if (swingInput === this.stateObj.attributes.swing_mode) return;
this.callServiceHelper('set_swing_mode', { swing_mode: swingInput });
},
}
callServiceHelper: function (service, data) {
callServiceHelper(service, data) {
// We call stateChanged after a successful call to re-sync the inputs
// with the state. It will be out of sync if our service call did not
// result in the entity to be turned on. Since the state is not changing,
@ -371,6 +375,8 @@ Polymer({
.then(function () {
this.stateObjChanged(this.stateObj);
}.bind(this));
},
});
}
}
customElements.define(MoreInfoClimate.is, MoreInfoClimate);
</script>

66
src/more-infos/more-info-configurator.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel='import' href='../../bower_components/iron-input/iron-input.html'>
<link rel='import' href='../../bower_components/paper-spinner/paper-spinner.html'>
@ -94,45 +94,47 @@
</dom-module>
<script>
Polymer({
is: 'more-info-configurator',
class MoreInfoConfigurator extends Polymer.Element {
static get is() { return 'more-info-configurator'; }
properties: {
stateObj: {
type: Object,
},
static get properties() {
return {
stateObj: {
type: Object,
},
action: {
type: String,
value: 'display',
},
action: {
type: String,
value: 'display',
},
isConfigurable: {
type: Boolean,
computed: 'computeIsConfigurable(stateObj)',
},
isConfigurable: {
type: Boolean,
computed: 'computeIsConfigurable(stateObj)',
},
isConfiguring: {
type: Boolean,
value: false,
},
isConfiguring: {
type: Boolean,
value: false,
},
fieldInput: {
type: Object,
value: function () { return {}; },
},
},
fieldInput: {
type: Object,
value: function () { return {}; },
},
};
}
computeIsConfigurable: function (stateObj) {
computeIsConfigurable(stateObj) {
return stateObj.state === 'configure';
},
}
fieldChanged: function (ev) {
fieldChanged(ev) {
var el = ev.target;
this.fieldInput[el.name] = el.value;
},
}
submitClicked: function () {
submitClicked() {
var data = {
configure_id: this.stateObj.attributes.configure_id,
fields: this.fieldInput,
@ -148,6 +150,8 @@ Polymer({
this.isConfiguring = false;
}.bind(this)
);
},
});
}
}
customElements.define(MoreInfoConfigurator.is, MoreInfoConfigurator);
</script>

39
src/more-infos/more-info-content.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='more-info-alarm_control_panel.html'>
<link rel='import' href='more-info-automation.html'>
@ -20,25 +20,28 @@
<link rel='import' href='more-info-input_datetime.html'>
<script>
Polymer({
is: 'more-info-content',
class MoreInfoContent extends Polymer.Element {
static get is() { return 'more-info-content'; }
properties: {
hass: {
type: Object,
},
static get properties() {
return {
hass: {
type: Object,
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
};
}
created: function () {
constructor() {
super();
this.style.display = 'block';
},
}
stateObjChanged: function (stateObj) {
stateObjChanged(stateObj) {
var rootEl;
if (!stateObj) {
// If root has lastChild, set 'isVisible' attribute of that child to false.
@ -52,6 +55,8 @@ Polymer({
{ hass: this.hass, stateObj: stateObj, isVisible: true }
);
}
},
});
}
}
customElements.define(MoreInfoContent.is, MoreInfoContent);
</script>

112
src/more-infos/more-info-cover.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
@ -56,62 +56,66 @@
</dom-module>
<script>
Polymer({
is: 'more-info-cover',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
entityObj: {
type: Object,
computed: 'computeEntityObj(hass, stateObj)',
},
coverPositionSliderValue: {
type: Number,
},
coverTiltPositionSliderValue: {
type: Number,
},
},
computeEntityObj: function (hass, stateObj) {
return new window.CoverEntity(hass, stateObj);
},
stateObjChanged: function (newVal) {
this.coverPositionSliderValue = newVal.attributes.current_position;
this.coverTiltPositionSliderValue = newVal.attributes.current_tilt_position;
},
featureClassNames: {
{
const FEATURE_CLASS_NAMES = {
128: 'has-set_tilt_position',
},
};
class MoreInfoCover extends Polymer.Element {
static get is() { return 'more-info-cover'; }
computeClassNames: function (stateObj) {
var classes = [
window.hassUtil.attributeClassNames(stateObj, ['current_position', 'current_tilt_position']),
window.hassUtil.featureClassNames(stateObj, this.featureClassNames),
];
return classes.join(' ');
},
static get properties() {
return {
hass: {
type: Object,
},
coverPositionSliderChanged: function (ev) {
this.entityObj.setCoverPosition(ev.target.value);
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
coverTiltPositionSliderChanged: function (ev) {
this.entityObj.setCoverTiltPosition(ev.target.value);
},
entityObj: {
type: Object,
computed: 'computeEntityObj(hass, stateObj)',
},
});
coverPositionSliderValue: {
type: Number,
},
coverTiltPositionSliderValue: {
type: Number,
},
};
}
computeEntityObj(hass, stateObj) {
return new window.CoverEntity(hass, stateObj);
}
stateObjChanged(newVal) {
this.coverPositionSliderValue = newVal.attributes.current_position;
this.coverTiltPositionSliderValue = newVal.attributes.current_tilt_position;
}
computeClassNames(stateObj) {
var classes = [
window.hassUtil.attributeClassNames(stateObj, ['current_position', 'current_tilt_position']),
window.hassUtil.featureClassNames(stateObj, FEATURE_CLASS_NAMES),
];
return classes.join(' ');
}
coverPositionSliderChanged(ev) {
this.entityObj.setCoverPosition(ev.target.value);
}
coverTiltPositionSliderChanged(ev) {
this.entityObj.setCoverTiltPosition(ev.target.value);
}
}
customElements.define(MoreInfoCover.is, MoreInfoCover);
}
</script>

22
src/more-infos/more-info-default.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../components/ha-attributes.html">
@ -9,13 +9,17 @@
</dom-module>
<script>
Polymer({
is: 'more-info-default',
class MoreInfoDefault extends Polymer.Element {
static get is() { return 'more-info-default'; }
properties: {
stateObj: {
type: Object,
},
},
});
static get properties() {
return {
stateObj: {
type: Object,
},
};
}
}
customElements.define(MoreInfoDefault.is, MoreInfoDefault);
</script>

Some files were not shown because too many files have changed in this diff Show More