@eohjsc/react-native-smart-city 0.7.24 → 0.7.26

package/src/screens/Device/__test__/sensorDisplayItem.test.js

@@ -18,6 +18,7 @@ import MockAdapter from 'axios-mock-adapter';
 import api from '../../../utils/Apis/axios';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
 import LabelValue from '../../../commons/Device/LabelValue';
+import Text from '../../../commons/Text';
 
 jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{}, null],
@@ -51,6 +52,7 @@ describe('Test SensorDisplayItem', () => {
           },
         ],
       },
+      label: 'Chart',
       is_configuration_ready: true,
     };
 
@@ -65,6 +67,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const visualChart = instance.findAllByType(VisualChart);
     expect(visualChart).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Chart');
   });
 
   it('render ActionGroup', async () => {
@@ -82,6 +86,7 @@ describe('Test SensorDisplayItem', () => {
           },
         ],
       },
+      label: 'LED',
       is_configuration_ready: true,
     };
 
@@ -96,6 +101,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const actionGroup = instance.findAllByType(ActionGroup);
     expect(actionGroup).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('LED');
   });
 
   it('render camera', async () => {
@@ -113,6 +120,7 @@ describe('Test SensorDisplayItem', () => {
           },
         ],
       },
+      label: 'Camera',
       is_configuration_ready: true,
     };
 
@@ -127,6 +135,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const mediaPlayerDetail = instance.findAllByType(MediaPlayerDetail);
     expect(mediaPlayerDetail).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Camera');
   });
 
   it('render flat_list', async () => {
@@ -213,6 +223,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         template: 'gauge',
       },
+      label: 'Gauge',
       is_configuration_ready: true,
     };
 
@@ -227,6 +238,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const flatListItems = instance.findAllByType(Anemometer);
     expect(flatListItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Gauge');
   });
 
   it('test render progress_bar', async () => {
@@ -237,6 +250,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         template: 'progress_bar',
       },
+      label: 'Brightness',
       is_configuration_ready: true,
     };
 
@@ -251,6 +265,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const flatListItems = instance.findAllByType(ProgressBar);
     expect(flatListItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Brightness');
   });
 
   it('test render Compass', async () => {
@@ -261,6 +277,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         template: 'compass',
       },
+      label: 'Compass',
       is_configuration_ready: true,
     };
 
@@ -275,6 +292,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const flatListItems = instance.findAllByType(Compass);
     expect(flatListItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Compass');
   });
 
   it('test render alert_status', async () => {
@@ -314,6 +333,8 @@ describe('Test SensorDisplayItem', () => {
 
     const currentRainSensor = instance.findByType(CurrentRainSensor);
     expect(currentRainSensor.props).toEqual(expectProps);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Circle');
   };
 
   it('render circle_mini', async () => {
@@ -332,6 +353,7 @@ describe('Test SensorDisplayItem', () => {
           color: 'blue',
         },
       },
+      label: 'Circle',
       is_configuration_ready: true,
     };
 
@@ -371,6 +393,7 @@ describe('Test SensorDisplayItem', () => {
           color: 'blue',
         },
       },
+      label: 'Circle',
       is_configuration_ready: true,
     };
 
@@ -400,6 +423,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         config: null,
       },
+      label: 'Circle',
       is_configuration_ready: true,
     };
 
@@ -417,6 +441,7 @@ describe('Test SensorDisplayItem', () => {
       order: 0,
       template: 'LabelValue',
       configuration: {},
+      label: 'Label',
       is_configuration_ready: true,
     };
 
@@ -431,5 +456,7 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const displayItems = instance.findAllByType(LabelValue);
     expect(displayItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Label');
   });
 });

package/src/screens/Device/components/DonutChart.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Colors } from '../../../configs';
-import Text from '../../../commons/Text';
 import Highcharts from '../../../commons/Highcharts';
 import { useConfigGlobalState } from '../../../iot/states';
 
@@ -63,7 +62,7 @@ const chartOptions = {
 };
 
 const DonutCharts = ({ item, isWidgetOrder }) => {
-  const { configuration, label } = item;
+  const { configuration } = item;
   const { configs = [] } = configuration;
   const [configValues] = useConfigGlobalState('configValues');
   const [highchartsWebviewRef, setHighchartsWebviewRef] = useState(null);
@@ -92,13 +91,7 @@ const DonutCharts = ({ item, isWidgetOrder }) => {
   }, [configs, getConfigValue, highchartsWebviewRef]);
 
   return (
-    <View>
-      <View style={styles.titleHistory}>
-        <Text type="H3" semibold color={Colors.Gray9}>
-          {label}
-        </Text>
-      </View>
-
+    <View style={styles.wrapDonut}>
       <Highcharts
         setRef={setHighchartsWebviewRef}
         options={chartOptions}
@@ -113,15 +106,13 @@ const DonutCharts = ({ item, isWidgetOrder }) => {
 };
 
 const styles = StyleSheet.create({
+  wrapDonut: {
+    marginBottom: 16,
+  },
   chartStyle: {
     backgroundColor: Colors.White,
     flex: 1,
   },
-  titleHistory: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-  },
   webviewStyle: {
     flex: 1,
     minHeight: 200,

package/src/screens/Device/components/SensorDisplayItem.js

@@ -15,7 +15,7 @@ import Compass from '../../../commons/Device/WindDirection/Compass';
 import Anemometer from '../../../commons/Device/WindSpeed/Anemometer';
 import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
 import IFrame from '../../../commons/Widgets/IFrame/IFrame';
-import IFrameWithConfig from '../../../commons/Widgets/IFrameWithConfig/IFrameWithConfig';
+import Text from '../../../commons/Text';
 import { Device } from '../../../configs';
 import { AccessibilityLabel, WIDGET_TYPE } from '../../../configs/Constants';
 import { useSCContextSelector } from '../../../context';
@@ -44,7 +44,7 @@ export const SensorDisplayItem = ({
   isWidgetOrder,
 }) => {
   const userId = useSCContextSelector((state) => state.auth.account.user.id);
-  const { configuration = {}, id: idTemplate } = item;
+  const { configuration = {}, id: idTemplate, label } = item;
   const { type, template, uri, id, name, title, value_evaluation } =
     configuration;
 
@@ -137,6 +137,7 @@ export const SensorDisplayItem = ({
         <View
           style={[styles.mediaContainer, isWidgetOrder && styles.cameraOrder]}
         >
+          <Text style={styles.widgetLabelCamera}>{label}</Text>
           <MediaPlayerDetail
             uri={uri}
             thumbnail={{
@@ -169,92 +170,117 @@ export const SensorDisplayItem = ({
     case 'switch_button_action_template':
     case 'TextBoxTemplate':
     case 'TerminalBoxTemplate':
+    case WIDGET_TYPE.iframeWithConfig:
       return (
-        <ActionGroup
-          accessibilityLabel={AccessibilityLabel.DEVICE_DETAIL_ACTION_GROUP}
-          doAction={doAction}
-          sensor={sensor}
-          id={idTemplate}
-          item={item}
-          isWidgetOrder={isWidgetOrder}
-        />
+        <View>
+          <Text style={styles.widgetLabel}>{label}</Text>
+          <ActionGroup
+            accessibilityLabel={AccessibilityLabel.DEVICE_DETAIL_ACTION_GROUP}
+            doAction={doAction}
+            sensor={sensor}
+            id={idTemplate}
+            item={item}
+            isWidgetOrder={isWidgetOrder}
+          />
+        </View>
       );
     case WIDGET_TYPE.iframe:
       return (
-        <IFrame
-          doAction={doAction}
-          sensor={sensor}
-          id={idTemplate}
-          item={item}
-          isWidgetOrder={isWidgetOrder}
-        />
-      );
-    case WIDGET_TYPE.iframeWithConfig:
-      return (
-        <IFrameWithConfig
-          doAction={doAction}
-          sensor={sensor}
-          id={idTemplate}
-          item={item}
-          isWidgetOrder={isWidgetOrder}
-        />
+        <View>
+          <Text style={styles.widgetLabel}>{label}</Text>
+          <IFrame
+            doAction={doAction}
+            sensor={sensor}
+            id={idTemplate}
+            item={item}
+            isWidgetOrder={isWidgetOrder}
+          />
+        </View>
       );
     case 'history':
       return (
-        <VisualChart
-          item={item}
-          sensor={sensor}
-          isWidgetOrder={isWidgetOrder}
-        />
+        <View>
+          <Text style={styles.widgetLabelHistory}>{label}</Text>
+          <VisualChart
+            item={item}
+            sensor={sensor}
+            isWidgetOrder={isWidgetOrder}
+          />
+        </View>
       );
     case 'circle_mini':
       return (
-        <CurrentRainSensor
-          size={120}
-          textType="H4"
-          iconSize={25}
-          data={getDataCircleMini(item)}
-          isWidgetOrder={isWidgetOrder}
-        />
+        <View>
+          <Text style={styles.widgetLabel}>{label}</Text>
+          <CurrentRainSensor
+            size={120}
+            textType="H4"
+            iconSize={25}
+            data={getDataCircleMini(item)}
+            isWidgetOrder={isWidgetOrder}
+          />
+        </View>
       );
     // use the same method to get data for circle_mini
     case 'LabelValue':
       return (
-        <LabelValue
-          data={getDataCircleMini(item)}
-          item={item}
-          isWidgetOrder={isWidgetOrder}
-        />
+        <View>
+          <Text style={styles.widgetLabel}>{label}</Text>
+          <LabelValue
+            data={getDataCircleMini(item)}
+            item={item}
+            isWidgetOrder={isWidgetOrder}
+          />
+        </View>
       );
     case 'value':
       switch (type || template) {
         case 'circle':
           return (
-            <CurrentRainSensor
-              data={getData(item)}
-              isWidgetOrder={isWidgetOrder}
-            />
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <CurrentRainSensor
+                data={getData(item)}
+                isWidgetOrder={isWidgetOrder}
+              />
+            </View>
           );
         case 'simple_list':
           return (
-            <PMSensorIndicator
-              data={getData(item)}
-              style={styles.simpleList}
-              isWidgetOrder={isWidgetOrder}
-            />
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <PMSensorIndicator
+                data={getData(item)}
+                style={styles.simpleList}
+                isWidgetOrder={isWidgetOrder}
+              />
+            </View>
           );
         case 'gauge':
-          return <Anemometer data={getData(item)} item={item} />;
+          return (
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <Anemometer data={getData(item)} item={item} />
+            </View>
+          );
         case 'progress_bar':
           return (
-            <ProgressBar
-              data={getData(item)}
-              item={item}
-              isWidgetOrder={isWidgetOrder}
-            />
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <ProgressBar
+                data={getData(item)}
+                item={item}
+                isWidgetOrder={isWidgetOrder}
+              />
+            </View>
           );
         case 'compass':
-          return <Compass data={getData(item)} isWidgetOrder={isWidgetOrder} />;
+          return (
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <Compass data={getData(item)} isWidgetOrder={isWidgetOrder} />
+            </View>
+          );
         case 'alert_status':
           return (
             <DeviceAlertStatus
@@ -274,7 +300,12 @@ export const SensorDisplayItem = ({
             />
           );
         case 'donut_chart_race':
-          return <DonutCharts item={item} isWidgetOrder={isWidgetOrder} />;
+          return (
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <DonutCharts item={item} isWidgetOrder={isWidgetOrder} />
+            </View>
+          );
         default:
           return <ListQualityIndicator data={getData(item)} />;
       }

package/src/screens/Device/components/VisualChart.js

@@ -13,7 +13,6 @@ import { useFetchConfigHistory } from '../../../commons/UnitSummary/ConfigHistor
 import { StyleSheet, View } from 'react-native';
 import { Colors } from '../../../configs';
 import ChartAggregationOption from '../../../commons/ChartAggregationOption';
-import Text from '../../../commons/Text';
 import { CHART_GROUP_TYPE, CHART_TIME } from '../../../configs/Constants';
 import { getDateRangeOfWeek } from '../../../utils/Utils';
 import Highcharts from '../../../commons/Highcharts';
@@ -113,16 +112,10 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.White,
     flex: 1,
   },
-  titleHistory: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-  },
   aggregationView: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 16,
-    paddingTop: 8,
     alignSelf: 'flex-end',
   },
   webviewStyle: {
@@ -312,11 +305,6 @@ const VisualChart = ({ item, isDemo = false, isWidgetOrder }) => {
 
   return (
     <View style={styles.container}>
-      <View style={styles.titleHistory}>
-        <Text type="H3" semibold color={Colors.Gray9}>
-          {item.label}
-        </Text>
-      </View>
       <View style={styles.aggregationView}>
         {canChooseGroup && (
           <ChartAggregationOption

package/src/screens/Device/detail.js

@@ -21,6 +21,7 @@ import {
   useAlertResolveEmergency,
   useEmergencyButton,
 } from './hooks/useEmergencyButton';
+import { useDashboardDevice } from './hooks/useDashboardDevice';
 import { useFavoriteDevice } from './hooks/useFavoriteDevice';
 import { usePopover } from '../../hooks/Common';
 import { setConfigGlobalState, getConfigGlobalState } from '../../iot/states';
@@ -172,6 +173,9 @@ const DeviceDetail = ({ route }) => {
     [display.items]
   );
 
+  const { isPinnedDashboard, addToDashboard, removeFromDashboard } =
+    useDashboardDevice(device);
+
   const { isFavorite, addToFavorites, removeFromFavorites } =
     useFavoriteDevice(device);
 
@@ -333,6 +337,30 @@ const DeviceDetail = ({ route }) => {
 
   const listMenuItem = useMemo(() => {
     const menuItems = [];
+
+    if (!isPinnedDashboard) {
+      menuItems.push({
+        doAction: addToDashboard,
+        text: t('add_to_dashboard'),
+      });
+    } else {
+      menuItems.push({
+        doAction: removeFromDashboard,
+        text: t('remove_from_dashboard'),
+      });
+    }
+    if (!isFavorite) {
+      menuItems.push({
+        doAction: addToFavorites,
+        text: t('add_to_favorites'),
+      });
+    } else {
+      menuItems.push({
+        doAction: removeFromFavorites,
+        text: t('remove_from_favorites'),
+      });
+    }
+
     if (display.items.some((i) => getActionComponent(i.template))) {
       menuItems.push({
         route: Routes.ActivityLog,
@@ -443,17 +471,6 @@ const DeviceDetail = ({ route }) => {
         text: t('passcode_list'),
       });
     }
-    if (!isFavorite) {
-      menuItems.unshift({
-        doAction: addToFavorites,
-        text: t('add_to_favorites'),
-      });
-    } else {
-      menuItems.unshift({
-        doAction: removeFromFavorites,
-        text: t('remove_from_favorites'),
-      });
-    }
     return [...menuItems];
   }, [
     display,
@@ -462,6 +479,7 @@ const DeviceDetail = ({ route }) => {
     sideMenu,
     t,
     isShowSetUpSmartLock,
+    isPinnedDashboard,
     isFavorite,
     device,
     unit,
@@ -471,7 +489,9 @@ const DeviceDetail = ({ route }) => {
     fetchDataDeviceDetail,
     isMyUnitDeviceScreen,
     emergencyDeviceId,
+    addToDashboard,
     addToFavorites,
+    removeFromDashboard,
     removeFromFavorites,
   ]);
 
@@ -729,6 +749,19 @@ const DeviceDetail = ({ route }) => {
   const HeaderRight = useMemo(
     () => (
       <View style={styles.headerRight}>
+        <TouchableOpacity
+          onPress={isPinnedDashboard ? removeFromDashboard : addToDashboard}
+          accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_PIN}
+        >
+          <View style={styles.buttonStar}>
+            {isPinnedDashboard ? (
+              <IconFill name="pushpin" size={25} color={Colors.Yellow6} />
+            ) : (
+              <IconOutline name="pushpin" size={25} />
+            )}
+          </View>
+        </TouchableOpacity>
+
         <TouchableOpacity
           onPress={isFavorite ? removeFromFavorites : addToFavorites}
           accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_STAR}
@@ -761,12 +794,15 @@ const DeviceDetail = ({ route }) => {
       </View>
     ),
     [
+      isPinnedDashboard,
       isFavorite,
-      removeFromFavorites,
-      addToFavorites,
       isShowSetupEmergencyContact,
-      onPressSetting,
+      addToDashboard,
+      addToFavorites,
+      removeFromDashboard,
+      removeFromFavorites,
       handleShowMenuAction,
+      onPressSetting,
     ]
   );
 

package/src/screens/Device/hooks/useDashboardDevice.js

@@ -0,0 +1,34 @@
+import { useContext, useCallback } from 'react';
+import { API } from '../../../configs';
+import { SCContext, useSCContextSelector } from '../../../context';
+import { Action } from '../../../context/actionType';
+import { axiosPost } from '../../../utils/Apis/axios';
+
+export const useDashboardDevice = (device) => {
+  const { setAction } = useContext(SCContext);
+  const dashboardDeviceIds = useSCContextSelector(
+    (state) => state.unit.dashboardDeviceIds
+  );
+
+  const isPinnedDashboard = dashboardDeviceIds.includes(device.id);
+
+  const addToDashboard = useCallback(async () => {
+    const { success } = await axiosPost(API.DEVICE.ADD_TO_DASHBOARD(device.id));
+    success && setAction(Action.ADD_DEVICES_TO_DASHBOARD, [device.id]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [device.id]);
+
+  const removeFromDashboard = useCallback(async () => {
+    const { success } = await axiosPost(
+      API.DEVICE.REMOVE_FROM_DASHBOARD(device.id)
+    );
+    success && setAction(Action.REMOVE_DEVICES_FROM_DASHBOARD, [device.id]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [device.id]);
+
+  return {
+    isPinnedDashboard,
+    addToDashboard,
+    removeFromDashboard,
+  };
+};

package/src/screens/Device/styles.js

@@ -99,4 +99,20 @@ export default StyleSheet.create({
     marginLeft: 16,
     marginBottom: 16,
   },
+  widgetLabel: {
+    fontSize: 16,
+    color: Colors.Black,
+    marginHorizontal: 20,
+    marginBottom: 4,
+  },
+  widgetLabelCamera: {
+    fontSize: 16,
+    color: Colors.Black,
+    marginBottom: 4,
+  },
+  widgetLabelHistory: {
+    fontSize: 16,
+    color: Colors.Black,
+    marginHorizontal: 20,
+  },
 });