From 9d41dbb9a80be72a63276ec607bb72d74af23dd6 Mon Sep 17 00:00:00 2001 From: boern99 Date: Mon, 9 Dec 2024 18:06:37 +0000 Subject: [PATCH 01/11] date-range-picker prev and next design --- src/components/ha-date-range-picker.ts | 212 ++++++++++--------------- src/components/ha-textarea.ts | 6 + 2 files changed, 90 insertions(+), 128 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 12601e2a4b50..9a397f41ad80 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -6,7 +6,6 @@ import { mdiCalendar } from "@mdi/js"; import { addDays, addMonths, - addYears, endOfDay, endOfMonth, endOfWeek, @@ -19,6 +18,11 @@ import { addMilliseconds, subMilliseconds, roundToNearestHours, + isFirstDayOfMonth, + isLastDayOfMonth, + subMonths, + differenceInMonths, + isThisYear, } from "date-fns"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -26,14 +30,16 @@ import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import { calcDate } from "../common/datetime/calc_date"; import { firstWeekdayIndex } from "../common/datetime/first_weekday"; -import { formatDate } from "../common/datetime/format_date"; -import { formatDateTime } from "../common/datetime/format_date_time"; +import { + formatShortDateTimeWithYear, + formatShortDateTime, +} from "../common/datetime/format_date_time"; + import { useAmPm } from "../common/datetime/use_am_pm"; import type { HomeAssistant } from "../types"; import "./date-range-picker"; import "./ha-icon-button"; -import "./ha-svg-icon"; -import "./ha-textfield"; +import "./ha-textarea"; import "./ha-icon-button-next"; import "./ha-icon-button-prev"; @@ -141,9 +147,6 @@ export class HaDateRangePicker extends LitElement { [this.hass.localize( "ui.components.date-range-picker.ranges.this_week" )]: [weekStart, weekEnd], - [this.hass.localize( - "ui.components.date-range-picker.ranges.last_week" - )]: [addDays(weekStart, -7), addDays(weekEnd, -7)], ...(this.extendedPresets ? { [this.hass.localize( @@ -168,28 +171,6 @@ export class HaDateRangePicker extends LitElement { } ), ], - [this.hass.localize( - "ui.components.date-range-picker.ranges.last_month" - )]: [ - calcDate( - addMonths(today, -1), - startOfMonth, - this.hass.locale, - this.hass.config, - { - weekStartsOn, - } - ), - calcDate( - addMonths(today, -1), - endOfMonth, - this.hass.locale, - this.hass.config, - { - weekStartsOn, - } - ), - ], [this.hass.localize( "ui.components.date-range-picker.ranges.this_year" )]: [ @@ -206,28 +187,6 @@ export class HaDateRangePicker extends LitElement { weekStartsOn, }), ], - [this.hass.localize( - "ui.components.date-range-picker.ranges.last_year" - )]: [ - calcDate( - addYears(today, -1), - startOfYear, - this.hass.locale, - this.hass.config, - { - weekStartsOn, - } - ), - calcDate( - addYears(today, -1), - endOfYear, - this.hass.locale, - this.hass.config, - { - weekStartsOn, - } - ), - ], } : {}), }; @@ -261,51 +220,44 @@ export class HaDateRangePicker extends LitElement { >
${!this.minimal - ? html` - - - - + > + + Date: Tue, 10 Dec 2024 16:31:16 +0000 Subject: [PATCH 02/11] correct width and margins --- src/components/ha-date-range-picker.ts | 6 ++++-- src/panels/history/ha-panel-history.ts | 2 +- src/panels/logbook/ha-panel-logbook.ts | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 9a397f41ad80..8490b9945ec9 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -34,7 +34,6 @@ import { formatShortDateTimeWithYear, formatShortDateTime, } from "../common/datetime/format_date_time"; - import { useAmPm } from "../common/datetime/use_am_pm"; import type { HomeAssistant } from "../types"; import "./date-range-picker"; @@ -407,7 +406,9 @@ export class HaDateRangePicker extends LitElement { static get styles(): CSSResultGroup { return css` - + ha-icon-button-prev { + margin-right:8px; + } ha-icon-button { direction: var(--direction); @@ -432,6 +433,7 @@ export class HaDateRangePicker extends LitElement { ha-textarea { display: inline-block; width: 340px; + margin-right: 8px; } @media only screen and (max-width: 460px) { ha-textarea { diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index 1a735413c33e..ffaceaabc036 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -772,10 +772,10 @@ class HaPanelHistory extends LitElement { flex-direction: column; } ha-date-range-picker { - margin-right: 0; margin-inline-end: 0; margin-inline-start: initial; width: 100%; + margin-bottom: 8px; } } diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts index 34d6da0f342f..3ecdf8d309f0 100644 --- a/src/panels/logbook/ha-panel-logbook.ts +++ b/src/panels/logbook/ha-panel-logbook.ts @@ -301,7 +301,7 @@ export class HaPanelLogbook extends LitElement { margin-right: 16px; margin-inline-end: 16px; margin-inline-start: initial; - max-width: 100%; + width: 100%; direction: var(--direction); } From 2e91057ac80b5061daeb7a3608267ea56c4e7ca5 Mon Sep 17 00:00:00 2001 From: boern99 Date: Tue, 10 Dec 2024 16:57:45 +0000 Subject: [PATCH 03/11] logbook width correction --- src/panels/logbook/ha-panel-logbook.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts index 3ecdf8d309f0..cfca7256001d 100644 --- a/src/panels/logbook/ha-panel-logbook.ts +++ b/src/panels/logbook/ha-panel-logbook.ts @@ -301,10 +301,16 @@ export class HaPanelLogbook extends LitElement { margin-right: 16px; margin-inline-end: 16px; margin-inline-start: initial; - width: 100%; + max-width: 100%; direction: var(--direction); } + @media all and (max-width: 870px) { + ha-date-range-picker { + width: 100%; + } + } + :host([narrow]) ha-date-range-picker { margin-right: 0; margin-inline-end: 0; From 023647788c45bb116f5bd99056a4b64b16ad154b Mon Sep 17 00:00:00 2001 From: boern99 <36338790+boern99@users.noreply.github.com> Date: Wed, 11 Dec 2024 11:27:41 +0100 Subject: [PATCH 04/11] Update src/components/ha-date-range-picker.ts Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com> --- src/components/ha-date-range-picker.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 8490b9945ec9..b7c54aefec9b 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -253,7 +253,6 @@ export class HaDateRangePicker extends LitElement { > From 3a94afad46f9e87ee7f290e177e24cdbf7d89a34 Mon Sep 17 00:00:00 2001 From: boern99 <36338790+boern99@users.noreply.github.com> Date: Wed, 11 Dec 2024 11:27:55 +0100 Subject: [PATCH 05/11] Update src/components/ha-date-range-picker.ts Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com> --- src/components/ha-date-range-picker.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index b7c54aefec9b..79a98ba6041a 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -258,7 +258,6 @@ export class HaDateRangePicker extends LitElement { ` From 3391d935f30928c3e27f477e2272d24d9867ca37 Mon Sep 17 00:00:00 2001 From: boern99 <36338790+boern99@users.noreply.github.com> Date: Wed, 11 Dec 2024 11:28:01 +0100 Subject: [PATCH 06/11] Update src/components/ha-date-range-picker.ts Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com> --- 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 79a98ba6041a..21386fd6cc26 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -405,7 +405,7 @@ export class HaDateRangePicker extends LitElement { static get styles(): CSSResultGroup { return css` ha-icon-button-prev { - margin-right:8px; + margin-right: 8px; } ha-icon-button { From a7c3e0c60b7f0e291fb03f3ccd73265eec01f80e Mon Sep 17 00:00:00 2001 From: boern99 Date: Wed, 11 Dec 2024 11:25:58 +0000 Subject: [PATCH 07/11] changes from comments --- src/components/ha-date-range-picker.ts | 8 ++++++-- src/components/ha-textarea.ts | 2 +- src/panels/history/ha-panel-history.ts | 2 -- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 21386fd6cc26..142996ace70c 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -220,7 +220,7 @@ export class HaDateRangePicker extends LitElement {
${!this.minimal ? html` Date: Thu, 12 Dec 2024 16:46:48 +0000 Subject: [PATCH 08/11] share date-range logic for energy and history / logbook --- src/common/datetime/calc_timespan.ts | 65 ++++++++++++++ src/components/ha-date-range-picker.ts | 64 +------------- .../components/hui-energy-period-selector.ts | 86 ++----------------- 3 files changed, 74 insertions(+), 141 deletions(-) create mode 100644 src/common/datetime/calc_timespan.ts diff --git a/src/common/datetime/calc_timespan.ts b/src/common/datetime/calc_timespan.ts new file mode 100644 index 000000000000..f0ae31bfec12 --- /dev/null +++ b/src/common/datetime/calc_timespan.ts @@ -0,0 +1,65 @@ +import { + addMonths, + differenceInMilliseconds, + addMilliseconds, + subMilliseconds, + roundToNearestHours, + isFirstDayOfMonth, + isLastDayOfMonth, + subMonths, + differenceInMonths, +} from "date-fns"; + +export function handleNext(startDate: Date, endDate: Date): [Date, Date] { + let dateRange: [Date, Date]; + if (isFirstDayOfMonth(startDate) && isLastDayOfMonth(endDate)) { + dateRange = [ + roundToNearestHours(endDate), + subMilliseconds( + addMonths( + roundToNearestHours(endDate), + differenceInMonths(addMilliseconds(endDate, 1), startDate) + ), + 1 + ), + ]; + } else { + dateRange = [ + roundToNearestHours(endDate), + subMilliseconds( + roundToNearestHours( + addMilliseconds( + endDate, + Math.max(3600000, differenceInMilliseconds(endDate, startDate)) + ) + ), + 1 + ), + ]; + } + return dateRange; +} + +export function handlePrev(startDate: Date, endDate: Date): [Date, Date] { + let dateRange: [Date, Date]; + if (isFirstDayOfMonth(startDate) && isLastDayOfMonth(endDate)) { + dateRange = [ + subMonths( + startDate, + differenceInMonths(addMilliseconds(endDate, 1), startDate) + ), + subMilliseconds(roundToNearestHours(startDate), 1), + ]; + } else { + dateRange = [ + roundToNearestHours( + subMilliseconds( + startDate, + Math.max(3600000, differenceInMilliseconds(endDate, startDate)) + ) + ), + subMilliseconds(roundToNearestHours(startDate), 1), + ]; + } + return dateRange; +} diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 142996ace70c..adc855828d41 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 } from "@mdi/js"; import { addDays, - addMonths, endOfDay, endOfMonth, endOfWeek, @@ -14,14 +13,6 @@ import { startOfMonth, startOfWeek, startOfYear, - differenceInMilliseconds, - addMilliseconds, - subMilliseconds, - roundToNearestHours, - isFirstDayOfMonth, - isLastDayOfMonth, - subMonths, - differenceInMonths, isThisYear, } from "date-fns"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; @@ -30,6 +21,7 @@ import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import { calcDate } from "../common/datetime/calc_date"; import { firstWeekdayIndex } from "../common/datetime/first_weekday"; +import { handlePrev, handleNext } from "../common/datetime/calc_timespan"; import { formatShortDateTimeWithYear, formatShortDateTime, @@ -296,64 +288,14 @@ export class HaDateRangePicker extends LitElement { } private _handleNext(): void { - let dateRange: [Date, Date]; - if (isFirstDayOfMonth(this.startDate) && isLastDayOfMonth(this.endDate)) { - dateRange = [ - roundToNearestHours(this.endDate), - subMilliseconds( - addMonths( - roundToNearestHours(this.endDate), - differenceInMonths(addMilliseconds(this.endDate, 1), this.startDate) - ), - 1 - ), - ]; - } else { - dateRange = [ - roundToNearestHours(this.endDate), - subMilliseconds( - roundToNearestHours( - addMilliseconds( - this.endDate, - Math.max( - 3600000, - differenceInMilliseconds(this.endDate, this.startDate) - ) - ) - ), - 1 - ), - ]; - } + const dateRange = handleNext(this.startDate, this.endDate); const dateRangePicker = this._dateRangePicker; dateRangePicker.clickRange(dateRange); dateRangePicker.clickedApply(); } private _handlePrev(): void { - let dateRange: [Date, Date]; - if (isFirstDayOfMonth(this.startDate) && isLastDayOfMonth(this.endDate)) { - dateRange = [ - subMonths( - this.startDate, - differenceInMonths(addMilliseconds(this.endDate, 1), this.startDate) - ), - subMilliseconds(roundToNearestHours(this.startDate), 1), - ]; - } else { - dateRange = [ - roundToNearestHours( - subMilliseconds( - this.startDate, - Math.max( - 3600000, - differenceInMilliseconds(this.endDate, this.startDate) - ) - ) - ), - subMilliseconds(roundToNearestHours(this.startDate), 1), - ]; - } + const dateRange = handlePrev(this.startDate, this.endDate); const dateRangePicker = this._dateRangePicker; dateRangePicker.clickRange(dateRange); dateRangePicker.clickedApply(); diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index ccd7253ab780..068294026b9e 100644 --- a/src/panels/lovelace/components/hui-energy-period-selector.ts +++ b/src/panels/lovelace/components/hui-energy-period-selector.ts @@ -2,8 +2,6 @@ import "@material/mwc-button/mwc-button"; import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical } from "@mdi/js"; import { - addDays, - addMonths, differenceInDays, differenceInMonths, endOfDay, @@ -32,6 +30,7 @@ import { calcDateDifferenceProperty, } from "../../../common/datetime/calc_date"; import { firstWeekdayIndex } from "../../../common/datetime/first_weekday"; +import { handlePrev, handleNext } from "../../../common/datetime/calc_timespan"; import { formatDate, formatDateMonthYear, @@ -512,84 +511,11 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { private _shift(forward: boolean) { if (!this._startDate) return; - - let start: Date; - let end: Date; - if ( - (calcDateProperty( - this._startDate, - isFirstDayOfMonth, - this.hass.locale, - this.hass.config - ) as boolean) && - (calcDateProperty( - this._endDate!, - isLastDayOfMonth, - this.hass.locale, - this.hass.config - ) as boolean) - ) { - // Shift date range with respect to month/year selection - const difference = - ((calcDateDifferenceProperty( - this._endDate!, - this._startDate, - differenceInMonths, - this.hass.locale, - this.hass.config - ) as number) + - 1) * - (forward ? 1 : -1); - start = calcDate( - this._startDate, - addMonths, - this.hass.locale, - this.hass.config, - difference - ); - end = calcDate( - calcDate( - this._endDate!, - addMonths, - this.hass.locale, - this.hass.config, - difference - ), - endOfMonth, - this.hass.locale, - this.hass.config - ); - } else { - // Shift date range by period length - const difference = - ((calcDateDifferenceProperty( - this._endDate!, - this._startDate, - differenceInDays, - this.hass.locale, - this.hass.config - ) as number) + - 1) * - (forward ? 1 : -1); - start = calcDate( - this._startDate, - addDays, - this.hass.locale, - this.hass.config, - difference - ); - end = calcDate( - this._endDate!, - addDays, - this.hass.locale, - this.hass.config, - difference - ); - } - - this._startDate = start; - this._endDate = end; - + const dateRange = forward + ? handleNext(this._startDate, this._endDate!) + : handlePrev(this._startDate, this._endDate!); + this._startDate = dateRange[0]; + this._endDate = dateRange[1]; this._updateCollectionPeriod(); } From de88aa6cbf1aa3c34845429c70372cff46d71ee0 Mon Sep 17 00:00:00 2001 From: boern99 Date: Fri, 13 Dec 2024 08:02:50 +0000 Subject: [PATCH 09/11] switch to energy-dashboard timespan-function --- src/common/datetime/calc_date.ts | 61 +++++++++++++++++ src/common/datetime/calc_timespan.ts | 65 ------------------- src/components/ha-date-range-picker.ts | 30 ++++++--- .../components/hui-energy-period-selector.ts | 16 +++-- 4 files changed, 92 insertions(+), 80 deletions(-) delete mode 100644 src/common/datetime/calc_timespan.ts diff --git a/src/common/datetime/calc_date.ts b/src/common/datetime/calc_date.ts index c6b51dd9aa04..84d6fb2d1b60 100644 --- a/src/common/datetime/calc_date.ts +++ b/src/common/datetime/calc_date.ts @@ -1,3 +1,12 @@ +import { + addDays, + addMonths, + isFirstDayOfMonth, + isLastDayOfMonth, + differenceInDays, + differenceInMonths, + endOfMonth, +} from "date-fns"; import { toZonedTime, fromZonedTime } from "date-fns-tz"; import type { HassConfig } from "home-assistant-js-websocket"; import type { FrontendLocaleData } from "../../data/translation"; @@ -55,3 +64,55 @@ export const calcDateDifferenceProperty = ( ? toZonedTime(startDate, config.time_zone) : startDate ); + +export const shiftDateRange = ( + startDate: Date, + endDate: Date, + forward: boolean, + locale: FrontendLocaleData, + config: any +): { start: Date; end: Date } => { + let start: Date; + let end: Date; + if ( + (calcDateProperty( + startDate, + isFirstDayOfMonth, + locale, + config + ) as boolean) && + (calcDateProperty(endDate, isLastDayOfMonth, locale, config) as boolean) + ) { + const difference = + ((calcDateDifferenceProperty( + endDate, + startDate, + differenceInMonths, + locale, + config + ) as number) + + 1) * + (forward ? 1 : -1); + start = calcDate(startDate, addMonths, locale, config, difference); + end = calcDate( + calcDate(endDate, addMonths, locale, config, difference), + endOfMonth, + locale, + config + ); + } else { + const difference = + ((calcDateDifferenceProperty( + endDate, + startDate, + differenceInDays, + locale, + config + ) as number) + + 1) * + (forward ? 1 : -1); + start = calcDate(startDate, addDays, locale, config, difference); + end = calcDate(endDate, addDays, locale, config, difference); + } + return { start, end }; +}; diff --git a/src/common/datetime/calc_timespan.ts b/src/common/datetime/calc_timespan.ts deleted file mode 100644 index f0ae31bfec12..000000000000 --- a/src/common/datetime/calc_timespan.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { - addMonths, - differenceInMilliseconds, - addMilliseconds, - subMilliseconds, - roundToNearestHours, - isFirstDayOfMonth, - isLastDayOfMonth, - subMonths, - differenceInMonths, -} from "date-fns"; - -export function handleNext(startDate: Date, endDate: Date): [Date, Date] { - let dateRange: [Date, Date]; - if (isFirstDayOfMonth(startDate) && isLastDayOfMonth(endDate)) { - dateRange = [ - roundToNearestHours(endDate), - subMilliseconds( - addMonths( - roundToNearestHours(endDate), - differenceInMonths(addMilliseconds(endDate, 1), startDate) - ), - 1 - ), - ]; - } else { - dateRange = [ - roundToNearestHours(endDate), - subMilliseconds( - roundToNearestHours( - addMilliseconds( - endDate, - Math.max(3600000, differenceInMilliseconds(endDate, startDate)) - ) - ), - 1 - ), - ]; - } - return dateRange; -} - -export function handlePrev(startDate: Date, endDate: Date): [Date, Date] { - let dateRange: [Date, Date]; - if (isFirstDayOfMonth(startDate) && isLastDayOfMonth(endDate)) { - dateRange = [ - subMonths( - startDate, - differenceInMonths(addMilliseconds(endDate, 1), startDate) - ), - subMilliseconds(roundToNearestHours(startDate), 1), - ]; - } else { - dateRange = [ - roundToNearestHours( - subMilliseconds( - startDate, - Math.max(3600000, differenceInMilliseconds(endDate, startDate)) - ) - ), - subMilliseconds(roundToNearestHours(startDate), 1), - ]; - } - return dateRange; -} diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index adc855828d41..3246647370f5 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -19,9 +19,8 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; -import { calcDate } from "../common/datetime/calc_date"; +import { calcDate, shiftDateRange } from "../common/datetime/calc_date"; import { firstWeekdayIndex } from "../common/datetime/first_weekday"; -import { handlePrev, handleNext } from "../common/datetime/calc_timespan"; import { formatShortDateTimeWithYear, formatShortDateTime, @@ -287,15 +286,28 @@ export class HaDateRangePicker extends LitElement { `; } - private _handleNext(): void { - const dateRange = handleNext(this.startDate, this.endDate); - const dateRangePicker = this._dateRangePicker; - dateRangePicker.clickRange(dateRange); - dateRangePicker.clickedApply(); + private _handleNext(e): void { + if (e && e.stopPropagation) e.stopPropagation(); + this._shift(true); + } + + private _handlePrev(e): void { + if (e && e.stopPropagation) e.stopPropagation(); + this._shift(false); } - private _handlePrev(): void { - const dateRange = handlePrev(this.startDate, this.endDate); + private _shift(forward: boolean) { + if (!this.startDate) return; + const { start, end } = shiftDateRange( + this.startDate, + this.endDate, + forward, + this.hass.locale, + this.hass.config + ); + this.startDate = start; + this.endDate = end; + const dateRange = [start, end]; const dateRangePicker = this._dateRangePicker; dateRangePicker.clickRange(dateRange); dateRangePicker.clickedApply(); diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index 068294026b9e..d7419f7db888 100644 --- a/src/panels/lovelace/components/hui-energy-period-selector.ts +++ b/src/panels/lovelace/components/hui-energy-period-selector.ts @@ -28,9 +28,9 @@ import { calcDate, calcDateProperty, calcDateDifferenceProperty, + shiftDateRange, } from "../../../common/datetime/calc_date"; import { firstWeekdayIndex } from "../../../common/datetime/first_weekday"; -import { handlePrev, handleNext } from "../../../common/datetime/calc_timespan"; import { formatDate, formatDateMonthYear, @@ -511,11 +511,15 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { private _shift(forward: boolean) { if (!this._startDate) return; - const dateRange = forward - ? handleNext(this._startDate, this._endDate!) - : handlePrev(this._startDate, this._endDate!); - this._startDate = dateRange[0]; - this._endDate = dateRange[1]; + const { start, end } = shiftDateRange( + this._startDate, + this._endDate!, + forward, + this.hass.locale, + this.hass.config + ); + this._startDate = start; + this._endDate = end; this._updateCollectionPeriod(); } From 1e87d2306f7b62e2835b33d310457ba003a48ad5 Mon Sep 17 00:00:00 2001 From: boern99 Date: Fri, 13 Dec 2024 13:16:13 +0000 Subject: [PATCH 10/11] changed shiftDateRange to differenceInMilliseconds --- src/common/datetime/calc_date.ts | 10 +++++----- src/components/ha-date-range-picker.ts | 8 ++++---- src/translations/en.json | 5 +---- 3 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/common/datetime/calc_date.ts b/src/common/datetime/calc_date.ts index 84d6fb2d1b60..f298819d1163 100644 --- a/src/common/datetime/calc_date.ts +++ b/src/common/datetime/calc_date.ts @@ -1,9 +1,9 @@ import { - addDays, + addMilliseconds, addMonths, isFirstDayOfMonth, isLastDayOfMonth, - differenceInDays, + differenceInMilliseconds, differenceInMonths, endOfMonth, } from "date-fns"; @@ -105,14 +105,14 @@ export const shiftDateRange = ( ((calcDateDifferenceProperty( endDate, startDate, - differenceInDays, + differenceInMilliseconds, locale, config ) as number) + 1) * (forward ? 1 : -1); - start = calcDate(startDate, addDays, locale, config, difference); - end = calcDate(endDate, addDays, locale, config, difference); + start = calcDate(startDate, addMilliseconds, locale, config, difference); + end = calcDate(endDate, addMilliseconds, locale, config, difference); } return { start, end }; }; diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 3246647370f5..59abb5ad1446 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -286,13 +286,13 @@ export class HaDateRangePicker extends LitElement { `; } - private _handleNext(e): void { - if (e && e.stopPropagation) e.stopPropagation(); + private _handleNext(ev: MouseEvent): void { + if (ev && ev.stopPropagation) ev.stopPropagation(); this._shift(true); } - private _handlePrev(e): void { - if (e && e.stopPropagation) e.stopPropagation(); + private _handlePrev(ev: MouseEvent): void { + if (ev && ev.stopPropagation) ev.stopPropagation(); this._shift(false); } diff --git a/src/translations/en.json b/src/translations/en.json index 675e0ef796bb..56341ad32208 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -802,12 +802,9 @@ "today": "Today", "yesterday": "Yesterday", "this_week": "This week", - "last_week": "Last week", "this_quarter": "This quarter", "this_month": "This month", - "last_month": "Last month", - "this_year": "This year", - "last_year": "Last year" + "this_year": "This year" } }, "grid-size-picker": { From ee9c0f7307a57f6b9cd67678dee38a5895d024ff Mon Sep 17 00:00:00 2001 From: boern99 Date: Tue, 17 Dec 2024 11:19:28 +0000 Subject: [PATCH 11/11] used gap instead margin-right --- src/components/ha-date-range-picker.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 59abb5ad1446..0a7a8eeefaa8 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -362,9 +362,6 @@ export class HaDateRangePicker extends LitElement { static get styles(): CSSResultGroup { return css` - ha-icon-button-prev { - margin-right: 8px; - } ha-icon-button { direction: var(--direction); @@ -373,6 +370,7 @@ export class HaDateRangePicker extends LitElement { .date-range-inputs { display: flex; align-items: center; + gap: 8px; } .date-range-ranges { @@ -389,7 +387,6 @@ export class HaDateRangePicker extends LitElement { ha-textarea { display: inline-block; width: 340px; - margin-right: 8px; } @media only screen and (max-width: 460px) { ha-textarea {