@eohjsc/react-native-smart-city 0.7.21 → 0.7.23

package/src/screens/Automate/SetSchedule/EditSchedule.js

@@ -0,0 +1,269 @@
+import moment from 'moment';
+import React, { useCallback, useMemo, useState } from 'react';
+import { ScrollView } from 'react-native';
+import _TextInput from '../../../commons/Form/TextInput';
+import Calendar from '../../../commons/Calendar';
+import WheelDateTimePicker from '../../../commons/WheelDateTimePicker';
+import { useBoolean } from '../../../hooks/Common';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import NewActionWrapper from '../AddNewAction/NewActionWrapper';
+import RepeatOptionsPopup from './components/RepeatOptionsPopup';
+import { AUTOMATE_TYPE } from '../../../configs/Constants';
+import { REPEAT_OPTIONS, TIME_RANGE_REPEAT_OPTIONS } from '../Constants';
+import RowItem from './components/RowItem';
+import SelectWeekday from './components/SelectWeekday';
+import styles from './styles/indexStyles';
+
+const getDateString = (date, t) => {
+  const today = moment();
+  if (date.isSame(today, 'day')) {
+    return date.format(`[${t('today')}], D MMMM YYYY `);
+  }
+  return date.format('ddd, D MMMM YYYY');
+};
+
+const parseTime = (value) =>
+  value ? moment(value, 'HH:mm:ss') : moment().second(0);
+
+const parseDate = (value) => (value ? moment(value, 'YYYY-MM-DD') : moment());
+
+const EditSchedule = ({ condition = {}, onSave }) => {
+  const t = useTranslations();
+  const [repeat, setRepeat] = useState(condition.repeat || REPEAT_OPTIONS.ONCE);
+
+  const [timeRangeRepeat, setTimeRangeRepeat] = useState(
+    condition.weekday_repeat?.length
+      ? TIME_RANGE_REPEAT_OPTIONS.EVERYWEEK
+      : TIME_RANGE_REPEAT_OPTIONS.EVERYDAY
+  );
+  const [timeRepeat, setTimeRepeat] = useState(
+    parseTime(condition.time_repeat)
+  );
+  const [timeStart, setTimeStart] = useState(parseTime(condition.time_start));
+  const [timeEnd, setTimeEnd] = useState(parseTime(condition.time_end));
+  const [dateRepeat, setDateRepeat] = useState(
+    parseDate(condition.date_repeat)
+  );
+  const [weekdayRepeat, setWeekdayRepeat] = useState(
+    condition.weekday_repeat || []
+  );
+  const [intervalRepeat, setIntervalRepeat] = useState(
+    condition.interval_repeat || 1
+  );
+
+  const [showRepeatOptions, setShowRepeatOptions, setHideRepeatOptions] =
+    useBoolean();
+  const [
+    showTimeRangeRepeatOptions,
+    setShowTimeRangeRepeatOptions,
+    setHideTimeRangeRepeatOptions,
+  ] = useBoolean();
+  const [showTimePicker, setShowTimePicker, setHideTimePicker] = useBoolean();
+  const [showTimeStartPicker, setShowTimeStartPicker, setHideTimeStartPicker] =
+    useBoolean();
+  const [showTimeEndPicker, setShowTimeEndPicker, setHideTimeEndPicker] =
+    useBoolean();
+  const [showCalendar, setShowCalendar, setHideCalendar] = useBoolean();
+
+  const scheduleData = useMemo(() => {
+    let data = {
+      type: AUTOMATE_TYPE.SCHEDULE,
+      repeat: repeat,
+    };
+
+    switch (repeat) {
+      case REPEAT_OPTIONS.INTERVAL:
+        data.interval_repeat = parseInt(intervalRepeat, 10);
+        break;
+
+      case REPEAT_OPTIONS.TIMERANGE:
+        data.time_start = timeStart.format('HH:mm:ss');
+        data.time_end = timeEnd.format('HH:mm:ss');
+        data.weekday_repeat =
+          timeRangeRepeat === TIME_RANGE_REPEAT_OPTIONS.EVERYWEEK
+            ? weekdayRepeat
+            : null;
+        break;
+
+      default:
+        data.time_repeat = timeRepeat.format('HH:mm:ss');
+        data.date_repeat =
+          repeat === REPEAT_OPTIONS.ONCE
+            ? dateRepeat.format('YYYY-MM-DD')
+            : null;
+        data.weekday_repeat =
+          repeat === REPEAT_OPTIONS.EVERYWEEK ? weekdayRepeat : null;
+        break;
+    }
+    return data;
+  }, [
+    repeat,
+    timeRepeat,
+    timeStart,
+    timeEnd,
+    timeRangeRepeat,
+    dateRepeat,
+    weekdayRepeat,
+    intervalRepeat,
+  ]);
+
+  const onNext = useCallback(() => {
+    onSave(scheduleData);
+  }, [onSave, scheduleData]);
+
+  const onSetRepeatOption = useCallback(
+    (value) => {
+      setRepeat(value);
+      setHideRepeatOptions();
+    },
+    [setHideRepeatOptions]
+  );
+
+  const onSetTimeRangeRepeatOption = useCallback(
+    (value) => {
+      setTimeRangeRepeat(value);
+      setHideTimeRangeRepeatOptions();
+    },
+    [setHideTimeRangeRepeatOptions]
+  );
+
+  const onTimePicked = useCallback((timeData) => {
+    setTimeRepeat(moment(timeData));
+  }, []);
+
+  const onTimeStartPicked = useCallback((timeData) => {
+    setTimeStart(moment(timeData));
+  }, []);
+
+  const onTimeEndPicked = useCallback((timeData) => {
+    setTimeEnd(moment(timeData));
+  }, []);
+
+  const onDatePicked = useCallback((datePicked) => {
+    setDateRepeat(datePicked);
+  }, []);
+
+  return (
+    <NewActionWrapper
+      name={t('set_schedule')}
+      onNext={onNext}
+      canNext={true}
+      nextTitle={t('save')}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scollView}
+        scrollIndicatorInsets={{ right: 1 }}
+      >
+        <RowItem
+          title={t('repeat')}
+          value={t(`${repeat}`)}
+          arrow
+          onPress={setShowRepeatOptions}
+        />
+        {[
+          REPEAT_OPTIONS.ONCE,
+          REPEAT_OPTIONS.EVERYDAY,
+          REPEAT_OPTIONS.EVERYWEEK,
+        ].includes(repeat) && (
+          <RowItem
+            title={t('set_time')}
+            value={timeRepeat.format('HH:mm')}
+            icon="clock-circle"
+            onPress={setShowTimePicker}
+          />
+        )}
+        {repeat === REPEAT_OPTIONS.ONCE && (
+          <RowItem
+            title={t('select_date')}
+            value={getDateString(dateRepeat, t)}
+            icon="calendar"
+            onPress={setShowCalendar}
+          />
+        )}
+        {repeat === REPEAT_OPTIONS.INTERVAL && (
+          <_TextInput
+            label={t('interval_repeat')}
+            keyboardType="numeric"
+            wrapStyle={styles.inputWrap}
+            textInputStyle={styles.inputNumber}
+            value={intervalRepeat.toString()}
+            onChange={setIntervalRepeat}
+            maxLength={4}
+          />
+        )}
+        {repeat === REPEAT_OPTIONS.TIMERANGE && (
+          <>
+            <RowItem
+              title={t('time_range_repeat')}
+              value={t(`${timeRangeRepeat}`)}
+              arrow
+              onPress={setShowTimeRangeRepeatOptions}
+            />
+            <RowItem
+              title={t('from')}
+              value={timeStart.format('HH:mm')}
+              icon="clock-circle"
+              onPress={setShowTimeStartPicker}
+            />
+            <RowItem
+              title={t('to')}
+              value={timeEnd.format('HH:mm')}
+              icon="clock-circle"
+              onPress={setShowTimeEndPicker}
+            />
+          </>
+        )}
+        {(repeat === REPEAT_OPTIONS.EVERYWEEK ||
+          (repeat === REPEAT_OPTIONS.TIMERANGE &&
+            timeRangeRepeat === TIME_RANGE_REPEAT_OPTIONS.EVERYWEEK)) && (
+          <SelectWeekday
+            weekday={weekdayRepeat}
+            setWeekday={setWeekdayRepeat}
+          />
+        )}
+      </ScrollView>
+      <RepeatOptionsPopup
+        isVisible={showRepeatOptions}
+        onHide={setHideRepeatOptions}
+        onSetRepeat={onSetRepeatOption}
+        options={REPEAT_OPTIONS}
+      />
+      <RepeatOptionsPopup
+        isVisible={showTimeRangeRepeatOptions}
+        onHide={setHideTimeRangeRepeatOptions}
+        onSetRepeat={onSetTimeRangeRepeatOption}
+        options={TIME_RANGE_REPEAT_OPTIONS}
+      />
+      <WheelDateTimePicker
+        mode="time"
+        isVisible={showTimePicker}
+        defaultValue={timeRepeat.valueOf()}
+        onCancel={setHideTimePicker}
+        onPicked={onTimePicked}
+      />
+      <WheelDateTimePicker
+        mode="time"
+        isVisible={showTimeStartPicker}
+        defaultValue={timeStart.valueOf()}
+        onCancel={setHideTimeStartPicker}
+        onPicked={onTimeStartPicked}
+      />
+      <WheelDateTimePicker
+        mode="time"
+        isVisible={showTimeEndPicker}
+        defaultValue={timeEnd.valueOf()}
+        onCancel={setHideTimeEndPicker}
+        onPicked={onTimeEndPicked}
+      />
+      <Calendar
+        isVisible={showCalendar}
+        defaultDate={dateRepeat}
+        minDate={moment()}
+        onCancel={setHideCalendar}
+        onConfirm={onDatePicked}
+      />
+    </NewActionWrapper>
+  );
+};
+
+export default EditSchedule;