@eohjsc/react-native-smart-city 0.4.84 → 0.4.86

package/assets/images/Notify.svg

@@ -0,0 +1,9 @@
+<svg width="28" height="33" viewBox="0 0 28 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0003 32.6666C15.8337 32.6666 17.3337 31.1666 17.3337 29.3333H10.667C10.667 31.1666 12.1503 32.6666 14.0003 32.6666ZM24.0003 22.6666V14.3333C24.0003 9.21663 21.267 4.93329 16.5003 3.79996V2.66663C16.5003 1.28329 15.3837 0.166626 14.0003 0.166626C12.617 0.166626 11.5003 1.28329 11.5003 2.66663V3.79996C6.71699 4.93329 4.00033 9.19996 4.00033 14.3333V22.6666L0.666992 26V27.6666H27.3337V26L24.0003 22.6666Z" fill="url(#paint0_linear_2168_1847)"/>
+<defs>
+<linearGradient id="paint0_linear_2168_1847" x1="0.666992" y1="0.166626" x2="32.5129" y2="26.3255" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B6B9F"/>
+<stop offset="1" stop-color="#D5FFCB"/>
+</linearGradient>
+</defs>
+</svg>

package/package.json

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

package/src/commons/Automate/ItemAutomate.js

@@ -15,6 +15,7 @@ const ItemAutomate = ({
   index,
   setSelectedIndex,
   onPress,
+  enableScript = true,
 }) => {
   const t = useTranslations();
   const item = AUTOMATES[automate?.type];
@@ -57,7 +58,11 @@ const ItemAutomate = ({
       <View style={styles.row}>
         <View style={styles.wrapIcon}>{!!Icon && <Icon />}</View>
         <View style={styles.wrapTitle}>
-          <Text type="H4" bold>
+          <Text
+            type="H4"
+            bold
+            color={enableScript ? Colors.Black : Colors.Gray7}
+          >
             {t(item?.title)}
           </Text>
           <Text type="Label" color={Colors.Gray8} numberOfLines={1}>

package/src/commons/Device/PMSensor/PMSensorIndicator.js

@@ -4,25 +4,32 @@ import { FlatList } from 'react-native';
 import QualityIndicatorItem from '../WaterQualitySensor/QualityIndicatorsItem';
 import styles from './PMSensorIndicatorStyles';
 import { keyExtractor, roundNumber } from '../../../utils/Utils';
+import { useConfigGlobalState } from '../../../iot/states';
 
 const PMSensorIndicator = memo(({ data = [], style, isWidgetOrder }) => {
+  const [configValues] = useConfigGlobalState('configValues');
+
   const renderItem = useCallback(
     ({ item }) => {
-      const getValue = ['', null, undefined, NaN].includes(item?.value)
-        ? '--'
-        : roundNumber(item?.value);
+      const { id, color, title, standard, evaluate, unit } = item || {};
+      const getValue =
+        configValues?.[id]?.value === undefined
+          ? '--'
+          : `${roundNumber(configValues[id].value)}`;
+
       return (
         <QualityIndicatorItem
-          color={item.color}
-          standard={item.standard}
+          key={id?.toString()}
+          color={color}
+          standard={title || standard}
           value={getValue}
-          evaluate={item.evaluate}
-          measure={item.unit}
+          evaluate={evaluate}
+          measure={unit}
           style={style}
         />
       );
     },
-    [style]
+    [configValues, style]
   );
 
   const isScrollMode = data.length > 3;

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

@@ -2,25 +2,33 @@ import React, { useCallback } from 'react';
 import { View, StyleSheet, FlatList } from 'react-native';
 
 import QualityIndicatorItem from './QualityIndicatorsItem';
+import { useConfigGlobalState } from '../../../iot/states';
 
 //using for Water quality sensor , power meter SENSOR, INdoor air sensor
 const ListQualityIndicator = ({ data, style }) => {
-  const renderItem = useCallback(({ item }) => {
-    const getValue = ['', null, undefined, NaN].includes(item?.value)
-      ? '--'
-      : item?.value;
+  const [configValues] = useConfigGlobalState('configValues');
+  const renderItem = useCallback(
+    ({ item }) => {
+      const { id, measure, color, title, standard, evaluate, unit } =
+        item || {};
+      const getValue =
+        configValues?.[id]?.value === undefined
+          ? '--'
+          : `${configValues[id].value} ${measure}`;
 
-    return (
-      <QualityIndicatorItem
-        key={item.id.toString()}
-        color={item.color}
-        standard={item.standard}
-        value={getValue}
-        evaluate={item.evaluate}
-        measure={item.unit}
-      />
-    );
-  }, []);
+      return (
+        <QualityIndicatorItem
+          key={id?.toString()}
+          color={color}
+          standard={title || standard}
+          value={getValue}
+          evaluate={evaluate}
+          measure={unit}
+        />
+      );
+    },
+    [configValues]
+  );
   return (
     <View style={styles.standard}>
       <FlatList

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

@@ -22,14 +22,14 @@ const QualityIndicatorItem = memo(
       backgroundColor: color,
     };
     const navigation = useNavigation();
+    const measureText =
+      measure && measure.length ? `${value} ${measure}` : `${value}`;
 
     return (
       <View style={[styles.container, style, color && styles.containerPadding]}>
         <View style={[styles.line, styleColor]} />
         <View style={styles.rowFlex}>
-          <Text size={14} color={Colors.Gray8} style={styles.txtMeasure}>
-            {standard}
-          </Text>
+          <Text style={styles.txtMeasure}>{standard}</Text>
           {type === 'machine_status' && (
             <TouchableOpacity
               onPress={() => navigation.navigate(descriptionScreen)}
@@ -43,13 +43,9 @@ const QualityIndicatorItem = memo(
             </TouchableOpacity>
           )}
         </View>
-        <Text size={24} color={Colors.Gray9} style={styles.txtValue}>
-          {measure && measure.length ? `${value} ${measure}` : `${value}`}
-        </Text>
+        <Text style={styles.txtValue}>{measureText}</Text>
         {!!evaluate?.color && (
-          <Text size={12} color={evaluate.color} style={styles.txtEvaluate}>
-            {evaluate.text}
-          </Text>
+          <Text style={styles.txtEvaluate}>{evaluate.text}</Text>
         )}
       </View>
     );
@@ -82,14 +78,19 @@ const styles = StyleSheet.create({
   txtMeasure: {
     lineHeight: 22,
     marginTop: 8,
+    fontSize: 14,
+    color: Colors.Gray8,
   },
   txtValue: {
     lineHeight: 32,
     marginTop: 16,
+    fontSize: 24,
+    color: Colors.Gray9,
   },
   txtEvaluate: {
     lineHeight: 20,
     marginTop: 8,
+    fontSize: 12,
   },
   iconInfo: {
     width: 40,

package/src/commons/MenuActionAddnew/index.js

@@ -6,6 +6,7 @@ import { Colors } from '../../configs';
 import Text from '../Text';
 import ImageButton from '../ImageButton';
 import { ModalCustom } from '../Modal';
+import packageJson from '../../../package.json';
 
 const keyExtractor = (item) => item.id.toString();
 const MenuActionAddnew = memo(
@@ -61,6 +62,11 @@ const MenuActionAddnew = memo(
               renderItem={renderItem}
               scrollIndicatorInsets={{ right: 1 }}
             />
+            <View style={styles.modalHeader}>
+              <Text
+                style={styles.modalHeaderText}
+              >{`v ${packageJson.version}`}</Text>
+            </View>
           </View>
         </View>
       </ModalCustom>

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -116,7 +116,7 @@ const styles = StyleSheet.create({
   scrollView: {
     flex: 1,
     paddingTop: Platform.select({
-      ios: 0,
+      ios: 15,
       android: heightHeader + 16,
     }),
   },

package/src/commons/SubUnit/DeviceTemplate/ConfigValue/ConfigValue.js

@@ -1,22 +1,16 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import styles from '../styles/ConfigValueStyles';
 import { Platform, View } from 'react-native';
 import Text from '../../../Text';
 import { useConfigGlobalState } from '../../../../iot/states';
-import { useWatchConfigs } from '../../../../hooks/IoT';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import IconComponent from '../../../IconComponent';
 import { IconOutline } from '@ant-design/icons-react-native';
 
 const ConfigValue = ({ device, stationItem }) => {
-  // eslint-disable-next-line no-unused-vars
-  const [configValues, _] = useConfigGlobalState('configValues');
+  const [configValues] = useConfigGlobalState('configValues');
   const configValue = configValues[stationItem.configuration?.config];
-  const configIds = useMemo(() => {
-    return [stationItem.configuration?.config];
-  }, [stationItem.configuration?.config]);
   const { icon_kit, icon } = device || {};
-  useWatchConfigs(configIds);
 
   return (
     <>

package/src/commons/SubUnit/DeviceTemplate/EvaluationOverConfig/EvaluationOverConfig.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import styles from '../styles/ConfigValueStyles';
 import { Platform, View } from 'react-native';
 import Text from '../../../Text';
@@ -7,22 +7,14 @@ import {
   useEvaluateValue,
   useValueEvaluation,
 } from '../../../../screens/Device/hooks/useEvaluateValue';
-import { useWatchConfigs } from '../../../../hooks/IoT';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import IconComponent from '../../../IconComponent';
 import { IconOutline } from '@ant-design/icons-react-native';
 
 export const EvaluationConfigWrapper = memo(
   ({ device, stationItem, Child }) => {
-    // eslint-disable-next-line no-unused-vars
-    const [configValues, _] = useConfigGlobalState('configValues');
+    const [configValues] = useConfigGlobalState('configValues');
     const configValue = configValues[stationItem.configuration?.config];
-    const configIds = useMemo(() => {
-      return [stationItem.configuration?.config];
-    }, [stationItem.configuration?.config]);
-
-    useWatchConfigs(configIds);
-
     const valueEvaluationObject = useValueEvaluation(
       stationItem.configuration?.config,
       device.unit_id,

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

@@ -22,6 +22,7 @@ import { AccessibilityLabel, AUTOMATE_TYPE } from '../../../configs/Constants';
 const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
   const { navigate } = useNavigation();
   const { id, type, script, activate_at, author = '' } = automate;
+  const { enable } = script;
   const t = useTranslations();
 
   const goToDetail = useCallback(() => {
@@ -69,7 +70,7 @@ const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
       <View style={[styles.container, wrapSyles]}>
         <View style={styles.boxIcon}>
           {displayIcon()}
-          {type === AUTOMATE_TYPE.ONE_TAP && (
+          {type === AUTOMATE_TYPE.ONE_TAP && enable && (
             <TouchableOpacity
               accessibilityLabel={AccessibilityLabel.AUTOMATE_SCRIPT_ACTION}
               onPress={handleScriptAction}
@@ -86,7 +87,7 @@ const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
             numberOfLines={1}
             semibold
             size={14}
-            color={Colors.Gray9}
+            color={enable ? Colors.Gray9 : Colors.Gray}
             type="Body"
             style={styles.name}
             accessibilityLabel={AccessibilityLabel.TEXT_AUTOMATE_NAME}
@@ -101,7 +102,7 @@ const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
               numberOfLines={1}
               semibold
               size={12}
-              color={Colors.Gray8}
+              color={enable ? Colors.Gray8 : Colors.Gray}
               type="Label"
             >
               {activateAt && t('activated_time', { time: activateAt })}

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -49,6 +49,19 @@ describe('test Item', () => {
                 name: 'Joshua Ray',
                 icon: '',
                 icon_kit: '',
+                enable: true,
+              },
+            },
+            {
+              id: 2,
+              user: 6,
+              type: 'one_tap',
+              activate_at: '2021-09-17T05:30:00Z',
+              script: {
+                name: 'Test',
+                icon: '',
+                icon_kit: '',
+                enable: false,
               },
             },
           ],
@@ -89,7 +102,7 @@ describe('test Item', () => {
         el.props.accessibilityLabel === AccessibilityLabel.GO_DETAIL &&
         el.type === TouchableOpacity
     );
-    expect(goDetail).toHaveLength(1);
+    expect(goDetail).toHaveLength(2);
     await act(async () => {
       await goDetail[0].props.onPress();
     });

package/src/commons/SubUnit/ShortDetail.js

@@ -29,12 +29,22 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
   useDevicesStatus(unit, station?.devices);
 
   const configsNeedWatching = useMemo(() => {
-    const configIds = [];
-    (station?.devices || []).forEach((device) => {
-      if (device?.quick_action?.config_id && device?.is_managed_by_backend) {
-        configIds.push(device.quick_action.config_id);
+    const configIds = (station?.devices || []).flatMap((device) => {
+      const ids = [];
+
+      if (device?.quick_action?.config_id && device.is_managed_by_backend) {
+        ids.push(device.quick_action.config_id);
+      }
+
+      if (device?.station_items?.length) {
+        ids.push(
+          ...device.station_items.map((item) => item.configuration.config)
+        );
       }
+
+      return ids;
     });
+
     return configIds;
   }, [station]);
 

package/src/configs/API.js

@@ -87,16 +87,26 @@ const API = {
   AUTOMATE: {
     ACTION_ONE_TAP: (id) => `/property_manager/automate/${id}/action_one_tap/`,
     SCRIPT: (id) => `/property_manager/automate/${id}/script/`,
+    SCRIPT_ITEMS: (id) => `/property_manager/automate/${id}/script_items/`,
     ORDER_SCRIPT_ACTION: (id) =>
       `/property_manager/automate/${id}/order_script_action/`,
+    ORDER_SCRIPT_ITEMS: (id) =>
+      `/property_manager/automate/${id}/order_script_items/`,
     DELETE_SCRIPT_ACTION: (automateId, actionId) =>
       `/property_manager/automate/${automateId}/script_action/${actionId}/`,
+    DELETE_SCRIPT_ITEM: (automateId, itemId) =>
+      `/property_manager/automate/${automateId}/script_item/${itemId}/`,
     ADD_SCRIPT_ACTION: (id) =>
       `/property_manager/automate/${id}/add_script_action/`,
+    ADD_SCRIPT_NOTIFY: (id) =>
+      `/property_manager/automate/${id}/add_script_notify/`,
+
     FETCH_AUTOMATE: (automateId) => `/property_manager/automate/${automateId}/`,
     CREATE_AUTOMATE: () => '/property_manager/automate/',
     UPDATE_AUTOMATE: (automateId) =>
       `/property_manager/automate/${automateId}/`,
+    ENABLE_SCRIPT: (automateId) =>
+      `/property_manager/automate/${automateId}/enable_script/`,
     STAR_SCRIPT: (id) => `/property_manager/automate/${id}/star_script/`,
     UNSTAR_SCRIPT: (id) => `/property_manager/automate/${id}/unstar_script/`,
     GET_SMART: () => '/property_manager/automate/smart/',

package/src/configs/AccessibilityLabel.js

@@ -241,6 +241,9 @@ export default {
   ICON_MORE: 'ICON_MORE',
   ICON_ARROW_RIGHT: 'ICON_ARROW_RIGHT',
   TEXT_AUTOMATE_NAME: 'TEXT_AUTOMATE_NAME',
+  AUTOMATE_LIST_SCRIPT_ACTION: 'AUTOMATE_LIST_SCRIPT_ACTION',
+  AUTOMATE_TITLE_NOTIFY: 'AUTOMATE_TITLE_NOTIFY',
+  AUTOMATE_MESSAGE_NOTIFY: 'AUTOMATE_MESSAGE_NOTIFY',
 
   // Parking input maunaly spot
   PARKING_SPOT_INFO_BUTTON: 'PARKING_SPOT_INFO_BUTTON',

package/src/navigations/UnitStack.js

@@ -19,7 +19,7 @@ import { Action } from '../context/actionType';
 import AQIGuide from '../screens/AQIGuide';
 import DeviceDetail from '../screens/Device/detail';
 import ChangePosition from '../screens/ChangePosition';
-import SharingMemberList from '../screens/Sharing/MemberList';
+import UnitMemberList from '../screens/Sharing/UnitMemberList';
 import ManageSubUnit from '../screens/SubUnit/ManageSubUnit';
 import SelectAddress from '../screens/Unit/SelectAddress';
 import ChooseLocation from '../screens/Unit/ChooseLocation';
@@ -66,6 +66,7 @@ import ChooseAction from '../screens/Automate/AddNewAction/ChooseAction';
 import ScenarioName from '../screens/Automate/Scenario/ScenarioName';
 import ValueChangeName from '../screens/Automate/ValueChange/ValueChangeName';
 import AddAutomationTypeSmart from '../screens/Automate/AddNewAutoSmart/AddAutomationTypeSmart';
+import SetupScriptNotify from '../screens/Automate/AddNewAction/SetupScriptNotify';
 
 const Stack = createStackNavigator();
 
@@ -331,7 +332,7 @@ export const UnitStack = memo((props) => {
       />
       <Stack.Screen
         name={Route.UnitMemberList}
-        component={SharingMemberList}
+        component={UnitMemberList}
         options={{
           headerShown: false,
         }}
@@ -406,6 +407,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.SetupScriptNotify}
+        component={SetupScriptNotify}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name={Route.AddAutomationTypeSmart}
         component={AddAutomationTypeSmart}

package/src/screens/Automate/AddNewAction/SetupScriptNotify.js

@@ -0,0 +1,92 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import styles from './Styles/SetupScriptNotifyStyles';
+import { HeaderCustom } from '../../../commons';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import _TextInput from '../../../commons/Form/TextInput';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { axiosPost } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import Routes from '../../../utils/Route';
+import moment from 'moment';
+
+const SetupScriptNotify = ({ route }) => {
+  const t = useTranslations();
+  const { goBack, navigate } = useNavigation();
+  const { automate = {}, unitId } = route?.params || {};
+  const { id: automateId } = automate;
+  const [notify, setNotify] = useState({ unit: unitId });
+
+  const onChangeTitle = (value) => {
+    setNotify((state) => ({
+      ...state,
+      title: value,
+    }));
+  };
+  const onChangeMessage = (value) => {
+    setNotify((state) => ({
+      ...state,
+      message: value,
+    }));
+  };
+
+  const onNext = useCallback(async () => {
+    const { success } = await axiosPost(
+      API.AUTOMATE.ADD_SCRIPT_NOTIFY(automateId),
+      notify
+    );
+    if (success) {
+      ToastBottomHelper.success(t('text_done'));
+      navigate({
+        name: Routes.ScriptDetail,
+        merge: true,
+        params: { saveAt: moment().valueOf() },
+      });
+    } else {
+      ToastBottomHelper.error(t('text_done'));
+    }
+  }, [automateId, navigate, notify, t]);
+
+  const canSave = useMemo(() => {
+    const { title, message } = notify || {};
+    return !!title && !!message;
+  }, [notify]);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose onClose={goBack} title={t('notification')} />
+      <View style={styles.container}>
+        <_TextInput
+          placeholder={t('title_notification')}
+          onChange={onChangeTitle}
+          textInputStyle={styles.textTitle}
+          value={notify?.title}
+          accessibilityLabel={AccessibilityLabel.AUTOMATE_TITLE_NOTIFY}
+          autoFocus
+        />
+        <_TextInput
+          placeholder={t('message_notification')}
+          onChange={onChangeMessage}
+          textInputStyle={styles.textMessage}
+          value={notify?.message}
+          accessibilityLabel={AccessibilityLabel.AUTOMATE_MESSAGE_NOTIFY}
+          multiline={true}
+          maxLength={255}
+        />
+
+        <BottomButtonView
+          style={styles.bottomButtonView}
+          mainTitle={t('save')}
+          onPressMain={onNext}
+          typeMain={canSave ? 'primary' : 'disabled'}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default SetupScriptNotify;

package/src/screens/Automate/AddNewAction/Styles/SetupScriptNotifyStyles.js

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../../configs';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  titleCreate: {
+    fontStyle: 'normal',
+    fontWeight: '600',
+    color: Colors.Gray9,
+  },
+  titleChoose: {
+    fontStyle: 'normal',
+    fontWeight: '400',
+    color: Colors.Gray8,
+  },
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: getBottomSpace() + 10,
+  },
+  textTitle: {
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderStyle: 'solid',
+    borderRadius: 10,
+  },
+  textMessage: {
+    height: 500,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderStyle: 'solid',
+    borderRadius: 10,
+  },
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+  bottomButton: {
+    borderWidth: 0,
+    borderColor: Colors.Gray4,
+    paddingTop: 24,
+    paddingBottom: 24,
+    borderTopWidth: 1,
+    borderStyle: 'solid',
+    position: 'absolute',
+    bottom: 0,
+  },
+});

package/src/screens/Automate/AddNewAction/__test__/SetupConfigCondition.test.js

@@ -62,6 +62,7 @@ describe('Test SetupConfigCondition', () => {
           sensor_type: 'air_quality',
           value_evaluations: [
             {
+              id: 1,
               template: 'range',
               configuration: {
                 ranges: [
@@ -83,6 +84,18 @@ describe('Test SetupConfigCondition', () => {
                 ],
               },
             },
+            {
+              id: 2,
+              template: 'boolean',
+              configuration: {
+                on: {
+                  text: 'On',
+                },
+                off: {
+                  text: 'Off',
+                },
+              },
+            },
           ],
         },
         sensorData: [],