@ledvance/ui-biz-bundle 1.1.56 → 1.1.58

package/src/newModules/randomTime/RandomTimeActions.ts

@@ -0,0 +1,232 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useDeviceId, useDp } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { getFeature, putFeature } from "@ledvance/base/src/api/native";
+import { Result } from "@ledvance/base/src/models/modules/Result";
+import { Utils } from "@tuya/tuya-panel-lamp-sdk"
+import { padStart } from "lodash";
+import { hex2Int, spliceByStep } from "@ledvance/base/src/utils/common";
+import I18n from "@ledvance/base/src/i18n";
+import { parseJSON } from "@tuya/tuya-panel-lamp-sdk/lib/utils";
+import { useUpdateEffect } from "ahooks";
+import { Buffer } from "buffer";
+const { to16 } = Utils
+
+const randomFeatureId = 'random_timing'
+const plug_randomFeatureId = 'random_time'
+export interface RandomTimerData {
+  version: number
+  length: number
+  nodes: RandomTimer[]
+}
+
+export interface RandomTimer {
+  enable: boolean;
+  weeks: number[];
+  startTime: number;
+  endTime: number;
+  color?: {
+    h: number;
+    s: number;
+    v: number;
+    brightness: number;
+    temperature: number;
+  }
+  isColorMode?: boolean;
+}
+
+export interface RandomTimerUiItem extends RandomTimer {
+  name: string
+  index?: number
+}
+
+export interface PlugRandomTimer {
+  power: boolean;
+  weeks: number[];
+  startTime: number;
+  endTime: number;
+}
+
+export interface PlugRandomTimerItem extends PlugRandomTimer {
+  index: number | string
+  name: string
+}
+
+let randomTimer
+type UseFixedTimeType = (dpKey: string, isPlug?: boolean) => [RandomTimerUiItem[], (randomTimeList: RandomTimerUiItem[], manualEdit?: boolean) => Promise<{ success: boolean }>]
+
+export const useRandomTime: UseFixedTimeType = (dpKey, isPlug) => {
+  const deviceId = useDeviceId()
+  const [randomTimeDp, setRandomTimeDp]: [string, (v: string) => Promise<Result<any>>] = useDp(dpKey)
+  const [randomTimeUiList, setRandomTimeUiList] = useState<RandomTimerUiItem[]>([])
+  const randomTimeList: RandomTimer[] = useMemo(() => randomTimeDp2Obj(randomTimeDp, isPlug)?.nodes || [], [randomTimeDp])
+  const formatterFn = useCallback(() => {
+    return randomTimeList.map((item, idx) => ({
+      ...item,
+      index: idx,
+      name: `${I18n.getLang('randomtimecycle_sockets_headline_text')} ${idx + 1}`
+    }))
+  }, [randomTimeList])
+
+  // 获取云端数据
+  useEffect(() => {
+    randomTimer = setTimeout(() => {
+      getFeatureFn()
+    }, 400)
+    return () => clearTimeout(randomTimer)
+  }, [])
+
+  useUpdateEffect(() =>{
+    randomTimer = setTimeout(() => {
+      getFeatureFn()
+    }, 100)
+    return () => clearTimeout(randomTimer)
+  }, [randomTimeDp])
+
+  const getFeatureFn = () => {
+    getFeature(deviceId, isPlug ? plug_randomFeatureId : randomFeatureId).then(res => {
+      if (res?.result) {
+        // 首次进入同步云端数据 （云端无数据）
+        if (!res.data) {
+          const cloudData = formatterFn()
+          setRandomTimeFn(cloudData).then()
+        } else {
+          const featureData = parseJSON(res.data)
+          if (randomTimeList.length) {
+            const uiPlan = randomTimeList?.map((item, idx: number) => {
+              const featureItem = featureData.find(feature =>  (isPlug ? parseJSON(feature?.v)?.dp : feature?.v) === randomTimeToHex(item, isPlug))
+              return {
+                ...item,
+                index: idx,
+                name: featureItem ? featureItem?.n : `${I18n.getLang('randomtimecycle_sockets_headline_text')} ${idx + 1}`
+              }
+            })
+            setRandomTimeUiList(uiPlan)
+          } else {
+            setRandomTimeUiList([])
+          }
+  
+        }
+      }
+    })
+  }
+
+  const setRandomTimeFn = async (randomTimeList: RandomTimerUiItem[]) => {
+    const randomData = randomTimeList.map(item => ({
+      n: item?.name || '',
+      v: isPlug ? JSON.stringify({dp: randomTimeToHex(item, isPlug)}) : randomTimeToHex(item, isPlug)
+    }))
+    const cloudStatus = await putFeatureFn(deviceId, isPlug ? plug_randomFeatureId : randomFeatureId, JSON.stringify(randomData))
+    if (cloudStatus) {
+      const randomTimerData = {
+        version: 0,
+        length: isPlug ? 6 : 12,
+        nodes: randomTimeList
+      }
+      let hex = randomTimeObj2Dp(randomTimerData, isPlug)
+      if(isPlug) hex = Buffer.from(hex, 'hex').toString('base64')
+      const res = await setRandomTimeDp(hex)
+      if (res.success) {
+        return {
+          success: true
+        }
+      }
+    }
+    return {
+      success: false
+    }
+  }
+
+  return [randomTimeUiList, setRandomTimeFn];
+}
+
+let retryNumber = 0
+
+const putFeatureFn = async (devId, featureId, data) => {
+  let status = false
+  await putFeature(devId, featureId, data).then(result => {
+    if (!result?.result && retryNumber < 3) {
+      retryNumber += 1
+      putFeatureFn(devId, featureId, data).then()
+    }
+    if (result?.result) {
+      retryNumber = 0
+      status = result.result
+    }
+  })
+  return status
+}
+
+const randomTimeDp2Obj = (randomDp: string, isPlug?: boolean) => {
+  if (randomDp?.length <= 4) return
+  if(isPlug){
+    randomDp = Buffer.from(randomDp, 'base64').toString('hex')
+  }
+  const version = hex2Int(randomDp.slice(0, 2))
+  const length = hex2Int(randomDp.slice(2, 4))
+  const s = isPlug ? 0 : 4
+  const n = isPlug ? 12 : 24
+  const nodes = spliceByStep(randomDp.slice(s), n).map(plan => {
+    const enable = plan.slice(0, 2) === '01'
+    const weeks = parseInt(plan.slice(2, 4), 16).toString(2).padStart(8, '0')
+      .split('')
+      .reverse()
+      .map(v => parseInt(v, 10))
+    const startTime = hex2Int(plan.slice(4, 8))
+    const endTime = hex2Int(plan.slice(8, 12))
+    const common = {
+      enable, weeks, startTime, endTime
+    }
+    if (isPlug) {
+      return common
+    }
+    const h = hex2Int(plan.slice(12, 16))
+    const s = hex2Int(plan.slice(16, 18))
+    const v = hex2Int(plan.slice(18, 20))
+    const brightness = hex2Int(plan.slice(20, 22))
+    const temperature = hex2Int(plan.slice(22, 24))
+    return {
+      ...common,
+      color: {
+        h, s, v,
+        brightness,
+        temperature
+      },
+      isColorMode: !!(h && s && v)
+    }
+  })
+  return {
+    version, length, nodes
+  }
+}
+
+const randomTimeObj2Dp = (randomTimerData: RandomTimerData, isPlug?: boolean) => {
+  const { version, nodes, length } = randomTimerData
+  const versionHex = isPlug ? '' : to16(version)
+  const numHex = isPlug ? '' : to16(length)
+  const nodeHex = nodes.map(node => {
+    return randomTimeToHex(node, isPlug)
+  }).join('')
+  return versionHex + numHex + nodeHex
+}
+
+
+const randomTimeToHex = (randomTime: RandomTimer, isPlug?: boolean) => {
+  const { weeks, startTime, endTime, enable } = randomTime
+  const enableStr = enable ? '01' : '00'
+  const weeksValue: string = padStart([...weeks].reverse().join(''), 8, '0');
+  const weeksStr = to16(parseInt(weeksValue, 2), 2);
+  const startTimeStr = to16(startTime, 4);
+  const endTimeStr = to16(endTime, 4);
+  let colorHex = ''
+  if (!isPlug && randomTime.color) {
+    const { h, s, v, brightness, temperature } = randomTime.color
+    const hueStr = to16(h, 4);
+    const saturationStr = to16(s);
+    const valueStr = to16(v);
+    const brightnessStr = to16(brightness);
+    const temperatureStr = to16(temperature);
+    colorHex = hueStr + saturationStr + valueStr + brightnessStr + temperatureStr
+  }
+  return enableStr + weeksStr + startTimeStr + endTimeStr + colorHex
+}
+

package/src/newModules/randomTime/RandomTimeDetailPage.tsx

@@ -0,0 +1,322 @@
+import React, { useEffect, useMemo } from "react";
+import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";
+import { useReactive } from "ahooks";
+import Page from "@ledvance/base/src/components/Page";
+import { useNavigation, useRoute } from '@react-navigation/core'
+import I18n from "@ledvance/base/src/i18n";
+import res from "@ledvance/base/src/res";
+import TextField from "@ledvance/base/src/components/TextField";
+import LdvWeekView from '@ledvance/base/src/components/weekSelect'
+import { TimerPicker, Utils } from "tuya-panel-kit";
+import DeleteButton from "@ledvance/base/src/components/DeleteButton";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import { convertMinutesTo12HourFormat, loopText, showDialog } from "@ledvance/base/src/utils/common";
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
+import Card from "@ledvance/base/src/components/Card";
+import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
+import { RandomTimerUiItem } from "./RandomTimeActions";
+import { cloneDeep, isEqual } from "lodash";
+import Summary from "./Summary";
+import { RandomTimePageParams } from "./RandomTimePage";
+import { Result } from "@ledvance/base/src/models/modules/Result";
+import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
+
+const { convertX: cx } = Utils.RatioUtils;
+
+export interface RandomTimeDetailPageParams extends RandomTimePageParams {
+  mode: 'add' | 'edit'
+  scheduleItem: RandomTimerUiItem
+  onPost: (mode: 'add' | 'edit' | 'del', randomTime: RandomTimerUiItem) => Promise<Result<any>>
+}
+const minTimeGap = 30
+const RandomTimeDetailPage = () => {
+  const navigation = useNavigation()
+  const params = useRoute().params as RandomTimeDetailPageParams
+  const is24Hour = useSystemTimeFormate()
+  const state = useReactive({
+    loading: false,
+    isColorMode: false,
+    selectedSkill: params.applyDps.length === 1 ? params.applyDps : [],
+    skillList: params.applyDps.length === 1 ? [] : params.applyDps,
+    randomTime: cloneDeep(params.scheduleItem)
+  })
+
+  useEffect(() => {
+    if (!params.isPlug && state.randomTime.color) {
+      const { brightness, temperature, h, s, v } = state.randomTime.color
+      const isColor = brightness === 0 && temperature === 0 && (h !== 0 || s !== 0 || v !== 0)
+      state.isColorMode = isColor
+    }
+  }, [])
+
+  const showClearIcon = useMemo(() => (
+    false
+  ), [state.skillList])
+
+  const canSubmit = useMemo(() => {
+    return state.randomTime.name?.length > 0 && state.randomTime.name?.length < 33 && !isEqual(params.scheduleItem, state.randomTime)
+  }, [JSON.stringify(state.randomTime)])
+
+  return (
+    <Page
+      backText={I18n.getLang('randomtimecycle_sockets_headline_text')}
+      rightButtonIcon={canSubmit ? res.ic_check : res.ic_uncheck}
+      loading={state.loading}
+      showBackDialog={canSubmit}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang('cancel_dialog_delete_item_randomtimecycle_description')}
+      headlineText={I18n.getLang(params.mode === 'add' ? 'add_fixedtimecycle_headline_text' : 'edit_fixedtimecycle_headline_text')}
+      rightButtonIconClick={async () => {
+        if (!canSubmit || state.loading) return
+        const { startTime, endTime} = state.randomTime
+        if(startTime < endTime && (endTime - startTime) < minTimeGap){
+          return showDialog({
+            method: 'alert',
+            title: I18n.getLang('conflict_dialog_save_item_randomtimecycle_tips'),
+            subTitle: I18n.getLang('conflict_dialog_save_item_randomtimecycle_interval_description'),
+            confirmText: I18n.getLang('conflict_dialog_save_item_randomtimecycle_answer_confirm_text'),
+            onConfirm: (_, { close}) =>{
+              close()
+            }
+          })
+        }
+        state.loading = true
+        const editRandomTime = {
+          ...state.randomTime,
+          enable: true
+        }
+        if (!params.isPlug && state.randomTime.color) {
+          editRandomTime.color = {
+            h: state.isColorMode ? state.randomTime.color?.h : 0,
+            s: state.isColorMode ? state.randomTime.color?.s : 0,
+            v: state.isColorMode ? state.randomTime.color?.v : 0,
+            temperature: state.isColorMode ? 0 : state.randomTime.color?.temperature,
+            brightness: state.isColorMode ? 0 : state.randomTime.color?.brightness
+          }
+        }
+        const res = await params.onPost(params.mode, editRandomTime)
+        state.loading = false
+        if (res.success) {
+          navigation.goBack()
+        }
+      }}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <TextField
+          style={styles.cardContainer}
+          value={state.randomTime.name}
+          showError={state.randomTime.name?.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.randomTime.name = t;
+          }}
+        />
+        {/* pick */}
+        <TimerPicker
+          itemTextColor='#aeadb5'
+          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+          is12Hours={!is24Hour}
+          startTime={state.randomTime.startTime}
+          endTime={state.randomTime.endTime}
+          onTimerChange={(startTime, endTime) => {
+            state.randomTime.startTime = startTime
+            state.randomTime.endTime = endTime
+          }} />
+        <LdvWeekView
+          value={state.randomTime.weeks}
+          style={styles.cardContainer}
+          onSelect={(index: number) => {
+            const rawIndex = index - 1
+            state.randomTime.weeks[rawIndex] = state.randomTime.weeks[rawIndex] === 1 ? 0 : 1
+          }} />
+        <Spacer />
+        <Text style={styles.cardContainer}>{loopText(state.randomTime.weeks)}</Text>
+        <Spacer />
+        {/* 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}>
+            {state.selectedSkill.length === 0 ?
+              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+              state.selectedSkill.map((skill: any) => (
+                <View style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]} key={skill.label}>
+                  <Text style={{ color: '#000' }}>{skill.label}</Text>
+                  {showClearIcon && <TouchableOpacity
+                    onPress={() => { }}
+                    style={{ paddingHorizontal: cx(5) }}>
+                    <Image style={{ width: cx(16), height: cx(16) }} source={res.ic_arrows_nav_clear} />
+                  </TouchableOpacity>}
+                </View>
+              ))
+            }
+          </View>
+          {state.skillList.map((item: any) => {
+            return (
+              <TouchableOpacity style={styles.applyItem} key={item.label} onPress={() => { }}>
+                <Text style={{ color: '#000' }}>{item.label}</Text>
+                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
+              </TouchableOpacity>
+            )
+          })}
+        </View>
+        <Spacer />
+        {/* Devices */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
+          <Spacer height={cx(10)} />
+          {state.randomTime.color && !params.isPlug && <Card>
+            <LdvSwitch
+              title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+              color={'#fff'}
+              colorAlpha={1}
+              enable={true}
+              setEnable={() => { }}
+              showSwitch={false}
+            />
+            <LampAdjustView
+              isSupportColor={params.isSupportColor}
+              isSupportBrightness={params.isSupportBrightness}
+              isSupportTemperature={params.isSupportTemperature}
+              isColorMode={state.isColorMode}
+              reserveSV={true}
+              setIsColorMode={(v) => state.isColorMode = v}
+              h={state.randomTime.color.h}
+              s={state.randomTime.color.s}
+              v={state.randomTime.color.v}
+              colorTemp={state.randomTime.color.temperature}
+              brightness={state.randomTime.color.brightness}
+              onHSVChangeComplete={(h, s, v) => {
+                state.randomTime.color = {
+                  ...state.randomTime.color,
+                  h,
+                  s,
+                  v
+                }
+              }}
+              onCCTChangeComplete={(v) => {
+                state.randomTime.color = {
+                  ...state.randomTime.color,
+                  temperature: v
+                }
+              }}
+              onBrightnessChangeComplete={(v) => {
+                state.randomTime.color = {
+                  ...state.randomTime.color,
+                  brightness: v
+                }
+              }}
+            />
+          </Card>}
+          <Spacer />
+        </View>
+        {/* summary */}
+        <Summary
+          frequency={loopText(state.randomTime.weeks)}
+          time={`${convertMinutesTo12HourFormat(state.randomTime.startTime, is24Hour)} - ${convertMinutesTo12HourFormat(state.randomTime.endTime, is24Hour)}`}
+          hideActions={true}
+        />
+        <Spacer />
+        {params.mode === 'edit' &&
+          <View style={{ marginHorizontal: cx(24) }}>
+            <DeleteButton
+              text={I18n.getLang('edit_fixedtimecycle_bttn_text')}
+              onPress={() => {
+                showDialog({
+                  method: 'confirm',
+                  title: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_titel'),
+                  subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
+                  onConfirm: async (_, { close }) => {
+                    state.loading = true
+                    close()
+                    const res = await params.onPost('del', state.randomTime)
+                    state.loading = false
+                    if (res.success) {
+                      navigation.goBack()
+                    }
+                  }
+                })
+              }} />
+          </View>
+        }
+        <Spacer />
+      </ScrollView>
+    </Page>
+  )
+}
+
+
+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),
+  },
+  summaryContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    marginBottom: cx(10)
+  },
+  summaryLeft: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  summaryImg: {
+    width: cx(12),
+    height: cx(12),
+    marginRight: cx(6)
+  },
+  leftTitle: {
+    fontSize: cx(14),
+    color: '#000'
+  },
+  summaryRight: {
+    flexDirection: 'column',
+    marginLeft: cx(21),
+    borderRadius: cx(16),
+    backgroundColor: '#cbcbcb',
+  },
+  rightItem: {
+    paddingHorizontal: cx(12),
+    color: '#000',
+  },
+  rightTitle: {
+    paddingLeft: cx(12),
+    paddingRight: cx(12),
+    fontSize: cx(10),
+    textAlign: 'center',
+    alignSelf: 'flex-start'
+  },
+  filletCorner: {
+    flexDirection: 'row',
+    backgroundColor: '#cbcbcb',
+    borderRadius: cx(16),
+    alignSelf: 'flex-start'
+  }
+})
+
+export default RandomTimeDetailPage