mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Add navigation option from more-info to history (#9717)
This commit is contained in:
parent
e50d2e16a7
commit
06b1718ade
@ -1,12 +1,19 @@
|
|||||||
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
|
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { isComponentLoaded } from "../../common/config/is_component_loaded";
|
import { isComponentLoaded } from "../../common/config/is_component_loaded";
|
||||||
|
import { fireEvent } from "../../common/dom/fire_event";
|
||||||
import { throttle } from "../../common/util/throttle";
|
import { throttle } from "../../common/util/throttle";
|
||||||
import "../../components/chart/state-history-charts";
|
import "../../components/chart/state-history-charts";
|
||||||
import { getRecentWithCache } from "../../data/cached-history";
|
import { getRecentWithCache } from "../../data/cached-history";
|
||||||
import { HistoryResult } from "../../data/history";
|
import { HistoryResult } from "../../data/history";
|
||||||
import { HomeAssistant } from "../../types";
|
import { HomeAssistant } from "../../types";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HASSDomEvents {
|
||||||
|
closed: undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@customElement("ha-more-info-history")
|
@customElement("ha-more-info-history")
|
||||||
export class MoreInfoHistory extends LitElement {
|
export class MoreInfoHistory extends LitElement {
|
||||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
@ -24,14 +31,26 @@ export class MoreInfoHistory extends LitElement {
|
|||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const href = "/history?entity_id=" + this.entityId;
|
||||||
|
|
||||||
return html`${isComponentLoaded(this.hass, "history")
|
return html`${isComponentLoaded(this.hass, "history")
|
||||||
? html`<state-history-charts
|
? html` <div class="header">
|
||||||
up-to-now
|
<div class="title">
|
||||||
.hass=${this.hass}
|
${this.hass.localize("ui.dialogs.more_info_control.history")}
|
||||||
.historyData=${this._stateHistory}
|
</div>
|
||||||
.isLoadingData=${!this._stateHistory}
|
<a href=${href} @click=${this._close}
|
||||||
></state-history-charts>`
|
>${this.hass.localize(
|
||||||
: ""} `;
|
"ui.dialogs.more_info_control.show_more"
|
||||||
|
)}</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<state-history-charts
|
||||||
|
up-to-now
|
||||||
|
.hass=${this.hass}
|
||||||
|
.historyData=${this._stateHistory}
|
||||||
|
.isLoadingData=${!this._stateHistory}
|
||||||
|
></state-history-charts>`
|
||||||
|
: ""}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected updated(changedProps: PropertyValues): void {
|
protected updated(changedProps: PropertyValues): void {
|
||||||
@ -78,6 +97,38 @@ export class MoreInfoHistory extends LitElement {
|
|||||||
this.hass!.language
|
this.hass!.language
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _close(): void {
|
||||||
|
setTimeout(() => fireEvent(this, "closed"), 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles() {
|
||||||
|
return [
|
||||||
|
css`
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.header > a,
|
||||||
|
a:visited {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-family: var(--paper-font-title_-_font-family);
|
||||||
|
-webkit-font-smoothing: var(
|
||||||
|
--paper-font-title_-_-webkit-font-smoothing
|
||||||
|
);
|
||||||
|
font-size: var(--paper-font-title_-_font-size);
|
||||||
|
font-weight: var(--paper-font-title_-_font-weight);
|
||||||
|
letter-spacing: var(--paper-font-title_-_letter-spacing);
|
||||||
|
line-height: var(--paper-font-title_-_line-height);
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
@ -1,16 +1,16 @@
|
|||||||
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
|
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { isComponentLoaded } from "../../common/config/is_component_loaded";
|
import { isComponentLoaded } from "../../common/config/is_component_loaded";
|
||||||
|
import { fireEvent } from "../../common/dom/fire_event";
|
||||||
import { computeStateDomain } from "../../common/entity/compute_state_domain";
|
import { computeStateDomain } from "../../common/entity/compute_state_domain";
|
||||||
import { throttle } from "../../common/util/throttle";
|
import { throttle } from "../../common/util/throttle";
|
||||||
import "../../components/ha-circular-progress";
|
import "../../components/ha-circular-progress";
|
||||||
import { fetchUsers } from "../../data/user";
|
|
||||||
import { getLogbookData, LogbookEntry } from "../../data/logbook";
|
import { getLogbookData, LogbookEntry } from "../../data/logbook";
|
||||||
import { loadTraceContexts, TraceContexts } from "../../data/trace";
|
import { loadTraceContexts, TraceContexts } from "../../data/trace";
|
||||||
|
import { fetchUsers } from "../../data/user";
|
||||||
import "../../panels/logbook/ha-logbook";
|
import "../../panels/logbook/ha-logbook";
|
||||||
import { haStyle } from "../../resources/styles";
|
import { haStyle } from "../../resources/styles";
|
||||||
import { HomeAssistant } from "../../types";
|
import { HomeAssistant } from "../../types";
|
||||||
import { closeDialog } from "../make-dialog-manager";
|
|
||||||
|
|
||||||
@customElement("ha-more-info-logbook")
|
@customElement("ha-more-info-logbook")
|
||||||
export class MoreInfoLogbook extends LitElement {
|
export class MoreInfoLogbook extends LitElement {
|
||||||
@ -44,6 +44,8 @@ export class MoreInfoLogbook extends LitElement {
|
|||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const href = "/logbook?entity_id=" + this.entityId;
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
${isComponentLoaded(this.hass, "logbook")
|
${isComponentLoaded(this.hass, "logbook")
|
||||||
? this._error
|
? this._error
|
||||||
@ -61,6 +63,16 @@ export class MoreInfoLogbook extends LitElement {
|
|||||||
`
|
`
|
||||||
: this._logbookEntries.length
|
: this._logbookEntries.length
|
||||||
? html`
|
? html`
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">
|
||||||
|
${this.hass.localize("ui.dialogs.more_info_control.logbook")}
|
||||||
|
</div>
|
||||||
|
<a href=${href} @click=${this._close}
|
||||||
|
>${this.hass.localize(
|
||||||
|
"ui.dialogs.more_info_control.show_more"
|
||||||
|
)}</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
<ha-logbook
|
<ha-logbook
|
||||||
narrow
|
narrow
|
||||||
no-icon
|
no-icon
|
||||||
@ -81,11 +93,6 @@ export class MoreInfoLogbook extends LitElement {
|
|||||||
|
|
||||||
protected firstUpdated(): void {
|
protected firstUpdated(): void {
|
||||||
this._fetchUserPromise = this._fetchUserNames();
|
this._fetchUserPromise = this._fetchUserNames();
|
||||||
this.addEventListener("click", (ev) => {
|
|
||||||
if ((ev.composedPath()[0] as HTMLElement).tagName === "A") {
|
|
||||||
setTimeout(() => closeDialog("ha-more-info-dialog"), 500);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected updated(changedProps: PropertyValues): void {
|
protected updated(changedProps: PropertyValues): void {
|
||||||
@ -182,6 +189,10 @@ export class MoreInfoLogbook extends LitElement {
|
|||||||
this._userIdToName = userIdToName;
|
this._userIdToName = userIdToName;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _close(): void {
|
||||||
|
setTimeout(() => fireEvent(this, "closed"), 500);
|
||||||
|
}
|
||||||
|
|
||||||
static get styles() {
|
static get styles() {
|
||||||
return [
|
return [
|
||||||
haStyle,
|
haStyle,
|
||||||
@ -203,6 +214,27 @@ export class MoreInfoLogbook extends LitElement {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.header > a,
|
||||||
|
a:visited {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-family: var(--paper-font-title_-_font-family);
|
||||||
|
-webkit-font-smoothing: var(
|
||||||
|
--paper-font-title_-_-webkit-font-smoothing
|
||||||
|
);
|
||||||
|
font-size: var(--paper-font-title_-_font-size);
|
||||||
|
font-weight: var(--paper-font-title_-_font-weight);
|
||||||
|
letter-spacing: var(--paper-font-title_-_letter-spacing);
|
||||||
|
line-height: var(--paper-font-title_-_line-height);
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@ -12,6 +12,7 @@ import {
|
|||||||
} from "date-fns";
|
} from "date-fns";
|
||||||
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 { extractSearchParam } 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/entity/ha-entity-picker";
|
import "../../components/entity/ha-entity-picker";
|
||||||
@ -136,6 +137,8 @@ class HaPanelHistory extends LitElement {
|
|||||||
[this.hass.localize("ui.components.date-range-picker.ranges.last_week")]:
|
[this.hass.localize("ui.components.date-range-picker.ranges.last_week")]:
|
||||||
[addDays(weekStart, -7), addDays(weekEnd, -7)],
|
[addDays(weekStart, -7), addDays(weekEnd, -7)],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this._entityId = extractSearchParam("entity_id") ?? "";
|
||||||
}
|
}
|
||||||
|
|
||||||
protected updated(changedProps: PropertyValues) {
|
protected updated(changedProps: PropertyValues) {
|
||||||
|
@ -222,6 +222,7 @@ class HaLogbook extends LitElement {
|
|||||||
}?run_id=${
|
}?run_id=${
|
||||||
this.traceContexts[item.context_id!].run_id
|
this.traceContexts[item.context_id!].run_id
|
||||||
}`}
|
}`}
|
||||||
|
@click=${this._close}
|
||||||
>${this.hass.localize(
|
>${this.hass.localize(
|
||||||
"ui.components.logbook.show_trace"
|
"ui.components.logbook.show_trace"
|
||||||
)}</a
|
)}</a
|
||||||
@ -254,6 +255,10 @@ class HaLogbook extends LitElement {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _close(): void {
|
||||||
|
setTimeout(() => fireEvent(this, "closed"), 500);
|
||||||
|
}
|
||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return [
|
return [
|
||||||
haStyle,
|
haStyle,
|
||||||
|
@ -33,6 +33,7 @@ import "../../layouts/ha-app-layout";
|
|||||||
import { haStyle } from "../../resources/styles";
|
import { haStyle } from "../../resources/styles";
|
||||||
import { HomeAssistant } from "../../types";
|
import { HomeAssistant } from "../../types";
|
||||||
import "./ha-logbook";
|
import "./ha-logbook";
|
||||||
|
import { extractSearchParam } from "../../common/url/search-params";
|
||||||
|
|
||||||
@customElement("ha-panel-logbook")
|
@customElement("ha-panel-logbook")
|
||||||
export class HaPanelLogbook extends LitElement {
|
export class HaPanelLogbook extends LitElement {
|
||||||
@ -158,6 +159,8 @@ export class HaPanelLogbook extends LitElement {
|
|||||||
[this.hass.localize("ui.components.date-range-picker.ranges.last_week")]:
|
[this.hass.localize("ui.components.date-range-picker.ranges.last_week")]:
|
||||||
[addDays(weekStart, -7), addDays(weekEnd, -7)],
|
[addDays(weekStart, -7), addDays(weekEnd, -7)],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this._entityId = extractSearchParam("entity_id") ?? "";
|
||||||
}
|
}
|
||||||
|
|
||||||
protected updated(changedProps: PropertyValues<this>) {
|
protected updated(changedProps: PropertyValues<this>) {
|
||||||
|
@ -628,8 +628,10 @@
|
|||||||
"edit": "Edit entity",
|
"edit": "Edit entity",
|
||||||
"details": "Details",
|
"details": "Details",
|
||||||
"history": "History",
|
"history": "History",
|
||||||
|
"logbook": "Logbook",
|
||||||
"last_changed": "Last changed",
|
"last_changed": "Last changed",
|
||||||
"last_updated": "Last updated",
|
"last_updated": "Last updated",
|
||||||
|
"show_more": "Show more",
|
||||||
"script": {
|
"script": {
|
||||||
"last_action": "Last action",
|
"last_action": "Last action",
|
||||||
"last_triggered": "Last triggered"
|
"last_triggered": "Last triggered"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user