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

package/src/screens/Device/detail.js

@@ -54,7 +54,7 @@ import Routes from '../../utils/Route';
 import { getData as getLocalData } from '../../utils/Storage';
 import { API, Colors, SCConfig } from '../../configs';
 import { DEVICE_TYPE, AccessibilityLabel } from '../../configs/Constants';
-import { axiosGet } from '../../utils/Apis/axios';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
 import { notImplemented } from '../../utils/Utils';
 import { useReceiveNotifications } from '../../hooks';
 import useChipJsonConfiguration, {
@@ -482,6 +482,31 @@ const DeviceDetail = ({ route }) => {
     fetchDataDeviceDetail();
   }, [device, isNetworkConnected, fetchDataDeviceDetail]);
 
+  const fetchDeviceStatus = useCallback(async () => {
+    if (
+      !isNetworkConnected ||
+      !device.is_managed_by_backend ||
+      configIdsTemp.current.length
+    ) {
+      return;
+    }
+
+    const { success, data } = await axiosPost(
+      API.UNIT.END_DEVICES_STATUS(unit.id),
+      {
+        end_device_ids: [device.id],
+      }
+    );
+
+    success && setAction(Action.SET_DEVICES_STATUS, data);
+  }, [
+    isNetworkConnected,
+    unit.id,
+    device.id,
+    device.is_managed_by_backend,
+    setAction,
+  ]);
+
   const onRefresh = useCallback(async () => {
     await fetchSensorDetail();
     await fetchDataDeviceDetail();
@@ -495,9 +520,11 @@ const DeviceDetail = ({ route }) => {
       })();
     }
     await checkScanDevicesBLE();
+    await fetchDeviceStatus();
   }, [
     fetchSensorDetail,
     fetchDataDeviceDetail,
+    fetchDeviceStatus,
     unit?.remote_control_options,
     isNetworkConnected,
     checkScanDevicesBLE,
@@ -516,11 +543,20 @@ const DeviceDetail = ({ route }) => {
           return;
         }
 
-        const { configs, options, config, from_config, to_config } =
-          configuration;
+        const {
+          configs,
+          options,
+          config,
+          from_config,
+          to_config,
+          history_configs,
+          realtime_configs,
+        } = configuration;
 
         configs?.forEach((object) => configIdsSet.add(object.id));
         options?.forEach((option) => configIdsSet.add(option.config));
+        history_configs?.forEach((object) => configIdsSet.add(object.id));
+        realtime_configs?.forEach((object) => configIdsSet.add(object.id));
 
         if (config) {
           const configId = config.id || config;
@@ -622,6 +658,13 @@ const DeviceDetail = ({ route }) => {
     }, [display.items, isNetworkConnected, device, mqttConfigs])
   );
 
+  useFocusEffect(
+    useCallback(() => {
+      fetchDeviceStatus();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+  );
+
   useWatchConfigs(chipFiltered.length ? [] : configIdsTemp.current);
 
   const isShowEmergencyResolve =

package/src/screens/PlayBackCamera/__test__/index.test.js

@@ -20,19 +20,22 @@ const wrapComponent = () => (
 
 describe('Test PlayBackCamera', () => {
   let tree;
-  jest.useFakeTimers();
-  global.mockedUseRoute.mockReturnValue({
-    params: {
-      item: {
-        configuration: {
-          time_zone: 0,
-          playback: '',
-          name: 'name',
-          uri: '',
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    global.mockedUseRoute.mockReturnValue({
+      params: {
+        item: {
+          configuration: {
+            time_zone: 0,
+            playback: 'rtsp://example.com/playback',
+            name: 'name',
+            uri: 'rtsp://example.com/stream',
+          },
         },
+        thumbnail: {},
       },
-      thumbnail: {},
-    },
+    });
   });
 
   it('Test render', async () => {
@@ -129,7 +132,9 @@ describe('Test PlayBackCamera', () => {
         },
       });
     });
-    jest.runAllTimers();
+    await act(async () => {
+      jest.runAllTimers();
+    });
     //NOTE: isFirstTime = false
     await act(async () => {
       timerScroll[0].props.onScroll({
@@ -147,7 +152,37 @@ describe('Test PlayBackCamera', () => {
     });
     const media = instance.findByType(MediaPlayerFull);
     expect(media.props.uri).toEqual(
-      `=${moment().format('YYYYMMDDT003730\\Z')}`
+      `rtsp://example.com/playback=${moment().format('YYYYMMDDT003730\\Z')}`
+    );
+  });
+
+  it('Test render when playback is null', async () => {
+    global.mockedUseRoute.mockReturnValue({
+      params: {
+        item: {
+          configuration: {
+            time_zone: 0,
+            playback: null,
+            name: 'name',
+            uri: 'rtsp://example.com/stream',
+          },
+        },
+        thumbnail: {},
+      },
+    });
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const buttonAddDate = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.ON_PRESS_ADD_DATE &&
+        el.type === TouchableOpacity
     );
+    await act(async () => {
+      await buttonAddDate[0].props.onPress();
+    });
+    const media = instance.findByType(MediaPlayerFull);
+    expect(media.props.uri).toEqual('rtsp://example.com/stream');
   });
 });

package/src/screens/PlayBackCamera/index.js

@@ -121,7 +121,7 @@ const PlayBackCamera = () => {
         'YYYY-MM-DD HH:mm:SS'
       ).valueOf();
 
-      if (selectedDayTime > currentTime) {
+      if (selectedDayTime > currentTime || !playback) {
         setUriCamera(uri);
       } else {
         if (playback.includes('chID')) {

package/src/screens/Sharing/Components/ConfigItem.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Text } from '../../../commons';
+import { TitleCheckBox } from '.';
+import { View } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const ConfigItem = ({ isChecked, item, onSelect }) => {
+  const t = useTranslations();
+  return (
+    <View style={styles.wrap}>
+      <TitleCheckBox
+        isChecked={isChecked}
+        item={item}
+        onSelect={onSelect}
+        checkBoxStyle={styles.wrapCheckBoxStyle}
+      />
+      <Text>{item?.isConfig ? t('view_only') : t('can_control')}</Text>
+    </View>
+  );
+};
+
+export default ConfigItem;
+
+const styles = StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  wrapCheckBoxStyle: {
+    marginLeft: -10,
+  },
+});

package/src/screens/Sharing/Components/DeviceItem.js

@@ -0,0 +1,77 @@
+import { Colors, Images } from '../../../configs';
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { AccessibilityLabel } from '../../../configs/Constants';
+import FImage from '../../../commons/FImage';
+import IconComponent from '../../../commons/IconComponent';
+import { IconOutline } from '@ant-design/icons-react-native';
+import styles from './Styles/DeviceItemStyles';
+
+const DeviceItem = ({ isChecked, item, onSelect, childrenRender }) => {
+  const { label, key, item: endDeviceItem } = item;
+  const { actions, read_configs, icon_kit, icon } = endDeviceItem;
+  const [isChildExpanded, setIsChildExpanded] = useState(false);
+  const onPressItem = () => {
+    onSelect(item, !isChecked);
+  };
+
+  return (
+    <View style={styles.wrap}>
+      <TouchableOpacity
+        onPress={onPressItem}
+        accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.ICON_END_DEVICE}-${key}`}
+      >
+        {icon_kit || icon ? (
+          <IconComponent
+            icon={icon_kit || icon}
+            size={20}
+            style={styles.viewLeft}
+          />
+        ) : (
+          <FImage
+            source={Images.defaultEndDeviceIcon}
+            style={styles.viewLeft}
+          />
+        )}
+      </TouchableOpacity>
+      <View style={styles.wrapRight}>
+        <View style={styles.viewRight}>
+          <TouchableOpacity
+            onPress={onPressItem}
+            style={styles.wrapTextIcon}
+            accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.NAME_END_DEVICE}-${key}`}
+          >
+            <Text numberOfLines={1} style={styles.text}>
+              {label}
+            </Text>
+            {isChecked && (
+              <IconOutline
+                name={'check'}
+                color={Colors.Primary}
+                size={20}
+                accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.ICON_CHECK}-${key}`}
+              />
+            )}
+          </TouchableOpacity>
+          <View style={styles.expandView}>
+            {actions?.length + read_configs?.length > 0 && (
+              <IconOutline
+                onPress={() => setIsChildExpanded(!isChildExpanded)}
+                name={isChildExpanded ? 'up' : 'down'}
+                size={20}
+                color={Colors.Gray6}
+                accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.EXPAND_END_DEVICE}-${key}`}
+              />
+            )}
+          </View>
+        </View>
+        <View style={styles.wrapChildren}>
+          {isChildExpanded && childrenRender}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default DeviceItem;

package/src/screens/Sharing/Components/ItemChangeRole.js

@@ -1,16 +1,15 @@
 import React, { memo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import Text from '../../../commons/Text';
-import { Colors } from '../../../configs';
 
-import styles from './Styles/ItemChangeRoleStyles';
+import { Colors } from '../../../configs';
 import { RadioCircle } from '../../../commons';
+import Text from '../../../commons/Text';
+import styles from './Styles/ItemChangeRoleStyles';
 
 const ItemChangeRole = ({
   isChecked,
   onPress,
   wrapStyle,
-  wrapCheckBoxStyle,
   icon,
   title = '',
   message = '',

package/src/screens/Sharing/Components/ShareDeviceSelector.js

@@ -0,0 +1,255 @@
+import { ActivityIndicator, Alert, View } from 'react-native';
+import { ConfigItem, DeviceItem, SubUnitItem, SubUnitTreeView } from '.';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { API } from '../../../configs';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import Text from '../../../commons/Text';
+import ViewButtonBottom from '../../../commons/ViewButtonBottom';
+import { axiosGet } from '../../../utils/Apis/axios';
+import styles from './Styles/ShareDeviceSelectorStyles';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const ShareDeviceSelector = ({
+  unitId,
+  initialSelectedKeys = [],
+  onRightClick,
+  rightTitle,
+}) => {
+  const [dataSubUnits, setDataSubUnits] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const t = useTranslations();
+  const navigation = useNavigation();
+  const [selectedKeys, setSelectedKeys] = useState(initialSelectedKeys);
+
+  const updateParentSelected = (data, newSelectedKeys) => {
+    const updateParentCheck = (nodes) => {
+      nodes.forEach((node) => {
+        if (!node?.children || node.children.length === 0) {
+          return;
+        }
+        updateParentCheck(node.children);
+
+        const allChildrenChecked = node.children.every((child) =>
+          newSelectedKeys.has(child.key)
+        );
+        if (allChildrenChecked) {
+          newSelectedKeys.add(node.key);
+        } else {
+          newSelectedKeys.delete(node.key);
+        }
+      });
+    };
+    updateParentCheck(data);
+    setSelectedKeys([...newSelectedKeys]);
+  };
+
+  const handleOnSelect = (item, isChecked) => {
+    const getAllChildIds = (node) => {
+      let ids = [node.key];
+      (node?.children || []).forEach((child) => {
+        ids.push(...getAllChildIds(child));
+      });
+      return ids;
+    };
+
+    let newSelectedKeys = new Set(selectedKeys);
+    const affectedKeys = getAllChildIds(item);
+
+    if (isChecked) {
+      affectedKeys.forEach((key) => newSelectedKeys.add(key));
+    } else {
+      affectedKeys.forEach((key) => newSelectedKeys.delete(key));
+    }
+
+    updateParentSelected(dataSource, newSelectedKeys);
+  };
+
+  const renderSubUnitTreeNode = ({ item, childrenRender }) => {
+    const level = item.key.split('-').at(0);
+    const isChecked = selectedKeys.includes(item.key);
+    switch (level) {
+      case 'subUnit':
+        return (
+          <SubUnitItem
+            item={item}
+            isChecked={isChecked}
+            onSelect={handleOnSelect}
+            childrenRender={childrenRender}
+          />
+        );
+      case 'device':
+        return (
+          <DeviceItem
+            item={item}
+            isChecked={isChecked}
+            childrenRender={childrenRender}
+            onSelect={handleOnSelect}
+          />
+        );
+      case 'config':
+      case 'action':
+        return (
+          <ConfigItem
+            isChecked={isChecked}
+            item={item}
+            onSelect={handleOnSelect}
+          />
+        );
+    }
+  };
+
+  const [dataSource, keyDeviceMap] = useMemo(() => {
+    let keyMap = {};
+    const items = [
+      {
+        id: 'all',
+        key: 'all',
+        label: t('text_all_devices'),
+        children: dataSubUnits.map((subUnit) => ({
+          id: subUnit.id,
+          key: `subUnit-${subUnit.id}`,
+          label: subUnit.name,
+          children: subUnit.devices.map((device) => ({
+            id: device.id,
+            key: `device-${device.id}`,
+            label: device.name,
+            item: device,
+            children: [
+              ...device.actions.map((action) => {
+                const key = `action-${action.id}`;
+                keyMap[key] = device.id;
+                return {
+                  id: action.id,
+                  key,
+                  label: action.name,
+                  isConfig: false,
+                };
+              }),
+              ...device.read_configs.map((config) => {
+                const key = `config-${config.id}`;
+                keyMap[key] = device.id;
+                return {
+                  id: config.id,
+                  key,
+                  label: config.name,
+                  isConfig: true,
+                };
+              }),
+            ],
+          })),
+        })),
+      },
+    ];
+    return [items, keyMap];
+  }, [dataSubUnits, t]);
+
+  useEffect(() => {
+    if (!initialSelectedKeys.length) {
+      return;
+    }
+    const newSelectedKeys = new Set(initialSelectedKeys);
+    updateParentSelected(dataSource, newSelectedKeys);
+  }, [initialSelectedKeys, dataSource]);
+
+  useEffect(() => {
+    const getUnitPermission = async () => {
+      setLoading(true);
+      const { success, data } = await axiosGet(
+        API.SHARE.UNIT_PERMISSIONS_v2(unitId)
+      );
+      success && setDataSubUnits(data);
+      setLoading(false);
+    };
+
+    getUnitPermission();
+  }, [unitId]);
+
+  const handleOnRightClick = async () => {
+    setLoading(true);
+
+    const readKeys = selectedKeys.filter((key) => key.startsWith('config'));
+    const controlKeys = selectedKeys.filter((key) => key.startsWith('action'));
+    const endDeviceKeys = selectedKeys.filter((key) =>
+      key.startsWith('device')
+    );
+
+    const groupByDevice = (keys) =>
+      keys.reduce((acc, key) => {
+        const [, id] = key.split('-');
+        const deviceId = keyDeviceMap[key];
+        deviceId && (acc[deviceId] ??= []).push(Number(id));
+        return acc;
+      }, {});
+    const readGroup = groupByDevice(readKeys);
+    const controlGroup = groupByDevice(controlKeys);
+
+    const read_permissions = Object.entries(readGroup).map(
+      ([deviceId, configIds]) => ({
+        id: Number(deviceId),
+        values: configIds,
+      })
+    );
+
+    const control_permissions = Object.entries(controlGroup).map(
+      ([deviceId, actionIds]) => ({
+        id: Number(deviceId),
+        values: actionIds,
+      })
+    );
+
+    endDeviceKeys.forEach((key) => {
+      const [, deviceId] = key.split('-');
+      if (!readGroup[deviceId] && !controlGroup[deviceId]) {
+        read_permissions.push({ id: Number(deviceId), values: [] });
+      }
+    });
+
+    if (!read_permissions.length && !control_permissions.length) {
+      setLoading(false);
+      Alert.alert('', t('choose_at_least_one'));
+      return;
+    }
+
+    read_permissions.sort((a, b) => a.id - b.id);
+    control_permissions.sort((a, b) => a.id - b.id);
+
+    await onRightClick?.({ read_permissions, control_permissions });
+    setLoading(false);
+  };
+  return (
+    <View style={styles.wrap}>
+      <Text semibold style={styles.title}>
+        {t('select_device')}
+      </Text>
+      <Text style={styles.subtitle}>{t('sharing_select_devices_hint')}</Text>
+      <View style={styles.contentContainer}>
+        {loading ? (
+          <ActivityIndicator />
+        ) : (
+          <SubUnitTreeView
+            data={dataSource}
+            render={renderSubUnitTreeNode}
+            onSelect={handleOnSelect}
+            selectedKeys={selectedKeys}
+          />
+        )}
+      </View>
+      <View style={styles.wrapViewButtonStyle}>
+        <ViewButtonBottom
+          accessibilityLabelPrefix={
+            AccessibilityLabel.PREFIX.SHARING_SELECT_PERMISSION
+          }
+          leftTitle={t('cancel')}
+          onLeftClick={() => navigation.goBack()}
+          rightTitle={rightTitle}
+          rightDisabled={false}
+          onRightClick={handleOnRightClick}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ShareDeviceSelector;

package/src/screens/Sharing/Components/Styles/CheckBoxCustomStyles.js

@@ -1,5 +1,5 @@
-import { StyleSheet } from 'react-native';
 import { Colors } from '../../../../configs';
+import { StyleSheet } from 'react-native';
 import { normalize } from '../../../../configs/Constants';
 
 export default StyleSheet.create({

package/src/screens/Sharing/Components/Styles/DeviceItemStyles.js

@@ -1,27 +1,13 @@
-import { StyleSheet } from 'react-native';
 import { Colors } from '../../../../configs';
+import { StyleSheet } from 'react-native';
 import { normalize } from '../../../../configs/Constants';
 
 export default StyleSheet.create({
-  wrapCheckBoxStyle: {
-    marginLeft: normalize(-10),
-  },
-  titleStyle: {
-    fontSize: 16,
-    fontWeight: 'normal',
-    width: 200,
-  },
-  wrapStyleTitle: {
-    justifyContent: 'space-between',
-  },
   wrap: {
     flexDirection: 'row',
     marginHorizontal: normalize(10),
     paddingBottom: 10,
   },
-  isRenderSeparated: {
-    paddingBottom: normalize(16),
-  },
   viewLeft: {
     marginRight: 16,
     width: normalize(24),
@@ -32,26 +18,24 @@ export default StyleSheet.create({
     flex: 1,
   },
   viewRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: normalize(16),
+  },
+  wrapTextIcon: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingTop: normalize(16),
+    flex: 1,
   },
   text: {
     color: Colors.Gray9,
     flex: 1,
   },
-  checkBox: {
-    width: normalize(20),
-    height: normalize(20),
+  expandView: {
+    width: 20,
   },
-
-  wrapExpand: {
-    marginTop: 10,
-  },
-  viewSeparated: {
-    height: 1,
-    backgroundColor: Colors.Gray4,
-    marginTop: normalize(16),
+  wrapChildren: {
+    marginTop: normalize(10),
   },
 });

package/src/screens/Sharing/{Styles/SelectPermissionStyles.js → Components/Styles/ShareDeviceSelectorStyles.js}

@@ -1,7 +1,8 @@
+import { Constants, normalize } from '../../../../configs/Constants';
+
+import { Colors } from '../../../../configs';
 import { StyleSheet } from 'react-native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
-import { Colors } from '../../../configs';
-import { Constants, normalize } from '../../../configs/Constants';
 
 export default StyleSheet.create({
   wrap: {
@@ -31,15 +32,6 @@ export default StyleSheet.create({
   checkBoxTile: {
     marginLeft: 5,
   },
-  wrapDevice: {
-    borderRadius: normalize(20),
-    borderWidth: 1,
-    borderColor: Colors.Gray4,
-    backgroundColor: Colors.White,
-  },
-  viewGroup: {
-    marginTop: normalize(8),
-  },
   wrapAllDevices: {
     marginBottom: -10,
     marginLeft: 5,

package/src/screens/Sharing/Components/SubUnitItem.js

@@ -0,0 +1,28 @@
+import { Colors } from '../../../configs';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { TitleCheckBox } from '.';
+import { View } from 'react-native';
+import { normalize } from '../../../configs/Constants';
+
+const SubUnitItem = ({ item, isChecked, onSelect, childrenRender }) => {
+  return (
+    <View style={styles.viewGroup}>
+      <TitleCheckBox isChecked={isChecked} item={item} onSelect={onSelect} />
+      <View style={styles.wrapDevice}>{childrenRender}</View>
+    </View>
+  );
+};
+
+export default SubUnitItem;
+const styles = StyleSheet.create({
+  wrapDevice: {
+    borderRadius: normalize(20),
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    backgroundColor: Colors.White,
+  },
+  viewGroup: {
+    marginTop: normalize(8),
+  },
+});