jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-08 01:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rework plant card (#1123)

Browse Source 
* Rework plant card

* Lint

* Fix updates for battery icon
This commit is contained in:
c727 2018-04-27 16:26:34 +02:00 committed by Paulus Schoutsen
parent a983a5dbc5
commit 811d99b68c
1 changed files with 73 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
src/cards/ha-plant-card.html
View File

@ -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>