@ledvance/group-ui-biz-bundle 1.0.0

package/src/modules/timer/TimerPage.tsx

@@ -0,0 +1,351 @@
+import React, { useEffect, useMemo } 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'
+import { Utils } from 'tuya-panel-kit'
+import { useDeviceInfo } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import LdvPickerView from '@ledvance/base/src/components/ldvPickerView'
+import { useReactive } from 'ahooks'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import DeleteButton from '@ledvance/base/src/components/DeleteButton'
+import { TaskStatus, timeFormat, TimerPageParams, TimerTask, useTimerTasks } from './TimerAction'
+import { cloneDeep, groupBy } from 'lodash'
+import { useParams } from '@ledvance/base/src/hooks/Hooks'
+import GroupBizRes from '../../res/GroupBizRes'
+import dayjs from 'dayjs'
+import Card from '@ledvance/base/src/components/Card'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { CircularProgress } from '@ledvance/base/src/components/CircularProgress'
+
+const { convertX: cx } = Utils.RatioUtils
+
+const TimerPage = () => {
+  const devInfo = useDeviceInfo()
+
+  const params = useParams<TimerPageParams>()
+  const [timerTasks, setTimerTasks] = useTimerTasks(params.timerSettableDps)
+
+  const state = useReactive({
+    hour: '00',
+    min: '01',
+    tasks: cloneDeep(timerTasks),
+    loading: false,
+  })
+
+  useEffect(() => {
+    state.tasks = cloneDeep(timerTasks)
+      .map(task => {
+        const newStatus = timerTasks.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 noSelectedTasks = tasksByStatus[TaskStatus.NoSelected] || []
+  const selectedTasks = tasksByStatus[TaskStatus.Selected] || []
+  const startedTasks = tasksByStatus[TaskStatus.Started] || []
+  const startEnable = selectedTasks.length > 0
+
+  return (
+    <Page
+      backText={devInfo.name}
+      headlineText={I18n.getLang('timer_nightplug_headline_text')}
+      loading={state.loading}>
+      <ScrollView
+        style={styles.root}
+        nestedScrollEnabled={true}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}>
+        <View>
+          {startedTasks.length !== state.tasks.length &&
+            <View style={styles.content}>
+              <LdvPickerView
+                hour={state.hour}
+                minute={state.min}
+                unit={['h', 'min']}
+                setHour={hour => {
+                  state.hour = hour
+                }}
+                setMinute={min => {
+                  state.min = min
+                }}/>
+              <Spacer height={cx(30)}/>
+              <Text style={styles.applyFor}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
+              <Spacer height={cx(10)}/>
+              <FlatList
+                data={selectedTasks}
+                style={styles.taskList}
+                renderItem={({ item }) => {
+                  return (
+                    <View style={styles.taskItem}>
+                      <Text style={styles.taskItemText}>{item.name}</Text>
+                      {state.tasks.length > 1 &&
+                        <TouchableOpacity
+                          onPress={() => {
+                            item.status = TaskStatus.NoSelected
+                          }}>
+                          <Image style={styles.taskItemIcon} source={GroupBizRes.ic_arrows_nav_clear}/>
+                        </TouchableOpacity>}
+                    </View>
+                  )
+                }}
+                keyExtractor={item => item.dp.key}
+                ListEmptyComponent={() => <View style={styles.listEmptyView}>
+                  <Text style={styles.listEmptyText}>
+                    {I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}
+                  </Text>
+                </View>}/>
+              <Spacer height={cx(6)}/>
+              <FlatList
+                data={noSelectedTasks}
+                style={styles.noSelectTaskList}
+                renderItem={({ item }) => {
+                  return (
+                    <TouchableOpacity
+                      style={styles.noSelectTaskItem}
+                      onPress={() => {
+                        item.status = TaskStatus.Selected
+                      }}>
+                      <Spacer width={cx(8)}/>
+                      <Text style={styles.noSelectTaskText}>{item.name}</Text>
+                      <Image style={styles.taskItemIcon} source={GroupBizRes.device_panel_timer_add}/>
+                    </TouchableOpacity>
+                  )
+                }}
+                keyExtractor={item => item.dp.key}/>
+              <Spacer/>
+              <DeleteButton
+                text={I18n.getLang('timer_sockets_button_text')}
+                onPress={async () => {
+                  state.loading = true
+                  const tasks = selectedTasks.map(task => {
+                    return {
+                      ...task,
+                      startTime: dayjs().unix(),
+                      duration: (parseInt(state.hour) * 60 + parseInt(state.min)) * 60,
+                      status: TaskStatus.Started,
+                    }
+                  })
+                  await setTimerTasks(cloneDeep(tasks))
+                  state.loading = false
+                }}
+                textStyle={{ fontSize: cx(14) }}
+                style={{ backgroundColor: !startEnable ? '#FFE0D4' : '#f60' }}/>
+            </View>
+          }
+          {startedTasks.length > 0 && state.tasks.length > 1 &&
+            <>
+              <Spacer height={cx(30)}/>
+              <View style={styles.content}>
+                <Text style={styles.applyFor}>{
+                  I18n.formatValue('timer_nightplug_active_timer_subheadline2_text', startedTasks.length.toString())
+                }</Text>
+              </View>
+              <FlatList
+                data={startedTasks}
+                renderItem={({ item }) => {
+                  return ActiveTimerItem(item, () => {
+                    item.status = TaskStatus.NoSelected
+                  })
+                }}
+                keyExtractor={item => item.dp.key}
+                ListHeaderComponent={() => (<Spacer height={cx(10)}/>)}
+                ItemSeparatorComponent={() => (<Spacer height={cx(10)}/>)}
+                ListFooterComponent={() => (<Spacer height={cx(20)}/>)}/>
+            </>
+          }
+          {
+            startedTasks.length === 1 && state.tasks.length === 1 &&
+            <View style={{ justifyContent: 'center', marginHorizontal: cx(24) }}>
+              <Spacer height={cx(116)}/>
+              <View
+                style={{
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}>
+                <CircularProgress
+                  progress={(startedTasks[0].timeLeft / startedTasks[0].duration) * 100}
+                  size={cx(172)}
+                  strokeWidth={cx(14)}>
+                  <Text style={styles.activeTaskTimeText2}>{timeFormat(startedTasks[0].timeLeft)}</Text>
+                </CircularProgress>
+              </View>
+              <Spacer height={cx(32)}/>
+              <Text
+                style={[styles.activeTaskDesc, { textAlign: 'center' }]}>{I18n.formatValue(startedTasks[0].stringOn, timeFormat(startedTasks[0].timeLeft))}</Text>
+              <Spacer height={cx(32)}/>
+              <TextButton
+                text={I18n.getLang('auto_scan_system_cancel')}
+                style={styles.activeTasBtn}
+                textStyle={styles.activeTaskBtnText}
+                onPress={async () => {
+                  state.loading = true
+                  const task = cloneDeep(startedTasks[0])
+                  task.status = TaskStatus.NoSelected
+                  task.startTime = 0
+                  task.duration = 0
+                  await setTimerTasks([task])
+                  state.loading = false
+                }}/>
+              <Spacer width={cx(20)}/>
+            </View>
+          }
+          <Spacer/>
+        </View>
+      </ScrollView>
+    </Page>
+  )
+}
+
+function ActiveTimerItem(task: TimerTask, onCancel: () => void) {
+  return (
+    <Card style={{ marginHorizontal: cx(24) }}>
+      <Spacer/>
+      <View style={styles.activeTaskHeadLine}>
+        <Spacer width={cx(20)}/>
+        <Text style={styles.activeTaskHeadLineText}>{task.name}</Text>
+        <TextButton
+          text={I18n.getLang('auto_scan_system_cancel')}
+          style={styles.activeTaskHeadLineBtn}
+          textStyle={styles.activeTaskHeadLineBtnText}
+          onPress={onCancel}/>
+        <Spacer width={cx(12)}/>
+      </View>
+      <Spacer height={cx(12)}/>
+      <View style={styles.activeTaskHeadLine}>
+        <Spacer width={cx(20)}/>
+        <CircularProgress
+          progress={25}
+          size={cx(24)}
+          strokeWidth={cx(2)}/>
+        <Spacer width={cx(16)}/>
+        <Text style={styles.activeTaskTimeText}>{'2h 12 min'}</Text>
+        <Spacer width={cx(20)}/>
+      </View>
+      <Spacer/>
+      <View style={{ marginHorizontal: cx(20) }}>
+        <Text style={styles.activeTaskDesc}>{
+          I18n.getLang(task.stringOn)
+        }</Text>
+      </View>
+      <Spacer height={cx(22)}/>
+    </Card>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  content: {
+    marginHorizontal: cx(24),
+  },
+  applyFor: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  taskList: {
+    backgroundColor: '#f6f6f6',
+    paddingTop: cx(8),
+    borderRadius: cx(4),
+  },
+  taskItem: {
+    marginHorizontal: cx(8),
+    marginBottom: cx(8),
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+  },
+  taskItemText: {
+    color: '#000',
+    fontSize: 14,
+    marginHorizontal: cx(8),
+    marginVertical: cx(9),
+  },
+  taskItemIcon: {
+    width: cx(16),
+    height: cx(16),
+    marginRight: cx(8),
+  },
+  listEmptyView: {
+    marginHorizontal: cx(8),
+    marginTop: cx(6),
+    marginBottom: cx(14),
+  },
+  listEmptyText: {
+    color: '#666',
+    fontSize: cx(14),
+  },
+  noSelectTaskList: {},
+  noSelectTaskItem: {
+    height: cx(30),
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  noSelectTaskText: {
+    flex: 1,
+    color: '#000',
+    fontSize: cx(14),
+  },
+  activeTaskHeadLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  activeTaskHeadLineText: {
+    flex: 1,
+    color: '#000',
+    fontSize: cx(14),
+  },
+  activeTaskHeadLineBtn: {
+    width: cx(50),
+    height: cx(24),
+    padding: 0,
+    backgroundColor: '#666',
+    borderRadius: cx(4),
+  },
+  activeTaskHeadLineBtnText: {
+    color: '#fff',
+    fontSize: cx(8.2),
+  },
+  activeTaskTimeText: {
+    flex: 1,
+    color: '#666',
+    fontSize: cx(24),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  activeTaskDesc: {
+    flex: 1,
+    color: '#666',
+    fontSize: cx(14),
+  },
+  activeTasBtn: {
+    width: cx(75),
+    height: cx(36),
+    padding: 0,
+    backgroundColor: '#666',
+    borderRadius: cx(4),
+  },
+  activeTaskBtnText: {
+    color: '#fff',
+    fontSize: cx(12.2),
+  },
+  activeTaskTimeText2: {
+    flex: 1,
+    marginHorizontal: cx(20),
+    color: '#666',
+    fontSize: cx(22),
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+})
+
+export default TimerPage

package/src/navigation/Routers.d.ts

@@ -0,0 +1,5 @@
+import { NavigationRoute } from 'tuya-panel-kit';
+export declare const ui_biz_routerKey: {
+    group_ui_biz_timer: string;
+};
+export declare const TimerRouters: NavigationRoute[];

package/src/navigation/Routers.ts

@@ -0,0 +1,97 @@
+import { NavigationRoute, TransitionPresets } from 'tuya-panel-kit'
+import TimerPage from '../modules/timer/TimerPage'
+import TimeSchedulePage from '../modules/time_schedule/TimeSchedulePage'
+import TimeScheduleDetailPage from '../modules/time_schedule/TimeScheduleDetailPage'
+import MoodPage from '../modules/mood/MoodPage'
+import AddMoodPage from '../modules/mood/AddMoodPage'
+import DynamicMoodEditorPage from '../modules/mood/DynamicMoodEditorPage'
+import StaticMoodEditorPage from '../modules/mood/StaticMoodEditorPage'
+import SelectPage from '../modules/select/SelectPage'
+
+export const ui_biz_routerKey = {
+  'group_ui_biz_timer': 'group_ui_biz_timer',
+  'group_ui_biz_time_schedule': 'group_ui_biz_time_schedule',
+  'group_ui_biz_time_schedule_edit': 'group_ui_biz_time_schedule_edit',
+  'group_ui_biz_mood': 'group_ui_biz_mood',
+  'group_ui_biz_mood_add': 'group_ui_biz_mood_add',
+  'group_ui_biz_static_mood_edit': 'group_ui_biz_static_mood_edit',
+  'group_ui_biz_dynamic_mood_edit': 'group_ui_biz_dynamic_mood_edit',
+  'group_ui_biz_select_page': 'group_ui_biz_select_page',
+}
+
+export const TimerRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.group_ui_biz_timer,
+    component: TimerPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  }
+]
+
+export const TimeScheduleRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.group_ui_biz_time_schedule,
+    component: TimeSchedulePage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  {
+    name: ui_biz_routerKey.group_ui_biz_time_schedule_edit,
+    component: TimeScheduleDetailPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+]
+
+export const MoodRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.group_ui_biz_mood,
+    component: MoodPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  {
+    name: ui_biz_routerKey.group_ui_biz_mood_add,
+    component: AddMoodPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  {
+    name: ui_biz_routerKey.group_ui_biz_static_mood_edit,
+    component: StaticMoodEditorPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  { 
+    name: ui_biz_routerKey.group_ui_biz_dynamic_mood_edit,
+    component: DynamicMoodEditorPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+]
+
+export const SelectPageRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.group_ui_biz_select_page,
+    component: SelectPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+      ...TransitionPresets.ModalPresentationIOS,
+    },
+  },
+]

package/src/res/GroupBizRes.ts

@@ -0,0 +1,4 @@
+export default {
+  ic_arrows_nav_clear: require('./materialiconsFilledCancel.png'),
+  device_panel_timer_add: require('./materialiconsOutlinedArrowsNavAddBox.png'),
+}

package/tsconfig.json

@@ -0,0 +1,51 @@
+{
+    "compilerOptions": {
+        /* Basic Options */
+        "target": "ES2017",
+        /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+        "module": "commonjs",
+        /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+        "jsx": "react",
+        /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+
+        /* Strict Type-Checking Options */
+        /* "strict": true                         /* Enable all strict type-checking options. */
+        "noImplicitAny": false,
+        /* Raise error on expressions and declarations with an implied 'any' type. */
+        "strictNullChecks": true,
+        /* Enable strict null checks. */
+
+        /* Additional Checks */
+        "noUnusedLocals": true,
+        /* Report errors on unused locals. */
+        "noUnusedParameters": true,
+        /* Report errors on unused parameters. */
+
+        /* .d.ts config */
+        "declaration": true,
+        "emitDeclarationOnly": true,
+
+        /* Module Resolution Options */
+        "moduleResolution": "node",
+        /* Specify module resolution strategy: 'node' (Node.js) or 'classic'  */
+        "types": ["react", "react-native"],
+        /* Type declaration files to be included in compilation. */
+        "typeRoots": ["@types/*.d.ts"],
+        "allowSyntheticDefaultImports": true,
+        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+        "esModuleInterop": true,
+        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+        "baseUrl": "./src",
+        "paths": {
+            "@api": ["./api"],
+            "@components": ["./components"],
+            "@config": ["./config"],
+            "@i18n": ["./i18n"],
+            "@models": ["./models"],
+            "@res": ["./res"],
+            "@utils": ["./utils"]
+        }
+    },
+    "include": ["src/**/*.ts","src/**/*.tsx"],
+    "exclude": ["node_modules",".yalc"]
+}