jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 19:09:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prettier 💎 (#1737)

Browse Source 
* Add prettier

* Apply Prettier
This commit is contained in:
Paulus Schoutsen
2018-10-11 12:22:11 +02:00
committed by GitHub
parent 3b425c3e14
commit 34bfc12647
472 changed files with 12402 additions and 9875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
src/components/entity/ha-chart-base.js
View File

@@ -1,20 +1,21 @@
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
import { timeOut } from '@polymer/polymer/lib/utils/async.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior.js";
import "@polymer/paper-icon-button/paper-icon-button.js";
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
import { Debouncer } from "@polymer/polymer/lib/utils/debounce.js";
import { timeOut } from "@polymer/polymer/lib/utils/async.js";
import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class.js";
import formatTime from '../../common/datetime/format_time.js';
import formatTime from "../../common/datetime/format_time.js";
// eslint-disable-next-line no-unused-vars
/* global Chart moment Color */
let scriptsLoaded = null;
class HaChartBase extends mixinBehaviors([
IronResizableBehavior
], PolymerElement) {
class HaChartBase extends mixinBehaviors(
[IronResizableBehavior],
PolymerElement
) {
static get template() {
return html`
<style>
@@ -154,19 +155,19 @@ class HaChartBase extends mixinBehaviors([
tooltip: {
type: Object,
value: () => ({
opacity: '0',
left: '0',
top: '0',
xPadding: '5',
yPadding: '3'
})
opacity: "0",
left: "0",
top: "0",
xPadding: "5",
yPadding: "3",
}),
},
unit: Object,
};
}
static get observers() {
return ['onPropsChange(data)'];
return ["onPropsChange(data)"];
}
connectedCallback() {
@@ -185,7 +186,7 @@ class HaChartBase extends mixinBehaviors([
);
};
if (typeof ResizeObserver === 'function') {
if (typeof ResizeObserver === "function") {
this.resizeObserver = new ResizeObserver((entries) => {
entries.forEach(() => {
this._resizeListener();
@@ -193,11 +194,11 @@ class HaChartBase extends mixinBehaviors([
});
this.resizeObserver.observe(this.$.chartTarget);
} else {
this.addEventListener('iron-resize', this._resizeListener);
this.addEventListener("iron-resize", this._resizeListener);
}
if (scriptsLoaded === null) {
scriptsLoaded = import(/* webpackChunkName: "load_chart" */ '../../resources/ha-chart-scripts.js');
scriptsLoaded = import(/* webpackChunkName: "load_chart" */ "../../resources/ha-chart-scripts.js");
}
scriptsLoaded.then((ChartModule) => {
this.ChartClass = ChartModule.default;
@@ -212,7 +213,7 @@ class HaChartBase extends mixinBehaviors([
this.resizeObserver.unobserve(this.$.chartTarget);
}
this.removeEventListener('iron-resize', this._resizeListener);
this.removeEventListener("iron-resize", this._resizeListener);
if (this._resizeTimer !== undefined) {
clearInterval(this._resizeTimer);
@@ -230,31 +231,34 @@ class HaChartBase extends mixinBehaviors([
_customTooltips(tooltip) {
// Hide if no tooltip
if (tooltip.opacity === 0) {
this.set(['tooltip', 'opacity'], 0);
this.set(["tooltip", "opacity"], 0);
return;
}
// Set caret Position
if (tooltip.yAlign) {
this.set(['tooltip', 'yAlign'], tooltip.yAlign);
this.set(["tooltip", "yAlign"], tooltip.yAlign);
} else {
this.set(['tooltip', 'yAlign'], 'no-transform');
this.set(["tooltip", "yAlign"], "no-transform");
}
const title = tooltip.title ? tooltip.title[0] || '' : '';
this.set(['tooltip', 'title'], title);
const title = tooltip.title ? tooltip.title[0] || "" : "";
this.set(["tooltip", "title"], title);
const bodyLines = tooltip.body.map(n => n.lines);
const bodyLines = tooltip.body.map((n) => n.lines);
// Set Text
if (tooltip.body) {
this.set(['tooltip', 'lines'], bodyLines.map((body, i) => {
const colors = tooltip.labelColors[i];
return {
color: colors.borderColor,
bgColor: colors.backgroundColor,
text: body.join('\n'),
};
}));
this.set(
["tooltip", "lines"],
bodyLines.map((body, i) => {
const colors = tooltip.labelColors[i];
return {
color: colors.borderColor,
bgColor: colors.backgroundColor,
text: body.join("\n"),
};
})
);
}
const parentWidth = this.$.chartTarget.clientWidth;
let positionX = tooltip.caretX;
@@ -277,29 +281,40 @@ class HaChartBase extends mixinBehaviors([
event = event || window.event;
event.stopPropagation();
let target = event.target || event.srcElement;
while (target.nodeName !== 'LI') { // user clicked child, find parent LI
while (target.nodeName !== "LI") {
// user clicked child, find parent LI
target = target.parentElement;
}
const index = event.model.itemsIndex;
const meta = this._chart.getDatasetMeta(index);
meta.hidden = meta.hidden === null ? !this._chart.data.datasets[index].hidden : null;
this.set(['metas', index, 'hidden'], this._chart.isDatasetVisible(index) ? null : 'hidden');
meta.hidden =
meta.hidden === null ? !this._chart.data.datasets[index].hidden : null;
this.set(
["metas", index, "hidden"],
this._chart.isDatasetVisible(index) ? null : "hidden"
);
this._chart.update();
}
_drawLegend() {
const chart = this._chart;
// New data for old graph. Keep metadata.
const preserveVisibility = this._oldIdentifier && this.identifier === this._oldIdentifier;
const preserveVisibility =
this._oldIdentifier && this.identifier === this._oldIdentifier;
this._oldIdentifier = this.identifier;
this.set('metas', this._chart.data.datasets.map((x, i) => ({
label: x.label,
color: x.color,
bgColor: x.backgroundColor,
hidden: preserveVisibility && i < this.metas.length
? this.metas[i].hidden : !chart.isDatasetVisible(i),
})));
this.set(
"metas",
this._chart.data.datasets.map((x, i) => ({
label: x.label,
color: x.color,
bgColor: x.backgroundColor,
hidden:
preserveVisibility && i < this.metas.length
? this.metas[i].hidden
: !chart.isDatasetVisible(i),
}))
);
let updateNeeded = false;
if (preserveVisibility) {
for (let i = 0; i < this.metas.length; i++) {
@@ -329,12 +344,14 @@ class HaChartBase extends mixinBehaviors([
if ((!data.datasets || !data.datasets.length) && !this._chart) {
return;
}
if (this.data.type !== 'timeline' && data.datasets.length > 0) {
if (this.data.type !== "timeline" && data.datasets.length > 0) {
const cnt = data.datasets.length;
const colors = this.constructor.getColorList(cnt);
for (let loopI = 0; loopI < cnt; loopI++) {
data.datasets[loopI].borderColor = colors[loopI].rgbString();
data.datasets[loopI].backgroundColor = colors[loopI].alpha(0.6).rgbaString();
data.datasets[loopI].backgroundColor = colors[loopI]
.alpha(0.6)
.rgbaString();
}
}
@@ -353,9 +370,7 @@ class HaChartBase extends mixinBehaviors([
return;
}
this._customTooltips({ opacity: 0 });
const plugins = [
{ afterRender: () => this._setRendered(true) }
];
const plugins = [{ afterRender: () => this._setRendered(true) }];
let options = {
responsive: true,
maintainAspectRatio: false,
@@ -381,12 +396,12 @@ class HaChartBase extends mixinBehaviors([
},
ticks: {
fontFamily: "'Roboto', 'sans-serif'",
}
},
};
options = Chart.helpers.merge(options, this.data.options);
options.scales.xAxes[0].ticks.callback = this._formatTickValue;
if (this.data.type === 'timeline') {
this.set('isTimeline', true);
if (this.data.type === "timeline") {
this.set("isTimeline", true);
if (this.data.colors !== undefined) {
this._colorFunc = this.constructor.getColorGenerator(
this.data.colors.staticColors,
@@ -408,9 +423,9 @@ class HaChartBase extends mixinBehaviors([
options.scales.yAxes[0].gridLines = { display: false };
}
}
this.$.chartTarget.style.height = '50px';
this.$.chartTarget.style.height = "50px";
} else {
this.$.chartTarget.style.height = '160px';
this.$.chartTarget.style.height = "160px";
}
const chartData = {
type: this.data.type,
@@ -461,18 +476,18 @@ class HaChartBase extends mixinBehaviors([
const areaBot = this._chart.chartArea.bottom;
const height1 = this._chart.canvas.clientHeight;
if (areaBot > 0) {
this._axisHeight = (height1 - areaBot) + areaTop;
this._axisHeight = height1 - areaBot + areaTop;
}
if (!this._axisHeight) {
chartTarget.style.height = '50px';
chartTarget.style.height = "50px";
this._chart.resize();
this.resizeChart();
return;
}
if (this._axisHeight) {
const cnt = data.datasets.length;
const targetHeight = ((30 * cnt) + this._axisHeight) + 'px';
const targetHeight = 30 * cnt + this._axisHeight + "px";
if (chartTarget.style.height !== targetHeight) {
chartTarget.style.height = targetHeight;
}
@@ -503,18 +518,69 @@ class HaChartBase extends mixinBehaviors([
// should add for very common state string manually.
// Palette modified from http://google.github.io/palette.js/ mpn65, Apache 2.0
const palette = [
'ff0029', '66a61e', '377eb8', '984ea3', '00d2d5', 'ff7f00', 'af8d00',
'7f80cd', 'b3e900', 'c42e60', 'a65628', 'f781bf', '8dd3c7', 'bebada',
'fb8072', '80b1d3', 'fdb462', 'fccde5', 'bc80bd', 'ffed6f', 'c4eaff',
'cf8c00', '1b9e77', 'd95f02', 'e7298a', 'e6ab02', 'a6761d', '0097ff',
'00d067', 'f43600', '4ba93b', '5779bb', '927acc', '97ee3f', 'bf3947',
'9f5b00', 'f48758', '8caed6', 'f2b94f', 'eff26e', 'e43872', 'd9b100',
'9d7a00', '698cff', 'd9d9d9', '00d27e', 'd06800', '009f82', 'c49200',
'cbe8ff', 'fecddf', 'c27eb6', '8cd2ce', 'c4b8d9', 'f883b0', 'a49100',
'f48800', '27d0df', 'a04a9b'];
"ff0029",
"66a61e",
"377eb8",
"984ea3",
"00d2d5",
"ff7f00",
"af8d00",
"7f80cd",
"b3e900",
"c42e60",
"a65628",
"f781bf",
"8dd3c7",
"bebada",
"fb8072",
"80b1d3",
"fdb462",
"fccde5",
"bc80bd",
"ffed6f",
"c4eaff",
"cf8c00",
"1b9e77",
"d95f02",
"e7298a",
"e6ab02",
"a6761d",
"0097ff",
"00d067",
"f43600",
"4ba93b",
"5779bb",
"927acc",
"97ee3f",
"bf3947",
"9f5b00",
"f48758",
"8caed6",
"f2b94f",
"eff26e",
"e43872",
"d9b100",
"9d7a00",
"698cff",
"d9d9d9",
"00d27e",
"d06800",
"009f82",
"c49200",
"cbe8ff",
"fecddf",
"c27eb6",
"8cd2ce",
"c4b8d9",
"f883b0",
"a49100",
"f48800",
"27d0df",
"a04a9b",
];
function getColorIndex(idx) {
// Reuse the color if index too large.
return Color('#' + palette[idx % palette.length]);
return Color("#" + palette[idx % palette.length]);
}
const colorDict = {};
let colorIndex = 0;
@@ -549,4 +615,4 @@ class HaChartBase extends mixinBehaviors([
return getColor;
}
}
customElements.define('ha-chart-base', HaChartBase);
customElements.define("ha-chart-base", HaChartBase);

43
src/components/entity/ha-entity-picker.js
View File

@@ -1,17 +1,16 @@
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-input/paper-input.js';
import '@polymer/paper-item/paper-icon-item.js';
import '@polymer/paper-item/paper-item-body.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-combo-box/vaadin-combo-box-light.js';
import "@polymer/paper-icon-button/paper-icon-button.js";
import "@polymer/paper-input/paper-input.js";
import "@polymer/paper-item/paper-icon-item.js";
import "@polymer/paper-item/paper-item-body.js";
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
import "@vaadin/vaadin-combo-box/vaadin-combo-box-light.js";
import "./state-badge.js";
import './state-badge.js';
import computeStateName from '../../common/entity/compute_state_name.js';
import LocalizeMixin from '../../mixins/localize-mixin.js';
import EventsMixin from '../../mixins/events-mixin.js';
import computeStateName from "../../common/entity/compute_state_name.js";
import LocalizeMixin from "../../mixins/localize-mixin.js";
import EventsMixin from "../../mixins/events-mixin.js";
/*
* @appliesMixin LocalizeMixin
@@ -69,12 +68,12 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
},
hass: {
type: Object,
observer: '_hassChanged',
observer: "_hassChanged",
},
_hass: Object,
_states: {
type: Array,
computed: '_computeStates(_hass, domainFilter, entityFilter)',
computed: "_computeStates(_hass, domainFilter, entityFilter)",
},
autofocus: Boolean,
label: {
@@ -87,7 +86,7 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
opened: {
type: Boolean,
value: false,
observer: '_openedChanged',
observer: "_openedChanged",
},
domainFilter: {
type: String,
@@ -103,7 +102,7 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
_computeLabel(label, localize) {
return label === undefined
? localize('ui.components.entity.entity-picker.entity')
? localize("ui.components.entity.entity-picker.entity")
: label;
}
@@ -113,10 +112,12 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
let entityIds = Object.keys(hass.states);
if (domainFilter) {
entityIds = entityIds.filter(eid => eid.substr(0, eid.indexOf('.')) === domainFilter);
entityIds = entityIds.filter(
(eid) => eid.substr(0, eid.indexOf(".")) === domainFilter
);
}
let entities = entityIds.sort().map(key => hass.states[key]);
let entities = entityIds.sort().map((key) => hass.states[key]);
if (entityFilter) {
entities = entities.filter(entityFilter);
@@ -142,13 +143,13 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
}
_computeToggleIcon(opened) {
return opened ? 'hass:menu-up' : 'hass:menu-down';
return opened ? "hass:menu-up" : "hass:menu-down";
}
_fireChanged(ev) {
ev.stopPropagation();
this.fire('change');
this.fire("change");
}
}
customElements.define('ha-entity-picker', HaEntityPicker);
customElements.define("ha-entity-picker", HaEntityPicker);

50
src/components/entity/ha-entity-toggle.js
View File

@@ -1,10 +1,10 @@
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-toggle-button/paper-toggle-button.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import "@polymer/paper-icon-button/paper-icon-button.js";
import "@polymer/paper-toggle-button/paper-toggle-button.js";
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
import { STATES_OFF } from '../../common/const.js';
import computeStateDomain from '../../common/entity/compute_state_domain.js';
import { STATES_OFF } from "../../common/const.js";
import computeStateDomain from "../../common/entity/compute_state_domain.js";
class HaEntityToggle extends PolymerElement {
static get template() {
@@ -44,7 +44,7 @@ class HaEntityToggle extends PolymerElement {
hass: Object,
stateObj: {
type: Object,
observer: 'stateObjObserver'
observer: "stateObjObserver",
},
toggleChecked: {
@@ -54,15 +54,15 @@ class HaEntityToggle extends PolymerElement {
isOn: {
type: Boolean,
computed: 'computeIsOn(stateObj)',
observer: 'isOnChanged',
computed: "computeIsOn(stateObj)",
observer: "isOnChanged",
},
};
}
ready() {
super.ready();
this.addEventListener('click', ev => this.onTap(ev));
this.addEventListener("click", (ev) => this.onTap(ev));
this.forceStateChange();
}
@@ -120,25 +120,25 @@ class HaEntityToggle extends PolymerElement {
let serviceDomain;
let service;
if (stateDomain === 'lock') {
serviceDomain = 'lock';
service = turnOn ? 'unlock' : 'lock';
} else if (stateDomain === 'cover') {
serviceDomain = 'cover';
service = turnOn ? 'open_cover' : 'close_cover';
} else if (stateDomain === 'group') {
serviceDomain = 'homeassistant';
service = turnOn ? 'turn_on' : 'turn_off';
if (stateDomain === "lock") {
serviceDomain = "lock";
service = turnOn ? "unlock" : "lock";
} else if (stateDomain === "cover") {
serviceDomain = "cover";
service = turnOn ? "open_cover" : "close_cover";
} else if (stateDomain === "group") {
serviceDomain = "homeassistant";
service = turnOn ? "turn_on" : "turn_off";
} else {
serviceDomain = stateDomain;
service = turnOn ? 'turn_on' : 'turn_off';
service = turnOn ? "turn_on" : "turn_off";
}
const currentState = this.stateObj;
this.hass.callService(
serviceDomain, service,
{ entity_id: this.stateObj.entity_id }
)
this.hass
.callService(serviceDomain, service, {
entity_id: this.stateObj.entity_id,
})
.then(() => {
setTimeout(() => {
// If after 2 seconds we have not received a state update
@@ -151,4 +151,4 @@ class HaEntityToggle extends PolymerElement {
}
}
customElements.define('ha-entity-toggle', HaEntityToggle);
customElements.define("ha-entity-toggle", HaEntityToggle);

10
src/components/entity/ha-state-icon.js
View File

@@ -1,8 +1,8 @@
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
import '../ha-icon.js';
import stateIcon from '../../common/entity/state_icon.js';
import "../ha-icon.js";
import stateIcon from "../../common/entity/state_icon.js";
class HaStateIcon extends PolymerElement {
static get template() {
@@ -22,4 +22,4 @@ class HaStateIcon extends PolymerElement {
}
}
customElements.define('ha-state-icon', HaStateIcon);
customElements.define("ha-state-icon", HaStateIcon);

136
src/components/entity/ha-state-label-badge.js
View File

@@ -1,26 +1,24 @@
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
import "../ha-label-badge.js";
import '../ha-label-badge.js';
import computeStateDomain from "../../common/entity/compute_state_domain.js";
import computeStateName from "../../common/entity/compute_state_name.js";
import domainIcon from "../../common/entity/domain_icon.js";
import stateIcon from "../../common/entity/state_icon.js";
import timerTimeRemaining from "../../common/entity/timer_time_remaining.js";
import attributeClassNames from "../../common/entity/attribute_class_names.js";
import secondsToDuration from "../../common/datetime/seconds_to_duration.js";
import computeStateDomain from '../../common/entity/compute_state_domain.js';
import computeStateName from '../../common/entity/compute_state_name.js';
import domainIcon from '../../common/entity/domain_icon.js';
import stateIcon from '../../common/entity/state_icon.js';
import timerTimeRemaining from '../../common/entity/timer_time_remaining.js';
import attributeClassNames from '../../common/entity/attribute_class_names.js';
import secondsToDuration from '../../common/datetime/seconds_to_duration.js';
import EventsMixin from '../../mixins/events-mixin.js';
import LocalizeMixin from '../../mixins/localize-mixin.js';
import EventsMixin from "../../mixins/events-mixin.js";
import LocalizeMixin from "../../mixins/localize-mixin.js";
/*
* @appliesMixin LocalizeMixin
* @appliesMixin EventsMixin
*/
class HaStateLabelBadge extends
LocalizeMixin(EventsMixin(PolymerElement)) {
class HaStateLabelBadge extends LocalizeMixin(EventsMixin(PolymerElement)) {
static get template() {
return html`
<style>
@@ -70,12 +68,12 @@ class HaStateLabelBadge extends
hass: Object,
state: {
type: Object,
observer: 'stateChanged',
observer: "stateChanged",
},
_timerTimeRemaining: {
type: Number,
value: 0,
}
},
};
}
@@ -91,70 +89,75 @@ class HaStateLabelBadge extends
ready() {
super.ready();
this.addEventListener('click', ev => this.badgeTap(ev));
this.addEventListener("click", (ev) => this.badgeTap(ev));
}
badgeTap(ev) {
ev.stopPropagation();
this.fire('hass-more-info', { entityId: this.state.entity_id });
this.fire("hass-more-info", { entityId: this.state.entity_id });
}
computeClassNames(state) {
const classes = [computeStateDomain(state)];
classes.push(attributeClassNames(state, ['unit_of_measurement']));
return classes.join(' ');
classes.push(attributeClassNames(state, ["unit_of_measurement"]));
return classes.join(" ");
}
computeValue(localize, state) {
const domain = computeStateDomain(state);
switch (domain) {
case 'binary_sensor':
case 'device_tracker':
case 'updater':
case 'sun':
case 'alarm_control_panel':
case 'timer':
case "binary_sensor":
case "device_tracker":
case "updater":
case "sun":
case "alarm_control_panel":
case "timer":
return null;
case 'sensor':
case "sensor":
default:
return state.state === 'unknown' ? '-' : (
localize(`component.${domain}.state.${state.state}`)
|| state.state
);
return state.state === "unknown"
? "-"
: localize(`component.${domain}.state.${state.state}`) || state.state;
}
}
computeIcon(state) {
if (state.state === 'unavailable') {
if (state.state === "unavailable") {
return null;
}
const domain = computeStateDomain(state);
switch (domain) {
case 'alarm_control_panel':
if (state.state === 'pending') {
return 'hass:clock-fast';
} if (state.state === 'armed_away') {
return 'hass:nature';
} if (state.state === 'armed_home') {
return 'hass:home-variant';
} if (state.state === 'armed_night') {
return 'hass:weather-night';
} if (state.state === 'armed_custom_bypass') {
return 'hass:security-home';
} if (state.state === 'triggered') {
return 'hass:alert-circle';
case "alarm_control_panel":
if (state.state === "pending") {
return "hass:clock-fast";
}
if (state.state === "armed_away") {
return "hass:nature";
}
if (state.state === "armed_home") {
return "hass:home-variant";
}
if (state.state === "armed_night") {
return "hass:weather-night";
}
if (state.state === "armed_custom_bypass") {
return "hass:security-home";
}
if (state.state === "triggered") {
return "hass:alert-circle";
}
// state == 'disarmed'
return domainIcon(domain, state.state);
case 'binary_sensor':
case 'device_tracker':
case 'updater':
case "binary_sensor":
case "device_tracker":
case "updater":
return stateIcon(state);
case 'sun':
return state.state === 'above_horizon'
? domainIcon(domain) : 'hass:brightness-3';
case 'timer':
return state.state === 'active' ? 'hass:timer' : 'hass:timer-off';
case "sun":
return state.state === "above_horizon"
? domainIcon(domain)
: "hass:brightness-3";
case "timer":
return state.state === "active" ? "hass:timer" : "hass:timer-off";
default:
return null;
}
@@ -166,14 +169,20 @@ class HaStateLabelBadge extends
computeLabel(localize, state, _timerTimeRemaining) {
const domain = computeStateDomain(state);
if (state.state === 'unavailable'
|| ['device_tracker', 'alarm_control_panel'].includes(domain)) {
if (
state.state === "unavailable" ||
["device_tracker", "alarm_control_panel"].includes(domain)
) {
// Localize the state with a special state_badge namespace, which has variations of
// the state translations that are truncated to fit within the badge label. Translations
// are only added for device_tracker and alarm_control_panel.
return localize(`state_badge.${domain}.${state.state}`) || localize(`state_badge.default.${state.state}`) || state.state;
return (
localize(`state_badge.${domain}.${state.state}`) ||
localize(`state_badge.default.${state.state}`) ||
state.state
);
}
if (domain === 'timer') {
if (domain === "timer") {
return secondsToDuration(_timerTimeRemaining);
}
return state.attributes.unit_of_measurement || null;
@@ -197,11 +206,14 @@ class HaStateLabelBadge extends
startInterval(stateObj) {
this.clearInterval();
if (computeStateDomain(stateObj) === 'timer') {
if (computeStateDomain(stateObj) === "timer") {
this.calculateTimerRemaining(stateObj);
if (stateObj.state === 'active') {
this._updateRemaining = setInterval(() => this.calculateTimerRemaining(this.state), 1000);
if (stateObj.state === "active") {
this._updateRemaining = setInterval(
() => this.calculateTimerRemaining(this.state),
1000
);
}
}
}
@@ -211,4 +223,4 @@ class HaStateLabelBadge extends
}
}
customElements.define('ha-state-label-badge', HaStateLabelBadge);
customElements.define("ha-state-label-badge", HaStateLabelBadge);

29
src/components/entity/state-badge.js
View File

@@ -1,9 +1,9 @@
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
import '../ha-icon.js';
import computeStateDomain from '../../common/entity/compute_state_domain.js';
import stateIcon from '../../common/entity/state_icon.js';
import "../ha-icon.js";
import computeStateDomain from "../../common/entity/compute_state_domain.js";
import stateIcon from "../../common/entity/state_icon.js";
class StateBadge extends PolymerElement {
static get template() {
@@ -53,9 +53,9 @@ class StateBadge extends PolymerElement {
return {
stateObj: {
type: Object,
observer: '_updateIconAppearance',
observer: "_updateIconAppearance",
},
overrideIcon: String
overrideIcon: String,
};
}
@@ -69,21 +69,22 @@ class StateBadge extends PolymerElement {
_updateIconAppearance(newVal) {
const iconStyle = {
color: '',
filter: '',
color: "",
filter: "",
};
const hostStyle = {
backgroundImage: '',
backgroundImage: "",
};
// hide icon if we have entity picture
if (newVal.attributes.entity_picture) {
hostStyle.backgroundImage = 'url(' + newVal.attributes.entity_picture + ')';
iconStyle.display = 'none';
hostStyle.backgroundImage =
"url(" + newVal.attributes.entity_picture + ")";
iconStyle.display = "none";
} else {
if (newVal.attributes.hs_color) {
const hue = newVal.attributes.hs_color[0];
const sat = newVal.attributes.hs_color[1];
if (sat > 10) iconStyle.color = `hsl(${hue}, 100%, ${100 - (sat / 2)}%)`;
if (sat > 10) iconStyle.color = `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
}
if (newVal.attributes.brightness) {
const brightness = newVal.attributes.brightness;
@@ -95,4 +96,4 @@ class StateBadge extends PolymerElement {
Object.assign(this.style, hostStyle);
}
}
customElements.define('state-badge', StateBadge);
customElements.define("state-badge", StateBadge);

14
src/components/entity/state-info.js
View File

@@ -1,9 +1,9 @@
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
import '../ha-relative-time.js';
import './state-badge.js';
import computeStateName from '../../common/entity/compute_state_name.js';
import "../ha-relative-time.js";
import "./state-badge.js";
import computeStateName from "../../common/entity/compute_state_name.js";
class StateInfo extends PolymerElement {
static get template() {
@@ -82,7 +82,7 @@ class StateInfo extends PolymerElement {
},
hass: Object,
stateObj: Object,
inDialog: Boolean
inDialog: Boolean,
};
}
@@ -91,4 +91,4 @@ class StateInfo extends PolymerElement {
}
}
customElements.define('state-info', StateInfo);
customElements.define("state-info", StateInfo);