From 06b1718adebfb8c270fee2e0d4a4ba407474321a Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Tue, 26 Oct 2021 21:12:52 +0200 Subject: [PATCH] Add navigation option from more-info to history (#9717) --- src/dialogs/more-info/ha-more-info-history.ts | 67 ++++++++++++++++--- src/dialogs/more-info/ha-more-info-logbook.ts | 46 +++++++++++-- src/panels/history/ha-panel-history.ts | 3 + src/panels/logbook/ha-logbook.ts | 5 ++ src/panels/logbook/ha-panel-logbook.ts | 3 + src/translations/en.json | 2 + 6 files changed, 111 insertions(+), 15 deletions(-) diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts index 199e8e9490..31e1f0158a 100644 --- a/src/dialogs/more-info/ha-more-info-history.ts +++ b/src/dialogs/more-info/ha-more-info-history.ts @@ -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 { isComponentLoaded } from "../../common/config/is_component_loaded"; +import { fireEvent } from "../../common/dom/fire_event"; import { throttle } from "../../common/util/throttle"; import "../../components/chart/state-history-charts"; import { getRecentWithCache } from "../../data/cached-history"; import { HistoryResult } from "../../data/history"; import { HomeAssistant } from "../../types"; +declare global { + interface HASSDomEvents { + closed: undefined; + } +} + @customElement("ha-more-info-history") export class MoreInfoHistory extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -24,14 +31,26 @@ export class MoreInfoHistory extends LitElement { return html``; } + const href = "/history?entity_id=" + this.entityId; + return html`${isComponentLoaded(this.hass, "history") - ? html`` - : ""} `; + ? html`
+
+ ${this.hass.localize("ui.dialogs.more_info_control.history")} +
+ ${this.hass.localize( + "ui.dialogs.more_info_control.show_more" + )} +
+ ` + : ""}`; } protected updated(changedProps: PropertyValues): void { @@ -78,6 +97,38 @@ export class MoreInfoHistory extends LitElement { 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 { diff --git a/src/dialogs/more-info/ha-more-info-logbook.ts b/src/dialogs/more-info/ha-more-info-logbook.ts index 3f83804ff2..5bc353d677 100644 --- a/src/dialogs/more-info/ha-more-info-logbook.ts +++ b/src/dialogs/more-info/ha-more-info-logbook.ts @@ -1,16 +1,16 @@ import { css, html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../common/config/is_component_loaded"; +import { fireEvent } from "../../common/dom/fire_event"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { throttle } from "../../common/util/throttle"; import "../../components/ha-circular-progress"; -import { fetchUsers } from "../../data/user"; import { getLogbookData, LogbookEntry } from "../../data/logbook"; import { loadTraceContexts, TraceContexts } from "../../data/trace"; +import { fetchUsers } from "../../data/user"; import "../../panels/logbook/ha-logbook"; import { haStyle } from "../../resources/styles"; import { HomeAssistant } from "../../types"; -import { closeDialog } from "../make-dialog-manager"; @customElement("ha-more-info-logbook") export class MoreInfoLogbook extends LitElement { @@ -44,6 +44,8 @@ export class MoreInfoLogbook extends LitElement { return html``; } + const href = "/logbook?entity_id=" + this.entityId; + return html` ${isComponentLoaded(this.hass, "logbook") ? this._error @@ -61,6 +63,16 @@ export class MoreInfoLogbook extends LitElement { ` : this._logbookEntries.length ? html` +
+
+ ${this.hass.localize("ui.dialogs.more_info_control.logbook")} +
+ ${this.hass.localize( + "ui.dialogs.more_info_control.show_more" + )} +
{ - if ((ev.composedPath()[0] as HTMLElement).tagName === "A") { - setTimeout(() => closeDialog("ha-more-info-dialog"), 500); - } - }); } protected updated(changedProps: PropertyValues): void { @@ -182,6 +189,10 @@ export class MoreInfoLogbook extends LitElement { this._userIdToName = userIdToName; } + private _close(): void { + setTimeout(() => fireEvent(this, "closed"), 500); + } + static get styles() { return [ haStyle, @@ -203,6 +214,27 @@ export class MoreInfoLogbook extends LitElement { display: flex; 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); + } `, ]; } diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index aa6b043e64..1e37f7a7f7 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -12,6 +12,7 @@ import { } from "date-fns"; import { css, html, LitElement, PropertyValues } from "lit"; import { property, state } from "lit/decorators"; +import { extractSearchParam } from "../../common/url/search-params"; import { computeRTL } from "../../common/util/compute_rtl"; import "../../components/chart/state-history-charts"; 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")]: [addDays(weekStart, -7), addDays(weekEnd, -7)], }; + + this._entityId = extractSearchParam("entity_id") ?? ""; } protected updated(changedProps: PropertyValues) { diff --git a/src/panels/logbook/ha-logbook.ts b/src/panels/logbook/ha-logbook.ts index 2ac78f9515..87d3d311ac 100644 --- a/src/panels/logbook/ha-logbook.ts +++ b/src/panels/logbook/ha-logbook.ts @@ -222,6 +222,7 @@ class HaLogbook extends LitElement { }?run_id=${ this.traceContexts[item.context_id!].run_id }`} + @click=${this._close} >${this.hass.localize( "ui.components.logbook.show_trace" )} fireEvent(this, "closed"), 500); + } + static get styles(): CSSResultGroup { return [ haStyle, diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts index 8c8ff39e89..ed9fb3e690 100644 --- a/src/panels/logbook/ha-panel-logbook.ts +++ b/src/panels/logbook/ha-panel-logbook.ts @@ -33,6 +33,7 @@ import "../../layouts/ha-app-layout"; import { haStyle } from "../../resources/styles"; import { HomeAssistant } from "../../types"; import "./ha-logbook"; +import { extractSearchParam } from "../../common/url/search-params"; @customElement("ha-panel-logbook") 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")]: [addDays(weekStart, -7), addDays(weekEnd, -7)], }; + + this._entityId = extractSearchParam("entity_id") ?? ""; } protected updated(changedProps: PropertyValues) { diff --git a/src/translations/en.json b/src/translations/en.json index 29660a7d7b..98a3b73d8c 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -628,8 +628,10 @@ "edit": "Edit entity", "details": "Details", "history": "History", + "logbook": "Logbook", "last_changed": "Last changed", "last_updated": "Last updated", + "show_more": "Show more", "script": { "last_action": "Last action", "last_triggered": "Last triggered"