Sorry if this is the wrong category.
I have read the documentation again and again, and I have looked at other integrations and custom cards, but I still struggle to get this right.
In the documentation, there is an example of graphical card configuration, but it does not contain any form elements to actually do any changes to the config.
Other cards I have looked at include a variety of “paper” elements, but these are deprecated (or removed?).
There is a reference to the Boiler Plate Card, but that has not received any updates in a year, and the latest release is even older, and it includes a lot of code and elements that is probably fine to show off every single option and possibility, but that makes it hard to untangle what is really needed to get a simple card with a simple graphical editor to select a couple of entities up and running.
I have come as far as getting the actual card working fine.
And I can also find the card in the GUI card selector.
I have managed to create a list of selectable entities,
class ContentCardEditor extends LitElement {
(...)
getEntitiesByType(type) {
return Object.keys(this._hass.states).filter(
(eid) => eid.substr(0, eid.indexOf('.')) === type
);
}
render() {
const supportedEntities = this.getEntitiesByType("plant");
console.log(supportedEntities);
return html`
<mwc-select
naturalMenuWidth
fixedMenuPosition
label="Plant (Required)"
.configValue=${'entity'}
.value=${this._config.entity}
@selected=${this._valueChanged}
@closed=${(ev) => ev.stopPropagation()}
>
${supportedEntities.map((entity) => {
return html`<mwc-list-item .value=${entity}>${entity}</mwc-list-item>`;
})}
</mwc-select>
`;
}
(the code is basically copied from here)
but clicking on an element in the list does not trigger “_valueChanged”.
(valueChanged is currently just logging so I can see what happens)
_valueChanged(ev) {
console.log("VC");
console.log(ev);
if (!this._config || !this._hass) {
return;
}
}
If I add a textfield,
<mwc-textfield
label="Battery entity (Optional)"
.value=${this._name}
.configValue=${'name'}
@input=${this._valueChanged}
></mwc-textfield>
I can see that _valueChanged is triggered every time I type a letter. But nothing happens if I click on any of the entities in the list.
I know I have not included all the elements in top of the Boiler Plate Card, and that is probably the reason, but there seems to be a real “dependency hell”, where every include depends on some other which again depends on some other include etc.
(adding the selectDefinition depends on select.js, which depends on a bunch of @material includes, which does not work, because using those depends on some scoped browser features(?) (as far as I understand) which again depends on some js-include that I have so far not been able to figure out…). It might be that all of this is clear as water for experienced js-developers, but for a mere amateur this is a web of sticky strings where it is impossible to get out.
It can’t really be necessary to add hundred different files just to get a simple entity selector working in the graphical setup of a custom card?
Is there any other documentation available or are there any simple examples of a card editor that uses the current best practice (as of march 2023) with a working entity selector that I can look at and learn from?
