@eohjsc/react-native-smart-city 0.3.28 → 0.3.31

package/src/screens/ScriptDetail/__test__/index.test.js

@@ -168,7 +168,7 @@ describe('Test ScriptDetail', () => {
     });
     const instance = tree.root;
     const buttonStar = instance.find(
-      (el) => el.props.testID === TESTID.HEADER_DEVICE_BUTTON_STAR
+      (el) => el.props.testID === TESTID.HEADER_SCRIPT_DETAIL_BUTTON_STAR
     );
     mock.onPost(API.AUTOMATE.STAR_SCRIPT(1)).reply(200);
     await act(async () => {
@@ -355,4 +355,43 @@ describe('Test ScriptDetail', () => {
       'Light Value lower than 3'
     );
   });
+
+  test('Test render textCondition schedule repeat everyday', async () => {
+    route.params = {
+      ...route.params,
+      type: AUTOMATE_TYPE.SCHEDULE,
+      automate: {
+        repeat: 'every_day',
+        date_repeat: '2022-01-02',
+        time_repeat: '19:00:00',
+      },
+    };
+    await act(() => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const itemAutomate = instance.findByType(ItemAutomate);
+    expect(itemAutomate.props.textCondition).toEqual('Every day at 19:00');
+  });
+
+  test('Test render textCondition schedule repeat weekday', async () => {
+    route.params = {
+      ...route.params,
+      type: AUTOMATE_TYPE.SCHEDULE,
+      automate: {
+        repeat: 'every_week',
+        date_repeat: '2022-01-02',
+        time_repeat: '19:00:00',
+        weekday_repeat: ['1', '2', '4', '6'],
+      },
+    };
+    await act(() => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const itemAutomate = instance.findByType(ItemAutomate);
+    expect(itemAutomate.props.textCondition).toEqual(
+      'Mon, Tue, Thu, Sat at 19:00'
+    );
+  });
 });

package/src/screens/ScriptDetail/index.js

@@ -321,7 +321,8 @@ const ScriptDetail = ({ route }) => {
       <PreventDoubleTouch
         style={[styles.buttonStar, styles.headerButton]}
         onPress={onPressStar}
-        testID={TESTID.HEADER_DEVICE_BUTTON_STAR}
+        testID={TESTID.HEADER_SCRIPT_DETAIL_BUTTON_STAR}
+        accessibilityLabel={TESTID.HEADER_SCRIPT_DETAIL_BUTTON_STAR}
       >
         {isStarred ? (
           <IconFill name="star" size={25} color={Colors.Yellow6} />

package/src/screens/Sharing/Components/SensorItem.js

@@ -27,7 +27,7 @@ const SensorItem = ({
     isChecked,
   } = item;
   const [dataConfig, setDataConfig] = useState([
-    ...actions,
+    ...actions.map((i) => ({ ...i, isControl: true })),
     ...read_configs.map((i) => ({ ...i, isConfig: true })),
   ]);
 
@@ -84,6 +84,9 @@ const SensorItem = ({
         titleStyle={styles.titleStyle}
         key={i.id}
         idGroup={idGroup}
+        isConfig={i.isConfig}
+        isControl={i.isControl}
+        wrapStyle={styles.wrapStyleTitle}
       />
     ));
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/screens/Sharing/Components/Styles/SensorItemStyles.js

@@ -49,6 +49,7 @@ export default StyleSheet.create({
   titleStyle: {
     fontSize: 16,
     fontWeight: 'normal',
+    width: 200,
   },
   wrapExpand: {
     marginTop: 10,
@@ -57,4 +58,7 @@ export default StyleSheet.create({
     width: normalize(20),
     height: normalize(20),
   },
+  wrapStyleTitle: {
+    justifyContent: 'space-between',
+  },
 });

package/src/screens/Sharing/Components/Styles/TitleCheckBoxStyles.js

@@ -14,4 +14,8 @@ export default StyleSheet.create({
     fontWeight: '600',
     fontStyle: 'normal',
   },
+  wrapRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
 });

package/src/screens/Sharing/Components/TitleCheckBox.js

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useState } from 'react';
 import { View, Text } from 'react-native';
 import { CheckBoxCustom } from '.';
+import t from '../../../hooks/Common/useTranslations';
 import styles from './Styles/TitleCheckBoxStyles';
 
 const TitleCheckBox = ({
@@ -12,6 +13,8 @@ const TitleCheckBox = ({
   wrapStyle,
   titleStyle,
   idGroup,
+  isConfig,
+  isControl,
 }) => {
   const [checked, setChecked] = useState(isChecked);
   const handleOnPress = () => {
@@ -26,14 +29,20 @@ const TitleCheckBox = ({
 
   return (
     <View style={[styles.wrap, wrapStyle]}>
-      <CheckBoxCustom
-        isChecked={checked}
-        onPress={handleOnPress}
-        wrapStyle={wrapCheckBoxStyle}
-      />
-      <Text onPress={handleOnPress} style={[styles.title, titleStyle]}>
-        {title}
-      </Text>
+      <View style={styles.wrapRow}>
+        <CheckBoxCustom
+          isChecked={checked}
+          onPress={handleOnPress}
+          wrapStyle={wrapCheckBoxStyle}
+        />
+        <Text onPress={handleOnPress} style={[styles.title, titleStyle]}>
+          {title}
+        </Text>
+      </View>
+      <View>
+        {isControl && <Text>{t('can_control')}</Text>}
+        {isConfig && <Text>{t('view_only')}</Text>}
+      </View>
     </View>
   );
 };

package/src/screens/Template/EditTemplate.js

@@ -0,0 +1,151 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
+import DraggableFlatList from 'react-native-draggable-flatlist';
+
+import { EmptyComponent } from '../../commons/DevMode';
+import { HeaderCustom } from '../../commons/Header';
+import Text from '../../commons/Text';
+import { Images } from '../../configs';
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
+import t from '../../hooks/Common/useTranslations';
+import { SensorDisplayItem } from '../Device/components/SensorDisplayItem';
+import styles from './Styles/EditTemplateStyle';
+
+const EditTemplate = () => {
+  const { setAction } = useContext(SCContext);
+  const { params = {} } = useRoute();
+  const { data = [], setData } = params;
+  const { goBack } = useNavigation();
+  const [actionsList, setActionList] = useState(
+    [...data].map((item) => {
+      return {
+        ...item,
+        key: `item-${item?.id}`,
+      };
+    })
+  );
+
+  const AddWidget = useCallback(() => {
+    return (
+      <TouchableOpacity style={styles.addWidgetButton}>
+        <View style={styles.wrapIconAdd}>
+          <Image source={Images.plus} />
+        </View>
+        <Text style={styles.addWidget}>{t('add_widget')}</Text>
+      </TouchableOpacity>
+    );
+  }, []);
+
+  const onDrag = useCallback(
+    (item, drag) => () => {
+      drag && drag();
+      setAction(Action.SET_WIDGET_DRAGGING, item?.id);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onDragEnd = useCallback(({ data: dragData }) => {
+    setActionList(dragData);
+    setAction(Action.SET_WIDGET_DRAGGING);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onPressSave = useCallback(() => {
+    setData && setData(actionsList);
+    goBack();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actionsList]);
+
+  const onDelete = useCallback(() => {
+    alert(t('feature_under_development'));
+  }, []);
+
+  const renderEmpty = useMemo(() => {
+    return (
+      <View style={styles.empty}>
+        <EmptyComponent text1={t('no_widgets')} text2={t('add_your_widget')} />
+        <AddWidget />
+      </View>
+    );
+  }, []);
+
+  useEffect(() => {
+    setAction(Action.SET_IS_IN_EDIT_TEMPLATE_SCREEN, true);
+    return () => setAction(Action.SET_IS_IN_EDIT_TEMPLATE_SCREEN);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom
+        title={t('edit_template')}
+        wrapTitleStyle={styles.wrapTitleStyle}
+        iconLeft={Images.close}
+        iconBackStyle={styles.iconBackStyle}
+        titleStyles={styles.titleStyles}
+      />
+      {!actionsList?.length ? (
+        renderEmpty
+      ) : (
+        <>
+          <View style={styles.wrapDescription}>
+            <Text style={styles.description}>
+              {t('hold_and_hover_description')}
+            </Text>
+          </View>
+          <DraggableFlatList
+            showsVerticalScrollIndicator={false}
+            data={actionsList}
+            renderItem={({ item, index, drag }) => {
+              return (
+                <TouchableOpacity onLongPress={onDrag(item, drag)}>
+                  <SensorDisplayItem
+                    item={item}
+                    getData={() => {}}
+                    offsetTitle={'offsetTitle'}
+                    setOffsetTitle={'setOffsetTitle'}
+                    maxValue={100}
+                  />
+                  <TouchableOpacity
+                    style={styles.deleteButton}
+                    onPress={onDelete}
+                  >
+                    <Image
+                      source={Images.removeCircle}
+                      style={styles.deleteIcon}
+                    />
+                  </TouchableOpacity>
+                </TouchableOpacity>
+              );
+            }}
+            keyExtractor={(item) => `draggable-item-${item.key}`}
+            onDragEnd={onDragEnd}
+            extraData={actionsList}
+            containerStyle={styles.containerStyle}
+            ListFooterComponent={
+              <View style={styles.wrapListFooterComponent}>
+                <AddWidget />
+              </View>
+            }
+          />
+          <View style={styles.wrapBottom}>
+            <TouchableOpacity style={styles.saveButton} onPress={onPressSave}>
+              <Text style={styles.save}>{t('save')}</Text>
+            </TouchableOpacity>
+          </View>
+        </>
+      )}
+    </View>
+  );
+};
+
+export default EditTemplate;

package/src/screens/Template/GatewayList.js

@@ -0,0 +1,51 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useState } from 'react';
+import { View } from 'react-native';
+import { Search } from '../../commons/DevMode';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import Text from '../../commons/Text';
+import t from '../../hooks/Common/useTranslations';
+import styles from './Styles/GatewayStyles';
+
+const GatewayList = () => {
+  const { goBack } = useNavigation();
+  const [data] = useState([
+    {
+      id: 1,
+      name: 'Gateway name',
+      templateName: 'Template name',
+      status: 'ACTIVE',
+    },
+  ]);
+
+  const GatewayItem = useCallback(({ item }) => {
+    return (
+      <View style={styles.wrapItem}>
+        <Text style={styles.gateWayName}>{item?.name}</Text>
+        <View>
+          <Text style={styles.templateName}>{item?.templateName}</Text>
+          <View style={styles.wrapStatus}>
+            <Text style={styles.status}>{item?.status}</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }, []);
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={t('gateway_list')}
+        headerAniStyle={styles.headerAniStyle}
+        onGoBack={goBack}
+      >
+        <View style={styles.wrapContent}>
+          <Search />
+          {!!data.length && data.map((item) => <GatewayItem item={item} />)}
+        </View>
+      </WrapHeaderScrollable>
+    </View>
+  );
+};
+
+export default GatewayList;

package/src/screens/Template/Information.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import TextWithLabel from '../../commons/DevMode/TextWithLabel';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import t from '../../hooks/Common/useTranslations';
+import styles from './Styles/InformationStyles';
+
+const Information = () => {
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={t('information')}
+        headerAniStyle={styles.headerAniStyle}
+      >
+        <View style={styles.content}>
+          <TextWithLabel
+            label={t('template_name')}
+            text={'Template name'}
+            isBox
+          />
+          <TextWithLabel
+            label={t('template_name')}
+            text={'TMPLTvKiNsKR'}
+            isDisable
+            isBox
+          />
+          <TextWithLabel
+            label={t('template_name')}
+            text={
+              // eslint-disable-next-line max-len
+              'Direct repair of aneurysm, pseudoaneurysm, or excision (partial or total) and graft insertion, with or without patch graft; for aneurysm, pseudoaneurysm, and associated occlusive disease, abdominal aorta involving visceral vessels (mesenteric, celiac, renal)'
+            }
+          />
+        </View>
+      </WrapHeaderScrollable>
+    </View>
+  );
+};
+
+export default Information;

package/src/screens/Template/Styles/EditTemplateStyle.js

@@ -0,0 +1,109 @@
+import { StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  wrapTitleStyle: {
+    alignItems: 'flex-start',
+    paddingHorizontal: 16,
+  },
+  iconBackStyle: {
+    width: 22,
+    height: 22,
+  },
+  titleStyles: {
+    fontSize: 20,
+  },
+  empty: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    marginTop: 159,
+  },
+  addWidgetButton: {
+    borderWidth: 2,
+    borderStyle: 'dashed',
+    borderColor: Colors.Gray4,
+    flexDirection: 'row',
+    width: '100%',
+    marginTop: 24,
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 8,
+  },
+  wrapIconAdd: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: Colors.Gray3,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  addWidget: {
+    fontSize: 16,
+    fontWeight: '400',
+    color: Colors.Gray8,
+    marginLeft: 24,
+  },
+  content: {
+    flex: 1,
+    marginBottom: 120,
+  },
+  wrapBottom: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    paddingBottom: getBottomSpace(),
+    backgroundColor: Colors.White,
+    paddingHorizontal: 16,
+    paddingTop: 16,
+  },
+  saveButton: {
+    height: 56,
+    borderRadius: 8,
+    backgroundColor: Colors.Primary,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  save: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: Colors.White,
+  },
+  containerStyle: {
+    paddingBottom: 130,
+  },
+  wrapListFooterComponent: {
+    paddingHorizontal: 16,
+  },
+  wrapDescription: {
+    paddingHorizontal: 16,
+    marginTop: 10,
+    marginBottom: 10,
+  },
+  description: {
+    fontSize: 16,
+    fontWeight: '400',
+    color: Colors.Gray8,
+  },
+  deleteButton: {
+    position: 'absolute',
+    zIndex: 2,
+    top: -5,
+    right: 0,
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  deleteIcon: {
+    tintColor: Colors.Red,
+  },
+});

package/src/screens/Template/Styles/GatewayStyles.js

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  headerAniStyle: {
+    borderBottomWidth: 0,
+  },
+  wrapContent: {
+    paddingHorizontal: 16,
+  },
+  wrapItem: {
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: Colors.Neutral.Neutral3,
+    height: 128,
+    paddingHorizontal: 16,
+    justifyContent: 'space-around',
+  },
+  gateWayName: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  templateName: {
+    fontSize: 12,
+    fontWeight: '400',
+    color: Colors.Gray9,
+  },
+  status: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: Colors.Salem,
+  },
+  wrapStatus: {
+    borderRadius: 54,
+    backgroundColor: Colors.LightGreen,
+    width: 63,
+    height: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+});

package/src/screens/Template/Styles/InformationStyles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  content: {
+    paddingHorizontal: 16,
+    marginVertical: 16,
+  },
+  headerAniStyle: {
+    borderBottomWidth: 0,
+  },
+});

package/src/screens/Template/Styles/detailStyles.js

@@ -0,0 +1,35 @@
+import { Platform, StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  headerAniStyle: {
+    borderBottomWidth: 0,
+  },
+  rightComponent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerButton: {
+    marginRight: 10,
+  },
+  wrapEmpty: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: Constants.height - 250,
+  },
+  wrapStyle: {
+    borderRadius: 8,
+    borderBottomRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    width: 160,
+    marginTop: Platform.select({
+      android: -25,
+      ios: 0,
+    }),
+    marginLeft: -10,
+  },
+});

package/src/screens/Template/Styles/indexStyles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Colors, Constants } from '../../../configs';
+import { Colors } from '../../../configs';
 
 export default StyleSheet.create({
   wrap: {
@@ -13,39 +13,8 @@ export default StyleSheet.create({
     alignItems: 'center',
     marginTop: -100,
   },
-  textEmpty1: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  textEmpty2: {
-    fontSize: 14,
-    fontWeight: '400',
-    color: Colors.Neutral.Neutral5,
-    marginTop: 7,
-  },
+
   contentContainerStyle: {
     flex: 1,
   },
-  item: {
-    width: (Constants.width - 42) / 2,
-    height: 128,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: Colors.Neutral.Neutral3,
-    marginBottom: 16,
-    justifyContent: 'space-around',
-    alignItems: 'center',
-  },
-  oddItem: {
-    marginRight: 10,
-  },
-  nameItem: {
-    fontSize: 14,
-    fontWeight: 'bold',
-  },
-  countItem: {
-    fontSize: 12,
-    fontWeight: 400,
-    color: Colors.Neutral.Neutral5,
-  },
 });