@eohjsc/react-native-smart-city 0.7.42 → 0.7.43

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.42",
+  "version": "0.7.43",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Device/PowerConsumptionChart.js

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors } from '../../configs';
@@ -19,6 +19,7 @@ const PowerConsumptionChart = ({
   powerConfigId,
   defaultPeriod = 'date',
   color = Colors.Primary,
+  isWidgetOrder = false,
   style,
 }) => {
   const t = useTranslations();
@@ -30,9 +31,11 @@ const PowerConsumptionChart = ({
     price: '',
   });
   const [value, setValue] = useState([moment().subtract(6, 'days'), moment()]);
+  const [isFetching, setIsFetching] = useState(false);
 
   const fetchData = useCallback(
     async (startDate, endDate) => {
+      setIsFetching(true);
       let params = new URLSearchParams();
       params.append('config', powerConfigId);
       params.append('group_by', groupBy);
@@ -50,6 +53,7 @@ const PowerConsumptionChart = ({
       if (success) {
         setDatas(data);
       }
+      setIsFetching(false);
     },
     [groupBy, powerConfigId]
   );
@@ -83,13 +87,20 @@ const PowerConsumptionChart = ({
   }, [datas, chartConfig]);
 
   const renderChart = useMemo(() => {
+    if (isFetching) {
+      return (
+        <View style={styles.loadingWrapper}>
+          <ActivityIndicator size="large" color={Colors.Primary} />
+        </View>
+      );
+    }
     if (!datas || datas.length === 0) {
       return null;
     }
     return (
       <HorizontalBarChart datas={datas} config={chartConfig} color={color} />
     );
-  }, [chartConfig, datas, color]);
+  }, [chartConfig, datas, color, isFetching]);
 
   const selectStart = (date) => {
     setValue((state) => [date, state[1]]);
@@ -99,16 +110,23 @@ const PowerConsumptionChart = ({
   };
 
   return (
-    <View style={style}>
+    <View style={[styles.wrapper, style]}>
       <View style={styles.historyView}>
         <View style={styles.titleHistory}>
-          <Text style={styles.label} bold color={Colors.Gray9}>
+          <Text
+            style={styles.label}
+            bold
+            color={Colors.Gray9}
+            numberOfLines={1}
+          >
             {label || t('power_consumption_chart')}
           </Text>
 
-          <ChartAggregationOption groupBy={groupBy} setGroupBy={setGroupBy} />
+          {!isWidgetOrder && (
+            <ChartAggregationOption groupBy={groupBy} setGroupBy={setGroupBy} />
+          )}
         </View>
-        {groupBy === 'date' && (
+        {!isWidgetOrder && groupBy === 'date' && (
           <DateTimeRangeChange
             startTime={value[0]}
             endTime={value[1]}
@@ -119,34 +137,36 @@ const PowerConsumptionChart = ({
         )}
       </View>
 
-      <View style={styles.calculateCostCard}>
-        <Text style={styles.title}>
-          {t('input_price_to_calculate_electricity_cost')}
-        </Text>
-        <View style={styles.inputRow}>
-          <View style={styles.inputWrapper}>
-            <CurrencyInput
-              value={price}
-              onChange={setPrice}
-              minValue={0}
-              maxValue={100000000}
-              placeholder={'0'}
-              onSubmitEditing={onCalculateCost}
-              currency="đ/kWh"
-              wrapperStyle={styles.currencyInputNoBorder}
+      {!isWidgetOrder && (
+        <View style={styles.calculateCostCard}>
+          <Text style={styles.title}>
+            {t('input_price_to_calculate_electricity_cost')}
+          </Text>
+          <View style={styles.inputRow}>
+            <View style={styles.inputWrapper}>
+              <CurrencyInput
+                value={price}
+                onChange={setPrice}
+                minValue={0}
+                maxValue={100000000}
+                placeholder={'0'}
+                onSubmitEditing={onCalculateCost}
+                currency="đ/kWh"
+                wrapperStyle={styles.currencyInputNoBorder}
+              />
+            </View>
+            <Button
+              type="primary"
+              title={t('calculate_cost')}
+              height={42}
+              onPress={onCalculateCost}
+              style={styles.buttonCalculate}
+              textSemiBold={true}
+              accessibilityLabel={AccessibilityLabel.BUTTON_CALCULATE_COST}
             />
           </View>
-          <Button
-            type="primary"
-            title={t('calculate_cost')}
-            height={42}
-            onPress={onCalculateCost}
-            style={styles.buttonCalculate}
-            textSemiBold={true}
-            accessibilityLabel={AccessibilityLabel.BUTTON_CALCULATE_COST}
-          />
         </View>
-      </View>
+      )}
 
       <View style={styles.chartCard}>
         {renderChart}
@@ -169,6 +189,10 @@ const PowerConsumptionChart = ({
 export default React.memo(PowerConsumptionChart);
 
 const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    marginBottom: 8,
+  },
   historyView: {
     paddingTop: 0,
   },
@@ -181,6 +205,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     marginTop: 12,
     marginLeft: 6,
+    flex: 1,
   },
   calculateCostCard: {
     backgroundColor: Colors.LightPrimary,
@@ -247,5 +272,12 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 18,
     fontWeight: '700',
+    flex: 1,
+    marginRight: 8,
+  },
+  loadingWrapper: {
+    height: 150,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 });

package/src/configs/AccessibilityLabel.js

@@ -138,6 +138,7 @@ export default {
   BOTTOM_BUTTON_RIGHT: 'BOTTOM_BUTTON_RIGHT',
   VIEW_BUTTON_BOTTOM_RIGHT_BUTTON: 'VIEW_BUTTON_BOTTOM_RIGHT_BUTTON',
   VIEW_BUTTON_BOTTOM_LEFT_BUTTON: 'VIEW_BUTTON_BOTTOM_LEFT_BUTTON',
+  TOUCHABLE_OPACITY: 'TOUCHABLE_OPACITY',
 
   // Smart parking drawer
   ROW_EXIT_SMARTPARKING_DRAWER: 'ROW_EXIT_SMARTPARKING_DRAWER',

package/src/iot/mqtt.js

@@ -1,6 +1,6 @@
+import { Buffer } from 'buffer';
 import { getObject, storeObject } from '../utils/Storage';
 import { getLastUpdated, updateGlobalValue } from './UpdateStates';
-import { Buffer } from 'buffer';
 
 const struct = require('python-struct');
 
@@ -322,7 +322,9 @@ const get_offset_sample_value = async (value, config) => {
 
 const getValueConverter = (value, config) => {
   const converter = mappingValueConverter[config?.value_converter];
-  return converter ? converter(value) : value;
+  return converter
+    ? Number(get_decimal_value(converter(value), config))
+    : value;
 };
 
 const check_filter = (value, config) => {

package/src/navigations/UnitStack.js

@@ -11,7 +11,7 @@ import { SCContext } from '../context';
 import { Action } from '../context/actionType';
 import { useTranslations } from '../hooks/Common/useTranslations';
 import { unwatchAllConfigs } from '../iot/Monitor';
-import ActivityLogScreen from '../screens/ActivityLog';
+import ActivityLog from '../screens/ActivityLog';
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
@@ -350,7 +350,7 @@ export const UnitStack = memo((props) => {
       />
       <Stack.Screen
         name={Route.ActivityLog}
-        component={ActivityLogScreen}
+        component={ActivityLog}
         options={{
           headerShown: false,
         }}

package/src/screens/ActivityLog/ItemLog.js

@@ -1,10 +1,14 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { View, TouchableOpacity, Modal } from 'react-native';
 import moment from 'moment';
 import Text from '../../commons/Text';
 import t from '../../hooks/Common/useTranslations';
 import styles from './styles/itemLogStyles';
-import { AUTOMATE_TYPE, ACTIVITY_LOG_TYPES } from '../../configs/Constants';
+import {
+  AUTOMATE_TYPE,
+  ACTIVITY_LOG_TYPES,
+  AccessibilityLabel,
+} from '../../configs/Constants';
 
 const DetailEmergencyEventLog = ({ item }) => (
   <Text style={styles.text}>
@@ -20,34 +24,83 @@ const DetailEmergencyEventLog = ({ item }) => (
 );
 
 const DetailLog = ({ item }) => {
-  switch (item.content_code) {
+  const [showModal, setShowModal] = useState(false);
+  const { name, username, created_at, message, content_code, action_name } =
+    item;
+
+  const handlePress = useCallback(() => {
+    if (message) {
+      setShowModal(true);
+    }
+  }, [message]);
+
+  const handleClose = useCallback(() => {
+    setShowModal(false);
+  }, []);
+
+  switch (content_code) {
     case ACTIVITY_LOG_TYPES.AUTO_ACTIVATED:
       return <Text style={styles.text}>{t('auto_activated')}</Text>;
     case ACTIVITY_LOG_TYPES.ACTIVATED_BY:
       return (
         <Text style={styles.text}>
-          {item.action_name
-            ? `${item.action_name} ${t('by')} `
-            : `${t('activated_by')} `}
-          <Text style={styles.name}>{item.name || item.username}</Text>
+          {action_name ? `${action_name} ${t('by')} ` : `${t('activated_by')} `}
+          <Text style={styles.name}>{name || username}</Text>
         </Text>
       );
     case ACTIVITY_LOG_TYPES.SCRIPT_UPDATED_BY:
       return (
         <Text style={styles.text}>
           {`${t('script_updated_by')} `}
-          <Text style={styles.name}>{item.name || item.username}</Text>
+          <Text style={styles.name}>{name || username}</Text>
         </Text>
       );
     default:
       return (
-        <Text style={styles.text}>
-          {item.action_name
-            ? `${item.action_name} ${t('by')} `
-            : `${t('activated_by')} `}
-          <Text style={styles.name}>{item.name || item.username}</Text>
-          <Text style={styles.text}>{'\n' + item.message}</Text>
-        </Text>
+        <>
+          <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
+            <Text style={styles.text}>
+              {action_name
+                ? `${action_name} ${t('by')} `
+                : `${t('activated_by')} `}
+              <Text style={styles.name}>{name || username}</Text>
+            </Text>
+          </TouchableOpacity>
+          <Modal
+            visible={showModal}
+            transparent
+            animationType="fade"
+            onRequestClose={handleClose}
+            accessibilityLabel={AccessibilityLabel.MODAL_BUTTON_POPUP}
+          >
+            <TouchableOpacity
+              style={styles.modalOverlay}
+              activeOpacity={1}
+              onPress={handleClose}
+              accessibilityLabel={AccessibilityLabel.TOUCHABLE_OPACITY}
+            >
+              <View style={styles.modalContent}>
+                <Text style={styles.modalTitle}>{t('detail')}</Text>
+                <Text style={styles.modalMessage}>
+                  {action_name
+                    ? `${action_name} ${t('by')} `
+                    : `${t('activated_by')} `}
+                  <Text style={styles.name}>{name || username}</Text>
+                </Text>
+                <Text style={styles.modalMessage}>{message}</Text>
+                <Text style={styles.modalMessage}>
+                  {moment(created_at).format('DD/MM/YYYY HH:mm:ss')}
+                </Text>
+                <TouchableOpacity
+                  style={styles.modalCloseButton}
+                  onPress={handleClose}
+                >
+                  <Text style={styles.modalCloseText}>{t('close')}</Text>
+                </TouchableOpacity>
+              </View>
+            </TouchableOpacity>
+          </Modal>
+        </>
       );
   }
 };

package/src/screens/ActivityLog/__test__/ItemLog.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, TouchableOpacity, Modal } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import ItemLog from '../ItemLog';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { AUTOMATE_TYPE } from '../../../configs/Constants';
+import { AUTOMATE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
@@ -137,3 +137,170 @@ describe('test ItemLog emergency event', () => {
     await _test(props.item.user.email);
   });
 });
+
+describe('test ItemLog Modal', () => {
+  const wrapComponentWithMessage = (message) => (
+    <SCProvider initState={mockSCStore({})}>
+      <ItemLog
+        item={{
+          username: 'testuser',
+          message: message,
+          created_at: '2021-07-02T15:48:24.917932Z',
+        }}
+        type="action"
+        length={2}
+        index={0}
+      />
+    </SCProvider>
+  );
+
+  const getItemLogModal = (tree) => {
+    const modals = tree.root.findAllByType(Modal);
+    return modals.find(
+      (m) =>
+        m.props.accessibilityLabel === AccessibilityLabel.MODAL_BUTTON_POPUP
+    );
+  };
+
+  const getOverlayTouchable = (tree) => {
+    const touchables = tree.root.findAllByType(TouchableOpacity);
+    return touchables.find(
+      (t) => t.props.accessibilityLabel === AccessibilityLabel.TOUCHABLE_OPACITY
+    );
+  };
+
+  it('should open modal when clicking item with message', async () => {
+    let tree;
+    await act(async () => {
+      tree = await create(wrapComponentWithMessage('Test message content'));
+    });
+
+    const modal = getItemLogModal(tree);
+    expect(modal.props.visible).toBe(false);
+
+    const touchables = tree.root.findAllByType(TouchableOpacity);
+    const itemTouchable = touchables[0];
+
+    await act(async () => {
+      itemTouchable.props.onPress();
+    });
+
+    expect(modal.props.visible).toBe(true);
+  });
+
+  it('should display correct message in modal', async () => {
+    let tree;
+    const testMessage = 'Test message content';
+    await act(async () => {
+      tree = await create(wrapComponentWithMessage(testMessage));
+    });
+
+    const touchables = tree.root.findAllByType(TouchableOpacity);
+    await act(async () => {
+      touchables[0].props.onPress();
+    });
+
+    const texts = tree.root.findAllByType(Text);
+    const messageText = texts.find((t) => t.props.children === testMessage);
+    expect(messageText).toBeTruthy();
+  });
+
+  it('should close modal when pressing close button', async () => {
+    let tree;
+    await act(async () => {
+      tree = await create(wrapComponentWithMessage('Test message'));
+    });
+
+    const modal = getItemLogModal(tree);
+    const touchables = tree.root.findAllByType(TouchableOpacity);
+
+    await act(async () => {
+      touchables[0].props.onPress();
+    });
+    expect(modal.props.visible).toBe(true);
+
+    // Re-find touchables after modal is open and find close button by style
+    const updatedTouchables = tree.root.findAllByType(TouchableOpacity);
+    const closeButton = updatedTouchables.find(
+      (t) => t.props.style?.alignItems === 'center'
+    );
+    await act(async () => {
+      closeButton.props.onPress();
+    });
+    expect(modal.props.visible).toBe(false);
+  });
+
+  it('should close modal when pressing overlay', async () => {
+    let tree;
+    await act(async () => {
+      tree = await create(wrapComponentWithMessage('Test message'));
+    });
+
+    const modal = getItemLogModal(tree);
+    const touchables = tree.root.findAllByType(TouchableOpacity);
+
+    await act(async () => {
+      touchables[0].props.onPress();
+    });
+    expect(modal.props.visible).toBe(true);
+
+    // Find overlay by accessibilityLabel
+    const overlayTouchable = getOverlayTouchable(tree);
+    await act(async () => {
+      overlayTouchable.props.onPress();
+    });
+    expect(modal.props.visible).toBe(false);
+  });
+
+  it('should close modal on requestClose (Android back button)', async () => {
+    let tree;
+    await act(async () => {
+      tree = await create(wrapComponentWithMessage('Test message'));
+    });
+
+    const modal = getItemLogModal(tree);
+    const touchables = tree.root.findAllByType(TouchableOpacity);
+
+    await act(async () => {
+      touchables[0].props.onPress();
+    });
+    expect(modal.props.visible).toBe(true);
+
+    await act(async () => {
+      modal.props.onRequestClose();
+    });
+    expect(modal.props.visible).toBe(false);
+  });
+
+  it('should not open modal when item has no message', async () => {
+    let tree;
+    await act(async () => {
+      tree = await create(wrapComponentWithMessage(null));
+    });
+
+    const modal = getItemLogModal(tree);
+    const touchables = tree.root.findAllByType(TouchableOpacity);
+
+    await act(async () => {
+      touchables[0].props.onPress();
+    });
+
+    expect(modal.props.visible).toBe(false);
+  });
+
+  it('should not open modal when message is empty string', async () => {
+    let tree;
+    await act(async () => {
+      tree = await create(wrapComponentWithMessage(''));
+    });
+
+    const modal = getItemLogModal(tree);
+    const touchables = tree.root.findAllByType(TouchableOpacity);
+
+    await act(async () => {
+      touchables[0].props.onPress();
+    });
+
+    expect(modal.props.visible).toBe(false);
+  });
+});

package/src/screens/ActivityLog/index.js

@@ -20,7 +20,7 @@ import { AccessibilityLabel } from '../../configs/Constants';
 
 const keyExtractor = (item) => item.id;
 
-const ActivityLogScreen = ({ route }) => {
+const ActivityLog = ({ route }) => {
   const t = useTranslations();
   const { id, type, share, filterEnabled } = route?.params || {};
   const {
@@ -131,4 +131,4 @@ const ActivityLogScreen = ({ route }) => {
   );
 };
 
-export default ActivityLogScreen;
+export default ActivityLog;

package/src/screens/ActivityLog/styles/itemLogStyles.js

@@ -1,5 +1,6 @@
 import { Colors } from '../../../configs';
 import { StyleSheet } from 'react-native';
+import { colorOpacity } from '../../../utils/Converter/color';
 
 export default StyleSheet.create({
   wrapItem: {
@@ -41,4 +42,38 @@ export default StyleSheet.create({
     lineHeight: 22,
     flexShrink: 1,
   },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: colorOpacity(Colors.Black, 0.5),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    backgroundColor: Colors.White,
+    borderRadius: 12,
+    padding: 20,
+    marginHorizontal: 20,
+    maxWidth: '90%',
+    minWidth: '80%',
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: Colors.Gray9,
+    marginBottom: 12,
+  },
+  modalMessage: {
+    marginBottom: 15,
+  },
+  modalCloseButton: {
+    backgroundColor: Colors.Primary,
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  modalCloseText: {
+    color: Colors.White,
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });

package/src/screens/Device/components/SensorDisplayItem.js

@@ -333,6 +333,7 @@ export const SensorDisplayItem = ({
                   defaultPeriod={configuration?.aggregation_period}
                   color={configuration?.configs[0]?.color}
                   style={styles.powerConsumption}
+                  isWidgetOrder={isWidgetOrder}
                 />
               )}
             </View>

package/src/screens/Device/styles.js

@@ -112,6 +112,6 @@ export default StyleSheet.create({
   },
   powerConsumption: {
     marginHorizontal: 16,
-    marginBottom: 8,
+    marginBottom: 20,
   },
 });

package/src/screens/UnitSummary/components/PowerConsumption/__test__/PowerConsumption.test.js

@@ -2,6 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import renderer, { act, create } from 'react-test-renderer';
 
 import moment from 'moment';
+import { ActivityIndicator } from 'react-native';
 import { Today } from '../../../../../commons';
 import DateTimeRangeChange from '../../../../../commons/DateTimeRangeChange';
 import PowerConsumptionChart from '../../../../../commons/Device/PowerConsumptionChart';
@@ -308,4 +309,35 @@ describe('Test PowerConsumption', () => {
       powerConsumptionChart.findByType(DateTimeRangeChange).props.endTime
     ).toEqual(newEndDate);
   });
+
+  it('should show ActivityIndicator when isFetching is true', async () => {
+    const summaryDetail = {
+      listConfigs: {
+        total_power: 207,
+      },
+    };
+
+    let resolvePromise;
+    const pendingPromise = new Promise((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    mock.onGet(API.VALUE_CONSUME.DISPLAY_HISTORY()).reply(async () => {
+      await pendingPromise;
+      return [200, []];
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(summaryDetail));
+    });
+
+    const instance = tree.root;
+    const activityIndicator = instance.findByType(ActivityIndicator);
+    expect(activityIndicator).toBeDefined();
+    expect(activityIndicator.props.size).toEqual('large');
+
+    await act(async () => {
+      resolvePromise();
+    });
+  });
 });

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

@@ -1348,6 +1348,7 @@ export default {
   not_activated: 'Not activated',
   open: 'Open',
   close: 'Close',
+  detail: 'Detail',
   create_contact_success: 'Create contact success!',
   can_not_login_to_current_ssid: "Can't login to current SSID",
   confirm_password_not_match: 'Confirm password does not match',

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

@@ -1346,6 +1346,7 @@ export default {
   not_activated: 'Không kích hoạt',
   open: 'Mở',
   close: 'Đóng',
+  detail: 'Chi tiết',
   create_contact_success: 'Tạo liên hệ thành công!',
   can_not_login_to_current_ssid: 'Không thể đăng nhập vào SSID hiện tại',
   confirm_password_not_match: 'Mật khẩu xác nhận không trùng khớp',