@eohjsc/react-native-smart-city 0.2.87 → 0.2.88

package/src/screens/HanetCamera/CaptureFaceID.js

@@ -0,0 +1,210 @@
+import React, { memo, useState, useRef } from 'react';
+import { View, ActivityIndicator, TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { RNCamera } from 'react-native-camera';
+import { HeaderCustom } from '../../commons/Header';
+import { FullLoading } from '../../commons';
+import Text from '../../commons/Text';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import CaptureFaceIDSvg from '../../../assets/images/Hanet/CaptureFaceID.svg';
+import FaceFrameSvg from '../../../assets/images/Hanet/FaceFrame.svg';
+import { axiosPatch } from '../../utils/Apis/axios';
+import { Colors, Constants, API } from '../../configs';
+import styles from './styles/captureFaceIDStyles';
+import Routes from '../../utils/Route';
+
+const LoadingCamera = memo(() => {
+  return (
+    <View style={styles.containerLoading}>
+      <ActivityIndicator />
+    </View>
+  );
+});
+
+const CaptureFaceID = ({ route }) => {
+  const t = useTranslations();
+  const { navigate, goBack } = useNavigation();
+  const { title, hanetPlace, hanetMember, setMemberAvatar, isAddNewMember } =
+    route.params;
+  const [openCamera, setOpenCamera] = useState(false);
+  const [capturing, setCapturing] = useState(false);
+  const [imageUri, setImageUri] = useState();
+  const [loading, setLoading] = useState(false);
+
+  const refCamera = useRef();
+
+  const beginCaptureFace = async () => {
+    setCapturing(true);
+    setOpenCamera(true);
+  };
+
+  const captureFace = async () => {
+    if (refCamera.current) {
+      const options = {
+        quality: 0.7,
+        height: 1280,
+        width: 736,
+        imageType: 'jpg',
+        pauseAfterCapture: true,
+        forceUpOrientation: true,
+        fixOrientation: true,
+        orientation: 'portrait',
+      };
+      const data = await refCamera.current.takePictureAsync(options);
+      setImageUri(data.uri);
+      setCapturing(false);
+    }
+  };
+
+  const resumeCapture = () => {
+    if (refCamera.current) {
+      setCapturing(true);
+      refCamera.current.resumePreview();
+    }
+  };
+
+  const updateMemberFaceID = async () => {
+    const formData = new FormData();
+    const name = imageUri.split('/').pop();
+    const ext = imageUri.split('.').pop();
+    formData.append('face_id', {
+      name: name,
+      type: `image/${ext}`,
+      uri: imageUri,
+    });
+    setLoading(true);
+    const { success, data } = await axiosPatch(
+      API.CAMERA.HANET.UPDATE_FACE_ID(
+        hanetPlace.place_id,
+        hanetMember.alias_id
+      ),
+      formData,
+      {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      }
+    );
+    if (success) {
+      setMemberAvatar(data.avatar_uri);
+      goBack();
+    }
+    setLoading(false);
+  };
+
+  const newMemberDoneGetFaceID = () => {
+    navigate(Routes.HanetMemberInfo, {
+      hanetPlace: hanetPlace,
+      hanetMember: {
+        ...hanetMember,
+        avatar_uri: imageUri,
+      },
+      isAddNewMember: true,
+    });
+  };
+
+  const processFaceID = async () => {
+    if (isAddNewMember) {
+      newMemberDoneGetFaceID();
+    } else {
+      await updateMemberFaceID();
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom title={title} isShowSeparator />
+      {openCamera && (
+        <View style={styles.wrapCamera}>
+          <RNCamera
+            ref={refCamera}
+            style={{
+              height: Constants.height,
+              width: Constants.width,
+            }}
+            type={RNCamera.Constants.Type.back}
+          >
+            {({ camera, status, recordAudioPermissionStatus }) => {
+              if (status !== 'READY') {
+                return <LoadingCamera />;
+              }
+              return (
+                <View style={styles.maskOutter}>
+                  <FaceFrameSvg />
+                </View>
+              );
+            }}
+          </RNCamera>
+        </View>
+      )}
+      {!openCamera && (
+        <View style={styles.center}>
+          <CaptureFaceIDSvg />
+          <Text type="H3" color={Colors.Gray9} bold style={styles.textDes}>
+            {t('text_des_capture_face_id')}
+          </Text>
+        </View>
+      )}
+      <View
+        style={[
+          styles.wrapBottom,
+          // eslint-disable-next-line react-native/no-inline-styles
+          openCamera && { height: '30%' },
+          openCamera &&
+            // eslint-disable-next-line react-native/no-inline-styles
+            !capturing && { justifyContent: 'flex-end', paddingBottom: 0 },
+        ]}
+      >
+        {!openCamera && (
+          <TouchableOpacity
+            onPress={beginCaptureFace}
+            style={styles.bottomButton}
+          >
+            <Text type="H4" semibold color={Colors.White}>
+              {t('begin')}
+            </Text>
+          </TouchableOpacity>
+        )}
+        {openCamera && capturing && (
+          <>
+            <Text
+              type="H3"
+              color={Colors.Gray9}
+              bold
+              center
+              style={styles.textLocateFace}
+            >
+              {t('text_des_locate_hanet_face_id')}
+            </Text>
+            <TouchableOpacity onPress={captureFace} style={styles.bottomButton}>
+              <Text type="H4" semibold color={Colors.White}>
+                {t('capture')}
+              </Text>
+            </TouchableOpacity>
+          </>
+        )}
+        {openCamera && !capturing && (
+          <>
+            <TouchableOpacity
+              onPress={processFaceID}
+              style={styles.bottomButton}
+            >
+              <Text type="H4" semibold color={Colors.White}>
+                {t('continue')}
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={resumeCapture}
+              style={[styles.bottomButton, styles.bottomButton2]}
+            >
+              <Text type="H4" semibold color={Colors.Primary}>
+                {t('capture_again')}
+              </Text>
+            </TouchableOpacity>
+          </>
+        )}
+      </View>
+      {loading && <FullLoading />}
+    </View>
+  );
+};
+
+export default CaptureFaceID;

package/src/screens/HanetCamera/Detail.js

@@ -0,0 +1,252 @@
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+  useRef,
+} from 'react';
+import { View, TouchableOpacity, FlatList, Image } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { Icon } from '@ant-design/react-native';
+import moment from 'moment';
+import styles from './styles/detailStyles';
+import { HeaderCustom } from '../../commons/Header';
+import { MenuActionMore } from '../../commons';
+import CheckinHeader from './components/CheckinHeader';
+import Text from '../../commons/Text';
+import Calendar from '../../commons/Calendar';
+import { usePopover, useBoolean, useIsOwnerOfUnit } from '../../hooks/Common';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useHanetCheckinData } from './hooks';
+import { API, Colors } from '../../configs';
+import { TESTID } from '../../configs/Constants';
+import {
+  watchHanetCheckinData,
+  unwatchHanetCheckinData,
+} from './utils/Monitor';
+import Routes from '../../utils/Route';
+import { axiosGet } from '../../utils/Apis/axios';
+
+const HanetCameraDetail = ({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const [hanetCamera, setHanetCamera] = useState();
+  const [showCalendar, setShowCalendar, setHideCalendar] = useBoolean();
+
+  // eslint-disable-next-line no-unused-vars
+  const { unit, station, sensor, title } = route.params;
+  const { isOwner } = useIsOwnerOfUnit(unit?.user_id);
+
+  const fetchDisplayConfig = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SENSOR.DISPLAY(sensor?.id),
+      {},
+      true
+    );
+    if (
+      success &&
+      data.items.length > 0 &&
+      data.items[0].type === 'hanet_camera'
+    ) {
+      setHanetCamera(data.items[0].configuration);
+    }
+  }, [sensor?.id]);
+
+  useEffect(() => {
+    fetchDisplayConfig();
+  }, [fetchDisplayConfig]);
+
+  const {
+    checkinData,
+    countMember,
+    countStranger,
+    refreshing,
+    loadingMore,
+    onRefresh,
+    onLoadMore,
+    date,
+    onChangeDate,
+    onMomentumScrollBegin,
+    onReceiveNewCheckinData,
+  } = useHanetCheckinData(hanetCamera);
+
+  useEffect(() => {
+    if (!hanetCamera) {
+      return;
+    }
+    watchHanetCheckinData(hanetCamera, onReceiveNewCheckinData);
+    return () => unwatchHanetCheckinData(hanetCamera);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hanetCamera]);
+
+  const CheckInItem = useCallback(
+    ({ item }) => {
+      const textMask =
+        item.detected_mask === 'MASK_OFF'
+          ? t('mask_off')
+          : item.detected_mask === 'MASK_ON'
+          ? t('mask_on')
+          : '';
+      const isStranger = item.person_type === 'STRANGER';
+      return (
+        <View style={styles.wrapItem}>
+          <Text type="Body" color={Colors.Gray7} style={styles.timeCheckIn}>
+            {moment(item.created_at).format('HH:mm:ss')}
+          </Text>
+          <View style={styles.verticalLine}>
+            <View
+              style={[
+                styles.centerCircle,
+                { backgroundColor: isStranger ? Colors.Red6 : Colors.Primary },
+              ]}
+            />
+          </View>
+          <View style={styles.wrapItemInfo}>
+            <Text type="Body" color={isStranger ? Colors.Red6 : Colors.Gray9}>
+              {isStranger ? t('stranger') : item.person_name}
+            </Text>
+            <View style={styles.itemDescription}>
+              <Text type="Label" color={Colors.Gray7}>
+                {textMask}
+              </Text>
+            </View>
+          </View>
+          <View style={styles.wrapAvatar}>
+            <Image
+              source={{ uri: item.detected_image_uri }}
+              style={styles.avatar}
+            />
+          </View>
+        </View>
+      );
+    },
+    [t]
+  );
+
+  const onDatePicked = (datePicked) => {
+    onChangeDate(moment(datePicked));
+  };
+
+  const onPickNextDate = () => {
+    if (date.isSame(moment(), 'date')) {
+      return;
+    }
+    onChangeDate(moment(date).add(1, 'days'));
+  };
+
+  const onPickPreviousDate = () => {
+    onChangeDate(moment(date).add(-1, 'days'));
+  };
+
+  const listMenuItem = useMemo(() => {
+    if (isOwner) {
+      return [
+        {
+          text: t('manage_access'),
+          route: Routes.HanetManageAccess,
+          data: {
+            hanetPlace: hanetCamera?.place,
+          },
+        },
+      ];
+    }
+    return [];
+  }, [t, isOwner, hanetCamera?.place]);
+
+  const onItemMenuClicked = useCallback(
+    (item) => {
+      navigate(item.route, item.data);
+    },
+    [navigate]
+  );
+
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
+  const refMenuAction = useRef();
+  const handleShowMenuAction = useCallback(() => {
+    showPopoverWithRef(refMenuAction);
+  }, [showPopoverWithRef, refMenuAction]);
+
+  const HeaderRight = useMemo(
+    () => {
+      if (isOwner) {
+        return (
+          <View style={styles.headerRight}>
+            <TouchableOpacity
+              style={styles.button}
+              onPress={handleShowMenuAction}
+              ref={refMenuAction}
+            >
+              <Icon name={'more'} size={27} color={Colors.Black} />
+            </TouchableOpacity>
+          </View>
+        );
+      }
+      return <></>;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isOwner]
+  );
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom
+        title={title}
+        rightComponent={HeaderRight}
+        isShowSeparator
+      />
+      <View style={styles.wrapTop}>
+        <CheckinHeader
+          date={date}
+          onPickPreviousDate={onPickPreviousDate}
+          onPickNextDate={onPickNextDate}
+          setShowCalendar={setShowCalendar}
+        />
+        <View style={[styles.row2, styles.marginTop16]}>
+          <Text type="Body" color={Colors.Gray7} style={styles.marginRight10}>
+            {`${t('member')}: `}
+            <Text color={Colors.Primary} testID={TESTID.TEXT_COUNT_MEMBER}>
+              {countMember !== null ? countMember : '--'}
+            </Text>
+          </Text>
+          <Text type="Body" color={Colors.Gray7}>
+            {`${t('stranger')}: `}
+            <Text color={Colors.Red6} testID={TESTID.TEXT_COUNT_STRANGER}>
+              {countStranger !== null ? countStranger : '--'}
+            </Text>
+          </Text>
+        </View>
+      </View>
+      <FlatList
+        data={checkinData}
+        extraData={checkinData}
+        refreshing={refreshing}
+        isLoadMore={loadingMore}
+        onRefresh={onRefresh}
+        onLoadMore={onLoadMore}
+        onMomentumScrollBegin={onMomentumScrollBegin}
+        renderItem={CheckInItem}
+        contentContainerStyle={styles.contentContainerStyle}
+        scrollIndicatorInsets={{ right: 1 }}
+      />
+      <MenuActionMore
+        isVisible={showingPopover}
+        hideMore={hidePopover}
+        listMenuItem={listMenuItem}
+        childRef={childRef}
+        onItemClick={onItemMenuClicked}
+        wrapStyle={styles.menuAction}
+        isTextCenter={false}
+      />
+      <Calendar
+        isVisible={showCalendar}
+        defaultDate={date}
+        maxDate={moment()}
+        onCancel={setHideCalendar}
+        onConfirm={onDatePicked}
+      />
+    </View>
+  );
+};
+
+export default HanetCameraDetail;

package/src/screens/HanetCamera/ManageAccess.js

@@ -0,0 +1,173 @@
+import React, { useCallback, useMemo } from 'react';
+import { View, TouchableOpacity, Image, FlatList } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import ImagePicker from 'react-native-image-crop-picker';
+import { Icon } from '@ant-design/react-native';
+import { IconOutline, IconFill } from '@ant-design/icons-react-native';
+import { HeaderCustom } from '../../commons/Header';
+import BottomSheet from '../../commons/BottomSheet';
+import Text from '../../commons/Text';
+import styles from './styles/manageAccessStyles';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useHanetPlaceMembers } from './hooks';
+import { useBoolean } from '../../hooks/Common';
+import { Colors } from '../../configs';
+import { TESTID } from '../../configs/Constants';
+import Routes from '../../utils/Route';
+import SmartPhoneSvg from '../../../assets/images/Common/SmartPhone.svg';
+
+const HanetManageAccess = ({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+
+  const { hanetPlace } = route.params;
+  const {
+    data,
+    refreshing,
+    loadingMore,
+    onRefresh,
+    onLoadMore,
+    onMomentumScrollBegin,
+  } = useHanetPlaceMembers(hanetPlace);
+
+  const onPressItem = (item) => () => {
+    navigate(Routes.HanetMemberInfo, {
+      hanetPlace: hanetPlace,
+      hanetMember: item,
+    });
+  };
+
+  const [showAddMemberModal, setShowAddMemberModal, setHideAddMemberModal] =
+    useBoolean();
+
+  const captureFaceID = () => {
+    navigate(Routes.HanetCaptureFaceID, {
+      title: t('add_new_member'),
+      hanetPlace: hanetPlace,
+      hanetMember: {
+        alias_id: null,
+        name: null,
+      },
+      isAddNewMember: true,
+    });
+  };
+
+  const chooseFile = async () => {
+    const options = {
+      mediaType: 'photo',
+      compressImageMaxHeight: 1280,
+      compressImageMaxWidth: 738,
+      compressImageQuality: 0.7,
+      forceJpg: true,
+    };
+    const result = await ImagePicker.openPicker(options);
+    navigate(Routes.HanetMemberInfo, {
+      hanetPlace: hanetPlace,
+      hanetMember: {
+        alias_id: null,
+        name: null,
+        avatar_uri: result.path,
+      },
+      isAddNewMember: true,
+    });
+  };
+
+  const addMemberOptions = [
+    {
+      icon: <IconFill name="camera" color={Colors.Gray9} size={27} />,
+      text: t('capture_image'),
+      onChoose: () => {
+        setHideAddMemberModal();
+        captureFaceID();
+      },
+    },
+    {
+      icon: <SmartPhoneSvg />,
+      text: t('pick_available_image_from_your_phone'),
+      onChoose: () => {
+        setHideAddMemberModal();
+        chooseFile();
+      },
+    },
+  ];
+
+  const MemberItem = useCallback(
+    ({ item }) => {
+      return (
+        <TouchableOpacity
+          onPress={onPressItem(item)}
+          style={styles.wrapItem}
+          testID={TESTID.ROW_HANET_MANAGE_ACCESS}
+        >
+          <Image source={{ uri: item.avatar_uri }} style={styles.itemAvatar} />
+          <Text type="H4" color={Colors.Gray9} style={styles.itemName}>
+            {' '}
+            {item.name}
+          </Text>
+          <IconOutline name="right" size={20} color={Colors.Gray6} />
+        </TouchableOpacity>
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [navigate]
+  );
+
+  const HeaderRight = useMemo(
+    () => (
+      <View style={styles.headerRight}>
+        <TouchableOpacity
+          onPress={setShowAddMemberModal}
+          testID={TESTID.HANET_MANAGE_ACCESS_ADD_BUTTON}
+        >
+          <Icon name={'plus'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+      </View>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom
+        title={t('manage_access')}
+        rightComponent={HeaderRight}
+        isShowSeparator
+      />
+      <FlatList
+        data={data}
+        extraData={data}
+        refreshing={refreshing}
+        isLoadMore={loadingMore}
+        onRefresh={onRefresh}
+        onLoadMore={onLoadMore}
+        onMomentumScrollBegin={onMomentumScrollBegin}
+        renderItem={MemberItem}
+        contentContainerStyle={styles.contentContainerStyle}
+        scrollIndicatorInsets={{ right: 1 }}
+      />
+      <BottomSheet
+        isVisible={showAddMemberModal}
+        onBackdropPress={setHideAddMemberModal}
+        title={t('add_member')}
+        style={styles.addMemberModal}
+      >
+        {addMemberOptions.map((option, i) => (
+          <TouchableOpacity
+            key={i}
+            onPress={option.onChoose}
+            style={styles.row}
+            testID={`${TESTID.HANET_ADD_MEMBER_OPTION}_${i}`}
+          >
+            {option.icon}
+            <Text type="H4" color={Colors.Gray9} style={styles.textOption}>
+              {option.text}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </BottomSheet>
+    </View>
+  );
+};
+
+export default HanetManageAccess;