From ba04de55a75ec3d334136d935f222117f2b1299c Mon Sep 17 00:00:00 2001 From: boern99 Date: Fri, 20 Dec 2024 13:11:26 +0000 Subject: [PATCH 1/9] increase and decrease Timespan for History and Logbook --- src/components/ha-date-range-picker.ts | 123 ++++++++++++++++++++++++- src/components/ha-textarea.ts | 2 +- src/translations/en.json | 2 + 3 files changed, 121 insertions(+), 6 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 0a7a8eeefaa8..7027493fbcb6 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -2,9 +2,10 @@ import "@material/mwc-button/mwc-button"; import "@material/mwc-list/mwc-list"; import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; -import { mdiCalendar } from "@mdi/js"; +import { mdiCalendar, mdiMagnifyPlus, mdiMagnifyMinus } from "@mdi/js"; import { addDays, + subHours, endOfDay, endOfMonth, endOfWeek, @@ -14,6 +15,10 @@ import { startOfWeek, startOfYear, isThisYear, + differenceInMilliseconds, + roundToNearestHours, + subMilliseconds, + addMilliseconds, } from "date-fns"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -246,6 +251,20 @@ export class HaDateRangePicker extends LitElement { @click=${this._handleInputClick} readonly > + + 24 * 60 * 60 * 1000 * 3) { + dateRange = [ + calcDate( + this.startDate > new Date() + ? subHours(new Date(), 1) + : addMilliseconds(this.startDate, diff / 3 + 1), + startOfDay, + this.hass.locale, + this.hass.config + ), + calcDate( + this.endDate > new Date() + ? new Date() + : subMilliseconds(this.endDate, diff / 3), + endOfDay, + this.hass.locale, + this.hass.config + ), + ]; + } else { + dateRange = [ + calcDate( + this.startDate > new Date() + ? subHours(new Date(), 1) + : addMilliseconds(this.startDate, diff / 3), + roundToNearestHours, + this.hass.locale, + this.hass.config + ), + calcDate( + this.endDate > new Date() + ? new Date() + : subMilliseconds(subMilliseconds(this.endDate, diff / 3), 1), + roundToNearestHours, + this.hass.locale, + this.hass.config + ), + ]; + } + const dateRangePicker = this._dateRangePicker; + dateRangePicker.clickRange(dateRange); + dateRangePicker.clickedApply(); + } + private _setDateRange(ev: CustomEvent) { const dateRange = Object.values(this.ranges || this._ranges!)[ ev.detail.index @@ -362,7 +473,6 @@ export class HaDateRangePicker extends LitElement { static get styles(): CSSResultGroup { return css` - ha-icon-button { direction: var(--direction); } @@ -389,10 +499,13 @@ export class HaDateRangePicker extends LitElement { width: 340px; } @media only screen and (max-width: 460px) { - ha-textarea { - width: 100% + ha-textarea { + width: 100%; + } + .date-range-inputs { + gap: 0px; + } } - @media only screen and (max-width: 800px) { .date-range-ranges { border-right: none; diff --git a/src/components/ha-textarea.ts b/src/components/ha-textarea.ts index d531c4746f65..5cb8fa99b9ff 100644 --- a/src/components/ha-textarea.ts +++ b/src/components/ha-textarea.ts @@ -53,7 +53,7 @@ export class HaTextArea extends TextAreaBase { inset-inline-end: initial !important; transform-origin: var(--float-start) top; } - @media only screen and (min-width: 459px) { + @media only screen and (min-width: 580px) { :host([mobile-multiline]) .mdc-text-field__input { white-space: nowrap; max-height: 16px; diff --git a/src/translations/en.json b/src/translations/en.json index adbd83b5d6fd..af5196cffb35 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -798,6 +798,8 @@ "end_date": "End date", "select": "Select", "select_date_range": "Select time period", + "zoom_in": "Zoom In: Reduce time period", + "zoom_out": "Zoom Out: Increase time period", "ranges": { "today": "Today", "yesterday": "Yesterday", From 77df80dc8f72a3a2b71e64ce4c90bc5dc6ae2805 Mon Sep 17 00:00:00 2001 From: boern99 Date: Fri, 20 Dec 2024 13:55:07 +0000 Subject: [PATCH 2/9] timespan minimum 1h --- src/components/ha-date-range-picker.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 7027493fbcb6..ee2b1507123e 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -5,6 +5,7 @@ import "@material/mwc-list/mwc-list-item"; import { mdiCalendar, mdiMagnifyPlus, mdiMagnifyMinus } from "@mdi/js"; import { addDays, + addHours, subHours, endOfDay, endOfMonth, @@ -19,6 +20,7 @@ import { roundToNearestHours, subMilliseconds, addMilliseconds, + hoursToMilliseconds, } from "date-fns"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -337,7 +339,7 @@ export class HaDateRangePicker extends LitElement { let dateRange: [Date, Date]; if ( differenceInMilliseconds(this.endDate, this.startDate) < - 24 * 60 * 60 * 1000 - 1 + 24 * hoursToMilliseconds(1) - 1 ) { dateRange = [ calcDate( @@ -351,7 +353,7 @@ export class HaDateRangePicker extends LitElement { endOfDay, this.hass.locale, this.hass.config, - 24 * 60 * 60 * 1000 + 24 * hoursToMilliseconds(1) ), ]; } else { @@ -380,7 +382,8 @@ export class HaDateRangePicker extends LitElement { if (ev && ev.stopPropagation) ev.stopPropagation(); let dateRange: [Date, Date]; const diff = differenceInMilliseconds(this.endDate, this.startDate); - if (diff > 24 * 60 * 60 * 1000 * 3) { + + if (diff > 24 * hoursToMilliseconds(3)) { dateRange = [ calcDate( this.startDate > new Date() @@ -391,7 +394,7 @@ export class HaDateRangePicker extends LitElement { this.hass.config ), calcDate( - this.endDate > new Date() + this.startDate > new Date() ? new Date() : subMilliseconds(this.endDate, diff / 3), endOfDay, @@ -412,7 +415,9 @@ export class HaDateRangePicker extends LitElement { calcDate( this.endDate > new Date() ? new Date() - : subMilliseconds(subMilliseconds(this.endDate, diff / 3), 1), + : diff < hoursToMilliseconds(1) + ? addHours(this.startDate, 1) + : subMilliseconds(subMilliseconds(this.endDate, diff / 3), 1), roundToNearestHours, this.hass.locale, this.hass.config From 39f98d430bf36fc8bca1c8d84509deef8e03541a Mon Sep 17 00:00:00 2001 From: boern99 Date: Fri, 3 Jan 2025 11:59:42 +0000 Subject: [PATCH 3/9] improved ZoomIn for today --- src/components/ha-date-range-picker.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index ee2b1507123e..7c21c506e650 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -402,19 +402,20 @@ export class HaDateRangePicker extends LitElement { this.hass.config ), ]; - } else { + } else if ( + diff / 2 > hoursToMilliseconds(1) && + this.startDate < addHours(new Date(), 1) + ) { dateRange = [ calcDate( - this.startDate > new Date() - ? subHours(new Date(), 1) - : addMilliseconds(this.startDate, diff / 3), + addMilliseconds(this.startDate, diff / 3), roundToNearestHours, this.hass.locale, this.hass.config ), calcDate( this.endDate > new Date() - ? new Date() + ? addHours(new Date(), 1) : diff < hoursToMilliseconds(1) ? addHours(this.startDate, 1) : subMilliseconds(subMilliseconds(this.endDate, diff / 3), 1), From 4b4d9bfaeeb267fb117e36a0a6d9e1249785f2d8 Mon Sep 17 00:00:00 2001 From: boern99 Date: Fri, 3 Jan 2025 12:10:08 +0000 Subject: [PATCH 4/9] fix dateRange Variable assigned --- src/components/ha-date-range-picker.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 7c21c506e650..ea66f90167d1 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -382,7 +382,6 @@ export class HaDateRangePicker extends LitElement { if (ev && ev.stopPropagation) ev.stopPropagation(); let dateRange: [Date, Date]; const diff = differenceInMilliseconds(this.endDate, this.startDate); - if (diff > 24 * hoursToMilliseconds(3)) { dateRange = [ calcDate( @@ -424,6 +423,8 @@ export class HaDateRangePicker extends LitElement { this.hass.config ), ]; + } else { + return; } const dateRangePicker = this._dateRangePicker; dateRangePicker.clickRange(dateRange); From ca64a387aeed5cb917cedca09da57e43d3cdecff Mon Sep 17 00:00:00 2001 From: boern99 Date: Sat, 4 Jan 2025 09:44:11 +0000 Subject: [PATCH 5/9] simplified --- src/components/ha-date-range-picker.ts | 67 ++++++-------------------- 1 file changed, 15 insertions(+), 52 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index ea66f90167d1..bd5b1aa1bae9 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -5,7 +5,6 @@ import "@material/mwc-list/mwc-list-item"; import { mdiCalendar, mdiMagnifyPlus, mdiMagnifyMinus } from "@mdi/js"; import { addDays, - addHours, subHours, endOfDay, endOfMonth, @@ -365,12 +364,7 @@ export class HaDateRangePicker extends LitElement { this.hass.locale, this.hass.config ), - calcDate( - addMilliseconds(this.endDate, diff - 1), - endOfDay, - this.hass.locale, - this.hass.config - ), + this.endDate, ]; } const dateRangePicker = this._dateRangePicker; @@ -380,52 +374,21 @@ export class HaDateRangePicker extends LitElement { private _handleZoomIn(ev: MouseEvent): void { if (ev && ev.stopPropagation) ev.stopPropagation(); - let dateRange: [Date, Date]; - const diff = differenceInMilliseconds(this.endDate, this.startDate); - if (diff > 24 * hoursToMilliseconds(3)) { - dateRange = [ - calcDate( - this.startDate > new Date() - ? subHours(new Date(), 1) - : addMilliseconds(this.startDate, diff / 3 + 1), - startOfDay, - this.hass.locale, - this.hass.config - ), - calcDate( - this.startDate > new Date() - ? new Date() - : subMilliseconds(this.endDate, diff / 3), - endOfDay, - this.hass.locale, - this.hass.config - ), - ]; - } else if ( - diff / 2 > hoursToMilliseconds(1) && - this.startDate < addHours(new Date(), 1) - ) { - dateRange = [ - calcDate( - addMilliseconds(this.startDate, diff / 3), - roundToNearestHours, - this.hass.locale, - this.hass.config - ), - calcDate( - this.endDate > new Date() - ? addHours(new Date(), 1) - : diff < hoursToMilliseconds(1) - ? addHours(this.startDate, 1) - : subMilliseconds(subMilliseconds(this.endDate, diff / 3), 1), - roundToNearestHours, - this.hass.locale, - this.hass.config - ), - ]; - } else { - return; + if (this.startDate > subHours(new Date(), 1)) { + this.startDate = subHours(new Date(), 1); } + const diff = differenceInMilliseconds(this.endDate, this.startDate); + const dateRange = [ + calcDate( + addMilliseconds(this.startDate, diff / 2) > new Date() + ? subHours(new Date(), 0.5) + : addMilliseconds(this.startDate, diff / 2), + roundToNearestHours, + this.hass.locale, + this.hass.config + ), + this.endDate, + ]; const dateRangePicker = this._dateRangePicker; dateRangePicker.clickRange(dateRange); dateRangePicker.clickedApply(); From 04e82f3fb71b2b243b1df0111e1a04fc26e9e6bf Mon Sep 17 00:00:00 2001 From: boern99 Date: Sat, 4 Jan 2025 11:38:53 +0000 Subject: [PATCH 6/9] handleZoom to one function --- src/components/ha-date-range-picker.ts | 77 +++++++++----------------- 1 file changed, 27 insertions(+), 50 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index bd5b1aa1bae9..8e6af0116201 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -19,7 +19,7 @@ import { roundToNearestHours, subMilliseconds, addMilliseconds, - hoursToMilliseconds, + isToday, } from "date-fns"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -333,60 +333,37 @@ export class HaDateRangePicker extends LitElement { dateRangePicker.clickedApply(); } - private _handleZoomOut(ev: MouseEvent): void { + private _handleZoomIn(ev: MouseEvent): void { if (ev && ev.stopPropagation) ev.stopPropagation(); - let dateRange: [Date, Date]; - if ( - differenceInMilliseconds(this.endDate, this.startDate) < - 24 * hoursToMilliseconds(1) - 1 - ) { - dateRange = [ - calcDate( - this.startDate, - startOfDay, - this.hass.locale, - this.hass.config - ), - calcDate( - this.startDate, - endOfDay, - this.hass.locale, - this.hass.config, - 24 * hoursToMilliseconds(1) - ), - ]; - } else { - const diff = differenceInMilliseconds(this.endDate, this.startDate); - dateRange = [ - calcDate( - subMilliseconds(this.startDate, diff), - startOfDay, - this.hass.locale, - this.hass.config - ), - this.endDate, - ]; - } - const dateRangePicker = this._dateRangePicker; - dateRangePicker.clickRange(dateRange); - dateRangePicker.clickedApply(); + this._handleZoom(true); } - private _handleZoomIn(ev: MouseEvent): void { + private _handleZoomOut(ev: MouseEvent): void { if (ev && ev.stopPropagation) ev.stopPropagation(); - if (this.startDate > subHours(new Date(), 1)) { - this.startDate = subHours(new Date(), 1); - } - const diff = differenceInMilliseconds(this.endDate, this.startDate); + this._handleZoom(false); + } + + private _handleZoom(isZoomIn: boolean): void { + const diff = differenceInMilliseconds( + isToday(this.startDate) ? subHours(new Date(), 1) : this.endDate, + this.startDate + ); const dateRange = [ - calcDate( - addMilliseconds(this.startDate, diff / 2) > new Date() - ? subHours(new Date(), 0.5) - : addMilliseconds(this.startDate, diff / 2), - roundToNearestHours, - this.hass.locale, - this.hass.config - ), + isZoomIn + ? calcDate( + addMilliseconds(this.startDate, diff / 2) > new Date() + ? subHours(new Date(), 0.5) + : addMilliseconds(this.startDate, diff / 2), + roundToNearestHours, + this.hass.locale, + this.hass.config + ) + : calcDate( + subMilliseconds(this.startDate, diff), + startOfDay, + this.hass.locale, + this.hass.config + ), this.endDate, ]; const dateRangePicker = this._dateRangePicker; From 9b4686430bf94c8cf5fffef6b4fb3a7986b8acfb Mon Sep 17 00:00:00 2001 From: boern99 Date: Sat, 4 Jan 2025 12:49:59 +0000 Subject: [PATCH 7/9] fix startdate for today --- src/components/ha-date-range-picker.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 8e6af0116201..ac4697b808a1 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -345,7 +345,9 @@ export class HaDateRangePicker extends LitElement { private _handleZoom(isZoomIn: boolean): void { const diff = differenceInMilliseconds( - isToday(this.startDate) ? subHours(new Date(), 1) : this.endDate, + isToday(this.startDate) && this.endDate > new Date() + ? subHours(new Date(), 1) + : this.endDate, this.startDate ); const dateRange = [ @@ -353,7 +355,7 @@ export class HaDateRangePicker extends LitElement { ? calcDate( addMilliseconds(this.startDate, diff / 2) > new Date() ? subHours(new Date(), 0.5) - : addMilliseconds(this.startDate, diff / 2), + : subHours(addMilliseconds(this.startDate, diff / 2), 0.5), roundToNearestHours, this.hass.locale, this.hass.config From 1d7dc90ed1076ac59c4ffe56b6c9d67dc7e6b978 Mon Sep 17 00:00:00 2001 From: boern99 Date: Mon, 13 Jan 2025 16:01:02 +0000 Subject: [PATCH 8/9] Patch for #23710 --- src/components/ha-date-range-picker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 1913bade7085..f6d4cf84855b 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -229,7 +229,7 @@ export class HaDateRangePicker extends LitElement { this.hass.locale, this.hass.config )) + - (window.innerWidth >= 459 ? " - " : " - \n") + + (window.innerWidth >= 580 ? " - " : " - \n") + (isThisYear(this.endDate) ? formatShortDateTime( this.endDate, From 6667a856ec10d1650b2007fc653361736404cede Mon Sep 17 00:00:00 2001 From: boern99 Date: Wed, 22 Jan 2025 21:45:43 +0000 Subject: [PATCH 9/9] prettier format --- src/components/ha-date-range-picker.ts | 65 +++++++++++++------------- 1 file changed, 32 insertions(+), 33 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index bfd6ea0acd61..6fb7eb9b3919 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -419,47 +419,46 @@ export class HaDateRangePicker extends LitElement { } static styles = css` + ha-icon-button { + direction: var(--direction); + } - ha-icon-button { - direction: var(--direction); - } - - .date-range-inputs { - display: flex; - align-items: center; - gap: 8px; - } + .date-range-inputs { + display: flex; + align-items: center; + gap: 8px; + } - .date-range-ranges { - border-right: 1px solid var(--divider-color); - } + .date-range-ranges { + border-right: 1px solid var(--divider-color); + } - .date-range-footer { - display: flex; - justify-content: flex-end; - padding: 8px; - border-top: 1px solid var(--divider-color); - } + .date-range-footer { + display: flex; + justify-content: flex-end; + padding: 8px; + border-top: 1px solid var(--divider-color); + } + ha-textarea { + display: inline-block; + width: 340px; + } + @media only screen and (max-width: 460px) { ha-textarea { - display: inline-block; - width: 340px; + width: 100%; } - @media only screen and (max-width: 460px) { - ha-textarea { - width: 100%; - } - .date-range-inputs { - gap: 0px; - } + .date-range-inputs { + gap: 0px; } - @media only screen and (max-width: 800px) { - .date-range-ranges { - border-right: none; - border-bottom: 1px solid var(--divider-color); - } + } + @media only screen and (max-width: 800px) { + .date-range-ranges { + border-right: none; + border-bottom: 1px solid var(--divider-color); } - `; + } + `; } declare global {