@ledvance/ui-biz-bundle 1.1.69 → 1.1.70

package/src/newModules/fixedTime/FixedTimeDetailPage.tsx

@@ -1,346 +1,346 @@
-import React, { useEffect, useMemo } from "react";
-import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";
-import { useReactive, useUpdateEffect } from "ahooks";
-import Page from "@ledvance/base/src/components/Page";
-import { useNavigation } 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 LdvPickerView from "@ledvance/base/src/components/ldvPickerView";
-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 { FixedTimerUiItem } from "./FixedTimeActions";
-import { cloneDeep, isEqual } from "lodash";
-import Summary from "../randomTime/Summary";
-import { FixedTimePageParams } from "./FixedTimePage";
-import { Result } from "@ledvance/base/src/models/modules/Result";
-import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
-import { useParams } from "@ledvance/base/src/hooks/Hooks";
-
-const { convertX: cx } = Utils.RatioUtils;
-const { toFixedString } = Utils.NumberUtils;
-
-export interface FixedTimeDetailPageParams extends FixedTimePageParams {
-  mode: 'add' | 'edit'
-  scheduleItem: FixedTimerUiItem
-  onPost: (mode: 'add' | 'edit' | 'del', fixedTime: FixedTimerUiItem) => Promise<Result<any>>
-}
-
-const FixedTimeDetailPage = () => {
-  const navigation = useNavigation()
-  const params = useParams<FixedTimeDetailPageParams>()
-  const is24Hour = useSystemTimeFormate()
-  const state = useReactive({
-    loading: false,
-    isColorMode: false,
-    fixedTime: cloneDeep(params.scheduleItem)
-  })
-
-  useEffect(() => {
-    if (!params.isPlug && state.fixedTime.color) {
-      const { brightness, temperature, h, s, v } = state.fixedTime.color
-      const isColor = brightness === 0 && temperature === 0 && (h !== 0 || s !== 0 || v !== 0)
-      state.isColorMode = isColor
-    }
-  }, [])
-
-  useUpdateEffect(() => {
-    if (state.fixedTime.openTime === 0) state.fixedTime.openTime = 1
-    if (state.fixedTime.closeTime === 0) state.fixedTime.closeTime = 1
-  }, [state.fixedTime.openTime, state.fixedTime.closeTime])
-
-  const inRangeTime = useMemo(() => {
-    const { startTime, endTime, closeTime, openTime } = state.fixedTime
-    const poweredTime = openTime + closeTime
-    if (startTime < endTime) {
-      return (endTime - startTime) >= poweredTime
-    } else {
-      return (1440 - endTime - startTime) >= poweredTime
-    }
-  }, [JSON.stringify(state.fixedTime)])
-
-  const checkItemChanged = useMemo(() =>{
-    return isEqual(state.fixedTime, params.scheduleItem)
-  }, [params.scheduleItem, JSON.stringify(state.fixedTime)])
-
-  const canSubmit = useMemo(() => {
-    return state.fixedTime.name?.length > 0 && state.fixedTime.name?.length < 33 && !checkItemChanged && inRangeTime && state.fixedTime.channel !== undefined
-  }, [JSON.stringify(state.fixedTime), checkItemChanged, inRangeTime])
-
-  return (
-    <Page
-      backText={I18n.getLang('fixedTimeCycle_socket_headline')}
-      rightButtonIcon={canSubmit ? res.ic_check : res.ic_uncheck}
-      loading={state.loading}
-      showBackDialog={!checkItemChanged}
-      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
-      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_fixedtimecycle_note')}
-      headlineText={I18n.getLang(params.mode === 'add' ? 'add_fixedtimecycle_headline_text' : 'edit_fixedtimecycle_headline_text')}
-      rightButtonIconClick={async () => {
-        if (!canSubmit || state.loading) return
-        state.loading = true
-        const editFixedTime = {
-          ...state.fixedTime,
-          enable: true
-        }
-        if (!params.isPlug && state.fixedTime.color) {
-          editFixedTime.color = {
-            h: state.isColorMode ? state.fixedTime.color?.h : 0,
-            s: state.isColorMode ? state.fixedTime.color?.s : 0,
-            v: state.isColorMode ? state.fixedTime.color?.v : 0,
-            temperature: state.isColorMode ? 0 : state.fixedTime.color?.temperature,
-            brightness: state.isColorMode ? 0 : state.fixedTime.color?.brightness
-          }
-        }
-        const res = await params.onPost(params.mode, editFixedTime)
-        state.loading = false
-        if (res.success) {
-          navigation.goBack()
-        }
-      }}
-    >
-      <ScrollView nestedScrollEnabled={true}>
-        <TextField
-          style={styles.cardContainer}
-          value={state.fixedTime.name}
-          showError={state.fixedTime.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.fixedTime.name = t;
-          }}
-        />
-        {/* pick */}
-        <TimerPicker
-          itemTextColor='#aeadb5'
-          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
-          is12Hours={!is24Hour}
-          startTime={state.fixedTime.startTime}
-          endTime={state.fixedTime.endTime}
-          onTimerChange={(startTime, endTime) => {
-            state.fixedTime.startTime = startTime
-            state.fixedTime.endTime = endTime
-          }} />
-        <LdvWeekView
-          value={state.fixedTime.weeks}
-          style={styles.cardContainer}
-          onSelect={(index: number) => {
-            const rawIndex = index - 1
-            state.fixedTime.weeks[rawIndex] = state.fixedTime.weeks[rawIndex] === 1 ? 0 : 1
-          }} />
-        <Spacer />
-        <Text style={styles.cardContainer}>{loopText(state.fixedTime.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, { paddingTop: state.fixedTime.channel === undefined ? 0 : cx(10) }]}>
-            {state.fixedTime.channel === undefined ?
-              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
-              <View style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}>
-                <Text style={{ color: '#000' }}>{params.applyForList[state.fixedTime.channel]?.key}</Text>
-                {params.applyForList.length > 1 && <TouchableOpacity
-                  onPress={() => {
-                    state.fixedTime.channel = undefined
-                  }}
-                  style={{ paddingHorizontal: cx(5) }}>
-                  <Image style={{ width: cx(16), height: cx(16) }} source={res.ic_arrows_nav_clear} />
-                </TouchableOpacity>}
-              </View>
-            }
-          </View>
-          {params.applyForList.map((item, index) => {
-            if (state.fixedTime.channel === index) return null
-            return (
-              <TouchableOpacity
-                style={styles.applyItem}
-                key={item.key}
-                onPress={() => {
-                  state.fixedTime.channel = index
-                }}>
-                <Text style={{ color: '#000' }}>{item.key}</Text>
-                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
-              </TouchableOpacity>
-            )
-          })}
-        </View>
-        <Spacer />
-        {/* Devices */}
-        {state.fixedTime.color && !params.isPlug && <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
-          <Spacer height={cx(10)} />
-          <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.fixedTime.color.h}
-              s={state.fixedTime.color.s}
-              v={state.fixedTime.color.v}
-              colorTemp={state.fixedTime.color.temperature}
-              brightness={state.fixedTime.color.brightness}
-              onHSVChangeComplete={(h, s, v) => {
-                state.fixedTime.color = {
-                  ...state.fixedTime.color,
-                  h,
-                  s,
-                  v
-                }
-              }}
-              onCCTChangeComplete={(v) => {
-                state.fixedTime.color = {
-                  ...state.fixedTime.color,
-                  temperature: v
-                }
-              }}
-              onBrightnessChangeComplete={(v) => {
-                state.fixedTime.color = {
-                  ...state.fixedTime.color,
-                  brightness: v
-                }
-              }}
-            />
-          </Card>
-          <Spacer />
-        </View>}
-        {/* Settings */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
-          <Spacer height={cx(10)} />
-          {!inRangeTime && <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-            <Image style={{ width: cx(16), height: cx(16), tintColor: 'rgb(255,149,0)' }} source={res.ic_warning_amber} />
-            <Text style={{ fontSize: cx(12), color: 'rgb(255,149,0)' }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
-          </View>}
-          <View >
-            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
-            <LdvPickerView
-              hour={toFixedString(Math.trunc(state.fixedTime.openTime / 60), 2)}
-              minute={toFixedString(state.fixedTime.openTime % 60, 2)}
-              setHour={(h) => {
-                state.fixedTime.openTime = Number(h) * 60 + state.fixedTime.openTime % 60
-              }}
-              setMinute={(m) => {
-                state.fixedTime.openTime = Math.trunc(state.fixedTime.openTime / 60) * 60 + Number(m)
-              }}
-              unit={['h', 'min']}
-            />
-          </View>
-          <View>
-            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text2')}</Text>
-            <LdvPickerView
-              hour={toFixedString(Math.trunc(state.fixedTime.closeTime / 60), 2)}
-              minute={toFixedString(state.fixedTime.closeTime % 60, 2)}
-              setHour={(h) => {
-                state.fixedTime.closeTime = Number(h) * 60 + state.fixedTime.closeTime % 60
-              }}
-              setMinute={(m) => {
-                state.fixedTime.closeTime = Math.trunc(state.fixedTime.closeTime / 60) * 60 + Number(m)
-              }}
-              unit={['h', 'min']}
-            />
-          </View>
-          <Spacer />
-        </View>
-        {/* summary */}
-        <Summary
-          frequency={loopText(state.fixedTime.weeks)}
-          time={`${convertMinutesTo12HourFormat(state.fixedTime.startTime, is24Hour)} - ${convertMinutesTo12HourFormat(state.fixedTime.endTime, is24Hour)}`}
-          actions={(
-            <View style={{ flexDirection: 'column' }}>
-              <Text style={{ color: '#000' }}>{I18n.formatValue('feature_summary_action_txt_4', `${Math.trunc(state.fixedTime.openTime / 60)}`, `${state.fixedTime.openTime % 60}`)}</Text>
-              <View style={styles.summaryTag}>
-                <Text style={{ color: '#000' }}>{I18n.getLang('timeschedule_add_schedule_nightlight_plug_selectionfield_text2')}</Text>
-              </View>
-              <Spacer height={cx(5)} />
-              <Text style={{ color: '#000' }}>{I18n.formatValue('feature_summary_action_txt_6', `${Math.trunc(state.fixedTime.closeTime / 60)}`, `${state.fixedTime.closeTime % 60}`)}</Text>
-              <View style={styles.summaryTag}>
-                <Text style={{ color: '#000' }}>{I18n.getLang('timeschedule_add_schedule_nightlight_plug_selectionfield_text2')}</Text>
-              </View>
-            </View>
-          )}
-        />
-        <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 }) => {
-                    close()
-                    state.loading = true
-                    const res = await params.onPost('del', state.fixedTime)
-                    state.loading = false
-                    if (res.success) {
-                      navigation.goBack()
-                    }
-                  }
-                })
-              }} />
-            <Spacer />
-          </View>
-        }
-      </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),
-  },
-  summaryTag: {
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-    paddingHorizontal: cx(12),
-    alignSelf: 'flex-start'
-  }
-})
-
+import React, { useEffect, useMemo } from "react";
+import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";
+import { useReactive, useUpdateEffect } from "ahooks";
+import Page from "@ledvance/base/src/components/Page";
+import { useNavigation } 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 LdvPickerView from "@ledvance/base/src/components/ldvPickerView";
+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 { FixedTimerUiItem } from "./FixedTimeActions";
+import { cloneDeep, isEqual } from "lodash";
+import Summary from "../randomTime/Summary";
+import { FixedTimePageParams } from "./FixedTimePage";
+import { Result } from "@ledvance/base/src/models/modules/Result";
+import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { useParams } from "@ledvance/base/src/hooks/Hooks";
+
+const { convertX: cx } = Utils.RatioUtils;
+const { toFixedString } = Utils.NumberUtils;
+
+export interface FixedTimeDetailPageParams extends FixedTimePageParams {
+  mode: 'add' | 'edit'
+  scheduleItem: FixedTimerUiItem
+  onPost: (mode: 'add' | 'edit' | 'del', fixedTime: FixedTimerUiItem) => Promise<Result<any>>
+}
+
+const FixedTimeDetailPage = () => {
+  const navigation = useNavigation()
+  const params = useParams<FixedTimeDetailPageParams>()
+  const is24Hour = useSystemTimeFormate()
+  const state = useReactive({
+    loading: false,
+    isColorMode: false,
+    fixedTime: cloneDeep(params.scheduleItem)
+  })
+
+  useEffect(() => {
+    if (!params.isPlug && state.fixedTime.color) {
+      const { brightness, temperature, h, s, v } = state.fixedTime.color
+      const isColor = brightness === 0 && temperature === 0 && (h !== 0 || s !== 0 || v !== 0)
+      state.isColorMode = isColor
+    }
+  }, [])
+
+  useUpdateEffect(() => {
+    if (state.fixedTime.openTime === 0) state.fixedTime.openTime = 1
+    if (state.fixedTime.closeTime === 0) state.fixedTime.closeTime = 1
+  }, [state.fixedTime.openTime, state.fixedTime.closeTime])
+
+  const inRangeTime = useMemo(() => {
+    const { startTime, endTime, closeTime, openTime } = state.fixedTime
+    const poweredTime = openTime + closeTime
+    if (startTime < endTime) {
+      return (endTime - startTime) >= poweredTime
+    } else {
+      return (1440 - endTime - startTime) >= poweredTime
+    }
+  }, [JSON.stringify(state.fixedTime)])
+
+  const checkItemChanged = useMemo(() =>{
+    return isEqual(state.fixedTime, params.scheduleItem)
+  }, [params.scheduleItem, JSON.stringify(state.fixedTime)])
+
+  const canSubmit = useMemo(() => {
+    return state.fixedTime.name?.length > 0 && state.fixedTime.name?.length < 33 && !checkItemChanged && inRangeTime && state.fixedTime.channel !== undefined
+  }, [JSON.stringify(state.fixedTime), checkItemChanged, inRangeTime])
+
+  return (
+    <Page
+      backText={I18n.getLang('fixedTimeCycle_socket_headline')}
+      rightButtonIcon={canSubmit ? res.ic_check : res.ic_uncheck}
+      loading={state.loading}
+      showBackDialog={!checkItemChanged}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_fixedtimecycle_note')}
+      headlineText={I18n.getLang(params.mode === 'add' ? 'add_fixedtimecycle_headline_text' : 'edit_fixedtimecycle_headline_text')}
+      rightButtonIconClick={async () => {
+        if (!canSubmit || state.loading) return
+        state.loading = true
+        const editFixedTime = {
+          ...state.fixedTime,
+          enable: true
+        }
+        if (!params.isPlug && state.fixedTime.color) {
+          editFixedTime.color = {
+            h: state.isColorMode ? state.fixedTime.color?.h : 0,
+            s: state.isColorMode ? state.fixedTime.color?.s : 0,
+            v: state.isColorMode ? state.fixedTime.color?.v : 0,
+            temperature: state.isColorMode ? 0 : state.fixedTime.color?.temperature,
+            brightness: state.isColorMode ? 0 : state.fixedTime.color?.brightness
+          }
+        }
+        const res = await params.onPost(params.mode, editFixedTime)
+        state.loading = false
+        if (res.success) {
+          navigation.goBack()
+        }
+      }}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <TextField
+          style={styles.cardContainer}
+          value={state.fixedTime.name}
+          showError={state.fixedTime.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.fixedTime.name = t;
+          }}
+        />
+        {/* pick */}
+        <TimerPicker
+          itemTextColor='#aeadb5'
+          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+          is12Hours={!is24Hour}
+          startTime={state.fixedTime.startTime}
+          endTime={state.fixedTime.endTime}
+          onTimerChange={(startTime, endTime) => {
+            state.fixedTime.startTime = startTime
+            state.fixedTime.endTime = endTime
+          }} />
+        <LdvWeekView
+          value={state.fixedTime.weeks}
+          style={styles.cardContainer}
+          onSelect={(index: number) => {
+            const rawIndex = index - 1
+            state.fixedTime.weeks[rawIndex] = state.fixedTime.weeks[rawIndex] === 1 ? 0 : 1
+          }} />
+        <Spacer />
+        <Text style={styles.cardContainer}>{loopText(state.fixedTime.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, { paddingTop: state.fixedTime.channel === undefined ? 0 : cx(10) }]}>
+            {state.fixedTime.channel === undefined ?
+              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+              <View style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}>
+                <Text style={{ color: '#000' }}>{params.applyForList[state.fixedTime.channel]?.key}</Text>
+                {params.applyForList.length > 1 && <TouchableOpacity
+                  onPress={() => {
+                    state.fixedTime.channel = undefined
+                  }}
+                  style={{ paddingHorizontal: cx(5) }}>
+                  <Image style={{ width: cx(16), height: cx(16) }} source={res.ic_arrows_nav_clear} />
+                </TouchableOpacity>}
+              </View>
+            }
+          </View>
+          {params.applyForList.map((item, index) => {
+            if (state.fixedTime.channel === index) return null
+            return (
+              <TouchableOpacity
+                style={styles.applyItem}
+                key={item.key}
+                onPress={() => {
+                  state.fixedTime.channel = index
+                }}>
+                <Text style={{ color: '#000' }}>{item.key}</Text>
+                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
+              </TouchableOpacity>
+            )
+          })}
+        </View>
+        <Spacer />
+        {/* Devices */}
+        {state.fixedTime.color && !params.isPlug && <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
+          <Spacer height={cx(10)} />
+          <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.fixedTime.color.h}
+              s={state.fixedTime.color.s}
+              v={state.fixedTime.color.v}
+              colorTemp={state.fixedTime.color.temperature}
+              brightness={state.fixedTime.color.brightness}
+              onHSVChangeComplete={(h, s, v) => {
+                state.fixedTime.color = {
+                  ...state.fixedTime.color,
+                  h,
+                  s,
+                  v
+                }
+              }}
+              onCCTChangeComplete={(v) => {
+                state.fixedTime.color = {
+                  ...state.fixedTime.color,
+                  temperature: v
+                }
+              }}
+              onBrightnessChangeComplete={(v) => {
+                state.fixedTime.color = {
+                  ...state.fixedTime.color,
+                  brightness: v
+                }
+              }}
+            />
+          </Card>
+          <Spacer />
+        </View>}
+        {/* Settings */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
+          <Spacer height={cx(10)} />
+          {!inRangeTime && <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <Image style={{ width: cx(16), height: cx(16), tintColor: 'rgb(255,149,0)' }} source={res.ic_warning_amber} />
+            <Text style={{ fontSize: cx(12), color: 'rgb(255,149,0)' }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
+          </View>}
+          <View >
+            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
+            <LdvPickerView
+              hour={toFixedString(Math.trunc(state.fixedTime.openTime / 60), 2)}
+              minute={toFixedString(state.fixedTime.openTime % 60, 2)}
+              setHour={(h) => {
+                state.fixedTime.openTime = Number(h) * 60 + state.fixedTime.openTime % 60
+              }}
+              setMinute={(m) => {
+                state.fixedTime.openTime = Math.trunc(state.fixedTime.openTime / 60) * 60 + Number(m)
+              }}
+              unit={['h', 'min']}
+            />
+          </View>
+          <View>
+            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text2')}</Text>
+            <LdvPickerView
+              hour={toFixedString(Math.trunc(state.fixedTime.closeTime / 60), 2)}
+              minute={toFixedString(state.fixedTime.closeTime % 60, 2)}
+              setHour={(h) => {
+                state.fixedTime.closeTime = Number(h) * 60 + state.fixedTime.closeTime % 60
+              }}
+              setMinute={(m) => {
+                state.fixedTime.closeTime = Math.trunc(state.fixedTime.closeTime / 60) * 60 + Number(m)
+              }}
+              unit={['h', 'min']}
+            />
+          </View>
+          <Spacer />
+        </View>
+        {/* summary */}
+        <Summary
+          frequency={loopText(state.fixedTime.weeks)}
+          time={`${convertMinutesTo12HourFormat(state.fixedTime.startTime, is24Hour)} - ${convertMinutesTo12HourFormat(state.fixedTime.endTime, is24Hour)}`}
+          actions={(
+            <View style={{ flexDirection: 'column' }}>
+              <Text style={{ color: '#000' }}>{I18n.formatValue('feature_summary_action_txt_4', `${Math.trunc(state.fixedTime.openTime / 60)}`, `${state.fixedTime.openTime % 60}`)}</Text>
+              <View style={styles.summaryTag}>
+                <Text style={{ color: '#000' }}>{I18n.getLang('timeschedule_add_schedule_nightlight_plug_selectionfield_text2')}</Text>
+              </View>
+              <Spacer height={cx(5)} />
+              <Text style={{ color: '#000' }}>{I18n.formatValue('feature_summary_action_txt_6', `${Math.trunc(state.fixedTime.closeTime / 60)}`, `${state.fixedTime.closeTime % 60}`)}</Text>
+              <View style={styles.summaryTag}>
+                <Text style={{ color: '#000' }}>{I18n.getLang('timeschedule_add_schedule_nightlight_plug_selectionfield_text2')}</Text>
+              </View>
+            </View>
+          )}
+        />
+        <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 }) => {
+                    close()
+                    state.loading = true
+                    const res = await params.onPost('del', state.fixedTime)
+                    state.loading = false
+                    if (res.success) {
+                      navigation.goBack()
+                    }
+                  }
+                })
+              }} />
+            <Spacer />
+          </View>
+        }
+      </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),
+  },
+  summaryTag: {
+    backgroundColor: '#cbcbcb',
+    borderRadius: cx(16),
+    paddingHorizontal: cx(12),
+    alignSelf: 'flex-start'
+  }
+})
+
 export default FixedTimeDetailPage