@eohjsc/react-native-smart-city 0.3.89 → 0.3.91

package/src/screens/AddNewAction/NewActionWrapper.js

@@ -0,0 +1,55 @@
+import React, { useCallback, useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import styles from './Styles/SelectActionStyles';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import { Icon } from '@ant-design/react-native';
+import { Colors } from '../../configs';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import BottomButtonView from '../../commons/BottomButtonView';
+import { AccessibilityLabel } from '../../configs/Constants';
+
+const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const { params = {} } = useRoute();
+  const { closeScreen } = params;
+
+  const handleClose = useCallback(() => {
+    navigate(closeScreen);
+  }, [closeScreen, navigate]);
+
+  const rightComponent = useMemo(
+    () => (
+      <TouchableOpacity
+        style={styles.closeButton}
+        onPress={handleClose}
+        accessibilityLabel={AccessibilityLabel.ICON_CLOSE}
+      >
+        <Icon name={'close'} size={24} color={Colors.Black} />
+      </TouchableOpacity>
+    ),
+    [handleClose]
+  );
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={t('set_up {name}', { name })}
+        headerAniStyle={styles.headerAniStyle}
+        rightComponent={rightComponent}
+      >
+        {children}
+      </WrapHeaderScrollable>
+      <BottomButtonView
+        style={styles.bottomButtonView}
+        mainTitle={nextTitle}
+        onPressMain={onNext}
+        typeMain={canNext ? 'primary' : 'disabled'}
+      />
+    </View>
+  );
+};
+
+export default NewActionWrapper;

package/src/screens/AddNewAction/SelectControlDevices.js

@@ -0,0 +1,107 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { fetchWithCache } from '../../utils/Apis/axios';
+import { API } from '../../configs';
+import Routes from '../../utils/Route';
+import SelectDevices from './Components/SelectDevices';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+const SelectControlDevices = ({ route }) => {
+  const t = useTranslations();
+  const {
+    unit,
+    automateId,
+    automate = {},
+    type,
+    scriptName,
+    isAutomateTab,
+    isCreateNewAction,
+    isMultiUnits,
+    oldType,
+    closeScreen,
+  } = route?.params || {};
+
+  const [stations, setStations] = useState([]);
+  const [listStation, setListStation] = useState([]);
+  const [listMenuItem, setListMenuItem] = useState([]);
+
+  const { navigate } = useNavigation();
+  const [loading, setLoading] = useState(true);
+
+  const fetchDetails = useCallback(async () => {
+    await fetchWithCache(API.UNIT.DEVICE_CONTROL(unit.id), {}, (response) => {
+      const { success, data } = response;
+      if (success) {
+        const newData = data.filter((item) => item.sensors.length > 0);
+        const listMenu = newData.map((item, index) => ({
+          text: item.name,
+          station: item,
+          index: index,
+        }));
+        setStations(newData);
+        setListMenuItem(listMenu);
+        setListStation(listMenu);
+      }
+    });
+    setLoading(false);
+  }, [unit]);
+
+  useEffect(() => {
+    fetchDetails();
+  }, [fetchDetails]);
+
+  const onPressContinue = useCallback(
+    (selectedDevice, indexStation) => {
+      navigate(Routes.ChooseAction, {
+        unit,
+        device: selectedDevice,
+        automateId: automateId,
+        automate: {
+          ...automate,
+          sensor_id: selectedDevice?.id
+            ? selectedDevice.id
+            : automate.sensor_id,
+        },
+        stationName: stations[indexStation]?.name,
+        type,
+        scriptName,
+        isAutomateTab,
+        isCreateNewAction,
+        isMultiUnits,
+        oldType,
+        closeScreen,
+      });
+    },
+    [
+      navigate,
+      unit,
+      automateId,
+      automate,
+      stations,
+      type,
+      scriptName,
+      isAutomateTab,
+      isCreateNewAction,
+      isMultiUnits,
+      oldType,
+      closeScreen,
+    ]
+  );
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <SelectDevices
+      onPressContinue={onPressContinue}
+      automateId={automateId}
+      listStation={listStation}
+      listMenuItem={listMenuItem}
+      stations={stations}
+      title={t('select_device')}
+    />
+  );
+};
+
+export default SelectControlDevices;

package/src/screens/AddNewAction/SelectMonitorDevices.js

@@ -0,0 +1,142 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { fetchWithCache } from '../../utils/Apis/axios';
+import { API } from '../../configs';
+import Routes from '../../utils/Route';
+import SelectDevices from './Components/SelectDevices';
+import { AUTOMATE_TYPE } from '../../configs/Constants';
+
+const SelectMonitorDevices = ({ route }) => {
+  const t = useTranslations();
+  const {
+    unit,
+    automateId,
+    automate = {},
+    type,
+    scriptName,
+    isAutomateTab,
+    isCreateNewAction,
+    isMultiUnits,
+    oldType,
+    closeScreen,
+  } = route?.params || {};
+
+  const [stations, setStations] = useState([]);
+  const [listStation, setListStation] = useState([]);
+  const [listMenuItem, setListMenuItem] = useState([]);
+  const [defaultSelectedDevice, setDefaultSelectedDevice] = useState({});
+
+  const { navigate } = useNavigation();
+  const [loading, setLoading] = useState(true);
+
+  const fetchDetails = useCallback(async () => {
+    const configs = { params: {} };
+    if (type === AUTOMATE_TYPE.EVENT) {
+      configs.params.type = 'event';
+    }
+    await fetchWithCache(
+      API.UNIT.DEVICE_SENSOR(unit.id),
+      configs,
+      (response) => {
+        const { success, data } = response;
+        if (success) {
+          const newData = data.filter((item) => item.sensors.length > 0);
+          const listMenu = newData.map((item, index) => ({
+            text: item.name,
+            station: item,
+            index: index,
+          }));
+
+          setStations(newData);
+          setListMenuItem(listMenu);
+          setListStation(listMenu);
+        }
+      }
+    );
+    setLoading(false);
+  }, [type, unit.id]);
+
+  useEffect(() => {
+    if (!automate?.sensor_id) {
+      return;
+    }
+    let selectSensor = {};
+    let found = false;
+    for (let i = 0; i < stations.length; i++) {
+      for (let j = 0; j < stations[i].sensors.length; j++) {
+        if (stations[i].sensors[j].id === automate.sensor_id) {
+          selectSensor = stations[i].sensors[j];
+          found = true;
+          break;
+        }
+      }
+      if (found) {
+        break;
+      }
+    }
+    setDefaultSelectedDevice(selectSensor);
+  }, [automate?.sensor_id, stations]);
+
+  useEffect(() => {
+    fetchDetails();
+  }, [fetchDetails]);
+
+  const onPressContinue = useCallback(
+    (selectedDevice, indexStation) => {
+      navigate(Routes.ChooseConfig, {
+        unit,
+        device: selectedDevice,
+        automateId: automateId,
+        automate: {
+          ...automate,
+          sensor_id: selectedDevice?.id
+            ? selectedDevice.id
+            : automate.sensor_id,
+        },
+        stationName: stations[indexStation]?.name,
+        type,
+        scriptName,
+        isAutomateTab,
+        isCreateNewAction,
+        isMultiUnits,
+        oldType,
+        closeScreen,
+      });
+    },
+    [
+      navigate,
+      unit,
+      automateId,
+      automate,
+      stations,
+      type,
+      scriptName,
+      isAutomateTab,
+      isCreateNewAction,
+      isMultiUnits,
+      oldType,
+      closeScreen,
+    ]
+  );
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <SelectDevices
+      onPressContinue={onPressContinue}
+      automateId={automateId}
+      listStation={listStation}
+      listMenuItem={listMenuItem}
+      stations={stations}
+      title={t('select_sensor')}
+      defaultSelectedDevice={defaultSelectedDevice}
+      closeScreen={closeScreen}
+    />
+  );
+};
+
+export default SelectMonitorDevices;

package/src/screens/AddNewAction/SetupConfigCondition.js

@@ -0,0 +1,245 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
+import { useNavigation, useRoute } from '@react-navigation/native';
+
+import styles from './Styles/SetupSensorStyles';
+import { Colors, Images } from '../../configs';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { ModalCustom } from '../../commons/Modal';
+import Text from '../../commons/Text';
+import { HorizontalPicker } from '../../commons';
+import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
+import Routes from '../../utils/Route';
+import { getAutomationData } from '../ScriptDetail/utils';
+import NewActionWrapper from './NewActionWrapper';
+
+const SetupConfigCondition = () => {
+  const t = useTranslations();
+
+  const { navigate } = useNavigation();
+  const { params = {} } = useRoute();
+  const { item, sensorData, type, automate } = params;
+
+  const hasLimit = useMemo(() => !!item?.range_max, [item]);
+  const [isShowModal, setIsShowModal] = useState(false);
+  const [itemActiveModal, setItemActiveModal] = useState(null);
+  const [value, setValue] = useState(null);
+  const [minimum] = useState(hasLimit ? parseInt(item?.range_min, 10) : 0);
+  const [maximum, setMaximum] = useState(
+    value === 0
+      ? 100
+      : hasLimit
+      ? (parseInt(item?.range_max, 10) - minimum) * 10 + minimum
+      : (parseInt(item?.value, 10) + 20 - minimum) * 10 + minimum
+  );
+
+  const hasNoValueEvaluation = !item?.evaluate_configuration;
+
+  const conditionOptions = useMemo(() => {
+    if (!item?.evaluate_configuration) {
+      return [
+        {
+          title: `${t('is_below')} (<)`,
+          condition: '<',
+        },
+        {
+          title: `${t('is')} (=)`,
+          condition: '=',
+        },
+        {
+          title: `${t('is_above')} (>)`,
+          condition: '>',
+        },
+      ];
+    }
+    if (item.evaluate_configuration.ranges) {
+      return item.evaluate_configuration.ranges.map((range, index) => ({
+        title: range.evaluate?.text,
+        condition: 'value_evaluation',
+        config: item.id,
+        value: index,
+      }));
+    }
+    return [];
+  }, [item.evaluate_configuration, item.id, t]);
+
+  useEffect(() => {
+    let defaultCondition = null;
+    if (sensorData) {
+      const index = sensorData.findIndex((i) => i?.id === item?.id);
+      if (index !== -1 && sensorData[index].condition) {
+        defaultCondition = sensorData[index];
+      }
+    }
+
+    if (automate && !defaultCondition) {
+      const automationData = getAutomationData(type, automate);
+
+      const index = conditionOptions.findIndex(
+        (i) =>
+          i.condition === automationData?.condition &&
+          i.value === automationData?.value
+      );
+      if (index !== -1) {
+        defaultCondition = conditionOptions[index];
+      }
+    }
+
+    if (!defaultCondition) {
+      defaultCondition = conditionOptions[0];
+    }
+
+    setItemActiveModal(defaultCondition);
+  }, [conditionOptions, item, sensorData, automate, type]);
+
+  const onOpenModal = useCallback(() => {
+    setIsShowModal(true);
+  }, []);
+
+  const onCloseModal = useCallback(() => {
+    setIsShowModal(false);
+  }, []);
+
+  const onChooseCondition = (selectedItem) => () => {
+    setItemActiveModal(selectedItem);
+    onCloseModal();
+  };
+
+  const onChangeValue = useCallback(
+    (newValue) => {
+      setValue(
+        (parseFloat(newValue / 128) + parseFloat(minimum)).toFixed(
+          item?.decimal_behind || 1
+        )
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value]
+  );
+
+  const onSave = useCallback(() => {
+    const dataTemp = [...sensorData];
+    const index = dataTemp.findIndex((i) => i?.id === item?.id);
+    dataTemp.splice(index, 1, { ...item, ...itemActiveModal });
+    navigate({
+      name: Routes.ChooseConfig,
+      merge: true,
+      params: {
+        newSensorData: dataTemp,
+      },
+    });
+  }, [sensorData, item, itemActiveModal, navigate]);
+
+  const renderScroll = useMemo(() => {
+    return (
+      <HorizontalPicker
+        minimum={minimum}
+        maximum={maximum}
+        segmentSpacing={8}
+        segmentWidth={8}
+        step={10}
+        normalHeight={4}
+        normalWidth={4}
+        stepHeight={12}
+        stepWidth={12}
+        stepColor={Colors.Gray6}
+        normalColor={Colors.Gray6}
+        onChangeValue={onChangeValue}
+        value={value - minimum}
+      />
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [minimum, maximum, value]);
+
+  useEffect(() => {
+    !hasNoValueEvaluation && setValue(1);
+  }, [hasNoValueEvaluation]);
+
+  useEffect(() => {
+    if (!hasLimit && maximum - 150 <= value * 10) {
+      setMaximum(maximum + 200);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  useEffect(() => {
+    if (item?.title) {
+      const itemTemp = conditionOptions.find((i) => i.title === item.title);
+      itemTemp && setItemActiveModal(itemTemp);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [item]);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useStatusBarPreview(
+      isShowModal ? Colors.BlackTransparent4 : Colors.TextTransparent
+    );
+  }, [isShowModal]);
+
+  return (
+    <>
+      <NewActionWrapper
+        name={t('set_up {name}', { name: item?.name })}
+        nextTitle={t('save')}
+        onNext={onSave}
+        canNext={true}
+      >
+        <TouchableOpacity
+          onPress={onOpenModal}
+          style={[styles.itemCondition, styles.shadowView]}
+        >
+          <Text type="Body" color={Colors.Gray7}>
+            {t('condition')}
+          </Text>
+          <Text type="H4" semibold style={styles.description}>
+            {itemActiveModal?.title}
+          </Text>
+          <Image source={Images.arrowBack} style={styles.arrowRight} />
+        </TouchableOpacity>
+        {hasNoValueEvaluation && (
+          <>
+            <Text type="Body" color={Colors.Gray7} style={styles.setANumber}>
+              {t('set_a_number')}
+            </Text>
+            <View style={[styles.flexRow, styles.center]}>
+              <View>
+                <Text style={styles.value}>{value}</Text>
+                <View style={styles.underline} />
+              </View>
+              <Text type="H2" style={styles.unit}>
+                {item?.unit}
+              </Text>
+            </View>
+            {renderScroll}
+          </>
+        )}
+      </NewActionWrapper>
+      <ModalCustom
+        onBackdropPress={onCloseModal}
+        isVisible={isShowModal}
+        style={styles.modal}
+      >
+        <View style={styles.modalContent}>
+          <Text type="H3">{t('select_condition')}</Text>
+          {conditionOptions.map((option, index) => (
+            <React.Fragment key={index}>
+              <TouchableOpacity
+                onPress={onChooseCondition(option)}
+                key={index}
+                style={styles.itemModal}
+              >
+                <Text type="H4">{option.title}</Text>
+              </TouchableOpacity>
+              {index !== conditionOptions.length - 1 && (
+                <View style={styles.separated} />
+              )}
+            </React.Fragment>
+          ))}
+        </View>
+      </ModalCustom>
+    </>
+  );
+};
+
+export default SetupConfigCondition;

package/src/screens/AddNewAction/Styles/SetupSensorStyles.js

@@ -35,7 +35,7 @@ export default StyleSheet.create({
     marginHorizontal: 16,
     borderRadius: 8,
   },
-  desciption: {
+  description: {
     marginTop: 4,
   },
   setANumber: {