@eohjsc/react-native-smart-city 0.2.86 → 0.2.89

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -4,6 +4,7 @@ import { View, ScrollView, Alert } from 'react-native';
 import styles from './SmartTiviActionTemplateStyles';
 import Text from '../../Text';
 import { Colors } from '../../../configs';
+import { SMART_TIVI_BUTTON } from '../../../configs/Constants';
 import { IconOutline } from '@ant-design/icons-react-native';
 import CircleButton from './component/CircleButton';
 import RectangleButton from './component/RectangleButton';
@@ -22,193 +23,173 @@ import {
   Netflix,
 } from './component/Icon';
 
-const SmartTiviActionTemplate = memo(({ actionGroup, doAction }) => {
-  const t = useTranslations();
-  const FakeDataChannel = [
-    {
-      id: 1,
-      icon: 'disney',
-      link: '...',
-    },
-    {
-      id: 2,
-      icon: 'youtube',
-      link: '...',
-    },
-    {
-      id: 3,
-      icon: 'netflix',
-      link: '...',
-    },
-    {
-      id: 4,
-      icon: 'spotify',
-      link: '...',
-    },
-  ];
-  const onPressOnOff = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressExit = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressVolumeUp = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressVolumeDown = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressChUp = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressChDown = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressUp = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressDown = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressLeft = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressRight = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressOk = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressPrev = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressStop = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressNext = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressHome = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressBack = useCallback(() => {
-    return Alert.alert(t('feature_under_development'));
-  }, [t]);
-  const onPressChannel = useCallback(
-    (item) => {
-      return Alert.alert(t('feature_under_development'));
-    },
-    [t]
-  );
-  const iconChannels = useCallback((item) => {
-    switch (item.icon) {
-      case 'disney':
-        return <Disney style={styles.iconChannel} />;
-      case 'youtube':
-        return <Youtube style={styles.iconChannel} />;
-      case 'netflix':
-        return <Netflix style={styles.iconChannel} />;
-      case 'spotify':
-        return <Spotify style={styles.iconChannel} />;
-      default:
-        return <></>;
-    }
-  }, []);
-  return (
-    <>
-      <ScrollView>
-        <View style={styles.wrap}>
-          <View style={styles.rowOnOff}>
-            <CircleButton
-              type="small"
-              icon={
-                <IconOutline
-                  name="poweroff"
-                  size={20}
-                  color={Colors.Gray6}
-                  style={styles.iconButton}
-                />
-              }
-              onPress={onPressOnOff}
-              testID={TESTID.SMART_TIVI_TEMPLATE.ONOFF_BUTTON}
-            />
-            <CircleButton
-              type="small"
-              icon={<SvgInput size={20} style={styles.iconButtonExit} />}
-              onPress={onPressExit}
-              testID={TESTID.SMART_TIVI_TEMPLATE.EXIT_BUTTON}
-            />
-          </View>
-          <View style={styles.controlDevice}>
-            <RectangleButton
-              type="column"
-              icon={<VolumeUp width={20} height={20} />}
-              onPressUp={onPressVolumeUp}
-              onPressDown={onPressVolumeDown}
-              testID={TESTID.SMART_TIVI_TEMPLATE.VOLUME_BUTTON}
-            />
-            <CircleButton
-              type="big"
-              wrapStyle={styles.circleBigButton}
-              onPressUp={onPressUp}
-              onPressDown={onPressDown}
-              onPressLeft={onPressLeft}
-              onPressRight={onPressRight}
-              onPressOk={onPressOk}
-              testID={TESTID.SMART_TIVI_TEMPLATE.BIG_BUTTON}
-            />
-            <RectangleButton
-              type="column"
-              icon={
-                <Text type="H4" color={Colors.Gray9} bold>
-                  CH
-                </Text>
-              }
-              onPressUp={onPressChUp}
-              onPressDown={onPressChDown}
-              testID={TESTID.SMART_TIVI_TEMPLATE.CH_BUTTON}
-            />
-          </View>
-          <View style={styles.controlPlay}>
-            <ControlPlay
-              onPressPrev={onPressPrev}
-              onPressStop={onPressStop}
-              onPressNext={onPressNext}
-              testID={TESTID.SMART_TIVI_TEMPLATE.CONTROL_BUTTON}
-            />
-          </View>
-          <View style={styles.controlHome}>
-            <RectangleButton
-              type="row"
-              onPress={onPressHome}
-              icon={<Home />}
-              testID={TESTID.SMART_TIVI_TEMPLATE.HOME_BUTTON}
-            />
-            <RectangleButton
-              type="row"
-              onPress={onPressBack}
-              icon={<KeyboardReturn />}
-              testID={TESTID.SMART_TIVI_TEMPLATE.BACK_BUTTON}
-            />
-          </View>
-          <View style={styles.channelTV}>
-            {!!FakeDataChannel &&
-              FakeDataChannel.map((item, index) => {
-                return (
-                  <RectangleButton
-                    type="row"
-                    onPress={() => onPressChannel(item)}
-                    icon={iconChannels(item)}
-                    wrapStyle={styles.buttonChannel}
-                    index={index}
+const SmartTiviActionTemplate = memo(
+  ({ actionGroup, doAction, scrollEnabled = true }) => {
+    const t = useTranslations();
+    const FakeDataChannel = [
+      {
+        id: 1,
+        icon: 'disney',
+        link: '...',
+      },
+      {
+        id: 2,
+        icon: 'youtube',
+        link: '...',
+      },
+      {
+        id: 3,
+        icon: 'netflix',
+        link: '...',
+      },
+      {
+        id: 4,
+        icon: 'spotify',
+        link: '...',
+      },
+    ];
+    const onPressButton = useCallback(
+      (button, item) => () => {
+        switch (button) {
+          case SMART_TIVI_BUTTON.ONOFF_BUTTON:
+          case SMART_TIVI_BUTTON.EXIT_BUTTON:
+          case SMART_TIVI_BUTTON.VOLUME_UP_BUTTON:
+          case SMART_TIVI_BUTTON.VOLUME_DOWN_BUTTON:
+          case SMART_TIVI_BUTTON.CH_UP:
+          case SMART_TIVI_BUTTON.CH_DOWN:
+          case SMART_TIVI_BUTTON.UP_BUTTON:
+          case SMART_TIVI_BUTTON.DOWN_BUTTON:
+          case SMART_TIVI_BUTTON.LEFT_BUTTON:
+          case SMART_TIVI_BUTTON.RIGHT_BUTTON:
+          case SMART_TIVI_BUTTON.OK_BUTTON:
+          case SMART_TIVI_BUTTON.PREV_BUTTON:
+          case SMART_TIVI_BUTTON.STOP_BUTTON:
+          case SMART_TIVI_BUTTON.NEXT_BUTTON:
+          case SMART_TIVI_BUTTON.HOME_BUTTON:
+          case SMART_TIVI_BUTTON.BACK_BUTTON:
+          case SMART_TIVI_BUTTON.CHANNEL_BUTTON:
+            return Alert.alert(t('feature_under_development'));
+          default:
+            return <></>;
+        }
+      },
+      [t]
+    );
+    const iconChannels = useCallback((item) => {
+      switch (item.icon) {
+        case 'disney':
+          return <Disney style={styles.iconChannel} />;
+        case 'youtube':
+          return <Youtube style={styles.iconChannel} />;
+        case 'netflix':
+          return <Netflix style={styles.iconChannel} />;
+        case 'spotify':
+          return <Spotify style={styles.iconChannel} />;
+        default:
+          return <></>;
+      }
+    }, []);
+    return (
+      <>
+        <ScrollView scrollEnabled={scrollEnabled}>
+          <View style={styles.wrap}>
+            <View style={styles.rowOnOff}>
+              <CircleButton
+                type="small"
+                icon={
+                  <IconOutline
+                    name="poweroff"
+                    size={20}
+                    color={Colors.Gray6}
+                    style={styles.iconButton}
                   />
-                );
-              })}
+                }
+                onPress={onPressButton(SMART_TIVI_BUTTON.ONOFF_BUTTON)}
+                testID={TESTID.SMART_TIVI_TEMPLATE.ONOFF_BUTTON}
+              />
+              <CircleButton
+                type="small"
+                icon={<SvgInput size={20} style={styles.iconButtonExit} />}
+                onPress={onPressButton(SMART_TIVI_BUTTON.EXIT_BUTTON)}
+                testID={TESTID.SMART_TIVI_TEMPLATE.EXIT_BUTTON}
+              />
+            </View>
+            <View style={styles.controlDevice}>
+              <RectangleButton
+                type="column"
+                icon={<VolumeUp width={20} height={20} />}
+                onPressUp={onPressButton(SMART_TIVI_BUTTON.VOLUME_UP_BUTTON)}
+                onPressDown={onPressButton(
+                  SMART_TIVI_BUTTON.VOLUME_DOWN_BUTTON
+                )}
+                testID={TESTID.SMART_TIVI_TEMPLATE.VOLUME_BUTTON}
+              />
+              <CircleButton
+                type="big"
+                wrapStyle={styles.circleBigButton}
+                onPressUp={onPressButton(SMART_TIVI_BUTTON.UP_BUTTON)}
+                onPressDown={onPressButton(SMART_TIVI_BUTTON.DOWN_BUTTON)}
+                onPressLeft={onPressButton(SMART_TIVI_BUTTON.LEFT_BUTTON)}
+                onPressRight={onPressButton(SMART_TIVI_BUTTON.RIGHT_BUTTON)}
+                onPressOk={onPressButton(SMART_TIVI_BUTTON.OK_BUTTON)}
+                testID={TESTID.SMART_TIVI_TEMPLATE.BIG_BUTTON}
+              />
+              <RectangleButton
+                type="column"
+                icon={
+                  <Text type="H4" color={Colors.Gray9} bold>
+                    CH
+                  </Text>
+                }
+                onPressUp={onPressButton(SMART_TIVI_BUTTON.CH_UP)}
+                onPressDown={onPressButton(SMART_TIVI_BUTTON.CH_DOWN)}
+                testID={TESTID.SMART_TIVI_TEMPLATE.CH_BUTTON}
+              />
+            </View>
+            <View style={styles.controlPlay}>
+              <ControlPlay
+                onPressPrev={onPressButton(SMART_TIVI_BUTTON.PREV_BUTTON)}
+                onPressStop={onPressButton(SMART_TIVI_BUTTON.STOP_BUTTON)}
+                onPressNext={onPressButton(SMART_TIVI_BUTTON.NEXT_BUTTON)}
+                testID={TESTID.SMART_TIVI_TEMPLATE.CONTROL_BUTTON}
+              />
+            </View>
+            <View style={styles.controlHome}>
+              <RectangleButton
+                type="row"
+                onPress={onPressButton(SMART_TIVI_BUTTON.HOME_BUTTON)}
+                icon={<Home />}
+                testID={TESTID.SMART_TIVI_TEMPLATE.HOME_BUTTON}
+              />
+              <RectangleButton
+                type="row"
+                onPress={onPressButton(SMART_TIVI_BUTTON.BACK_BUTTON)}
+                icon={<KeyboardReturn />}
+                testID={TESTID.SMART_TIVI_TEMPLATE.BACK_BUTTON}
+              />
+            </View>
+            <View style={styles.channelTV}>
+              {!!FakeDataChannel &&
+                FakeDataChannel.map((item, index) => {
+                  return (
+                    <RectangleButton
+                      type="row"
+                      onPress={onPressButton(
+                        SMART_TIVI_BUTTON.CHANNEL_BUTTON,
+                        item
+                      )}
+                      icon={iconChannels(item)}
+                      wrapStyle={styles.buttonChannel}
+                      index={index}
+                    />
+                  );
+                })}
+            </View>
           </View>
-        </View>
-      </ScrollView>
-    </>
-  );
-});
+        </ScrollView>
+      </>
+    );
+  }
+);
 
 export default SmartTiviActionTemplate;

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -49,9 +49,10 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
 
   const doActionAndWatchConfig = useCallback(
     (actionData) => {
-      const actionName = `${
+      let actionName = `${
         sensor?.name
       } ${title?.toLowerCase()} ${text?.toLowerCase()}`;
+      actionName = actionName.replace(/\s+/g, ' ').trim();
       doAction(actionData, null, actionName);
       if (sensor?.is_managed_by_backend) {
         config && watchMultiConfigs([config]);

package/src/commons/ActionGroup/index.js

@@ -10,8 +10,9 @@ import OnOffTemplate from './OnOffTemplate';
 import TimerActionTemplate from './TimerActionTemplate';
 import CurtainButtonTemplate from './CurtainButtonTemplate';
 import SmartTiviActionTemplate from './SmartTiviActionTemplate/SmartTiviActionTemplate';
-import LightActionTemplate from './LightActionTemplate';
-import OnOffSmartLock from './OnOffSmartLock';
+import ColorPickerTemplate from './ColorPickerTemplate';
+import SliderRangeTemplate from './SliderRangeTemplate';
+import OnOffSmartLock from './OnOffSmartLock/OnOffSmartLock';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -39,8 +40,10 @@ export const getActionComponent = (template) => {
       return CurtainButtonTemplate;
     case 'SmartTiviActionTemplate':
       return SmartTiviActionTemplate;
-    case 'light_action_template':
-      return LightActionTemplate;
+    case 'color_picker_template':
+      return ColorPickerTemplate;
+    case 'slider_range_template':
+      return SliderRangeTemplate;
     default:
       return null;
   }

package/src/commons/BottomSheet/index.js

@@ -10,6 +10,7 @@ const BottomSheet = ({
   onHide,
   title,
   children,
+  style,
 }) => {
   return (
     <ModalCustom
@@ -22,7 +23,7 @@ const BottomSheet = ({
       useNativeDriverForBackdrop={true}
     >
       <View style={styles.popoverStyle}>
-        <View style={styles.modalWrapper}>
+        <View style={[styles.modalWrapper, style]}>
           {!!title && (
             <View style={styles.modalHeader}>
               <Text semibold style={styles.modalHeaderText}>

package/src/commons/Device/DisconnectedView.js

@@ -42,7 +42,7 @@ const DisplayTextDisconnected = memo(({ type }) => {
   return <Text style={styles.redStatus}>{text}</Text>;
 });
 
-const DisconnectedView = memo(({ sensor, type }) => {
+const DisconnectedView = memo(({ sensor, type, isDeviceHasBle }) => {
   const t = useTranslations();
   return (
     <View style={styles.statusContainer}>
@@ -74,6 +74,12 @@ const DisconnectedView = memo(({ sensor, type }) => {
           <CircleView size={6} backgroundColor={Colors.Gray8} />
           <Text style={styles.noticeText}>{t('check_the_wifi')}</Text>
         </View>
+        {isDeviceHasBle && (
+          <View style={styles.infoRow}>
+            <CircleView size={6} backgroundColor={Colors.Gray8} />
+            <Text style={styles.noticeText}>{t('check_the_ble')}</Text>
+          </View>
+        )}
       </View>
     </View>
   );

package/src/commons/Device/Hanet/ItemHanetDevice.js

@@ -0,0 +1,109 @@
+import React, { memo } from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import Text from '../../Text';
+import FImage from '../../FImage';
+import { Colors } from '../../../configs';
+import { DEVICE_SIZE } from '../../../configs/Constants';
+import Routes from '../../../utils/Route';
+
+const ItemHanetDevice = memo(
+  ({ svgMain, title, sensor, unit, station, wrapStyle }) => {
+    const { navigate } = useNavigation();
+
+    const goToDetail = () => {
+      navigate(Routes.HanetCameraStack, {
+        screen: Routes.HanetCameraDetail,
+        params: {
+          unit,
+          station,
+          sensor,
+          title,
+        },
+      });
+    };
+
+    const displayIconSensor = () => {
+      const iconKit = sensor.icon_kit;
+      return iconKit ? (
+        <FImage source={{ uri: iconKit }} style={styles.iconSensor} />
+      ) : (
+        <IconFill name={svgMain} size={32} color={Colors.Red6} />
+      );
+    };
+
+    return (
+      <TouchableWithoutFeedback onPress={goToDetail}>
+        <View style={[styles.container, wrapStyle]}>
+          <View style={styles.boxIcon}>
+            <TouchableOpacity onPress={goToDetail}>
+              {displayIconSensor()}
+            </TouchableOpacity>
+          </View>
+          <TouchableOpacity onPress={goToDetail}>
+            <Text
+              numberOfLines={1}
+              semibold
+              size={14}
+              color={Colors.Gray9}
+              style={styles.lineHeight22}
+            >
+              {title}
+            </Text>
+            <View style={styles.row}>
+              <IconOutline name="right" size={12} />
+            </View>
+          </TouchableOpacity>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+);
+
+export default ItemHanetDevice;
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 4,
+    width: DEVICE_SIZE.width,
+    height: DEVICE_SIZE.height,
+    backgroundColor: Colors.White,
+    borderColor: Colors.Gray4,
+    justifyContent: 'space-between',
+    marginBottom: 8,
+    borderWidth: 1,
+  },
+  boxIcon: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  lineHeight22: {
+    lineHeight: 22,
+  },
+  iconSensor: {
+    width: 40,
+    height: 40,
+    resizeMode: 'contain',
+  },
+});

package/src/commons/Device/HistoryChart.js

@@ -234,7 +234,7 @@ const HistoryChart = memo(
         )}
         <DateTimePickerModal
           isVisible={eventPicker.showModalStart}
-          date={eventPicker.startTime.toDate()}
+          date={eventPicker.startTime.utc().toDate()}
           mode={formatType || 'datetime'}
           onConfirm={onConfirmStart}
           onCancel={onCancel}
@@ -242,7 +242,7 @@ const HistoryChart = memo(
         />
         <DateTimePickerModal
           isVisible={eventPicker.showModalEnd}
-          date={eventPicker.startTime.toDate()}
+          date={eventPicker.endTime.utc().toDate()}
           mode={formatType || 'datetime'}
           onConfirm={onConfirmEnd}
           onCancel={onCancel}

package/src/commons/Device/HorizontalBarChart.js

@@ -149,6 +149,7 @@ const HorizontalBarChart = memo(({ datas, config }) => {
       <HighchartsReactNative
         styles={styles.chartStyle}
         options={chartOptions}
+        webviewStyles={styles.webviewStyle}
       />
     </View>
   );
@@ -168,4 +169,10 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.White,
     flex: 1,
   },
+  webviewStyle: {
+    flex: 1,
+    minHeight: 200,
+    height: 300,
+    opacity: 0.99,
+  },
 });

package/src/commons/Device/ItemDevice.js

@@ -12,16 +12,12 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 import ItemQuickAction from '../../commons/Action/ItemQuickAction';
 import Text from '../../commons/Text';
 import { isDeviceConnected } from '../../iot/RemoteControl/Bluetooth';
+import { useSCContextSelector } from '../../context';
 
-import { Colors, Constants } from '../../configs';
-import { TESTID, DEVICE_TYPE } from '../../configs/Constants';
+import { Colors } from '../../configs';
+import { TESTID, DEVICE_TYPE, DEVICE_SIZE } from '../../configs/Constants';
 import FImage from '../../commons/FImage';
 
-const marginItem = 12;
-const marginHorizontal = 16;
-const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
-const heightItem = (widthItem / 166) * 106;
-
 const ItemDevice = memo(
   ({
     svgMain,
@@ -30,14 +26,21 @@ const ItemDevice = memo(
     sensor,
     unit,
     station,
-    isNetworkConnected,
     isGGHomeConnected,
+    serverDown,
     status,
     wrapStyle,
   }) => {
     const t = useTranslations();
     const navigation = useNavigation();
 
+    const isBluetoothEnabled = useSCContextSelector(
+      (state) => state.app.isBluetoothEnabled
+    );
+    const isNetworkConnected = useSCContextSelector(
+      (state) => state.app.isNetworkConnected
+    );
+
     const goToSensorDisplay = useCallback(() => {
       navigation.navigate(Routes.DeviceDetail, {
         unitData: unit,
@@ -59,11 +62,11 @@ const ItemDevice = memo(
 
     const isConnectedViaInternet =
       status === undefined
-        ? isNetworkConnected && sensor.is_connected
-        : isNetworkConnected && status.is_connected;
-    const isConnectedViaBLE = isDeviceConnected(
-      sensor?.remote_control_options?.bluetooth?.address
-    );
+        ? !serverDown && isNetworkConnected && sensor.is_connected
+        : !serverDown && isNetworkConnected && status.is_connected;
+    const isConnectedViaBLE =
+      isBluetoothEnabled &&
+      isDeviceConnected(sensor?.remote_control_options?.bluetooth?.address);
     const isConnectedViaGGHome =
       !!sensor &&
       sensor?.is_other_device &&
@@ -129,8 +132,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.1,
     shadowRadius: 3,
     elevation: 4,
-    width: widthItem,
-    height: heightItem,
+    width: DEVICE_SIZE.width,
+    height: DEVICE_SIZE.height,
     backgroundColor: Colors.White,
     justifyContent: 'space-between',
     marginBottom: 8,