@eohjsc/react-native-smart-city 0.2.82 → 0.2.85

package/assets/images/Event.svg

@@ -0,0 +1,9 @@
+<svg width="22" height="40" viewBox="0 0 22 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.4995 0H6.49908L0.500977 21.5962H6.51129L1.4009 40H3.20118L20.5983 18.4029H11.785L21.4995 0Z" fill="url(#paint0_linear_8208_3875)"/>
+<defs>
+<linearGradient id="paint0_linear_8208_3875" x1="0.500977" y1="0" x2="33.409" y2="17.2947" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B6B9F"/>
+<stop offset="1" stop-color="#D5FFCB"/>
+</linearGradient>
+</defs>
+</svg>

package/assets/images/brightness.svg

@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 3.90845C8.79471 3.90824 7.61636 4.26551 6.61406 4.93507C5.61177 5.60463 4.83056 6.55639 4.36924 7.66998C3.90791 8.78357 3.78721 10.009 4.02239 11.1912C4.25757 12.3734 4.83807 13.4593 5.69046 14.3115C6.54286 15.1638 7.62885 15.7441 8.81109 15.979C9.99333 16.214 11.2187 16.0931 12.3322 15.6316C13.4457 15.1701 14.3974 14.3887 15.0667 13.3863C15.7361 12.3839 16.0932 11.2055 16.0928 10.0001C16.0922 8.38449 15.4501 6.83522 14.3076 5.6929C13.1651 4.55058 11.6157 3.90872 10.0001 3.90845ZM10.0001 14.6376C9.08332 14.6378 8.18709 14.3662 7.4247 13.8571C6.66232 13.3479 6.06802 12.6242 5.71696 11.7773C5.36589 10.9304 5.27383 9.99847 5.4524 9.09928C5.63097 8.20008 6.07216 7.37403 6.72019 6.72557C7.36821 6.07711 8.19397 5.63536 9.09304 5.45618C9.99212 5.277 10.9241 5.36844 11.7712 5.71893C12.6184 6.06943 13.3425 6.66324 13.8522 7.42528C14.3618 8.18731 14.634 9.08336 14.6344 10.0001C14.6336 11.2293 14.1452 12.4079 13.2763 13.2773C12.4075 14.1467 11.2292 14.636 10.0001 14.6376Z" fill="#BFBFBF"/>
+<path d="M9.37419 0.866699H10.6242C10.6936 0.866699 10.7284 0.901421 10.7284 0.970866V2.96774C10.7284 3.03719 10.6936 3.07191 10.6242 3.07191H9.37419C9.30474 3.07191 9.27002 3.03719 9.27002 2.96774V0.970866C9.27002 0.901421 9.30474 0.866699 9.37419 0.866699Z" fill="#BFBFBF"/>
+<path d="M3.09933 3.98419L3.98321 3.10031C4.03232 3.0512 4.08142 3.0512 4.13053 3.10031L5.54253 4.51231C5.59164 4.56141 5.59164 4.61052 5.54253 4.65962L4.65865 5.54351C4.60954 5.59261 4.56044 5.59261 4.51133 5.54351L3.09933 4.1315C3.05022 4.0824 3.05022 4.03329 3.09933 3.98419Z" fill="#BFBFBF"/>
+<path d="M0.970866 9.27197H2.96774C3.03719 9.27197 3.07191 9.3067 3.07191 9.37614V10.6261C3.07191 10.6956 3.03719 10.7303 2.96774 10.7303H0.970866C0.901421 10.7303 0.866699 10.6956 0.866699 10.6261V9.37614C0.866699 9.3067 0.901421 9.27197 0.970866 9.27197Z" fill="#BFBFBF"/>
+<path d="M3.10079 15.8697L4.5128 14.4577C4.5619 14.4086 4.61101 14.4086 4.66011 14.4577L5.54399 15.3416C5.5931 15.3907 5.5931 15.4398 5.54399 15.4889L4.13199 16.9009C4.08289 16.95 4.03378 16.95 3.98468 16.9009L3.10079 16.017C3.05169 15.9679 3.05169 15.9188 3.10079 15.8697Z" fill="#BFBFBF"/>
+<path d="M9.37614 16.9282H10.6261C10.6956 16.9282 10.7303 16.9629 10.7303 17.0324V19.0293C10.7303 19.0987 10.6956 19.1334 10.6261 19.1334H9.37614C9.3067 19.1334 9.27197 19.0987 9.27197 19.0293V17.0324C9.27197 16.9629 9.3067 16.9282 9.37614 16.9282Z" fill="#BFBFBF"/>
+<path d="M14.4572 15.3404L15.3411 14.4565C15.3902 14.4074 15.4393 14.4074 15.4884 14.4565L16.9004 15.8685C16.9496 15.9176 16.9496 15.9667 16.9004 16.0158L16.0166 16.8997C15.9675 16.9488 15.9184 16.9488 15.8692 16.8997L14.4572 15.4877C14.4081 15.4386 14.4081 15.3895 14.4572 15.3404Z" fill="#BFBFBF"/>
+<path d="M17.0324 9.26978H19.0293C19.0987 9.26978 19.1334 9.3045 19.1334 9.37394V10.6239C19.1334 10.6934 19.0987 10.7281 19.0293 10.7281H17.0324C16.9629 10.7281 16.9282 10.6934 16.9282 10.6239V9.37394C16.9282 9.3045 16.9629 9.26978 17.0324 9.26978Z" fill="#BFBFBF"/>
+<path d="M14.4558 4.51109L15.8678 3.09908C15.9169 3.04998 15.966 3.04998 16.0151 3.09908L16.899 3.98297C16.9481 4.03207 16.9481 4.08118 16.899 4.13028L15.487 5.54229C15.4379 5.59139 15.3888 5.59139 15.3397 5.54229L14.4558 4.6584C14.4067 4.6093 14.4067 4.56019 14.4558 4.51109Z" fill="#BFBFBF"/>
+<path d="M9.89605 6.07715C8.87128 6.10077 7.89643 6.52444 7.18002 7.25756C6.4636 7.99068 6.0625 8.97503 6.0625 10.0001C6.0625 11.0251 6.4636 12.0095 7.18002 12.7426C7.89643 13.4757 8.87128 13.8994 9.89605 13.923C9.92367 13.923 9.95017 13.912 9.9697 13.8925C9.98924 13.8729 10.0002 13.8464 10.0002 13.8188V6.18132C10.0002 6.15369 9.98924 6.12719 9.9697 6.10766C9.95017 6.08812 9.92367 6.07715 9.89605 6.07715Z" fill="#BFBFBF"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.82",
+  "version": "0.2.85",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -161,7 +161,7 @@
     "react-native-image-resizer": "^1.4.5",
     "react-native-input-credit-card": "^0.5.5",
     "react-native-iphone-x-helper": "^1.2.1",
-    "react-native-keyboard-aware-scroll-view": "^0.9.2",
+    "react-native-keyboard-aware-scroll-view": "https://github.com/hinh-eoh/react-native-keyboard-aware-scroll-view.git",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-localize": "^1.4.1",
     "react-native-maps": "0.27.1",
@@ -174,6 +174,7 @@
     "react-native-parsed-text": "^0.0.22",
     "react-native-permissions": "^2.1.5",
     "react-native-popover-view": "^4.0.3",
+    "react-native-progress": "^5.0.0",
     "react-native-reanimated": "1.10.1",
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
@@ -188,6 +189,7 @@
     "react-native-version-check": "^3.4.2",
     "react-native-vlc-media-player": "^1.0.39",
     "react-native-webview": "^10.9.3",
+    "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",
     "react-native-wifi-reborn": "^4.5.0",
     "react-navigation": "^2.2.0",

package/src/Images/Common/SuccessfullyConnected.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.8437 11.0312H20.3781C20.0593 11.0312 19.7562 11.1844 19.5687 11.4469L14.6562 18.2594L12.4312 15.1719C12.2437 14.9125 11.9437 14.7563 11.6218 14.7563H10.1562C9.95303 14.7563 9.83428 14.9875 9.95303 15.1531L13.8468 20.5531C13.9388 20.6815 14.06 20.7861 14.2005 20.8583C14.341 20.9305 14.4967 20.9681 14.6546 20.9681C14.8125 20.9681 14.9682 20.9305 15.1087 20.8583C15.2492 20.7861 15.3704 20.6815 15.4624 20.5531L22.0437 11.4281C22.1656 11.2625 22.0468 11.0312 21.8437 11.0312V11.0312Z" fill="#52C41A"/>
+<path d="M16 2C8.26875 2 2 8.26875 2 16C2 23.7312 8.26875 30 16 30C23.7312 30 30 23.7312 30 16C30 8.26875 23.7312 2 16 2ZM16 27.625C9.58125 27.625 4.375 22.4187 4.375 16C4.375 9.58125 9.58125 4.375 16 4.375C22.4187 4.375 27.625 9.58125 27.625 16C27.625 22.4187 22.4187 27.625 16 27.625Z" fill="#52C41A"/>
+</svg>

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -6,35 +6,46 @@ import Text from '../Text';
 import { TESTID } from '../../configs/Constants';
 import { Colors, Images } from '../../configs';
 
-const CurtainButtonTemplate = memo(({ actionGroup, doAction }) => {
+const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
+  const {
+    text_open,
+    open_action_data,
+    text_stop,
+    stop_action_data,
+    text_close,
+    close_action_data,
+    action_off_data,
+    action_on_data,
+  } = configuration || {};
   const [lock, setLock] = useState(false);
-  const onButtonOpenPress = useCallback(
-    () => doAction(configuration.open_action_data),
-    [configuration.open_action_data, doAction]
-  );
-  const onButtonStopPress = useCallback(
-    () => doAction(configuration.stop_action_data),
-    [configuration.stop_action_data, doAction]
-  );
-  const onButtonClosePress = useCallback(
-    () => doAction(configuration.close_action_data),
-    [configuration.close_action_data, doAction]
-  );
+
+  const onButtonOpenPress = useCallback(() => {
+    const actionName = `${sensor?.name} ${text_open?.toLowerCase()}`;
+    doAction(open_action_data, null, actionName);
+  }, [open_action_data, text_open, doAction, sensor?.name]);
+
+  const onButtonStopPress = useCallback(() => {
+    const actionName = `${sensor?.name} ${text_stop?.toLowerCase()}`;
+    doAction(stop_action_data, null, actionName);
+  }, [stop_action_data, text_stop, doAction, sensor?.name]);
+
+  const onButtonClosePress = useCallback(() => {
+    const actionName = `${sensor?.name} ${text_close?.toLowerCase()}`;
+    doAction(close_action_data, null, actionName);
+  }, [close_action_data, text_close, doAction, sensor?.name]);
+
   const onChangeSwitch = useCallback(() => {
     if (lock) {
+      const actionName = `${sensor?.name} unlock`;
       setLock(false);
-      doAction(configuration.action_off_data);
+      doAction(action_off_data, null, actionName);
       return;
     }
-    doAction(configuration.action_on_data);
+    const actionName = `${sensor?.name} lock`;
+    doAction(action_on_data, null, actionName);
     setLock(true);
-  }, [
-    configuration.action_off_data,
-    configuration.action_on_data,
-    doAction,
-    lock,
-  ]);
+  }, [action_off_data, action_on_data, doAction, lock, sensor?.name]);
 
   const RenderThreeButtonActions = () => {
     const buttons = [

package/src/commons/ActionGroup/LightActionTemplate.js

@@ -0,0 +1,103 @@
+import React, { memo, useCallback, useState, useMemo } from 'react';
+import { Alert, View } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './LightActionTemplateStyles';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import { Card } from '../CardShadow';
+import ColorPicker from 'react-native-wheel-color-picker';
+import SvgBrightness from '../../../assets/images/brightness.svg';
+import Slider from 'react-native-slider';
+import OnOffButtonTemplate from './OnOffTemplate/OnOffButtonTemplate';
+
+const LightActionTemplate = memo(({ actionGroup, doAction, sensor }) => {
+  const t = useTranslations();
+  const { configuration, title } = actionGroup;
+  const dataColor = useMemo(() => {
+    return configuration?.config_color;
+  }, [configuration]);
+
+  const dataBrightness = useMemo(() => {
+    return configuration?.config_brightness;
+  }, [configuration]);
+
+  const [valueComplete, setValueComplete] = useState(dataBrightness || 0);
+  const [value, setValue] = useState(dataBrightness || 0);
+  const [color, setColor] = useState(dataColor || '');
+  const [isOn] = useState(true);
+
+  const onChangeColor = useCallback(
+    (color) => {
+      setColor(color);
+      Alert.alert(t('feature_under_development'));
+    },
+    [t]
+  );
+
+  const onChangeBrightness = useCallback(
+    (value) => {
+      setValueComplete(value);
+      Alert.alert(t('feature_under_development'));
+    },
+    [t]
+  );
+
+  const triggerAction = useCallback(() => {
+    Alert.alert(t('feature_under_development'));
+  }, [t]);
+
+  return (
+    <View>
+      <OnOffButtonTemplate
+        isOn={isOn}
+        triggerAction={triggerAction}
+        actionGroup={actionGroup}
+        isLight={true}
+      />
+      <Card title={!!title && t(title)}>
+        <View style={styles.viewPickColor}>
+          <ColorPicker
+            style={styles.colorPicker}
+            sliderHidden={true}
+            swatches={false}
+            color={color}
+            onColorChangeComplete={(color) => onChangeColor(color)}
+            thumbSize={16}
+          />
+        </View>
+        <View style={styles.viewBrightness}>
+          <View style={styles.LeftBrightness}>
+            <SvgBrightness />
+            <Text type="H4" style={styles.LeftTextBrightness}>
+              {t('brightness')}
+            </Text>
+          </View>
+          <View style={styles.RightBrightness}>
+            <View style={styles.slider}>
+              <Slider
+                value={valueComplete}
+                onSlidingComplete={(value) => onChangeBrightness(value)}
+                onValueChange={(value) => setValue(value)}
+                step={1}
+                minimumValue={0}
+                maximumValue={100}
+                thumbTintColor={Colors.Gray3}
+                minimumTrackTintColor={Colors.Primary}
+                maximumTrackTintColor={Colors.Gray4}
+                trackStyle={styles.trackSlider}
+                thumbStyle={styles.thumbSlider}
+              />
+            </View>
+            <View style={styles.valuePercent}>
+              <Text type="Label" style={styles.textValuePercent}>
+                {`${value || 0}%`}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </Card>
+    </View>
+  );
+});
+
+export default LightActionTemplate;

package/src/commons/ActionGroup/LightActionTemplateStyles.js

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingVertical: 30,
+  },
+  viewPickColor: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  viewBrightness: {
+    paddingTop: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  slider: {
+    width: 131,
+  },
+  trackSlider: {
+    height: 8,
+    borderRadius: 30,
+  },
+  thumbSlider: {
+    backgroundColor: Colors.Primary,
+    width: 20,
+    height: 20,
+  },
+  colorPicker: {
+    width: '100%',
+    height: 'auto',
+  },
+  valuePercent: {
+    width: 40,
+    flexDirection: 'row',
+    paddingLeft: 16,
+  },
+  textValuePercent: {
+    width: 50,
+  },
+  LeftBrightness: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  LeftTextBrightness: {
+    paddingTop: 4,
+    paddingLeft: 8,
+  },
+  RightBrightness: {
+    flex: 1.2,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -38,8 +38,8 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   }, [configValues, config, keep_track_config]);
 
   const doActionAndWatchConfig = useCallback(
-    (actionData, actionValue) => {
-      doAction(actionData, actionValue);
+    (actionData, actionValue, actionName) => {
+      doAction(actionData, actionValue, actionName);
       if (!sensor?.is_managed_by_backend) {
         return;
       }
@@ -56,16 +56,18 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   );
 
   const doActionUp = useCallback(async () => {
+    const actionName = `${sensor?.name} temp up`;
     const newValue = checkMinMax(value + 1);
-    doActionAndWatchConfig(action_data, newValue);
+    doActionAndWatchConfig(action_data, newValue, actionName);
     setValue(newValue);
-  }, [checkMinMax, value, doActionAndWatchConfig, action_data]);
+  }, [sensor?.name, checkMinMax, value, doActionAndWatchConfig, action_data]);
 
   const doActionDown = useCallback(async () => {
+    const actionName = `${sensor?.name} temp down`;
     const newValue = checkMinMax(value - 1);
-    doActionAndWatchConfig(action_data, newValue);
+    doActionAndWatchConfig(action_data, newValue, actionName);
     setValue(newValue);
-  }, [checkMinMax, value, doActionAndWatchConfig, action_data]);
+  }, [sensor?.name, checkMinMax, value, doActionAndWatchConfig, action_data]);
 
   const checkMinMax = useCallback(
     (tempValue) => {

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplate.js

@@ -6,37 +6,39 @@ import { TouchableOpacity, View } from 'react-native';
 import { Colors } from '../../../configs';
 import styles from './OnOffButtonTemplateStyle';
 
-const OnOffButtonTemplate = memo(({ isOn, triggerAction, actionGroup }) => {
-  const { configuration } = actionGroup;
+const OnOffButtonTemplate = memo(
+  ({ isOn, triggerAction, actionGroup, isLight = false }) => {
+    const { configuration } = actionGroup;
 
-  return (
-    <>
-      <View style={styles.barrierControlContainer}>
-        <TouchableOpacity style={styles.bigCircle} onPress={triggerAction}>
-          <View style={styles.smallCircle}>
-            <Icon
-              name={isOn ? configuration.icon_on : configuration.icon_off}
-              size={44}
-              color={isOn ? Colors.Green7 : Colors.Gray6}
-            />
-            <Text
-              style={[
-                styles.textBig,
-                { color: isOn ? Colors.Gray8 : Colors.Gray6 },
-              ]}
-            >
-              {isOn ? configuration.text_on : configuration.text_off}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-      {!!actionGroup.title && (
-        <Text size={20} semibold center>
-          {actionGroup.title}
-        </Text>
-      )}
-    </>
-  );
-});
+    return (
+      <>
+        <View style={styles.barrierControlContainer}>
+          <TouchableOpacity style={styles.bigCircle} onPress={triggerAction}>
+            <View style={styles.smallCircle}>
+              <Icon
+                name={isOn ? configuration.icon_on : configuration.icon_off}
+                size={44}
+                color={isOn ? Colors.Green7 : Colors.Gray6}
+              />
+              <Text
+                style={[
+                  styles.textBig,
+                  { color: isOn ? Colors.Gray8 : Colors.Gray6 },
+                ]}
+              >
+                {isOn ? configuration.text_on : configuration.text_off}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+        {!!actionGroup.title && !isLight && (
+          <Text size={20} semibold center>
+            {actionGroup.title}
+          </Text>
+        )}
+      </>
+    );
+  }
+);
 
 export default OnOffButtonTemplate;

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -34,22 +34,30 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     }
     if (action_on_data && action_off_data) {
       if (isOn) {
-        doAction(action_off_data);
+        const actionName = `${
+          sensor?.name
+        } ${actionGroup?.title?.toLowerCase()} off`;
+        doAction(action_off_data, null, actionName);
       } else {
-        doAction(action_on_data);
+        const actionName = `${
+          sensor?.name
+        } ${actionGroup?.title?.toLowerCase()} on`;
+        doAction(action_on_data, null, actionName);
       }
     }
     if (sensor?.is_managed_by_backend) {
       configuration.config && watchMultiConfigs([configuration.config]);
     }
   }, [
+    actionGroup?.title,
     action_data,
     action_off_data,
     action_on_data,
     configuration.config,
     doAction,
     isOn,
-    sensor,
+    sensor?.is_managed_by_backend,
+    sensor?.name,
   ]);
 
   useEffect(() => {

package/src/commons/ActionGroup/OneBigButtonTemplate.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { Icon } from '@ant-design/react-native';
 import Text from '../Text';
@@ -6,19 +6,22 @@ import Text from '../Text';
 import { Colors } from '../../configs';
 import styles from './OneBigButtonTemplateStyle';
 
-const OneBigButtonTemplate = memo(({ actionGroup, doAction }) => {
+const OneBigButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
+  const { text, action_data } = configuration || {};
+
+  const onPressDoAction = useCallback(() => {
+    const actionName = `${sensor?.name} ${text?.toLowerCase()}`;
+    doAction(action_data, null, actionName);
+  }, [action_data, text, doAction, sensor?.name]);
 
   return (
     <>
       <View style={styles.barrierControlContainer}>
-        <TouchableOpacity
-          style={styles.bigCircle}
-          onPress={() => doAction(configuration.action_data)}
-        >
+        <TouchableOpacity style={styles.bigCircle} onPress={onPressDoAction}>
           <View style={styles.smallCircle}>
             <Icon name={configuration.icon} size={44} color={Colors.Green7} />
-            <Text style={styles.textBig}>{configuration.text}</Text>
+            <Text style={styles.textBig}>{text}</Text>
           </View>
         </TouchableOpacity>
       </View>

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -56,7 +56,8 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const onDone = useCallback(() => {
     const newOption = options[selectedIndex];
     const value = getOptionValue(newOption);
-    doAction(action_data, value);
+    const actionName = `${sensor?.name} ${title?.toLowerCase()} ${value}`;
+    doAction(action_data, value, actionName);
     if (sensor?.is_managed_by_backend) {
       configuration.config && watchMultiConfigs([configuration.config]);
     }
@@ -68,7 +69,9 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     hideAlertAction,
     options,
     selectedIndex,
-    sensor.is_managed_by_backend,
+    sensor?.is_managed_by_backend,
+    sensor?.name,
+    title,
   ]);
 
   const iconKit = !!icon_kit_data && icon_kit_data.icon;

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -20,7 +20,7 @@ const buttonStyle = {
   },
 };
 
-const GridItem = ({ item, index, length, doAction, sensor }) => {
+const GridItem = ({ item, index, length, doAction, sensor, title }) => {
   const isFirst = index === 0;
   const isLast = index === length - 1;
   const isNextLine = index % 4 === 0;
@@ -49,12 +49,15 @@ const GridItem = ({ item, index, length, doAction, sensor }) => {
 
   const doActionAndWatchConfig = useCallback(
     (actionData) => {
-      doAction(actionData);
+      const actionName = `${
+        sensor?.name
+      } ${title?.toLowerCase()} ${text?.toLowerCase()}`;
+      doAction(actionData, null, actionName);
       if (sensor?.is_managed_by_backend) {
         config && watchMultiConfigs([config]);
       }
     },
-    [config, doAction, sensor.is_managed_by_backend]
+    [config, doAction, sensor?.is_managed_by_backend, sensor?.name, text, title]
   );
 
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
@@ -121,6 +124,7 @@ const StatesGridActionTemplate = ({ actionGroup, doAction, sensor }) => {
               length={options.length}
               doAction={doAction}
               sensor={sensor}
+              title={title}
             />
           ))}
         </View>

package/src/commons/ActionGroup/ThreeButtonTemplate.js

@@ -8,9 +8,19 @@ import { TESTID } from '../../configs/Constants';
 import { Colors } from '../../configs';
 import { Card } from '../../commons/CardShadow';
 
-const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
+const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const t = useTranslations();
   const { configuration } = actionGroup;
+  const {
+    text1,
+    action1_data,
+    text2,
+    action2_data,
+    text3,
+    action3_data,
+    action_off_data,
+    action_on_data,
+  } = configuration;
   const [lock, setLock] = useState(false);
   const iconCustom = (icon) => {
     return icon === 'stop' ? (
@@ -19,32 +29,31 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
       <Icon name={icon} size={30} color={Colors.Primary} />
     );
   };
-  const onButton1Press = useCallback(
-    () => doAction(configuration.action1_data),
-    [configuration.action1_data, doAction]
-  );
-  const onButton2Press = useCallback(
-    () => doAction(configuration.action2_data),
-    [configuration.action2_data, doAction]
-  );
-  const onButton3Press = useCallback(
-    () => doAction(configuration.action3_data),
-    [configuration.action3_data, doAction]
-  );
+  const onButton1Press = useCallback(() => {
+    const actionName = `${sensor?.name} ${text1?.toLowerCase()}`;
+    doAction(action1_data, null, actionName);
+  }, [action1_data, text1, doAction, sensor?.name]);
+
+  const onButton2Press = useCallback(() => {
+    const actionName = `${sensor?.name} ${text2?.toLowerCase()}`;
+    doAction(action2_data, null, actionName);
+  }, [action2_data, text2, doAction, sensor?.name]);
+
+  const onButton3Press = useCallback(() => {
+    const actionName = `${sensor?.name} ${text3?.toLowerCase()}`;
+    doAction(action3_data, null, actionName);
+  }, [action3_data, text3, doAction, sensor?.name]);
+
   const onChangeSwitch = useCallback(() => {
     if (lock) {
       setLock(false);
-      doAction(configuration.action_off_data);
+      doAction(action_off_data);
       return;
     }
-    doAction(configuration.action_on_data);
+    doAction(action_on_data);
     setLock(true);
-  }, [
-    configuration.action_off_data,
-    configuration.action_on_data,
-    doAction,
-    lock,
-  ]);
+  }, [action_off_data, action_on_data, doAction, lock]);
+
   const itemLock = (icon, color) => {
     return (
       <>
@@ -84,7 +93,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
                 color={Colors.Primary}
               />
             </View>
-            <Text style={styles.text}>{configuration.text1}</Text>
+            <Text style={styles.text}>{text1}</Text>
           </TouchableOpacity>
 
           <TouchableOpacity
@@ -96,7 +105,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
             <View style={styles.imageButton}>
               {iconCustom(configuration.icon2)}
             </View>
-            <Text style={styles.text}>{configuration.text2}</Text>
+            <Text style={styles.text}>{text2}</Text>
           </TouchableOpacity>
 
           <TouchableOpacity
@@ -112,7 +121,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
                 color={Colors.Primary}
               />
             </View>
-            <Text style={styles.text}>{configuration.text3}</Text>
+            <Text style={styles.text}>{text3}</Text>
           </TouchableOpacity>
         </View>
         <View style={styles.lockSwitch}>