mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
Add Day to duration selector (#12125)
This commit is contained in:
parent
224df896a1
commit
dd963be723
@ -1,12 +1,13 @@
|
|||||||
import { LitElement, html, TemplateResult, css } from "lit";
|
|
||||||
import { customElement, property } from "lit/decorators";
|
|
||||||
import "./ha-select";
|
|
||||||
import "@material/mwc-list/mwc-list-item";
|
import "@material/mwc-list/mwc-list-item";
|
||||||
import "./ha-textfield";
|
import { css, html, LitElement, TemplateResult } from "lit";
|
||||||
|
import { customElement, property } from "lit/decorators";
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
import { stopPropagation } from "../common/dom/stop_propagation";
|
import { stopPropagation } from "../common/dom/stop_propagation";
|
||||||
|
import "./ha-select";
|
||||||
|
import "./ha-textfield";
|
||||||
|
|
||||||
export interface TimeChangedEvent {
|
export interface TimeChangedEvent {
|
||||||
|
days?: number;
|
||||||
hours: number;
|
hours: number;
|
||||||
minutes: number;
|
minutes: number;
|
||||||
seconds: number;
|
seconds: number;
|
||||||
@ -46,6 +47,11 @@ export class HaBaseTimeInput extends LitElement {
|
|||||||
*/
|
*/
|
||||||
@property({ type: Boolean }) disabled = false;
|
@property({ type: Boolean }) disabled = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* day
|
||||||
|
*/
|
||||||
|
@property({ type: Number }) days = 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* hour
|
* hour
|
||||||
*/
|
*/
|
||||||
@ -66,6 +72,11 @@ export class HaBaseTimeInput extends LitElement {
|
|||||||
*/
|
*/
|
||||||
@property({ type: Number }) milliseconds = 0;
|
@property({ type: Number }) milliseconds = 0;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Label for the day input
|
||||||
|
*/
|
||||||
|
@property() dayLabel = "";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Label for the hour input
|
* Label for the hour input
|
||||||
*/
|
*/
|
||||||
@ -96,6 +107,11 @@ export class HaBaseTimeInput extends LitElement {
|
|||||||
*/
|
*/
|
||||||
@property({ type: Boolean }) enableMillisecond = false;
|
@property({ type: Boolean }) enableMillisecond = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* show the day field
|
||||||
|
*/
|
||||||
|
@property({ type: Boolean }) enableDay = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* limit hours input
|
* limit hours input
|
||||||
*/
|
*/
|
||||||
@ -115,6 +131,29 @@ export class HaBaseTimeInput extends LitElement {
|
|||||||
return html`
|
return html`
|
||||||
${this.label ? html`<label>${this.label}</label>` : ""}
|
${this.label ? html`<label>${this.label}</label>` : ""}
|
||||||
<div class="time-input-wrap">
|
<div class="time-input-wrap">
|
||||||
|
${this.enableDay
|
||||||
|
? html`
|
||||||
|
<ha-textfield
|
||||||
|
id="day"
|
||||||
|
type="number"
|
||||||
|
inputmode="numeric"
|
||||||
|
.value=${this.days}
|
||||||
|
.label=${this.dayLabel}
|
||||||
|
name="days"
|
||||||
|
@input=${this._valueChanged}
|
||||||
|
@focus=${this._onFocus}
|
||||||
|
no-spinner
|
||||||
|
.required=${this.required}
|
||||||
|
.autoValidate=${this.autoValidate}
|
||||||
|
min="0"
|
||||||
|
.disabled=${this.disabled}
|
||||||
|
suffix=":"
|
||||||
|
class="hasSuffix"
|
||||||
|
>
|
||||||
|
</ha-textfield>
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
|
|
||||||
<ha-textfield
|
<ha-textfield
|
||||||
id="hour"
|
id="hour"
|
||||||
type="number"
|
type="number"
|
||||||
|
@ -5,6 +5,7 @@ import "./ha-base-time-input";
|
|||||||
import type { TimeChangedEvent } from "./ha-base-time-input";
|
import type { TimeChangedEvent } from "./ha-base-time-input";
|
||||||
|
|
||||||
export interface HaDurationData {
|
export interface HaDurationData {
|
||||||
|
days?: number;
|
||||||
hours?: number;
|
hours?: number;
|
||||||
minutes?: number;
|
minutes?: number;
|
||||||
seconds?: number;
|
seconds?: number;
|
||||||
@ -23,6 +24,8 @@ class HaDurationInput extends LitElement {
|
|||||||
|
|
||||||
@property({ type: Boolean }) public enableMillisecond?: boolean;
|
@property({ type: Boolean }) public enableMillisecond?: boolean;
|
||||||
|
|
||||||
|
@property({ type: Boolean }) public enableDay?: boolean;
|
||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
|
|
||||||
@query("paper-time-input", true) private _input?: HTMLElement;
|
@query("paper-time-input", true) private _input?: HTMLElement;
|
||||||
@ -44,13 +47,16 @@ class HaDurationInput extends LitElement {
|
|||||||
errorMessage="Required"
|
errorMessage="Required"
|
||||||
enableSecond
|
enableSecond
|
||||||
.enableMillisecond=${this.enableMillisecond}
|
.enableMillisecond=${this.enableMillisecond}
|
||||||
|
.enableDay=${this.enableDay}
|
||||||
format="24"
|
format="24"
|
||||||
|
.days=${this._days}
|
||||||
.hours=${this._hours}
|
.hours=${this._hours}
|
||||||
.minutes=${this._minutes}
|
.minutes=${this._minutes}
|
||||||
.seconds=${this._seconds}
|
.seconds=${this._seconds}
|
||||||
.milliseconds=${this._milliseconds}
|
.milliseconds=${this._milliseconds}
|
||||||
@value-changed=${this._durationChanged}
|
@value-changed=${this._durationChanged}
|
||||||
noHoursLimit
|
noHoursLimit
|
||||||
|
dayLabel="dd"
|
||||||
hourLabel="hh"
|
hourLabel="hh"
|
||||||
minLabel="mm"
|
minLabel="mm"
|
||||||
secLabel="ss"
|
secLabel="ss"
|
||||||
@ -59,6 +65,10 @@ class HaDurationInput extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private get _days() {
|
||||||
|
return this.data?.days ? Number(this.data.days) : 0;
|
||||||
|
}
|
||||||
|
|
||||||
private get _hours() {
|
private get _hours() {
|
||||||
return this.data?.hours ? Number(this.data.hours) : 0;
|
return this.data?.hours ? Number(this.data.hours) : 0;
|
||||||
}
|
}
|
||||||
@ -97,6 +107,11 @@ class HaDurationInput extends LitElement {
|
|||||||
value.minutes %= 60;
|
value.minutes %= 60;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.enableDay && value.hours > 24) {
|
||||||
|
value.days = (value.days ?? 0) + Math.floor(value.hours / 24);
|
||||||
|
value.hours %= 24;
|
||||||
|
}
|
||||||
|
|
||||||
fireEvent(this, "value-changed", {
|
fireEvent(this, "value-changed", {
|
||||||
value,
|
value,
|
||||||
});
|
});
|
||||||
|
@ -28,6 +28,7 @@ export class HaTimeDuration extends LitElement {
|
|||||||
.data=${this.value}
|
.data=${this.value}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
|
.enableDay=${this.selector.duration.enable_day}
|
||||||
></ha-duration-input>
|
></ha-duration-input>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -96,8 +96,9 @@ export interface DeviceSelector {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface DurationSelector {
|
export interface DurationSelector {
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
duration: {
|
||||||
duration: {};
|
enable_day?: boolean;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface EntitySelector {
|
export interface EntitySelector {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user