update

src/_health/components/duration_picker.tsx

@@ -0,0 +1,96 @@
+import { PageContainer, View } from "@tarojs/components"
+import { useEffect, useRef, useState } from "react"
+import { useSelector } from "react-redux"
+import Taro from "@tarojs/taro"
+import { useTranslation } from "react-i18next"
+import PickerViews from "@/components/input/PickerViews"
+import { ColorType } from "@/context/themes/color"
+import { updateRecord } from "@/services/trackTimeDuration"
+import Modal from "@/components/layout/Modal.weapp";
+import { getThemeColor } from "@/features/health/hooks/health_hooks"
+import { durationDatas } from "@/features/trackTimeDuration/hooks/Console"
+import { TimeFormatter } from "@/utils/time_format"
+
+export default function DurationPicker(props: { time: any,dismiss:any,done:any }) {
+    const common = useSelector((state: any) => state.common);
+    const health = useSelector((state: any) => state.health);
+    const [values,setValues] = useState(itemValues())
+    const durationPickerRef = useRef(null)
+
+    function itemDatas() {
+        var min: number = 1
+        var max: number = 23
+        var step: number = 5
+    
+        // if (common.duration) {
+            min = 1//common.duration.min
+            max = 23//common.duration.max
+            step = 5//common.duration.step
+        // }
+        var minutes: string[] = []
+        for (let i = 0; i < 60; i += step) {
+            minutes.push(i + TimeFormatter.getMinutesUnit(i))
+        }
+        var hours: string[] = []
+        for (let i = min; i <= max; i++) {
+            hours.push(i + TimeFormatter.getHoursUnit(i))
+        }
+        return [hours, minutes]
+    }
+
+    function itemValues(){
+        const seconds = props.time/1000
+        const hours = Math.floor(seconds/3600)
+        const minutes = Math.floor((seconds%3600)/60)
+
+        return [hours-1,Math.floor(minutes/5)]
+    }
+
+    function durationPickerContent() {
+        var color = getThemeColor(health.mode)
+        var title = health.mode == 'FAST'?'断食时长':'睡眠时长'
+        return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
+
+
+            <PickerViews ref={durationPickerRef}
+                onChange={durationChange}
+                items={itemDatas()}
+                value={values}
+                themeColor={color}
+                title={title}
+                showBtns={true}
+                onCancel={props.dismiss}
+                onDone={done}
+                />
+        </View>
+    }
+
+    function durationChange(e) {
+        setValues(e)
+    }
+
+    function done(e){
+        var time = e[0]*3600*1000+e[1]*60*1000
+        props.done(time)
+    }
+
+    function modalContent() {
+
+            return <Modal
+                testInfo={null}
+                dismiss={props.dismiss}
+                confirm={() => { }}>
+                {
+                     durationPickerContent()
+                }
+            </Modal>
+
+    }
+
+
+    return <View style={{ width: 0, height: 0 }}>
+        {
+            modalContent()
+        }
+    </View>
+}

src/_health/pages/add_moment.scss

@@ -15,7 +15,7 @@
     justify-content: center;
     display: flex;
     position: absolute;
-    bottom: 200px;
+    bottom: 100px;
 }
 
 .form{

src/_health/pages/edit.scss

@@ -0,0 +1,43 @@
+.edit_footer_btn{
+    position: fixed;
+    bottom: 100px;
+    height: 96px;
+    width: 520px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 28px;
+    left: 116px;
+}
+
+.edit_item_cell{
+    background-color: #fff;
+    height: 140px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    padding-left: 40px;
+    padding-right: 52px;
+}
+
+.edit_item_cell_line{
+    background-color: #B2B2B2;
+    opacity: 0.4;
+    position: absolute;
+    height: 2px;
+    transform: scaleY(0.5);
+    left: 40px;
+    right: 0;
+    bottom: 0;
+}
+
+.cell_index{
+    width: 36px;
+    height: 42px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    color: #B2B2B2;
+    font-size: 26px;
+}

src/_health/pages/schedules_del.tsx

@@ -6,6 +6,7 @@ import { View, Text } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import './edit.scss'
 
 export default function SchedulesDel() {
     const health = useSelector((state: any) => state.health);
@@ -63,15 +64,20 @@ export default function SchedulesDel() {
     return <View>
         {
             list.map((item, index) => {
-                return <View key={index} >
-                    <Text>{index + 1}</Text>
+                return <View className="edit_item_cell" key={index} >
+                    <Text className="cell_index">{index + 1}</Text>
                     <Text>{item.title}</Text>
+                    <View style={{flex:1}}/>
                     <View onClick={()=>del(index)}>
                         <IconRemove width={24} color={getThemeColor(health.mode)} />
                     </View>
+                    {
+                        index<=list.length-1 && <View className='edit_item_cell_line' />
+                    }
+                    
                 </View>
             })
         }
-        <View style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={save}>完成</View>
+        <View className="edit_footer_btn" style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={save}>完成</View>
     </View>
 }

src/_health/pages/schedules_list.tsx

@@ -1,5 +1,6 @@
 import { View, Text } from '@tarojs/components'
 import './schedules_list.scss'
+import './edit.scss'
 import { useEffect, useState } from 'react'
 import Modal from '@/components/layout/Modal.weapp'
 import AddLabel from '../components/add_label'
@@ -146,7 +147,7 @@ export default function SchedulesList() {
             </View>
         }
 
-        <Text onClick={tapEdit}>批量编辑</Text>
+        <View className="edit_footer_btn" style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={tapEdit}>批量编辑</View>
 
         {
             showModal && <Modal testInfo={null}

src/_health/pages/schedules_mark.tsx

@@ -4,6 +4,7 @@ import { View,Text, Input } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import './edit.scss'
 
 export default function SchedulesMark() {
     const health = useSelector((state: any) => state.health);
@@ -55,15 +56,19 @@ export default function SchedulesMark() {
     return <View>
         {
             list.map((item, index) => {
-                return <View key={index} >
-                    <Text>{index + 1}</Text>
-                    <Input value={item.title} onInput={(e)=>{
+                return <View className="edit_item_cell" key={index} >
+                    <Text className="cell_index">{index + 1}</Text>
+                    <Input value={item.title} style={{flex:1}} onInput={(e)=>{
                         item.title = e.detail.value;
                         setList([...list])
                     }}/>
+
+                    {
+                        index<=list.length-1 && <View className='edit_item_cell_line' />
+                    }
                 </View>
             })
         }
-        <View style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={save}>完成</View>
+        <View className="edit_footer_btn" style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={save}>完成</View>
     </View>
 }

src/_health/pages/schedules_order.tsx

@@ -1,7 +1,8 @@
 import { View } from "@tarojs/components";
 import { useSelector } from "react-redux";
+import './edit.scss'
 
 export default function SchedulesOrder() {
     const health = useSelector((state: any) => state.health);
-    return <View></View>
+    return <View className="edit_footer_btn"></View>
 }

src/_health/pages/schedules_reminder.tsx

@@ -4,6 +4,7 @@ import { View, Text, Switch } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import './edit.scss'
 
 export default function SchedulesReminder() {
     const health = useSelector((state: any) => state.health);
@@ -55,16 +56,20 @@ export default function SchedulesReminder() {
     return <View>
         {
             list.map((item, index) => {
-                return <View key={index} >
-                    <Text>{index + 1}</Text>
+                return <View className="edit_item_cell" key={index} >
+                    <Text className="cell_index">{index + 1}</Text>
                     <Text>{item.title}</Text>
+                    <View style={{flex:1}}/>
                     <Switch checked={item.reminder_enabled} onChange={(e)=>{
                         item.reminder_enabled = e.detail.value
                         setList([...list])
                     }}/>
+                    {
+                        index<=list.length-1 && <View className='edit_item_cell_line' />
+                    }
                 </View>
             })
         }
-        <View style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={save}>完成</View>
+        <View className="edit_footer_btn" style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={save}>完成</View>
     </View>
 }

src/_health/pages/schedules_time.tsx

@@ -6,6 +6,7 @@ import { View, Text } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import './edit.scss'
 
 export default function SchedulesTime() {
     const health = useSelector((state: any) => state.health);
@@ -58,13 +59,13 @@ export default function SchedulesTime() {
     }
 
     function save() {
-        var array:any = []
-        list.map((item)=>{
+        var array: any = []
+        list.map((item) => {
             array.push({
-                id:item.id,
-                time:item.time,
-                event:item.event,
-                title:item.title
+                id: item.id,
+                time: item.time,
+                event: item.event,
+                title: item.title
             })
         })
 
@@ -85,14 +86,18 @@ export default function SchedulesTime() {
     return <View>
         {
             list.map((item, index) => {
-                return <View key={index} onClick={() => changeTime(item)}>
-                    <Text>{index + 1}</Text>
+                return <View className="edit_item_cell" key={index} onClick={() => changeTime(item)}>
+                    <Text className="cell_index">{index + 1}</Text>
                     <Text>{item.title}</Text>
+                    <View style={{flex:1}}/>
                     <Text>{item.time}</Text>
+                    {
+                        index <= list.length - 1 && <View className='edit_item_cell_line' />
+                    }
                 </View>
             })
         }
-        <View style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={save}>完成</View>
+        <View className="edit_footer_btn" style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={save}>完成</View>
         {
             showTimePicker && <Modal
                 testInfo={null}

src/components/input/PickerViews.tsx

@@ -10,7 +10,7 @@ let detailValue
 const Component = forwardRef((props: {
     value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function,
     themeColor?: string, title?: string,
-    hideTitle?: boolean
+    hideTitle?: boolean,onDone?:Function
 }, ref) => {
     const { t } = useTranslation()
     const [v, setV] = useState(props.value)
@@ -18,15 +18,18 @@ const Component = forwardRef((props: {
     var alpha = alphaToHex(0.4)
 
     useEffect(() => {
-        setV(props.value)
+        if (v!=props.value){
+            setV(props.value)
+        }
+        
     }, [props.value])
 
     function onPickerChange(e) {
         setV(e.detail.value)
-        // detailValue = e.detail.value
-        if (props.showBtns) {
-            return;
-        }
+
+        // if (props.showBtns) {
+        //     return;
+        // }
         props.onChange(e.detail.value)
     }
 
@@ -43,6 +46,10 @@ const Component = forwardRef((props: {
         if (process.env.TARO_ENV == 'weapp') {
             e.stopPropagation()
         }
+        if (props.onDone){
+            props.onDone(v)
+            return;
+        }
         props.onChange(v)
     }
 

src/features/health/MainConsole.tsx

@@ -8,13 +8,14 @@ import { jumpPage } from "../trackTimeDuration/hooks/Common";
 import Modal from "@/components/layout/Modal.weapp";
 import { MainColorType } from "@/context/themes/color";
 import ConsolePicker from "../trackTimeDuration/components/ConsolePicker";
-import { clockTimes, makeDone, updateSchedule, updateTarget } from "@/services/health";
+import { clockTimes, makeDone, updateEventDuration, updateSchedule, updateTarget } from "@/services/health";
 import TimePicker from "../common/TimePicker";
 import showActionSheet from "@/components/basic/ActionSheet";
 import { rpxToPx } from "@/utils/tools";
 import { setMode } from "@/store/health";
 import { getCountownTime, getDuration, getScenario, getThemeColor, getWindowStatus } from "./hooks/health_hooks";
 import { IconMore } from "@/components/basic/Icons";
+import DurationPicker from "@/_health/components/duration_picker";
 
 let useNavigation;
 let min = 0
@@ -30,6 +31,7 @@ export default function MainConsole(props: { type: WindowType }) {
     const user = useSelector((state: any) => state.user);
     const [showPicker, setShowPicker] = useState(false)
     const [showTimePicker, setShowTimePicker] = useState(false)
+    const [durationPicker,setDurationPicker] = useState(false)
     const [operateType, setOperateType] = useState('')
     const [btnDisable, setBtnDisable] = useState(false)
     const [selItem, setSelItem] = useState<any>(null)
@@ -394,7 +396,7 @@ export default function MainConsole(props: { type: WindowType }) {
                     switch (health.mode) {
                         case 'DAY':
                         case 'NIGHT':
-                            jumpPage('/_health/pages/setting_reminder')
+                            jumpPage('/_health/pages/schedules_list')
                             break;
                         case 'FAST':
                         case 'SLEEP':
@@ -402,6 +404,7 @@ export default function MainConsole(props: { type: WindowType }) {
                                 const obj = getScenario(health.windows, health.mode)
                                 if (obj.window_id) {
                                     //编辑本次时长
+                                    setDurationPicker(true)
                                 }
                                 else {
                                     jumpPage('/_health/pages/schedules_list')
@@ -428,6 +431,8 @@ export default function MainConsole(props: { type: WindowType }) {
                             const obj = getScenario(health.windows, health.mode)
                             if (obj.window_id) {
                                 //del record
+                                
+                                console.log('zzzzzzzzz')
                             }
                             else {
 
@@ -549,6 +554,14 @@ export default function MainConsole(props: { type: WindowType }) {
         }
         return ''
     }
+
+    function updateDuration(duration){
+        setDurationPicker(false)
+        const scenario = getScenario(health.windows,health.mode)
+        updateEventDuration(scenario.timeline[0].event_id,scenario.target.start_timestamp+duration).then(res=>{
+            global.refreshWindow()
+        })
+    }
     return <View className="main-console-bg">
         <Image className="main_arrow" src={require('@assets/images/center_arrow.png')} />
         <View className="main_summary">
@@ -579,5 +592,14 @@ export default function MainConsole(props: { type: WindowType }) {
         {
             showPicker && timeContent()
         }
+        {
+            durationPicker && <DurationPicker 
+            done={(time)=>{
+                updateDuration(time)
+            }}
+            dismiss={()=>{
+                setDurationPicker(false)
+            }} time={getScenario(health.windows,health.mode).target.duration}/>
+        }
     </View>
 }

src/services/health.tsx

@@ -1,4 +1,4 @@
-import { API_HEALTH_CLOCK, API_HEALTH_LABELS, API_HEALTH_MOMENT, API_HEALTH_RECORD, API_HEALTH_SCHEDULES, API_HEALTH_STREAKS, API_HEALTH_TARGET, API_HEALTH_WINDOWS } from "./http/api";
+import { 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 } from "./http/api";
 import { request } from "./http/request";
 
 export const getLabels = (params) => {
@@ -142,6 +142,17 @@ export const createMoment = (params) =>{
     })
 }
 
+export const updateEventDuration = (id,duration)=>{
+    return new Promise((resolve) => {
+        request({
+            url: API_HEALTH_EVENTS+`/${id}/duration`, method: 'PUT', data: { target_duration:duration }
+        }).then(res => {
+            resolve(res);
+            // dispatch(loginSuccess(res));
+        })
+    })
+}
+
 export const clockTimes = (params) =>{
     return new Promise((resolve) => {
         request({

src/services/http/api.js

@@ -102,4 +102,5 @@ export const API_HEALTH_LABELS = `${baseUrl}/api/health/labels`
 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`
-export const API_HEALTH_CLOCK = `${baseUrl}/api/health/clocks`
+export const API_HEALTH_CLOCK = `${baseUrl}/api/health/clocks`
+export const API_HEALTH_EVENTS = `${baseUrl}/api/health/events`