@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

package/src/commons/UnitSummary/AirQuality/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../configs';
 import { Section } from '../../../commons/index';
@@ -10,8 +10,10 @@ import ConfigHistoryChart from '../ConfigHistoryChart';
 
 import SegmentedRoundDisplay from './SegmentedRoundDisplay';
 import { TESTID } from '../../../configs/Constants';
+import styles from './styles';
 
 const AirQuality = memo(({ summaryDetail }) => {
+  const t = useTranslations();
   const {
     outdoor_pm10_id,
     outdoor_pm2_5_id,
@@ -121,15 +123,8 @@ const AirQuality = memo(({ summaryDetail }) => {
             totalValue={500}
             title={outdoorValues[indexOutdoor].title}
             style={styles.segment}
+            textHeader={t('text_air_quality_index')}
           />
-
-          <TouchableOpacity
-            style={[styles.touchStatus, { backgroundColor: outdoorColor }]}
-          >
-            <Text size={14} color={Colors.White}>
-              {outdoorStatus}
-            </Text>
-          </TouchableOpacity>
           {!!advices && !!advices.length && (
             <View style={styles.boxHealth}>
               <IconOutline name="alert" size={20} style={styles.iconMargin} />
@@ -173,113 +168,3 @@ const AirQuality = memo(({ summaryDetail }) => {
 });
 
 export default AirQuality;
-
-const styles = StyleSheet.create({
-  textIndoor: {
-    color: Colors.Gray9,
-    fontSize: 20,
-    marginBottom: 4,
-  },
-  textDesIndoor: {
-    color: Colors.Gray8,
-    fontSize: 12,
-    marginBottom: 16,
-  },
-  textNotAvailable: {
-    textAlign: 'center',
-  },
-  boxStatus: {
-    borderRadius: 10,
-    height: 80,
-    overflow: 'hidden',
-    flexDirection: 'row',
-    marginBottom: 16,
-  },
-  boxEmotion: {
-    height: 80,
-    width: 80,
-    backgroundColor: Colors.Yellow6,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  textStatus: {
-    fontSize: 16,
-    color: Colors.Gray9,
-    marginRight: 24,
-    textAlign: 'right',
-    maxWidth: 120,
-  },
-  boxTextStatus: {
-    backgroundColor: Colors.Yellow4,
-    flex: 1,
-    alignItems: 'flex-end',
-    justifyContent: 'center',
-  },
-  boxNumber: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 16,
-  },
-  boxHealth: {
-    flexDirection: 'row',
-    marginBottom: 12,
-    alignItems: 'center',
-    marginTop: 10,
-  },
-  boxContentHealth: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  boxDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: Colors.Yellow6,
-    marginRight: 8,
-  },
-  textOutdoor: {
-    color: Colors.Gray9,
-    fontSize: 20,
-    marginBottom: 24,
-    marginTop: 16,
-  },
-  touchOption: {
-    borderWidth: 1,
-    borderColor: Colors.Gray5,
-    paddingHorizontal: 16,
-    paddingVertical: 5,
-    marginHorizontal: 4,
-    borderRadius: 2,
-  },
-  textOption: {
-    alignSelf: 'center',
-    marginBottom: 8,
-  },
-  touchStatus: {
-    borderRadius: 100,
-    paddingHorizontal: 24,
-    alignSelf: 'center',
-    paddingVertical: 3,
-    marginTop: 12,
-  },
-  segment: {
-    marginTop: 36,
-    alignSelf: 'center',
-  },
-  boxOutdoorValues: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  iconMargin: {
-    marginRight: 8,
-  },
-  historyChart: {
-    paddingHorizontal: 16,
-    backgroundColor: Colors.White,
-    borderRadius: 20,
-    borderWidth: 1,
-    borderColor: Colors.Gray4,
-    marginTop: 16,
-  },
-});

package/src/commons/UnitSummary/AirQuality/styles.js

@@ -0,0 +1,112 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  textIndoor: {
+    color: Colors.Gray9,
+    fontSize: 20,
+    marginBottom: 4,
+  },
+  textDesIndoor: {
+    color: Colors.Gray8,
+    fontSize: 12,
+    marginBottom: 16,
+  },
+  textNotAvailable: {
+    textAlign: 'center',
+  },
+  boxStatus: {
+    borderRadius: 10,
+    height: 80,
+    overflow: 'hidden',
+    flexDirection: 'row',
+    marginBottom: 16,
+  },
+  boxEmotion: {
+    height: 80,
+    width: 80,
+    backgroundColor: Colors.Yellow6,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textStatus: {
+    fontSize: 16,
+    color: Colors.Gray9,
+    marginRight: 24,
+    textAlign: 'right',
+    maxWidth: 120,
+  },
+  boxTextStatus: {
+    backgroundColor: Colors.Yellow4,
+    flex: 1,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  boxNumber: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+  },
+  boxHealth: {
+    flexDirection: 'row',
+    marginBottom: 12,
+    alignItems: 'center',
+    marginTop: 36,
+  },
+  boxContentHealth: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  boxDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.Yellow6,
+    marginRight: 8,
+  },
+  textOutdoor: {
+    color: Colors.Gray9,
+    fontSize: 20,
+    marginBottom: 24,
+    marginTop: 16,
+  },
+  touchOption: {
+    borderWidth: 1,
+    borderColor: Colors.Gray5,
+    paddingHorizontal: 16,
+    paddingVertical: 5,
+    marginHorizontal: 4,
+    borderRadius: 2,
+  },
+  textOption: {
+    paddingTop: 4,
+  },
+  touchStatus: {
+    borderRadius: 100,
+    paddingHorizontal: 24,
+    alignSelf: 'center',
+    paddingVertical: 3,
+    marginTop: 12,
+  },
+  segment: {
+    marginTop: 36,
+    alignSelf: 'center',
+  },
+  boxOutdoorValues: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  iconMargin: {
+    marginRight: 8,
+  },
+  historyChart: {
+    paddingHorizontal: 16,
+    backgroundColor: Colors.White,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    marginTop: 16,
+  },
+});

package/src/commons/UnitSummary/TotalPowerConsumption/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../configs';
 import TotalPowerBox from '../TotalPowerBox';
@@ -8,6 +8,7 @@ import Text from '../../Text';
 import { TESTID } from '../../../configs/Constants';
 
 const TotalPowerConsumption = memo(({ time, total }) => {
+  const t = useTranslations();
   return (
     <View style={styles.container}>
       <Text color={Colors.Gray9} size={16} style={styles.txtCurrent}>

package/src/commons/UnitSummary/__test__/TotalPowerConsumption.test.js

@@ -2,19 +2,25 @@ import TotalPowerConsumption from '../TotalPowerConsumption/index';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <TotalPowerConsumption
+      total={{
+        value: 10,
+      }}
+    />
+  </SCProvider>
+);
 
 describe('Test Total Power Consumption', () => {
   let tree;
 
-  test('render Total Power Consumption', () => {
-    act(() => {
-      tree = renderer.create(
-        <TotalPowerConsumption
-          total={{
-            value: 10,
-          }}
-        />
-      );
+  test('render Total Power Consumption', async () => {
+    await act(() => {
+      tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;
     const item = instance.find(

package/src/commons/WheelDateTimePicker/Picker.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import ScrollPicker from 'react-native-wheel-scrollview-picker';
+import Text from '../Text';
+
+import { Colors } from '../../configs';
+import styles from './styles';
+
+const PickerItem = ({ data, isSelected, align }) => {
+  return (
+    <View style={styles.wrapText}>
+      <Text
+        type={isSelected ? 'H2' : 'H3'}
+        color={isSelected ? Colors.Gray9 : Colors.Gray6}
+        bold={isSelected}
+        style={{ textAlign: align }}
+      >
+        {data.text}
+      </Text>
+    </View>
+  );
+};
+
+const Picker = ({
+  dataSource,
+  selectedIndex,
+  onValueChange,
+  keyPrefix,
+  style,
+  align = 'center',
+}) => {
+  return (
+    <View style={style}>
+      <ScrollPicker
+        dataSource={dataSource}
+        selectedIndex={selectedIndex}
+        renderItem={(data, index, isSelected) => (
+          <PickerItem
+            key={`${keyPrefix}-${index}`}
+            data={data}
+            isSelected={isSelected}
+            align={align}
+          />
+        )}
+        onValueChange={onValueChange}
+        wrapperHeight={180}
+        wrapperColor={Colors.Transparent}
+        itemHeight={60}
+        highlightColor={Colors.Transparent}
+        highlightBorderWidth={0}
+      />
+    </View>
+  );
+};
+
+export default Picker;

package/src/commons/WheelDateTimePicker/index.js

@@ -0,0 +1,168 @@
+import React, { memo, useState, useEffect, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import moment from 'moment';
+
+import Picker from './Picker';
+import Text from '../Text';
+import BottomSheet from '../BottomSheet';
+import ViewButtonBottom from '../ViewButtonBottom';
+
+import { getDateData } from '../../utils/Converter/time';
+import styles from './styles';
+import { TESTID } from '../../configs/Constants';
+
+const formatNumber = (number) => {
+  return {
+    text: `${number}`.padStart(2, '0'),
+    value: number,
+  };
+};
+
+const hourData = Array.from({ length: 24 }, (_, i) => formatNumber(i));
+const minuteData = Array.from({ length: 60 }, (_, i) => formatNumber(i));
+
+const WheelDateTimePicker = ({
+  mode,
+  isVisible,
+  defaultValue,
+  onPicked,
+  onCancel,
+  onHide,
+}) => {
+  const t = useTranslations();
+  const [dateSelected, setDateSelected] = useState();
+  const [hourSelected, setHourSelected] = useState();
+  const [minuteSelected, setMinuteSelected] = useState();
+
+  const { dateData, indexInitialDate, indexInitialHour, indexInitialMinute } =
+    useMemo(() => {
+      const date = defaultValue ? moment(defaultValue) : moment().second(0);
+      const maximumDate = moment(date).add(15, 'days');
+      const minimumDate = moment(date).add(-15, 'days');
+      const [dateData, indexDate] =
+        mode === 'datetime'
+          ? getDateData(date, maximumDate, minimumDate)
+          : [[{ value: date }], 0];
+      return {
+        dateData: dateData,
+        indexInitialDate: indexDate,
+        indexInitialHour: date.hour(),
+        indexInitialMinute: date.minute(),
+      };
+    }, [mode, defaultValue]);
+
+  useEffect(() => {
+    setDateSelected(dateData[indexInitialDate].value);
+    setHourSelected(hourData[indexInitialHour].value);
+    setMinuteSelected(minuteData[indexInitialMinute].value);
+  }, [dateData, indexInitialDate, indexInitialHour, indexInitialMinute]);
+
+  const onValueDateChange = useCallback(
+    (data, _) => {
+      setDateSelected(data.value);
+    },
+    [setDateSelected]
+  );
+
+  const onValueHourChange = useCallback(
+    (data, _) => {
+      setHourSelected(data.value);
+    },
+    [setHourSelected]
+  );
+
+  const onValueMinuteChange = useCallback(
+    (data, _) => {
+      setMinuteSelected(data.value);
+    },
+    [setMinuteSelected]
+  );
+
+  const onPickerCancel = useCallback(() => {
+    onCancel && onCancel();
+  }, [onCancel]);
+
+  const onDone = useCallback(() => {
+    const newDateTime = moment(dateSelected);
+    newDateTime.hour(hourSelected);
+    newDateTime.minute(minuteSelected);
+    onPicked && onPicked(newDateTime.valueOf());
+    onCancel && onCancel();
+  }, [dateSelected, hourSelected, minuteSelected, onCancel, onPicked]);
+
+  const title = useMemo(() => {
+    if (mode === 'time') {
+      return t('set_time');
+    }
+    return t('set_date_time');
+  }, [t, mode]);
+
+  return (
+    <BottomSheet
+      isVisible={isVisible}
+      onBackdropPress={onPickerCancel}
+      onHide={onHide}
+      title={title}
+    >
+      {mode === 'time' ? (
+        <View style={styles.container}>
+          <Picker
+            dataSource={hourData}
+            selectedIndex={indexInitialHour}
+            onValueChange={onValueHourChange}
+            keyPrefix="hour"
+            style={styles.picker}
+          />
+          <Text type="H2" bold style={styles.twoDot}>
+            :
+          </Text>
+          <Picker
+            dataSource={minuteData}
+            selectedIndex={indexInitialMinute}
+            onValueChange={onValueMinuteChange}
+            keyPrefix="minute"
+            style={styles.picker}
+          />
+        </View>
+      ) : (
+        <View style={styles.container}>
+          <Picker
+            dataSource={dateData}
+            selectedIndex={indexInitialDate}
+            onValueChange={onValueDateChange}
+            keyPrefix="date"
+            style={styles.picker}
+            align="right"
+          />
+          <Picker
+            dataSource={hourData}
+            selectedIndex={indexInitialHour}
+            onValueChange={onValueHourChange}
+            keyPrefix="hour"
+            style={styles.picker}
+          />
+          <Text type="H2" bold style={styles.twoDot}>
+            :
+          </Text>
+          <Picker
+            dataSource={minuteData}
+            selectedIndex={indexInitialMinute}
+            onValueChange={onValueMinuteChange}
+            keyPrefix="minute"
+            style={styles.picker}
+          />
+        </View>
+      )}
+      <ViewButtonBottom
+        leftTitle={t('cancel')}
+        onLeftClick={onPickerCancel}
+        rightTitle={t('done')}
+        onRightClick={onDone}
+        testIDPrefix={TESTID.WHEEL_DATE_TIME_PICKER}
+      />
+    </BottomSheet>
+  );
+};
+
+export default memo(WheelDateTimePicker);

package/src/commons/WheelDateTimePicker/styles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 180,
+  },
+  picker: {
+    width: 120,
+  },
+  twoDot: {
+    marginTop: -4,
+  },
+  wrapText: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+  },
+});

package/src/commons/index.js

@@ -14,6 +14,7 @@ import MenuActionAddnew from './MenuActionAddnew';
 import MenuActionList from './MenuActionList';
 import RadioCircle from './RadioCircle';
 import { CircleButton } from './CircleButton';
+import HorizontalPicker from './HorizontalPicker';
 
 export {
   ButtonPopup,
@@ -32,4 +33,5 @@ export {
   MenuActionList,
   RadioCircle,
   CircleButton,
+  HorizontalPicker,
 };

package/src/configs/API.js

@@ -24,6 +24,10 @@ const API = {
       SCConfig.apiRoot + `/property_manager/units/${id}/chip_scan/`,
     MANAGE_ACCESS: (id) =>
       SCConfig.apiRoot + `/property_manager/manage_access/${id}/`,
+    AUTOMATE: (id) =>
+      SCConfig.apiRoot + `/property_manager/units/${id}/automate/`,
+    DEVICE_CONTROL: (id) =>
+      SCConfig.apiRoot + `/property_manager/units/${id}/device_control/`,
   },
   SUB_UNIT: {
     REMOVE_SUB_UNIT: (unitId, id) =>
@@ -67,11 +71,36 @@ const API = {
     REMOVE_FROM_FAVOURITES: (unit_id, station_id, id) =>
       SCConfig.apiRoot +
       `/property_manager/${unit_id}/sub_units/${station_id}/devices/${id}/remove_from_favourites/`,
+    DISPLAY_ACTIONS: (id) =>
+      SCConfig.apiRoot + `/property_manager/sensors/${id}/display_actions/`,
+  },
+  SHARED_SENSOR: {
+    ACCESS: (id) =>
+      SCConfig.apiRoot + `/property_manager/shared_sensors/${id}/access/`,
   },
   CONFIG: {
     DISPLAY_HISTORY: () =>
       SCConfig.apiRoot + '/property_manager/configs/display_history/',
   },
+  AUTOMATE: {
+    ACTION_ONE_TAP: (id) =>
+      SCConfig.apiRoot + `/property_manager/automate/${id}/action_one_tap/`,
+    SCRIPT: (id) =>
+      SCConfig.apiRoot + `/property_manager/automate/${id}/script/`,
+    ORDER_SCRIPT_ACTION: (id) =>
+      SCConfig.apiRoot +
+      `/property_manager/automate/${id}/order_script_action/`,
+    DELETE_SCRIPT_ACTION: (automateId, actionId) =>
+      SCConfig.apiRoot +
+      `/property_manager/automate/${automateId}/script_action/${actionId}/`,
+    ADD_SCRIPT_ACTION: (id) =>
+      SCConfig.apiRoot + `/property_manager/automate/${id}/add_script_action/`,
+    CREATE_AUTOMATE: () => SCConfig.apiRoot + '/property_manager/automate/',
+    GET_AUTOMATES: () => SCConfig.apiRoot + '/accounts/automates/',
+    GET_ALL_UNITS: () => SCConfig.apiRoot + '/property_manager/units/all_unit/',
+    GET_SENSOR_CONFIG: (id) =>
+      SCConfig.apiRoot + `/property_manager/sensors/${id}/display_configs/`,
+  },
   GOOGLE_HOME: {
     CHECK_SEND_EMAIL: () =>
       SCConfig.apiRoot + '/connection_manager/googlehome/check_send_email/',

package/src/configs/Colors.js

@@ -129,4 +129,5 @@ export const Colors = {
   BlackTransparent6: 'rgba(0, 0, 0, 0.6)',
   BlackTransparent16: 'rgba(0, 0, 0, 0.16)',
   WhiteTransparent8: 'rgba(255, 255, 255, 0.8)',
+  BlueTransparent5: 'rgba(230, 247, 255, 0.5)',
 };