From 9766e7f57b2e4df44fd1bbc0c7bbd703e33cce3b Mon Sep 17 00:00:00 2001 From: Barma-lej <schick.a@gmail.com> Date: Sat, 26 Oct 2024 13:11:00 +0200 Subject: [PATCH] Modify File Structure `landroid-card` --- src/landroid-card.js | 332 +++++++++++++++++++++---------------------- 1 file changed, 166 insertions(+), 166 deletions(-) diff --git a/src/landroid-card.js b/src/landroid-card.js index 1dd4a72..2aadc34 100644 --- a/src/landroid-card.js +++ b/src/landroid-card.js @@ -526,73 +526,6 @@ class LandroidCard extends LitElement { }; } - /** - * Renders a button based on the given action and parameters. - * - * @param {string} action - The action to be performed when the button is clicked. - * @param {Object} [params] - Optional parameters for rendering the button. - * @param {boolean} [params.asIcon=false] - Whether to render the button as an icon or a toolbar button. - * @param {boolean} [params.label=false] - Whether to include a title for the button. - * @param {string} [params.defaultService] - The default service. - * @param {boolean} [params.isRequest=true] - Requests an update which is processed asynchronously by default. - * @return {TemplateResult} The rendered button component. - */ - renderButton(action, params = {}) { - if (!action) return nothing; - - const { - asIcon = false, - label = false, - defaultService = consts.ACION_BUTTONS[action].action, - isRequest = true, - ...serviceData - } = params; - - const icon = consts.ACION_BUTTONS[action].icon; - const title = localize(`action.${action}`); - const entity_id = action === consts.ACTION_EDGECUT - ? this.getEntityObject(consts.BUTTON_EDGECUT_SUFFIX)?.entity_id || this.entity.entity_id - : this.entity.entity_id; - - const service_data = { - defaultService, - entity_id, - isRequest, - ...serviceData, - }; - - if (asIcon) { - return html` - <div - class="tip" - title="${title}" - @click="${(e) => this.handleAction(e, action, service_data)}" - > - <ha-icon icon="${icon}"></ha-icon> - </div> - `; - } else { - return label - ? html` - <ha-button - @click="${(e) => this.handleAction(e, action, service_data)}" - title="${title}" - > - <ha-icon icon="${icon}"></ha-icon> - ${title} - </ha-button> - ` - : html` - <ha-icon-button - label="${title}" - @click="${(e) => this.handleAction(e, action, service_data)}" - > - <ha-icon icon="${icon}"></ha-icon> - </ha-icon-button> - `; - } - } - /** * Renders a tip button for a given card. * label = 0; // none: 0, left: 1 or right: 2 @@ -632,6 +565,69 @@ class LandroidCard extends LitElement { `; } + /** + * Renders the Entities 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. + */ + renderInfoCard(card) { + if (!consts.CARD_MAP[card].visibility) return nothing; + + try { + const entities = this.findEntitiesBySuffixes( + consts.CARD_MAP[card].entities, + ); + + return html` + <div class="entitiescard"> + <div id="states" class="card-content"> + ${Object.values(entities).map((entity) => + this.renderEntityRow(entity), + )} + </div> + </div> + `; + } catch (e) { + console.warn(e); + return nothing; + } + } + + /** + * 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` + <hui-generic-entity-row .hass=${this.hass} .config=${config}> + <div + class="text-content value" + @action=${() => this.handleMore(entity_id)} + > + ${stateObj.attributes.device_class === + SENSOR_DEVICE_CLASS_TIMESTAMP && !stateObj.state.includes('unknown') + ? html` + <hui-timestamp-display + .hass=${this.hass} + .ts=${new Date(stateObj.state)} + capitalize + ></hui-timestamp-display> + ` + : this.hass.formatEntityState(stateObj)} + </div> + </hui-generic-entity-row> + `; + } + /** * Renders the camera or image based on the provided state. * @@ -669,50 +665,6 @@ class LandroidCard extends LitElement { return nothing; } - /** - * Renders the statistics for a given state. - * - * @param {string} state - The state used as a CSS class. - * @return {Array<TemplateResult>} An array of template results representing the statistics. - */ - renderStats(state) { - const statsList = this.config.stats?.[state] || this.config.stats?.default || []; - - return statsList.map(({ entity_id, attribute, value_template, unit, subtitle }) => { - if (!entity_id && !attribute && !value_template) { - return nothing; - } - - try { - const value = entity_id - ? this.hass.states[entity_id].state - : get(this.entity.attributes, attribute); - - return html` - <div - class="stats-block" - title="${subtitle}" - @click="${() => this.handleMore(entity_id)}" - > - <span class="stats-value"> - <ha-template - hass=${this.hass} - template=${value_template} - value=${value} - .variables=${{ value }} - ></ha-template> - </span> - ${unit} - <div class="stats-subtitle">${subtitle}</div> - </div> - `; - } catch (e) { - console.warn(e); - return nothing; - } - }); - } - /** * Renders the name of the mower. * @@ -805,66 +757,47 @@ return html` } /** - * Renders the Entities Card for a given card type. + * Renders the statistics for a given state. * - * @param {string} card - The type of card to render. - * @return {TemplateResult|nothing} The rendered Entities Card or nothing if the card is not visible. + * @param {string} state - The state used as a CSS class. + * @return {Array<TemplateResult>} An array of template results representing the statistics. */ - renderInfoCard(card) { - if (!consts.CARD_MAP[card].visibility) return nothing; - - try { - const entities = this.findEntitiesBySuffixes( - consts.CARD_MAP[card].entities, - ); - - return html` - <div class="entitiescard"> - <div id="states" class="card-content"> - ${Object.values(entities).map((entity) => - this.renderEntityRow(entity), - )} - </div> - </div> - `; - } catch (e) { - console.warn(e); - return nothing; - } - } + renderStats(state) { + const statsList = this.config.stats?.[state] || this.config.stats?.default || []; - /** - * 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; + return statsList.map(({ entity_id, attribute, value_template, unit, subtitle }) => { + if (!entity_id && !attribute && !value_template) { + return nothing; + } - const entity_id = stateObj.entity_id; - const title = this.getEntityName(stateObj); - const config = { entity: entity_id, name: title }; + try { + const value = entity_id + ? this.hass.states[entity_id].state + : get(this.entity.attributes, attribute); - return html` - <hui-generic-entity-row .hass=${this.hass} .config=${config}> - <div - class="text-content value" - @action=${() => this.handleMore(entity_id)} - > - ${stateObj.attributes.device_class === - SENSOR_DEVICE_CLASS_TIMESTAMP && !stateObj.state.includes('unknown') - ? html` - <hui-timestamp-display - .hass=${this.hass} - .ts=${new Date(stateObj.state)} - capitalize - ></hui-timestamp-display> - ` - : this.hass.formatEntityState(stateObj)} - </div> - </hui-generic-entity-row> - `; + return html` + <div + class="stats-block" + title="${subtitle}" + @click="${() => this.handleMore(entity_id)}" + > + <span class="stats-value"> + <ha-template + hass=${this.hass} + template=${value_template} + value=${value} + .variables=${{ value }} + ></ha-template> + </span> + ${unit} + <div class="stats-subtitle">${subtitle}</div> + </div> + `; + } catch (e) { + console.warn(e); + return nothing; + } + }); } /** @@ -961,6 +894,73 @@ return html` } } + /** + * Renders a button based on the given action and parameters. + * + * @param {string} action - The action to be performed when the button is clicked. + * @param {Object} [params] - Optional parameters for rendering the button. + * @param {boolean} [params.asIcon=false] - Whether to render the button as an icon or a toolbar button. + * @param {boolean} [params.label=false] - Whether to include a title for the button. + * @param {string} [params.defaultService] - The default service. + * @param {boolean} [params.isRequest=true] - Requests an update which is processed asynchronously by default. + * @return {TemplateResult} The rendered button component. + */ + renderButton(action, params = {}) { + if (!action) return nothing; + + const { + asIcon = false, + label = false, + defaultService = consts.ACION_BUTTONS[action].action, + isRequest = true, + ...serviceData + } = params; + + const icon = consts.ACION_BUTTONS[action].icon; + const title = localize(`action.${action}`); + const entity_id = action === consts.ACTION_EDGECUT + ? this.getEntityObject(consts.BUTTON_EDGECUT_SUFFIX)?.entity_id || this.entity.entity_id + : this.entity.entity_id; + + const service_data = { + defaultService, + entity_id, + isRequest, + ...serviceData, + }; + + if (asIcon) { + return html` + <div + class="tip" + title="${title}" + @click="${(e) => this.handleAction(e, action, service_data)}" + > + <ha-icon icon="${icon}"></ha-icon> + </div> + `; + } else { + return label + ? html` + <ha-button + @click="${(e) => this.handleAction(e, action, service_data)}" + title="${title}" + > + <ha-icon icon="${icon}"></ha-icon> + ${title} + </ha-button> + ` + : html` + <ha-icon-button + label="${title}" + @click="${(e) => this.handleAction(e, action, service_data)}" + > + <ha-icon icon="${icon}"></ha-icon> + </ha-icon-button> + `; + } + } + /** * Renders the shortcuts based on the current configuration. *