@ledvance/ui-biz-bundle 1.0.2 → 1.0.3

package/src/modules/timeSchedule/TimeScheduleEditpage.tsx

@@ -0,0 +1,480 @@
+import React, { useEffect, useCallback } from "react";
+import { ScrollView, StyleSheet, Text, View, FlatList, TouchableOpacity, Image } from 'react-native'
+import Page from '@ledvance/base/src/components/Page'
+import TextField from '@ledvance/base/src/components/TextField'
+import I18n from '@ledvance/base/src/i18n'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import LdvTopName from "@ledvance/base/src/components/ldvTopName";
+import LdvPickerView from '@ledvance/base/src/components/ldvPickerView'
+import LdvWeekView from '@ledvance/base/src/components/weekSelect'
+import { SwitchButton, Utils } from 'tuya-panel-kit'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import DeleteButton from '@ledvance/base/src/components/DeleteButton'
+import { toFixed, loopText } from '@ledvance/base/src/utils/common'
+import { NativeApi } from '@ledvance/base/src/api/native'
+import { useDeviceId } from '@ledvance/base/src/models/modules/NativePropsSlice'
+// import dpCodes from "config/dpCodes";
+import res from '@res'
+import { useReactive } from 'ahooks';
+import { dpItem } from "./TimeSchedulePage";
+import { cloneDeep, differenceBy } from "lodash";
+import DeviceState from "./DeviceState";
+
+const { convertX: cx } = Utils.RatioUtils
+
+
+export interface ScheduleItemDp extends dpItem {
+    enable: boolean
+}
+
+interface TimeScheduleEditPageParams {
+    scheduleItem: any,
+    dps: ScheduleItemDp[]
+    dpCodes: Record<any, any>
+    reloadData: () => void
+    deleteDialog: (item: any) => Promise<void>
+}
+
+const TimeScheduleEditPage = () => {
+    const navigation = useNavigation()
+    const devId = useDeviceId()
+    const route = useRoute()
+    const { scheduleItem, dps, reloadData, deleteDialog, dpCodes } = route.params as TimeScheduleEditPageParams
+    const state = useReactive({
+        hour: '00',
+        minute: '00',
+        loop: [0, 0, 0, 0, 0, 0, 0],
+        isNotification: false,
+        brightValue: 50,
+        name: '',
+        selectedSkill: [] as ScheduleItemDp[],
+        skillList: []  as ScheduleItemDp[],
+        isManual: true,
+        dpsValue: {} as Record<string,any>
+    })
+
+
+
+    useEffect(() => {
+        // 设置功能列表
+        if (scheduleItem) {
+            state.hour = scheduleItem.time.split(':')[0];
+            state.minute = scheduleItem.time.split(':')[1];
+            state.name = scheduleItem.aliasName;
+            state.isNotification = scheduleItem.isAppPush;
+            state.loop = scheduleItem.loops.split('').map(mItem => parseInt(mItem));
+            state.brightValue = parseInt(scheduleItem.dps[dpCodes.bright_value]) / 10 || 50
+            state.selectedSkill = dps.reduce((pre, cur) => {
+                if (scheduleItem.dps[cur.dpId] !== undefined) {
+                    const result = { ...cur, enable: scheduleItem.dps[cur.dpId] }
+                    pre.push(result)
+                }
+                return pre
+            }, [] as ScheduleItemDp[])
+            state.skillList = differenceBy(dps, state.selectedSkill, 'dpId')
+        } else {
+            const date = new Date();
+            state.hour = toFixed(date.getHours(), 2);
+            state.minute = toFixed(date.getMinutes(), 2);
+            state.skillList = dps.map(item => ({
+                ...item,
+                enable: true
+            }))
+        }
+    }, [])
+
+
+    const selectWeekAction = (idx: number) => {
+        const newLoop = state.loop.map((item, tempIndex) => {
+            if (tempIndex === idx - 1) {
+                return item > 0 ? 0 : 1;
+            }
+            return item;
+
+        });
+        state.loop = newLoop;
+    };
+
+    const saveEnable = () => {
+        return !!state.name.length && !!state.selectedSkill.length;
+    };
+
+    const saveAction = () => {
+        getSendDps()
+        if (!saveEnable()) {
+            return;
+        }
+        const params = {
+            time: [state.hour, state.minute].join(':'),
+            loops: state.loop.join(''),
+            dps: getSendDps(),
+            aliasName: state.name,
+            status: true,
+            notification: state.isNotification,
+        }
+        if (scheduleItem) {
+            NativeApi.editTimer(
+                devId,
+                {
+                    ...params,
+                    id: scheduleItem.id
+                },
+                res => {
+                    if (res?.result) {
+                        reloadData()
+                        navigation.goBack();
+                    }
+                }
+            );
+        } else {
+            NativeApi.addTimer(
+                devId,
+                params,
+                res => {
+                    if (res?.result) {
+                        reloadData()
+                        navigation.goBack();
+                    }
+                }
+            );
+        }
+    };
+
+    const getSendDps = () => {
+        let dp = cloneDeep(state.dpsValue)
+        state.selectedSkill.forEach(item => {
+            dp = {
+                ...dp,
+                [item.dpId]: item.enable
+            }
+        })
+        console.log(dp, '< --- dp')
+        return dp
+    }
+
+    const setSendDps = useCallback((dps: Record<string, any>) =>{
+        state.dpsValue = dps
+    }, [])
+
+    const renderItem = ({ item }) => {
+        return (
+            <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                backgroundColor: '#fff',
+                marginBottom: cx(8)
+            }}>
+                <Text
+                    style={{
+                        color: '#000',
+                        fontSize: 14,
+                        marginHorizontal: cx(6),
+                        marginVertical: cx(9),
+                    }}
+                >
+                    {item.label}
+                </Text>
+                <TouchableOpacity onPress={() => handelSkill('lower', item)}>
+                    <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5) }} source={res.ic_arrows_nav_clear} />
+                </TouchableOpacity>
+            </View>
+        );
+    };
+
+    const handelSkill = (handelType: string, skill: ScheduleItemDp) => {
+        if (handelType === 'add') {
+            state.selectedSkill = [...state.selectedSkill, skill]
+            state.skillList = state.skillList.filter(item => item.dpId !== skill.dpId)
+        } else {
+            state.skillList = [...state.skillList, skill]
+            state.selectedSkill = state.selectedSkill.filter(item => item.dpId !== skill.dpId)
+        }
+    }
+
+    const hasSelected = () => {
+        return !!state.selectedSkill.length
+    }
+
+
+    const changeSkillEnable = (enable: boolean, idx:number) =>{
+        state.selectedSkill = state.selectedSkill.map((skill, index) => {
+            if(idx === index){
+                skill.enable = enable
+            }
+            return skill
+        })
+    }
+
+    return (
+        <Page
+            backText={I18n.getLang('motion_detection_add_time_schedule_system_back_text')}
+            onBackClick={navigation.goBack}
+            rightButtonIcon={saveEnable() ? res.ic_check : res.ic_uncheck}
+            rightButtonIconClick={saveAction}
+        >
+            <ScrollView
+                nestedScrollEnabled={true}
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
+            >
+                <LdvTopName title={I18n.getLang('motion_detection_add_time_schedule_headline_text')} />
+                <View style={styles.content}>
+                    <TextField
+                        value={state.name}
+                        placeholder={I18n.getLang('motion_detection_add_time_schedule_selectionfield_text')}
+                        onChangeText={(t: string) => {
+                            state.name = t;
+                        }}
+                    />
+                    {/* pick */}
+                    <LdvPickerView
+                        style={styles.picker}
+                        hour={state.hour}
+                        minute={state.minute}
+                        setHour={v => (state.hour = v)}
+                        setMinute={v => (state.minute = v)}
+                        unit={['h', 'min']}
+                    />
+                    {/* week */}
+                    <LdvWeekView
+                        value={state.loop}
+                        style={styles.zeroMarginHorizontal}
+                        onSelect={selectWeekAction}
+                    />
+                    <Text style={styles.loopText}>{loopText(state.loop)}</Text>
+                    {/* Apply for */}
+                    <View>
+                        <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
+                        <View
+                            style={{
+                                backgroundColor: '#f6f6f6',
+                                borderRadius: 4,
+                                minHeight: cx(50),
+                                flex: 1,
+                                justifyContent: 'center',
+                            }}
+                        >
+                            {!hasSelected() ? <Text style={{ marginLeft: cx(10) }}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+                                <View
+                                    style={{
+                                        marginHorizontal: cx(8),
+                                        marginTop: cx(8),
+                                        borderRadius: 4,
+                                    }}
+                                >
+                                    <FlatList
+                                        data={state.selectedSkill}
+                                        renderItem={item => renderItem(item)}
+                                        keyExtractor={(item) => item.dpId + 'selected'}
+                                    />
+                                </View>}
+                        </View>
+                        {state.skillList.map((item) => {
+                            return (
+                                <TouchableOpacity style={styles.skillListItem} key={item.dpId + 'skill'} onPress={() => handelSkill('add', item)}>
+                                    <Text style={{ color: '#000' }}>{item.label}</Text>
+                                    <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
+                                </TouchableOpacity>
+                            )
+                        })}
+                    </View>
+                    {/* Device state */}
+                    <View>
+                        <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
+                    </View>
+                    <DeviceState 
+                        dpCodes={dpCodes}
+                        dps={state.selectedSkill}
+                        scheduleItem={scheduleItem}
+                        isManual={state.isManual}
+                        setIsManual={(v) => state.isManual = v}
+                        setSendDps={setSendDps}
+                        changeSkillEnable={changeSkillEnable}
+                    />
+                    {!hasSelected() && <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Image style={{ width: cx(16), height: cx(16), tintColor: '#FF9500' }} source={res.ic_warning_amber} />
+                        <Text style={{ color: '#FF9500', marginLeft: cx(5) }}>{I18n.getLang('timeschedule_add_schedule_no_device_warning_text')}</Text>
+                    </View>}
+                    {/* Settings */}
+                    <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
+                    <View style={styles.switchButton}>
+                        <Text style={styles.text}>{I18n.getLang('timeschedule_add_schedule_text2')}</Text>
+                        <SwitchButton
+                            value={state.isNotification}
+                            onValueChange={value => {
+                                state.isNotification = value;
+                            }}
+                        />
+                    </View>
+                    {/* Summary */}
+                    <View>
+                        <Text style={styles.itemTitle}>{I18n.getLang('add_randomtimecycle_subheadline_text')}</Text>
+                        <View style={styles.summaryContainer}>
+                            <View style={styles.summaryLeft}>
+                                <Image
+                                    source={res.summary_icon1}
+                                    resizeMode="contain"
+                                    style={styles.summaryImg}
+                                />
+                                <View>
+                                    <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_frequency_headline')}</Text>
+                                </View>
+                            </View>
+                            <View style={styles.summaryRight}>
+                                <Text style={styles.rightItem}>{loopText(state.loop)}</Text>
+                            </View>
+                        </View>
+                        <View style={styles.summaryContainer}>
+                            <View style={styles.summaryLeft}>
+                                <Image
+                                    source={res.summary_icon2}
+                                    resizeMode="contain"
+                                    style={styles.summaryImg}
+                                />
+                                <View>
+                                    <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_time_headline')}</Text>
+                                </View>
+                            </View>
+                            <View style={styles.summaryRight}>
+                                <Text style={styles.rightItem}>{[state.hour, state.minute].join(':')}</Text>
+                            </View>
+                        </View>
+                        <View style={styles.summaryContainer}>
+                            <View style={styles.summaryLeft}>
+                                <Image
+                                    source={res.summary_icon3}
+                                    resizeMode="contain"
+                                    style={styles.summaryImg}
+                                />
+                                <View>
+                                    <Text style={styles.leftTitle}>{I18n.getLang('motion_detection_add_time_schedule_actions_text1')}</Text>
+                                </View>
+                            </View>
+                            <View style={styles.summaryRight}>
+                                {!!state.selectedSkill.length && <>
+                                    {(!!state.selectedSkill.filter(skill => skill.enable).length) && <>
+                                        <Text>{I18n.getLang('feature_summary_action_txt_1')}</Text>
+                                        <View style={{ flexDirection: 'row' }}>{
+                                            state.selectedSkill.filter(skill => skill.enable).map(item => (
+                                                <Text style={[styles.rightItem, { marginRight: cx(5), marginBottom: cx(5) }]} key={item.dpId}>{item.label}</Text>
+                                            ))
+                                        }</View>
+                                    </>}
+
+                                    {(!!state.selectedSkill.filter(skill => !skill.enable).length) && <>
+                                        <Text>{I18n.getLang('feature_summary_action_txt_2')}</Text>
+                                        <View style={{ flexDirection: 'row' }}>{
+                                            state.selectedSkill.filter(skill => !skill.enable).map(item => (
+                                                <Text style={[styles.rightItem, { marginRight: cx(5), marginBottom: cx(5) }]} key={item.dpId}>{item.label}</Text>
+                                            ))
+                                        }</View>
+                                    </>}
+                                </>}
+                            </View>
+                        </View>
+                        <Spacer height={cx(40)} />
+                        {!!scheduleItem && <View style={{ marginBottom: cx(24) }}>
+                            <DeleteButton
+                                text={I18n.getLang('edit_timeschedule_bttn_text')}
+                                onPress={() => {
+                                    deleteDialog(scheduleItem).then(() => {
+                                        navigation.goBack()
+                                    })
+                                }}
+                            />
+                        </View>}
+                    </View>
+                </View>
+            </ScrollView>
+        </Page>
+    )
+}
+
+const styles = StyleSheet.create({
+    content: {
+        marginHorizontal: cx(24)
+    },
+    picker: {
+        marginHorizontal: cx(24),
+        marginVertical: cx(15),
+        color: 'rgb(35,35,38)',
+    },
+    zeroMarginHorizontal: {
+        marginHorizontal: 0,
+    },
+    loopText: {
+        fontSize: cx(14),
+        fontFamily: 'PingFangSC-Medium',
+        color: '#999999',
+        marginTop: cx(10)
+    },
+    itemTitle: {
+        color: '#000',
+        fontSize: cx(16),
+        fontWeight: 'bold',
+        fontFamily: 'helvetica_neue_lt_std_bd',
+        marginTop: cx(30),
+        marginBottom: cx(10)
+    },
+    switchButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: cx(10)
+    },
+    text: {
+        color: '#000'
+    },
+    switchCard: {
+        paddingVertical: cx(16),
+    },
+    switchCardContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    switchCardTitle: {
+        color: '#000',
+        fontSize: cx(16),
+        fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    skillListItem: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        height: cx(30),
+        alignItems: 'center',
+        marginVertical: cx(5)
+    },
+    summaryContainer: {
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        marginBottom: cx(10)
+    },
+    summaryImg: {
+        height: cx(12),
+        width: cx(12),
+        marginRight: cx(6)
+    },
+    summaryLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minWidth: cx(90),
+    },
+    leftTitle: {
+        fontSize: cx(14),
+        color: '#000',
+    },
+    summaryRight: {
+        flexDirection: 'column',
+        marginLeft: cx(21),
+    },
+    rightItem: {
+        paddingHorizontal: cx(12),
+        backgroundColor: '#cbcbcb',
+        borderRadius: cx(16),
+        color: '#000',
+    }
+})
+
+export default TimeScheduleEditPage