@ledvance/group-ui-biz-bundle 1.0.0 → 1.0.2

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/group-ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/mood/DynamicMoodEditorPage.tsx

@@ -47,7 +47,6 @@ const DynamicMoodEditorPage = () => {
     sceneMode: moduleParams.isStringLight ? stringLightSceneMode : moduleParams.isStripLight ? stripLightSceneMode : lightSceneMode
   })
 
-  const canDelete = useMemo(() => (role === 0 || role === 2), [role])
   useEffect(() => {
     state.headline = Strings.getLang(params.mode ? 'add_new_dynamic_mood_headline_text' : 'edit_static_mood_headline_text')
   }, [params.mode])
@@ -423,7 +422,7 @@ const DynamicMoodEditorPage = () => {
                 state.mood.fanSpeed = fanSpeed
               }}
               style={styles.fanAdjustCard} />}
-          {params.mode === 'edit' && canDelete &&
+          {params.mode === 'edit' &&
             <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
               <TextButton
                 style={styles.deleteBtn}

package/src/modules/mood/MoodPage.tsx

@@ -85,6 +85,7 @@ const MoodPage = () => {
         isSupportUVC: params.isSupportUVC
       }).then(res => {
         if (res.success && res.data) {
+          console.log(res.data, '< --- res.datatata')
           setMoods(res.data)
           // @ts-ignore
           state.scenes = cloneDeep(res.data)
@@ -93,11 +94,11 @@ const MoodPage = () => {
     }
   }, [])
 
-  const checkedMood = (currentMood?: SceneUIState): SceneUIState | undefined=>{
-    if(currentMood){
+  const checkedMood = (currentMood?: SceneUIState): SceneUIState | undefined => {
+    if (currentMood) {
       return {
         ...currentMood,
-        nodes: currentMood.nodes.map(node =>({
+        nodes: currentMood.nodes.map(node => ({
           ...node,
           h: node.h,
           s: node.isColorNode ? node.s : 50,
@@ -126,15 +127,15 @@ const MoodPage = () => {
     const checkedMood = {
       ...currentMood,
       nodes: currentMood.nodes.map(node => {
-        if(mode !== 'del'){
-          if(node.isColorNode){
+        if (mode !== 'del') {
+          if (node.isColorNode) {
             node.brightness = 0
             node.colorTemp = 0
-          }else{
+          } else {
             node.h = 0
             node.s = 0
             node.v = 0
-            if(!params.isSupportTemperature){
+            if (!params.isSupportTemperature) {
               node.colorTemp = 100 // 适配dim灯
             }
           }
@@ -190,23 +191,6 @@ const MoodPage = () => {
     state.showAddMoodPopover = false
   }, [state.scenes])
 
-  const getCustomList = (isFantasyScene: boolean) =>{
-    const customList = [
-      {
-        text: Strings.getLang('mood_overview_add_mood_text'),
-        value: true,
-      },
-      {
-        text: Strings.getLang('mood_overview_add_mood_text2'),
-        value: false,
-      },
-    ]
-    if(isFantasyScene){
-      return customList.filter(c => !c.value)
-    }
-    return customList
-  }
-
   useEffect(() => {
     state.filteredMoods = state.scenes.filter(item => {
       return (state.staticTagChecked && state.dynamicTagChecked) ||
@@ -218,7 +202,8 @@ const MoodPage = () => {
 
   const gradientMode = useMemo(() => (
     params.isStringLight ? SceneMode.StringGradient : params.isStripLight ? SceneMode.StripGradient : SceneMode.SourceGradient
-    ), [params.isStringLight, params.isStripLight, SceneMode])
+  ), [params.isStringLight, params.isStripLight, SceneMode])
+
   return (
     <>
       <Page
@@ -226,7 +211,11 @@ const MoodPage = () => {
         headlineText={Strings.getLang('mood_overview_headline_text')}
         headlineIcon={state.scenes.length < MAX_MOOD_COUNT ? res.add : undefined}
         onHeadlineIconClick={() => {
-          state.showAddMoodPopover = !state.showAddMoodPopover
+          if (params.isStringLight || params.isStripLight) {
+            onAddMoodDialogItemClick(false, 1)
+          } else {
+            state.showAddMoodPopover = !state.showAddMoodPopover
+          }
         }}
         loading={state.loading}>
         <View style={styles.tagLine}>
@@ -283,15 +272,7 @@ const MoodPage = () => {
           }}
           ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
           ItemSeparatorComponent={() => (<Spacer />)}
-          ListFooterComponent={() => (
-            <View style={styles.infoLine}>
-              <Spacer />
-              <InfoText
-                icon={res.ic_info}
-                text={Strings.getLang('mood_overview_information_text')} />
-              <Spacer height={cx(40)} />
-            </View>
-          )}
+          ListFooterComponent={() => (<Spacer />)}
           keyExtractor={item => `${item.id}`} />
       </Page>
       <CustomListDialog
@@ -301,7 +282,16 @@ const MoodPage = () => {
         onDismiss={() => {
           state.showAddMoodPopover = false
         }}
-        data={getCustomList(!!(params.isStringLight || params.isStripLight))}
+        data={[
+          {
+            text: Strings.getLang('mood_overview_add_mood_text'),
+            value: true,
+          },
+          {
+            text: Strings.getLang('mood_overview_add_mood_text2'),
+            value: false,
+          },
+        ]}
         onItemPress={onAddMoodDialogItemClick} />
     </>
   )

package/src/modules/mood/StaticMoodEditorPage.tsx

@@ -51,7 +51,7 @@ const StaticMoodEditorPage = () => {
     currentNode: params.currentMood.nodes[0],
     loading: false
   })
-  const canDelete = useMemo(() => (role === 0 || role === 2), [role])
+
   useEffect(() => {
     state.headline = I18n.getLang(params.mode === 'add' ? 'add_new_static_mood_headline_text' : 'edit_static_mood_headline_text')
   }, [params.mode])
@@ -180,7 +180,7 @@ const StaticMoodEditorPage = () => {
                 state.mood.fanSpeed = fanSpeed
               }}
               style={styles.fanAdjustCard} />}
-          {params.mode === 'edit' && canDelete &&
+          {params.mode === 'edit' &&
             <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
               <TextButton
                 style={styles.deleteBtn}

package/src/modules/time_schedule/Interface.ts

@@ -82,4 +82,9 @@ export interface IModDeleteTaskByIds {
   bizType?: string;
   ids: string;
   status?: number;
+}
+
+export enum UVCFanMode {
+  Nature = 'nature',
+  Normal = 'normal'
 }

package/src/modules/time_schedule/ScheduleCard.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import { ViewStyle, View, Text, StyleSheet } from "react-native";
 import Card from "@ledvance/base/src/components/Card";
 import { SwitchButton, Utils } from 'tuya-panel-kit';
-import { loopText } from '@ledvance/base/src/utils/common';
+import { convertTo12HourFormat, loopText } from '@ledvance/base/src/utils/common';
 import { Timer } from "./Interface";
+import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
 const { convertX: cx } = Utils.RatioUtils;
 
 interface ScheduleCardProps {
@@ -16,6 +17,7 @@ interface ScheduleCardProps {
 
 const ScheduleCard = (props: ScheduleCardProps) => {
   const { item, style, onEnableChange, onPress } = props;
+  const is24HourClock = useSystemTimeFormate()
   return (
     <Card
       style={styles.card}
@@ -28,7 +30,7 @@ const ScheduleCard = (props: ScheduleCardProps) => {
         // onLongPress(item);
       }}>
       <View style={styles.infoContainer}>
-        <Text style={styles.time}>{item.time}</Text>
+        <Text style={styles.time}>{is24HourClock ? item.time : convertTo12HourFormat(item.time)}</Text>
         <Text style={styles.loop}>
           {loopText(item.loops.split('').map(loop => parseInt(loop)), item.time)}
         </Text>

package/src/modules/time_schedule/TimeScheduleActions.ts

@@ -1,10 +1,10 @@
 import { commonApi } from "@tuya/tuya-panel-api"
-import { IAddSingleTime, IQueryTimerTasks, IModifySingleTimer, IModDeleteTaskByIds } from "./Interface"
+import { IAddSingleTime, IQueryTimerTasks, IModifySingleTimer, IModDeleteTaskByIds, UVCFanMode } from "./Interface"
 import { flatMapDeep } from "lodash";
-
+import I18n from "@ledvance/base/src/i18n";
 
 export const addTimeSchedule = async (props: IAddSingleTime) => {
-  try{
+  try {
     const res = await commonApi.timerApi.addSingleTimer({
       ...props,
       bizType: '1'
@@ -17,7 +17,7 @@ export const addTimeSchedule = async (props: IAddSingleTime) => {
     return {
       success: false
     }
-  }catch(err){
+  } catch (err) {
     return {
       success: false
     }
@@ -25,7 +25,7 @@ export const addTimeSchedule = async (props: IAddSingleTime) => {
 }
 
 export const getTimeSchedule = async (props: IQueryTimerTasks) => {
-  try{
+  try {
     const res = await commonApi.timerApi.queryTimerTasks({
       ...props,
       bizType: '1',
@@ -40,7 +40,7 @@ export const getTimeSchedule = async (props: IQueryTimerTasks) => {
     return {
       success: false
     }
-  }catch(err){
+  } catch (err) {
     return {
       success: false
     }
@@ -48,7 +48,7 @@ export const getTimeSchedule = async (props: IQueryTimerTasks) => {
 }
 
 export const modifyTimeSchedule = async (props: IModifySingleTimer) => {
-  try{
+  try {
     const status = await commonApi.timerApi.modifySingleTimer({
       ...props,
       bizType: '1',
@@ -56,15 +56,15 @@ export const modifyTimeSchedule = async (props: IModifySingleTimer) => {
     return {
       success: status
     }
-  }catch(err){
+  } catch (err) {
     return {
       success: false
     }
   }
 }
 
-export const modDelTimeSchedule = async (props: IModDeleteTaskByIds) =>{
-  try{
+export const modDelTimeSchedule = async (props: IModDeleteTaskByIds) => {
+  try {
     const status = await commonApi.timerApi.modDeleteTaskByIds({
       ...props,
       bizType: '1',
@@ -73,9 +73,30 @@ export const modDelTimeSchedule = async (props: IModDeleteTaskByIds) =>{
     return {
       success: status
     }
-  }catch(err){
+  } catch (err) {
     return {
       success: false
     }
   }
+}
+
+export const fanModeOption = [
+  {
+    label: I18n.getLang('ceiling_fan_mode_info_option_1_headline'),
+    value: UVCFanMode.Normal,
+  },
+  {
+    label: I18n.getLang('ceiling_fan_mode_info_option_2_headline'),
+    value: UVCFanMode.Nature,
+  },
+]
+
+export const actionOption = {
+  switchLed: I18n.getLang('light_sources_tile_tw_lighting_headline'),
+  switchSocket: I18n.getLang('feature_summary_action_component_5'),
+  switchSocket1: I18n.getLang('feature_summary_action_component_6'),
+  switchSocket2: I18n.getLang('feature_summary_action_component_7'),
+  switchSocket3: I18n.getLang('feature_summary_action_component_8'),
+  switchSocket4: I18n.getLang('feature_summary_action_component_9'),
+  switchFan: I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline'),
 }

package/src/modules/time_schedule/TimeScheduleDetailPage.tsx

@@ -9,14 +9,14 @@ import { useCreation, 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 { loopText, showDialog } from "@ledvance/base/src/utils/common";
+import { convertTo12HourFormat, loopText, showDialog } from "@ledvance/base/src/utils/common";
 import Card from "@ledvance/base/src/components/Card";
 import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
 import ApplyForDeviceList from '@ledvance/base/src/components/ApplyForDeviceList'
 import LampAdjustView from "@ledvance/base/src/components/LampAdjustView";
-import { Timer } from './Interface'
+import { Timer, UVCFanMode } from './Interface'
 import res from "@ledvance/base/src/res";
-import { useGroupDevices, useMoods, useUAGroupInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { useGroupDevices, 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";
@@ -28,8 +28,10 @@ import { dp2Obj, getRemoteSceneList, obj2Dp, stripDp2Obj, stripObj2Dp } from "..
 import FanAdjustView from "@ledvance/base/src/components/FanAdjustView";
 import { SceneMode } from "../mood/SceneInfo";
 import StripAdjustView, { ColorList } from "@ledvance/base/src/components/StripAdjustView"
+import SocketItem from '@ledvance/base/src/components/SocketItem'
 import { WorkMode } from "@ledvance/base/src/utils/interface";
 import { Buffer } from 'buffer'
+import { fanModeOption, actionOption } from "./TimeScheduleActions";
 
 const { convertX: cx } = Utils.RatioUtils;
 const { toFixedString } = Utils.NumberUtils;
@@ -42,16 +44,22 @@ interface TimeScheduleDetailPageParams extends TimeSchedulePageParams {
 const TimeScheduleDetailPage = () => {
   const navigation = useNavigation()
   const uaGroupInfo = useUAGroupInfo()
+  const is24HourClock = useSystemTimeFormate()
   const [groupDevices] = useGroupDevices()
   const [moods, setMoods] = useMoods()
   const props = cloneDeep(useRoute().params) as TimeScheduleDetailPageParams
   const state = useReactive({
     timeSchedule: props.mode === 'add' ? newTimeSchedule() : cloneDeep(props.timeSchedule),
     isManual: true,  // manual ,mood
-    isColorMode: true,
+    isColorMode: !!props.colorDataCode,
     switchLed: true, // light
-    switchSocket: true,
+    switchSocket1: true,
+    switchSocket2: true,
+    switchSocket3: true,
+    switchSocketUSB: true,
     switchFan: true,
+    fanMode: UVCFanMode.Normal,
+    fanSpeed: 1,
     brightness: 100,
     temperature: 0,
     hsv: defaultHsv(),
@@ -76,6 +84,10 @@ const TimeScheduleDetailPage = () => {
     return tabs
   }, [])
 
+  const isPowerStrip = useMemo(() => {
+    return !!(props.switchSocket3 || props.switchSocketUSB)
+  }, [])
+
   const getSceneByDp = (sceneDp: string) => {
     if (props.sceneDataDp2Obj) {
       return props.sceneDataDp2Obj(sceneDp)
@@ -122,30 +134,59 @@ const TimeScheduleDetailPage = () => {
       if (props.switchLedCode && dps.hasOwnProperty(props.switchLedCode)) {
         state.switchLed = dps[props.switchLedCode]
       }
+      if (props.switchSocket1 && dps.hasOwnProperty(props.switchSocket1)) {
+        state.switchSocket1 = dps[props.switchSocket1]
+      }
+      if (props.switchSocket2 && dps.hasOwnProperty(props.switchSocket2)) {
+        state.switchSocket2 = dps[props.switchSocket2]
+      }
+      if (props.switchSocket3 && dps.hasOwnProperty(props.switchSocket3)) {
+        state.switchSocket3 = dps[props.switchSocket3]
+      }
+      if (props.switchSocketUSB && dps.hasOwnProperty(props.switchSocketUSB)) {
+        state.switchSocketUSB = dps[props.switchSocketUSB]
+      }
+      if (props.switchFan && dps.hasOwnProperty(props.switchFan)) {
+        state.switchFan = dps[props.switchFan]
+      }
+      if (props.fanModeCode && dps.hasOwnProperty(props.fanModeCode)) {
+        state.fanMode = dps[props.fanModeCode]
+      }
+      if (props.fanSpeedCode && dps.hasOwnProperty(props.fanSpeedCode)) {
+        state.fanSpeed = dps[props.fanSpeedCode]
+      }
       if (props.tempValueCode && dps.hasOwnProperty(props.tempValueCode)) {
-        state.temperature = Math.round(dps[props.tempValueCode] / 10)
+        if (props.tempValueParser) {
+          state.temperature = props.tempValueParser(dps[props.tempValueCode])
+        } else {
+          state.temperature = Math.round(dps[props.tempValueCode] / 10)
+        }
         state.isColorMode = false
       }
       if (props.brightValueCode && dps.hasOwnProperty(props.brightValueCode)) {
-        state.brightness = Math.round(dps[props.brightValueCode] / 10)
+        if (props.brightValueParser) {
+          state.brightness = props.brightValueParser(dps[props.brightValueCode])
+        } else {
+          state.brightness = Math.round(dps[props.brightValueCode] / 10)
+        }
         state.isColorMode = false
       }
       if (props.colorDataCode && dps.hasOwnProperty(props.colorDataCode)) {
         if (props.colorDataDp2Obj) {
           const color = props.colorDataDp2Obj(dps[props.colorDataCode])
+          state.hsv = cloneDeep(color)
+          if (props.isMatterLight && props.brightValueCode && dps.hasOwnProperty(props.brightValueCode) && props.brightValueParser) {
+            state.hsv.v = props.brightValueParser(dps[props.brightValueCode])
+          }
+        } else {
+          const hsv = getHSVByHex(dps[props.colorDataCode])
           state.hsv = {
-            h: color.h,
-            s: Math.round(color.s / 10),
-            v: Math.round(color.v / 10),
+            h: hsv.h,
+            s: Math.round(hsv.s / 10),
+            v: Math.round(hsv.v / 10),
           }
-          return
-        }
-        const hsv = getHSVByHex(dps[props.colorDataCode])
-        state.hsv = {
-          h: hsv.h,
-          s: Math.round(hsv.s / 10),
-          v: Math.round(hsv.v / 10),
         }
+        state.isColorMode = true
       }
       if (props.sceneDataCode && dps.hasOwnProperty(props.sceneDataCode)) {
         if (dps[props.sceneDataCode]) {
@@ -187,33 +228,60 @@ const TimeScheduleDetailPage = () => {
   }, [])
 
   const getActionOnOff = useMemo(() => {
-    const off = [] as string[]
-    const on = [] as string[]
+    const off: string[] = []
+    const on: string[] = []
     if (props.switchLedCode) {
+      const s = actionOption['switchLed']
       if (state.switchLed) {
-        on.push(I18n.getLang('light_sources_tile_tw_lighting_headline'))
+        on.push(s)
+      } else {
+        off.push(s)
+      }
+    }
+    if (props.switchSocket1) {
+      const s = isPowerStrip ? actionOption['switchSocket1'] : actionOption['switchSocket']
+      if (state.switchSocket1) {
+        on.push(s)
+      } else {
+        off.push(s)
+      }
+    }
+    if (props.switchSocket2) {
+      const s = actionOption['switchSocket2']
+      if (state.switchSocket2) {
+        on.push(s)
+      } else {
+        off.push(s)
+      }
+    }
+    if (props.switchSocket3) {
+      const s = actionOption['switchSocket3']
+      if (state.switchSocket3) {
+        on.push(s)
       } else {
-        off.push(I18n.getLang('light_sources_tile_tw_lighting_headline'))
+        off.push(s)
       }
     }
-    if (props.switchSocket) {
-      if (state.switchSocket) {
-        on.push(I18n.getLang('feature_summary_action_component_5'))
+    if (props.switchSocketUSB) {
+      const s = actionOption['switchSocket4']
+      if (state.switchSocketUSB) {
+        on.push(s)
       } else {
-        off.push(I18n.getLang('feature_summary_action_component_5'))
+        off.push(s)
       }
     }
     if (props.switchFan) {
+      const s = actionOption['switchFan']
       if (state.switchFan) {
-        on.push(I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline'))
+        on.push(s)
       } else {
-        off.push(I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline'))
+        off.push(s)
       }
     }
     return {
       on, off
     }
-  }, [state.switchLed, state.switchSocket, state.switchFan])
+  }, [state.switchLed, state.switchSocket1, state.switchSocket2, state.switchSocket3, state.switchSocketUSB, state.switchFan])
 
   const getActions = useCallback(() => {
     const actions = {
@@ -231,7 +299,7 @@ const TimeScheduleDetailPage = () => {
             isColor: state.isColorMode
           })
           const whiteMode = props.isStringLight ? !state.isColorMode : state.stripState.activeKey === 0
-          actions.dps[props.workModeCode] = whiteMode ? WorkMode.White : WorkMode.Colour
+          if (props.workModeCode) actions.dps[props.workModeCode] = whiteMode ? WorkMode.White : WorkMode.Colour
 
         } else if (state.isColorMode) {
           if (props.colorDataCode) {
@@ -242,25 +310,57 @@ const TimeScheduleDetailPage = () => {
             }
             if (props.colorDataObj2Dp) {
               actions.dps[props.colorDataCode] = props.colorDataObj2Dp(hsv)
+              if (props.isMatterLight && props.brightValueCode && props.brightValueFormatter) {
+                actions.dps[props.brightValueCode] = props.brightValueFormatter(state.hsv.v)
+              }
             } else {
               const hex = getHexByHSV(hsv)
               actions.dps[props.colorDataCode] = hex
             }
           }
-          actions.dps[props.workModeCode] = WorkMode.Colour
+          if (props.workModeCode) actions.dps[props.workModeCode] = WorkMode.Colour
         } else {
           if (props.brightValueCode) {
-            actions.dps[props.brightValueCode] = state.brightness * 10
+            if (props.brightValueFormatter) {
+              actions.dps[props.brightValueCode] = props.brightValueFormatter(state.brightness)
+            } else {
+              actions.dps[props.brightValueCode] = state.brightness * 10
+            }
           }
           if (props.tempValueCode) {
-            actions.dps[props.tempValueCode] = state.temperature * 10
+            if (props.tempValueFormatter) {
+              actions.dps[props.tempValueCode] = props.tempValueFormatter(state.temperature)
+            } else {
+              actions.dps[props.tempValueCode] = state.temperature * 10
+            }
           }
-          actions.dps[props.workModeCode] = WorkMode.White
+          if (props.workModeCode) actions.dps[props.workModeCode] = WorkMode.White
         }
       }
       if (props.switchLedCode) {
         actions.dps[props.switchLedCode] = state.switchLed
       }
+      if (props.switchSocket1) {
+        actions.dps[props.switchSocket1] = state.switchSocket1
+      }
+      if (props.switchSocket2) {
+        actions.dps[props.switchSocket2] = state.switchSocket2
+      }
+      if (props.switchSocket3) {
+        actions.dps[props.switchSocket3] = state.switchSocket3
+      }
+      if (props.switchSocketUSB) {
+        actions.dps[props.switchSocketUSB] = state.switchSocketUSB
+      }
+      if (props.switchFan) {
+        actions.dps[props.switchFan] = state.switchFan
+        if (props.fanModeCode && state.switchFan) {
+          actions.dps[props.fanModeCode] = state.fanMode
+        }
+        if (props.fanSpeedCode && state.switchFan) {
+          actions.dps[props.fanSpeedCode] = state.fanSpeed
+        }
+      }
     } else {
       if (props.sceneDataCode) {
         actions.dps[props.sceneDataCode] = state.scene
@@ -273,7 +373,7 @@ const TimeScheduleDetailPage = () => {
     console.log(state, '< --- state')
     console.log(actions, '< --- actions')
     return JSON.stringify(actions)
-  }, [state.timeSchedule.time, state.switchLed, state.brightness, state.temperature])
+  }, [JSON.stringify(state)])
 
   const isModify = useMemo(() => {
     const schedule = props.mode === 'add' ? newTimeSchedule() : props.timeSchedule
@@ -319,8 +419,6 @@ const TimeScheduleDetailPage = () => {
       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 () => {
-        getActions()
-        return
         if (!allowSubmit || state.loading) return
         state.loading = true
         const res = await props.modDeleteTimeSchedule(props.mode, {
@@ -357,8 +455,10 @@ const TimeScheduleDetailPage = () => {
         <TimerPicker
           itemTextColor='#aeadb5'
           style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
-          is12Hours={false}
+          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) => {
@@ -389,99 +489,185 @@ const TimeScheduleDetailPage = () => {
         <Spacer height={cx(10)} />
         {state.isManual ?
           <>
-            {!!props.switchLedCode && <Card
-              style={styles.cardContainer}
-            >
-              <LdvSwitch
-                title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-                color={'#fff'}
-                colorAlpha={1}
-                enable={state.switchLed}
-                setEnable={(enable: boolean) => {
-                  state.switchLed = enable
-                }}
-              />
-              {state.switchLed && (props.isStripLight ?
-                <StripAdjustView
-                  lampTabs={tabList}
-                  onColorDiskChange={(color, idx: K) => {
-                    state.stripState = {
-                      ...state.stripState,
-                      colors: color,
-                      colorDiskActiveKey: idx
-                    }
-                  }}
-                  colorDiskActiveKey={state.stripState.colorDiskActiveKey}
-                  activeKey={state.stripState.activeKey}
-                  onActiveKeyChange={(v) => {
-                    state.stripState = {
-                      ...state.stripState,
-                      activeKey: Number(v) as K
-                    }
+            {!!props.switchLedCode && <>
+              <Card
+                style={styles.cardContainer}
+              >
+                <LdvSwitch
+                  title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+                  color={'#fff'}
+                  colorAlpha={1}
+                  enable={state.switchLed}
+                  setEnable={(enable: boolean) => {
+                    state.switchLed = enable
                   }}
-                  isSupportTemperature={props.isSupportTemperature}
-                  isSupportBrightness={props.isSupportBrightness}
-                  h={state.hsv.h} s={state.hsv.s} v={state.hsv.v}
-                  onHSVChange={(h, s, v) => { state.hsv = { h, s, v } }}
-                  onHSVChangeComplete={(h, s, v) => { state.hsv = { h, s, v } }}
-                  colorTemp={state.temperature}
-                  brightness={state.brightness}
-                  onCCTChange={() => { }}
-                  onCCTChangeComplete={(cct) => { state.temperature = cct }}
-                  onBrightnessChange={() => { }}
-                  onBrightnessChangeComplete={(bright) => { state.brightness = bright }}
-                /> :
-                <LampAdjustView
-                  reserveSV={true}
-                  isSupportBrightness={props.isSupportBrightness}
-                  isSupportColor={props.isSupportColor}
-                  isSupportTemperature={props.isSupportTemperature}
-                  isColorMode={state.isColorMode}
-                  setIsColorMode={(v) => { state.isColorMode = v }}
-                  h={state.hsv.h} s={state.hsv.s} v={state.hsv.v}
-                  colorTemp={state.temperature}
-                  brightness={state.brightness}
-                  onHSVChangeComplete={(h, s, v) => { state.hsv = { h, s, v } }}
-                  onHSVChange={(h, s, v) => { state.hsv = { h, s, v } }}
-                  onCCTChangeComplete={(cct) => { state.temperature = cct }}
-                  onCCTChange={(cct) => { state.temperature = cct }}
-                  onBrightnessChangeComplete={(bright) => { state.brightness = bright }}
-                  onBrightnessChange={(bright) => { state.brightness = bright }}
-                />)}
-              <ApplyForDeviceList
-                devices={cloneDeep(groupDevices)}
-              />
-              <Spacer height={cx(16)} />
-            </Card>}
+                />
+                {state.switchLed && (props.isStripLight ?
+                  <StripAdjustView
+                    lampTabs={tabList}
+                    onColorDiskChange={(color, idx: K) => {
+                      state.stripState = {
+                        ...state.stripState,
+                        colors: color,
+                        colorDiskActiveKey: idx
+                      }
+                    }}
+                    colorDiskActiveKey={state.stripState.colorDiskActiveKey}
+                    activeKey={state.stripState.activeKey}
+                    onActiveKeyChange={(v) => {
+                      state.stripState = {
+                        ...state.stripState,
+                        activeKey: Number(v) as K
+                      }
+                    }}
+                    isSupportTemperature={props.isSupportTemperature}
+                    isSupportBrightness={props.isSupportBrightness}
+                    h={state.hsv.h} s={state.hsv.s} v={state.hsv.v}
+                    onHSVChange={(h, s, v) => { state.hsv = { h, s, v } }}
+                    onHSVChangeComplete={(h, s, v) => { state.hsv = { h, s, v } }}
+                    colorTemp={state.temperature}
+                    brightness={state.brightness}
+                    onCCTChange={() => { }}
+                    onCCTChangeComplete={(cct) => { state.temperature = cct }}
+                    onBrightnessChange={() => { }}
+                    onBrightnessChangeComplete={(bright) => { state.brightness = bright }}
+                  /> :
+                  <LampAdjustView
+                    reserveSV={true}
+                    isSupportBrightness={props.isSupportBrightness}
+                    isSupportColor={props.isSupportColor}
+                    isSupportTemperature={props.isSupportTemperature}
+                    isColorMode={state.isColorMode}
+                    setIsColorMode={(v) => { state.isColorMode = v }}
+                    h={state.hsv.h} s={state.hsv.s} v={state.hsv.v}
+                    colorTemp={state.temperature}
+                    brightness={state.brightness}
+                    onHSVChangeComplete={(h, s, v) => { state.hsv = { h, s, v } }}
+                    onHSVChange={(h, s, v) => { state.hsv = { h, s, v } }}
+                    onCCTChangeComplete={(cct) => { state.temperature = cct }}
+                    onCCTChange={(cct) => { state.temperature = cct }}
+                    onBrightnessChangeComplete={(bright) => { state.brightness = bright }}
+                    onBrightnessChange={(bright) => { state.brightness = bright }}
+                  />)}
+                <ApplyForDeviceList
+                  devices={cloneDeep(groupDevices)}
+                />
+                <Spacer height={cx(16)} />
+              </Card>
+              <Spacer />
+            </>}
 
             {/* socket */}
-            {!!props.switchSocket && <Card
-              style={styles.cardContainer}
-            >
-              <LdvSwitch
-                title={I18n.getLang('feature_summary_action_component_5')}
-                color={'#fff'}
-                colorAlpha={1}
-                enable={state.switchSocket}
-                setEnable={(enable: boolean) => {
-                  state.switchSocket = enable
+            {!!props.switchSocket1 && <>
+              {isPowerStrip ?
+                <SocketItem
+                  title={I18n.getLang('feature_summary_action_component_6')}
+                  name=""
+                  icon={{ uri: res.switch_1 }}
+                  onNameChange={() => { }}
+                  enabled={state.switchSocket1}
+                  disabledEdit={true}
+                  onSwitchChange={enable => {
+                    state.switchSocket1 = enable
+                  }}
+                >
+                  <ApplyForDeviceList
+                    devices={cloneDeep(groupDevices)}
+                  />
+                  <Spacer height={cx(16)} />
+                </SocketItem> :
+                <Card
+                  style={styles.cardContainer}
+                >
+                  <LdvSwitch
+                    title={I18n.getLang('feature_summary_action_component_5')}
+                    color={'#fff'}
+                    colorAlpha={1}
+                    enable={state.switchSocket1}
+                    setEnable={(enable: boolean) => {
+                      state.switchSocket1 = enable
+                    }}
+                  />
+                  <ApplyForDeviceList
+                    devices={cloneDeep(groupDevices)}
+                  />
+                  <Spacer height={cx(16)} />
+                </Card>
+              }
+              <Spacer />
+            </>}
+            {!!props.switchSocket2 && <>
+              <SocketItem
+                title={I18n.getLang('feature_summary_action_component_7')}
+                name=""
+                icon={{ uri: res.switch_2 }}
+                onNameChange={() => { }}
+                enabled={state.switchSocket2}
+                disabledEdit={true}
+                onSwitchChange={enable => {
+                  state.switchSocket2 = enable
                 }}
-              />
-              <ApplyForDeviceList
-                devices={cloneDeep(groupDevices)}
-              />
-              <Spacer height={cx(16)} />
-            </Card>}
+              >
+                <ApplyForDeviceList
+                  devices={cloneDeep(groupDevices)}
+                />
+                <Spacer height={cx(16)} />
+              </SocketItem>
+              <Spacer />
+            </>}
+            {!!props.switchSocket3 && <>
+              <SocketItem
+                title={I18n.getLang('feature_summary_action_component_8')}
+                name=""
+                icon={{ uri: res.switch_3 }}
+                onNameChange={() => { }}
+                enabled={state.switchSocket3}
+                disabledEdit={true}
+                onSwitchChange={enable => {
+                  state.switchSocket3 = enable
+                }}
+              >
+                <ApplyForDeviceList
+                  devices={cloneDeep(groupDevices)}
+                />
+                <Spacer height={cx(16)} />
+              </SocketItem>
+              <Spacer />
+            </>}
+            {!!props.switchSocketUSB && <>
+              <SocketItem
+                title={I18n.getLang('feature_summary_action_component_9')}
+                name=""
+                icon={{ uri: res.switch_4 }}
+                onNameChange={() => { }}
+                enabled={state.switchSocketUSB}
+                disabledEdit={true}
+                onSwitchChange={enable => {
+                  state.switchSocketUSB = enable
+                }}
+              >
+                <ApplyForDeviceList
+                  devices={cloneDeep(groupDevices)}
+                />
+                <Spacer height={cx(16)} />
+              </SocketItem>
+              <Spacer />
+            </>}
 
             {/* Fan */}
             {props.isSupportFan && <FanAdjustView
+              style={styles.cardContainer}
               fanEnable={state.switchFan}
-              fanSpeed={1}
-              onFanSpeedChangeComplete={() => { }}
+              fanSpeed={state.fanSpeed}
+              modeValue={state.fanMode}
+              modeOptions={fanModeOption}
+              modeChange={(v: any) => state.fanMode = v}
+              maxFanSpeed={props.isSupportUVC ? 20 : 3}
+              onFanSpeedChangeComplete={(v) => state.fanSpeed = v}
               onFanSwitch={(enable) => {
                 state.switchFan = enable
               }}
-              isSupportMode={true}
+              isSupportMode={props.isSupportUVC}
             />}
           </> :
           <FlatList
@@ -507,7 +693,7 @@ const TimeScheduleDetailPage = () => {
             </View>)}
             keyExtractor={item => `${item.id}`} />
         }
-        <Spacer height={cx(30)} />
+        <Spacer height={cx(20)} />
         <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>
@@ -543,7 +729,7 @@ const TimeScheduleDetailPage = () => {
             style={styles.summaryLeft}
           />
           <View style={styles.summaryRight}>
-            <Text style={styles.rightItem}>{state.timeSchedule.time}</Text>
+            <Text style={styles.rightItem}>{is24HourClock ? state.timeSchedule.time : convertTo12HourFormat(state.timeSchedule.time)}</Text>
           </View>
         </View>
         <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
@@ -554,10 +740,10 @@ const TimeScheduleDetailPage = () => {
             textStyle={styles.leftTitle}
             style={styles.summaryLeft}
           />
-          <View style={{ marginLeft: cx(16) }}>
+          <View style={{ marginLeft: cx(16), flex: 1 }}>
             {!!getActionOnOff.on.length && <View>
               <Text style={{ marginLeft: cx(5) }}>{I18n.getLang('feature_summary_action_txt_1')}</Text>
-              <View style={{ flexDirection: 'row' }}>{
+              <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>{
                 getActionOnOff.on.map(item => (
                   <View style={[styles.summaryRight, { marginLeft: cx(5), marginBottom: cx(5) }]}
                     key={item}>
@@ -569,7 +755,7 @@ const TimeScheduleDetailPage = () => {
             </View>}
             {!!getActionOnOff.off.length && <View>
               <Text style={{ marginLeft: cx(5) }}>{I18n.getLang('feature_summary_action_txt_2')}</Text>
-              <View style={{ flexDirection: 'row' }}>{
+              <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>{
                 getActionOnOff.off.map(item => (
                   <View style={[styles.summaryRight, { marginLeft: cx(5), marginBottom: cx(5) }]}
                     key={item}>

package/src/modules/time_schedule/TimeSchedulePage.tsx

@@ -42,14 +42,24 @@ export interface TimeSchedulePageParams {
   isSupportMood?: boolean
   isStringLight?: boolean
   isStripLight?: boolean
+  isMatterLight?: boolean
   isSupportFan?: boolean
   isSupportUVC?: boolean
   switchLedCode?: string
-  switchSocket?: string
+  switchSocket1?: string
+  switchSocket2?: string
+  switchSocket3?: string
+  switchSocketUSB?: string
   switchFan?: string
+  fanModeCode?: string
+  fanSpeedCode?: string
   workModeCode: string
   brightValueCode?: string
+  brightValueFormatter?: (bright: number) => number
+  brightValueParser?: (bright: number) => number
   tempValueCode?: string
+  tempValueFormatter?: (temp: number) => number
+  tempValueParser?: (temp: number) => number
   sceneDataCode?: string
   sceneDataDp2Obj?: (sceneDp: string) => SceneInfo
   sceneDataObj2Dp?: (scene: any) => string

package/src/modules/timer/TimerAction.ts

@@ -2,8 +2,7 @@ import { useFeatureHook } from '@ledvance/base/src/models/modules/NativePropsSli
 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'
+import { useEffect, useMemo } from 'react'
 
 export interface TimerTask {
   name: string
@@ -29,7 +28,8 @@ export interface TimerConfig {
   timerTasks: TimerTask[]
 }
 
-export function useTimerTasks(timerSettableDps: TimerSettableDp[]): [TimerTask[], (value: TimerTask[]) => Promise<Result<any>>] {
+export function useTimerTasks(timerSettableDps: TimerSettableDp[]):
+  [TimerTask[], (value: TimerTask[]) => Promise<Result<any>>, (tasks: TimerTask[]) => void] {
   const countdowns = timerSettableDps.map(dps => {
     const [countdown, setTargetDate] = useCountDown({ interval: 1000 })
     return {
@@ -40,18 +40,21 @@ export function useTimerTasks(timerSettableDps: TimerSettableDp[]): [TimerTask[]
       },
     }
   })
-  const [tasks, setTasks] = useFeatureHook<TimerConfig, TimerTask[]>(
+
+  const defTasks = useMemo(() => timerSettableDps.map(timerSettableDp => ({
+    name: timerSettableDp.label,
+    startTime: 0,
+    duration: 0,
+    timeLeft: 0,
+    dp: timerSettableDp.dp,
+    status: TaskStatus.NoSelected,
+    stringOn: timerSettableDp.stringOn,
+    stringOff: timerSettableDp.stringOff,
+  })), [JSON.stringify(timerSettableDps)])
+
+  const [remoteTasks, 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,
-    })),
+    defTasks,
     () => undefined,
     timerTasks => {
       const dps = {}
@@ -62,10 +65,15 @@ export function useTimerTasks(timerSettableDps: TimerSettableDp[]): [TimerTask[]
     },
   )
 
-  const state = useReactive({ tasks: cloneDeep(tasks) })
+  const tasks = defTasks.map(defTask => {
+    const findTask = remoteTasks.find(remoteTask => remoteTask.dp.code === defTask.dp.code)
+    return findTask ? { ...findTask } : defTask
+  })
+
+  const state = useReactive({ tasks: tasks })
 
   useEffect(() => {
-    state.tasks = cloneDeep(tasks)
+    state.tasks = tasks
       .map(task => {
         const taskEndTime = dayjs.unix(task.startTime)
           .add(task.duration, 'second')
@@ -99,17 +107,29 @@ export function useTimerTasks(timerSettableDps: TimerSettableDp[]): [TimerTask[]
       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 {
+          if (task.timeLeft > 0) {
             task.status = TaskStatus.Started
+          } else {
+            if (task.status === TaskStatus.Started) {
+              task.status = TaskStatus.NoSelected
+            }
           }
         }
       })
     })
   }, [JSON.stringify(countdowns.map(c => c.countdown.value))])
 
-  return [state.tasks, setTasks]
+  const changeTasks = (timerTasks: TimerTask[]) => {
+    timerTasks.forEach(newTask => {
+      state.tasks.forEach(task => {
+        if (task.dp.code === newTask.dp.code) {
+          task.status = newTask.status
+        }
+      })
+    })
+  }
+
+  return [state.tasks, setTasks, changeTasks]
 }
 
 export function getTaskLeftover(timerTask: TimerTask): number {

package/src/modules/timer/TimerPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect } from 'react'
 import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import I18n from '@ledvance/base/src/i18n'
 import Page from '@ledvance/base/src/components/Page'
@@ -23,7 +23,7 @@ const TimerPage = () => {
   const devInfo = useDeviceInfo()
 
   const params = useParams<TimerPageParams>()
-  const [timerTasks, setTimerTasks] = useTimerTasks(params.timerSettableDps)
+  const [timerTasks, setTimerTasks, changeTimerTasks] = useTimerTasks(params.timerSettableDps)
 
   const state = useReactive({
     hour: '00',
@@ -35,15 +35,13 @@ const TimerPage = () => {
   useEffect(() => {
     state.tasks = cloneDeep(timerTasks)
       .map(task => {
-        const newStatus = timerTasks.length === 1 && task.status !== TaskStatus.Started
+        const newStatus = params.timerSettableDps.length === 1 && task.status !== TaskStatus.Started
           ? TaskStatus.Selected : task.status
         return { ...task, status: newStatus }
       })
   }, [JSON.stringify(timerTasks)])
 
-  const tasksByStatus = useMemo(() => {
-    return groupBy(state.tasks, 'status')
-  }, [JSON.stringify(state.tasks)])
+  const tasksByStatus = groupBy(state.tasks, 'status')
 
   const noSelectedTasks = tasksByStatus[TaskStatus.NoSelected] || []
   const selectedTasks = tasksByStatus[TaskStatus.Selected] || []
@@ -87,6 +85,7 @@ const TimerPage = () => {
                         <TouchableOpacity
                           onPress={() => {
                             item.status = TaskStatus.NoSelected
+                            changeTimerTasks([cloneDeep(item)])
                           }}>
                           <Image style={styles.taskItemIcon} source={GroupBizRes.ic_arrows_nav_clear}/>
                         </TouchableOpacity>}
@@ -109,6 +108,7 @@ const TimerPage = () => {
                       style={styles.noSelectTaskItem}
                       onPress={() => {
                         item.status = TaskStatus.Selected
+                        changeTimerTasks([cloneDeep(item)])
                       }}>
                       <Spacer width={cx(8)}/>
                       <Text style={styles.noSelectTaskText}>{item.name}</Text>
@@ -120,6 +120,7 @@ const TimerPage = () => {
               <Spacer/>
               <DeleteButton
                 text={I18n.getLang('timer_sockets_button_text')}
+                disabled={selectedTasks.length === 0}
                 onPress={async () => {
                   state.loading = true
                   const tasks = selectedTasks.map(task => {
@@ -130,6 +131,7 @@ const TimerPage = () => {
                       status: TaskStatus.Started,
                     }
                   })
+                  tasks.push(...cloneDeep(startedTasks))
                   await setTimerTasks(cloneDeep(tasks))
                   state.loading = false
                 }}
@@ -137,7 +139,7 @@ const TimerPage = () => {
                 style={{ backgroundColor: !startEnable ? '#FFE0D4' : '#f60' }}/>
             </View>
           }
-          {startedTasks.length > 0 && state.tasks.length > 1 &&
+          {startedTasks.length > 0 && params.timerSettableDps.length > 1 &&
             <>
               <Spacer height={cx(30)}/>
               <View style={styles.content}>
@@ -148,8 +150,18 @@ const TimerPage = () => {
               <FlatList
                 data={startedTasks}
                 renderItem={({ item }) => {
-                  return ActiveTimerItem(item, () => {
-                    item.status = TaskStatus.NoSelected
+                  return ActiveTimerItem(item, async () => {
+                    state.loading = true
+                    const tasks = cloneDeep(startedTasks)
+                    tasks.forEach(task => {
+                      if (task.dp.code === item.dp.code) {
+                        task.status = TaskStatus.NoSelected
+                        task.startTime = 0
+                        task.duration = 0
+                      }
+                    })
+                    await setTimerTasks(tasks)
+                    state.loading = false
                   })
                 }}
                 keyExtractor={item => item.dp.key}
@@ -159,7 +171,7 @@ const TimerPage = () => {
             </>
           }
           {
-            startedTasks.length === 1 && state.tasks.length === 1 &&
+            startedTasks.length === 1 && params.timerSettableDps.length === 1 &&
             <View style={{ justifyContent: 'center', marginHorizontal: cx(24) }}>
               <Spacer height={cx(116)}/>
               <View
@@ -219,17 +231,17 @@ function ActiveTimerItem(task: TimerTask, onCancel: () => void) {
       <View style={styles.activeTaskHeadLine}>
         <Spacer width={cx(20)}/>
         <CircularProgress
-          progress={25}
+          progress={(task.timeLeft / task.duration) * 100}
           size={cx(24)}
           strokeWidth={cx(2)}/>
         <Spacer width={cx(16)}/>
-        <Text style={styles.activeTaskTimeText}>{'2h 12 min'}</Text>
+        <Text style={styles.activeTaskTimeText}>{I18n.formatValue(task.stringOn, timeFormat(task.timeLeft))}</Text>
         <Spacer width={cx(20)}/>
       </View>
       <Spacer/>
       <View style={{ marginHorizontal: cx(20) }}>
         <Text style={styles.activeTaskDesc}>{
-          I18n.getLang(task.stringOn)
+          I18n.formatValue(task.stringOn, timeFormat(task.timeLeft))
         }</Text>
       </View>
       <Spacer height={cx(22)}/>