@eohjsc/react-native-smart-city 0.2.19 → 0.2.23

package/src/commons/Sharing/MemberList.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 
@@ -12,6 +12,8 @@ const MemberList = ({
   currentUserId, //user is using app
   onPressRemove,
 }) => {
+  const t = useTranslations();
+
   return (
     <View style={styles.box}>
       {!!dataMember.length &&

package/src/commons/Sharing/RowMember.js

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { StyleSheet, 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 Text from '../../commons/Text';
@@ -19,6 +19,7 @@ const arrColor = [
 ];
 const RowMember = memo(
   ({ member, index, ownerId, currentUserId, onPressRemove }) => {
+    const t = useTranslations();
     const canRemoveMember = useMemo(
       () => ownerId === currentUserId && member.id !== ownerId,
       [currentUserId, member.id, ownerId]
@@ -30,7 +31,7 @@ const RowMember = memo(
           : member.id === currentUserId
           ? [t('me'), Colors.Gray6]
           : ['', ''],
-      [currentUserId, member.id, ownerId]
+      [currentUserId, member.id, ownerId, t]
     );
     const paddingBottom = role ? 16 : 23;
 

package/src/commons/Sharing/StationDevicePermissions.js

@@ -1,7 +1,7 @@
 import React, { memo, useState, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity } 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 Text from '../../commons/Text';
 import SensorIcon from '../../../assets/images/Device/sensor.svg';
@@ -14,6 +14,7 @@ import DoorInactive from '../../../assets/images/Device/door-inactive.svg';
 import DevicePermissionsCheckbox from './DevicePermissionsCheckbox';
 
 const StationDevicePermissions = memo(({ dataStation, onselectSensor }) => {
+  const t = useTranslations();
   const [listChosen, setListChosen] = useState({}); // { sensorId : indexConfigChoosen , ...}
   const [expandedIndex, setExpandedIndex] = useState(-1);
 

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -0,0 +1,86 @@
+import React, { memo, useCallback } from 'react';
+import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import moment from 'moment';
+import Text from '../../Text';
+import { API, Colors } from '../../../configs';
+import OneTap from '../../../../assets/images/OneTap.svg';
+import CheckCircle from '../../../../assets/images/CheckCircle.svg';
+import FImage from '../../FImage';
+import { timeDifference } from '../../../utils/Converter/time';
+import styles from './ItemOneTapStyles.js';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import { axiosPost } from '../../../utils/Apis/axios';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { useNavigation } from '@react-navigation/core';
+import Routes from '../../../utils/Route';
+
+const ItemOneTap = memo(({ automate }) => {
+  const { navigate } = useNavigation();
+  const { id, script, activate_at } = automate;
+
+  const t = useTranslations();
+  const goToDetail = useCallback(() => {
+    navigate(Routes.ScriptDetail, { id, name: script?.name });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleScriptAction = useCallback(async () => {
+    const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
+    if (success) {
+      ToastBottomHelper.success(t('Activated successfully.'));
+    } else {
+      ToastBottomHelper.error(t('Activation failed.'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  const displayIcon = () => {
+    const iconKit = script?.icon_kit;
+    return iconKit ? (
+      <FImage source={{ uri: iconKit }} style={styles.iconSensor} />
+    ) : (
+      <OneTap />
+    );
+  };
+  const activateAt = activate_at
+    ? timeDifference(new Date(), moment(activate_at), true)
+    : null;
+  return (
+    <TouchableWithoutFeedback onPress={goToDetail}>
+      <View style={styles.container}>
+        <View style={styles.boxIcon}>
+          {displayIcon()}
+          <TouchableOpacity onPress={handleScriptAction}>
+            <CheckCircle />
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity onPress={goToDetail}>
+          <Text
+            numberOfLines={1}
+            semibold
+            size={14}
+            color={Colors.Gray9}
+            type="Body"
+          >
+            {script?.name}
+          </Text>
+          <View style={styles.descriptionContainer}>
+            <Text
+              numberOfLines={1}
+              semibold
+              size={12}
+              color={Colors.Gray8}
+              type="Label"
+            >
+              {activateAt && t('activated_time', { time: activateAt })}
+            </Text>
+            <IconOutline name="right" size={12} />
+          </View>
+        </TouchableOpacity>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+});
+
+export default ItemOneTap;

package/src/commons/SubUnit/OneTap/ItemOneTapStyles.js

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+
+const marginItem = 12;
+const marginHorizontal = 16;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
+const heightItem = (widthItem / 166) * 106;
+
+export default StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 4,
+    width: widthItem,
+    height: heightItem,
+    backgroundColor: Colors.White,
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  boxIcon: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  descriptionContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  iconSensor: {
+    width: 40,
+    height: 40,
+    resizeMode: 'contain',
+  },
+});

package/src/commons/SubUnit/OneTap/OneTapStyles.js

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Device } from '../../../configs';
+
+export default StyleSheet.create({
+  boxImage: {
+    flexDirection: 'row',
+    marginTop: 8,
+    marginBottom: 8,
+    overflow: 'hidden',
+    width: Device.screenWidth - 32,
+    alignSelf: 'center',
+  },
+  image: {
+    width: '100%',
+    height: 160,
+  },
+  boxDevices: {
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    marginTop: 16,
+    justifyContent: 'space-between',
+  },
+  noShadow: {
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  viewAll: {
+    color: Colors.Orange,
+  },
+  UnitsHeading: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingBottom: 3,
+  },
+});

package/src/commons/SubUnit/OneTap/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View } from 'react-native';
+import styles from './OneTapStyles.js';
+import { Section } from '../..';
+
+import ItemAddNew from '../../Device/ItemAddNew';
+import ItemOneTap from './ItemOneTap';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { useNavigation } from '@react-navigation/native';
+import Routes from '../../../utils/Route/index.js';
+
+const SubUnitOneTap = ({ automates }) => {
+  const t = useTranslations();
+  const navigation = useNavigation();
+  const handleOnAddNew = () => {
+    navigation.navigate(Routes.AddNewOneTap);
+  };
+  return (
+    <Section style={styles.noShadow}>
+      <View style={styles.boxDevices}>
+        <ItemAddNew title={t('add_new')} onAddNew={handleOnAddNew} />
+        {!!automates.length &&
+          automates.map((item) => <ItemOneTap automate={item} />)}
+      </View>
+    </Section>
+  );
+};
+
+export default SubUnitOneTap;

package/src/commons/SubUnit/ShortDetail.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Images, Device } from '../../configs';
 import { TESTID } from '../../configs/Constants';
@@ -19,6 +19,7 @@ const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
 );
 
 const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
+  const t = useTranslations();
   const { navigate } = useNavigation();
   const renderCamera = () => {
     if (station?.camera) {
@@ -32,6 +33,7 @@ const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
         >
           <MediaPlayer
             uri={station.camera.uri}
+            previewUri={station.camera.preview_uri}
             thumbnail={{
               uri: station.background,
             }}

package/src/commons/Today/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import moment from 'moment';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import i18n from 'i18n-js';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 
 const TodayComponent = ({ style }) => {
+  const t = useTranslations();
   const getCurrentDate = () => {
     const currentLanguage = i18n.currentLocale();
     moment.locale(currentLanguage);

package/src/commons/Unit/SharedUnit.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useCallback } from 'react';
 import { View, Image, TouchableOpacity } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { IconOutline, IconFill } from '@ant-design/icons-react-native';
 
 import { API, Colors, Images } from '../../configs';
@@ -18,6 +18,7 @@ const SharedUnit = ({
   index,
   isOptions = true,
 }) => {
+  const t = useTranslations();
   const { unit } = item;
   const goToDetail = useCallback(() => {
     navigation.navigate(Routes.UnitStack, {

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

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { View, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 import Svg, { G, Text, Path } from 'react-native-svg';
-import { t } from 'i18n-js';
 
 import { Colors } from '../../../../configs';
 import TextCustom from '../../../../commons/Text';
@@ -255,7 +254,7 @@ SegmentedRoundDisplay.defaultProps = {
   radius: 90,
   pos: [0, 100, 200, 300, 400, 500],
   boxTitle: false,
-  textHeader: t('text_air_quality_index'),
+  textHeader: '',
   initIndex: 0,
 };
 

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/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;