@eohjsc/react-native-smart-city 0.2.73 → 0.2.74

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/RectangleButton.js

@@ -0,0 +1,49 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import styles from './RectangleButtonStyles';
+import { KeyboardArrowUp, KeyboardArrowDown } from './Icon';
+import { TESTID } from '../../../../configs/Constants';
+
+const RectangleButton = memo(
+  ({ icon, onPressUp, onPressDown, wrapStyle, type, onPress }) => {
+    switch (type) {
+      case 'row':
+        return (
+          <View style={[styles.wrapRowRectangle, wrapStyle]}>
+            <TouchableOpacity style={[styles.rectangleRow]} onPress={onPress}>
+              {!!icon && icon}
+            </TouchableOpacity>
+          </View>
+        );
+      case 'column':
+        return (
+          <View style={[styles.wrapColumnRectangle, wrapStyle]}>
+            <TouchableOpacity
+              style={[styles.rectangleColumn]}
+              onPress={onPressUp}
+              testID={TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON}
+            >
+              <KeyboardArrowUp size={24} name={'up'} style={styles.padding8} />
+            </TouchableOpacity>
+            <View style={styles.iconKeyboardRetangle}>{!!icon && icon}</View>
+            <TouchableOpacity
+              style={[styles.rectangleColumn]}
+              onPress={onPressDown}
+              testID={TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON}
+            >
+              <KeyboardArrowDown
+                size={24}
+                name={'down'}
+                style={styles.padding8}
+              />
+            </TouchableOpacity>
+          </View>
+        );
+      default:
+        return <></>;
+    }
+  }
+);
+
+export default RectangleButton;

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/RectangleButtonStyles.js

@@ -0,0 +1,47 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Device } from '../../../../configs';
+const widthMonitor = Device.screenWidth;
+
+const centerRowItem = {
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+const centerColumnItem = {
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+};
+const borderItem = {
+  borderWidth: 1,
+  borderColor: Colors.Gray4,
+  borderRadius: 10,
+};
+export default StyleSheet.create({
+  rectangleColumn: {
+    padding: 16,
+    ...centerRowItem,
+  },
+  rectangleRow: {
+    ...centerRowItem,
+  },
+  wrapRowRectangle: {
+    flexWrap: 'nowrap',
+    ...centerColumnItem,
+    width: widthMonitor / 2 - 37,
+    ...borderItem,
+    margin: 12,
+    padding: 10,
+  },
+  wrapColumnRectangle: {
+    width: 63,
+    height: 186,
+    ...centerColumnItem,
+    backgroundColor: Colors.White,
+    ...borderItem,
+  },
+  iconKeyboardRetangle: {
+    ...centerRowItem,
+  },
+  padding8: {
+    padding: 8,
+  },
+});

package/src/commons/ActionGroup/index.js

@@ -9,6 +9,7 @@ import OptionsDropdownActionTemplate from './OptionsDropdownActionTemplate';
 import OnOffTemplate from './OnOffTemplate';
 import TimerActionTemplate from './TimerActionTemplate';
 import CurtainButtonTemplate from './CurtainButtonTemplate';
+import SmartTiviActionTemplate from './SmartTiviActionTemplate/SmartTiviActionTemplate';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -32,6 +33,8 @@ export const getActionComponent = (template) => {
       return TimerActionTemplate;
     case 'curtain_action_template':
       return CurtainButtonTemplate;
+    case 'SmartTiviActionTemplate':
+      return SmartTiviActionTemplate;
     default:
       return null;
   }

package/src/commons/Device/HistoryChart.js

@@ -190,13 +190,17 @@ const HistoryChart = memo(
               />
             )}
           </View>
-          <DateTimeRangeChange
-            startTime={eventPicker.startTime}
-            onStart={onStart}
-            onEnd={onEnd}
-            endTime={eventPicker.endTime}
-            formatType={formatType}
-          />
+          {!(
+            configuration.type === 'horizontal_bar_chart' && groupBy !== 'date'
+          ) && (
+            <DateTimeRangeChange
+              startTime={eventPicker.startTime}
+              onStart={onStart}
+              onEnd={onEnd}
+              endTime={eventPicker.endTime}
+              formatType={formatType}
+            />
+          )}
         </View>
         {configuration.config === 'power_consumption' && (
           <View style={styles.wrapCalculateCost}>

package/src/commons/Device/WaterQualitySensor/QualityIndicatorsItem.js

@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: Colors.Gray4,
     marginRight: 8,
-    width: (width / 375) * 112,
+    width: (width / 375) * 120,
   },
   rowFlex: {
     flexDirection: 'row',

package/src/configs/API.js

@@ -204,6 +204,9 @@ const API = {
     REMOVE_SMART_ACCOUNT: (id) =>
       SCConfig.apiRoot + `/smart_account/smart_accounts/${id}/`,
   },
+  PUSHER: {
+    AUTH: () => SCConfig.apiRoot + '/smart_parking/pusher/auth/',
+  },
 };
 
 export default API;

package/src/configs/Constants.js

@@ -178,6 +178,28 @@ export const TESTID = {
   MY_UNIT_NO_UNIT: 'MY_UNIT_NO_UNIT',
   ITEM_UNIT: 'ITEM_UNIT',
 
+  // SmartTiviTemplate
+  SMART_TIVI_TEMPLATE: {
+    BIG_BUTTON: 'BIG_BUTTON',
+    ONOFF_BUTTON: 'ONOFF_BUTTON',
+    EXIT_BUTTON: 'EXIT_BUTTON',
+    CH_VOLUME_UP_BUTTON: 'CH_VOLUME_UP_BUTTON',
+    CH_VOLUME_DOWN_BUTTON: 'CH_VOLUME_DOWN_BUTTON',
+    PREV_BUTTON: 'PREV_BUTTON',
+    STOP_BUTTON: 'STOP_BUTTON',
+    NEXT_BUTTON: 'NEXT_BUTTON',
+    UP_BUTTON: 'UP_BUTTON',
+    DOWN_BUTTON: 'DOWN_BUTTON',
+    LEFT_BUTTON: 'LEFT_BUTTON',
+    RIGHT_BUTTON: 'RIGHT_BUTTON',
+    OK_BUTTON: 'OK_BUTTON',
+    HOME_BUTTON: 'HOME_BUTTON',
+    BACK_BUTTON: 'BACK_BUTTON',
+    VOLUME_BUTTON: 'VOLUME_BUTTON',
+    CH_BUTTON: 'CH_BUTTON',
+    CONTROL_BUTTON: 'CONTROL_BUTTON',
+  },
+
   // sub unit
   SUB_UNIT_FULL_CAMERA: 'SUB_UNIT_FULL_CAMERA',
   SUB_UNIT_CAMERA_VIEW: 'SUB_UNIT_CAMERA_VIEW',
@@ -612,6 +634,7 @@ export const NOTIFICATION_TYPES = {
   REMINDER: 'REMINDER',
   NOTIFY_REMOVE_UNIT: 'NOTIFY_REMOVE_UNIT',
   NOTIFY_REMOVE_MEMBER: 'NOTIFY_REMOVE_MEMBER',
+  NOTIFY_MEMBER_LEAVE_UNIT: 'NOTIFY_MEMBER_LEAVE_UNIT',
 };
 
 export const ACTIVITY_LOG_TYPES = {

package/src/configs/Images.js

@@ -10,4 +10,5 @@ export default {
   buttonPauseCurtain: require('../Images/Common/buttonPauseCurtain.png'),
   buttonLeftCurtain: require('../Images/Common/buttonLeftCurtain.png'),
   buttonRightCurtain: require('../Images/Common/buttonRightCurtain.png'),
+  shadowButton: require('../Images/Common/shadowButton.png'),
 };

package/src/navigations/UnitStack.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { get } from 'lodash';
@@ -134,7 +134,6 @@ export const UnitStack = memo((props) => {
         component={UnitSummary}
         options={{
           headerShown: false,
-          animationEnabled: Platform.OS === 'ios',
         }}
       />
       <Stack.Screen
@@ -161,7 +160,6 @@ export const UnitStack = memo((props) => {
         component={DeviceDetail}
         options={{
           headerShown: false,
-          animationEnabled: Platform.OS === 'ios',
         }}
       />
       <Stack.Screen

package/src/screens/AddNewGateway/PlugAndPlay/ConnectWifiWarning.js

@@ -20,45 +20,12 @@ import { Colors, API } from '../../../configs';
 import { axiosPost } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
 
-const socket = dgram.createSocket({ type: 'udp4' });
-
-socket.once('listening', function () {
-  socket.send(
-    JSON.stringify({ type: 'scan', data: { wifi: '' } }),
-    undefined,
-    undefined,
-    54321,
-    '192.168.27.1',
-    undefined
-  );
-});
-
 const ConnectWifiWarning = memo(({ route }) => {
   const { wifi_ssid, wifi_pass, unit_id, chip_id } = route.params;
   const t = useTranslations();
-  const { navigate } = useNavigation();
+  const { navigate, goBack } = useNavigation();
   const [isLoading, setIsLoading] = useState(false);
 
-  socket.on('message', function (msg, rinfo) {
-    const data = JSON.parse(msg.toString());
-    if (data.hasOwnProperty('wifi')) {
-      navigate(Routes.GatewayWifiList, {
-        list_wifi: data.wifi,
-        unit_id: unit_id,
-        chip_id: chip_id,
-        socket: socket,
-      });
-    }
-    if (data.hasOwnProperty('gateway')) {
-      navigate(Routes.Dashboard);
-      ToastBottomHelper.success(t('completed'));
-    }
-  });
-
-  socket.on('error', () => {
-    ToastBottomHelper.error(t('server_error'));
-  });
-
   const getPermissionWifiAndroid = useCallback(async () => {
     const granted = await PermissionsAndroid.request(
       PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
@@ -78,26 +45,45 @@ const ConnectWifiWarning = memo(({ route }) => {
 
   useEffect(() => {
     Platform.OS === 'android' && getPermissionWifiAndroid();
-    socket.bind(54321);
   }, [getPermissionWifiAndroid]);
 
-  const handleSend = async () => {
-    await socket.send(
-      JSON.stringify({ type: 'scan', data: { wifi: '' } }),
-      undefined,
-      undefined,
-      54321,
-      '192.168.27.1',
-      undefined
-    );
+  const handleSend = () => {
+    const socket = dgram.createSocket({ type: 'udp4' });
+    socket.bind(54321);
+    socket.once('listening', function () {
+      socket.send(
+        JSON.stringify({ type: 'scan', data: { wifi: '' } }),
+        undefined,
+        undefined,
+        54321,
+        '192.168.27.1',
+        undefined
+      );
+    });
+    socket.on('message', function (msg, rinfo) {
+      const data = JSON.parse(msg.toString());
+      if (data.hasOwnProperty('wifi')) {
+        navigate(Routes.GatewayWifiList, {
+          list_wifi: data.wifi,
+          unit_id: unit_id,
+          chip_id: chip_id,
+          socket: socket,
+        });
+      }
+      if (data.hasOwnProperty('gateway')) {
+        navigate(Routes.Dashboard);
+        ToastBottomHelper.success(t('completed'));
+      }
+    });
+    socket.on('error', () => {
+      ToastBottomHelper.error(t('server_error'));
+      goBack();
+    });
+    return () => {
+      socket.close();
+    };
   };
 
-  useEffect(() => {
-    if (isLoading) {
-      handleSend();
-    }
-  }, [isLoading]);
-
   const handleConnectWifiGateway = async () => {
     setIsLoading(true);
     const { success } = await axiosPost(API.UNIT.ADD_GATEWAY(unit_id), {
@@ -113,6 +99,7 @@ const ConnectWifiWarning = memo(({ route }) => {
       },
       (e) => {
         ToastBottomHelper.error('Connection failed!');
+        goBack();
       }
     );
   };

package/src/screens/ConfirmUnitDeletion/index.js

@@ -28,8 +28,8 @@ const ConfirmUnitDeletion = ({ route }) => {
     if (confirm === 'YES') {
       const { success } = await axiosDelete(API.UNIT.MANAGE_UNIT(unit.id));
       if (success) {
-        navigation.navigate(Routes.Dashboard);
         ToastBottomHelper.success(t('unit_deleted_successfully'));
+        navigation.navigate(Routes.Dashboard);
       }
     } else {
       setErrorText(t('please_enter_correct'));

package/src/screens/Device/EditDevice/index.js

@@ -96,7 +96,7 @@ const EditDevice = memo(() => {
             </Text>
             <IconOutline
               name="right"
-              size={20}
+              size={18}
               color={Colors.Gray7}
               style={styles.iconRight}
             />

package/src/screens/Device/EditDevice/styles/EditDeviceStyles.js

@@ -25,6 +25,8 @@ export default StyleSheet.create({
   DeviceButtonRight: {
     flexDirection: 'row',
     paddingRight: 16,
+    marginTop: 1,
+    marginLeft: 5,
   },
   iconRight: {
     paddingLeft: 16,

package/src/screens/Notification/Monitor.js

@@ -0,0 +1,12 @@
+import { getPusher, destroyPusher } from '../../utils/Pusher';
+
+// eslint-disable-next-line promise/prefer-await-to-callbacks
+export const watchNotificationData = (user, callback) => {
+  const channel = getPusher().subscribe(`private-user-${user.id}`);
+  channel.bind('new-notification', callback);
+};
+
+export const unwatchNotificationData = (user) => {
+  getPusher().unsubscribe(`private-user-${user.id}`);
+  destroyPusher();
+};

package/src/screens/Notification/components/NotificationItem.js

@@ -243,6 +243,17 @@ const NotificationItem = memo(({ item }) => {
             <IconComponent icon={'home'} style={styles.backgroundSummer} />
           ),
         };
+      case NOTIFICATION_TYPES.NOTIFY_MEMBER_LEAVE_UNIT:
+        return {
+          content: customColorText(
+            t('text_notification_content_member_leave_unit'),
+            arrParams
+          ),
+          redirect: () => null,
+          iconContent: (
+            <IconComponent icon={'home'} style={styles.backgroundSummer} />
+          ),
+        };
       default:
         return {
           content: customColorText(t('this_notification_will_be_updated_soon')),

package/src/screens/Notification/index.js

@@ -8,11 +8,14 @@ import { axiosGet } from '../../utils/Apis/axios';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import NotificationItem from './components/NotificationItem';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import { watchNotificationData, unwatchNotificationData } from './Monitor';
+import { useSCContextSelector } from '../../context';
 
 let page = 1;
 
 const Notification = memo(() => {
   const t = useTranslations();
+  const user = useSCContextSelector((state) => state?.auth?.account?.user);
   const [notifications, setNotifications] = useState([]);
   const [maxPageNotification, setMaxPageNotification] = useState(1);
   const rightComponent = useMemo(
@@ -66,6 +69,11 @@ const Notification = memo(() => {
     }
   }, []);
 
+  useEffect(() => {
+    watchNotificationData(user, onRefresh);
+    return () => unwatchNotificationData(user);
+  }, [user, onRefresh]);
+
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable

package/src/screens/Unit/ManageUnit.js

@@ -73,8 +73,8 @@ const ManageUnit = ({ route }) => {
   const [showImagePicker, setShowImagePicker] = useState(false);
 
   const updateUnit = useCallback(
-    async (headers) => {
-      const formData = createFormData({ background: imageUrl }, ['background']);
+    async (bodyData, headers) => {
+      const formData = createFormData(bodyData, ['background']);
 
       const { success, data } = await axiosPatch(
         API.UNIT.MANAGE_UNIT(unit.id),
@@ -86,7 +86,7 @@ const ManageUnit = ({ route }) => {
         ToastBottomHelper.success(t('unit_updated_successfully'));
       }
     },
-    [unit.id, t, imageUrl]
+    [unit.id, t]
   );
 
   const updateLocation = useCallback(
@@ -116,9 +116,12 @@ const ManageUnit = ({ route }) => {
 
   useEffect(() => {
     if (imageUrl) {
-      updateUnit({
-        headers: { 'Content-Type': 'multipart/form-data' },
-      });
+      updateUnit(
+        { background: imageUrl },
+        {
+          headers: { 'Content-Type': 'multipart/form-data' },
+        }
+      );
     }
   }, [imageUrl, updateUnit]);
 

package/src/screens/Unit/components/MyUnitDevice/index.js

@@ -51,12 +51,14 @@ const MyUnitDevice = ({ sensor, unit }) => {
 
 const styles = StyleSheet.create({
   item: {
-    height: 46,
+    height: 'auto',
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     borderBottomColor: Colors.Gray4,
     borderBottomWidth: 1,
+    paddingTop: 5,
+    paddingBottom: 5,
   },
   iconCircle: {
     width: 32,
@@ -89,6 +91,7 @@ const styles = StyleSheet.create({
     height: 32,
   },
   marginTop3: {
+    flex: 1,
     marginTop: 3,
   },
 });

package/src/utils/I18n/translations/en.json

@@ -671,6 +671,7 @@
   "text_notification_content_remove_unit_to_owner": "Unit **%{unit_name}** has been removed successfully.",
   "text_notification_content_remove_unit_to_member": "Unit **%{unit_name}** has been removed by **%{unit_owner_name}**. You cannot access to this unit anymore.",
   "text_notification_content_remove_member": "You were remove from **%{unit_name}** by **%{unit_owner_name}**. You cannot access to this unit anymore.",
+  "text_notification_content_member_leave_unit": "**%{member_name}**  has left **%{unit_name}**.",
   "this_spot_does_not_exsit": "This spot does not exist",
   "please_scan_again_or_contact_the_parking_manager": "Please scan again or contact the parking manager",
   "this_spot_does_not_support_to_scan": "This spot does not support to scan",

package/src/utils/I18n/translations/vi.json

@@ -679,6 +679,7 @@
   "text_notification_content_remove_unit_to_owner": "Địa điểm **%{unit_name}** vừa được xoá thành công.",
   "text_notification_content_remove_unit_to_member": "Địa điểm **%{unit_name}** vừa được xoá bởi **%{unit_owner_name}**. Bạn không thể truy cập vào địa điểm này được nữa.",
   "text_notification_content_remove_member": "Bạn vừa được xoá khỏi **%{unit_name}** bởi **%{unit_owner_name}**. Bạn không thể truy cập vào địa điểm này được nữa.",
+  "text_notification_content_member_leave_unit": "**%{member_name}** vừa rời khỏi **%{unit_name}**.",
   "this_spot_does_not_exsit": "Vị trí đỗ này không tồn tại",
   "please_scan_again_or_contact_the_parking_manager": "Vui lòng quét lại hoặc liên hệ với người quản lý bãi đậu xe",
   "this_spot_does_not_support_to_scan": "Vị trí đỗ này không hỗ trợ quét",

package/src/utils/Pusher/index.js

@@ -0,0 +1,36 @@
+import { API } from '../../configs';
+import Pusher from 'pusher-js/react-native';
+import { SCConfig } from '../../configs/SCConfig';
+import { axiosPost } from '../../utils/Apis/axios';
+
+Pusher.logToConsole = true;
+let pusher = null;
+
+export const getPusher = () => {
+  if (!pusher) {
+    pusher = new Pusher(SCConfig.pusherAppKey, {
+      cluster: SCConfig.pusherAppCluste,
+      authorizer: function (channel, option) {
+        return {
+          // eslint-disable-next-line promise/prefer-await-to-callbacks
+          authorize: async function (socketId, callback) {
+            const { success, data } = await axiosPost(API.PUSHER.AUTH(), {
+              channel_name: channel.name,
+              socket_id: socketId,
+            });
+            if (success) {
+              // eslint-disable-next-line promise/prefer-await-to-callbacks
+              callback(null, data);
+            }
+          },
+        };
+      },
+    });
+  }
+  return pusher;
+};
+
+export const destroyPusher = () => {
+  pusher.disconnect();
+  pusher = null;
+};