@ledvance/group-ui-biz-bundle 1.0.46 → 1.0.47

package/src/modules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -0,0 +1,625 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import {
+  FlatList,
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/core';
+import Page from '@ledvance/base/src/components/Page';
+import I18n from '@ledvance/base/src/i18n';
+import TextField from '@ledvance/base/src/components/TextField';
+import { cloneDeep, isEqual } from 'lodash';
+import { useReactive } from 'ahooks';
+import { SwitchButton, TimerPicker, Utils } from 'tuya-panel-kit';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import LdvWeekView from '@ledvance/base/src/components/weekSelect';
+import { convertTo12HourFormat, loopText, showDialog } from '@ledvance/base/src/utils/common';
+import {
+  ApplyForItem,
+  ComponentConfig,
+  DeviceType,
+  TimeScheduleDetailState,
+  Timer,
+} from './Interface';
+import res from '@ledvance/base/src/res';
+import {
+  useMoods,
+  useSystemTimeFormate,
+  useUAGroupInfo,
+} from '@ledvance/base/src/models/modules/NativePropsSlice';
+import { TimeSchedulePageParams } from './TimeSchedulePage';
+import { Result } from '@ledvance/base/src/models/modules/Result';
+import DeleteButton from '@ledvance/base/src/components/DeleteButton';
+import SegmentControl from '@ledvance/base/src/components/segmentControl';
+import { useParams } from '@ledvance/base/src/hooks/Hooks';
+import ManualSettings from './components/ManuaSettings';
+import { defCeilingLihtDeviceData, defDeviceData, defMixDeviceData, defStripDeviceData } from './TimeScheduleActions';
+import MoodItem from '../mood_new/MoodItem';
+import Summary from './components/Summary'
+import { getRemoteMoodList } from '../mood_new/MoodActions'
+import { MoodUIInfo } from '../mood_new/Interface';
+
+const { convertX: cx } = Utils.RatioUtils;
+const { toFixedString } = Utils.NumberUtils;
+interface TimeScheduleDetailPageParams extends TimeSchedulePageParams {
+  mode: 'add' | 'edit';
+  timeSchedule: Timer;
+  modDeleteTimeSchedule: (mode: 'add' | 'edit' | 'del', timeSchedule: Timer, ids: string) => Promise<Result<any>>
+  refreshFn: () => void;
+}
+
+const TimeScheduleDetailPage = () => {
+  const props = useParams<TimeScheduleDetailPageParams>();
+  const navigation = useNavigation();
+  const uaGroupInfo = useUAGroupInfo()
+  const is24HourClock = useSystemTimeFormate();
+  const [moods, setMoods] = useMoods();
+  const state = useReactive<TimeScheduleDetailState>({
+    timeSchedule: props.mode === 'add' ? newTimeSchedule() : cloneDeep(props.timeSchedule),
+    dps: props.mode === 'add' ? {} : props.timeSchedule.dps,
+    isManual: true, // manual ,mood
+    selectedSkill: [] as ApplyForItem[],
+    unSelectedSkill: [] as ApplyForItem[],
+    loading: false,
+    moodLoading: false,
+    manualData:
+      props.mode === 'add'
+        ? getDefaultManual(props)
+        : props.manualDataDp2Obj(props.timeSchedule.dps)?.deviceData,
+    mood: props.mode === 'add' ? undefined : props.manualDataDp2Obj(props.timeSchedule.dps)?.mood,
+    moods: cloneDeep(moods),
+    timerId: undefined,
+    moodName: '',
+  });
+
+  useEffect(() => {
+    const { applyForDisabled, timeSchedule, applyForList, mode } = props;
+    const cannotChoose = applyForDisabled || applyForList.length === 1;
+    const cloneApplyList =
+      mode === 'add'
+        ? cloneDeep(applyForList)
+        : cloneDeep(applyForList).map(item => {
+          if (props.isMixLight && state.manualData.type === DeviceType.MixLight) {
+            return {
+              ...item,
+              enable:
+                item.type === 'mainLight'
+                  ? state.manualData.deviceData.whiteLightSwitch
+                  : state.manualData.deviceData.colorLightSwitch,
+            };
+          }
+          if (timeSchedule?.dps?.hasOwnProperty(item.dp)) {
+            return {
+              ...item,
+              enable: timeSchedule?.dps[item.dp],
+            };
+          }
+          return item;
+        });
+
+    if (cannotChoose) {
+      state.selectedSkill = cloneApplyList;
+      state.unSelectedSkill = [];
+    } else {
+      const selectedList = cloneApplyList.filter(item =>
+        Object.keys(timeSchedule.dps).includes(item.dp)
+      );
+      const unSelectedList = cloneApplyList.filter(
+        item => !Object.keys(timeSchedule.dps).includes(item.dp)
+      );
+      state.selectedSkill = mode === 'add' ? [] : selectedList;
+      state.unSelectedSkill = mode === 'add' ? cloneApplyList : unSelectedList;
+    }
+    if (props.mode === 'edit' && props.manualDataDp2Obj) {
+      const { isManual, mood } = props.manualDataDp2Obj(props.timeSchedule.dps);
+      state.isManual = isManual;
+      state.mood = mood;
+    }
+
+    if (!(Array.isArray(moods) && moods.length)) {
+      state.timerId = setTimeout(() => {
+        getRemoteMoodList(uaGroupInfo.tyGroupId.toString(), props).then(res => {
+          if (res.success && Array.isArray(res.data)) {
+            state.moods = cloneDeep(res.data);
+            console.log(state.moods, '< --- moods')
+            setMoods(cloneDeep(res.data));
+            if (!state.mood) state.mood = cloneDeep(res.data[0]);
+          }
+        });
+      }, 300);
+      return () => {
+        if (state.timerId) clearTimeout(state.timerId);
+      };
+    } else {
+      if (!state.mood) state.mood = cloneDeep(state.moods[0]);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (state.moods?.length) {
+      state.moodName =
+        state.moods.find(m =>
+          props.isCeilingLight
+            ? m.mainLamp.id === state.mood?.mainLamp.id &&
+            m.secondaryLamp.id === state.mood?.secondaryLamp.id
+            : m.id === state.mood?.id
+        )?.name || '';
+    }
+  }, [state.mood, state.moods]);
+
+  const getFormateTime = useCallback((time: number | string) => {
+    if (typeof time === 'number') {
+      return `${toFixedString(Math.trunc(time / 60), 2)}:${toFixedString(time % 60, 2)}`;
+    }
+    if (typeof time === 'string') {
+      const t = time.split(':');
+      return Number(t[0]) * 60 + Number(t[1]);
+    }
+    return time;
+  }, []);
+
+  const isModify = useMemo(() => {
+    const schedule = props.mode === 'add' ? newTimeSchedule() : props.timeSchedule;
+    const manual =
+      props.mode === 'add'
+        ? getDefaultManual(props)
+        : props.manualDataDp2Obj(props.timeSchedule.dps).deviceData;
+    const before = {
+      ...schedule,
+      dps: manual,
+      isManual:
+        props.mode === 'add' ? true : props.manualDataDp2Obj(props.timeSchedule.dps).isManual,
+      mood: props.mode === 'add' ? undefined : props.manualDataDp2Obj(props.timeSchedule.dps)?.mood,
+      id: 1,
+    };
+    before.mood = (before.isManual || props.mode === 'add') ? undefined : props.manualDataDp2Obj(props.timeSchedule.dps)?.mood
+    const now = {
+      ...state.timeSchedule,
+      dps: state.manualData,
+      isManual: state.isManual,
+      mood: state.isManual ? undefined : state.mood,
+      id: 1,
+    };
+    return isEqual(before, now);
+  }, [JSON.stringify(state.timeSchedule), state.manualData, state.isManual, state.mood]);
+
+  const allowSubmit = useMemo(() => {
+    return (
+      (state.timeSchedule.aliasName.length && state.timeSchedule.aliasName.length < 33) &&
+      state.selectedSkill.length &&
+      (state.isManual ? state.isManual : !!state.mood) &&
+      !isModify
+    );
+  }, [state.timeSchedule.aliasName, state.selectedSkill, isModify, state.isManual, state.mood]);
+
+  const showSelectedIcon = useMemo(() => {
+    return state.selectedSkill.length !== 1 && !props.applyForDisabled;
+  }, [state.selectedSkill.length, props.applyForDisabled]);
+
+  const getMoodItemEnable = useCallback((item: MoodUIInfo ) =>{
+    return props.isCeilingLight ? ((item.mainLamp.id === state.mood?.mainLamp?.id) && (item.secondaryLamp.id === state.mood?.secondaryLamp?.id)) : item.id === state.mood?.id 
+  }, [state.mood, props.isCeilingLight])
+
+  return (
+    <Page
+      backText={I18n.getLang('motion_detection_add_time_schedule_system_back_text')}
+      headlineText={I18n.getLang(
+        props.mode === 'add'
+          ? 'motion_detection_add_time_schedule_headline_text'
+          : 'edit_timeschedule_headline_text'
+      )}
+      rightButtonIcon={allowSubmit ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={async () => {
+        if (!allowSubmit || state.loading) return;
+        state.loading = true;
+        const res = await props.modDeleteTimeSchedule(props.mode, {
+          ...state.timeSchedule,
+          status: 1,
+          dps: props.manualDataObj2Dp(
+            {
+              deviceData: state.manualData,
+              isManual: state.isManual,
+              mood: state.mood,
+            },
+            state.selectedSkill
+          ),
+        }, '');
+        state.loading = false;
+        if (res.success) {
+          props.refreshFn()
+          navigation.goBack();
+        }
+      }}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_timeschedule_note')}
+      showBackDialog={!isModify}
+      loading={state.loading}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <TextField
+          style={styles.cardContainer}
+          value={state.timeSchedule.aliasName}
+          showError={state.timeSchedule.aliasName?.length > 32}
+          maxLength={33}
+          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
+          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
+          onChangeText={(t: string) => {
+            state.timeSchedule.aliasName = t;
+          }}
+        />
+
+        {/* pick */}
+        <TimerPicker
+          itemTextColor="#aeadb5"
+          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+          is12Hours={!is24HourClock}
+          singlePicker={true}
+          amText={I18n.getLang('manage_user_calendar_label_am')}
+          pmText={I18n.getLang('manage_user_calendar_label_pm')}
+          startTime={getFormateTime(state.timeSchedule.time) as number}
+          symbol={''}
+          onTimerChange={startTime => {
+            state.timeSchedule.time = getFormateTime(startTime) as string;
+          }}
+        />
+
+        <LdvWeekView
+          value={state.timeSchedule.loops.split('').map(Number)}
+          style={styles.cardContainer}
+          onSelect={(index: number) => {
+            const rawIndex = index - 1;
+            const weeks = state.timeSchedule.loops.split('');
+            weeks[rawIndex] = weeks[rawIndex] === '1' ? '0' : '1';
+            state.timeSchedule.loops = weeks.join('');
+          }}
+        />
+        <Spacer />
+        <Text style={styles.cardContainer}>{loopText(state.timeSchedule.loops.split(''))}</Text>
+        <Spacer height={cx(30)} />
+
+        {/* Apply for */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>
+            {I18n.getLang('timeschedule_add_schedule_subheadline_text')}
+          </Text>
+          <Spacer height={cx(10)} />
+          <View style={styles.applyContent}>
+            {props.applyForList.length === 0 ? (
+              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text>
+            ) : (
+              state.selectedSkill.map(skill => (
+                <View
+                  style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}
+                  key={skill.dp}
+                >
+                  <Text style={{ color: '#000' }}>{skill.key}</Text>
+                  {showSelectedIcon && (
+                    <TouchableOpacity
+                      onPress={() => {
+                        state.selectedSkill = state.selectedSkill.filter(s => skill.dp !== s.dp);
+                        state.unSelectedSkill = [...state.unSelectedSkill, skill];
+                      }}
+                      style={{ paddingHorizontal: cx(5) }}
+                    >
+                      <Image
+                        style={{ width: cx(16), height: cx(16) }}
+                        source={res.ic_arrows_nav_clear}
+                      />
+                    </TouchableOpacity>
+                  )}
+                </View>
+              ))
+            )}
+          </View>
+          {state.unSelectedSkill.map((item: ApplyForItem) => {
+            return (
+              <TouchableOpacity
+                style={styles.applyItem}
+                key={item.dp}
+                onPress={() => {
+                  state.selectedSkill = [...state.selectedSkill, item];
+                  state.unSelectedSkill = state.unSelectedSkill.filter(s => item.dp !== s.dp);
+                }}
+              >
+                <Text style={{ color: '#000' }}>{item.key}</Text>
+                <Image
+                  style={{ width: cx(16), height: cx(16) }}
+                  source={res.device_panel_timer_add}
+                />
+              </TouchableOpacity>
+            );
+          })}
+          <Spacer />
+        </View>
+
+        {/* device state */}
+        <Text style={[styles.itemTitle, styles.cardContainer]}>
+          {I18n.getLang('timeschedule_add_schedule_subheadline2_text')}
+        </Text>
+        <Spacer height={cx(10)} />
+        {props.isSupportMood && (
+          <>
+            <SegmentControl
+              title1={I18n.getLang('timeschedule_add_schedule_switch_tab_manual_text')}
+              title2={I18n.getLang('timeschedule_add_schedule_switch_tab_mood_text')}
+              isFirst={state.isManual}
+              setIsFirst={(v: boolean) => (state.isManual = v)}
+            />
+            <Spacer height={cx(16)} />
+          </>
+        )}
+        <Spacer height={cx(10)} />
+        {state.isManual ? (
+          <ManualSettings
+            dps={state.dps}
+            applyForList={state.selectedSkill}
+            isSupportColor={props.isSupportColor}
+            isSupportBrightness={props.isSupportBrightness}
+            isSupportTemperature={props.isSupportTemperature}
+            isCeilingLight={props.isCeilingLight}
+            manualData={state.manualData}
+            onManualChange={manual => {
+              // @ts-ignore
+              state.manualData = {
+                ...state.manualData,
+                deviceData: cloneDeep(manual),
+              };
+            }}
+            onApplyChange={apply => {
+              state.selectedSkill = cloneDeep(apply);
+            }}
+          />
+        ) : (
+          <FlatList
+            data={state.moods}
+            renderItem={({ item }) => {
+              return (
+                <MoodItem
+                  enable={getMoodItemEnable(item)}
+                  mood={item}
+                  isMix={!!(props.isMixLight || props.isCeilingLight)}
+                  onSwitch={_ => {
+                    state.mood = cloneDeep(item);
+                  }}
+                />
+              );
+            }}
+            ListHeaderComponent={() => <Spacer height={cx(10)} />}
+            ItemSeparatorComponent={() => <Spacer />}
+            ListFooterComponent={() => <Spacer />}
+            keyExtractor={item => `${item.name}`}
+          />
+        )}
+        <Spacer />
+
+        {/* settings */}
+        <Text style={[styles.itemTitle, styles.cardContainer]}>
+          {I18n.getLang('timeschedule_add_schedule_subheadline4_text')}
+        </Text>
+        <View style={[styles.switchButton, styles.cardContainer]}>
+          <Text style={styles.text}>{I18n.getLang('timeschedule_add_schedule_text2')}</Text>
+          <SwitchButton
+            value={state.timeSchedule.isAppPush}
+            onValueChange={value => {
+              state.timeSchedule.isAppPush = value;
+            }}
+          />
+        </View>
+        <Spacer />
+
+        {/* summary */}
+        <Summary
+          frequency={loopText(state.timeSchedule.loops.split(''), state.timeSchedule.time)}
+          time={is24HourClock
+            ? state.timeSchedule.time
+            : convertTo12HourFormat(state.timeSchedule.time)}
+          actions={<View style={{ flex: 1 }}>
+            {state.isManual
+              ? !!state.selectedSkill.length && (
+                <>
+                  {!!state.selectedSkill.filter(skill => skill.enable).length && (
+                    <>
+                      <Text style={{ fontSize: cx(14), color: '#000' }}>
+                        {I18n.getLang('feature_summary_action_txt_1')}
+                      </Text>
+                      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                        {state.selectedSkill
+                          .filter(skill => skill.enable)
+                          .map(item => (
+                            <View
+                              style={[
+                                styles.summaryRight,
+                                { marginRight: cx(5), marginBottom: cx(5) },
+                              ]}
+                              key={item.dp}
+                            >
+                              <Text style={[styles.rightItem]}>{item.key}</Text>
+                            </View>
+                          ))}
+                      </View>
+                    </>
+                  )}
+
+                  {!!state.selectedSkill.filter(skill => !skill.enable).length && (
+                    <>
+                      <Text style={{ fontSize: cx(14) }}>
+                        {I18n.getLang('feature_summary_action_txt_2')}
+                      </Text>
+                      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                        {state.selectedSkill
+                          .filter(skill => !skill.enable)
+                          .map((item) => (
+                            <View
+                              style={[
+                                styles.summaryRight,
+                                { marginRight: cx(5), marginBottom: cx(5) },
+                              ]}
+                              key={item.dp}
+                            >
+                              <Text style={[styles.rightItem]}>{item.key}</Text>
+                            </View>
+                          ))}
+                      </View>
+                    </>
+                  )}
+                </>
+              )
+              : !!state.moodName && (
+                <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                  <View style={[styles.summaryRight, { marginLeft: cx(5) }]}>
+                    <Text style={styles.rightItem}>{state.moodName}</Text>
+                  </View>
+                </View>
+              )}
+          </View>}
+        />
+        <Spacer height={cx(30)} />
+
+        {/* delete */}
+        {props.mode === 'edit' && (
+          <View style={{ marginHorizontal: cx(24) }}>
+            <DeleteButton
+              text={I18n.getLang('edit_timeschedule_bttn_text')}
+              onPress={() => {
+                showDialog({
+                  method: 'confirm',
+                  title: I18n.getLang('cancel_dialog_delete_item_timeschedule_titel'),
+                  subTitle: I18n.getLang('cancel_dialog_delete_item_timeschedule_description'),
+                  onConfirm: async (_, { close }) => {
+                    state.loading = true;
+                    close();
+                    const res = await props.modDeleteTimeSchedule('del', state.timeSchedule, state.timeSchedule.id.toString());
+                    state.loading = false;
+                    if (res.success) {
+                      navigation.goBack();
+                    }
+                  },
+                });
+              }}
+            />
+            <Spacer />
+          </View>
+        )}
+      </ScrollView>
+    </Page>
+  );
+};
+
+const newTimeSchedule = () => {
+  return {
+    status: 1,
+    loops: '0000000',
+    isAppPush: false,
+    aliasName: '',
+    time: `${toFixedString(new Date().getHours(), 2)}:${toFixedString(new Date().getMinutes(), 2)}`,
+    dps: {},
+    id: -1,
+  };
+};
+
+const getDefaultManual = (props: TimeScheduleDetailPageParams): ComponentConfig => {
+  const deviceType =
+    props.isStripLight
+      ? DeviceType.StripLight
+      : props.isMixLight
+        ? DeviceType.MixLight
+        : props.isCeilingLight
+        ? DeviceType.CeilingLight
+        : DeviceType.LightSource;
+  const deviceData =
+    deviceType === DeviceType.StripLight
+      ? defStripDeviceData
+      : deviceType === DeviceType.MixLight
+        ? defMixDeviceData
+        : deviceType === DeviceType.CeilingLight
+        ? defCeilingLihtDeviceData
+        : defDeviceData;
+  // @ts-ignore
+  return {
+    type: deviceType,
+    deviceData: {
+      ...deviceData,
+      isColorMode: props.isSupportColor ? true : false,
+    },
+  };
+};
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginHorizontal: cx(24),
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  applyContent: {
+    backgroundColor: '#f6f6f6',
+    borderRadius: 4,
+    minHeight: cx(55),
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: cx(10),
+    paddingTop: cx(10),
+  },
+  applyItem: {
+    paddingLeft: cx(5),
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    height: cx(35),
+  },
+  moodScrollView: {
+    maxHeight: cx(500),
+  },
+  summaryContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    marginBottom: cx(10),
+    marginHorizontal: cx(24),
+  },
+  summaryImg: {
+    height: cx(12),
+    width: cx(12),
+    tintColor: '#000',
+  },
+  summaryLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: cx(90),
+  },
+  leftTitle: {
+    fontSize: cx(14),
+    color: '#000',
+    marginTop: 0,
+  },
+  summaryRight: {
+    flexDirection: 'column',
+    backgroundColor: '#cbcbcb',
+    borderRadius: cx(16),
+    alignItems: 'center'
+  },
+  rightItem: {
+    paddingHorizontal: cx(12),
+    color: '#000',
+    fontSize: cx(14)
+  },
+  switchButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: cx(10),
+  },
+  text: {
+    color: '#000',
+    fontSize: cx(14)
+  },
+});
+
+export default TimeScheduleDetailPage;