Show battery charging state in the config panels #6356
Conversation
| import { batteryIcon } from "../../common/entity/battery_icon"; | ||
| import "../ha-icon"; | ||
|
|
||
| class HaBatteryIcon extends PolymerElement { |
There was a problem hiding this comment.
I know you just copied this, but we should not add new PolymerElements, we are trying to get rid of them 😄
There was a problem hiding this comment.
What should I do instead here?
There was a problem hiding this comment.
LitElement and typescript
There was a problem hiding this comment.
@customElement("ha-battery-icon")
class HaBatteryIcon extends LitElement {
@property() public batteryStateObj;
@property() public batteryChargingStateObj;
protected render() {
return html`
<ha-icon
.icon=${batteryIcon(this.batteryStateObj, this.batteryChargingStateObj)}
></ha-icon>
`;
}
}There was a problem hiding this comment.
Thank you. So - much - cleaner.
There was a problem hiding this comment.
Instead of using an icon, we should probably import the icon paths directly and use ha-svg-icon ?
There was a problem hiding this comment.
Yes, but that would only work for this element so would need separate logic.
There was a problem hiding this comment.
import { mdiBatteryCharging40, mdiBatteryCharging50, .... } from '@mdi/js';
Seems like I'd need to import about 25 items and make an object to look them up in order to implement ha-svg-icon, unless there is a better way??
There was a problem hiding this comment.
No, that would be the way.
The benefit of that is that we don't have to load an entire (or multiple) icon chunk of MDI icons and requests to the database where they are cached.
Proposed change
The battery charging state is now checked when generating the battery icon.
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed: