From 464552d0de4ed88a2b3855c50c6872cfd51406dd Mon Sep 17 00:00:00 2001 From: Barma-lej Date: Mon, 28 Oct 2024 13:11:54 +0100 Subject: [PATCH] Refactoring infocard renderer --- src/landroid-card.js | 74 +++++++++++++++++--------------------------- src/styles.js | 24 ++------------ 2 files changed, 31 insertions(+), 67 deletions(-) diff --git a/src/landroid-card.js b/src/landroid-card.js index 2aadc34..25ab1ab 100644 --- a/src/landroid-card.js +++ b/src/landroid-card.js @@ -566,25 +566,43 @@ class LandroidCard extends LitElement { } /** - * Renders the Entities Card for a given card type. + * Renders the Info Card for a given card type. * * @param {string} card - The type of card to render. - * @return {TemplateResult|nothing} The rendered Entities Card or nothing if the card is not visible. + * @return {TemplateResult|nothing} The rendered Info Card or nothing if the card is not visible. */ renderInfoCard(card) { if (!consts.CARD_MAP[card].visibility) return nothing; - + try { - const entities = this.findEntitiesBySuffixes( - consts.CARD_MAP[card].entities, - ); - + const entities = this.findEntitiesBySuffixes(consts.CARD_MAP[card].entities); + return html` -
+
- ${Object.values(entities).map((entity) => - this.renderEntityRow(entity), - )} + ${Object.values(entities).map((stateObj) => { + if (!stateObj || stateObj.state === consts.UNAVAILABLE) return nothing; + + const entity_id = stateObj.entity_id; + const title = this.getEntityName(stateObj); + const config = { entity: entity_id, name: title }; + + return html` + +
this.handleMore(entity_id)}> + ${stateObj.attributes.device_class === SENSOR_DEVICE_CLASS_TIMESTAMP && !stateObj.state.includes('unknown') + ? html` + + ` + : this.hass.formatEntityState(stateObj)} +
+
+ `; + })}
`; @@ -594,40 +612,6 @@ class LandroidCard extends LitElement { } } - /** - * Renders a row for a given entity in the UI. - * - * @param {Object} stateObj - The entity object to render. - * @return {TemplateResult} The rendered row as a TemplateResult. - */ - renderEntityRow(stateObj) { - if (!stateObj || stateObj.state === consts.UNAVAILABLE) return nothing; - - const entity_id = stateObj.entity_id; - const title = this.getEntityName(stateObj); - const config = { entity: entity_id, name: title }; - - return html` - -
this.handleMore(entity_id)} - > - ${stateObj.attributes.device_class === - SENSOR_DEVICE_CLASS_TIMESTAMP && !stateObj.state.includes('unknown') - ? html` - - ` - : this.hass.formatEntityState(stateObj)} -
-
- `; - } - /** * Renders the camera or image based on the provided state. * diff --git a/src/styles.js b/src/styles.js index 2fe246a..fa80fcb 100644 --- a/src/styles.js +++ b/src/styles.js @@ -297,8 +297,8 @@ const styles = css` display: flex; } - /* Input number row */ - .entitiescard { + /* Info Card */ + .info-card { height: 100%; display: flex; flex-direction: column; @@ -350,26 +350,6 @@ const styles = css` text-align: end; } - .slider { - flex-grow: 2; - width: 100px; - max-width: 200px; - } - - ha-textfield { - text-align: end; - } - - ha-slider { - width: 100%; - max-width: 200px; - } - - /* hui-input-select-entity-row */ - ha-select { - width: 100%; - --ha-select-min-width: 0; - } `; export default styles;