jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix various issues in time/duration input (#13462)

Browse Source
This commit is contained in:
Steve Repsher 2022-08-24 05:25:29 -04:00 committed by GitHub
parent 807bb10199
commit 8fd5273fae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 46 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/ha-base-time-input.ts
View File

@ -1,10 +1,11 @@
import "@material/mwc-list/mwc-list-item";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation";
import "./ha-select";
import "./ha-textfield";
import { HaTextField } from "./ha-textfield";
import "./ha-input-helper-text";
export interface TimeChangedEvent {
@ -36,7 +37,7 @@ export class HaBaseTimeInput extends LitElement {
/**
* determines if inputs are required
*/
@property({ type: Boolean }) public required?: boolean;
@property({ type: Boolean }) public required = false;
/**
* 12 or 24 hr format
@ -123,11 +124,6 @@ export class HaBaseTimeInput extends LitElement {
*/
@property() amPm: "AM" | "PM" = "AM";
/**
* Formatted time string
*/
@property() value?: string;
protected render(): TemplateResult {
return html`
${this.label
@ -140,11 +136,11 @@ export class HaBaseTimeInput extends LitElement {
id="day"
type="number"
inputmode="numeric"
.value=${this.days}
.value=${this.days.toFixed()}
.label=${this.dayLabel}
name="days"
@input=${this._valueChanged}
@focus=${this._onFocus}
@focusin=${this._onFocus}
no-spinner
.required=${this.required}
.autoValidate=${this.autoValidate}
@ -161,16 +157,16 @@ export class HaBaseTimeInput extends LitElement {
id="hour"
type="number"
inputmode="numeric"
.value=${this.hours}
.value=${this.hours.toFixed()}
.label=${this.hourLabel}
name="hours"
@input=${this._valueChanged}
@focus=${this._onFocus}
@focusin=${this._onFocus}
no-spinner
.required=${this.required}
.autoValidate=${this.autoValidate}
maxlength="2"
.max=${this._hourMax}
max=${ifDefined(this._hourMax)}
min="0"
.disabled=${this.disabled}
suffix=":"
@ -184,7 +180,7 @@ export class HaBaseTimeInput extends LitElement {
.value=${this._formatValue(this.minutes)}
.label=${this.minLabel}
@input=${this._valueChanged}
@focus=${this._onFocus}
@focusin=${this._onFocus}
name="minutes"
no-spinner
.required=${this.required}
@ -205,7 +201,7 @@ export class HaBaseTimeInput extends LitElement {
.value=${this._formatValue(this.seconds)}
.label=${this.secLabel}
@input=${this._valueChanged}
@focus=${this._onFocus}
@focusin=${this._onFocus}
name="seconds"
no-spinner
.required=${this.required}
@ -226,7 +222,7 @@ export class HaBaseTimeInput extends LitElement {
.value=${this._formatValue(this.milliseconds, 3)}
.label=${this.millisecLabel}
@input=${this._valueChanged}
@focus=${this._onFocus}
@focusin=${this._onFocus}
name="milliseconds"
no-spinner
.required=${this.required}
@ -260,9 +256,10 @@ export class HaBaseTimeInput extends LitElement {
`;
}
private _valueChanged(ev) {
this[ev.target.name] =
ev.target.name === "amPm" ? ev.target.value : Number(ev.target.value);
private _valueChanged(ev: InputEvent) {
const textField = ev.currentTarget as HaTextField;
this[textField.name] =
textField.name === "amPm" ? textField.value : Number(textField.value);
const value: TimeChangedEvent = {
hours: this.hours,
minutes: this.minutes,
@ -277,8 +274,8 @@ export class HaBaseTimeInput extends LitElement {
});
}
private _onFocus(ev) {
ev.target.select();
private _onFocus(ev: FocusEvent) {
(ev.currentTarget as HaTextField).select();
}
/**
@ -293,7 +290,7 @@ export class HaBaseTimeInput extends LitElement {
*/
private get _hourMax() {
if (this.noHoursLimit) {
return null;
return undefined;
}
if (this.format === 12) {
return 12;

8
src/components/ha-duration-input.ts
View File

@ -14,17 +14,17 @@ export interface HaDurationData {
@customElement("ha-duration-input")
class HaDurationInput extends LitElement {
@property({ attribute: false }) public data!: HaDurationData;
@property({ attribute: false }) public data?: HaDurationData;
@property() public label?: string;
@property() public helper?: string;
@property({ type: Boolean }) public required?: boolean;
@property({ type: Boolean }) public required = false;
@property({ type: Boolean }) public enableMillisecond?: boolean;
@property({ type: Boolean }) public enableMillisecond = false;
@property({ type: Boolean }) public enableDay?: boolean;
@property({ type: Boolean }) public enableDay = false;
@property({ type: Boolean }) public disabled = false;

6
src/components/ha-form/ha-form-positive_time_period_dict.ts
View File

@ -5,9 +5,9 @@ import { HaFormElement, HaFormTimeData, HaFormTimeSchema } from "./types";
@customElement("ha-form-positive_time_period_dict")
export class HaFormTimePeriod extends LitElement implements HaFormElement {
@property() public schema!: HaFormTimeSchema;
@property({ attribute: false }) public schema!: HaFormTimeSchema;
@property() public data!: HaFormTimeData;
@property({ attribute: false }) public data!: HaFormTimeData;
@property() public label!: string;
@ -25,7 +25,7 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
return html`
<ha-duration-input
.label=${this.label}
.required=${this.schema.required}
?required=${this.schema.required}
.data=${this.data}
.disabled=${this.disabled}
></ha-duration-input>

4
src/components/ha-selector/ha-selector-datetime.ts
View File

@ -11,9 +11,9 @@ import type { HaTimeInput } from "../ha-time-input";
@customElement("ha-selector-datetime")
export class HaDateTimeSelector extends LitElement {
@property() public hass!: HomeAssistant;
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public selector!: DateTimeSelector;
@property({ attribute: false }) public selector!: DateTimeSelector;
@property() public value?: string;

10
src/components/ha-selector/ha-selector-duration.ts
View File

@ -2,15 +2,15 @@ import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import type { DurationSelector } from "../../data/selector";
import type { HomeAssistant } from "../../types";
import "../ha-duration-input";
import { HaDurationData } from "../ha-duration-input";
@customElement("ha-selector-duration")
export class HaTimeDuration extends LitElement {
@property() public hass!: HomeAssistant;
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public selector!: DurationSelector;
@property({ attribute: false }) public selector!: DurationSelector;
@property() public value?: string;
@property({ attribute: false }) public value?: HaDurationData;
@property() public label?: string;
@ -28,7 +28,7 @@ export class HaTimeDuration extends LitElement {
.data=${this.value}
.disabled=${this.disabled}
.required=${this.required}
.enableDay=${this.selector.duration.enable_day}
?enableDay=${this.selector.duration.enable_day}
></ha-duration-input>
`;
}

4
src/components/ha-selector/ha-selector-time.ts
View File

@ -6,9 +6,9 @@ import "../ha-time-input";
@customElement("ha-selector-time")
export class HaTimeSelector extends LitElement {
@property() public hass!: HomeAssistant;
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public selector!: TimeSelector;
@property({ attribute: false }) public selector!: TimeSelector;
@property() public value?: string;

2
src/components/ha-time-input.ts
View File

@ -43,7 +43,7 @@ export class HaTimeInput extends LitElement {
.minutes=${Number(parts[1])}
.seconds=${Number(parts[2])}
.format=${useAMPM ? 12 : 24}
.amPm=${useAMPM && (numberHours >= 12 ? "PM" : "AM")}
.amPm=${useAMPM && numberHours >= 12 ? "PM" : "AM"}
.disabled=${this.disabled}
@value-changed=${this._timeChanged}
.enableSecond=${this.enableSecond}

7
src/dialogs/more-info/controls/more-info-input_datetime.ts
View File

@ -60,7 +60,7 @@ class MoreInfoInputDatetime extends LitElement {
ev.stopPropagation();
}
private _timeChanged(ev): void {
private _timeChanged(ev: CustomEvent<{ value: string }>): void {
setInputDateTimeValue(
this.hass!,
this.stateObj!.entity_id,
@ -69,10 +69,9 @@ class MoreInfoInputDatetime extends LitElement {
? this.stateObj!.state.split(" ")[0]
: undefined
);
ev.target.blur();
}
private _dateChanged(ev): void {
private _dateChanged(ev: CustomEvent<{ value: string }>): void {
setInputDateTimeValue(
this.hass!,
this.stateObj!.entity_id,
@ -81,8 +80,6 @@ class MoreInfoInputDatetime extends LitElement {
: undefined,
ev.detail.value
);
ev.target.blur();
}
static get styles(): CSSResultGroup {

6
src/panels/config/automation/action/types/ha-automation-action-delay.ts
View File

@ -1,5 +1,5 @@
import { html, LitElement, PropertyValues } from "lit";
import { customElement, property } from "lit/decorators";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { hasTemplate } from "../../../../../common/string/has-template";
import type { HaDurationData } from "../../../../../components/ha-duration-input";
@ -13,9 +13,9 @@ import { createDurationData } from "../../../../../common/datetime/create_durati
export class HaDelayAction extends LitElement implements ActionElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public action!: DelayAction;
@property({ attribute: false }) public action!: DelayAction;
@property() public _timeData?: HaDurationData;
@state() private _timeData?: HaDurationData;
public static get defaultConfig() {
return { delay: "" };

8
src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
View File

@ -10,6 +10,7 @@ import { ActionElement, handleChangeEvent } from "../ha-automation-action-row";
import "../../../../../components/ha-duration-input";
import { createDurationData } from "../../../../../common/datetime/create_duration_data";
import { TimeChangedEvent } from "../../../../../components/ha-base-time-input";
import { ensureArray } from "../../../../../common/ensure-array";
@customElement("ha-automation-action-wait_for_trigger")
export class HaWaitForTriggerAction
@ -18,14 +19,13 @@ export class HaWaitForTriggerAction
{
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public action!: WaitForTriggerAction;
@property({ attribute: false }) public action!: WaitForTriggerAction;
public static get defaultConfig() {
return { wait_for_trigger: [] };
}
protected render() {
const { wait_for_trigger, continue_on_timeout } = this.action;
const timeData = createDurationData(this.action.timeout);
return html`
@ -43,12 +43,12 @@ export class HaWaitForTriggerAction
)}
>
<ha-switch
.checked=${continue_on_timeout ?? true}
.checked=${this.action.continue_on_timeout ?? true}
@change=${this._continueChanged}
></ha-switch>
</ha-formfield>
<ha-automation-trigger
.triggers=${wait_for_trigger}
.triggers=${ensureArray(this.action.wait_for_trigger)}
.hass=${this.hass}
.name=${"wait_for_trigger"}
@value-changed=${this._valueChanged}

7
src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts
View File

@ -97,7 +97,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
ev.stopPropagation();
}
private _timeChanged(ev): void {
private _timeChanged(ev: CustomEvent<{ value: string }>): void {
const stateObj = this.hass!.states[this._config!.entity];
setInputDateTimeValue(
this.hass!,
@ -105,10 +105,9 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
ev.detail.value,
stateObj.attributes.has_date ? stateObj.state.split(" ")[0] : undefined
);
ev.target.blur();
}
private _dateChanged(ev): void {
private _dateChanged(ev: CustomEvent<{ value: string }>): void {
const stateObj = this.hass!.states[this._config!.entity];
setInputDateTimeValue(
@ -117,8 +116,6 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
stateObj.attributes.has_time ? stateObj.state.split(" ")[1] : undefined,
ev.detail.value
);
ev.target.blur();
}
static get styles(): CSSResultGroup {