@ledvance/group-ui-biz-bundle 1.0.0

package/src/modules/time_schedule/TimeSchedulePage.tsx

@@ -0,0 +1,246 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+import { ScrollView, Text, StyleSheet, FlatList, View, Image } from "react-native";
+import { useNavigation, useRoute } from '@react-navigation/core'
+import { Utils } from 'tuya-panel-kit'
+import Page from "@ledvance/base/src/components/Page";
+import I18n from "@ledvance/base/src/i18n";
+import { useDeviceInfo, useTimeSchedule, useUAGroupInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import res from "@ledvance/base/src/res";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import InfoText from "@ledvance/base/src/components/InfoText"
+import DeleteButton from "@ledvance/base/src/components/DeleteButton"
+import ScheduleCard from "./ScheduleCard";
+import { ui_biz_routerKey } from "../../navigation/Routers";
+import { addTimeSchedule, modDelTimeSchedule, getTimeSchedule, modifyTimeSchedule } from "./TimeScheduleActions";
+import { Timer } from './Interface'
+import { useReactive, useUpdateEffect } from "ahooks";
+import { cloneDeep } from "lodash";
+import { SceneInfo } from "../mood/SceneInfo";
+import { StripState } from "./TimeScheduleDetailPage";
+
+
+const { convertX: cx } = Utils.RatioUtils
+const MAX_NUM = 30
+interface HSV {
+  h: number
+  s: number
+  v: number
+}
+
+interface DrawToolDataType {
+  hsv: HSV 
+  brightness: number 
+  temperature: number 
+  stripState?: StripState
+  isColor?: boolean
+}
+
+export interface TimeSchedulePageParams {
+  isSupportColor: boolean
+  isSupportTemperature: boolean
+  isSupportBrightness: boolean
+  isSupportMood?: boolean
+  isStringLight?: boolean
+  isStripLight?: boolean
+  isSupportFan?: boolean
+  isSupportUVC?: boolean
+  switchLedCode?: string
+  switchSocket?: string
+  switchFan?: string
+  workModeCode: string
+  brightValueCode?: string
+  tempValueCode?: string
+  sceneDataCode?: string
+  sceneDataDp2Obj?: (sceneDp: string) => SceneInfo
+  sceneDataObj2Dp?: (scene: any) => string
+  colorDataCode?: string
+  colorDataDp2Obj?: (hex: string) => HSV
+  colorDataObj2Dp?: (hsv: HSV) => string
+  drawToolDataCode?: string
+  drawToolDataObj2Dp?: (dpData: DrawToolDataType) => string 
+  drawToolDataDp2Obj?: (dp:string) => DrawToolDataType
+}
+
+const TimeSchedulePage = () => {
+  const deviceInfo = useDeviceInfo()
+  const navigation = useNavigation()
+  const uaGroupInfo = useUAGroupInfo()
+  const [timeScheduleStatus, setTimeScheduleStatus] = useTimeSchedule()
+  const props = cloneDeep(useRoute().params) as TimeSchedulePageParams
+  const state = useReactive({
+    timeScheduleList: [] as Timer[],
+    flag: Symbol(),
+    loading: false
+  })
+
+  const isMaxSchedule = useMemo(() => state.timeScheduleList.length >= MAX_NUM, [state.timeScheduleList])
+
+  useUpdateEffect(() => {
+    const status = state.timeScheduleList.some(item => item.status === 1)
+    if (status !== timeScheduleStatus) {
+      setTimeScheduleStatus(status)
+    }
+  }, [JSON.stringify(state.timeScheduleList)])
+
+  useEffect(() => {
+    getTimeScheduleList().then()
+  }, [state.flag])
+
+  const navigateToEdit = useCallback((mode: 'add' | 'edit', timeSchedule?: Timer) => {
+    const path = ui_biz_routerKey.group_ui_biz_time_schedule_edit
+    navigation.navigate(path, {
+      mode,
+      name: path,
+      timeSchedule,
+      modDeleteTimeSchedule,
+      refreshFn: () => {
+        state.flag = Symbol()
+      },
+      ...props
+    })
+  }, [])
+
+  const modDeleteTimeSchedule = async (mode: 'add' | 'edit' | 'del', timeSchedule: Timer, ids: string) => {
+    if (mode === 'add') {
+      return addTimeSchedule({
+        ...timeSchedule,
+        bizId: uaGroupInfo.tyGroupId.toString(),
+        actions: timeSchedule.dps
+      })
+    } else if (mode === 'edit') {
+      return modifyTimeSchedule({
+        ...timeSchedule,
+        bizId: uaGroupInfo.tyGroupId.toString(),
+        actions: timeSchedule.dps
+      })
+    } else {
+      return modDelTimeSchedule({
+        bizId: uaGroupInfo.tyGroupId.toString(),
+        status: timeSchedule.status,
+        ids,
+      })
+    }
+  }
+
+  const getTimeScheduleList = async () => {
+    const res = await getTimeSchedule({
+      bizId: uaGroupInfo.tyGroupId.toString()
+    })
+    if (res.success) {
+      state.timeScheduleList = res.data || []
+    } else {
+      state.timeScheduleList = []
+    }
+  }
+
+  return (
+    <Page
+      backText={deviceInfo.name}
+      onBackClick={navigation.goBack}
+      headlineText={I18n.getLang('timeschedule_overview_headline_text')}
+      headlineIcon={isMaxSchedule ? undefined : res.device_panel_schedule_add}
+      onHeadlineIconClick={() => {
+        navigateToEdit('add')
+      }}
+      loading={state.loading}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <Text style={styles.overviewDescription}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
+        <Spacer height={cx(10)} />
+        {isMaxSchedule && <InfoText
+          text={I18n.getLang('motion_detection_time_schedule_notifications_warning_text')}
+          icon={res.ic_warning_amber}
+          style={{ marginHorizontal: cx(24) }}
+          textStyle={{ color: '#000' }}
+          iconStyle={{ tintColor: '#ff9500' }}
+        />}
+        <FlatList
+          data={state.timeScheduleList}
+          renderItem={({ item }) =>
+          (<ScheduleCard
+            item={item}
+            onEnableChange={(enable) => {
+              state.loading = true
+              modDeleteTimeSchedule('del', {
+                ...item,
+                status: enable ? 1 : 0
+              }, item.id.toString()).then((res) => {
+                if (res.success) {
+                  state.timeScheduleList = state.timeScheduleList.map(schedule => {
+                    if (schedule.id === item.id) {
+                      return {
+                        ...schedule,
+                        status: enable ? 1 : 0
+                      }
+                    }
+                    return schedule
+                  })
+                }
+                state.loading = false
+              })
+            }}
+            onPress={() => {
+              navigateToEdit('edit', item)
+            }}
+            onLongPress={() => { }}
+          />)}
+          keyExtractor={(item) => item.id.toString()}
+          ListEmptyComponent={() => (
+            <View style={styles.emptyContainer}>
+              <Spacer height={cx(60)} />
+              <Image
+                style={styles.emptyImage}
+                source={{ uri: res.ldv_timer_empty }}
+                resizeMode="contain"
+              />
+              <InfoText
+                icon={res.device_panel_schedule_alert}
+                text={I18n.getLang('timeschedule_overview_empty_information_text')}
+                style={{ width: 'auto', alignItems: 'center' }}
+                textStyle={{ color: '#000', flex: undefined }}
+                iconStyle={{ tintColor: '#000' }}
+              />
+              <Spacer height={cx(16)} />
+              <DeleteButton
+                style={styles.addBtn}
+                text={`${I18n.getLang('timeschedule_overview_empty_button_add_text')}`}
+                textStyle={{ fontSize: cx(12) }}
+                onPress={() => {
+                  navigateToEdit('add')
+                }}
+              />
+            </View>
+          )}
+          ListHeaderComponent={() => <Spacer height={cx(10)} />}
+          ItemSeparatorComponent={() => <Spacer />}
+          ListFooterComponent={() => <Spacer height={cx(30)} />}
+        />
+      </ScrollView>
+    </Page>
+  )
+}
+
+
+const styles = StyleSheet.create({
+  overviewDescription: {
+    color: '#000',
+    marginHorizontal: cx(24)
+  },
+  emptyImage: {
+    width: cx(225),
+    height: cx(198),
+  },
+  emptyContainer: {
+    marginHorizontal: cx(24),
+    alignItems: 'center'
+  },
+  addBtn: {
+    height: cx(45),
+    width: 'auto',
+    minWidth: cx(150),
+    paddingHorizontal: cx(16),
+    backgroundColor: '#f60'
+  }
+})
+
+export default TimeSchedulePage

package/src/modules/timer/TimerAction.d.ts

@@ -0,0 +1,12 @@
+export interface TimerTask {
+    name: string;
+    startTime: number;
+    duration: number;
+    dpKey: number;
+    status: TaskStatus;
+}
+export declare enum TaskStatus {
+    NoSelected = 0,
+    Selected = 1,
+    Started = 2
+}

package/src/modules/timer/TimerAction.ts

@@ -0,0 +1,150 @@
+import { useFeatureHook } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import { Result } from '@ledvance/base/src/models/modules/Result'
+import dayjs from 'dayjs'
+import { useCountDown, useReactive } from 'ahooks'
+import { useEffect } from 'react'
+import { cloneDeep } from 'lodash'
+
+export interface TimerTask {
+  name: string
+  startTime: number
+  duration: number
+  timeLeft: number
+  dp: {
+    key: string
+    code: string
+  }
+  status: TaskStatus
+  stringOn: string
+  stringOff: string
+}
+
+export enum TaskStatus {
+  NoSelected,
+  Selected,
+  Started
+}
+
+export interface TimerConfig {
+  timerTasks: TimerTask[]
+}
+
+export function useTimerTasks(timerSettableDps: TimerSettableDp[]): [TimerTask[], (value: TimerTask[]) => Promise<Result<any>>] {
+  const countdowns = timerSettableDps.map(dps => {
+    const [countdown, setTargetDate] = useCountDown({ interval: 1000 })
+    return {
+      dpCode: dps.dp.code,
+      countdown: {
+        value: countdown,
+        setTargetDate,
+      },
+    }
+  })
+  const [tasks, setTasks] = useFeatureHook<TimerConfig, TimerTask[]>(
+    'timerTasks',
+    timerSettableDps.map(timerSettableDp => ({
+      name: timerSettableDp.label,
+      startTime: 0,
+      duration: 0,
+      timeLeft: 0,
+      dp: timerSettableDp.dp,
+      status: TaskStatus.NoSelected,
+      stringOn: timerSettableDp.stringOn,
+      stringOff: timerSettableDp.stringOff,
+    })),
+    () => undefined,
+    timerTasks => {
+      const dps = {}
+      timerTasks.forEach(task => {
+        dps[task.dp.code] = task.duration
+      })
+      return dps
+    },
+  )
+
+  const state = useReactive({ tasks: cloneDeep(tasks) })
+
+  useEffect(() => {
+    state.tasks = cloneDeep(tasks)
+      .map(task => {
+        const taskEndTime = dayjs.unix(task.startTime)
+          .add(task.duration, 'second')
+        const taskIsEnd = task.status !== TaskStatus.Started ||
+          getTaskLeftover(task) === 0
+
+        countdowns.forEach(countdown => {
+          if (countdown.dpCode === task.dp.code) {
+            countdown.countdown.setTargetDate(taskIsEnd ? undefined : taskEndTime.toDate())
+          }
+        })
+
+        return {
+          ...task,
+          startTime: taskIsEnd ? 0 : task.startTime,
+          duration: taskIsEnd ? 0 : task.duration,
+          timeLeft: taskIsEnd ? 0 : task.timeLeft,
+          status: taskIsEnd ? TaskStatus.NoSelected : TaskStatus.Started,
+        }
+      })
+
+    return () => {
+      countdowns.forEach(countdown => {
+        countdown.countdown.setTargetDate(undefined)
+      })
+    }
+  }, [JSON.stringify(tasks)])
+
+  useEffect(() => {
+    countdowns.forEach(cd => {
+      state.tasks.forEach(task => {
+        if (task.dp.code === cd.dpCode) {
+          task.timeLeft = Math.trunc(cd.countdown.value / 1000)
+          if (task.timeLeft <= 0) {
+            task.status = TaskStatus.NoSelected
+          } else {
+            task.status = TaskStatus.Started
+          }
+        }
+      })
+    })
+  }, [JSON.stringify(countdowns.map(c => c.countdown.value))])
+
+  return [state.tasks, setTasks]
+}
+
+export function getTaskLeftover(timerTask: TimerTask): number {
+  // 当前时间和任务结束时间
+  const currentTime = dayjs()
+  const taskEndTime = dayjs.unix(timerTask.startTime).add(timerTask.duration, 'second')
+
+  // 剩余时间
+  const timeLeft = taskEndTime.diff(currentTime, 'second')
+
+  // 如果剩余时间小于0，返回0
+  return timeLeft > 0 ? timeLeft : 0
+}
+
+export interface TimerSettableDp {
+  label: string
+  dp: {
+    key: string
+    code: string
+  }
+  stringOn: string
+  stringOff: string
+}
+
+export interface TimerPageParams {
+  timerSettableDps: TimerSettableDp[]
+}
+
+export function timeFormat(time: number): string {
+  let hour = Math.trunc(time / 3600)
+  const beforeMin = (time % 3600) / 60
+  let min = Math.ceil(beforeMin)
+  if (min === 60) {
+    hour += 1
+    min = 0
+  }
+  return `${hour > 0 ? `${hour} h ` : ''}${min > 0 ? `${min} min` : ''}`
+}

package/src/modules/timer/TimerPage.d.ts

@@ -0,0 +1,2 @@
+declare const TimerPage: () => JSX.Element;
+export default TimerPage;