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

Clean up imports and unopened tag on device config page (#21274)

Browse Source
This commit is contained in:
Steve Repsher 2024-07-04 04:01:01 -04:00 committed by GitHub
parent c07e1122e1
commit 8b9fa9bc39
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 213 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

464
src/panels/config/devices/ha-config-device-page.ts
View File

@ -1,6 +1,5 @@
import { consume } from "@lit-labs/context"; import { consume } from "@lit-labs/context";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/mwc-list/mwc-list-item";
import { import {
mdiCog, mdiCog,
mdiDelete, mdiDelete,
@ -10,8 +9,6 @@ import {
mdiPencil, mdiPencil,
mdiPlusCircle, mdiPlusCircle,
} from "@mdi/js"; } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { import {
CSSResultGroup, CSSResultGroup,
LitElement, LitElement,
@ -24,7 +21,7 @@ import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { SENSOR_ENTITIES, ASSIST_ENTITIES } from "../../../common/const"; import { ASSIST_ENTITIES, SENSOR_ENTITIES } from "../../../common/const";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
@ -77,7 +74,6 @@ import type { HomeAssistant } from "../../../types";
import { brandsUrl } from "../../../util/brands-url"; import { brandsUrl } from "../../../util/brands-url";
import { fileDownload } from "../../../util/file_download"; import { fileDownload } from "../../../util/file_download";
import "../../logbook/ha-logbook"; import "../../logbook/ha-logbook";
import "../ha-config-section";
import "./device-detail/ha-device-entities-card"; import "./device-detail/ha-device-entities-card";
import "./device-detail/ha-device-info-card"; import "./device-detail/ha-device-info-card";
import "./device-detail/ha-device-via-devices-card"; import "./device-detail/ha-device-via-devices-card";
@ -665,269 +661,235 @@ export class HaConfigDevicePage extends LitElement {
` `
: ""; : "";
return html` return html` <hass-subpage
<hass-subpage .hass=${this.hass}
.hass=${this.hass} .narrow=${this.narrow}
.narrow=${this.narrow} .header=${deviceName}
.header=${deviceName} >
> <ha-icon-button
slot="toolbar-icon"
<ha-icon-button .path=${mdiPencil}
slot="toolbar-icon" @click=${this._showSettings}
.path=${mdiPencil} .label=${this.hass.localize("ui.panel.config.devices.edit_settings")}
@click=${this._showSettings} ></ha-icon-button>
.label=${this.hass.localize( <div class="container">
"ui.panel.config.devices.edit_settings" <div class="header fullwidth">
)} ${area
></ha-icon-button> ? html`<div class="header-name">
<div class="container"> <a href="/config/areas/area/${area.area_id}"
<div class="header fullwidth"> >${this.hass.localize(
${ "ui.panel.config.integrations.config_entry.area",
area { area: area.name || "Unnamed Area" }
? html`<div class="header-name"> )}</a
<a href="/config/areas/area/${area.area_id}" >
>${this.hass.localize( </div>`
"ui.panel.config.integrations.config_entry.area", : ""}
{ area: area.name || "Unnamed Area" } <div class="header-right">
)}</a ${battery &&
> (batteryDomain === "binary_sensor" || !isNaN(battery.state as any))
</div>` ? html`
: "" <div class="battery">
} ${batteryDomain === "sensor"
<div class="header-right"> ? this.hass.formatEntityState(battery)
${ : nothing}
battery && <ha-battery-icon
(batteryDomain === "binary_sensor" || .hass=${this.hass}
!isNaN(battery.state as any)) .batteryStateObj=${battery}
? html` .batteryChargingStateObj=${batteryChargingState}
<div class="battery"> ></ha-battery-icon>
${batteryDomain === "sensor" </div>
? this.hass.formatEntityState(battery) `
: nothing} : ""}
<ha-battery-icon ${integrations.length
.hass=${this.hass} ? html`
.batteryStateObj=${battery} <img
.batteryChargingStateObj=${batteryChargingState} alt=${domainToName(
></ha-battery-icon> this.hass.localize,
</div> integrations[0].domain
` )}
: "" src=${brandsUrl({
} domain: integrations[0].domain,
${ type: "logo",
integrations.length darkOptimized: this.hass.themes?.darkMode,
? html` })}
<img crossorigin="anonymous"
alt=${domainToName( referrerpolicy="no-referrer"
this.hass.localize, @load=${this._onImageLoad}
integrations[0].domain @error=${this._onImageError}
)} />
src=${brandsUrl({ `
domain: integrations[0].domain, : ""}
type: "logo",
darkOptimized: this.hass.themes?.darkMode,
})}
crossorigin="anonymous"
referrerpolicy="no-referrer"
@load=${this._onImageLoad}
@error=${this._onImageError}
/>
`
: ""
}
</div>
</div> </div>
<div class="column"> </div>
${ <div class="column">
this._deviceAlerts?.length ${this._deviceAlerts?.length
? html` ? html`
<div> <div>
${this._deviceAlerts.map( ${this._deviceAlerts.map(
(alert) => html` (alert) => html`
<ha-alert .alertType=${alert.level}> <ha-alert .alertType=${alert.level}>
${alert.text} ${alert.text}
</ha-alert> </ha-alert>
`
)}
</div>
` `
: "" )}
} </div>
<ha-device-info-card `
.hass=${this.hass} : ""}
.device=${device} <ha-device-info-card .hass=${this.hass} .device=${device}>
> ${deviceInfo}
${deviceInfo} ${firstDeviceAction || actions.length
${ ? html`
firstDeviceAction || actions.length <div class="card-actions" slot="actions">
? html` <div>
<div class="card-actions" slot="actions"> <a
<div> href=${ifDefined(firstDeviceAction!.href)}
<a rel=${ifDefined(
href=${ifDefined(firstDeviceAction!.href)} firstDeviceAction!.target ? "noreferrer" : undefined
rel=${ifDefined( )}
firstDeviceAction!.target target=${ifDefined(firstDeviceAction!.target)}
? "noreferrer" >
: undefined <mwc-button
)} class=${ifDefined(firstDeviceAction!.classes)}
target=${ifDefined(firstDeviceAction!.target)} .action=${firstDeviceAction!.action}
> @click=${this._deviceActionClicked}
<mwc-button graphic="icon"
class=${ifDefined(firstDeviceAction!.classes)} >
.action=${firstDeviceAction!.action} ${firstDeviceAction!.label}
${firstDeviceAction!.icon
? html`
<ha-svg-icon
class=${ifDefined(firstDeviceAction!.classes)}
.path=${firstDeviceAction!.icon}
slot="graphic"
></ha-svg-icon>
`
: ""}
${firstDeviceAction!.trailingIcon
? html`
<ha-svg-icon
.path=${firstDeviceAction!.trailingIcon}
slot="trailingIcon"
></ha-svg-icon>
`
: ""}
</mwc-button>
</a>
</div>
${actions.length
? html`
<ha-button-menu>
<ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
${actions.map((deviceAction) => {
const listItem = html`<mwc-list-item
class=${ifDefined(deviceAction.classes)}
.action=${deviceAction.action}
@click=${this._deviceActionClicked} @click=${this._deviceActionClicked}
graphic="icon" graphic="icon"
.hasMeta=${Boolean(deviceAction.trailingIcon)}
> >
${firstDeviceAction!.label} ${deviceAction.label}
${firstDeviceAction!.icon ${deviceAction.icon
? html` ? html`
<ha-svg-icon <ha-svg-icon
class=${ifDefined( class=${ifDefined(deviceAction.classes)}
firstDeviceAction!.classes .path=${deviceAction.icon}
)}
.path=${firstDeviceAction!.icon}
slot="graphic" slot="graphic"
></ha-svg-icon> ></ha-svg-icon>
` `
: ""} : ""}
${firstDeviceAction!.trailingIcon ${deviceAction.trailingIcon
? html` ? html`
<ha-svg-icon <ha-svg-icon
.path=${firstDeviceAction!.trailingIcon} slot="meta"
slot="trailingIcon" .path=${deviceAction.trailingIcon}
></ha-svg-icon> ></ha-svg-icon>
` `
: ""} : ""}
</mwc-button> </mwc-list-item>`;
</a> return deviceAction.href
</div> ? html`<a
href=${deviceAction.href}
${actions.length target=${ifDefined(deviceAction.target)}
? html` rel=${ifDefined(
<ha-button-menu> deviceAction.target
<ha-icon-button ? "noreferrer"
slot="trigger" : undefined
.label=${this.hass.localize(
"ui.common.menu"
)} )}
.path=${mdiDotsVertical} >${listItem}
></ha-icon-button> </a>`
${actions.map((deviceAction) => { : listItem;
const listItem = html`<mwc-list-item })}
class=${ifDefined(deviceAction.classes)} </ha-button-menu>
.action=${deviceAction.action} `
@click=${this._deviceActionClicked} : ""}
graphic="icon" </div>
.hasMeta=${Boolean( `
deviceAction.trailingIcon : ""}
)} </ha-device-info-card>
> ${!this.narrow ? [automationCard, sceneCard, scriptCard] : ""}
${deviceAction.label} </div>
${deviceAction.icon <div class="column">
? html` ${(
<ha-svg-icon [
class=${ifDefined( "control",
deviceAction.classes "sensor",
)} "notify",
.path=${deviceAction.icon} "event",
slot="graphic" "assist",
></ha-svg-icon> "config",
` "diagnostic",
: ""} ] as const
${deviceAction.trailingIcon ).map((category) =>
? html` // Make sure we render controls if no other cards will be rendered
<ha-svg-icon entitiesByCategory[category].length > 0 ||
slot="meta" (entities.length === 0 && category === "control")
.path=${deviceAction.trailingIcon} ? html`
></ha-svg-icon> <ha-device-entities-card
` .hass=${this.hass}
: ""} .header=${this.hass.localize(
</mwc-list-item>`; `ui.panel.config.devices.entities.${category}`
return deviceAction.href )}
? html`<a .deviceName=${deviceName}
href=${deviceAction.href} .entities=${entitiesByCategory[category]}
target=${ifDefined( .showHidden=${device.disabled_by !== null}
deviceAction.target >
)} </ha-device-entities-card>
rel=${ifDefined( `
deviceAction.target : ""
? "noreferrer" )}
: undefined <ha-device-via-devices-card
)} .hass=${this.hass}
>${listItem} .deviceId=${this.deviceId}
</a>` ></ha-device-via-devices-card>
: listItem; </div>
})} <div class="column">
</ha-button-menu> ${this.narrow ? [automationCard, sceneCard, scriptCard] : ""}
` ${isComponentLoaded(this.hass, "logbook")
: ""} ? html`
</div> <ha-card outlined>
` <h1 class="card-header">
: "" ${this.hass.localize("panel.logbook")}
} </h1>
</ha-device-info-card> <ha-logbook
${!this.narrow ? [automationCard, sceneCard, scriptCard] : ""} .hass=${this.hass}
</div> .time=${this._logbookTime}
<div class="column"> .entityIds=${this._entityIds(entities)}
${( .deviceIds=${this._deviceIdInList(this.deviceId)}
[ virtualize
"control", narrow
"sensor", no-icon
"notify", ></ha-logbook>
"event", </ha-card>
"assist", `
"config", : ""}
"diagnostic", </div>
] as const </div>
).map((category) => </hass-subpage>`;
// Make sure we render controls if no other cards will be rendered
entitiesByCategory[category].length > 0 ||
(entities.length === 0 && category === "control")
? html`
<ha-device-entities-card
.hass=${this.hass}
.header=${this.hass.localize(
`ui.panel.config.devices.entities.${category}`
)}
.deviceName=${deviceName}
.entities=${entitiesByCategory[category]}
.showHidden=${device.disabled_by !== null}
>
</ha-device-entities-card>
`
: ""
)}
<ha-device-via-devices-card
.hass=${this.hass}
.deviceId=${this.deviceId}
></ha-device-via-devices-card>
</div>
<div class="column">
${this.narrow ? [automationCard, sceneCard, scriptCard] : ""}
${
isComponentLoaded(this.hass, "logbook")
? html`
<ha-card outlined>
<h1 class="card-header">
${this.hass.localize("panel.logbook")}
</h1>
<ha-logbook
.hass=${this.hass}
.time=${this._logbookTime}
.entityIds=${this._entityIds(entities)}
.deviceIds=${this._deviceIdInList(this.deviceId)}
virtualize
narrow
no-icon
></ha-logbook>
</ha-card>
`
: ""
}
</div>
</div>
</ha-config-section>
</hass-subpage> `;
} }
private async _getDiagnosticButtons(requestId: number): Promise<void> { private async _getDiagnosticButtons(requestId: number): Promise<void> {