@eohjsc/react-native-smart-city 0.3.65 → 0.3.67

package/src/commons/ActionTemplate/index.js

@@ -22,16 +22,16 @@ const ActionTemplate = memo(({ device, data, onSelectAction }) => {
 
   const onPressSelectAction = useCallback(
     (action) => {
-      let data = null;
+      let actionData = null;
       if (device?.device_type === DEVICE_TYPE.ZIGBEE) {
         const state = action?.action_on ? 1 : 0;
-        data = { state: state };
+        actionData = { state: state };
         if (action?.allow_config_store_value && action?.config) {
-          data.config_id = action.config;
-          data.config_value = state;
+          actionData.config_id = action.config;
+          actionData.config_value = state;
         }
       } else if (device?.device_type === DEVICE_TYPE.LG_THINQ) {
-        data = { value: action?.action_on ? 1 : 0 };
+        actionData = { value: action?.action_on ? 1 : 0 };
       }
       setVisible(false);
       setActionName(action?.name);
@@ -39,7 +39,7 @@ const ActionTemplate = memo(({ device, data, onSelectAction }) => {
         onSelectAction({
           action_name: action?.name,
           action: action?.action,
-          data: data,
+          data: actionData,
           template: action?.template,
         });
     },

package/src/commons/Device/LinearChart.js

@@ -32,7 +32,7 @@ const chartOptions = {
     {
       name: 'AQI',
       data: [],
-      type: 'spline',
+      type: 'line',
       tooltip: {
         valueDecimals: 2,
       },
@@ -79,7 +79,7 @@ function LinearChart({ datas }) {
       series.push({
         name: datas[i].title,
         data: arr,
-        type: 'spline',
+        type: 'line',
         color: datas[i].color,
         states: {
           inactive: {

package/src/commons/Device/PMSensor/{PMSensorIndicatior.js → PMSensorIndicator.js}

@@ -6,8 +6,10 @@ import styles from './PMSensorIndicatorStyles';
 import { roundNumber } from '../../../utils/Utils';
 
 //using for PM2.5-10, CO, UV, Rainflow Sensor
-const keyExtractor = (item) => item.id.toString();
-const PMSensorIndicatior = memo(({ data = [], style }) => {
+const keyExtractor = (item, index) => {
+  return index;
+};
+const PMSensorIndicator = memo(({ data = [], style }) => {
   const renderItem = useCallback(
     ({ item }) => {
       const getValue = ['', null, undefined, NaN].includes(item?.value)
@@ -15,7 +17,6 @@ const PMSensorIndicatior = memo(({ data = [], style }) => {
         : roundNumber(item?.value);
       return (
         <QualityIndicatorItem
-          key={item.id.toString()}
           color={item.color}
           standard={item.standard}
           value={getValue}
@@ -49,4 +50,4 @@ const PMSensorIndicatior = memo(({ data = [], style }) => {
   );
 });
 
-export default PMSensorIndicatior;
+export default PMSensorIndicator;

package/src/commons/IconComponent/index.js

@@ -3,22 +3,37 @@ import React, { memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 import FImage from '../FImage';
-import Text from '../Text';
 
 // Priority: icon - icon_outlined
 const IconComponent = memo(
   ({
-    icon_outlined,
     icon,
     isSendingCommand = false,
-    size = 40,
-    iconSize = 24,
+    size = 30,
+    iconSize = 30,
     style,
+    color,
   }) => {
     let extraStyle = {
       width: size,
       height: size,
     };
+    const displayIcon = useMemo(() => {
+      let newIcon = `${icon}`;
+      if (newIcon && newIcon[0] === newIcon[0].toUpperCase()) {
+        newIcon = newIcon[0].toLowerCase() + newIcon.substring(1);
+        if (newIcon.includes('Outlined')) {
+          newIcon = newIcon.substring(0, newIcon.length - 'Outlined'.length);
+        } else if (newIcon.includes('Filled')) {
+          newIcon = newIcon.substring(0, newIcon.length - 'Filled'.length);
+        } else if (newIcon.includes('TwoTone')) {
+          newIcon = newIcon.substring(0, newIcon.length - 'TwoTone'.length);
+        }
+        newIcon = newIcon.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+      }
+      return newIcon;
+    }, [icon]);
+
     const isUrlImage = useMemo(() => {
       if (!icon) {
         return false;
@@ -30,33 +45,35 @@ const IconComponent = memo(
       return isUrl !== null;
     }, [icon]);
 
+    if (!icon) {
+      return null;
+    }
     if (isUrlImage) {
       return (
         <FImage
-          source={{ uri: icon }}
+          source={{ uri: displayIcon }}
           style={[styles.iconAction, extraStyle, style]}
         />
       );
-    } else if (icon) {
+    } else if (icon.includes('Filled')) {
       return (
         <IconFill
-          name={icon}
-          color={isSendingCommand ? Colors.TextGray : Colors.Green7}
+          name={displayIcon}
+          color={isSendingCommand ? Colors.TextGray : color || Colors.Green7}
           size={iconSize}
-          style={style}
+          style={[extraStyle, style]}
         />
       );
-    } else if (icon_outlined) {
+    } else {
       return (
         <IconOutline
-          name={icon_outlined}
-          color={isSendingCommand ? Colors.TextGray : Colors.Green7}
+          name={displayIcon}
+          color={isSendingCommand ? Colors.TextGray : color || Colors.Green7}
           size={iconSize}
-          style={style}
+          style={[extraStyle, style]}
         />
       );
     }
-    return <Text />;
   }
 );
 

package/src/commons/OneTapTemplate/NumberUpDownActionTemplate.js

@@ -56,15 +56,15 @@ const NumberUpDownActionTemplate = ({ device, data = {}, onSelectAction }) => {
   }, [value, max_value]);
 
   const onPressDone = useCallback(() => {
-    let data = String(value);
+    let actionData = String(value);
     if (device?.device_type !== DEVICE_TYPE.GOOGLE_HOME) {
-      data = { temperature: value };
+      actionData = { temperature: value };
       if (allow_config_store_value && config) {
-        data.config_id = config;
-        data.config_value = value;
+        actionData.config_id = config;
+        actionData.config_value = value;
       }
     } else if (device?.device_type === DEVICE_TYPE.LG_THINQ) {
-      data = {
+      actionData = {
         temperature: {
           targetTemperature: value,
           unit: 'C',
@@ -76,7 +76,7 @@ const NumberUpDownActionTemplate = ({ device, data = {}, onSelectAction }) => {
     onSelectAction &&
       onSelectAction({
         action,
-        data: data,
+        data: actionData,
         template,
       });
     onClose();

package/src/commons/OneTapTemplate/OptionsDropdownActionTemplate.js

@@ -29,24 +29,24 @@ const OptionsDropdownActionTemplate = ({ device, data, onSelectAction }) => {
 
   const onPressDone = useCallback(() => {
     const { value_text, value_int } = options[activeAction];
-    let data = { level: value_text, key_code: value_int };
+    let actionData = { level: value_text, key_code: value_int };
     if (allow_config_store_value && config) {
-      data.config_id = config;
-      data.config_value = value_int;
+      actionData.config_id = config;
+      actionData.config_value = value_int;
     } else if (device?.device_type === DEVICE_TYPE.LG_THINQ) {
-      data = {
+      actionData = {
         airFlow: {
           windStrength: value_text,
         },
       };
     } else if (device?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
-      data = value_text;
+      actionData = value_text;
     }
 
     onSelectAction &&
       onSelectAction({
         action,
-        data: data,
+        data: actionData,
         template,
       });
     setActionName(options[activeAction]?.text);

package/src/commons/OneTapTemplate/StatesGridActionTemplate.js

@@ -19,16 +19,16 @@ const StatesGridActionTemplate = ({ device, data, onSelectAction }) => {
 
   const hanleSelectAction = useCallback(
     (item) => {
-      let data = null;
+      let actionData = null;
       const { allow_config_store_value, config, is_on_value } = item;
       if (allow_config_store_value && config) {
-        data = { config_id: config, config_value: is_on_value };
+        actionData = { config_id: config, config_value: is_on_value };
       }
       setActionName(item.text);
       onSelectAction &&
         onSelectAction({
           action: item.action,
-          data: data,
+          data: actionData,
           template,
         });
       setVisible(false);

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -93,7 +93,13 @@ const ItemOneTap = memo(
         return <OneTap />;
       } else if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
         return <ValueChange />;
-      } else if (type === AUTOMATE_TYPE.EVENT) {
+      } else if (
+        [
+          AUTOMATE_TYPE.EVENT,
+          AUTOMATE_TYPE.EVENT_ACTION,
+          AUTOMATE_TYPE.EVENT_SENSOR,
+        ].includes(type)
+      ) {
         return <Event />;
       } else {
         return <Schedule />;

package/src/commons/UnitSummary/ConfigHistoryChart/index.js

@@ -64,7 +64,7 @@ export const updateConfigChart = async (
   data.configs.map((config) => {
     if (config.middle.not_ready.length > 0) {
       const channel = getPusher().subscribe(config.middle.channel);
-      channel.bind('caching-value-log-process', async ({ success }) => {
+      channel.bind('caching-value-log-process', async () => {
         await Promise.all(
           config.middle.not_ready.map((item) =>
             (async () => {

package/src/configs/API.js

@@ -71,6 +71,8 @@ const API = {
     ACTIVITY_LOG: () => SCConfig.apiRoot + '/chip_manager/action_log',
     DISPLAY_ACTIONS: (id) =>
       SCConfig.apiRoot + `/property_manager/sensors/${id}/display_actions/`,
+    DISPLAY_EVENTS: (id) =>
+      SCConfig.apiRoot + `/property_manager/sensors/${id}/display_events/`,
     CHANGE_SUB_UNIT: (unit_id, station_id, id) =>
       `/property_manager/${unit_id}/sub_units/${station_id}/devices/${id}/change_sub_unit/`,
     ADD_TO_FAVOURITES: (id) =>

package/src/configs/Constants.js

@@ -83,7 +83,7 @@ export const DEVICE_TYPE = {
   GOOGLE_HOME: 'GOOGLE_HOME',
   WIFI_DEVICE: 'WIFI_DEVICE',
   MODBUS: 'MODBUS',
-  INTERNAL: 'INTERNAL',
+  IO: 'INPUT/OUTPUT',
 };
 export const PERMISSION_TYPE = {
   ACTION: 'ACTION',
@@ -119,6 +119,8 @@ export const AUTOMATE_TYPE = {
   VALUE_CHANGE: 'value_change',
   SCHEDULE: 'schedule',
   EVENT: 'event',
+  EVENT_ACTION: 'event_action',
+  EVENT_SENSOR: 'event_sensor',
   ONE_TAP_ONLY: 'one_tap_only',
   AUTOMATE: 'automate',
   AUTOMATION: 'automation',
@@ -201,6 +203,18 @@ export const AUTOMATES = {
     explanation: 'setup_the_conditions',
     icon: Event,
   },
+  event_sensor: {
+    value: AUTOMATE_TYPE.EVENT_SENSOR,
+    title: 'event',
+    explanation: 'setup_the_conditions',
+    icon: Event,
+  },
+  event_action: {
+    value: AUTOMATE_TYPE.EVENT_ACTION,
+    title: 'event',
+    explanation: 'setup_the_conditions',
+    icon: Event,
+  },
 };
 
 export const UNIT_TYPES = {

package/src/iot/RemoteControl/Internet.js

@@ -10,6 +10,9 @@ export const sendCommandOverInternet = async (sensor, action, data, source) => {
       data = data.toString(16).toUpperCase();
     }
   }
+  if (typeof data === 'object') {
+    data = JSON.stringify(data);
+  }
   ToastBottomHelper.success(t('Sending command via internet'));
   const { success } = await axiosPost(API.DEVICE.TRIGGER_ACTION(sensor.id), {
     key: action.key,

package/src/screens/AddNewAction/SelectAction.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useEffect, useState, useMemo } from 'react';
-import { Image, TouchableOpacity, View } from 'react-native';
+import { Alert, Image, TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { Icon } from '@ant-design/react-native';
 
@@ -16,6 +16,7 @@ import {
   CONDITION_TYPES,
   STATE_VALUE_SENSOR_TYPES,
   AccessibilityLabel,
+  AUTOMATE_TYPE,
 } from '../../configs/Constants';
 import Routes from '../../utils/Route';
 import styles from './Styles/SelectActionStyles';
@@ -42,6 +43,7 @@ const SelectAction = memo(({ route }) => {
     isCreateNewAction,
     isMultiUnits,
     oldType,
+    isSetupEvent,
   } = route?.params || {};
   const [data, setData] = useState([]);
   const [actions, setActions] = useState([]);
@@ -56,6 +58,8 @@ const SelectAction = memo(({ route }) => {
     const { success, data: automateData } = await axiosGet(
       isSelectSensor
         ? API.AUTOMATE.GET_SENSOR_CONFIG(device.id)
+        : isSetupEvent
+        ? API.DEVICE.DISPLAY_EVENTS(device.id)
         : API.DEVICE.DISPLAY_ACTIONS(device.id),
       isSelectSensor && {},
       isSelectSensor && true
@@ -97,7 +101,12 @@ const SelectAction = memo(({ route }) => {
           setSensorData(automateData);
         }
       } else {
-        setData(automateData);
+        if (isSetupEvent) {
+          setData(automateData?.actions);
+          setSensorData(automateData?.config_events);
+        } else {
+          setData(automateData);
+        }
       }
     }
     setIsfetched(false);
@@ -111,6 +120,7 @@ const SelectAction = memo(({ route }) => {
     automate.value,
     device.id,
     isSelectSensor,
+    isSetupEvent,
     t,
   ]);
 
@@ -123,7 +133,7 @@ const SelectAction = memo(({ route }) => {
           value: itemTemp?.value,
           config: itemTemp?.id,
         },
-        type,
+        type: isSetupEvent ? AUTOMATE_TYPE.EVENT_SENSOR : type,
         unit,
         isAutomateTab,
         isSelectSensor,
@@ -155,7 +165,11 @@ const SelectAction = memo(({ route }) => {
     t,
   ]);
   const onSave = useCallback(async () => {
-    if (isSelectSensor) {
+    if (actions.length && !!checkedItem.id) {
+      Alert.alert('', t('choose_only_one'));
+      return;
+    }
+    if (isSelectSensor || isSetupEvent) {
       await checkConditionToContinue();
     } else {
       if (automateId) {
@@ -214,7 +228,7 @@ const SelectAction = memo(({ route }) => {
           automateData: {
             action: actions[0].action,
           },
-          type,
+          type: AUTOMATE_TYPE.EVENT_ACTION,
           unit,
           isAutomateTab,
           isSelectSensor,
@@ -420,12 +434,55 @@ const SelectAction = memo(({ route }) => {
             })
           )
         ) : (
-          <RenderActionItem
-            data={data}
-            device={device}
-            onSelectAction={handleOnSelectAction}
-            accessibilityLabel={AccessibilityLabel.ACTION_ITEM}
-          />
+          <View>
+            <RenderActionItem
+              data={data}
+              device={device}
+              onSelectAction={handleOnSelectAction}
+              accessibilityLabel={AccessibilityLabel.ACTION_ITEM}
+            />
+            {/* TODO: Huy - refactor/combine with value_change case */}
+            {!!sensorData &&
+              sensorData.map((item) => {
+                const isHasValue = !!item?.value;
+                return (
+                  <View style={styles.wrapItem} key={item?.id}>
+                    <TitleCheckBox
+                      onPress={onChecked}
+                      id={item?.id}
+                      title={item?.name}
+                      titleStyle={styles.titleStyle}
+                      wrapStyle={styles.wrapStyleCheckBox}
+                      isChecked={checkedItem?.id === item?.id}
+                    />
+                    <TouchableOpacity
+                      onPress={onPressItem(item)}
+                      style={[styles.wrapCondition, styles.shadowView]}
+                    >
+                      <Text type="Body" color={Colors.Gray7}>
+                        {t('condition')}
+                      </Text>
+                      <Text
+                        numberOfLines={1}
+                        type="H4"
+                        semibold={isHasValue}
+                        style={styles.description}
+                      >
+                        {isHasValue
+                          ? RenderCondition(item)
+                          : `${t('no')} ${t('condition')}`}
+                      </Text>
+                      {isHasValue && (
+                        <Image
+                          source={Images.arrowBack}
+                          style={styles.arrowRight}
+                        />
+                      )}
+                    </TouchableOpacity>
+                  </View>
+                );
+              })}
+          </View>
         )}
         {data?.length === 0 && sensorData?.length === 0 && !isfetched && (
           <View style={styles.noneData}>
@@ -441,15 +498,12 @@ const SelectAction = memo(({ route }) => {
 });
 
 const RenderActionItem = ({ device, data, onSelectAction }) => {
-  if (!data.length) {
-    return null;
-  }
   const actionTemplate = [];
   const optionsDropdownActionTemplates = [];
   const numberUpDownActionTemplates = [];
   const statesGridActionTemplates = [];
 
-  data.forEach((item) => {
+  data?.forEach((item) => {
     switch (item.template) {
       case 'on_off_button_action_template':
       case 'one_button_action_template':

package/src/screens/AddNewAction/SelectSensorDevices.js

@@ -29,6 +29,7 @@ const SelectSensorDevices = memo(({ route }) => {
     isCreateNewAction,
     isMultiUnits,
     oldType,
+    isSetupEvent,
   } = route?.params || {};
 
   const [listStation, setListStation] = useState([]);
@@ -117,6 +118,7 @@ const SelectSensorDevices = memo(({ route }) => {
       isCreateNewAction,
       isMultiUnits,
       oldType,
+      isSetupEvent,
     });
   }, [
     navigate,
@@ -133,6 +135,7 @@ const SelectSensorDevices = memo(({ route }) => {
     isCreateNewAction,
     isMultiUnits,
     oldType,
+    isSetupEvent,
   ]);
 
   const onPressClose = useCallback(() => {

package/src/screens/AddNewAutoSmart/index.js

@@ -48,6 +48,7 @@ const AddNewAutoSmart = memo(({ route }) => {
         route: Routes.SelectSensorDevices,
         data: {
           title: AUTOMATE_SELECT.SELECT_DEVICE,
+          isSetupEvent: true,
         },
       },
     ],
@@ -68,6 +69,7 @@ const AddNewAutoSmart = memo(({ route }) => {
         route: Routes.SelectSensorDevices,
         data: {
           title: AUTOMATE_SELECT.SELECT_DEVICE,
+          isSetupEvent: true,
         },
       },
     ],

package/src/screens/AllGateway/GatewayDetail/__test__/index.test.js

@@ -181,7 +181,7 @@ describe('Test GatewayDetail', () => {
     expect(tabPaneCT.props.listTabs[0].data).toEqual([
       { id: 1, name: 'device 1' },
     ]);
-    expect(tabPaneCT.props.listTabs[0].title).toEqual(DEVICE_TYPE.INTERNAL);
+    expect(tabPaneCT.props.listTabs[0].title).toEqual(DEVICE_TYPE.IO);
   });
 
   it('test render GatewayDetail onPress TabPanel zigbee', async () => {

package/src/screens/AllGateway/GatewayDetail/index.js

@@ -37,7 +37,7 @@ const GatewayDetail = () => {
     () => [
       {
         id: 1,
-        title: DEVICE_TYPE.INTERNAL,
+        title: DEVICE_TYPE.IO,
         data: gatewayDevices?.internal,
       },
       {
@@ -132,7 +132,7 @@ const GatewayDetail = () => {
   ]);
 
   const isInternal = useMemo(() => {
-    return listTabs[selectedIndex]?.title === DEVICE_TYPE.INTERNAL;
+    return listTabs[selectedIndex]?.title === DEVICE_TYPE.IO;
   }, [listTabs, selectedIndex]);
 
   const isModbus = useMemo(() => {

package/src/screens/Device/components/SensorDisplayItem.js

@@ -6,7 +6,7 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { DetailHistoryChart } from './DetailHistoryChart';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
-import PMSensorIndicatior from '../../../commons/Device/PMSensor/PMSensorIndicatior';
+import PMSensorIndicator from '../../../commons/Device/PMSensor/PMSensorIndicator';
 import Anemometer from '../../../commons/Device/WindSpeed/Anemometer';
 import styles from '../styles';
 import Compass from '../../../commons/Device/WindDirection/Compass';
@@ -109,10 +109,7 @@ export const SensorDisplayItem = ({
           );
         case 'simple_list':
           return (
-            <PMSensorIndicatior
-              data={getData(item)}
-              style={styles.simpleList}
-            />
+            <PMSensorIndicator data={getData(item)} style={styles.simpleList} />
           );
         case 'gauge':
           return (