diff --git a/src/common/datetime/calc_date.ts b/src/common/datetime/calc_date.ts index c6b51dd9aa04..f298819d1163 100644 --- a/src/common/datetime/calc_date.ts +++ b/src/common/datetime/calc_date.ts @@ -1,3 +1,12 @@ +import { + addMilliseconds, + addMonths, + isFirstDayOfMonth, + isLastDayOfMonth, + differenceInMilliseconds, + 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, + differenceInMilliseconds, + locale, + config + ) as number) + + 1) * + (forward ? 1 : -1); + 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 12601e2a4b50..0a7a8eeefaa8 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -5,8 +5,6 @@ import "@material/mwc-list/mwc-list-item"; import { mdiCalendar } from "@mdi/js"; import { addDays, - addMonths, - addYears, endOfDay, endOfMonth, endOfWeek, @@ -15,25 +13,23 @@ import { startOfMonth, startOfWeek, startOfYear, - differenceInMilliseconds, - addMilliseconds, - subMilliseconds, - roundToNearestHours, + isThisYear, } from "date-fns"; 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 { 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 +137,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 +161,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 +177,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,54 +210,49 @@ export class HaDateRangePicker extends LitElement { >
${!this.minimal - ? html` - - - - + > + + ` @@ -342,40 +286,28 @@ export class HaDateRangePicker extends LitElement { `; } - private _handleNext(): void { - const dateRange = [ - roundToNearestHours(this.endDate), - subMilliseconds( - roundToNearestHours( - addMilliseconds( - this.endDate, - Math.max( - 3600000, - differenceInMilliseconds(this.endDate, this.startDate) - ) - ) - ), - 1 - ), - ]; - const dateRangePicker = this._dateRangePicker; - dateRangePicker.clickRange(dateRange); - dateRangePicker.clickedApply(); + private _handleNext(ev: MouseEvent): void { + if (ev && ev.stopPropagation) ev.stopPropagation(); + this._shift(true); } - private _handlePrev(): void { - const dateRange = [ - roundToNearestHours( - subMilliseconds( - this.startDate, - Math.max( - 3600000, - differenceInMilliseconds(this.endDate, this.startDate) - ) - ) - ), - subMilliseconds(roundToNearestHours(this.startDate), 1), - ]; + private _handlePrev(ev: MouseEvent): void { + if (ev && ev.stopPropagation) ev.stopPropagation(); + this._shift(false); + } + + 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(); @@ -430,12 +362,6 @@ export class HaDateRangePicker extends LitElement { static get styles(): CSSResultGroup { return css` - ha-svg-icon { - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - direction: var(--direction); - } ha-icon-button { direction: var(--direction); @@ -444,6 +370,7 @@ export class HaDateRangePicker extends LitElement { .date-range-inputs { display: flex; align-items: center; + gap: 8px; } .date-range-ranges { @@ -457,17 +384,13 @@ export class HaDateRangePicker extends LitElement { border-top: 1px solid var(--divider-color); } - ha-textfield { + ha-textarea { display: inline-block; - max-width: 250px; - min-width: 220px; + width: 340px; } - - ha-textfield:last-child { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - direction: var(--direction); + @media only screen and (max-width: 460px) { + ha-textarea { + width: 100% } @media only screen and (max-width: 800px) { @@ -476,18 +399,6 @@ export class HaDateRangePicker extends LitElement { border-bottom: 1px solid var(--divider-color); } } - - @media only screen and (max-width: 500px) { - ha-textfield { - min-width: inherit; - } - - ha-svg-icon, - .prev, - .next { - display: none; - } - } `; } } diff --git a/src/components/ha-textarea.ts b/src/components/ha-textarea.ts index 7d10e3800d05..d531c4746f65 100644 --- a/src/components/ha-textarea.ts +++ b/src/components/ha-textarea.ts @@ -53,6 +53,12 @@ export class HaTextArea extends TextAreaBase { inset-inline-end: initial !important; transform-origin: var(--float-start) top; } + @media only screen and (min-width: 459px) { + :host([mobile-multiline]) .mdc-text-field__input { + white-space: nowrap; + max-height: 16px; + } + } `, ]; } diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index 1a735413c33e..e8356a94752f 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -772,10 +772,8 @@ 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..cfca7256001d 100644 --- a/src/panels/logbook/ha-panel-logbook.ts +++ b/src/panels/logbook/ha-panel-logbook.ts @@ -305,6 +305,12 @@ export class HaPanelLogbook extends LitElement { 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; diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index ccd7253ab780..d7419f7db888 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, @@ -30,6 +28,7 @@ import { calcDate, calcDateProperty, calcDateDifferenceProperty, + shiftDateRange, } from "../../../common/datetime/calc_date"; import { firstWeekdayIndex } from "../../../common/datetime/first_weekday"; import { @@ -512,84 +511,15 @@ 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 - ); - } - + const { start, end } = shiftDateRange( + this._startDate, + this._endDate!, + forward, + this.hass.locale, + this.hass.config + ); this._startDate = start; this._endDate = end; - this._updateCollectionPeriod(); } diff --git a/src/translations/en.json b/src/translations/en.json index bbc3ceb5089e..09e947b1cd1d 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": {