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

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/index.js

@@ -0,0 +1,249 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { SafeAreaView, View, ScrollView } from 'react-native';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+
+import Text from '../../../Text';
+import { HeaderCustom } from '../../../Header';
+import { useBoolean } from '../../../../hooks/Common';
+import WheelDateTimePicker from '../../../WheelDateTimePicker';
+import RecurringDetail from '../../../../screens/GuestInfo/components/RecurringDetail';
+import TemporaryDetail from '../../../../screens/GuestInfo/components/TemporaryDetail';
+import AccessScheduleItem from '../../../../screens/GuestInfo/components/AccessScheduleItem';
+import BottomButtonView from '../../../BottomButtonView';
+import { ACCESS_SCHEDULE } from '../../../../screens/GuestInfo/constant';
+import { TESTID } from '../../../../configs/Constants';
+import ButtonWrapper from './ButtonWrapper';
+import moment from 'moment';
+import styles from './SetupGeneratePasscodeStyles';
+
+const SetupGeneratePasscode = memo(() => {
+  const t = useTranslations();
+  const [accessSchedule, setAccessSchedule] = useState('always');
+  const [isSelectCircle, setIsSelectCircle] = useState(false);
+  const [showTimePicker, setShowTimePicker, setHideTimePicker] = useBoolean();
+  const [
+    showTimePickerMinute,
+    setShowTimePickerMinute,
+    setHideTimePickerMinute,
+  ] = useBoolean();
+  const [lockShowing, releaseLockShowing, acquireLockShowing] =
+    useBoolean(true);
+
+  const [stateDateTimePicker, setStateDateTimePicker] = useState({
+    isVisible: false,
+    mode: 'time',
+    defaultValue: moment().valueOf(),
+    setter: null,
+  });
+  const [recurringTimeStart, setRecurringTimeStart] = useState(
+    '2022-03-08T17:00:00.551Z'
+  );
+  const [recurringTimeEnd, setRecurringTimeEnd] = useState(
+    '2022-03-08T17:00:00.902Z'
+  );
+  const [recurringTimeRepeat, setRecurringTimeRepeat] = useState(
+    '2022-03-08T17:00:00.902Z'
+  );
+  const [temporaryTimeStart, setTemporaryTimeStart] = useState(
+    '2022-03-08T17:00:00.902Z'
+  );
+  const [temporaryTimeEnd, setTemporaryTimeEnd] = useState(
+    '2022-03-08T17:00:00.902Z'
+  );
+
+  const [time, setTime] = useState(
+    '22-10-2019'.time_repeat
+      ? moment(22 - 10 - 2019, 'HH:mm:ss')
+      : moment().second(0)
+  );
+
+  const [minute, setMinute] = useState(0);
+
+  const onTimePicked = useCallback(
+    (timeData) => {
+      setTime(moment(timeData));
+    },
+    [setTime]
+  );
+
+  const onMinutePicked = useCallback((timeData) => {
+    const date = new Date(moment(timeData));
+    const minutes = date.getMinutes();
+    setMinute(minutes);
+  }, []);
+
+  const onShowSetDateTime = useCallback(
+    (currentValue, setter, mode) => {
+      releaseLockShowing();
+      setStateDateTimePicker((state) => ({
+        ...state,
+        isVisible: true,
+        mode: mode,
+        defaultValue: currentValue,
+        setter: setter,
+      }));
+    },
+    [releaseLockShowing]
+  );
+
+  const onHideSetDateTime = useCallback(() => {
+    acquireLockShowing();
+    setStateDateTimePicker((state) => ({
+      ...state,
+      isVisible: false,
+    }));
+  }, [setStateDateTimePicker, acquireLockShowing]);
+
+  const onDateTimePicked = useCallback(
+    (timeData) => {
+      const setter = stateDateTimePicker.setter;
+      setter && setter(moment(timeData));
+    },
+    [stateDateTimePicker]
+  );
+
+  const listAccessSchedule = useMemo(
+    () => [
+      {
+        text: t(`${ACCESS_SCHEDULE.ALWAYS}`),
+        value: ACCESS_SCHEDULE.ALWAYS,
+        detail: () => <></>,
+      },
+      {
+        text: t(`${ACCESS_SCHEDULE.RECURRING}`),
+        value: ACCESS_SCHEDULE.RECURRING,
+        detail: () => (
+          <RecurringDetail
+            onShowSetDateTime={onShowSetDateTime}
+            recurringTimeStart={recurringTimeStart}
+            recurringTimeEnd={recurringTimeEnd}
+            recurringTimeRepeat={recurringTimeRepeat}
+            setRecurringTimeStart={setRecurringTimeStart}
+            setRecurringTimeEnd={setRecurringTimeEnd}
+            setRecurringTimeRepeat={setRecurringTimeRepeat}
+          />
+        ),
+      },
+      {
+        text: t(`${ACCESS_SCHEDULE.TEMPORARY}`),
+        value: ACCESS_SCHEDULE.TEMPORARY,
+        detail: () => (
+          <TemporaryDetail
+            onShowSetDateTime={onShowSetDateTime}
+            temporaryTimeStart={temporaryTimeStart}
+            temporaryTimeEnd={temporaryTimeEnd}
+            setTemporaryTimeStart={setTemporaryTimeStart}
+            setTemporaryTimeEnd={setTemporaryTimeEnd}
+          />
+        ),
+      },
+    ],
+    [
+      onShowSetDateTime,
+      recurringTimeEnd,
+      recurringTimeRepeat,
+      recurringTimeStart,
+      t,
+      temporaryTimeEnd,
+      temporaryTimeStart,
+    ]
+  );
+
+  const handleSetTime = useCallback(() => {
+    setShowTimePicker();
+    setStateDateTimePicker((state) => ({
+      ...state,
+      mode: 'time',
+    }));
+  }, [setShowTimePicker]);
+
+  const handleSetMinute = useCallback(() => {
+    setShowTimePickerMinute();
+    setStateDateTimePicker((state) => ({
+      ...state,
+      mode: 'minute',
+    }));
+  }, [setShowTimePickerMinute]);
+
+  const handleSelectCircle = useCallback(() => {
+    setIsSelectCircle(!isSelectCircle);
+  }, [isSelectCircle]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <HeaderCustom
+        title={t('setup_generate_passcode')}
+        titleStyle={styles.title}
+        isShowSeparator
+      />
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+        style={styles.scrollview}
+      >
+        <View style={styles.wrap}>
+          <ButtonWrapper
+            textHeadline={t('choose_user')}
+            value={'Name'}
+            isButtonChooseUser
+            testID={TESTID.GENERATE_PASSCODE_CHOOSE_USER}
+          />
+          <ButtonWrapper
+            textHeadline={t('set_time')}
+            valueTime={time.format('HH:mm')}
+            onPressSetTime={handleSetTime}
+            isButtonSetTime
+            testID={TESTID.GENERATE_PASSCODE_SET_TIME}
+          />
+          <ButtonWrapper
+            textHeadline={t('duration')}
+            textMinutes={t('minutes')}
+            valueMinute={minute}
+            onPressSetMinute={handleSetMinute}
+            onPressSelectCircle={handleSelectCircle}
+            isButtonDuration
+            isSelectCircle={isSelectCircle}
+            testID={TESTID.GENERATE_PASSCODE_SET_DURATION}
+          />
+          <View>
+            <Text style={styles.textHeadLine}>{t('access_schedule')}</Text>
+            {listAccessSchedule.map((item, index) => (
+              <AccessScheduleItem
+                key={index}
+                item={item}
+                isSelected={item.value === accessSchedule}
+                onSelect={setAccessSchedule}
+                isSetupGeneratePasscode
+              />
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+      <WheelDateTimePicker
+        mode={stateDateTimePicker.mode}
+        isVisible={showTimePicker}
+        defaultValue={time.valueOf()}
+        onCancel={setHideTimePicker}
+        onPicked={onTimePicked}
+      />
+      <WheelDateTimePicker
+        mode={stateDateTimePicker.mode}
+        isVisible={showTimePickerMinute}
+        defaultValue={minute.valueOf()}
+        onCancel={setHideTimePickerMinute}
+        onPicked={onMinutePicked}
+      />
+      <WheelDateTimePicker
+        mode={stateDateTimePicker.mode}
+        isVisible={stateDateTimePicker.isVisible && lockShowing}
+        defaultValue={stateDateTimePicker.defaultValue}
+        onPicked={onDateTimePicked}
+        onCancel={onHideSetDateTime}
+        onHide={releaseLockShowing}
+      />
+      <BottomButtonView style={styles.viewBottomFixed} mainTitle={t('done')} />
+    </SafeAreaView>
+  );
+});
+
+export default SetupGeneratePasscode;

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -34,14 +34,16 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     }
     if (action_on_data && action_off_data) {
       if (isOn) {
-        const actionName = `${
+        let actionName = `${
           sensor?.name
         } ${actionGroup?.title?.toLowerCase()} off`;
+        actionName = actionName.replace(/\s+/g, ' ').trim();
         doAction(action_off_data, null, actionName);
       } else {
-        const actionName = `${
+        let actionName = `${
           sensor?.name
         } ${actionGroup?.title?.toLowerCase()} on`;
+        actionName = actionName.replace(/\s+/g, ' ').trim();
         doAction(action_on_data, null, actionName);
       }
     }

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -56,7 +56,8 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const onDone = useCallback(() => {
     const newOption = options[selectedIndex];
     const value = getOptionValue(newOption);
-    const actionName = `${sensor?.name} ${title?.toLowerCase()} ${value}`;
+    let actionName = `${sensor?.name} ${title?.toLowerCase()} ${value}`;
+    actionName = actionName.replace(/\s+/g, ' ').trim();
     doAction(action_data, value, actionName);
     if (sensor?.is_managed_by_backend) {
       configuration.config && watchMultiConfigs([configuration.config]);

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -0,0 +1,64 @@
+import React, { memo, useCallback, useState, useMemo } from 'react';
+import { View } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './SliderRangeTemplateStyles';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import SvgBrightness from '../../../assets/images/brightness.svg';
+import Slider from 'react-native-slider';
+
+const SliderRangeTemplate = memo(({ actionGroup, doAction }) => {
+  const t = useTranslations();
+  const { configuration } = actionGroup;
+  const [valueBrightness, setValueBrightness] = useState(0);
+
+  const onChangeBrightness = useCallback(
+    (value) => {
+      setValueBrightness(value);
+      doAction(
+        configuration?.action_brightness_data,
+        `{"value_brness":${value}}`
+      );
+    },
+    [configuration?.action_brightness_data, doAction]
+  );
+
+  const percentBrightness = useMemo(() => {
+    return valueBrightness || 0;
+  }, [valueBrightness]);
+
+  return (
+    <View style={styles.viewBrightness}>
+      <View style={styles.LeftBrightness}>
+        <SvgBrightness />
+        <Text type="H4" style={styles.LeftTextBrightness}>
+          {t('brightness')}
+        </Text>
+      </View>
+      <View style={styles.RightBrightness}>
+        <View style={styles.slider}>
+          <Slider
+            value={valueBrightness}
+            onSlidingComplete={onChangeBrightness}
+            onValueChange={setValueBrightness}
+            step={1}
+            minimumValue={0}
+            maximumValue={100}
+            thumbTintColor={Colors.Gray3}
+            minimumTrackTintColor={Colors.Primary}
+            maximumTrackTintColor={Colors.Gray4}
+            trackStyle={styles.trackSlider}
+            thumbStyle={styles.thumbSlider}
+          />
+        </View>
+        <View style={styles.valuePercent}>
+          <Text type="Label" style={styles.textValuePercent}>
+            {`${percentBrightness}%`}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+});
+
+export default SliderRangeTemplate;

package/src/commons/ActionGroup/{LightActionTemplateStyles.js → SliderRangeTemplateStyles.js}

@@ -7,10 +7,6 @@ export default StyleSheet.create({
     justifyContent: 'space-around',
     paddingVertical: 30,
   },
-  viewPickColor: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   viewBrightness: {
     paddingTop: 16,
     flexDirection: 'row',
@@ -28,10 +24,6 @@ export default StyleSheet.create({
     width: 20,
     height: 20,
   },
-  colorPicker: {
-    width: '100%',
-    height: 'auto',
-  },
   valuePercent: {
     width: 40,
     flexDirection: 'row',