update

src/_health/components/add_label.tsx

@@ -1,31 +1,45 @@
-import { View, Text, Input } from "@tarojs/components";
+import { View, Text, Input, Switch } from "@tarojs/components";
 import './add_label.scss'
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Modal from "@/components/layout/Modal.weapp";
 import TimePicker from "@/features/common/TimePicker";
 import dayjs from "dayjs";
 import { MainColorType } from "@/context/themes/color";
-import { createSchedule } from "@/services/health";
+import { createSchedule, getLabelsTime, getSchedules } from "@/services/health";
 import Taro from "@tarojs/taro";
 import { useSelector } from "react-redux";
 import { getThemeColor } from "@/features/health/hooks/health_hooks";
 
-export default function AddLabel(props: { labels: any }) {
+export default function AddLabel(props: { labels: any, defaultValue?: string }) {
     const [showTimePicker, setShowTimePicker] = useState(false)
     const health = useSelector((state: any) => state.health);
-    const [value, setValue] = useState('')
+    const [value, setValue] = useState(props.defaultValue ?? '')
+    const [isFullday, setIsFullday] = useState(false)
+    const [timeLabels, setTimeLabels] = useState<any>([])
+    const [strTime, setStrTime] = useState('')
 
-    function timeContent() {
-        return <Modal
-            testInfo={null}
-            dismiss={() => {
-                setShowTimePicker(false)
-            }}
-            confirm={() => { }}>
-            {
-                pickerContent()
-            }
-        </Modal>
+    // function timeContent() {
+    //     return <Modal
+    //         testInfo={null}
+    //         dismiss={() => {
+    //             setShowTimePicker(false)
+    //         }}
+    //         confirm={() => { }}>
+    //         {
+    //             pickerContent()
+    //         }
+    //     </Modal>
+    // }
+
+    useEffect(() => {
+        getData()
+    }, [])
+
+    function getData() {
+        
+        getLabelsTime({}).then(res => {
+            setTimeLabels((res as any).labels)
+        })
     }
 
     function pickerContent() {
@@ -59,6 +73,59 @@ export default function AddLabel(props: { labels: any }) {
         })
     }
 
+    function done() {
+        createSchedule({
+
+            schedules: [{
+                event: health.mode == 'EAT' ? 'EAT_CUSTOM' : 'ACTIVE_CUSTOM',
+                title: value,
+                time: dayjs().format('HH:mm'), 
+                is_all_day: isFullday
+            }]
+        }).then(res => {
+            global.refreshWindow()
+            global.refreshSchedules()
+            // if (process.env.TARO_ENV == 'weapp') {
+            //     Taro.navigateBack()
+            // }
+        })
+    }
+
+    function timeContent() {
+        return <View>
+            <View className="header1">Set Time</View>
+            <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                <Text>全天时间</Text>
+                <Switch
+                    color={getThemeColor(health.mode)}
+                    onChange={(e) => {
+                        setIsFullday(e.detail.value)
+                        // item.reminder = e.detail.value
+                        // setList([...list])
+                    }} />
+            </View>
+            {
+                isFullday ? <View>
+                    <Input className="input_lb" placeholder="选择或输入时间标签" value={strTime} onInput={(e: any) => {
+                        setStrTime(e.target.value)
+                    }} />
+                    <View className="label_bg">
+                        {
+                            timeLabels.map((item, index) => {
+                                return <View className="label" key={index} onClick={() => setStrTime(item.title)}>{item.title}</View>
+                            })
+                        }
+                    </View>
+                </View> :
+                    <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <Text>{dayjs().format('HH:mm')}</Text>
+                        <Text>Picker placeholder</Text>
+                    </View>
+            }
+            <View className="pop_footer" style={{ backgroundColor: getThemeColor(health.mode) }} onClick={() => done()}>完成</View>
+        </View>
+    }
+
     return <View>
         <View className="header1">标记为</View>
         <View className="body1">
@@ -74,8 +141,19 @@ export default function AddLabel(props: { labels: any }) {
             </View>
         </View>
         <View className="pop_footer" style={{ backgroundColor: getThemeColor(health.mode) }} onClick={() => setShowTimePicker(true)}>下一步</View>
-        {
+        {/* {
             showTimePicker && timeContent()
+        } */}
+        {
+            showTimePicker && <Modal testInfo={null}
+                dismiss={() => {
+                    setShowTimePicker(false)
+                }}
+                confirm={() => { }}>
+                {
+                    timeContent()
+                }
+            </Modal>
         }
     </View>
 }

src/_health/pages/active_plan.scss

@@ -0,0 +1,9 @@
+.plan_item{
+    height: 128px;
+    background-color:#fff;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding:0 40px;
+    position: relative;
+}

src/_health/pages/active_plan.tsx

@@ -0,0 +1,72 @@
+import { View, Text } from "@tarojs/components";
+import './active_plan.scss'
+import { useRouter } from "@tarojs/taro";
+import { useEffect, useState } from "react";
+import { getThemeColor } from "@/features/health/hooks/health_hooks";
+import Modal from "@/components/layout/Modal.weapp";
+import AddLabel from "../components/add_label";
+import { getLabelsEvent, getSchedules } from "@/services/health";
+import { useSelector } from "react-redux";
+
+let useRoute;
+let useNavigation;
+let scenario = '';
+if (process.env.TARO_ENV == 'rn') {
+    useRoute = require("@react-navigation/native").useRoute
+    useNavigation = require("@react-navigation/native").useNavigation
+}
+
+export default function ActivePlan() {
+
+    let router
+    let navigation;
+    if (useNavigation) {
+        navigation = useNavigation()
+    }
+
+    if (process.env.TARO_ENV == 'rn') {
+        router = useRoute()
+    }
+    else {
+        router = useRouter()
+    }
+
+    const [schedule, setSchedule] = useState(JSON.parse(router.params.schedule))
+    const [labels, setLabels] = useState<any>([])
+    const [showModal, setShowModal] = useState(false)
+    const health = useSelector((state: any) => state.health);
+
+    useEffect(() => {
+        getLabelsEvent({ window: health.mode }).then(res => {
+            setLabels((res as any).labels)
+        })
+
+        getSchedules({ window: health.mode }).then(res => {
+
+        })
+    }, [])
+
+    function tapEdit() {
+        setShowModal(true)
+    }
+
+    return <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+        <Text>Plan my daily life</Text>
+        <Text>Header: List top 3 activities that matter most to me/I want to practice to every day</Text>
+        <View className="plan_item" onClick={tapEdit}>
+            <Text>1</Text>
+            <Text style={{ flex: 1 }}>{schedule.title}</Text>
+            <Text style={{ color: getThemeColor('ACTIVE') }}>Tap to customize</Text>
+        </View>
+
+        {
+            showModal && <Modal testInfo={null}
+                dismiss={() => {
+                    setShowModal(false)
+                }}
+                confirm={() => { }}>
+                <AddLabel labels={labels} defaultValue={schedule.title}/>
+            </Modal>
+        }
+    </View>
+}

src/_health/pages/edit_schedule.tsx

@@ -3,7 +3,7 @@ import './edit_schedule.scss'
 import { useEffect, useState } from 'react'
 import Modal from '@/components/layout/Modal.weapp'
 import AddLabel from '../components/add_label'
-import { delSchedule, getLabels, getSchedules } from '@/services/health'
+import { delSchedule, getLabelsEvent, getSchedules } from '@/services/health'
 import { AtSwipeAction } from "taro-ui"
 import { useSelector } from 'react-redux'
 import { getThemeColor } from '@/features/health/hooks/health_hooks'
@@ -32,7 +32,7 @@ export default function EditSchedule() {
 
         })
 
-        getLabels({ window: health.mode }).then(res => {
+        getLabelsEvent({ window: health.mode }).then(res => {
             setLabels((res as any).labels)
         })
     }

src/_health/pages/move_schedule.tsx

@@ -1,9 +1,10 @@
-import { View, Text,Image, Switch } from "@tarojs/components";
+import { View, Text, Image, Switch } from "@tarojs/components";
 import './move_schedule.scss'
 import { useRouter } from "@tarojs/taro";
 import { useEffect, useState } from "react";
-import { getMoveSchedules } from "@/services/health";
+import { createSchedule, getMoveSchedules } from "@/services/health";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
+import { getThemeColor } from "@/features/health/hooks/health_hooks";
 
 let useRoute;
 let useNavigation;
@@ -31,16 +32,16 @@ export default function MoveSchedule() {
         router = useRouter()
     }
 
-    const [hours,setHours] = useState(JSON.parse(router.params.hours))
-    const [loaded,setLoaded] = useState(false)
+    const [hours, setHours] = useState(JSON.parse(router.params.hours))
+    const [loaded, setLoaded] = useState(false)
 
-    
-    useEffect(()=>{
+
+    useEffect(() => {
         getMoveSchedules().then(res => {
             console.log(hours)
             setLoaded(true)
         })
-    },[])
+    }, [])
 
     // console.log(JSON.parse(router.params.hours))
     if (!loaded) return <View />
@@ -49,32 +50,43 @@ export default function MoveSchedule() {
         {
             hours.map((item, index) => {
                 var start = item.hour
-                var open:any = start
+                var open: any = start
                 var end = start + 1
                 start = (start + '').padStart(2, '0')
                 end = (end + '').padStart(2, '0')
-                
+
                 open = (open + '').padStart(2, '0')
-                if (item.status!='WFS') return <View key={index}/>
+                if (item.status != 'WFS') return <View key={index} />
                 return <View key={index} className="schedule_item">
                     <View className="schedule_item_left">
                         <View>{open}:50</View>
-                        <View className="schedule_item_time">{parseInt(start)<new Date().getHours()?'明天':''}{start}:00-{end}:00</View>
+                        <View className="schedule_item_time">{parseInt(start) < new Date().getHours() ? '明天' : ''}{start}:00-{end}:00</View>
                         {/* <Text className="schedule_item_target">{item.real_steps}/{item.target_steps} steps</Text> */}
                     </View>
                     <View style={{ flex: 1 }} />
-                    <Switch checked={item.reminder}/>
+                    <Switch checked={item.reminder} color={getThemeColor('ACTIVE')} onChange={e => {
+                        console.log(item)
+                        createSchedule({
+                            schedules: [{
+                                id: item.schedule_id,
+                                reminder: e.detail.value
+                            }],
+                        }).then(res => {
+                            global.refreshWindow()
+                            global.refreshSchedules()
+                        })
+                    }} />
                     {/* {
                         item.status == 'WFS' && <Text className="schedule_item_open">{open}:50开放</Text>
                     } */}
-                    
+
                     {
                         index < hours.length - 1 && <View className="schedule_item_line" />
                     }
                 </View>
             })
         }
-        <Text className="no_more" onClick={()=>{
+        <Text className="no_more" onClick={() => {
             jumpPage('./move_setting_reminder')
         }}>Full schedules</Text>
     </View>

src/_health/pages/schedules_edit.tsx

@@ -2,7 +2,7 @@ import { View, Text, Image, Switch, Input, ScrollView } from "@tarojs/components
 import './schedules_edit.scss'
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { createSchedule, getLabels, getSchedules } from "@/services/health";
+import { createSchedule, getLabelsEvent, getSchedules } from "@/services/health";
 import { rpxToPx } from "@/utils/tools";
 import { getThemeColor } from "@/features/health/hooks/health_hooks";
 import Modal from "@/components/layout/Modal.weapp";
@@ -61,7 +61,7 @@ export default function SchedulesEdit() {
 
         })
 
-        getLabels({ window: health.mode }).then(res => {
+        getLabelsEvent({ window: health.mode }).then(res => {
             setLabels((res as any).labels)
         })
     }

src/_health/pages/schedules_list.tsx

@@ -4,7 +4,7 @@ import './edit.scss'
 import { useEffect, useState } from 'react'
 import Modal from '@/components/layout/Modal.weapp'
 import AddLabel from '../components/add_label'
-import { delSchedule, getLabels, getSchedules } from '@/services/health'
+import { delSchedule, getLabelsEvent, getSchedules } from '@/services/health'
 import { AtSwipeAction } from "taro-ui"
 import { useSelector } from 'react-redux'
 import { getThemeColor } from '@/features/health/hooks/health_hooks'
@@ -113,7 +113,7 @@ export default function SchedulesList() {
 
         })
 
-        getLabels({ window: health.mode }).then(res => {
+        getLabelsEvent({ window: health.mode }).then(res => {
             setLabels((res as any).labels)
         })
     }

src/app.config.ts

@@ -65,7 +65,8 @@ const appConfig = defineAppConfig({
         'pages/move_schedule',
         'pages/move_setting',
         'pages/move_setting_reminder',
-        'pages/move_setting_time'
+        'pages/move_setting_time',
+        'pages/active_plan'
       ]
     }
   ],

src/features/health/MainConsole.tsx

@@ -38,7 +38,7 @@ export default function MainConsole(props: { type: WindowType }) {
     const [operateType, setOperateType] = useState('')
     const [btnDisable, setBtnDisable] = useState(false)
     const [selItem, setSelItem] = useState<any>(null)
-    
+
     const limitPickerRef = useRef(null)
     const dispatch = useDispatch()
 
@@ -156,38 +156,38 @@ export default function MainConsole(props: { type: WindowType }) {
         if (health.mode == 'DAY' || health.mode == 'NIGHT') {
             return null
         }
-        if (item.action && item.action != 'NA'){
-            if (health.mode == 'FAST'|| health.mode == 'SLEEP'){
-                if (item.action == 'POST_MOMENT'){
-                    return <IconCellArrow color='#B2B2B2' width={rpxToPx(34)}/>
+        if (item.action && item.action != 'NA') {
+            if (health.mode == 'FAST' || health.mode == 'SLEEP') {
+                if (item.action == 'POST_MOMENT') {
+                    return <IconCellArrow color='#B2B2B2' width={rpxToPx(34)} />
                 }
-                
+
             }
-            else if (health.mode == 'ACTIVE' && item.action == 'POST_MOMENT'){
-                return <View className="timeline_operate" style={{ color: themeColor, backgroundColor: '#fff',borderColor:themeColor,borderWidth:1,borderStyle:'solid' }} onClick={() => record(item)}>{operateTitle(item)}</View>
+            else if (health.mode == 'ACTIVE' && item.action == 'POST_MOMENT') {
+                return <View className="timeline_operate" style={{ color: themeColor, backgroundColor: '#fff', borderColor: themeColor, borderWidth: 1, borderStyle: 'solid' }} onClick={() => record(item)}>{operateTitle(item)}</View>
             }
             return <View className="timeline_operate" style={{ color: themeColor, backgroundColor: themeColor + '1A' }} onClick={() => record(item)}>{operateTitle(item)}</View>
         }
-            
+
         return <View />
     }
 
-    function tapTimeline(item,inex){
-        if (health.mode == 'DAY'||health.mode =='NIGHT'){
+    function tapTimeline(item, inex) {
+        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
             return;
         }
         if (!user.isLogin) {
             jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
             return
         }
-        if (!item.event_id){
+        if (!item.event_id) {
             return
         }
         jumpPage(`/_health/pages/timeline_detail?event_id=${item.event_id}&schedule_id=${item.schedule_id}`)
     }
 
     function timelineItem(item: any, index: number, count: number) {
-        return <View key={index} className="timeline_item" onClick={()=>tapTimeline(item,index)}>
+        return <View key={index} className="timeline_item" onClick={() => tapTimeline(item, index)}>
             <View className="timeline_left">
                 <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', height: rpxToPx(28) }}>
                     {
@@ -550,6 +550,30 @@ export default function MainConsole(props: { type: WindowType }) {
                 break;
             case 'ACTIVE':
                 list = active.timeline
+                if (active.onboard == false) {
+                    return <View style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                        <Text>Title</Text>
+                        <Text>Subtitle</Text>
+                        <View onClick={()=>{
+                            jumpPage('/_health/pages/active_plan?schedule='+JSON.stringify(list.length>0?list[0]:'{}'))
+                        }} style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: getThemeColor(health.mode),
+                            backgroundColor: getThemeColor(health.mode) + '1A',
+                            width: rpxToPx(347),
+                            height: rpxToPx(72),
+                            borderRadius: 9
+                        }}>Action</View>
+                    </View>
+                }
                 break;
         }
 

src/services/health.tsx

@@ -1,10 +1,23 @@
-import { API_ACTIVE_MOVES, API_ACTIVE_MOVES_CURRENT, API_ACTIVE_MOVES_SCHEDULES, API_HEALTH_ARCHIVED, API_HEALTH_CLOCK, API_HEALTH_EVENTS, API_HEALTH_LABELS, API_HEALTH_MOMENT, API_HEALTH_RECORD, API_HEALTH_SCHEDULES, API_HEALTH_STREAKS, API_HEALTH_TARGET, API_HEALTH_WINDOWS, API_ME_ALBUMS, API_ME_ALBUMS_STAT, API_ME_JOURNALS } from "./http/api";
+import { API_ACTIVE_MOVES, API_ACTIVE_MOVES_CURRENT, API_ACTIVE_MOVES_SCHEDULES, API_HEALTH_ARCHIVED, API_HEALTH_CLOCK, API_HEALTH_EVENTS, API_HEALTH_LABELS_EVENT, API_HEALTH_LABELS_TIME, API_HEALTH_MOMENT, API_HEALTH_RECORD, API_HEALTH_SCHEDULES, API_HEALTH_STREAKS, API_HEALTH_TARGET, API_HEALTH_WINDOWS, API_ME_ALBUMS, API_ME_ALBUMS_STAT, API_ME_JOURNALS } from "./http/api";
 import { request } from "./http/request";
 
-export const getLabels = (params) => {
+export const getLabelsEvent = (params) => {
     return new Promise((resolve, reject) => {
         request({
-            url: API_HEALTH_LABELS, method: 'GET', data: {...params}
+            url: API_HEALTH_LABELS_EVENT, method: 'GET', data: {...params}
+        }).then(res => {
+            resolve(res);
+            // dispatch(loginSuccess(res));
+        }).catch(e => {
+            reject(e)
+        })
+    })
+}
+
+export const getLabelsTime = (params) => {
+    return new Promise((resolve, reject) => {
+        request({
+            url: API_HEALTH_LABELS_TIME, method: 'GET', data: {...params}
         }).then(res => {
             resolve(res);
             // dispatch(loginSuccess(res));

src/services/http/api.js

@@ -98,7 +98,8 @@ export const API_SET_SCHEDULE = `${baseUrl}/api/fast/schedules`
 export const API_HEALTH_TARGET = `${baseUrl}/api/health/events`
 export const API_HEALTH_MOMENT = `${baseUrl}/api/health/moments`
 export const API_HEALTH_SCHEDULES = `${baseUrl}/api/health/schedules`
-export const API_HEALTH_LABELS = `${baseUrl}/api/health/labels`
+export const API_HEALTH_LABELS_EVENT = `${baseUrl}/api/health/labels/event`
+export const API_HEALTH_LABELS_TIME = `${baseUrl}/api/health/labels/time`
 export const API_HEALTH_RECORD = `${baseUrl}/api/health/records`
 export const API_HEALTH_STREAKS = `${baseUrl}/api/health/streaks`
 export const API_HEALTH_WINDOWS = `${baseUrl}/api/health/windows`