diff --git a/src/dialogs/more-info-dialog.html b/src/dialogs/more-info-dialog.html index d61fc39c52..54b5a5efaf 100644 --- a/src/dialogs/more-info-dialog.html +++ b/src/dialogs/more-info-dialog.html @@ -121,9 +121,11 @@ class MoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) { _stateObjChanged(newVal, oldVal) { if (!newVal) { - this._dialogOpen = false; - this._page = null; - this._registryInfo = null; + this.setProperties({ + _dialogOpen: false, + _page: null, + _registryInfo: null, + }); return; } diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.html b/src/dialogs/more-info/controls/more-info-alarm_control_panel.html index 38bf0443ee..acad36ffb1 100644 --- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.html +++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.html @@ -16,7 +16,7 @@ value='{{enteredCode}}' pattern='[[codeFormat]]' type='password' - hidden$='[[!codeInputVisible]]' + hidden$='[[!codeFormat]]' disabled='[[!codeInputEnabled]]' > @@ -68,10 +68,6 @@ class MoreInfoAlarmControlPanel extends window.hassMixins.EventsMixin(Polymer.El type: Boolean, value: false, }, - codeInputVisible: { - type: Boolean, - value: false, - }, codeInputEnabled: { type: Boolean, value: false, @@ -97,25 +93,20 @@ class MoreInfoAlarmControlPanel extends window.hassMixins.EventsMixin(Polymer.El stateObjChanged(newVal, oldVal) { if (newVal) { - this.codeFormat = newVal.attributes.code_format; - this.codeInputVisible = this.codeFormat !== null; - this.codeInputEnabled = ( - newVal.state === 'armed_home' || - newVal.state === 'armed_away' || - newVal.state === 'armed_night' || - newVal.state === 'armed_custom_bypass' || - newVal.state === 'disarmed' || - newVal.state === 'pending' || - newVal.state === 'triggered'); - this.disarmButtonVisible = ( + const props = { + codeFormat: newVal.attributes.code_format, + armHomeButtonVisible: newVal.state === 'disarmed', + armAwayButtonVisible: newVal.state === 'disarmed', + }; + props.disarmButtonVisible = ( newVal.state === 'armed_home' || newVal.state === 'armed_away' || newVal.state === 'armed_night' || newVal.state === 'armed_custom_bypass' || newVal.state === 'pending' || newVal.state === 'triggered'); - this.armHomeButtonVisible = newVal.state === 'disarmed'; - this.armAwayButtonVisible = newVal.state === 'disarmed'; + props.codeInputEnabled = props.disarmButtonVisible || newVal.state === 'disarmed'; + this.setProperties(props); } if (oldVal) { setTimeout(() => { diff --git a/src/dialogs/more-info/controls/more-info-climate.html b/src/dialogs/more-info/controls/more-info-climate.html index db611e8fe6..3f483416ec 100644 --- a/src/dialogs/more-info/controls/more-info-climate.html +++ b/src/dialogs/more-info/controls/more-info-climate.html @@ -287,9 +287,13 @@ class MoreInfoClimate extends window.hassMixins.EventsMixin(Polymer.Element) { } stateObjChanged(newVal, oldVal) { - this.awayToggleChecked = newVal.attributes.away_mode === 'on'; - this.auxToggleChecked = newVal.attributes.aux_heat === 'on'; - this.onToggleChecked = newVal.state !== 'off'; + if (newVal) { + this.setProperties({ + awayToggleChecked: newVal.attributes.away_mode === 'on', + auxToggleChecked: newVal.attributes.aux_heat === 'on', + onToggleChecked: newVal.state !== 'off', + }); + } if (oldVal) { this._debouncer = Polymer.Debouncer.debounce( diff --git a/src/dialogs/more-info/controls/more-info-cover.html b/src/dialogs/more-info/controls/more-info-cover.html index 27353dfd98..2c3cb2a11a 100644 --- a/src/dialogs/more-info/controls/more-info-cover.html +++ b/src/dialogs/more-info/controls/more-info-cover.html @@ -95,8 +95,12 @@ } stateObjChanged(newVal) { - this.coverPositionSliderValue = newVal.attributes.current_position; - this.coverTiltPositionSliderValue = newVal.attributes.current_tilt_position; + if (newVal) { + this.setProperties({ + coverPositionSliderValue: newVal.attributes.current_position, + coverTiltPositionSliderValue: newVal.attributes.current_tilt_position, + }); + } } computeClassNames(stateObj) { diff --git a/src/dialogs/more-info/controls/more-info-fan.html b/src/dialogs/more-info/controls/more-info-fan.html index 7b67c78fff..a391d1367d 100644 --- a/src/dialogs/more-info/controls/more-info-fan.html +++ b/src/dialogs/more-info/controls/more-info-fan.html @@ -104,12 +104,12 @@ class MoreInfoFan extends window.hassMixins.EventsMixin(Polymer.Element) { } stateObjChanged(newVal, oldVal) { - this.oscillationToggleChecked = newVal.attributes.oscillating; - - if (newVal.attributes.speed_list) { - this.speedIndex = newVal.attributes.speed_list.indexOf(newVal.attributes.speed); - } else { - this.speedIndex = -1; + if (newVal) { + this.setProperties({ + oscillationToggleChecked: newVal.attributes.oscillating, + speedIndex: newVal.attributes.speed_list ? + newVal.attributes.speed_list.indexOf(newVal.attributes.speed) : -1, + }); } if (oldVal) { diff --git a/src/dialogs/more-info/controls/more-info-light.html b/src/dialogs/more-info/controls/more-info-light.html index 2632d864aa..3e0aba11cc 100644 --- a/src/dialogs/more-info/controls/more-info-light.html +++ b/src/dialogs/more-info/controls/more-info-light.html @@ -160,22 +160,26 @@ } stateObjChanged(newVal, oldVal) { + const props = { + brightnessSliderValue: 0 + }; + if (newVal && newVal.state === 'on') { - this.brightnessSliderValue = newVal.attributes.brightness; - this.ctSliderValue = newVal.attributes.color_temp; - this.wvSliderValue = newVal.attributes.white_value; + props.brightnessSliderValue = newVal.attributes.brightness; + props.ctSliderValue = newVal.attributes.color_temp; + props.wvSliderValue = newVal.attributes.white_value; if (newVal.attributes.rgb_color) { - this.colorPickerColor = this.rgbArrToObj(newVal.attributes.rgb_color); + props.colorPickerColor = this.rgbArrToObj(newVal.attributes.rgb_color); } if (newVal.attributes.effect_list) { - this.effectIndex = newVal.attributes.effect_list.indexOf(newVal.attributes.effect); + props.effectIndex = newVal.attributes.effect_list.indexOf(newVal.attributes.effect); } else { - this.effectIndex = -1; + props.effectIndex = -1; } - } else { - this.brightnessSliderValue = 0; } + this.setProperties(props); + if (oldVal) { setTimeout(() => { this.fire('iron-resize'); diff --git a/src/dialogs/more-info/controls/more-info-media_player.html b/src/dialogs/more-info/controls/more-info-media_player.html index ba93143f00..8d903578ed 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.html +++ b/src/dialogs/more-info/controls/more-info-media_player.html @@ -245,27 +245,29 @@ stateObjChanged(newVal, oldVal) { if (newVal) { - this.isOff = newVal.state === 'off'; - this.isPlaying = newVal.state === 'playing'; - this.hasMediaControl = HAS_MEDIA_STATES.indexOf(newVal.state) !== -1; - this.volumeSliderValue = newVal.attributes.volume_level * 100; - this.isMuted = newVal.attributes.is_volume_muted; - this.source = newVal.attributes.source; - this.supportsPause = (newVal.attributes.supported_features & 1) !== 0; - this.supportsVolumeSet = (newVal.attributes.supported_features & 4) !== 0; - this.supportsVolumeMute = (newVal.attributes.supported_features & 8) !== 0; - this.supportsPreviousTrack = (newVal.attributes.supported_features & 16) !== 0; - this.supportsNextTrack = (newVal.attributes.supported_features & 32) !== 0; - this.supportsTurnOn = (newVal.attributes.supported_features & 128) !== 0; - this.supportsTurnOff = (newVal.attributes.supported_features & 256) !== 0; - this.supportsPlayMedia = (newVal.attributes.supported_features & 512) !== 0; - this.supportsVolumeButtons = (newVal.attributes.supported_features & 1024) !== 0; - this.supportsSelectSource = (newVal.attributes.supported_features & 2048) !== 0; - this.supportsPlay = (newVal.attributes.supported_features & 16384) !== 0; - + const props = { + isOff: newVal.state === 'off', + isPlaying: newVal.state === 'playing', + hasMediaControl: HAS_MEDIA_STATES.indexOf(newVal.state) !== -1, + volumeSliderValue: newVal.attributes.volume_level * 100, + isMuted: newVal.attributes.is_volume_muted, + source: newVal.attributes.source, + supportsPause: (newVal.attributes.supported_features & 1) !== 0, + supportsVolumeSet: (newVal.attributes.supported_features & 4) !== 0, + supportsVolumeMute: (newVal.attributes.supported_features & 8) !== 0, + supportsPreviousTrack: (newVal.attributes.supported_features & 16) !== 0, + supportsNextTrack: (newVal.attributes.supported_features & 32) !== 0, + supportsTurnOn: (newVal.attributes.supported_features & 128) !== 0, + supportsTurnOff: (newVal.attributes.supported_features & 256) !== 0, + supportsPlayMedia: (newVal.attributes.supported_features & 512) !== 0, + supportsVolumeButtons: (newVal.attributes.supported_features & 1024) !== 0, + supportsSelectSource: (newVal.attributes.supported_features & 2048) !== 0, + supportsPlay: (newVal.attributes.supported_features & 16384) !== 0, + }; if (newVal.attributes.source_list !== undefined) { - this.sourceIndex = newVal.attributes.source_list.indexOf(this.source); + props.sourceIndex = newVal.attributes.source_list.indexOf(this.source); } + this.setProperties(props); } if (oldVal) { diff --git a/src/layouts/partial-cards.html b/src/layouts/partial-cards.html index 6542125a9d..9eadcb8dba 100644 --- a/src/layouts/partial-cards.html +++ b/src/layouts/partial-cards.html @@ -138,7 +138,8 @@ const DEFAULT_VIEW_ENTITY_ID = 'group.default_view'; const ALWAYS_SHOW_DOMAIN = ['persistent_notification', 'configurator']; - class PartialCards extends window.hassMixins.EventsMixin(Polymer.Element) { + // eslint-disable-next-line + class PartialCards extends window.hassMixins.EventsMixin(window.hassMixins.NavigateMixin(Polymer.Element)) { static get is() { return 'partial-cards'; } static get properties() { @@ -210,27 +211,24 @@ }; } - constructor() { - super(); + ready() { 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)); + this.mqls = [300, 600, 900, 1200].map(width => matchMedia(`(min-width: ${width}px)`)); + super.ready(); + } + + connectedCallback() { + super.connectedCallback(); + this.mqls.forEach(mql => mql.addListener(this.handleWindowChange)); } disconnectedCallback() { super.disconnectedCallback(); - this.mqls.forEach((mql) => { - mql.removeListener(this.handleWindowChange); - }); + this.mqls.forEach(mql => mql.removeListener(this.handleWindowChange)); } handleWindowChange() { - var matchColumns = this.mqls.reduce(function (cols, mql) { - return cols + mql.matches; - }, 0); + const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0); // Do -1 column if the menu is docked and open this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu)); } @@ -279,16 +277,14 @@ } handleViewSelected(ev) { - var view = ev.detail.item.getAttribute('data-entity') || null; - var current = this.currentView; + const view = ev.detail.item.getAttribute('data-entity') || null; - if (view !== current) { - var path = '/states'; + if (view !== this.currentView) { + let path = '/states'; if (view) { path += '/' + view; } - history.pushState(null, null, path); - this.fire('location-changed'); + this.navigate(path); } }