@eohjsc/react-native-smart-city 0.7.21 → 0.7.23

package/src/screens/Automate/ScriptDetail/__test__/index.test.js

@@ -742,6 +742,7 @@ describe('Test ScriptDetail', () => {
       unitId: route.params.preAutomate.unit,
       automateId: route.params.preAutomate.id,
       numberActionCanAdd: 2,
+      scriptItems: [],
       closeScreen: undefined,
       routeName: null,
     });
@@ -901,6 +902,7 @@ describe('Test ScriptDetail', () => {
               unitId: route.params.preAutomate.unit,
               automateId: route.params.preAutomate.id,
               numberActionCanAdd: 2,
+              scriptItems: [],
               closeScreen: undefined,
               routeName: null,
             },
@@ -1211,6 +1213,82 @@ describe('Test ScriptDetail', () => {
     );
   });
 
+  it('Test render textCondition schedule time range', async () => {
+    route.params = {
+      ...route.params,
+      preAutomate: {
+        type: AUTOMATE_TYPE.SCHEDULE,
+        conditions: [
+          {
+            type: AUTOMATE_TYPE.SCHEDULE,
+            repeat: 'time_range',
+            time_start: '09:30:00',
+            time_end: '10:00:00',
+            weekday_repeat: null,
+          },
+        ],
+      },
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const itemAutomate = instance.findByType(ItemConditionScriptDetail);
+    expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
+      'From 09:30 to 10:00 Everyday'
+    );
+  });
+
+  it('Test render textCondition schedule time range with weekday', async () => {
+    route.params = {
+      ...route.params,
+      preAutomate: {
+        type: AUTOMATE_TYPE.SCHEDULE,
+        conditions: [
+          {
+            type: AUTOMATE_TYPE.SCHEDULE,
+            repeat: 'time_range',
+            time_start: '09:30:00',
+            time_end: '10:00:00',
+            weekday_repeat: ['1', '3', '0'],
+          },
+        ],
+      },
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const itemAutomate = instance.findByType(ItemConditionScriptDetail);
+    expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
+      'From 09:30 to 10:00 on Mon, Wed, Sun'
+    );
+  });
+
+  it('Test render textCondition schedule interval repeat', async () => {
+    route.params = {
+      ...route.params,
+      preAutomate: {
+        type: AUTOMATE_TYPE.SCHEDULE,
+        conditions: [
+          {
+            type: AUTOMATE_TYPE.SCHEDULE,
+            repeat: 'interval',
+            interval_repeat: 5,
+          },
+        ],
+      },
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const itemAutomate = instance.findByType(ItemConditionScriptDetail);
+    expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
+      'Repeat every 5 minutes'
+    );
+  });
+
   it('test navigate to UnitDetail on event beforeRemove', async () => {
     Platform.OS = 'ios';
     route.params.closeScreen = Routes.UnitDetail;

package/src/screens/Automate/ScriptDetail/index.js

@@ -110,11 +110,7 @@ const ScriptDetail = ({ route }) => {
     chip_id_local_control,
   } = script || {};
 
-  const [local_control, setLocalControl] = useState({
-    is_local_control,
-    chip_local_control,
-    chip_id_local_control,
-  });
+  const [local_control, setLocalControl] = useState({});
   const [enableScript, setEnableScript] = useState(enable);
   const [listMenuItemCondition, setListMenuItemCondition] = useState([]);
   const [isShowAddCondition, setIsShowAddCondition] = useState(false);
@@ -384,6 +380,14 @@ const ScriptDetail = ({ route }) => {
     newActionsList && setData(newActionsList);
   }, [newActionsList]);
 
+  useEffect(() => {
+    setLocalControl({
+      is_local_control,
+      chip_local_control,
+      chip_id_local_control,
+    });
+  }, [is_local_control, chip_local_control, chip_id_local_control]);
+
   const rightComponent = useMemo(
     () => (
       <View style={styles.rightComponent}>
@@ -766,7 +770,7 @@ const ScriptDetail = ({ route }) => {
       />
       <AddActionScript
         automate={automate}
-        numberActionAdded={data.length}
+        scriptItems={data}
         isVisible={isShowAddAction}
         setIsVisible={setIsShowAddAction}
         type={type}
@@ -778,7 +782,7 @@ const ScriptDetail = ({ route }) => {
         isVisible={isShowAddCondition}
         setIsVisible={setIsShowAddCondition}
         type={type}
-        navigate={navigate}
+        navigate={handleNavigate}
       />
       <RenameScript
         automate={automate}
@@ -790,6 +794,7 @@ const ScriptDetail = ({ route }) => {
         automate={automate}
         setIsVisible={setIsShowDelete}
         isVisible={isShowDelete}
+        goBack={handleGoBack}
       />
       <DeleteCondition
         automate={automate}
@@ -895,12 +900,13 @@ const Item = ({ item, index, enableScript, t, local_control }) => {
   const paddedIndex = (index + 1).toString().padStart(2, '0');
   const {
     action_script,
+    toggle_script,
     notify_script,
     delay_script,
     email_script,
     sms_script,
   } = item;
-  if (action_script) {
+  if (action_script || toggle_script) {
     const {
       sensor_icon_kit,
       unit_name,
@@ -908,7 +914,7 @@ const Item = ({ item, index, enableScript, t, local_control }) => {
       sensor_name,
       action_name,
       data,
-    } = action_script;
+    } = action_script || toggle_script;
     return (
       <View style={styles.wrapItem}>
         <View style={styles.leftItem}>
@@ -942,7 +948,7 @@ const Item = ({ item, index, enableScript, t, local_control }) => {
               {sensor_name}
             </Text>
             <Text numberOfLines={1} type="H4" color={color}>
-              {action_name} {data}
+              {toggle_script ? t('toggle') : `${action_name} ${data || ''}`}
             </Text>
           </View>
         </View>

package/src/screens/Automate/ScriptDetail/utils.js

@@ -1,25 +1,5 @@
 import { AUTOMATE_TYPE } from '../../../configs/Constants';
-import { REPEAT_OPTIONS } from '../SetSchedule/components/RepeatOptionsPopup';
-
-export const generateAutomationDataConditionText = (
-  type,
-  config_name,
-  condition,
-  valueEvaluation,
-  t
-) => {
-  condition.config_name = config_name;
-  let automate = {};
-  if ([AUTOMATE_TYPE.VALUE_CHANGE].includes(type)) {
-    automate = { value_change: condition };
-  } else if (type === AUTOMATE_TYPE.SCHEDULE) {
-    automate = { schedule: condition };
-  } else if ([AUTOMATE_TYPE.EVENT].includes(type)) {
-    automate = { event: condition };
-  }
-  automate.type = type;
-  return generateAutomationConditionText(automate, valueEvaluation, t);
-};
+import { REPEAT_OPTIONS } from '../Constants';
 
 export const getAutomationData = (automate) => {
   const { type, event_sensor, event_action, schedule, event, value_change } =
@@ -93,11 +73,16 @@ export const generateAutomationConditionText = (
     }
     return `${config_name} ${t(text)} ${value}`;
   } else if (type === AUTOMATE_TYPE.SCHEDULE) {
-    const { repeat, time_repeat, date_repeat, weekday_repeat } = conditionItem;
-    const time =
-      time_repeat?.length >= 8
-        ? time_repeat.substring(0, time_repeat?.length - 3)
-        : time_repeat;
+    const {
+      repeat,
+      time_repeat,
+      time_start,
+      time_end,
+      date_repeat,
+      weekday_repeat,
+      interval_repeat,
+    } = conditionItem;
+
     const date = date_repeat?.split('-').reverse().join('/');
     const weekday = {
       1: t('mon'),
@@ -109,14 +94,14 @@ export const generateAutomationConditionText = (
       0: t('sun'),
     };
 
-    if (repeat === REPEAT_OPTIONS.ONCE) {
-      return `${time} ${date}`;
-    } else if (repeat === REPEAT_OPTIONS.EVERYDAY) {
-      return `${t('every_day_at', { time })}`;
-    } else if (repeat === REPEAT_OPTIONS.EVERYWEEK) {
+    const shortTime = (time) => {
+      return time?.length >= 8 ? time.substring(0, time?.length - 3) : time;
+    };
+
+    const getTextWeekDay = (weekdayRepeat) => {
       //sort 0 is last number, exp: [1,3,5,0]
-      const newWeekdayRepeat = weekday_repeat.map((item) => parseInt(item, 10));
-      const sortWeekday = newWeekdayRepeat.sort((a, b) => {
+      const newWeekdayRepeat = weekdayRepeat?.map((item) => parseInt(item, 10));
+      const sortWeekday = newWeekdayRepeat?.sort((a, b) => {
         if (a !== 0 && b === 0) {
           return -1;
         }
@@ -125,8 +110,27 @@ export const generateAutomationConditionText = (
         }
         return a - b;
       });
-      const textWeekday = sortWeekday.map((item) => weekday[item]).join(', ');
-      return `${textWeekday} ${t('at')} ${time}`;
+      return sortWeekday?.map((item) => weekday[item]).join(', ');
+    };
+
+    if (repeat === REPEAT_OPTIONS.ONCE) {
+      return `${shortTime(time_repeat)} ${date}`;
+    } else if (repeat === REPEAT_OPTIONS.EVERYDAY) {
+      return `${t('every_day_at', { time: shortTime(time_repeat) })}`;
+    } else if (repeat === REPEAT_OPTIONS.EVERYWEEK) {
+      const textWeekday = getTextWeekDay(weekday_repeat);
+      return `${textWeekday} ${t('at')} ${shortTime(time_repeat)}`;
+    } else if (repeat === REPEAT_OPTIONS.TIMERANGE) {
+      const textWeekday = getTextWeekDay(weekday_repeat);
+      return `${t('from_to', {
+        from: shortTime(time_start),
+        to: shortTime(time_end),
+        weekdays: textWeekday
+          ? `${t('on_weekday')} ${textWeekday}`
+          : t('every_day'),
+      })}`;
+    } else if (repeat === REPEAT_OPTIONS.INTERVAL) {
+      return `${t('repeat_every', { interval: interval_repeat })}`;
     }
   }
   return null;

package/src/screens/Automate/SetSchedule/AddEditConditionSchedule.js

@@ -1,173 +1,40 @@
 import { useNavigation } from '@react-navigation/native';
-import moment from 'moment';
-import React, { memo, useCallback, useState } from 'react';
-import { ScrollView } from 'react-native';
-import Calendar from '../../../commons/Calendar';
-import WheelDateTimePicker from '../../../commons/WheelDateTimePicker';
-import { useBoolean } from '../../../hooks/Common';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
+import React, { useCallback } from 'react';
+import EditSchedule from './EditSchedule';
 import Routes from '../../../utils/Route';
-import NewActionWrapper from '../AddNewAction/NewActionWrapper';
-import RepeatOptionsPopup, {
-  REPEAT_OPTIONS,
-} from './components/RepeatOptionsPopup';
-import RowItem from './components/RowItem';
-import SelectWeekday from './components/SelectWeekday';
-import styles from './styles/indexStyles';
 import { axiosPost, axiosPut } from '../../../utils/Apis/axios';
 import { API } from '../../../configs';
-import { AUTOMATE_TYPE } from '../../../configs/Constants';
-
-const getDateString = (date, t) => {
-  //Move outside component to prevent re-creation on every render.
-  const today = moment();
-  if (date.isSame(today, 'day')) {
-    return date.format(`[${t('today')}], D MMMM YYYY `);
-  }
-  return date.format('ddd, D MMMM YYYY');
-};
 
 const AddEditConditionSchedule = ({ route }) => {
-  const t = useTranslations();
-  const { automate, condition = {}, isUpdateCondition } = route.params;
+  const { automate, condition, isUpdateCondition } = route.params;
   const { navigate } = useNavigation();
-  const [repeat, setRepeat] = useState(
-    condition.repeat ? condition.repeat : REPEAT_OPTIONS.ONCE
-  );
-  const [time, setTime] = useState(
-    condition.time_repeat
-      ? moment(condition.time_repeat, 'HH:mm:ss')
-      : moment().second(0)
-  );
-  const [date, setDate] = useState(
-    condition.date_repeat
-      ? moment(condition.date_repeat, 'YYYY-MM-DD')
-      : moment()
-  );
-  const [weekday, setWeekday] = useState(
-    condition.weekday_repeat ? condition.weekday_repeat : []
-  );
-
-  const [showRepeatOptions, setShowRepeatOptions, setHideRepeatOptions] =
-    useBoolean();
-  const [showTimePicker, setShowTimePicker, setHideTimePicker] = useBoolean();
-  const [showCalendar, setShowCalendar, setHideCalendar] = useBoolean();
-
-  const handleOnSave = useCallback(async () => {
-    const data = {
-      type: AUTOMATE_TYPE.SCHEDULE,
-      repeat,
-      time_repeat: time.format('HH:mm:ss'),
-      date_repeat:
-        repeat === REPEAT_OPTIONS.ONCE ? date.format('YYYY-MM-DD') : null,
-      weekday_repeat: repeat === REPEAT_OPTIONS.EVERYWEEK ? weekday : null,
-    };
 
-    let response;
-    if (isUpdateCondition) {
-      response = await axiosPut(
-        API.AUTOMATE.UPDATE_CONDITION(automate.id, condition.id),
-        data
-      );
-    } else {
-      response = await axiosPost(API.AUTOMATE.ADD_CONDITION(automate.id), data);
-    }
-    const { success } = response;
-    if (success) {
-      navigate({
-        name: Routes.ScriptDetail,
-        params: { preAutomate: automate },
-      });
-    }
-  }, [
-    repeat,
-    time,
-    date,
-    weekday,
-    isUpdateCondition,
-    automate,
-    condition.id,
-    navigate,
-  ]);
-
-  const onSetRepeatOption = useCallback(
-    (value) => {
-      setRepeat(value);
-      setHideRepeatOptions();
-    },
-    [setRepeat, setHideRepeatOptions]
-  );
-
-  const onTimePicked = useCallback(
-    (timeData) => {
-      setTime(moment(timeData));
+  const handleOnSave = useCallback(
+    async (data) => {
+      let response;
+      if (isUpdateCondition) {
+        response = await axiosPut(
+          API.AUTOMATE.UPDATE_CONDITION(automate.id, condition?.id),
+          data
+        );
+      } else {
+        response = await axiosPost(
+          API.AUTOMATE.ADD_CONDITION(automate.id),
+          data
+        );
+      }
+      const { success } = response;
+      if (success) {
+        navigate({
+          name: Routes.ScriptDetail,
+          params: { preAutomate: automate },
+        });
+      }
     },
-    [setTime]
+    [isUpdateCondition, automate, condition?.id, navigate]
   );
 
-  const onDatePicked = useCallback(
-    (datePicked) => {
-      setDate(datePicked);
-    },
-    [setDate]
-  );
-
-  return (
-    <NewActionWrapper
-      name={t('set_schedule')}
-      onNext={handleOnSave}
-      canNext={true}
-      nextTitle={t('save')}
-    >
-      <ScrollView
-        contentContainerStyle={styles.scollView}
-        scrollIndicatorInsets={{ right: 1 }}
-      >
-        <RowItem
-          title={t('set_time')}
-          value={time.format('HH:mm')}
-          icon="clock-circle"
-          onPress={setShowTimePicker}
-        />
-        {repeat === REPEAT_OPTIONS.ONCE && (
-          <RowItem
-            title={t('select_date')}
-            value={getDateString(date, t)}
-            icon="calendar"
-            onPress={setShowCalendar}
-          />
-        )}
-        {repeat === REPEAT_OPTIONS.EVERYWEEK && (
-          <SelectWeekday weekday={weekday} setWeekday={setWeekday} />
-        )}
-        <RowItem
-          title={t('repeat')}
-          value={t(`${repeat}`)}
-          arrow
-          onPress={setShowRepeatOptions}
-        />
-      </ScrollView>
-      <RepeatOptionsPopup
-        isVisible={showRepeatOptions}
-        onHide={setHideRepeatOptions}
-        onSetRepeat={onSetRepeatOption}
-      />
-      <WheelDateTimePicker
-        mode="time"
-        isVisible={showTimePicker}
-        defaultValue={time.valueOf()}
-        onCancel={setHideTimePicker}
-        onPicked={onTimePicked}
-      />
-      <Calendar
-        isVisible={showCalendar}
-        defaultDate={date}
-        minDate={moment()}
-        onCancel={setHideCalendar}
-        onConfirm={onDatePicked}
-      />
-    </NewActionWrapper>
-  );
+  return <EditSchedule condition={condition} onSave={handleOnSave} />;
 };
 
-export default memo(AddEditConditionSchedule);
+export default AddEditConditionSchedule;