@eohjsc/react-native-smart-city 0.2.59 → 0.2.60

package/assets/images/Map/MarkerGeolocation.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="39" viewBox="0 0 24 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8.21875C11.0656 8.21875 10.1875 8.58125 9.525 9.24375C9.19945 9.56837 8.94129 9.95415 8.76538 10.3789C8.58947 10.8037 8.49928 11.259 8.5 11.7188C8.5 12.6531 8.86562 13.5312 9.525 14.1938C9.84962 14.5193 10.2354 14.7775 10.6602 14.9534C11.0849 15.1293 11.5403 15.2195 12 15.2188C12.9344 15.2188 13.8125 14.8531 14.475 14.1938C15.1375 13.5312 15.5 12.6531 15.5 11.7188C15.5 10.7844 15.1375 9.90625 14.475 9.24375C13.8125 8.58125 12.9344 8.21875 12 8.21875ZM22.7062 7.03438C22.1179 5.67775 21.2697 4.44944 20.2094 3.41875C19.1456 2.37875 17.8915 1.55331 16.5156 0.9875C15.0844 0.39375 13.5656 0.09375 12 0.09375C10.4344 0.09375 8.91562 0.39375 7.48438 0.984375C6.1 1.55625 4.85938 2.375 3.79063 3.41563C2.73101 4.44689 1.88286 5.67506 1.29375 7.03125C0.684375 8.4375 0.375 9.93125 0.375 11.4688C0.375 13.675 0.903125 15.8719 1.94063 17.9906C2.775 19.6938 3.94063 21.3531 5.40938 22.9312C7.91875 25.625 10.55 27.2719 11.2969 27.7125C11.5089 27.8377 11.7507 27.9036 11.9969 27.9031C12.2406 27.9031 12.4812 27.8406 12.6969 27.7125C13.4437 27.2719 16.075 25.625 18.5844 22.9312C20.0531 21.3562 21.2188 19.6938 22.0531 17.9906C23.0969 15.875 23.625 13.6812 23.625 11.4719C23.625 9.93437 23.3156 8.44063 22.7062 7.03438ZM12 17.2188C8.9625 17.2188 6.5 14.7563 6.5 11.7188C6.5 8.68125 8.9625 6.21875 12 6.21875C15.0375 6.21875 17.5 8.68125 17.5 11.7188C17.5 14.7563 15.0375 17.2188 12 17.2188Z" fill="#1890FF"/>
+<path d="M16.6666 30.2735L15.7266 29.3335L12 33.0602L8.27331 29.3335L7.33331 30.2735L11.06 34.0002L7.33331 37.7268L8.27331 38.6668L12 34.9402L15.7266 38.6668L16.6666 37.7268L12.94 34.0002L16.6666 30.2735Z" fill="#262626"/>
+</svg>

package/package.json

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

package/src/commons/DateTimeRangeChange/DateTimeButton.js

@@ -7,7 +7,7 @@ import Text from '../Text';
 import { Colors } from '../../configs';
 
 const DateTimeButton = memo(({ onPress, time, date, formatType, style }) => {
-  let format = 'DD.MM.YY hh:mm';
+  let format = 'DD.MM.YY HH:mm';
   if (formatType === 'date') {
     format = 'DD.MM.YY';
   }

package/src/commons/Device/HistoryChart.js

@@ -11,7 +11,7 @@ import DateTimeRangeChange from '../DateTimeRangeChange';
 import HorizontalBarChart from './HorizontalBarChart';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import LinearChart from './LinearChart';
-import ThreeButtonHistory from '../ThreeButtonHistory';
+import FourButtonFilterHistory from '../FourButtonFilterHistory';
 import { formatMoney } from '../../utils/Utils';
 
 export const dateTimeType = {
@@ -33,6 +33,7 @@ const HistoryChart = memo(
     endDate,
     setEndDate,
     setStartDate,
+    groupBy,
     setGroupBy,
     configuration,
   }) => {
@@ -179,25 +180,20 @@ const HistoryChart = memo(
               {t('history')}
             </Text>
             {configuration.type === 'horizontal_bar_chart' && (
-              <ThreeButtonHistory
-                setStartDate={setStartDate}
-                setEndDate={setEndDate}
+              <FourButtonFilterHistory
+                groupBy={groupBy}
                 setGroupBy={setGroupBy}
-                startDate={startDate}
-                endDate={endDate}
               />
             )}
           </View>
-          {configuration.type !== 'horizontal_bar_chart' && (
-            <DateTimeRangeChange
-              startTime={eventPicker.startTime}
-              onStart={onStart}
-              onEnd={onEnd}
-              endTime={eventPicker.endTime}
-              date={dateNow}
-              formatType={formatType}
-            />
-          )}
+          <DateTimeRangeChange
+            startTime={eventPicker.startTime}
+            onStart={onStart}
+            onEnd={onEnd}
+            endTime={eventPicker.endTime}
+            date={dateNow}
+            formatType={formatType}
+          />
         </View>
         {configuration.config === 'power_consumption' && (
           <View style={styles.wrapCalculateCost}>

package/src/commons/Device/HorizontalBarChart.js

@@ -1,34 +1,18 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import HighchartsReactNative from '@highcharts/highcharts-react-native/src/HighchartsReactNative';
+import { isEmpty } from 'lodash';
 
 import { Colors } from '../../configs';
 import { getMaxValueIndex } from '../../utils/chartHelper/getMaxValueIndex';
 
 const HorizontalBarChart = memo(({ datas, config }) => {
-  const dataY = datas[0].data.map((item, index) => {
-    return {
-      color: index % 2 === 0 ? Colors.Primary + '20' : Colors.Primary + '16',
-      y: item.y,
-    };
-  });
-  const dataX = datas[0].data.map((item) => item.x);
-  const heightChart = useMemo(() => {
-    return dataX.length > 1 ? dataX.length * 55 : 90;
-  }, [dataX]);
-  const maxY = getMaxValueIndex(dataY);
-  dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });
-
-  // eslint-disable-next-line no-unused-vars
-  const chartOptions = {
+  const [chartOptions, setChartOptions] = useState({
     chart: {
       type: 'bar',
       style: {
         fontFamily: 'Arial',
       },
-      scrollablePlotArea: {
-        minHeight: dataY.length * 32,
-      },
     },
     credits: {
       enabled: false,
@@ -37,7 +21,6 @@ const HorizontalBarChart = memo(({ datas, config }) => {
       text: '',
     },
     xAxis: {
-      categories: dataX,
       title: {
         text: null,
       },
@@ -45,14 +28,6 @@ const HorizontalBarChart = memo(({ datas, config }) => {
         enabled: true,
       },
     },
-    series: [
-      {
-        marker: { enabled: true },
-        color: Colors.Primary + '50',
-        name: JSON.stringify(config),
-        data: dataY,
-      },
-    ],
     time: {
       timezoneOffset: -7 * 60,
     },
@@ -85,7 +60,7 @@ const HorizontalBarChart = memo(({ datas, config }) => {
             const costStyle = valueStyle + 'font-weight:bold;';
 
             let label = `<span style="${valueStyle}">` + `${this.y}${unit}`;
-            if (price === null || isNaN(price)) {
+            if (price === '' || price === null || isNaN(price)) {
               return label + '</span>';
             }
 
@@ -119,7 +94,48 @@ const HorizontalBarChart = memo(({ datas, config }) => {
         shadow: false,
       },
     },
-  };
+  });
+
+  const heightChart = useMemo(() => {
+    const dataX = datas[0].data.map((item) => item.x);
+    return dataX.length > 1 ? dataX.length * 55 : 90;
+  }, [datas]);
+
+  useEffect(() => {
+    const dataY = datas[0].data.map((item, index) => {
+      return {
+        color: index % 2 === 0 ? Colors.Primary + '20' : Colors.Primary + '16',
+        y: item.y,
+      };
+    });
+    const dataX = datas[0].data.map((item) => item.x);
+    const maxY = getMaxValueIndex(dataY);
+    if (!isEmpty(maxY.max)) {
+      dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });
+    }
+
+    setChartOptions((options) => ({
+      ...options,
+      chart: {
+        ...options.chart,
+        scrollablePlotArea: {
+          minHeight: dataY.length * 32,
+        },
+      },
+      xAxis: {
+        ...options.xAxis,
+        categories: dataX,
+      },
+      series: [
+        {
+          marker: { enabled: true },
+          color: Colors.Primary + '50',
+          name: JSON.stringify(config),
+          data: dataY,
+        },
+      ],
+    }));
+  }, [datas, config]);
 
   return (
     <View style={[styles.container, { height: heightChart }]}>

package/src/commons/FourButtonFilterHistory/__test__/FourButtonFilterHistory.test.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import FourButtonFilterHistory from '../index';
+import { TouchableOpacity } from 'react-native';
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <FourButtonFilterHistory {...props} />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+test('test', async () => {
+  const mockSetGroupBy = jest.fn();
+  let tree;
+  let props = {
+    groupBy: 'date',
+    setGroupBy: mockSetGroupBy,
+  };
+
+  await act(async () => {
+    tree = await create(wrapComponent(props));
+  });
+  const instance = tree.root;
+  const buttons = instance.findAllByType(TouchableOpacity);
+  expect(buttons).toHaveLength(4);
+
+  const clickButton = async (index, data) => {
+    mockSetGroupBy.mockClear();
+    await act(async () => {
+      await buttons[index].props.onPress();
+    });
+    expect(mockSetGroupBy).toBeCalledWith(data);
+  };
+
+  await clickButton(0, 'date');
+  await clickButton(1, 'week');
+  await clickButton(2, 'month');
+  await clickButton(3, 'year');
+});

package/src/commons/FourButtonFilterHistory/index.js

@@ -0,0 +1,72 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import styles from './styles';
+
+const FourButtonFilterHistory = memo(({ groupBy, setGroupBy }) => {
+  const listItem = useMemo(
+    () => [
+      {
+        title: 'D',
+        data: 'date',
+      },
+
+      {
+        title: 'W',
+        data: 'week',
+      },
+
+      {
+        title: 'M',
+        data: 'month',
+      },
+
+      {
+        title: 'Y',
+        data: 'year',
+      },
+    ],
+    []
+  );
+
+  const ItemButton = memo(({ title, onPress, isSelected }) => {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        style={[styles.button, isSelected && styles.selectedButton]}
+      >
+        <View>
+          <Text bold color={isSelected && Colors.Primary}>
+            {title}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }, []);
+
+  const onPressButton = useCallback(
+    (data) => () => {
+      setGroupBy(data);
+    },
+    [setGroupBy]
+  );
+
+  return (
+    <View style={styles.row}>
+      {listItem &&
+        listItem.map((item, index) => {
+          return (
+            <ItemButton
+              key={index}
+              title={item.title}
+              onPress={onPressButton(item.data)}
+              isSelected={item.data === groupBy}
+            />
+          );
+        })}
+    </View>
+  );
+});
+
+export default FourButtonFilterHistory;

package/src/commons/FourButtonFilterHistory/styles.js

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.Gray4,
+    borderRadius: 5,
+    padding: 2,
+  },
+  button: {
+    width: 31,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 5,
+  },
+  selectedButton: {
+    backgroundColor: Colors.White,
+  },
+});

package/src/commons/MediaPlayerDetail/Styles/MediaPlayerDetailStyles.js

@@ -69,7 +69,17 @@ export default StyleSheet.create({
     bottom: 0,
   },
   firstOpenCamera: {
-    zIndex: -10,
+    zIndex: -9999,
     position: 'absolute',
+    width: 1,
+    height: 1,
+  },
+  loading: {
+    position: 'absolute',
+    zIndex: 10,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 });

package/src/commons/MediaPlayerDetail/index.js

@@ -13,6 +13,7 @@ import {
   Text,
   TouchableOpacity,
   Platform,
+  ActivityIndicator,
 } from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -46,9 +47,10 @@ const MediaPlayerDetail = ({
   );
   const t = useTranslations();
   const [paused, setPaused] = useState(isPaused);
+
   const onTapPause = useCallback(() => {
-    setPaused(false);
-  }, []);
+    !isFirstOpenCamera && setPaused(false);
+  }, [isFirstOpenCamera]);
 
   const onTapGoDetail = useCallback(() => {
     if (!paused) {
@@ -139,7 +141,7 @@ const MediaPlayerDetail = ({
       const to = setTimeout(() => {
         setAction(Action.IS_FIRST_OPEN_CAMERA, false);
         clearTimeout(to);
-      }, 500);
+      }, 1000);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFirstOpenCamera]);
@@ -147,7 +149,14 @@ const MediaPlayerDetail = ({
   const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
   return (
     <View style={[styles.wrap, wrapStyles]}>
-      {isFirstOpenCamera && Platform.OS === 'ios' && renderCamera}
+      {isFirstOpenCamera && Platform.OS === 'ios' && (
+        <>
+          {renderCamera}
+          <View style={styles.loading}>
+            <ActivityIndicator size={'small'} color={Colors.Primary} />
+          </View>
+        </>
+      )}
       <View style={[styles.loadingWrap]}>
         <Text style={styles.loadingText}>{t('loading')}</Text>
       </View>
@@ -172,7 +181,7 @@ const MediaPlayerDetail = ({
             />
           </View>
         ) : (
-          renderCamera
+          !isFirstOpenCamera && renderCamera
         )}
 
         <View style={styles.buttonView}>

package/src/commons/UnitSummary/ConfigHistoryChart.js

@@ -45,7 +45,8 @@ const ConfigHistoryChart = memo(({ configs }) => {
       }
     };
     fetchData();
-  }, [startDate, endDate, configs]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startDate, endDate]);
 
   if (!chartData.length) {
     return false;

package/src/configs/API.js

@@ -82,6 +82,9 @@ const API = {
       SCConfig.apiRoot + `/property_manager/sensors/${id}/`,
     REMOVE_SENSOR: (id) =>
       SCConfig.apiRoot + `/property_manager/sensors/${id}/`,
+    CHANGE_SUB_UNIT: (unit_id, station_id, id) =>
+      SCConfig.apiRoot +
+      `/property_manager/${unit_id}/sub_units/${station_id}/devices/${id}/change_sub_unit/`,
   },
   SHARED_SENSOR: {
     ACCESS: (id) =>

package/src/configs/Constants.js

@@ -573,9 +573,15 @@ export const TESTID = {
   HISTORY_BUTTON: 'HISTORY_BUTTON',
   HISTORY_CALENDAR: 'HISTORY_CALENDAR',
 
+  // DropDownPicker
+  DROP_DOWN_PICKER_ITEM: 'DROP_DOWN_PICKER_ITEM',
+
   // SelectAddress
   BUTTON_YOUR_LOCATION: 'BUTTON_YOUR_LOCATION',
   BUTTON_CHOOSE_ON_MAP: 'BUTTON_CHOOSE_ON_MAP',
+
+  // MoveToAnotherSubUnit
+  ROW_SUB_UNIT: 'ROW_SUB_UNIT',
 };
 
 export const NOTIFICATION_TYPES = {

package/src/navigations/UnitStack.js

@@ -31,6 +31,7 @@ import AddNewAutoSmart from '../screens/AddNewAutoSmart';
 import PlaybackCamera from '../screens/PlayBackCamera';
 import AllCamera from '../screens/AllCamera';
 import ManageAccessScreen from '../screens/ManageAccess';
+import MoveToAnotherSubUnit from '../screens/MoveToAnotherSubUnit';
 import GuestInfo from '../screens/GuestInfo';
 import ScriptDetail from '../screens/ScriptDetail';
 import EditActionsList from '../screens/EditActionsList';
@@ -41,6 +42,7 @@ import SelectAction from '../screens/AddNewAction/SelectAction';
 import EditSubUnit from '../screens/SubUnit/EditSubUnit';
 import SetUpSensor from '../screens/AddNewAction/SetupSensor';
 import EditDevice from '../screens/Device/EditDevice/index';
+import EmergencySetting from '../screens/EmergencySetting';
 
 const Stack = createStackNavigator();
 
@@ -229,6 +231,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.MoveToAnotherSubUnit}
+        component={MoveToAnotherSubUnit}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name={Route.GuestInfo}
         component={GuestInfo}
@@ -291,6 +300,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.EmergencySetting}
+        component={EmergencySetting}
+        options={{
+          headerShown: false,
+        }}
+      />
     </Stack.Navigator>
   );
 });

package/src/screens/ActivityLog/ItemLog.js

@@ -29,14 +29,14 @@ const DetailLog = ({ item }) => {
           {item.action_name
             ? `${item.action_name} ${t('by')} `
             : `${t('activated_by')} `}
-          <Text style={styles.name}>{item.name || item.params?.username}</Text>
+          <Text style={styles.name}>{item.name || item.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.params?.username}</Text>
+          <Text style={styles.name}>{item.name || item.username}</Text>
         </Text>
       );
     default:
@@ -45,7 +45,7 @@ const DetailLog = ({ item }) => {
           {item.action_name
             ? `${item.action_name} ${t('by')} `
             : `${t('activated_by')} `}
-          <Text style={styles.name}>{item.name || item.params?.username}</Text>
+          <Text style={styles.name}>{item.name || item.username}</Text>
         </Text>
       );
   }

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

@@ -46,6 +46,7 @@ test('test ItemLog one tap', () => {
       params: {
         username: 'username',
       },
+      username: 'username',
       created_at: '2021-07-02T15:48:24.917932Z',
     },
     type: `automate.${AUTOMATE_TYPE.ONE_TAP}`,
@@ -68,6 +69,7 @@ test('test ItemLog script update', () => {
       params: {
         username: 'username',
       },
+      username: 'username',
       created_at: '2021-07-02T15:48:24.917932Z',
     },
     type: 'automate',
@@ -79,7 +81,7 @@ test('test ItemLog script update', () => {
   });
   const instance = tree.root;
   const texts = instance.findAllByType(Text);
-  expect(texts[2].props.children).toBe(props.item.params.username);
+  expect(texts[2].props.children).toBe(props.item.username);
 });
 
 test('test ItemLog no content_code', () => {
@@ -91,6 +93,7 @@ test('test ItemLog no content_code', () => {
       },
       created_at: '2021-07-02T15:48:24.917932Z',
     },
+    username: 'username',
     type: 'action',
     length: 2,
     index: 1,
@@ -100,7 +103,7 @@ test('test ItemLog no content_code', () => {
   });
   const instance = tree.root;
   const texts = instance.findAllByType(Text);
-  expect(texts[2].props.children).toBe(props.item.params.username);
+  expect(texts[2].props.children).toBe(props.item.username);
 });
 
 describe('test ItemLog emergency event', () => {

package/src/screens/ActivityLog/hooks/index.js

@@ -12,6 +12,7 @@ const apiMaps = {
     url: () => API.SENSOR.ACTIVITY_LOG(),
     params: (id) => ({ id: id }),
     standardizeData: getDataForList,
+    memberUrl: (id) => API.SHARE.UNITS_MEMBERS(id),
   },
   ['emergency_event']: {
     url: () => API.EMERGENCY_BUTTON.ACTIVITY_LOG(),

package/src/screens/ActivityLog/index.js

@@ -66,7 +66,6 @@ const ActivityLogScreen = ({ route }) => {
       {getTitleFromTime(data[0].created_at, new Date())}
     </Text>
   );
-
   useEffect(() => {
     onRefresh();
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/screens/AddLocationMaps/index.js

@@ -24,6 +24,8 @@ const initialRegion = {
 const DEFAULT_LATITUDE = 10.7974046; // EoH center
 const DEFAULT_LONGITUDE = 106.7035663;
 
+navigator.geolocation = require('@react-native-community/geolocation');
+
 const AddLocationMaps = memo(() => {
   const t = useTranslations();
   const { goBack, navigate } = useNavigation();
@@ -135,7 +137,7 @@ const AddLocationMaps = memo(() => {
         }
       },
       (error) => {},
-      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
+      {}
     );
   }, []);
 
@@ -231,7 +233,7 @@ const AddLocationMaps = memo(() => {
                     latitude: searchedLocation.latitude,
                     longitude: searchedLocation.longitude,
                   }}
-                  radius={1000}
+                  radius={300}
                   fillColor={Colors.BlueTransparent5}
                   strokeColor={Colors.Blue10}
                 />

package/src/screens/Device/__test__/detail.test.js

@@ -812,9 +812,10 @@ describe('test DeviceDetail', () => {
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.ActivityLog, {
       id: route.params.sensor.id,
       type: 'action',
+      share: route.params.unit,
       filterEnabled: {
-        date: false,
-        user: false,
+        date: true,
+        user: Boolean(route.params.unit.id),
       },
     });
   });