@eohjsc/react-native-smart-city 0.5.9 → 0.6.1

package/README.md

@@ -21,6 +21,8 @@
 
 1. StackNavigator
 
+- You can see the screens or components that the library is supporting in the folder `/@eohjsc/react-native-smart-city/index.js`
+
 ```javascript
 import {
   UnitStack,
@@ -38,12 +40,9 @@ import {
 import Config from 'react-native-config';
 import { createStackNavigator } from '@react-navigation/stack';
 
-// TODO: What to do with the module?
 const Stack = createStackNavigator();
 
 const YourStack = () => {
-
-
   useEffect(() => {
     const config = {
       apiRoot: Config.API_ROOT,
@@ -58,8 +57,8 @@ const YourStack = () => {
       language,
       setCurrentSensorDisplay,
       appName: Config.APP_NAME,
-      packageName: Config.APP_PACKAGE_NAME,  //  Your package name is required
-      versionCode: Config.APP_VERSION_CODE,  //  Your app version is required
+      packageName: Config.APP_PACKAGE_NAME, //  Your package name is required
+      versionCode: Config.APP_VERSION_CODE, //  Your app version is required
     };
     initSCConfig(config);
   }, [language, setCurrentSensorDisplay]);
@@ -132,7 +131,46 @@ const MyScreen = () => {
 };
 ```
 
-3. Trigger quick action 
+3. Use navigate to the screens included in the '@eohjsc/react-native-smart-city' library
+
+- You can see the list of screens, currently supported by the library in the folder `/@eohjsc/react-native-smart-city/src/navigations/`
+
+```javascript
+import { useNavigation } from '@react-navigation/native';
+const { navigate } = useNavigation();
+const automate_id = 1;
+const unit_id = 1;
+const sensor_id = 1;
+
+const handleNavigateScriptDetail = () => {
+  navigate('UnitStack', {
+    screen: 'ScriptDetail',
+    params: {
+      id: automate_id,
+    },
+  });
+};
+
+const handleNavigateDeviceDetail = () => {
+  navigate('UnitStack', {
+    screen: 'DeviceDetail',
+      params: {
+        unitId: unit_id,
+        sensorId: sensor_id,
+      },
+  });
+};
+
+<TouchableOpacity onPress={handleNavigateScriptDetail}>
+  <Text>{'Navigate to the "ScriptDetail" screen'}</Text>
+</TouchableOpacity>;
+
+<TouchableOpacity onPress={handleNavigateDeviceDetail}>
+  <Text>{'Navigate to the "DeviceDetail" screen'}</Text>
+</TouchableOpacity>;
+```
+
+4. Trigger quick action
 
 ```javascript
 import React from 'react';

package/package.json

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

package/src/commons/Device/HorizontalBarChart.js

@@ -123,7 +123,7 @@ const HorizontalBarChart = memo(({ datas, config }) => {
         y: item.y,
       };
     });
-    const dataX = (datas[0].data || []).map((item) => item.x);
+    const dataX = (datas[0]?.data || []).map((item) => item.x);
     const maxY = getMaxValueIndex(dataY);
     if (!isEmpty(maxY.max)) {
       dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });

package/src/commons/Device/PowerConsumptionChart.js

@@ -0,0 +1,159 @@
+import React, { memo, useCallback, useState, useMemo, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import moment from 'moment';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+import { Colors } from '../../configs';
+import Text from '../Text';
+import Button from '../Button';
+import CurrencyInput from '../Form/CurrencyInput';
+import DateTimeRangeChange from '../DateTimeRangeChange';
+import HorizontalBarChart from './HorizontalBarChart';
+import ChartAggregationOption from '../ChartAggregationOption';
+import { formatMoney } from '../../utils/Utils';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+
+const PowerConsumptionChart = memo(
+  ({
+    datas,
+    chartConfig,
+    setChartConfig,
+    style,
+    groupBy,
+    setGroupBy,
+    onChangeDate,
+  }) => {
+    const t = useTranslations();
+    const [price, setPrice] = useState(null);
+
+    const onCalculateCost = useCallback(() => {
+      setChartConfig((config) => ({
+        ...config,
+        price,
+      }));
+    }, [setChartConfig, price]);
+
+    const totalPrice = useMemo(() => {
+      const { price: chartPrice } = chartConfig;
+      if (chartPrice === '' || isNaN(chartPrice)) {
+        return null;
+      }
+      const sum = datas[0].data.reduce((a, b) => a + b.y, 0);
+      const roundedSum = sum * chartPrice;
+      return roundedSum.toFixed();
+    }, [datas, chartConfig]);
+
+    const renderChart = useMemo(() => {
+      return <HorizontalBarChart datas={datas} config={chartConfig} />;
+    }, [chartConfig, datas]);
+
+    const [value, setValue] = useState([
+      moment().subtract(6, 'days'),
+      moment(),
+    ]);
+
+    useEffect(() => {
+      onChangeDate(value[0], value[1]);
+    }, [onChangeDate, value]);
+
+    const selectStart = (date) => {
+      setValue((state) => [date, state[1]]);
+    };
+    const selectEnd = (date) => {
+      setValue((state) => [state[0], date]);
+    };
+
+    return (
+      <View style={style}>
+        <View style={styles.historyView}>
+          <View style={styles.titleHistory}>
+            <Text size={20} semibold color={Colors.Gray9}>
+              {t('history')}
+            </Text>
+
+            <ChartAggregationOption groupBy={groupBy} setGroupBy={setGroupBy} />
+          </View>
+          {groupBy === 'date' && (
+            <DateTimeRangeChange
+              startTime={value[0]}
+              endTime={value[1]}
+              selectStart={selectStart}
+              selectEnd={selectEnd}
+            />
+          )}
+        </View>
+
+        <View style={styles.wrapCalculateCost}>
+          <Text type="H4">
+            {t('input_price_to_calculate_electricity_cost')}
+          </Text>
+          <View style={styles.row}>
+            <CurrencyInput
+              value={price}
+              onChange={setPrice}
+              minValue={0}
+              maxValue={100000000}
+              placeholder={'0'}
+              onSubmitEditing={onCalculateCost}
+            />
+            <Button
+              type="primary"
+              title={t('calculate_cost')}
+              onPress={onCalculateCost}
+              style={styles.buttonCalculate}
+              textSemiBold={false}
+              accessibilityLabel={AccessibilityLabel.BUTTON_CALCULATE_COST}
+            />
+          </View>
+        </View>
+
+        {renderChart}
+        {!!chartConfig.price && (
+          <Text type="H4">
+            {t('total_power_price')}{' '}
+            <Text bold accessibilityLabel={AccessibilityLabel.TOTAL_PRICE}>
+              {formatMoney(totalPrice)}
+            </Text>
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+
+export default PowerConsumptionChart;
+
+const styles = StyleSheet.create({
+  historyView: {
+    paddingTop: 16,
+  },
+  titleHistory: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  chartInfo: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  chartContainer: {
+    marginLeft: -8,
+  },
+  chart: {
+    height: 300,
+  },
+  wrapCalculateCost: {
+    marginTop: 12,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonCalculate: {
+    width: null,
+    flex: null,
+    paddingHorizontal: 12,
+  },
+});

package/src/commons/Device/ProgressBar/__test__/ProgressBar.test.js

@@ -18,8 +18,7 @@ describe('Test ProgressBar', () => {
   it('render ProgressBar', async () => {
     const item = {
       label: 'Value bar',
-      configuration: { max_value: 100 },
-      value: 8,
+      configuration: { min_value: 0, max_value: 100 },
     };
     const data = [{ value: 10, unit: 'oC' }];
     await act(async () => {
@@ -28,6 +27,6 @@ describe('Test ProgressBar', () => {
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
     expect(texts[0].props.children).toBe('Value bar');
-    expect(texts[1].props.children).toEqual('Max value: 100 oC');
+    expect(texts[1].props.children).toEqual('0 oC');
   });
 });

package/src/commons/Device/ProgressBar/index.js

@@ -3,53 +3,51 @@ import { View } from 'react-native';
 import * as Progress from 'react-native-progress';
 
 import { Colors } from '../../../configs';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Text from '../../Text';
 import styles from './styles';
 
 const ProgressBar = memo(({ data = [], item, isWidgetOrder }) => {
-  const t = useTranslations();
-
-  const minValue = useMemo(() => {
-    return Number(item?.configuration?.min_value) || 0;
-  }, [item?.configuration?.min_value]);
-  const maxValue = useMemo(() => {
-    return Number(item?.configuration?.max_value) || 60;
-  }, [item?.configuration?.max_value]);
-
-  let { value = 0, measure, unit } = data.length ? data[0] : {};
-  const isNotValue = ['', null, undefined, NaN].includes(value);
-
-  if (isNotValue) {
-    value = minValue;
-  }
+  const {
+    configuration: { max_value, min_value },
+    label,
+  } = item;
+  const { value = 0, unit } = data.length ? data[0] : {};
+  const isNotValue = useMemo(
+    () => ['', null, undefined, NaN].includes(value),
+    [value]
+  );
 
-  const distance = maxValue - minValue;
-  const percent = (value - minValue) / distance;
+  const displayedValue = isNotValue ? min_value : value;
+  const distance = max_value - min_value;
+  const percent = (displayedValue - min_value) / distance;
 
   return (
-    <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.container}>
-      <Text size={16} style={styles.textLabel}>
-        {item?.label || 'Label'}
+    <>
+      <Text type="H3" semibold color={Colors.Gray9} style={styles.textLabel}>
+        {label}
       </Text>
-
-      <Text size={16} style={styles.textMaxValue}>
-        {`${t('max_value')}: ${maxValue} ${unit || measure}`}
-      </Text>
-
-      <View style={styles.wrapProgressBar}>
-        <Progress.Bar
-          style={styles.progressBar}
-          width={null}
-          height={40}
-          progress={percent}
-          unfilledColor={Colors.Blue15}
-        />
-        <Text numberOfLines={1} style={styles.textValue}>
-          {isNotValue ? '--' : value}
-        </Text>
+      <View style={isWidgetOrder ? styles.wrapOrderItem : styles.container}>
+        <View style={styles.boxProgress}>
+          <View style={styles.boxMaxMinValue}>
+            <Text style={styles.textMaxMinValue}>{`${min_value} ${unit}`}</Text>
+            <Text style={styles.textMaxMinValue}>{`${max_value} ${unit}`}</Text>
+          </View>
+          <Progress.Bar
+            style={styles.progressBar}
+            width={null}
+            height={40}
+            progress={percent}
+            unfilledColor={Colors.Blue15}
+          />
+        </View>
+        <View>
+          <Text
+            bold
+            style={styles.textValue}
+          >{`${displayedValue} ${unit}`}</Text>
+        </View>
       </View>
-    </View>
+    </>
   );
 });
 

package/src/commons/Device/ProgressBar/styles.js

@@ -4,44 +4,38 @@ import { Colors } from '../../../configs';
 
 export default StyleSheet.create({
   container: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  boxProgress: {
     flex: 1,
-    flexDirection: 'column', //column direction
-    marginHorizontal: 30,
-    borderWidth: 1,
-    padding: 16,
-    borderRadius: 8,
-    borderColor: Colors.Gray4,
-    marginBottom: 12,
+    flexDirection: 'column',
+    padding: 15,
+  },
+  boxMaxMinValue: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   wrapOrderItem: {
     flex: 1,
-    padding: 16,
-    flexDirection: 'column',
+    padding: 15,
+    flexDirection: 'row',
   },
   textLabel: {
-    marginLeft: 8,
+    marginLeft: 15,
     paddingTop: 8,
   },
-  textMaxValue: {
-    marginTop: 20,
+  textMaxMinValue: {
     marginBottom: 2,
     textAlign: 'left',
-    fontWeight: 'bold',
-    textTransform: 'uppercase',
+  },
+  textValue: {
+    paddingTop: 48,
+    marginRight: 8,
   },
   progressBar: {
-    flex: 1,
     color: Colors.Blue16,
     borderWidth: 0,
     borderRadius: 10,
   },
-  wrapProgressBar: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  textValue: {
-    marginLeft: 8,
-  },
 });

package/src/commons/Form/CurrencyInput.js

@@ -15,6 +15,7 @@ import {
 import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
 import Text from '../Text';
 import { Colors } from '../../configs';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
 const formatNumber = (input, options) => {
   const {
@@ -151,6 +152,7 @@ const CurrencyInput = ({
           onSubmitEditing={onSubmitEditing}
           style={styles.input}
           maxLength={10}
+          accessibilityLabel={AccessibilityLabel.INPUT_CALCULATE_COST}
         />
         <Text
           semibold

package/src/commons/UnitSummary/ConfigHistoryChart/index.js

@@ -1,8 +1,7 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 import moment from 'moment';
 
 import { API } from '../../../configs';
-import HistoryChart from '../../../commons/Device/HistoryChart';
 import { axiosGet } from '../../../utils/Apis/axios';
 import { getPusher } from '../../../utils/Pusher';
 
@@ -39,11 +38,12 @@ export const useFetchConfigHistory = (
       });
 
       const timezone = moment().utcOffset();
-      startDate = startDate.subtract(timezone, 'minutes');
-      endDate = endDate.subtract(timezone, 'minutes');
 
-      params.append('date_from', startDate.format('YYYY-MM-DDTHH:mm:ss'));
-      params.append('date_to', endDate.format('YYYY-MM-DDTHH:mm:ss'));
+      const date_from = moment(startDate).subtract(timezone, 'minutes');
+      const date_to = moment(endDate).subtract(timezone, 'minutes');
+
+      params.append('date_from', date_from.format('YYYY-MM-DDTHH:mm:ss'));
+      params.append('date_to', date_to.format('YYYY-MM-DDTHH:mm:ss'));
 
       const { success, data } = await axiosGet(endpoint, {
         params,
@@ -122,58 +122,3 @@ export const updateConfigChart = async (
     }
   });
 };
-
-let timeoutId;
-
-const ConfigHistoryChart = ({ configs }) => {
-  const [chartData, setChartData] = useState(configs);
-  const [startDate, setStartDate] = useState(
-    moment().subtract(1, 'days').valueOf()
-  );
-  const [endDate, setEndDate] = useState(moment().valueOf());
-
-  useEffect(() => {
-    const fetchData = async () => {
-      let params = new URLSearchParams();
-      let configuration = configs.filter((item) => item.id);
-      configuration.map((item) => {
-        params.append('configs', item.id);
-      });
-      params.append(
-        'date_from',
-        moment(startDate).utc().format('YYYY-MM-DD HH:mm:ss')
-      );
-      params.append(
-        'date_to',
-        moment(endDate).utc().format('YYYY-MM-DD HH:mm:ss')
-      );
-      const { success, data } = await axiosGet(
-        API.CONFIG.DISPLAY_HISTORY_V3(),
-        {
-          params,
-        }
-      );
-      updateConfigChart(success, data, configuration, setChartData);
-    };
-
-    timeoutId = setTimeout(fetchData, 200);
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, [startDate, endDate, configs]);
-
-  if (!chartData.length) {
-    return false;
-  }
-
-  return (
-    <HistoryChart
-      configuration={{ type: 'line_chart', date_format: 'DD.MM' }}
-      datas={chartData}
-      setStartDate={setStartDate}
-      setEndDate={setEndDate}
-    />
-  );
-};
-
-export default ConfigHistoryChart;

package/src/commons/Widgets/IFrame/IFrame.js

@@ -0,0 +1,54 @@
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+
+import { styles } from './IFrameStyles';
+import IconComponent from '../../IconComponent';
+import WebView from 'react-native-webview';
+import { TouchableOpacity, View } from 'react-native';
+
+const IFrame = memo(
+  ({ item = {}, widgetStyle, isWidgetBox, isSetting, isEditing }) => {
+    const ref = useRef();
+    const [urlWithEnv, setUrlWithEnv] = useState();
+
+    const { configuration } = item;
+    const { url } = configuration || {};
+
+    const reload = useCallback(() => {
+      ref.current.reload();
+    }, []);
+
+    useEffect(() => {
+      if (!url) {
+        return;
+      }
+      if (!url.includes('?')) {
+        setUrlWithEnv(
+          `${url}?eraOrigin=${window.location.origin}&eraWidget=${item?.id}`
+        );
+      } else {
+        setUrlWithEnv(
+          `${url}&eraOrigin=${window.location.origin}&eraWidget=${item?.id}`
+        );
+      }
+    }, [item?.id, url]);
+
+    return (
+      <View>
+        <TouchableOpacity
+          style={isEditing ? styles.reloadButtonEditing : styles.reloadButton}
+          onClick={reload}
+        >
+          <IconComponent icon="ReloadOutlined" />
+        </TouchableOpacity>
+        <WebView
+          source={{ uri: urlWithEnv }}
+          style={styles.iframe}
+          ref={ref}
+          title={item?.title}
+        />
+      </View>
+    );
+  }
+);
+
+export default IFrame;

package/src/commons/Widgets/IFrame/IFrameStyles.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export const styles = StyleSheet.create({
+  iframe: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    paddingHorizontal: 16,
+  },
+  reloadButton: {
+    position: 'absolute',
+    right: 16,
+    top: 5,
+    border: '1px solid #E6E6E6',
+    backgroundColor: Colors.White,
+  },
+  reloadButtonEditing: {
+    position: 'absolute',
+    right: 77,
+    top: 0,
+    width: 36,
+    marginLeft: 2,
+    paddingTop: 5,
+    paddingBottom: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    backgroundColor: Colors.White,
+    border: '1px solid #E6E6E6',
+  },
+  settingWidget: {
+    width: 256,
+  },
+});