From af1b875f8811b88f26d72b0f8ad0548475c3d56a Mon Sep 17 00:00:00 2001 From: rogelio-o Date: Thu, 27 Oct 2022 20:18:39 +0200 Subject: [PATCH] Change approach to use select instead of two booleans --- docs/cards/alarm.md | 31 ++++++----- .../alarm-control-panel-card-config.ts | 9 ++-- .../alarm-control-panel-card-editor.ts | 52 ++++++++++++------- .../alarm-control-panel-card.ts | 6 +-- src/cards/alarm-control-panel-card/const.ts | 2 + src/translations/en.json | 4 +- src/translations/es.json | 4 +- 7 files changed, 61 insertions(+), 47 deletions(-) diff --git a/docs/cards/alarm.md b/docs/cards/alarm.md index dfd8d0c21..85e0c4cc4 100644 --- a/docs/cards/alarm.md +++ b/docs/cards/alarm.md @@ -11,19 +11,18 @@ A alarm control panel card allow you to control a alarm panel entity. All the options are available in the lovelace editor but you can use `yaml` if you want. -| Name | Type | Default | Description | -| :------------------- | :-------------------------------------------------- | :----------------------------- | :---------------------------------------------------------------------------------- | -| `entity` | string | Required | Alarm control panel entity | -| `icon` | string | Optional | Custom icon | -| `name` | string | Optional | Custom name | -| `layout` | string | Optional | Layout of the card. Vertical, horizontal and default layout are supported | -| `fill_container` | boolean | `false` | Fill container or not. Useful when card is in a grid, vertical or horizontal layout | -| `primary_info` | `name` `state` `last-changed` `last-updated` `none` | `name` | Info to show as primary info | -| `secondary_info` | `name` `state` `last-changed` `last-updated` `none` | `state` | Info to show as secondary info | -| `icon_type` | `icon` `entity-picture` `none` | `icon` | Type of icon to display | -| `states` | list | `["armed_home", "armed_away"]` | List of arm states to display | -| `show_keypad` | boolean | `false` | Show the keypad | -| `show_keypad_disarm` | boolean | `false` | Show the keypad for disarming | -| `tap_action` | action | `more-info` | Home assistant action to perform on tap | -| `hold_action` | action | `more-info` | Home assistant action to perform on hold | -| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap | +| Name | Type | Default | Description | +| :------------------ | :-------------------------------------------------- | :----------------------------- | :---------------------------------------------------------------------------------- | +| `entity` | string | Required | Alarm control panel entity | +| `icon` | string | Optional | Custom icon | +| `name` | string | Optional | Custom name | +| `layout` | string | Optional | Layout of the card. Vertical, horizontal and default layout are supported | +| `fill_container` | boolean | `false` | Fill container or not. Useful when card is in a grid, vertical or horizontal layout | +| `primary_info` | `name` `state` `last-changed` `last-updated` `none` | `name` | Info to show as primary info | +| `secondary_info` | `name` `state` `last-changed` `last-updated` `none` | `state` | Info to show as secondary info | +| `icon_type` | `icon` `entity-picture` `none` | `icon` | Type of icon to display | +| `states` | list | `["armed_home", "armed_away"]` | List of arm states to display | +| `show_keypad` | `always`, `never`, `disarm` | `never` | Show the keypad | +| `tap_action` | action | `more-info` | Home assistant action to perform on tap | +| `hold_action` | action | `more-info` | Home assistant action to perform on hold | +| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap | diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card-config.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card-config.ts index a0e983300..59352ef07 100644 --- a/src/cards/alarm-control-panel-card/alarm-control-panel-card-config.ts +++ b/src/cards/alarm-control-panel-card/alarm-control-panel-card-config.ts @@ -1,4 +1,4 @@ -import { array, assign, boolean, object, optional } from "superstruct"; +import { array, assign, enums, object, optional } from "superstruct"; import { LovelaceCardConfig } from "../../ha"; import { ActionsSharedConfig, actionsSharedConfigStruct } from "../../shared/config/actions-config"; import { @@ -7,14 +7,14 @@ import { } from "../../shared/config/appearance-config"; import { EntitySharedConfig, entitySharedConfigStruct } from "../../shared/config/entity-config"; import { lovelaceCardConfigStruct } from "../../shared/config/lovelace-card-config"; +import { ALARM_CONTROL_PANEL_CARD_SHOW_KEYPAD_OPTIONS } from "./const"; export type AlarmControlPanelCardConfig = LovelaceCardConfig & EntitySharedConfig & AppearanceSharedConfig & ActionsSharedConfig & { states?: string[]; - show_keypad?: boolean; - show_keypad_disarm?: boolean; + show_keypad?: string; }; export const alarmControlPanelCardCardConfigStruct = assign( @@ -22,7 +22,6 @@ export const alarmControlPanelCardCardConfigStruct = assign( assign(entitySharedConfigStruct, appearanceSharedConfigStruct, actionsSharedConfigStruct), object({ states: optional(array()), - show_keypad: optional(boolean()), - show_keypad_disarm: optional(boolean()), + show_keypad: optional(enums(ALARM_CONTROL_PANEL_CARD_SHOW_KEYPAD_OPTIONS)), }) ); diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts index d225170fe..e201dc8d3 100644 --- a/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts +++ b/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts @@ -16,31 +16,43 @@ import { alarmControlPanelCardCardConfigStruct, AlarmControlPanelCardConfig, } from "./alarm-control-panel-card-config"; -import { ALARM_CONTROl_PANEL_CARD_EDITOR_NAME, ALARM_CONTROl_PANEL_ENTITY_DOMAINS } from "./const"; +import { + ALARM_CONTROl_PANEL_CARD_EDITOR_NAME, + ALARM_CONTROl_PANEL_ENTITY_DOMAINS, + ALARM_CONTROL_PANEL_CARD_SHOW_KEYPAD_OPTIONS, +} from "./const"; const actions: Action[] = ["more-info", "navigate", "url", "call-service", "none"]; const states = ["armed_home", "armed_away", "armed_night", "armed_vacation", "armed_custom_bypass"]; -const ALARM_CONTROL_PANEL_LABELS = ["show_keypad"]; +const ALARM_CONTROL_PANEL_LABELS = ["show_keypad", "always", "never"]; -const computeSchema = memoizeOne((localize: LocalizeFunc, icon?: string): HaFormSchema[] => [ - { name: "entity", selector: { entity: { domain: ALARM_CONTROl_PANEL_ENTITY_DOMAINS } } }, - { name: "name", selector: { text: {} } }, - { name: "icon", selector: { icon: { placeholder: icon } } }, - ...APPEARANCE_FORM_SCHEMA, - { - type: "multi_select", - name: "states", - options: states.map((state) => [ - state, - localize(`ui.card.alarm_control_panel.${state.replace("armed", "arm")}`), - ]) as [string, string][], - }, - { name: "show_keypad", selector: { boolean: {} } }, - { name: "show_keypad_disarm", selector: { boolean: {} } }, - ...computeActionsFormSchema(actions), -]); +const computeSchema = memoizeOne( + (localize: LocalizeFunc, customLocalize: LocalizeFunc, icon?: string): HaFormSchema[] => [ + { name: "entity", selector: { entity: { domain: ALARM_CONTROl_PANEL_ENTITY_DOMAINS } } }, + { name: "name", selector: { text: {} } }, + { name: "icon", selector: { icon: { placeholder: icon } } }, + ...APPEARANCE_FORM_SCHEMA, + { + type: "multi_select", + name: "states", + options: states.map((state) => [ + state, + localize(`ui.card.alarm_control_panel.${state.replace("armed", "arm")}`), + ]) as [string, string][], + }, + { + type: "select", + name: "show_keypad", + options: ALARM_CONTROL_PANEL_CARD_SHOW_KEYPAD_OPTIONS.map((state) => [ + state, + customLocalize(`editor.card.alarm_control_panel.${state}`), + ]) as [string, string][], + }, + ...computeActionsFormSchema(actions), + ] +); @customElement(ALARM_CONTROl_PANEL_CARD_EDITOR_NAME) export class SwitchCardEditor extends MushroomBaseElement implements LovelaceCardEditor { @@ -64,7 +76,7 @@ export class SwitchCardEditor extends MushroomBaseElement implements LovelaceCar const entityState = this._config.entity ? this.hass.states[this._config.entity] : undefined; const entityIcon = entityState ? stateIcon(entityState) : undefined; const icon = this._config.icon || entityIcon; - const schema = computeSchema(this.hass!.localize, icon); + const schema = computeSchema(this.hass!.localize, setupCustomlocalize(this.hass!), icon); return html`