mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-08 01:46:35 +00:00
Rework plant card (#1123)
* Rework plant card * Lint * Fix updates for battery icon
This commit is contained in:
parent
a983a5dbc5
commit
811d99b68c
@ -1,5 +1,5 @@
|
||||
<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/iron-icon/iron-icon.html'>
|
||||
<link rel='import' href='../components/ha-card.html'>
|
||||
<link rel='import' href='../util/hass-mixins.html'>
|
||||
|
||||
@ -7,125 +7,98 @@
|
||||
<template>
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 32px 24px 32px;
|
||||
}
|
||||
paper-icon-button {
|
||||
iron-icon {
|
||||
color: var(--paper-item-icon-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
paper-icon-button[disabled], td.missing {
|
||||
color: var(--disabled-text-color);
|
||||
.attributes {
|
||||
cursor: pointer;
|
||||
}
|
||||
th {
|
||||
width: 20%;
|
||||
}
|
||||
td {
|
||||
.attributes div {
|
||||
text-align: center;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
td.problem {
|
||||
color: var(--label-badge-red);
|
||||
.problem {
|
||||
color: var(--google-red-500);
|
||||
font-weight: bold;
|
||||
}
|
||||
.uom {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<ha-card header='[[computeTitle(stateObj)]]'>
|
||||
<div class='content'>
|
||||
<table style='width:100%'>
|
||||
<tr>
|
||||
<template is='dom-repeat' items='{{sensors}}'>
|
||||
<th>
|
||||
<paper-icon-button
|
||||
disabled$='[[computeDisabled(stateObj, item)]]'
|
||||
icon='[[computeIcon(stateObj, item)]]'
|
||||
on-click='showSensorHistory'>
|
||||
</paper-icon-button>
|
||||
</th>
|
||||
</template>
|
||||
</tr><tr>
|
||||
<template is='dom-repeat' items='{{sensors}}'>
|
||||
<td class$='[[computeClass(stateObj, item)]]'>
|
||||
[[computeValue(stateObj, item)]]<br>
|
||||
[[computeUOM(stateObj, item)]]
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</table>
|
||||
<template is="dom-repeat" items="[[computeAttributes(stateObj.attributes)]]">
|
||||
<div class="attributes" on-click="attributeClicked">
|
||||
<div><iron-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></iron-icon></div>
|
||||
<div class$="[[computeClass(stateObj.attributes.problem, item)]]">
|
||||
[[computeValue(stateObj.attributes, item)]]
|
||||
</div>
|
||||
<div class="uom">[[computeUom(stateObj.attributes.unit_of_measurement_dict, item)]]</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</ha-card>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
{
|
||||
var _SENSORS = ['moisture', 'temperature', 'brightness', 'conductivity', 'battery'];
|
||||
var _ICONS = {
|
||||
moisture: 'mdi:water',
|
||||
temperature: 'mdi:thermometer',
|
||||
brightness: 'mdi:white-balance-sunny',
|
||||
conductivity: 'mdi:emoticon-poop',
|
||||
battery: 'mdi:battery'
|
||||
};
|
||||
|
||||
class HaPlantCard extends window.hassMixins.EventsMixin(Polymer.Element) {
|
||||
static get is() { return 'ha-plant-card'; }
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
stateObj: Object,
|
||||
sensors: { type: Object, value: _SENSORS }
|
||||
};
|
||||
}
|
||||
|
||||
computeTitle(stateObj) {
|
||||
return window.hassUtil.computeStateName(stateObj);
|
||||
}
|
||||
|
||||
computeClass(stateObj, sensor) {
|
||||
if (sensor in stateObj.attributes) {
|
||||
const prob = stateObj.attributes.problem;
|
||||
return (prob.indexOf(sensor) === -1) ? 'ok' : 'problem';
|
||||
}
|
||||
return 'missing';
|
||||
}
|
||||
|
||||
computeIcon(stateObj, sensor) {
|
||||
var icon = _ICONS[sensor];
|
||||
if ((sensor === 'battery') && (sensor in stateObj.attributes)) {
|
||||
const level = stateObj.attributes.battery;
|
||||
if (level <= 5) {
|
||||
icon += '-alert';
|
||||
} else if (level < 95) {
|
||||
icon += '-' + (Math.round((level / 10) - 0.01) * 10).toString();
|
||||
}
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
|
||||
computeValue(stateObj, sensor) {
|
||||
if (sensor in stateObj.attributes) {
|
||||
return stateObj.attributes[sensor];
|
||||
}
|
||||
return '-';
|
||||
}
|
||||
|
||||
computeUOM(stateObj, sensor) {
|
||||
if (sensor in stateObj.attributes.unit_of_measurement_dict) {
|
||||
return stateObj.attributes.unit_of_measurement_dict[sensor];
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
computeDisabled(stateObj, sensor) {
|
||||
return (!(sensor in stateObj.attributes));
|
||||
}
|
||||
|
||||
showSensorHistory(ev) {
|
||||
ev.stopPropagation();
|
||||
var sensorId = this.stateObj.attributes.sensors[ev.model.item];
|
||||
this.fire('hass-more-info', { entityId: sensorId });
|
||||
}
|
||||
class HaPlantCard extends window.hassMixins.EventsMixin(Polymer.Element) {
|
||||
static get is() { return 'ha-plant-card'; }
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
stateObj: Object
|
||||
};
|
||||
}
|
||||
|
||||
customElements.define(HaPlantCard.is, HaPlantCard);
|
||||
constructor() {
|
||||
super();
|
||||
this.sensors = {
|
||||
moisture: 'mdi:water',
|
||||
temperature: 'mdi:thermometer',
|
||||
brightness: 'mdi:white-balance-sunny',
|
||||
conductivity: 'mdi:emoticon-poop',
|
||||
battery: 'mdi:battery'
|
||||
};
|
||||
}
|
||||
|
||||
computeTitle(stateObj) {
|
||||
return window.hassUtil.computeStateName(stateObj);
|
||||
}
|
||||
|
||||
computeAttributes(data) {
|
||||
return Object.keys(this.sensors).filter(key => key in data);
|
||||
}
|
||||
|
||||
computeIcon(attr, batLvl) {
|
||||
if (attr === 'battery') {
|
||||
return batLvl <= 5 ? `${this.sensors[attr]}-alert` :
|
||||
`${this.sensors[attr]}-${(Math.round((batLvl / 10) - 0.01) * 10).toString()}`;
|
||||
}
|
||||
return this.sensors[attr];
|
||||
}
|
||||
|
||||
computeValue(attributes, attr) {
|
||||
return attributes[attr];
|
||||
}
|
||||
|
||||
computeUom(dict, attr) {
|
||||
return dict[attr] || '';
|
||||
}
|
||||
|
||||
computeClass(problem, attr) {
|
||||
return problem.indexOf(attr) === -1 ? '' : 'problem';
|
||||
}
|
||||
|
||||
attributeClicked(ev) {
|
||||
this.fire('hass-more-info', { entityId: this.stateObj.attributes.sensors[ev.model.item] });
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(HaPlantCard.is, HaPlantCard);
|
||||
</script>
|
||||
|
Loading…
x
Reference in New Issue
Block a user