jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 16:26:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use ha-alert in the energy validation results (#9876)

Browse Source
This commit is contained in:
Joakim Sørensen 2021-08-24 19:22:40 +02:00 committed by GitHub
parent f3606014c6
commit 68fe13a67d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ha-alert.ts
View File

@ -30,8 +30,11 @@ declare global {
class HaAlert extends LitElement { class HaAlert extends LitElement {
@property() public title = ""; @property() public title = "";
@property() public alertType: "info" | "warning" | "error" | "success" = @property({ attribute: "alert-type" }) public alertType:
"info"; | "info"
| "warning"
| "error"
| "success" = "info";
@property({ attribute: "action-text" }) public actionText = ""; @property({ attribute: "action-text" }) public actionText = "";

77
src/panels/config/energy/components/ha-energy-validation-result.ts
View File

@ -1,8 +1,7 @@
import { mdiAlertOutline } from "@mdi/js";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { groupBy } from "../../../../common/util/group-by"; import { groupBy } from "../../../../common/util/group-by";
import "../../../../components/ha-svg-icon"; import "../../../../components/ha-alert";
import { EnergyValidationIssue } from "../../../../data/energy"; import { EnergyValidationIssue } from "../../../../data/energy";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
@ -23,33 +22,29 @@ class EnergyValidationMessage extends LitElement {
return Object.entries(grouped).map( return Object.entries(grouped).map(
([issueType, gIssues]) => html` ([issueType, gIssues]) => html`
<div class="issue-type"> <ha-alert
<div class="icon"> alert-type="warning"
<ha-svg-icon .path=${mdiAlertOutline}></ha-svg-icon> .title=${
</div> this.hass.localize(
<div class="content">
<div class="title">
${this.hass.localize(
`ui.panel.config.energy.validation.issues.${issueType}.title` `ui.panel.config.energy.validation.issues.${issueType}.title`
) || issueType} ) || issueType
</div> }
>
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.energy.validation.issues.${issueType}.description` `ui.panel.config.energy.validation.issues.${issueType}.description`
)} )}
${issueType === "entity_not_tracked" ${
? html` issueType === "recorder_untracked"
(<a ? html`(<a
href="https://www.home-assistant.io/integrations/recorder#configure-filter" href="https://www.home-assistant.io/integrations/recorder#configure-filter"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.common.learn_more" "ui.panel.config.common.learn_more"
)}</a )}</a
>) >)`
` : ""
: ""} }
<ul> <ul>
${gIssues.map( ${gIssues.map(
(issue) => (issue) =>
@ -60,43 +55,13 @@ class EnergyValidationMessage extends LitElement {
</li>` </li>`
)} )}
</ul> </ul>
</div> </ha-alert>
</div> </div>
` `
); );
} }
static styles = css` static styles = css`
.issue-type {
position: relative;
padding: 4px;
display: flex;
margin: 4px 0;
}
.issue-type::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--warning-color);
opacity: 0.12;
pointer-events: none;
content: "";
border-radius: 4px;
}
.icon {
margin: 4px 8px;
width: 24px;
color: var(--warning-color);
}
.content {
padding-right: 4px;
}
.title {
font-weight: bold;
margin-top: 5px;
}
ul { ul {
padding-left: 24px; padding-left: 24px;
margin: 4px 0; margin: 4px 0;