Upgrade core config panels to ES6 classes (#438)

This commit is contained in:
Adam Mills 2017-09-30 16:15:43 -04:00 committed by Paulus Schoutsen
parent 91c8b4eb23
commit d1a194a147
6 changed files with 202 additions and 173 deletions

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-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-header/app-header.html">
<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html"> <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@ -74,33 +74,38 @@
</dom-module> </dom-module>
<script> <script>
Polymer({ class HaConfigCore extends Polymer.Element {
is: 'ha-config-core',
properties: { static get is() { return 'ha-config-core'; }
static get properties() {
return {
hass: Object, hass: Object,
isWide: Boolean, isWide: Boolean,
}, };
}
computeClasses: function (isWide) { computeClasses(isWide) {
return isWide ? 'content' : 'content narrow'; return isWide ? 'content' : 'content narrow';
}, }
computeIsHassbianLoaded: function (hass) { computeIsHassbianLoaded(hass) {
return window.hassUtil.isComponentLoaded(hass, 'config.hassbian'); return window.hassUtil.isComponentLoaded(hass, 'config.hassbian');
}, }
computeIsZwaveLoaded: function (hass) { computeIsZwaveLoaded(hass) {
return window.hassUtil.isComponentLoaded(hass, 'config.zwave'); return window.hassUtil.isComponentLoaded(hass, 'config.zwave');
}, }
computeIsThemesLoaded: function (hass) { computeIsThemesLoaded(hass) {
return hass.themes && hass.themes.themes && return hass.themes && hass.themes.themes &&
Object.keys(hass.themes.themes).length; Object.keys(hass.themes.themes).length;
}, }
_backTapped: function () { _backTapped() {
history.back(); history.back();
}, }
}); }
customElements.define(HaConfigCore.is, HaConfigCore);
</script> </script>

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-button/paper-button.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input.html"> <link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html"> <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
@ -129,10 +129,12 @@
</dom-module> </dom-module>
<script> <script>
Polymer({ class HaConfigSectionCore extends Polymer.Element {
is: 'ha-config-section-core',
properties: { static get is() { return 'ha-config-section-core'; }
static get properties() {
return {
hass: { hass: {
type: Object, type: Object,
}, },
@ -156,21 +158,22 @@ Polymer({
type: String, type: String,
value: '', value: '',
}, },
}, };
}
groupLoaded: function (hass) { groupLoaded(hass) {
return window.hassUtil.isComponentLoaded(hass, 'group'); return window.hassUtil.isComponentLoaded(hass, 'group');
}, }
automationLoaded: function (hass) { automationLoaded(hass) {
return window.hassUtil.isComponentLoaded(hass, 'automation'); return window.hassUtil.isComponentLoaded(hass, 'automation');
}, }
scriptLoaded: function (hass) { scriptLoaded(hass) {
return window.hassUtil.isComponentLoaded(hass, 'script'); return window.hassUtil.isComponentLoaded(hass, 'script');
}, }
validateConfig: function () { validateConfig() {
this.validating = true; this.validating = true;
this.validateLog = ''; this.validateLog = '';
this.validateResult = ''; this.validateResult = '';
@ -189,5 +192,7 @@ Polymer({
} }
}); });
} }
}); }
customElements.define(HaConfigSectionCore.is, HaConfigSectionCore);
</script> </script>

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-button/paper-button.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html"> <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-checkbox/paper-checkbox.html"> <link rel="import" href="../../../bower_components/paper-checkbox/paper-checkbox.html">
@ -35,10 +35,12 @@
</dom-module> </dom-module>
<script> <script>
Polymer({ class HaConfigSectionGroup extends Polymer.Element {
is: 'ha-config-section-group',
properties: { static get is() { return 'ha-config-section-group'; }
static get properties() {
return {
hass: { hass: {
type: Object, type: Object,
}, },
@ -63,9 +65,10 @@ Polymer({
}, },
} }
} }
}, };
}
computeEntities: function (hass) { computeEntities(hass) {
return Object.keys(hass.states) return Object.keys(hass.states)
.map(function (key) { return hass.states[key]; }) .map(function (key) { return hass.states[key]; })
.filter(function (entity) { .filter(function (entity) {
@ -73,6 +76,8 @@ Polymer({
!entity.attributes.auto); !entity.attributes.auto);
}) })
.sort(window.hassUtil.sortByName); .sort(window.hassUtil.sortByName);
}, }
}); }
customElements.define(HaConfigSectionGroup.is, HaConfigSectionGroup);
</script> </script>

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-media-query/iron-media-query.html'> <link rel='import' href='../../../bower_components/iron-media-query/iron-media-query.html'>
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.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-input/paper-input.html">
@ -65,10 +65,12 @@
</dom-module> </dom-module>
<script> <script>
Polymer({ class HaConfigSectionHassbian extends Polymer.Element {
is: 'ha-config-section-hassbian',
properties: { static get is() { return 'ha-config-section-hassbian'; }
static get properties() {
return {
hass: { hass: {
type: Object, type: Object,
}, },
@ -81,9 +83,10 @@ Polymer({
type: Object, type: Object,
value: null, value: null,
}, },
}, };
}
updateStatus: function () { updateStatus() {
// TODO tapping install while something is installing triggers a second // TODO tapping install while something is installing triggers a second
// update loop to start. // update loop to start.
this.hass.callApi('GET', 'config/hassbian/suites').then(function (suites) { this.hass.callApi('GET', 'config/hassbian/suites').then(function (suites) {
@ -102,14 +105,14 @@ Polymer({
this.async(this.updateStatus, 5000); this.async(this.updateStatus, 5000);
} }
}.bind(this)); }.bind(this));
}, }
attached: function () { attached() {
this.updateStatus = this.updateStatus.bind(this); this.updateStatus = this.updateStatus.bind(this);
this.updateStatus(); this.updateStatus();
}, }
computeSuiteKeys: function (suiteStatus) { computeSuiteKeys(suiteStatus) {
// Prioritize installing packages // Prioritize installing packages
return Object.keys(suiteStatus).sort(function (keyA, keyB) { return Object.keys(suiteStatus).sort(function (keyA, keyB) {
var installingA = suiteStatus[keyA].state === 'installing'; var installingA = suiteStatus[keyA].state === 'installing';
@ -131,37 +134,39 @@ Polymer({
} }
return 0; return 0;
}); });
}, }
computeSuiteDescription: function (suiteStatus, suiteKey) { computeSuiteDescription(suiteStatus, suiteKey) {
return suiteStatus[suiteKey].description; return suiteStatus[suiteKey].description;
}, }
computeTitle: function (suiteKey) { computeTitle(suiteKey) {
return suiteKey.substr(0, 1).toUpperCase() + suiteKey.substr(1); return suiteKey.substr(0, 1).toUpperCase() + suiteKey.substr(1);
}, }
computeSuiteStatus: function (suiteStatus, suiteKey) { computeSuiteStatus(suiteStatus, suiteKey) {
var state = suiteStatus[suiteKey].state.replace(/_/, ' '); var state = suiteStatus[suiteKey].state.replace(/_/, ' ');
return state.substr(0, 1).toUpperCase() + state.substr(1); return state.substr(0, 1).toUpperCase() + state.substr(1);
}, }
computeShowStatus: function (suiteStatus, suiteKey) { computeShowStatus(suiteStatus, suiteKey) {
var state = suiteStatus[suiteKey].state; var state = suiteStatus[suiteKey].state;
return state !== 'installing' && state !== 'not_installed'; return state !== 'installing' && state !== 'not_installed';
}, }
computeShowInstall: function (suiteStatus, suiteKey) { computeShowInstall(suiteStatus, suiteKey) {
return suiteStatus[suiteKey].state === 'not_installed'; return suiteStatus[suiteKey].state === 'not_installed';
}, }
suiteMoreInfoTapped: function () { suiteMoreInfoTapped() {
// console.log('learn more', ev.model.item); // console.log('learn more', ev.model.item);
}, }
suiteActionTapped: function () { suiteActionTapped() {
// TODO install tapped suite // TODO install tapped suite
this.hass.callApi('POST', 'config/hassbian/suites/openzwave/install').then(this.updateStatus); this.hass.callApi('POST', 'config/hassbian/suites/openzwave/install').then(this.updateStatus);
}, }
}); }
customElements.define(HaConfigSectionHassbian.is, HaConfigSectionHassbian);
</script> </script>

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-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> <link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-listbox/paper-listbox.html'> <link rel='import' href='../../../bower_components/paper-listbox/paper-listbox.html'>
@ -33,10 +33,12 @@
</dom-module> </dom-module>
<script> <script>
Polymer({ class HaConfigSectionThemes extends window.hassMixins.EventsMixin(Polymer.Element) {
is: 'ha-config-section-themes',
properties: { static get is() { return 'ha-config-section-themes'; }
static get properties() {
return {
hass: { hass: {
type: Object, type: Object,
}, },
@ -53,26 +55,30 @@ Polymer({
selectedTheme: { selectedTheme: {
type: Number, type: Number,
}, },
}, };
}
ready: function () { static get observers() {
return [
'selectionChanged(hass, selectedTheme)',
];
}
ready() {
super.ready();
if (this.hass.selectedTheme && this.themes.indexOf(this.hass.selectedTheme) > 0) { if (this.hass.selectedTheme && this.themes.indexOf(this.hass.selectedTheme) > 0) {
this.selectedTheme = this.themes.indexOf(this.hass.selectedTheme); this.selectedTheme = this.themes.indexOf(this.hass.selectedTheme);
} else if (!this.hass.selectedTheme) { } else if (!this.hass.selectedTheme) {
this.selectedTheme = 0; this.selectedTheme = 0;
} }
}, }
observers: [ computeThemes(hass) {
'selectionChanged(hass, selectedTheme)',
],
computeThemes: function (hass) {
if (!hass) return []; if (!hass) return [];
return ['Backend-selected', 'default'].concat(Object.keys(hass.themes.themes).sort()); return ['Backend-selected', 'default'].concat(Object.keys(hass.themes.themes).sort());
}, }
selectionChanged: function (hass, selection) { selectionChanged(hass, selection) {
if (selection > 0 && selection < this.themes.length) { if (selection > 0 && selection < this.themes.length) {
if (hass.selectedTheme !== this.themes[selection]) { if (hass.selectedTheme !== this.themes[selection]) {
this.fire('settheme', this.themes[selection]); this.fire('settheme', this.themes[selection]);
@ -81,5 +87,7 @@ Polymer({
this.fire('settheme', ''); this.fire('settheme', '');
} }
} }
}); }
customElements.define(HaConfigSectionThemes.is, HaConfigSectionThemes);
</script> </script>

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/iron-icon/iron-icon.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html"> <link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
@ -131,10 +131,12 @@
</dom-module> </dom-module>
<script> <script>
Polymer({ class HaFormGroup extends Polymer.Element {
is: 'ha-form-group',
properties: { static get is() { return 'ha-form-group'; }
static get properties() {
return {
hass: { hass: {
type: Object, type: Object,
}, },
@ -155,17 +157,18 @@ Polymer({
entityChildren: { entityChildren: {
type: Object, type: Object,
}, },
}, };
}
handleRowChosen: function (ev) { handleRowChosen(ev) {
// Polymer element and sortablejs both fire the same events, filter one out // Polymer element and sortablejs both fire the same events, filter one out
if (!ev.detail || !window.navigator.vibrate) return; if (!ev.detail || !window.navigator.vibrate) return;
// Tell the user that moving his finger now will start dragging. // Tell the user that moving his finger now will start dragging.
window.navigator.vibrate(50); window.navigator.vibrate(50);
}, }
loadEntity: function (entity) { loadEntity(entity) {
var states = this.hass.states; var states = this.hass.states;
this.entity = entity; this.entity = entity;
this.entityName = entity.attributes.friendly_name || ''; this.entityName = entity.attributes.friendly_name || '';
@ -175,9 +178,9 @@ Polymer({
return states[ent] || { state: false, entity_id: ent, attributes: {} }; return states[ent] || { state: false, entity_id: ent, attributes: {} };
}); });
return Promise.resolve(); return Promise.resolve();
}, }
saveEntity: function () { saveEntity() {
var data = { var data = {
name: this.entityName, name: this.entityName,
view: this.entityType === 'view', view: this.entityType === 'view',
@ -186,10 +189,8 @@ Polymer({
var objectId = this.entity.entity_id.split('.')[1]; var objectId = this.entity.entity_id.split('.')[1];
return this.hass.callApi('POST', 'config/group/config/' + objectId, data); return this.hass.callApi('POST', 'config/group/config/' + objectId, data);
}, }
}
// deleteEntity: function () { customElements.define(HaFormGroup.is, HaFormGroup);
// return new Promise.resolve();
// }
});
</script> </script>