Helpers: remove init values, change date/time mode picker, dont… (#5118)

src/panels/config/helpers/dialog-helper-detail.ts

@@ -18,6 +18,7 @@ import { createInputSelect } from "../../../data/input_select";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { Helper } from "./const";
 import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-tooltip/paper-tooltip";
 import "./forms/ha-input_boolean-form";
 import "./forms/ha-input_text-form";
 import "./forms/ha-input_datetime-form";
@@ -62,6 +63,8 @@ export class DialogHelperDetail extends LitElement {
         .open=${this._opened}
         @closing=${this.closeDialog}
         class=${classMap({ "button-left": !this._platform })}
+        scrimClickAction
+        escapeKeyAction
         .heading=${this._platform
           ? this.hass.localize(
               "ui.panel.config.helpers.dialog.add_platform",
@@ -103,22 +106,36 @@ export class DialogHelperDetail extends LitElement {
             `
           : html`
               ${Object.keys(HELPERS).map((platform: string) => {
+                const isLoaded = isComponentLoaded(this.hass, platform);
                 return html`
-                  <paper-icon-item
+                  <div>
-                    .disabled=${!isComponentLoaded(this.hass, platform)}
+                    <paper-icon-item
-                    @click="${this._platformPicked}"
+                      .disabled=${!isLoaded}
-                    .platform="${platform}"
+                      @click=${this._platformPicked}
-                  >
+                      .platform=${platform}
-                    <ha-icon
+                    >
-                      slot="item-icon"
+                      <ha-icon
-                      .icon=${domainIcon(platform)}
+                        slot="item-icon"
-                    ></ha-icon>
+                        .icon=${domainIcon(platform)}
-                    <span class="item-text">
+                      ></ha-icon>
-                      ${this.hass.localize(
+                      <span class="item-text">
-                        `ui.panel.config.helpers.types.${platform}`
+                        ${this.hass.localize(
-                      ) || platform}
+                          `ui.panel.config.helpers.types.${platform}`
-                    </span>
+                        ) || platform}
-                  </paper-icon-item>
+                      </span>
+                    </paper-icon-item>
+                    ${!isLoaded
+                      ? html`
+                          <paper-tooltip
+                            >${this.hass.localize(
+                              "ui.dialogs.helper_settings.platform_not_loaded",
+                              "platform",
+                              platform
+                            )}</paper-tooltip
+                          >
+                        `
+                      : ""}
+                  </div>
                 `;
               })}
               <mwc-button slot="primaryAction" @click="${this.closeDialog}">

src/panels/config/helpers/forms/ha-input_boolean-form.ts

@@ -24,14 +24,12 @@ class HaInputBooleanForm extends LitElement {
   private _item?: InputBoolean;
   @property() private _name!: string;
   @property() private _icon!: string;
-  @property() private _initial?: boolean;
 
   set item(item: InputBoolean) {
     this._item = item;
     if (item) {
       this._name = item.name || "";
       this._icon = item.icon || "";
-      this._initial = item.initial;
     } else {
       this._name = "";
       this._icon = "";
@@ -70,30 +68,10 @@ class HaInputBooleanForm extends LitElement {
         ${this.hass!.localize(
           "ui.dialogs.helper_settings.generic.initial_value_explain"
         )}
-        ${this.hass.userData?.showAdvanced
-          ? html`
-              <div class="row layout horizontal justified">
-                ${this.hass!.localize(
-                  "ui.dialogs.helper_settings.generic.initial_value"
-                )}:
-                <ha-switch
-                  .checked=${this._initial}
-                  @change=${this._initialChanged}
-                ></ha-switch>
-              </div>
-            `
-          : ""}
       </div>
     `;
   }
 
-  private _initialChanged(ev) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", {
-      value: { ...this._item, initial: ev.target.checked },
-    });
-  }
-
   private _valueChanged(ev: CustomEvent) {
     if (!this.new && !this._item) {
       return;

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -24,21 +24,23 @@ class HaInputDateTimeForm extends LitElement {
   private _item?: InputDateTime;
   @property() private _name!: string;
   @property() private _icon!: string;
-  @property() private _initial?: string;
+  @property() private _mode!: "date" | "time" | "datetime";
-  @property() private _hasTime?: boolean;
-  @property() private _hasDate?: boolean;
 
   set item(item: InputDateTime) {
     this._item = item;
     if (item) {
       this._name = item.name || "";
       this._icon = item.icon || "";
-      this._initial = item.initial;
+      this._mode =
-      this._hasTime = item.has_time;
+        item.has_time && item.has_date
-      this._hasDate = item.has_date;
+          ? "datetime"
+          : item.has_time
+          ? "time"
+          : "date";
     } else {
       this._name = "";
       this._icon = "";
+      this._mode = "date";
     }
   }
 
@@ -70,55 +72,41 @@ class HaInputDateTimeForm extends LitElement {
             "ui.dialogs.helper_settings.generic.icon"
           )}
         ></ha-icon-input>
-        <div class="row layout horizontal justified">
+        <br />
-          ${this.hass!.localize(
+        ${this.hass.localize("ui.dialogs.helper_settings.input_datetime.mode")}:
-            "ui.dialogs.helper_settings.input_datetime.has_time"
+        <br />
-          )}:
+        <paper-radio-group
-          <ha-switch
+          .selected=${this._mode}
-            .checked=${this._hasTime}
+          @selected-changed=${this._modeChanged}
-            @change=${this._hasTimeChanged}
+        >
-          ></ha-switch>
+          <paper-radio-button name="date">
-        </div>
+            ${this.hass.localize(
-        <div class="row layout horizontal justified">
+              "ui.dialogs.helper_settings.input_datetime.date"
-          ${this.hass!.localize(
+            )}
-            "ui.dialogs.helper_settings.input_datetime.has_date"
+          </paper-radio-button>
-          )}:
+          <paper-radio-button name="time">
-          <ha-switch
+            ${this.hass.localize(
-            .checked=${this._hasDate}
+              "ui.dialogs.helper_settings.input_datetime.time"
-            @change=${this._hasDateChanged}
+            )}
-          ></ha-switch>
+          </paper-radio-button>
-        </div>
+          <paper-radio-button name="datetime">
-        ${this.hass.userData?.showAdvanced
+            ${this.hass.localize(
-          ? html`
+              "ui.dialogs.helper_settings.input_datetime.datetime"
-              <br />
+            )}
-              ${this.hass!.localize(
+          </paper-radio-button>
-                "ui.dialogs.helper_settings.generic.initial_value_explain"
+        </paper-radio-group>
-              )}
-              <paper-input
-                .value=${this._initial}
-                .configValue=${"initial"}
-                @value-changed=${this._valueChanged}
-                .label=${this.hass!.localize(
-                  "ui.dialogs.helper_settings.generic.initial_value"
-                )}
-              ></paper-input>
-            `
-          : ""}
       </div>
     `;
   }
 
-  private _hasTimeChanged(ev) {
+  private _modeChanged(ev: CustomEvent) {
-    ev.stopPropagation();
+    const mode = ev.detail.value;
     fireEvent(this, "value-changed", {
-      value: { ...this._item, has_time: ev.target.checked },
+      value: {
-    });
+        ...this._item,
-  }
+        has_time: ["time", "datetime"].includes(mode),
-
+        has_date: ["date", "datetime"].includes(mode),
-  private _hasDateChanged(ev) {
+      },
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", {
-      value: { ...this._item, has_date: ev.target.checked },
     });
   }
 

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -24,7 +24,6 @@ class HaInputNumberForm extends LitElement {
   private _item?: Partial<InputNumber>;
   @property() private _name!: string;
   @property() private _icon!: string;
-  @property() private _initial?: number;
   @property() private _max?: number;
   @property() private _min?: number;
   @property() private _mode?: string;
@@ -39,7 +38,6 @@ class HaInputNumberForm extends LitElement {
       this._icon = item.icon || "";
       this._max = item.max ?? 100;
       this._min = item.min ?? 0;
-      this._initial = item.initial;
       this._mode = item.mode || "slider";
       this._step = item.step || 1;
       this._unit_of_measurement = item.unit_of_measurement;
@@ -146,19 +144,6 @@ class HaInputNumberForm extends LitElement {
                   "ui.dialogs.helper_settings.input_number.unit_of_measurement"
                 )}
               ></paper-input>
-              <br />
-              ${this.hass!.localize(
-                "ui.dialogs.helper_settings.generic.initial_value_explain"
-              )}
-              <paper-input
-                .value=${this._initial}
-                .configValue=${"initial"}
-                type="number"
-                @value-changed=${this._valueChanged}
-                .label=${this.hass!.localize(
-                  "ui.dialogs.helper_settings.generic.initial_value"
-                )}
-              ></paper-input>
             `
           : ""}
       </div>

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -29,7 +29,6 @@ class HaInputSelectForm extends LitElement {
   @property() private _name!: string;
   @property() private _icon!: string;
   @property() private _options: string[] = [];
-  @property() private _initial?: string;
   @query("#option_input") private _optionInput?: PaperInputElement;
 
   set item(item: InputSelect) {
@@ -37,7 +36,6 @@ class HaInputSelectForm extends LitElement {
     if (item) {
       this._name = item.name || "";
       this._icon = item.icon || "";
-      this._initial = item.initial;
       this._options = item.options || [];
     } else {
       this._name = "";
@@ -115,44 +113,10 @@ class HaInputSelectForm extends LitElement {
             )}</mwc-button
           >
         </div>
-        ${this.hass.userData?.showAdvanced
-          ? html`
-              <br />
-              ${this.hass!.localize(
-                "ui.dialogs.helper_settings.generic.initial_value_explain"
-              )}
-              <ha-paper-dropdown-menu
-                label-float
-                dynamic-align
-                .label=${this.hass.localize(
-                  "ui.dialogs.helper_settings.generic.initial_value"
-                )}
-              >
-                <paper-listbox
-                  slot="dropdown-content"
-                  attr-for-selected="item-initial"
-                  .selected=${this._initial}
-                  @selected-changed=${this._initialChanged}
-                >
-                  ${this._options.map(
-                    (option) => html`
-                      <paper-item item-initial=${option}>${option}</paper-item>
-                    `
-                  )}
-                </paper-listbox>
-              </ha-paper-dropdown-menu>
-            `
-          : ""}
       </div>
     `;
   }
 
-  private _initialChanged(ev: CustomEvent) {
-    fireEvent(this, "value-changed", {
-      value: { ...this._item, initial: ev.detail.value },
-    });
-  }
-
   private _handleKeyAdd(ev: KeyboardEvent) {
     ev.stopPropagation();
     if (ev.keyCode !== 13) {

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -24,7 +24,6 @@ class HaInputTextForm extends LitElement {
   private _item?: InputText;
   @property() private _name!: string;
   @property() private _icon!: string;
-  @property() private _initial?: string;
   @property() private _max?: number;
   @property() private _min?: number;
   @property() private _mode?: string;
@@ -37,7 +36,6 @@ class HaInputTextForm extends LitElement {
       this._icon = item.icon || "";
       this._max = item.max || 100;
       this._min = item.min || 0;
-      this._initial = item.initial;
       this._mode = item.mode || "text";
       this._pattern = item.pattern;
     } else {
@@ -129,18 +127,6 @@ class HaInputTextForm extends LitElement {
                   "ui.dialogs.helper_settings.input_text.pattern"
                 )}
               ></paper-input>
-              <br />
-              ${this.hass!.localize(
-                "ui.dialogs.helper_settings.generic.initial_value_explain"
-              )}
-              <paper-input
-                .value=${this._initial}
-                .configValue=${"initial"}
-                @value-changed=${this._valueChanged}
-                .label=${this.hass!.localize(
-                  "ui.dialogs.helper_settings.generic.initial_value"
-                )}
-              ></paper-input>
             `
           : ""}
       </div>

src/translations/en.json

@@ -659,18 +659,18 @@
         }
       },
       "helper_settings": {
-        "platform_not_loaded": "The {platform} component is not loaded, please add it your configuration. Either by adding 'default_config:' or '{platform}:'.",
+        "platform_not_loaded": "The {platform} integration is not loaded, please add it your configuration. Either by adding 'default_config:' or '{platform}:'.",
         "yaml_not_editable": "The settings of this entity can not be edited from the UI. Only entities setup from the UI are configurable from the UI.",
         "required_error_msg": "This field is required",
         "generic": {
           "name": "Name",
-          "icon": "Icon",
+          "icon": "Icon"
-          "initial_value": "Initial value at start",
-          "initial_value_explain": "The value the element will have when Home Assistant starts. When left empty, the value will be restored to it's previous value."
         },
         "input_datetime": {
-          "has_time": "Time",
+          "date": "Date",
-          "has_date": "Date"
+          "time": "Time",
+          "datetime": "Date and time",
+          "mode": "What do you want to input"
         },
         "input_text": {
           "min": "Minimum lenght",