|
@@ -3,6 +3,9 @@ import { View, Text, PickerView, PickerViewColumn, Picker } from "@tarojs/compon
|
|
|
import trackTimeService, { machine } from "@/store/trackTimeMachine"
|
|
import trackTimeService, { machine } from "@/store/trackTimeMachine"
|
|
|
import { useEffect, useState } from "react";
|
|
import { useEffect, useState } from "react";
|
|
|
import { TimeFormatter } from "@/utils/time_format";
|
|
import { TimeFormatter } from "@/utils/time_format";
|
|
|
|
|
+import TimePickers from '@/components/TimePickers'
|
|
|
|
|
+import { useSelector } from "react-redux";
|
|
|
|
|
+import Taro from "@tarojs/taro";
|
|
|
|
|
|
|
|
export default function Component() {
|
|
export default function Component() {
|
|
|
// const [current,send] = useService(machine)
|
|
// const [current,send] = useService(machine)
|
|
@@ -13,30 +16,17 @@ export default function Component() {
|
|
|
const [value, setValue] = useState('');
|
|
const [value, setValue] = useState('');
|
|
|
const [counter, setCounter] = useState(0)
|
|
const [counter, setCounter] = useState(0)
|
|
|
const [timerId, setTimerId] = useState(null)
|
|
const [timerId, setTimerId] = useState(null)
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- const hours: number[] = [];
|
|
|
|
|
|
|
+ const user = useSelector((state: any) => state.user);
|
|
|
|
|
|
|
|
const [isFast, setIsFast] = useState(true);
|
|
const [isFast, setIsFast] = useState(true);
|
|
|
- const [fastValues, setFastValues] = useState<number[]>([15, 0]);
|
|
|
|
|
- const [sleepValues, setSleepValues] = useState<number[]>([7, 0]);
|
|
|
|
|
|
|
+ const [fastValues, setFastValues] = useState<number[]>([0, 0]);
|
|
|
|
|
+ const [sleepValues, setSleepValues] = useState<number[]>([0, 0]);
|
|
|
|
|
+ const [fastStr,setFastStr] = useState('00:00');
|
|
|
|
|
+ const [sleepStr,setSleepStr] = useState('00:00');
|
|
|
|
|
|
|
|
- const handlePickerChange = (e: any) => {
|
|
|
|
|
- const values = e.detail.value;
|
|
|
|
|
- // setSelectedValues(values);
|
|
|
|
|
- isFast ? setFastValues(values) : setSleepValues(values);
|
|
|
|
|
-
|
|
|
|
|
- };
|
|
|
|
|
|
|
+
|
|
|
|
|
|
|
|
|
|
|
|
|
- for (let i = 1; i <= 23; i++) {
|
|
|
|
|
- hours.push(i);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- const minutes: number[] = [];
|
|
|
|
|
- for (let i = 0; i <= 11; i++) {
|
|
|
|
|
- minutes.push(i * 5);
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
getStateDetail();
|
|
getStateDetail();
|
|
@@ -108,6 +98,25 @@ export default function Component() {
|
|
|
setIsFast(false);
|
|
setIsFast(false);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ var checkData = machine.context.checkData;
|
|
|
|
|
+ if (checkData){
|
|
|
|
|
+ var fastTime = TimeFormatter.formateHourMinute((checkData as any).current_record.fast.target_start_time,
|
|
|
|
|
+ (checkData as any).current_record.fast.target_end_time);
|
|
|
|
|
+ var sleepTime = TimeFormatter.formateHourMinute((checkData as any).current_record.sleep.target_start_time,
|
|
|
|
|
+ (checkData as any).current_record.sleep.target_end_time);
|
|
|
|
|
+
|
|
|
|
|
+ setFastValues(fastTime.split(':').map(x => parseInt(x)));
|
|
|
|
|
+ setSleepValues(sleepTime.split(':').map(x => parseInt(x)));
|
|
|
|
|
+ setFastStr(fastTime);
|
|
|
|
|
+ setSleepStr(sleepTime);
|
|
|
|
|
+ console.log(fastTime);
|
|
|
|
|
+ console.log(sleepTime)
|
|
|
|
|
+ console.log(fastValues)
|
|
|
|
|
+ console.log(sleepValues)
|
|
|
|
|
+ console.log('--------------')
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function isMap(obj: any): obj is Map<any, any> {
|
|
function isMap(obj: any): obj is Map<any, any> {
|
|
@@ -115,7 +124,7 @@ export default function Component() {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function startFast(start_time: number) {
|
|
function startFast(start_time: number) {
|
|
|
- const duration = hours[fastValues[0]] * 3600 * 1000 + minutes[fastValues[1]] * 5 * 60 * 1000//8 * 3600 * 1000;
|
|
|
|
|
|
|
+ const duration = fastValues[0] * 3600 * 1000 + fastValues[1] * 5 * 60 * 1000//8 * 3600 * 1000;
|
|
|
const extra = {
|
|
const extra = {
|
|
|
set_time: start_time - 20 * 1000,
|
|
set_time: start_time - 20 * 1000,
|
|
|
confirm_time: start_time + 50 * 1000,
|
|
confirm_time: start_time + 50 * 1000,
|
|
@@ -132,7 +141,7 @@ export default function Component() {
|
|
|
// dispatch(startFast());
|
|
// dispatch(startFast());
|
|
|
}
|
|
}
|
|
|
function startSleep(start_time: number) {
|
|
function startSleep(start_time: number) {
|
|
|
- const duration = 8 * 3600 * 1000;
|
|
|
|
|
|
|
+ const duration = sleepValues[0] * 3600 * 1000 + sleepValues[1] * 5 * 60 * 1000
|
|
|
const extra = {
|
|
const extra = {
|
|
|
set_time: start_time - 20 * 1000,
|
|
set_time: start_time - 20 * 1000,
|
|
|
confirm_time: start_time + 50 * 1000,
|
|
confirm_time: start_time + 50 * 1000,
|
|
@@ -148,9 +157,7 @@ export default function Component() {
|
|
|
});
|
|
});
|
|
|
// dispatch(startSleep());
|
|
// dispatch(startSleep());
|
|
|
}
|
|
}
|
|
|
- function endSleep() {
|
|
|
|
|
-
|
|
|
|
|
- const start_time = new Date().getTime();
|
|
|
|
|
|
|
+ function endSleep(start_time: number) {
|
|
|
// const duration = 8 * 3600 * 1000;
|
|
// const duration = 8 * 3600 * 1000;
|
|
|
const extra = {
|
|
const extra = {
|
|
|
set_time: start_time - 20 * 1000,
|
|
set_time: start_time - 20 * 1000,
|
|
@@ -165,10 +172,7 @@ export default function Component() {
|
|
|
trackTimeService.send({ type: 'END_SLEEP' });
|
|
trackTimeService.send({ type: 'END_SLEEP' });
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
- function endFast() {
|
|
|
|
|
-
|
|
|
|
|
- const start_time = new Date().getTime();
|
|
|
|
|
- // const duration = 8 * 3600 * 1000;
|
|
|
|
|
|
|
+ function endFast(start_time: number) {
|
|
|
const extra = {
|
|
const extra = {
|
|
|
set_time: start_time - 20 * 1000,
|
|
set_time: start_time - 20 * 1000,
|
|
|
confirm_time: start_time + 50 * 1000,
|
|
confirm_time: start_time + 50 * 1000,
|
|
@@ -186,7 +190,7 @@ export default function Component() {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function minTime() {
|
|
function minTime() {
|
|
|
- if (value == 'WAIT_FOR_START') {
|
|
|
|
|
|
|
+ if (value == 'WAIT_FOR_START' || !(machine.context.checkData as any).current_record.fast.real_start_time) {
|
|
|
return '00:00'
|
|
return '00:00'
|
|
|
}
|
|
}
|
|
|
var time = new Date((machine.context.checkData as any).current_record.fast.real_start_time);
|
|
var time = new Date((machine.context.checkData as any).current_record.fast.real_start_time);
|
|
@@ -198,6 +202,36 @@ export default function Component() {
|
|
|
return formatter.format(time);
|
|
return formatter.format(time);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ function sleepEndMinTime(){
|
|
|
|
|
+ if (!(machine.context.checkData as any).current_record.sleep.real_start_time){
|
|
|
|
|
+ return '00:00'
|
|
|
|
|
+ }
|
|
|
|
|
+ var time = new Date((machine.context.checkData as any).current_record.sleep.real_start_time);
|
|
|
|
|
+
|
|
|
|
|
+ const formatter = new Intl.DateTimeFormat('en-US', {
|
|
|
|
|
+ hour: '2-digit',
|
|
|
|
|
+ minute: '2-digit',
|
|
|
|
|
+ });
|
|
|
|
|
+ debugger
|
|
|
|
|
+ return formatter.format(time);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function fastEndMinTime(){
|
|
|
|
|
+ if (value == 'ONGOING'||!(machine.context.checkData as any).current_record.sleep.real_end_time){
|
|
|
|
|
+ return '00:00'
|
|
|
|
|
+ }
|
|
|
|
|
+ var time = new Date((machine.context.checkData as any).current_record.sleep.real_end_time);
|
|
|
|
|
+ if (!time){
|
|
|
|
|
+ return '00:00'
|
|
|
|
|
+ }
|
|
|
|
|
+ const formatter = new Intl.DateTimeFormat('en-US', {
|
|
|
|
|
+ hour: '2-digit',
|
|
|
|
|
+ minute: '2-digit',
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ return formatter.format(time);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
function currentTime() {
|
|
function currentTime() {
|
|
|
var time = new Date();
|
|
var time = new Date();
|
|
|
const formatter = new Intl.DateTimeFormat('en-US', {
|
|
const formatter = new Intl.DateTimeFormat('en-US', {
|
|
@@ -215,15 +249,20 @@ export default function Component() {
|
|
|
<Picker mode="time" onChange={timePickerChange} value={currentTime()} end={currentTime()}><Text style={{ color: '#AAFF00' }}>Start Fast</Text></Picker>
|
|
<Picker mode="time" onChange={timePickerChange} value={currentTime()} end={currentTime()}><Text style={{ color: '#AAFF00' }}>Start Fast</Text></Picker>
|
|
|
}
|
|
}
|
|
|
{
|
|
{
|
|
|
- (value == 'ONGOING'/* ||value == 'ONGOING1' || value == 'ONGOING2'*/ || value == 'ONGOING3') && <Text onClick={endFast}>End Fast</Text>
|
|
|
|
|
|
|
+ (value == 'ONGOING'/* ||value == 'ONGOING1' || value == 'ONGOING2'*/ || value == 'ONGOING3') &&
|
|
|
|
|
+ <Picker mode="time" onChange={timePickerChange} value={currentTime()} start={fastEndMinTime()} end={currentTime()}>
|
|
|
|
|
+ <Text>End Fast</Text>
|
|
|
|
|
+ </Picker>
|
|
|
}
|
|
}
|
|
|
{
|
|
{
|
|
|
- value == 'ONGOING1' && <Picker mode="time" onChange={timePickerChange} value={currentTime()} end={currentTime()}>
|
|
|
|
|
|
|
+ value == 'ONGOING1' && <Picker mode="time" onChange={timePickerChange} value={currentTime()} start={minTime()} end={currentTime()}>
|
|
|
<Text style={{ color: '#00ffff' }}>Start Sleep</Text>
|
|
<Text style={{ color: '#00ffff' }}>Start Sleep</Text>
|
|
|
</Picker>
|
|
</Picker>
|
|
|
}
|
|
}
|
|
|
{
|
|
{
|
|
|
- value == 'ONGOING2' && <Text onClick={endSleep}>End Sleep</Text>
|
|
|
|
|
|
|
+ value == 'ONGOING2' && <Picker mode="time" onChange={timePickerChange} value={currentTime()} start={sleepEndMinTime()} end={currentTime()}>
|
|
|
|
|
+ <Text>End Sleep</Text>
|
|
|
|
|
+ </Picker>
|
|
|
}
|
|
}
|
|
|
</View>
|
|
</View>
|
|
|
}
|
|
}
|
|
@@ -232,8 +271,12 @@ export default function Component() {
|
|
|
return <View>
|
|
return <View>
|
|
|
{
|
|
{
|
|
|
value == 'ONGOING' ?
|
|
value == 'ONGOING' ?
|
|
|
- <Text onClick={endFast}>End Fast</Text> :
|
|
|
|
|
- <Picker mode="time" onChange={timePickerChange} value={currentTime()} end={currentTime()}><Text style={{ color: '#AAFF00' }}>Start Fast</Text></Picker>
|
|
|
|
|
|
|
+ <Picker mode="time" onChange={timePickerChange} value={currentTime()} end={currentTime()}>
|
|
|
|
|
+ <Text>End Fast</Text>
|
|
|
|
|
+ </Picker> :
|
|
|
|
|
+ <Picker mode="time" onChange={timePickerChange} value={currentTime()} end={currentTime()}>
|
|
|
|
|
+ <Text style={{ color: '#AAFF00' }}>Start Fast</Text>
|
|
|
|
|
+ </Picker>
|
|
|
}
|
|
}
|
|
|
</View>
|
|
</View>
|
|
|
}
|
|
}
|
|
@@ -242,8 +285,10 @@ export default function Component() {
|
|
|
return <View>
|
|
return <View>
|
|
|
{
|
|
{
|
|
|
value == 'ONGOING' ?
|
|
value == 'ONGOING' ?
|
|
|
- <Text onClick={endSleep}>End Sleep</Text> :
|
|
|
|
|
- <Picker mode="time" onChange={timePickerChange} value={currentTime()} end={currentTime()}>
|
|
|
|
|
|
|
+ <Picker mode="time" onChange={timePickerChange} value={currentTime()} end={currentTime()}>
|
|
|
|
|
+ <Text >End Sleep</Text>
|
|
|
|
|
+ </Picker> :
|
|
|
|
|
+ <Picker mode="time" onChange={timePickerChange} value={currentTime()} end={currentTime()}>
|
|
|
<Text style={{ color: '#00ffff' }}>Start Sleep</Text></Picker>
|
|
<Text style={{ color: '#00ffff' }}>Start Sleep</Text></Picker>
|
|
|
}
|
|
}
|
|
|
</View>
|
|
</View>
|
|
@@ -256,48 +301,115 @@ export default function Component() {
|
|
|
var dt = new Date();
|
|
var dt = new Date();
|
|
|
dt.setHours(hour);
|
|
dt.setHours(hour);
|
|
|
dt.setMinutes(minute);
|
|
dt.setMinutes(minute);
|
|
|
|
|
+ if (value == 'ONGOING2') {
|
|
|
|
|
+ endSleep(dt.getTime());
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ else if (value == 'ONGOING3') {
|
|
|
|
|
+ endFast(dt.getTime());
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
if (isFast) {
|
|
if (isFast) {
|
|
|
- startFast(dt.getTime())
|
|
|
|
|
|
|
+ if (value == 'ONGOING') {
|
|
|
|
|
+ endFast(dt.getTime());
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+ startFast(dt.getTime())
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
else {
|
|
else {
|
|
|
- startSleep(dt.getTime())
|
|
|
|
|
|
|
+ if (value == 'ONGOING') {
|
|
|
|
|
+ endSleep(dt.getTime());
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+ startSleep(dt.getTime())
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ const handlePickerChange = (e: string) => {
|
|
|
|
|
+ var [hour, minute] = e.split(':').map(x => parseInt(x))
|
|
|
|
|
+ isFast ? setFastValues([hour, minute]) : setSleepValues([hour, minute]);
|
|
|
|
|
+ debugger
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ function login(){
|
|
|
|
|
+ Taro.navigateTo({
|
|
|
|
|
+ url: '/pages/ChooseAuth'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (!user.isLogin) {
|
|
|
|
|
+ return <View style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }}>
|
|
|
|
|
+ <TimePickers time={isFast ? fastStr : sleepStr} content="" change={handlePickerChange} isPickerView={true}/>
|
|
|
|
|
+ {/* <PickerView
|
|
|
|
|
+
|
|
|
|
|
+ value={isFast ? fastValues : sleepValues}
|
|
|
|
|
+ onChange={handlePickerChange}
|
|
|
|
|
+ indicatorStyle='height: 50px;' style='width: 100%; height: 100px;'>
|
|
|
|
|
+ <PickerViewColumn>
|
|
|
|
|
+ {hours.map(item => {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}小时</View>
|
|
|
|
|
+ );
|
|
|
|
|
+ })}
|
|
|
|
|
+ </PickerViewColumn>
|
|
|
|
|
+ <PickerViewColumn>
|
|
|
|
|
+ {minutes.map(item => {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}分钟</View>
|
|
|
|
|
+ );
|
|
|
|
|
+ })}
|
|
|
|
|
+ </PickerViewColumn>
|
|
|
|
|
+ </PickerView> */}
|
|
|
|
|
+ <Text style={{ color: '#AAFF00' }} onClick={login}>Start Fast</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ }
|
|
|
return (
|
|
return (
|
|
|
<View style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }}>
|
|
<View style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }}>
|
|
|
{
|
|
{
|
|
|
- (value == 'ONGOING1' || value == 'WAIT_FOR_START') &&
|
|
|
|
|
- <PickerView
|
|
|
|
|
-
|
|
|
|
|
- value={isFast ? fastValues : sleepValues}
|
|
|
|
|
- onChange={handlePickerChange}
|
|
|
|
|
- indicatorStyle='height: 50px;' style='width: 100%; height: 100px;'>
|
|
|
|
|
- <PickerViewColumn>
|
|
|
|
|
- {hours.map(item => {
|
|
|
|
|
- return (
|
|
|
|
|
- <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}小时</View>
|
|
|
|
|
- );
|
|
|
|
|
- })}
|
|
|
|
|
- </PickerViewColumn>
|
|
|
|
|
- <PickerViewColumn>
|
|
|
|
|
- {minutes.map(item => {
|
|
|
|
|
- return (
|
|
|
|
|
- <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}分钟</View>
|
|
|
|
|
- );
|
|
|
|
|
- })}
|
|
|
|
|
- </PickerViewColumn>
|
|
|
|
|
- </PickerView>
|
|
|
|
|
|
|
+ value == 'ONGOING' && <View>
|
|
|
|
|
+ <Text>{(machine.context.checkData as any).current_record.scenario=='FAST'?
|
|
|
|
|
+ TimeFormatter.countdown((machine.context.checkData as any).current_record.fast.target_end_time):
|
|
|
|
|
+ TimeFormatter.countdown((machine.context.checkData as any).current_record.sleep.target_end_time)}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ }
|
|
|
|
|
+ {
|
|
|
|
|
+ (value == 'ONGOING1' || value == 'WAIT_FOR_START') &&
|
|
|
|
|
+ <TimePickers time={isFast ? fastStr : sleepStr} content="" change={handlePickerChange} isPickerView={true}/>
|
|
|
|
|
+ // <PickerView
|
|
|
|
|
+
|
|
|
|
|
+ // value={isFast ? fastValues : sleepValues}
|
|
|
|
|
+ // onChange={handlePickerChange}
|
|
|
|
|
+ // indicatorStyle='height: 50px;' style='width: 100%; height: 100px;'>
|
|
|
|
|
+ // <PickerViewColumn>
|
|
|
|
|
+ // {hours.map(item => {
|
|
|
|
|
+ // return (
|
|
|
|
|
+ // <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}小时</View>
|
|
|
|
|
+ // );
|
|
|
|
|
+ // })}
|
|
|
|
|
+ // </PickerViewColumn>
|
|
|
|
|
+ // <PickerViewColumn>
|
|
|
|
|
+ // {minutes.map(item => {
|
|
|
|
|
+ // return (
|
|
|
|
|
+ // <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}分钟</View>
|
|
|
|
|
+ // );
|
|
|
|
|
+ // })}
|
|
|
|
|
+ // </PickerViewColumn>
|
|
|
|
|
+ // </PickerView>
|
|
|
}
|
|
}
|
|
|
{
|
|
{
|
|
|
machine.context.checkData && value == 'ONGOING2' && <View>
|
|
machine.context.checkData && value == 'ONGOING2' && <View>
|
|
|
- <Text>{TimeFormatter.formateTimeNow((machine.context.checkData as any).current_record.sleep.target_end_time)}</Text>
|
|
|
|
|
|
|
+ <Text>{TimeFormatter.countdown((machine.context.checkData as any).current_record.sleep.target_end_time)}</Text>
|
|
|
</View>
|
|
</View>
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
{
|
|
{
|
|
|
machine.context.checkData && value == 'ONGOING3' && <View>
|
|
machine.context.checkData && value == 'ONGOING3' && <View>
|
|
|
- <Text>{TimeFormatter.formateTimeNow((machine.context.checkData as any).current_record.fast.target_end_time)}</Text>
|
|
|
|
|
|
|
+ <Text>{TimeFormatter.countdown((machine.context.checkData as any).current_record.fast.target_end_time)}</Text>
|
|
|
</View>
|
|
</View>
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -312,6 +424,7 @@ export default function Component() {
|
|
|
key === 'SLEEP' && sleepBtns()
|
|
key === 'SLEEP' && sleepBtns()
|
|
|
}
|
|
}
|
|
|
</View>
|
|
</View>
|
|
|
|
|
+ {/* <TimePickers time="00:10"/> */}
|
|
|
</View>
|
|
</View>
|
|
|
)
|
|
)
|
|
|
}
|
|
}
|