|
|
@@ -0,0 +1,249 @@
|
|
|
+import { View, Text, Image } from '@tarojs/components'
|
|
|
+import './IndexConsole.scss'
|
|
|
+import { useTranslation } from 'react-i18next'
|
|
|
+import { useSelector } from 'react-redux';
|
|
|
+import { endFast, endSleep, startFast, startSleep } from "../actions/TrackTimeActions";
|
|
|
+import { jumpPage } from '../hooks/Common';
|
|
|
+import { useEffect, useRef, useState } from 'react';
|
|
|
+import LimitPickers from '@/components/input/LimitPickers';
|
|
|
+import { getColor, getTimePickerTitle } from '../hooks/Console';
|
|
|
+import { vibrate } from '@/utils/tools';
|
|
|
+import { TimeFormatter } from '@/utils/time_format';
|
|
|
+
|
|
|
+let useNavigation;
|
|
|
+if (process.env.TARO_ENV == 'rn') {
|
|
|
+ useNavigation = require("@react-navigation/native").useNavigation
|
|
|
+}
|
|
|
+let operateType = ''
|
|
|
+export default function IndexConsole(props: { record: any }) {
|
|
|
+ const user = useSelector((state: any) => state.user);
|
|
|
+ const { status } = props.record.current_record;
|
|
|
+ const currentRecord = props.record.current_record;
|
|
|
+ const { t } = useTranslation()
|
|
|
+ const [fastDuration, setFastDuration] = useState<number>(0);
|
|
|
+ const [sleepDuration, setSleepDuration] = useState<number>(0);
|
|
|
+
|
|
|
+ // const [fastPickerValue, setFastPickerValue] = useState([0, 0])
|
|
|
+ // const [sleepPickerValue, setSleepPickerValue] = useState([0, 0])
|
|
|
+
|
|
|
+ const limitPickerRef = useRef(null)
|
|
|
+
|
|
|
+ let navigation;
|
|
|
+ if (useNavigation) {
|
|
|
+ navigation = useNavigation()
|
|
|
+ }
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ var fastCount = currentRecord.fast.target_end_time - currentRecord.fast.target_start_time
|
|
|
+ setFastDuration(fastCount)
|
|
|
+
|
|
|
+ var sleepCount = currentRecord.sleep.target_end_time - currentRecord.sleep.target_start_time
|
|
|
+ setSleepDuration(sleepCount)
|
|
|
+ }, [])
|
|
|
+
|
|
|
+
|
|
|
+ function tapStartFast() {
|
|
|
+ if (!user.isLogin) {
|
|
|
+ jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ operateType = 'startFast'
|
|
|
+
|
|
|
+ showPicker()
|
|
|
+ }
|
|
|
+
|
|
|
+ function tapStartSleep() {
|
|
|
+ if (!user.isLogin) {
|
|
|
+ jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (status != 'ONGOING1') {
|
|
|
+ vibrate()
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ operateType = 'startSleep'
|
|
|
+
|
|
|
+ showPicker()
|
|
|
+ }
|
|
|
+
|
|
|
+ function tapEndSleep() {
|
|
|
+ if (!user.isLogin) {
|
|
|
+ jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (status != 'ONGOING2') {
|
|
|
+ vibrate()
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ operateType = 'endSleep'
|
|
|
+
|
|
|
+ showPicker()
|
|
|
+ }
|
|
|
+
|
|
|
+ function tapEndFast() {
|
|
|
+ if (!user.isLogin) {
|
|
|
+ jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (status == 'WAIT_FOR_START') {
|
|
|
+ vibrate()
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ operateType = 'endFast'
|
|
|
+
|
|
|
+ showPicker()
|
|
|
+ }
|
|
|
+
|
|
|
+ function layoutContent() {
|
|
|
+ var limit = global.set_time - 7 * 3600 * 1000 * 24;
|
|
|
+ global.limit = limit
|
|
|
+
|
|
|
+ if (currentRecord.last_real_check_time) {
|
|
|
+ limit = currentRecord.last_real_check_time
|
|
|
+ global.limit = limit
|
|
|
+ //当set_time秒数<=latest_record_time秒数时,最小限制时间戳需+1分钟
|
|
|
+ if (new Date(global.set_time).getSeconds() <= new Date(currentRecord.last_real_check_time).getSeconds() && global.set_time - currentRecord.last_real_check_time > 60000) {
|
|
|
+ limit = limit + 60 * 1000
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var title = getTimePickerTitle(currentRecord, t, operateType == 'endFast')
|
|
|
+ var color = getColor(currentRecord, operateType == 'endFast')
|
|
|
+ return <View className="modal_content">
|
|
|
+ <LimitPickers ref={limitPickerRef} limit={limit} limitDay={8}
|
|
|
+ themeColor={color}
|
|
|
+ title={title}
|
|
|
+ onCancel={hidePicker} onChange={(e) => {
|
|
|
+ pickerConfirm(e)
|
|
|
+ hidePicker()
|
|
|
+ }} />
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ function showPicker() {
|
|
|
+ // setShowPageContainer(true)
|
|
|
+ // return
|
|
|
+ global.scenario = 'FAST_SLEEP'
|
|
|
+ if (global.testInfotimer) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ global.set_time = new Date().getTime()
|
|
|
+ updateNodeInfo()
|
|
|
+ if (!global.isDebug) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // global.testInfotimer = setInterval(() => {
|
|
|
+ // updateNodeInfo()
|
|
|
+
|
|
|
+ // }, 1000)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateNodeInfo() {
|
|
|
+ var node = layoutContent()
|
|
|
+ global.showIndexModal(true, node, null);
|
|
|
+ }
|
|
|
+
|
|
|
+ function hidePicker() {
|
|
|
+ var node = layoutContent()
|
|
|
+ global.showIndexModal(false, node, null);
|
|
|
+ }
|
|
|
+
|
|
|
+ function pickerConfirm(t: number) {
|
|
|
+ hidePicker()
|
|
|
+ var date = new Date(t)
|
|
|
+ var setDate = new Date(global.set_time);
|
|
|
+ date.setMilliseconds(setDate.getMilliseconds());
|
|
|
+ date.setSeconds(setDate.getSeconds());
|
|
|
+
|
|
|
+ t = date.getTime();
|
|
|
+
|
|
|
+ switch (operateType) {
|
|
|
+ case 'startFast':
|
|
|
+ startFast(t, fastDuration).then(res => {
|
|
|
+ global.indexPageRefresh()
|
|
|
+ })
|
|
|
+ break
|
|
|
+ case 'startSleep':
|
|
|
+ startSleep(t, sleepDuration).then(res => {
|
|
|
+ global.indexPageRefresh()
|
|
|
+ })
|
|
|
+ break
|
|
|
+ case 'endSleep':
|
|
|
+ endSleep(t).then(res => {
|
|
|
+ global.indexPageRefresh()
|
|
|
+ })
|
|
|
+ break
|
|
|
+ case 'endFast':
|
|
|
+ endFast(t).then(res => {
|
|
|
+ global.indexPageRefresh()
|
|
|
+ })
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return <View>
|
|
|
+ {
|
|
|
+ status == 'WAIT_FOR_START' ?
|
|
|
+ <View onClick={tapStartFast} className='console_btn'>
|
|
|
+ <Text>{t('feature.track_time_duration.common.start_fast')}</Text>
|
|
|
+ </View> :
|
|
|
+ <View onClick={() => { vibrate() }} className='stage_btn'>
|
|
|
+ <Text style={{ flex: 1 }}>睡前断食</Text>
|
|
|
+ {
|
|
|
+ status == 'ONGOING1' ?
|
|
|
+ <Text>{TimeFormatter.countdown(currentRecord.fast.real_start_time)}</Text> :
|
|
|
+ <Text>{TimeFormatter.durationFormate(currentRecord.fast.real_start_time, currentRecord.sleep.real_start_time)}</Text>
|
|
|
+ }
|
|
|
+
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ (status == 'WAIT_FOR_START' || status == 'ONGOING1') &&
|
|
|
+ <View onClick={tapStartSleep} className={status == 'ONGOING1' ? 'console_btn btn_sleep' : 'console_btn btn_sleep btn_disable'}>
|
|
|
+ {
|
|
|
+ status != 'ONGOING1' && <Image className='lock' src={require('@assets/images/lock.png')} />
|
|
|
+ }
|
|
|
+ <Text>{t('feature.track_time_duration.common.start_sleep')}</Text>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ (status != 'WAIT_FOR_START' && status != 'ONGOING1') &&
|
|
|
+ <View onClick={() => { vibrate() }} className='stage_btn'>
|
|
|
+ <Text style={{ flex: 1 }}>睡眠期间断食</Text>
|
|
|
+ {
|
|
|
+ status == 'ONGOING2' ? <Text>{TimeFormatter.countdown(currentRecord.sleep.real_start_time)}</Text> :
|
|
|
+ <Text>{TimeFormatter.durationFormate(currentRecord.sleep.real_start_time, currentRecord.sleep.real_end_time)}</Text>
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ (status == 'WAIT_FOR_START' || status == 'ONGOING1' || status == 'ONGOING2') &&
|
|
|
+ <View onClick={tapEndSleep} className={status == 'ONGOING2' ? 'console_btn btn_sleep' : 'console_btn btn_sleep btn_disable'}>
|
|
|
+ {
|
|
|
+ status != 'ONGOING2' && <Image className='lock' src={require('@assets/images/lock.png')} />
|
|
|
+ }
|
|
|
+ <Text>{t('feature.track_time_duration.common.end_sleep')}</Text>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ status == 'ONGOING3' &&
|
|
|
+ <View onClick={() => { vibrate() }} className='stage_btn'>
|
|
|
+ <Text style={{ flex: 1 }}>起床后断食</Text>
|
|
|
+ <Text>{TimeFormatter.countdown(currentRecord.sleep.real_end_time)}</Text>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ (status == 'WAIT_FOR_START' || status == 'ONGOING1' || status == 'ONGOING2' || status == 'ONGOING3') &&
|
|
|
+ <View onClick={tapEndFast} className={status == 'ONGOING3' ? 'console_btn' : 'console_btn btn_disable'}>
|
|
|
+ {
|
|
|
+ status == 'WAIT_FOR_START' && <Image className='lock' src={require('@assets/images/lock.png')} />
|
|
|
+ }
|
|
|
+ <Text>{t('feature.track_time_duration.common.end_fast')}</Text>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+}
|
