mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 01:06:35 +00:00
Prefer set properties (#968)
* Use set properties * Address comments * Update partial-cards.html
This commit is contained in:
parent
19705a9c2b
commit
d188821765
@ -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;
|
||||
}
|
||||
|
||||
|
@ -16,7 +16,7 @@
|
||||
value='{{enteredCode}}'
|
||||
pattern='[[codeFormat]]'
|
||||
type='password'
|
||||
hidden$='[[!codeInputVisible]]'
|
||||
hidden$='[[!codeFormat]]'
|
||||
disabled='[[!codeInputEnabled]]'
|
||||
></paper-input>
|
||||
</div>
|
||||
@ -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(() => {
|
||||
|
@ -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(
|
||||
|
@ -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) {
|
||||
|
@ -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) {
|
||||
|
@ -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');
|
||||
|
@ -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) {
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user