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

History Panel Fixes for beta

Browse Source
This commit is contained in:
Zack 2022-06-29 16:03:13 -05:00
parent 9324061d05
commit 9e8c7e73f2
3 changed files with 135 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
src/components/ha-target-picker.ts
View File

@ -42,8 +42,8 @@ import "./entity/ha-entity-picker";
import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker"; import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
import "./ha-area-picker"; import "./ha-area-picker";
import "./ha-icon-button"; import "./ha-icon-button";
import "./ha-svg-icon";
import "./ha-input-helper-text"; import "./ha-input-helper-text";
import "./ha-svg-icon";
@customElement("ha-target-picker") @customElement("ha-target-picker")
export class HaTargetPicker extends SubscribeMixin(LitElement) { export class HaTargetPicker extends SubscribeMixin(LitElement) {
@ -119,55 +119,68 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
if (!this._areas || !this._devices || !this._entities) { if (!this._areas || !this._devices || !this._entities) {
return html``; return html``;
} }
return html`<div class=${this.horizontal ? "horizontal-container" : ""}> return html`
${this.horizontal ? this._renderChips() : this._renderItems()} ${this.horizontal
${this._renderPicker()} ? html`
${this.horizontal ? this._renderItems() : this._renderChips()} <div class="horizontal-container">
</div>`; ${this._renderChips()} ${this._renderPicker()}
</div>
${this._renderItems()}
`
: html`
<div>
${this._renderItems()} ${this._renderPicker()}
${this._renderChips()}
</div>
`}
`;
} }
private _renderItems() { private _renderItems() {
return html`<div class="mdc-chip-set items"> return html`
${this.value?.area_id <div class="mdc-chip-set items">
? ensureArray(this.value.area_id).map((area_id) => { ${this.value?.area_id
const area = this._areas![area_id]; ? ensureArray(this.value.area_id).map((area_id) => {
return this._renderChip( const area = this._areas![area_id];
"area_id", return this._renderChip(
area_id, "area_id",
area?.name || area_id, area_id,
undefined, area?.name || area_id,
mdiSofa undefined,
); mdiSofa
}) );
: ""} })
${this.value?.device_id : ""}
? ensureArray(this.value.device_id).map((device_id) => { ${this.value?.device_id
const device = this._devices![device_id]; ? ensureArray(this.value.device_id).map((device_id) => {
return this._renderChip( const device = this._devices![device_id];
"device_id", return this._renderChip(
device_id, "device_id",
device ? computeDeviceName(device, this.hass) : device_id, device_id,
undefined, device ? computeDeviceName(device, this.hass) : device_id,
mdiDevices undefined,
); mdiDevices
}) );
: ""} })
${this.value?.entity_id : ""}
? ensureArray(this.value.entity_id).map((entity_id) => { ${this.value?.entity_id
const entity = this.hass.states[entity_id]; ? ensureArray(this.value.entity_id).map((entity_id) => {
return this._renderChip( const entity = this.hass.states[entity_id];
"entity_id", return this._renderChip(
entity_id, "entity_id",
entity ? computeStateName(entity) : entity_id, entity_id,
entity entity ? computeStateName(entity) : entity_id,
); entity
}) );
: ""} })
</div>`; : ""}
</div>
`;
} }
private _renderChips() { private _renderChips() {
return html`<div class="mdc-chip-set"> return html`
<div class="mdc-chip-set">
<div <div
class="mdc-chip area_id add" class="mdc-chip area_id add"
.type=${"area_id"} .type=${"area_id"}
@ -231,7 +244,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
</div> </div>
${this.helper ${this.helper
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>` ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
: ""} `; : ""}
`;
} }
private async _showPicker(ev) { private async _showPicker(ev) {
@ -320,51 +334,54 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
private _renderPicker() { private _renderPicker() {
switch (this._addMode) { switch (this._addMode) {
case "area_id": case "area_id":
return html`<ha-area-picker return html`
.hass=${this.hass} <ha-area-picker
id="input" .hass=${this.hass}
.type=${"area_id"} id="input"
.label=${this.hass.localize( .type=${"area_id"}
"ui.components.target-picker.add_area_id" .label=${this.hass.localize(
)} "ui.components.target-picker.add_area_id"
no-add )}
.deviceFilter=${this.deviceFilter} no-add
.entityFilter=${this.entityRegFilter} .deviceFilter=${this.deviceFilter}
.includeDeviceClasses=${this.includeDeviceClasses} .entityFilter=${this.entityRegFilter}
.includeDomains=${this.includeDomains} .includeDeviceClasses=${this.includeDeviceClasses}
class=${this.horizontal ? "hidden-picker" : ""} .includeDomains=${this.includeDomains}
@value-changed=${this._targetPicked} @value-changed=${this._targetPicked}
></ha-area-picker>`; ></ha-area-picker>
`;
case "device_id": case "device_id":
return html`<ha-device-picker return html`
.hass=${this.hass} <ha-device-picker
id="input" .hass=${this.hass}
.type=${"device_id"} id="input"
.label=${this.hass.localize( .type=${"device_id"}
"ui.components.target-picker.add_device_id" .label=${this.hass.localize(
)} "ui.components.target-picker.add_device_id"
.deviceFilter=${this.deviceFilter} )}
.entityFilter=${this.entityRegFilter} .deviceFilter=${this.deviceFilter}
.includeDeviceClasses=${this.includeDeviceClasses} .entityFilter=${this.entityRegFilter}
.includeDomains=${this.includeDomains} .includeDeviceClasses=${this.includeDeviceClasses}
class=${this.horizontal ? "hidden-picker" : ""} .includeDomains=${this.includeDomains}
@value-changed=${this._targetPicked} @value-changed=${this._targetPicked}
></ha-device-picker>`; ></ha-device-picker>
`;
case "entity_id": case "entity_id":
return html`<ha-entity-picker return html`
.hass=${this.hass} <ha-entity-picker
id="input" .hass=${this.hass}
.type=${"entity_id"} id="input"
.label=${this.hass.localize( .type=${"entity_id"}
"ui.components.target-picker.add_entity_id" .label=${this.hass.localize(
)} "ui.components.target-picker.add_entity_id"
.entityFilter=${this.entityFilter} )}
.includeDeviceClasses=${this.includeDeviceClasses} .entityFilter=${this.entityFilter}
.includeDomains=${this.includeDomains} .includeDeviceClasses=${this.includeDeviceClasses}
class=${this.horizontal ? "hidden-picker" : ""} .includeDomains=${this.includeDomains}
@value-changed=${this._targetPicked} @value-changed=${this._targetPicked}
allow-custom-entity allow-custom-entity
></ha-entity-picker>`; ></ha-entity-picker>
`;
} }
return html``; return html``;
} }
@ -553,12 +570,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
${unsafeCSS(chipStyles)} ${unsafeCSS(chipStyles)}
.hidden-picker {
height: 0px;
display: inline-block;
overflow: hidden;
position: absolute;
}
.horizontal-container { .horizontal-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

56
src/panels/history/ha-panel-history.ts
View File

@ -10,9 +10,11 @@ import {
startOfWeek, startOfWeek,
startOfYesterday, startOfYesterday,
} from "date-fns/esm"; } from "date-fns/esm";
import { UnsubscribeFunc } from "home-assistant-js-websocket/dist/types";
import { css, html, LitElement, PropertyValues } from "lit"; import { css, html, LitElement, PropertyValues } from "lit";
import { property, state } from "lit/decorators"; import { property, state } from "lit/decorators";
import { UnsubscribeFunc } from "home-assistant-js-websocket/dist/types"; import { computeDomain } from "../../common/entity/compute_domain";
import { computeStateName } from "../../common/entity/compute_state_name";
import { navigate } from "../../common/navigate"; import { navigate } from "../../common/navigate";
import { import {
createSearchParam, createSearchParam,
@ -20,23 +22,21 @@ import {
} from "../../common/url/search-params"; } from "../../common/url/search-params";
import { computeRTL } from "../../common/util/compute_rtl"; import { computeRTL } from "../../common/util/compute_rtl";
import "../../components/chart/state-history-charts"; import "../../components/chart/state-history-charts";
import "../../components/ha-target-picker";
import "../../components/ha-circular-progress"; import "../../components/ha-circular-progress";
import "../../components/ha-date-range-picker"; import "../../components/ha-date-range-picker";
import type { DateRangePickerRanges } from "../../components/ha-date-range-picker"; import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
import "../../components/ha-icon-button"; import "../../components/ha-icon-button";
import "../../components/ha-menu-button"; import "../../components/ha-menu-button";
import { computeHistory, fetchDateWS } from "../../data/history"; import "../../components/ha-target-picker";
import "../../layouts/ha-app-layout";
import { haStyle } from "../../resources/styles";
import { HomeAssistant } from "../../types";
import { import {
EntityRegistryEntry, EntityRegistryEntry,
subscribeEntityRegistry, subscribeEntityRegistry,
} from "../../data/entity_registry"; } from "../../data/entity_registry";
import { computeHistory, fetchDateWS } from "../../data/history";
import "../../layouts/ha-app-layout";
import { SubscribeMixin } from "../../mixins/subscribe-mixin"; import { SubscribeMixin } from "../../mixins/subscribe-mixin";
import { computeStateName } from "../../common/entity/compute_state_name"; import { haStyle } from "../../resources/styles";
import { computeDomain } from "../../common/entity/compute_domain"; import { HomeAssistant } from "../../types";
class HaPanelHistory extends SubscribeMixin(LitElement) { class HaPanelHistory extends SubscribeMixin(LitElement) {
@property() hass!: HomeAssistant; @property() hass!: HomeAssistant;
@ -118,30 +118,22 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
@value-changed=${this._entitiesChanged} @value-changed=${this._entitiesChanged}
></ha-target-picker> ></ha-target-picker>
</div> </div>
${this._isLoading </div>
? html`<div class="progress-wrapper"> ${!this._targetPickerValue
? html`
<div class="start-search">
${this.hass.localize("ui.panel.history.start_search")}
</div>
`
: this._isLoading
? html`
<div class="progress-wrapper">
<ha-circular-progress <ha-circular-progress
active active
alt=${this.hass.localize("ui.common.loading")} alt=${this.hass.localize("ui.common.loading")}
></ha-circular-progress> ></ha-circular-progress>
</div>` </div>
: html` `
<state-history-charts
.hass=${this.hass}
.historyData=${this._stateHistory}
.endTime=${this._endDate}
no-single
>
</state-history-charts>
`}
</div>
${this._isLoading
? html`<div class="progress-wrapper">
<ha-circular-progress
active
alt=${this.hass.localize("ui.common.loading")}
></ha-circular-progress>
</div>`
: html` : html`
<state-history-charts <state-history-charts
virtualize virtualize
@ -389,7 +381,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
.filters { .filters {
display: flex; display: flex;
align-items: flex-end; align-items: flex-start;
padding: 8px 16px 0; padding: 8px 16px 0;
} }
@ -429,6 +421,12 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
max-width: none; max-width: none;
width: 100%; width: 100%;
} }
.start-search {
padding-top: 16px;
text-align: center;
color: var(--secondary-text-color);
}
`, `,
]; ];
} }

3
src/translations/en.json
View File

@ -4556,6 +4556,9 @@
"energy_sources_table_title": "Sources", "energy_sources_table_title": "Sources",
"energy_devices_graph_title": "Monitor individual devices" "energy_devices_graph_title": "Monitor individual devices"
} }
},
"history": {
"start_search": "Start by selecting an area, device or entity above"
} }
}, },
"tips": { "tips": {