Entity Click Action (#1218)

* Add config for entity custom click aciton * Set toggleable if call-service * Add logic for custom action * Don't trigger light if default overriden * Remove prop setting of domain for ad-hoc logic
timmo001 · Jun 28, 2020 · 32acd4c · 32acd4c
1 parent ee1602f
commit 32acd4c
Show file tree

Hide file tree

Showing 9 changed files with 234 additions and 54 deletions.
diff --git a/frontend/src/Components/Cards/Base.tsx b/frontend/src/Components/Cards/Base.tsx
@@ -127,12 +127,19 @@ function Base(props: BaseProps): ReactElement {
  );
 
  const handleSetToggleable = useCallback(() => {
- setToggleable(
- props.editing === 1
- ? false
- : !props.card.disabled && props.card.toggleable
- );
- }, [props.card.disabled, props.card.toggleable, props.editing]);
+ if (props.card.click_action?.type === 'call-service') setToggleable(true);
+ else
+ setToggleable(
+ props.editing === 1
+ ? false
+ : !props.card.disabled && props.card.toggleable
+ );
+ }, [
+ props.card.click_action,
+ props.card.disabled,
+ props.card.toggleable,
+ props.editing,
+ ]);
 
  const handleSetExpandable = useCallback(
  (entitySizeKey: string) => {
@@ -175,33 +182,48 @@ function Base(props: BaseProps): ReactElement {
  ]);
 
  function handleHassToggle(): void {
- if (props.card.domain && props.handleHassChange)
- if (props.card.domain === 'lock') {
- console.log(props.card.state);
+ if (props.handleHassChange) {
+ const domain = props.card.entity?.split('.')[0];
+ console.log('handleHassToggle', props.card);
+ if (
+ props.card.click_action &&
+ props.card.click_action.type === 'call-service' &&
+ props.card.click_action.service &&
+ props.card.click_action.service_data
+ ) {
+ const service = props.card.click_action.service.split('.');
  props.handleHassChange(
- props.card.domain,
- props.card.state === 'locked' ? 'unlock' : 'lock',
- {
- entity_id: props.card.entity,
- }
- );
- } else {
- console.log(
- props.card.domain,
- props.card.state === 'on' ? false : true,
- {
- entity_id: props.card.entity,
- }
- );
- props.handleHassChange(
- props.card.domain,
- props.card.state === 'on' ? false : true,
- {
- entity_id: props.card.entity,
- },
- props.hassEntities
+ service[0],
+ service[1],
+ JSON.parse(props.card.click_action.service_data)
  );
+ } else if (domain) {
+ if (domain === 'lock') {
+ process.env.NODE_ENV === 'development' &&
+ console.log(props.card.state);
+ props.handleHassChange(
+ domain,
+ props.card.state === 'locked' ? 'unlock' : 'lock',
+ {
+ entity_id: props.card.entity,
+ }
+ );
+ } else {
+ process.env.NODE_ENV === 'development' &&
+ console.log(domain, props.card.state === 'on' ? false : true, {
+ entity_id: props.card.entity,
+ });
+ props.handleHassChange(
+ domain,
+ props.card.state === 'on' ? false : true,
+ {
+ entity_id: props.card.entity,
+ },
+ props.hassEntities
+ );
+ }
  }
+ }
  }
 
  function handleExpand(): void {

diff --git a/frontend/src/Components/Configuration/Config.tsx b/frontend/src/Components/Configuration/Config.tsx
@@ -18,14 +18,7 @@ export interface ConfigProps {
  | Page
  | GroupProps
  | CardProps
- | (
- | string
- | number
- | ConfigSectionItem
- | Page
- | GroupProps
- | CardProps
- )[]
+ | (string | number | ConfigSectionItem | Page | GroupProps | CardProps)[]
  ) => void;
  handleConfigChange: (config: ConfigurationProps) => void;
  handleSetTheme: (palette: ThemeProps) => void;
@@ -131,6 +124,7 @@ export type CardProps = {
  chart_from?: number;
  chart_labels?: boolean;
  checklist_items?: ChecklistItem[];
+ click_action?: EntityAction;
 };
 
 export interface ChecklistItem {
@@ -139,6 +133,14 @@ export interface ChecklistItem {
  text: string;
 }
 
+export interface EntityAction {
+ type: EntityActionType;
+ service?: string;
+ service_data?: string;
+}
+
+export type EntityActionType = 'default' | 'call-service';
+
 export type News = {
  news_api_key: string;
 };

diff --git a/frontend/src/Components/Configuration/EditCard/Base.tsx b/frontend/src/Components/Configuration/EditCard/Base.tsx
@@ -11,7 +11,13 @@ import Switch from '@material-ui/core/Switch';
 import TextField from '@material-ui/core/TextField';
 import { ColorResult } from 'react-color';
 
-import { CardProps, cardTypes, CardType, ConfigurationProps } from '../Config';
+import {
+ CardProps,
+ cardTypes,
+ CardType,
+ ConfigurationProps,
+ EntityAction,
+} from '../Config';
 import { CommandType } from '../../Utils/Command';
 import { HomeAssistantChangeProps } from '../../HomeAssistant/HomeAssistant';
 import ColorAdornment from '../../Utils/ColorAdornment';
@@ -45,7 +51,10 @@ export interface BaseProps {
  card: CardProps;
  command: CommandType;
  config: ConfigurationProps;
- handleManualChange?: (name: string, value?: string | number) => void;
+ handleManualChange?: (
+ name: string,
+ value?: string | number | EntityAction
+ ) => void;
  handleChange?: (
  name: string
  ) => (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -55,6 +64,7 @@ export interface BaseProps {
  handleSelectChange?: (
  event: React.ChangeEvent<{ name?: string; value: unknown }>
  ) => void;
+ handleValidation?: (key: string, error?: string) => void;
 }
 
 interface BaseExtendedProps extends BaseProps, HomeAssistantChangeProps {}

diff --git a/frontend/src/Components/Configuration/EditCard/EditCard.tsx b/frontend/src/Components/Configuration/EditCard/EditCard.tsx
@@ -6,11 +6,13 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
-import { CardProps, cardTypeDefaults } from '../Config';
+import { CardProps, cardTypeDefaults, EntityAction } from '../Config';
 import Base, { BaseProps } from './Base';
 import CardBase from '../../Cards/Base';
+import clone from '../../../utils/clone';
 
 const useStyles = makeStyles((theme: Theme) => ({
  dialogContent: {
@@ -34,13 +36,19 @@ const useStyles = makeStyles((theme: Theme) => ({
  },
 }));
 
+interface Validation {
+ key: string;
+ error?: string;
+}
+
 interface EditCardProps extends BaseProps {
  handleClose: () => void;
  handleUpdate: (data: CardProps) => void;
 }
 
 function EditCard(props: EditCardProps): ReactElement {
- const [card, setCard] = useState(props.card);
+ const [validation, setValidation] = useState<Validation[]>([]);
+ const [card, setCard] = useState<CardProps>(props.card);
 
  useEffect(() => setCard(props.card), [props.card]);
 
@@ -49,7 +57,10 @@ function EditCard(props: EditCardProps): ReactElement {
  props.handleClose();
  }
 
- function handleManualChange(name: string, value?: string | number): void {
+ function handleManualChange(
+ name: string,
+ value?: string | number | EntityAction
+ ): void {
  setCard({
  ...card,
  [name]: value,
@@ -104,6 +115,16 @@ function EditCard(props: EditCardProps): ReactElement {
  }
  }
 
+ function handleValidation(key: string, error?: string) {
+ const newVal = clone(validation);
+ const valIndex = validation.findIndex((val: Validation) => val.key === key);
+ if (valIndex > -1) newVal[valIndex].error = error;
+ else newVal.push({ key, error });
+ setValidation(newVal);
+ }
+
+ const valErrors = validation.filter((val: Validation) => val.error);
+
  const classes = useStyles();
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
@@ -129,10 +150,11 @@ function EditCard(props: EditCardProps): ReactElement {
  <Base
  {...props}
  card={card}
- handleManualChange={handleManualChange}
  handleChange={handleChange}
+ handleManualChange={handleManualChange}
  handleSelectChange={handleSelectChange}
  handleSwitchChange={handleSwitchChange}
+ handleValidation={handleValidation}
  />
  </Grid>
  <Grid
@@ -154,8 +176,15 @@ function EditCard(props: EditCardProps): ReactElement {
  </Grid>
  </DialogContent>
  <DialogActions>
+ <Typography variant="body1" color="error">
+ {valErrors.map((val: Validation, key: number) => (
+ <span key={key}>{val.error}</span>
+ ))}
+ </Typography>
  <Button onClick={props.handleClose}>Cancel</Button>
- <Button onClick={handleConfirm}>Save</Button>
+ <Button disabled={valErrors.length > 0} onClick={handleConfirm}>
+ Save
+ </Button>
  </DialogActions>
  </Dialog>
  );

diff --git a/frontend/src/Components/Configuration/EditCard/Entity.tsx b/frontend/src/Components/Configuration/EditCard/Entity.tsx
@@ -16,6 +16,7 @@ import { BaseProps } from './Base';
 import { chartTypes } from '../../Visualisations/Chart';
 import { HomeAssistantEntityProps } from '../../HomeAssistant/HomeAssistant';
 import EntitySelect from '../../HomeAssistant/Utils/EntitySelect';
+import EntityAction from './EntityAction';
 
 const useStyles = makeStyles((theme: Theme) => ({
  container: {
@@ -34,7 +35,7 @@ const useStyles = makeStyles((theme: Theme) => ({
  },
 }));
 
-interface EntityProps extends BaseProps, HomeAssistantEntityProps {}
+export interface EntityProps extends BaseProps, HomeAssistantEntityProps {}
 
 function Entity(props: EntityProps): ReactElement {
  function handleGetEntityIcon(): void {
@@ -289,6 +290,7 @@ function Entity(props: EntityProps): ReactElement {
  )}
  </Grid>
  )}
+ <EntityAction {...props} />
  </Grid>
  </Fragment>
  );