@eohjsc/react-native-smart-city 0.4.86 → 0.4.88

package/assets/images/Delay.svg

@@ -0,0 +1,14 @@
+<svg width="21" height="34" viewBox="0 0 21 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L0.0175004 10.2L7 17L0.0175004 23.817L0 34H21V23.8L14 17L21 10.217V0H0ZM17.5 24.65V30.6H3.5V24.65L10.5 17.85L17.5 24.65Z" fill="url(#paint0_linear_1913_17610)"/>
+<path d="M7.35 30.26H13.65C13.4294 28.5299 12.1032 27.2 10.5 27.2C8.89685 27.2 7.57059 28.5299 7.35 30.26Z" fill="url(#paint1_linear_1913_17610)"/>
+<defs>
+<linearGradient id="paint0_linear_1913_17610" x1="0" y1="0" x2="30.3834" y2="18.787" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B6B9F"/>
+<stop offset="1" stop-color="#D5FFCB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1913_17610" x1="0" y1="0" x2="30.3834" y2="18.787" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B6B9F"/>
+<stop offset="1" stop-color="#D5FFCB"/>
+</linearGradient>
+</defs>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.86",
+  "version": "0.4.88",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Action/ItemQuickAction.js

@@ -5,140 +5,121 @@ import { useSCContextSelector } from '../../context';
 import { useRemoteControl } from '../../hooks/IoT';
 import { useConfigGlobalState } from '../../iot/states';
 import IconComponent from '../IconComponent';
-import { Colors } from '../../configs';
 
-const ItemQuickAction = memo(
-  ({ sensor, wrapperStyle, setStatus, iconSize = 30 }) => {
-    const { quick_action } = sensor || {};
-    const {
-      config_id,
-      off_action,
-      on_status,
-      on_action,
-      off_status,
-      interval,
-      will_auto_update_status,
-      on_state_values,
-    } = quick_action || {};
-    const [action, setAction] = useState(sensor?.action);
-    // eslint-disable-next-line no-unused-vars
-    const [configValues, _] = useConfigGlobalState('configValues');
-    const currentValue = configValues[config_id]?.value || 0;
-    const isFault = currentValue === 2; // phukhaco fault value
-    const [isOn, setIsOn] = useState(currentValue);
+const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
+  const { quick_action } = sensor || {};
+  const {
+    config_id,
+    off_action,
+    on_status,
+    on_action,
+    off_status,
+    interval,
+    will_auto_update_status,
+    on_state_values,
+  } = quick_action || {};
+  const [action, setAction] = useState(sensor?.action);
+  // eslint-disable-next-line no-unused-vars
+  const [configValues, _] = useConfigGlobalState('configValues');
+  const currentValue = configValues[config_id]?.value || 0;
+  const [isOn, setIsOn] = useState(currentValue);
 
-    const sendRemoteCommand = useRemoteControl();
-    const [processing, setProcessing] = useState(false);
+  const sendRemoteCommand = useRemoteControl();
+  const [processing, setProcessing] = useState(false);
 
-    const getIsOnValue = useCallback(() => {
-      if (on_state_values && on_state_values.length > 0) {
-        return on_state_values.includes(currentValue);
-      }
-      return !!currentValue;
-    }, [currentValue, on_state_values]);
-
-    useEffect(() => {
-      setIsOn(getIsOnValue());
-    }, [getIsOnValue]);
+  const getIsOnValue = useCallback(() => {
+    if (on_state_values && on_state_values.length > 0) {
+      return on_state_values.includes(currentValue);
+    }
+    return !!currentValue;
+  }, [currentValue, on_state_values]);
 
-    useEffect(() => {
-      if (!quick_action) {
-        return;
-      }
+  useEffect(() => {
+    setIsOn(getIsOnValue());
+  }, [getIsOnValue]);
 
-      if (isOn) {
-        setAction(off_action);
-        setStatus && setStatus(on_status);
-      } else {
-        setAction(on_action);
-        setStatus && setStatus(off_status);
-      }
-    }, [
-      isOn,
-      setStatus,
-      quick_action,
-      off_action,
-      on_status,
-      on_action,
-      off_status,
-    ]);
+  useEffect(() => {
+    if (!quick_action) {
+      return;
+    }
 
-    const userId = useSCContextSelector((state) => state?.auth.account.user.id);
-    const onActionPress = useCallback(async () => {
-      if (isFault) {
-        /* istanbul ignore next */
-        return;
-      }
-      if (processing || !action) {
-        /* istanbul ignore next */
-        return;
-      }
-      setProcessing(true);
-      let data = null;
-      if (action?.allow_config_store_value_id === config_id) {
-        if (action?.name?.toLowerCase().includes('off')) {
-          data = {
-            config_id: action?.allow_config_store_value_id,
-            config_value: 0,
-          };
-        } else {
-          data = {
-            config_id: action?.allow_config_store_value_id,
-            config_value: 1,
-          };
-        }
-        data = JSON.stringify(data);
-      }
-      await sendRemoteCommand(sensor, action, data, userId);
+    if (isOn) {
+      setAction(off_action);
+      setStatus && setStatus(on_status);
+    } else {
+      setAction(on_action);
+      setStatus && setStatus(off_status);
+    }
+  }, [
+    isOn,
+    setStatus,
+    quick_action,
+    off_action,
+    on_status,
+    on_action,
+    off_status,
+  ]);
 
-      if (!will_auto_update_status) {
-        setTimeout(() => {
-          setIsOn(action.id === on_action.id);
-        }, interval);
+  const userId = useSCContextSelector((state) => state?.auth.account.user.id);
+  const onActionPress = useCallback(async () => {
+    if (processing || !action) {
+      /* istanbul ignore next */
+      return;
+    }
+    setProcessing(true);
+    let data = null;
+    if (action?.allow_config_store_value_id === config_id) {
+      if (action?.name?.toLowerCase().includes('off')) {
+        data = {
+          config_id: action?.allow_config_store_value_id,
+          config_value: 0,
+        };
+      } else {
+        data = {
+          config_id: action?.allow_config_store_value_id,
+          config_value: 1,
+        };
       }
-      setProcessing(false);
-    }, [
-      isFault,
-      processing,
-      action,
-      config_id,
-      sendRemoteCommand,
-      sensor,
-      userId,
-      will_auto_update_status,
-      interval,
-      on_action?.id,
-    ]);
+      data = JSON.stringify(data);
+    }
+    await sendRemoteCommand(sensor, action, data, userId);
 
-    if (!config_id) {
-      return <View />;
+    if (!will_auto_update_status) {
+      setTimeout(() => {
+        setIsOn(action.id === on_action.id);
+      }, interval);
     }
+    setProcessing(false);
+  }, [
+    processing,
+    action,
+    config_id,
+    sendRemoteCommand,
+    sensor,
+    userId,
+    will_auto_update_status,
+    interval,
+    on_action?.id,
+  ]);
 
-    return (
-      <TouchableOpacity
-        accessibilityLabel={`${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}`}
-        onPress={onActionPress}
-      >
-        <View style={wrapperStyle}>
-          {isFault ? (
-            <IconComponent
-              icon={'WarningOutlined'}
-              color={Colors.Red}
-              iconSize={iconSize}
-              size={iconSize}
-            />
-          ) : (
-            <IconComponent
-              icon={action?.icon_kit || action?.icon || 'PoweroffOutlined'}
-              isOn={isOn}
-              iconSize={iconSize}
-              size={iconSize}
-            />
-          )}
-        </View>
-      </TouchableOpacity>
-    );
+  if (!config_id) {
+    return <View />;
   }
-);
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={`${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}`}
+      onPress={onActionPress}
+    >
+      <View style={wrapperStyle}>
+        <IconComponent
+          icon={action?.icon_kit || action?.icon || 'PoweroffOutlined'}
+          isOn={isOn}
+          size={20}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+});
 
 export default ItemQuickAction;

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

@@ -35,7 +35,7 @@ const OnOffButtonTemplate = memo(
             <View style={styles.smallCircle}>
               <IconComponent
                 icon={icon}
-                iconSize={30}
+                size={30}
                 isOn={isOn}
                 colorInActive={Colors.Gray6}
                 color={Colors.Green7}

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -118,7 +118,6 @@ const OptionsDropdownActionTemplate = ({
         {!checkIcon && (
           <IconComponent
             icon={iconKit || icon}
-            iconSize={27}
             size={27}
             style={styles.marginRight}
           />

package/src/commons/ActionGroup/ThreeButtonTemplate/components/ThreeButtonDefault.js

@@ -22,7 +22,7 @@ const ThreeButtonDefault = memo(
       return icon2 === 'stop' ? (
         <View style={styles.squareStop} />
       ) : (
-        <IconComponent icon={icon2} iconSize={30} />
+        <IconComponent icon={icon2} size={30} />
       );
     };
 
@@ -87,7 +87,7 @@ const ThreeButtonDefault = memo(
                 {item?.id === 2 ? (
                   <Icon2CT />
                 ) : (
-                  <IconComponent icon={item?.icon} iconSize={30} />
+                  <IconComponent icon={item?.icon} size={30} />
                 )}
               </View>
               <Text style={styles.text}>{item?.text}</Text>

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

@@ -60,7 +60,7 @@ const ThreeButtonTemplate = memo(({ item, doAction, isWidgetOrder }) => {
         <View style={styles.lockDoor}>
           <IconComponent
             icon={icon}
-            iconSize={15}
+            size={15}
             color={color}
             style={styles.iconLock}
           />

package/src/commons/Device/ItemDevice.js

@@ -117,7 +117,11 @@ const ItemDevice = memo(
             <IconComponent icon={sensor?.icon_kit || sensor?.icon} />
           </TouchableOpacity>
           {!!canRenderQuickAction && (
-            <ItemQuickAction sensor={sensor} unit={unit} />
+            <ItemQuickAction
+              sensor={sensor}
+              unit={unit}
+              wrapperStyle={styles.quickAction}
+            />
           )}
         </View>
         <TouchableOpacity onPress={goToSensorDisplay}>
@@ -179,4 +183,13 @@ const styles = StyleSheet.create({
     height: 40,
     resizeMode: 'contain',
   },
+  quickAction: {
+    width: 32,
+    height: 32,
+    backgroundColor: Colors.Gray3,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 5,
+  },
 });

package/src/commons/Device/RainningSensor/CurrentRainSensor.js

@@ -41,11 +41,7 @@ const CurrentRainSensor = memo(
             end={{ x: 1, y: 1 }}
           />
           {icon_kit_data?.icon || icon ? (
-            <IconComponent
-              size={iconSize}
-              iconSize={iconSize}
-              icon={icon_kit_data?.icon || icon}
-            />
+            <IconComponent size={iconSize} icon={icon_kit_data?.icon || icon} />
           ) : (
             <FImage
               source={images.activeCurrentSensor}

package/src/commons/IconComponent/index.js

@@ -10,15 +10,14 @@ const IconComponent = memo(
     icon,
     isOn = false,
     size = 30,
-    iconSize = 30,
     style,
     antIconStyle,
     color,
     colorInActive,
   }) => {
     let extraStyle = {
-      width: size,
-      height: size,
+      width: size + 10,
+      height: size + 10,
     };
     const displayIcon = useMemo(() => {
       let newIcon = `${icon}`;
@@ -66,8 +65,8 @@ const IconComponent = memo(
         <IconFill
           name={displayIcon}
           color={colorIcon}
-          size={iconSize}
-          style={[extraStyle, antIconStyle || style]}
+          size={size}
+          style={[antIconStyle || style]}
         />
       );
     } else {
@@ -80,8 +79,8 @@ const IconComponent = memo(
         <IconOutline
           name={iconCT}
           color={colorIcon}
-          size={iconSize}
-          style={[extraStyle, antIconStyle || style]}
+          size={size}
+          style={[antIconStyle || style]}
         />
       );
     }

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

@@ -32,6 +32,7 @@ export const useFetchConfigHistory = (configs, setChartData) => {
       validConfigs.forEach((item) => {
         params.append('configs', item.id);
       });
+
       params.append(
         'date_from',
         startDate.subtract(7, 'hours').format('YYYY-MM-DDTHH:mm:ss')

package/src/configs/API.js

@@ -100,6 +100,8 @@ const API = {
       `/property_manager/automate/${id}/add_script_action/`,
     ADD_SCRIPT_NOTIFY: (id) =>
       `/property_manager/automate/${id}/add_script_notify/`,
+    ADD_SCRIPT_DELAY: (id) =>
+      `/property_manager/automate/${id}/add_script_delay/`,
 
     FETCH_AUTOMATE: (automateId) => `/property_manager/automate/${automateId}/`,
     CREATE_AUTOMATE: () => '/property_manager/automate/',

package/src/configs/AccessibilityLabel.js

@@ -244,7 +244,7 @@ export default {
   AUTOMATE_LIST_SCRIPT_ACTION: 'AUTOMATE_LIST_SCRIPT_ACTION',
   AUTOMATE_TITLE_NOTIFY: 'AUTOMATE_TITLE_NOTIFY',
   AUTOMATE_MESSAGE_NOTIFY: 'AUTOMATE_MESSAGE_NOTIFY',
-
+  AUTOMATE_INPUT_DELAY: 'AUTOMATE_INPUT_DELAY',
   // Parking input maunaly spot
   PARKING_SPOT_INFO_BUTTON: 'PARKING_SPOT_INFO_BUTTON',
   PARKING_SPOT_CONFIRM_SPOT: 'PARKING_SPOT_CONFIRM_SPOT',

package/src/configs/Constants.js

@@ -233,6 +233,7 @@ export const NOTIFICATION_TYPES = {
   LOW_BATTERY: 'LOW_BATTERY',
   BROADCAST_NOTIFICATION: 'BROADCAST_NOTIFICATION',
   SUBSCRIBE_SUCCESS: 'SUBSCRIBE_SUCCESS',
+  TRIGGER_SCRIPT_NOTIFY: 'TRIGGER_SCRIPT_NOTIFY',
 };
 
 export const ACTIVITY_LOG_TYPES = {

package/src/navigations/UnitStack.js

@@ -67,6 +67,7 @@ import ScenarioName from '../screens/Automate/Scenario/ScenarioName';
 import ValueChangeName from '../screens/Automate/ValueChange/ValueChangeName';
 import AddAutomationTypeSmart from '../screens/Automate/AddNewAutoSmart/AddAutomationTypeSmart';
 import SetupScriptNotify from '../screens/Automate/AddNewAction/SetupScriptNotify';
+import SetupScriptDelay from '../screens/Automate/AddNewAction/SetupScriptDelay';
 
 const Stack = createStackNavigator();
 
@@ -414,6 +415,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.SetupScriptDelay}
+        component={SetupScriptDelay}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name={Route.AddAutomationTypeSmart}
         component={AddAutomationTypeSmart}

package/src/screens/Automate/AddNewAction/SetupScriptDelay.js

@@ -0,0 +1,81 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import styles from './Styles/SetupScriptDelayStyles';
+import { HeaderCustom } from '../../../commons';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import _TextInput from '../../../commons/Form/TextInput';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { axiosPost } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import Routes from '../../../utils/Route';
+import moment from 'moment';
+
+const SetupScriptDelay = ({ route }) => {
+  const t = useTranslations();
+  const { goBack, navigate } = useNavigation();
+  const { automate = {} } = route?.params || {};
+  const { id: automateId } = automate;
+  const [delay, setDelay] = useState();
+
+  const onChangeTitle = (value) => {
+    setDelay(value);
+  };
+
+  const onNext = useCallback(async () => {
+    const { success } = await axiosPost(
+      API.AUTOMATE.ADD_SCRIPT_DELAY(automateId),
+      {
+        delay,
+      }
+    );
+    if (success) {
+      ToastBottomHelper.success(t('text_done'));
+      navigate({
+        name: Routes.ScriptDetail,
+        merge: true,
+        params: { saveAt: moment().valueOf() },
+      });
+    } else {
+      ToastBottomHelper.error(t('text_done'));
+    }
+  }, [automateId, navigate, delay, t]);
+
+  const canSave = useMemo(() => {
+    const value = parseInt(delay);
+    if (!Number.isInteger(value) || value <= 0 || value > 3600) {
+      return false;
+    }
+    return true;
+  }, [delay]);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose onClose={goBack} title={t('wait')} />
+      <View style={styles.container}>
+        <_TextInput
+          label={t('set_timeout_seconds')}
+          placeholder={t('maximum_3600_seconds')}
+          keyboardType="numeric"
+          textInputStyle={styles.inputNumber}
+          value={delay}
+          onChange={onChangeTitle}
+          maxLength={4}
+          accessibilityLabel={AccessibilityLabel.AUTOMATE_INPUT_DELAY}
+          autoFocus
+        />
+        <BottomButtonView
+          style={styles.bottomButtonView}
+          mainTitle={t('save')}
+          onPressMain={onNext}
+          typeMain={canSave ? 'primary' : 'disabled'}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default SetupScriptDelay;

package/src/screens/Automate/AddNewAction/Styles/SetupScriptDelayStyles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../../configs';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: getBottomSpace() + 10,
+  },
+  inputNumber: {
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderStyle: 'solid',
+    borderRadius: 10,
+  },
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+});

package/src/screens/Automate/AddNewAction/Styles/SetupScriptNotifyStyles.js

@@ -7,16 +7,6 @@ export default StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.White,
   },
-  titleCreate: {
-    fontStyle: 'normal',
-    fontWeight: '600',
-    color: Colors.Gray9,
-  },
-  titleChoose: {
-    fontStyle: 'normal',
-    fontWeight: '400',
-    color: Colors.Gray8,
-  },
   container: {
     flex: 1,
     paddingHorizontal: 16,
@@ -39,19 +29,8 @@ export default StyleSheet.create({
   bottomButtonView: {
     paddingTop: 24,
     paddingBottom: 32,
-
     backgroundColor: Colors.White,
     borderColor: Colors.ShadownTransparent,
     borderTopWidth: 1,
   },
-  bottomButton: {
-    borderWidth: 0,
-    borderColor: Colors.Gray4,
-    paddingTop: 24,
-    paddingBottom: 24,
-    borderTopWidth: 1,
-    borderStyle: 'solid',
-    position: 'absolute',
-    bottom: 0,
-  },
 });