Add navigation option from more-info to history (#9717)

This commit is contained in:
Philip Allgaier 2021-10-26 21:12:52 +02:00 committed by GitHub
parent e50d2e16a7
commit 06b1718ade
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 111 additions and 15 deletions

View File

@ -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 {

View File

@ -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);
}
`, `,
]; ];
} }

View File

@ -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) {

View File

@ -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,

View File

@ -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>) {

View File

@ -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"