|
@@ -20,6 +20,7 @@ import { ColorType } from "@/context/themes/color";
|
|
|
import TimelineStage from "./TimelineStage";
|
|
import TimelineStage from "./TimelineStage";
|
|
|
import { jumpPage } from "../hooks/Common";
|
|
import { jumpPage } from "../hooks/Common";
|
|
|
import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
|
|
import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
|
|
|
|
|
+import { rpxToPx } from "@/utils/tools";
|
|
|
// import { sqrt } from 'mathjs'
|
|
// import { sqrt } from 'mathjs'
|
|
|
|
|
|
|
|
let AppState;
|
|
let AppState;
|
|
@@ -28,7 +29,7 @@ if (process.env.TARO_ENV == 'rn') {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
let stageCanvasId = new Date().getTime()
|
|
let stageCanvasId = new Date().getTime()
|
|
|
-export default function RecordFastSleep(props: { data: any, type: string, delSuccess?: Function, index: number }) {
|
|
|
|
|
|
|
+export default function RecordFastSleep(props: { data: any, type: string, delSuccess?: Function, index: any }) {
|
|
|
const [count, setCount] = useState(0)
|
|
const [count, setCount] = useState(0)
|
|
|
const [showDetailModal, setShowDetailModal] = useState(false)
|
|
const [showDetailModal, setShowDetailModal] = useState(false)
|
|
|
const [segmentIndex, setSegmentIndex] = useState(0)
|
|
const [segmentIndex, setSegmentIndex] = useState(0)
|
|
@@ -36,6 +37,7 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
|
|
|
const [multiTimeZone, setMultiTimeZone] = useState(false)
|
|
const [multiTimeZone, setMultiTimeZone] = useState(false)
|
|
|
const [showMore, setShowMore] = useState(false)
|
|
const [showMore, setShowMore] = useState(false)
|
|
|
const [selIndex, setSelIndex] = useState(0)
|
|
const [selIndex, setSelIndex] = useState(0)
|
|
|
|
|
+ const [showMoreModal, setShowMoreModal] = useState(false)
|
|
|
const { t } = useTranslation()
|
|
const { t } = useTranslation()
|
|
|
var canvasId = props.data.id
|
|
var canvasId = props.data.id
|
|
|
const record = props.data;
|
|
const record = props.data;
|
|
@@ -166,6 +168,25 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
|
|
|
// return TimeFormatter.calculateTimeDifference(start, end)
|
|
// return TimeFormatter.calculateTimeDifference(start, end)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ function getStageDuration() {
|
|
|
|
|
+ var start, end;
|
|
|
|
|
+ switch (selIndex) {
|
|
|
|
|
+ case 0:
|
|
|
|
|
+ start = record.fast.real_start_time
|
|
|
|
|
+ end = record.sleep.real_start_time
|
|
|
|
|
+ break
|
|
|
|
|
+ case 1:
|
|
|
|
|
+ start = record.sleep.real_start_time
|
|
|
|
|
+ end = record.sleep.real_end_time
|
|
|
|
|
+ break
|
|
|
|
|
+ case 2:
|
|
|
|
|
+ start = record.sleep.real_end_time
|
|
|
|
|
+ end = record.fast.real_end_time
|
|
|
|
|
+ break
|
|
|
|
|
+ }
|
|
|
|
|
+ return TimeFormatter.durationFormate(start, end)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
function durationArc(start_time: number, end_time: number) {
|
|
function durationArc(start_time: number, end_time: number) {
|
|
|
var duration = (end_time - start_time) / 1000;
|
|
var duration = (end_time - start_time) / 1000;
|
|
|
return duration / (24 * 3600) * 2 * Math.PI;
|
|
return duration / (24 * 3600) * 2 * Math.PI;
|
|
@@ -247,6 +268,9 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function smallRing(canvas_id = props.index) {
|
|
function smallRing(canvas_id = props.index) {
|
|
|
|
|
+ if (canvas_id != props.index) {
|
|
|
|
|
+ debugger
|
|
|
|
|
+ }
|
|
|
if (record.scenario == 'FAST_SLEEP') {
|
|
if (record.scenario == 'FAST_SLEEP') {
|
|
|
var common = getCommon(null, false)
|
|
var common = getCommon(null, false)
|
|
|
common.radius = 28;
|
|
common.radius = 28;
|
|
@@ -333,40 +357,98 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
|
|
|
return recordTime()
|
|
return recordTime()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function tapStage(e,index){
|
|
|
|
|
|
|
+ function tapStage(e, index) {
|
|
|
stageCanvasId = new Date().getTime()
|
|
stageCanvasId = new Date().getTime()
|
|
|
setSelIndex(index);
|
|
setSelIndex(index);
|
|
|
// setCount(pre=>pre+1);
|
|
// setCount(pre=>pre+1);
|
|
|
e.stopPropagation()
|
|
e.stopPropagation()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function moreCircle() {
|
|
|
|
|
- return <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
|
|
|
|
- <View style={{ position: 'relative', zIndex: 1 }}>
|
|
|
|
|
- {
|
|
|
|
|
- bigMoreRing()
|
|
|
|
|
- }
|
|
|
|
|
- <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
|
|
|
|
|
|
|
+ // function moreCircle() {
|
|
|
|
|
+ // return <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
|
|
|
|
+ // <View style={{ position: 'relative', zIndex: 1 }}>
|
|
|
|
|
+ // {
|
|
|
|
|
+ // bigMoreRing()
|
|
|
|
|
+ // }
|
|
|
|
|
+ // <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
|
|
|
|
|
+ // {
|
|
|
|
|
+ // smallRing(123 + props.index)
|
|
|
|
|
+ // }
|
|
|
|
|
+ // </View>
|
|
|
|
|
+ // </View>
|
|
|
|
|
+ // <View style={{ flex: 1, marginLeft: -rpxToPx(46), marginRight: -rpxToPx(46) }}>
|
|
|
|
|
+
|
|
|
|
|
+ // <View className={selIndex == 0 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e, 0) }}>
|
|
|
|
|
+ // <Text className={selIndex == 0 ? "single_check_text_sel" : "single_check_text_nor"}>睡前断食</Text>
|
|
|
|
|
+ // {
|
|
|
|
|
+ // selIndex == 0 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
|
|
|
|
|
+ // }
|
|
|
|
|
+ // </View>
|
|
|
|
|
+ // <View className={selIndex == 1 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e, 1) }}>
|
|
|
|
|
+ // <Text className={selIndex == 1 ? "single_check_text_sel" : "single_check_text_nor"}>睡眠中断食</Text>
|
|
|
|
|
+ // {
|
|
|
|
|
+ // selIndex == 1 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
|
|
|
|
|
+ // }
|
|
|
|
|
+ // </View>
|
|
|
|
|
+ // <View className={selIndex == 2 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e, 2) }}>
|
|
|
|
|
+ // <Text className={selIndex == 2 ? "single_check_text_sel" : "single_check_text_nor"}>起床后断食</Text>
|
|
|
|
|
+ // {
|
|
|
|
|
+ // selIndex == 2 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
|
|
|
|
|
+ // }
|
|
|
|
|
+ // </View>
|
|
|
|
|
+ // </View>
|
|
|
|
|
+ // </View>
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
|
|
+ function moreStage() {
|
|
|
|
|
+ var common = getCommon(null, false)
|
|
|
|
|
+ common.radius = 28;
|
|
|
|
|
+ common.lineWidth = 9;
|
|
|
|
|
+ var bgRing = getBgRing()
|
|
|
|
|
+ var realRing = getReal(record, false, true)
|
|
|
|
|
+ return <View>
|
|
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
|
|
|
|
+ <View style={{ position: 'relative', zIndex: 1 }}>
|
|
|
{
|
|
{
|
|
|
- smallRing(123 + props.index)
|
|
|
|
|
|
|
+ bigMoreRing()
|
|
|
|
|
+ }
|
|
|
|
|
+ <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
|
|
|
|
|
+ {/* {
|
|
|
|
|
+ smallRing(123 + props.index)
|
|
|
|
|
+ } */}
|
|
|
|
|
+ <Rings common={common} bgRing={bgRing} canvasId={'hello'} realRing={realRing} />
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View className="duration_bg">
|
|
|
|
|
+ {
|
|
|
|
|
+ <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
|
|
|
|
|
+ }
|
|
|
|
|
+ {
|
|
|
|
|
+ <Text className="duration_value" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{getStageDuration()}</Text>
|
|
|
|
|
+ }
|
|
|
|
|
+ {
|
|
|
|
|
+ <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
|
|
|
|
|
+ }
|
|
|
|
|
+ {
|
|
|
|
|
+ <Text className="duration_value" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep }}>{getDuration(record.sleep)}</Text>
|
|
|
}
|
|
}
|
|
|
</View>
|
|
</View>
|
|
|
</View>
|
|
</View>
|
|
|
- <View style={{ flex: 1 }}>
|
|
|
|
|
|
|
+ <View style={{ flex: 1, marginLeft: -rpxToPx(46), marginRight: -rpxToPx(46), marginTop: 20 }}>
|
|
|
|
|
|
|
|
- <View className={selIndex == 0 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e,0) }}>
|
|
|
|
|
|
|
+ <View className={selIndex == 0 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e, 0) }}>
|
|
|
<Text className={selIndex == 0 ? "single_check_text_sel" : "single_check_text_nor"}>睡前断食</Text>
|
|
<Text className={selIndex == 0 ? "single_check_text_sel" : "single_check_text_nor"}>睡前断食</Text>
|
|
|
{
|
|
{
|
|
|
selIndex == 0 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
|
|
selIndex == 0 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
|
|
|
}
|
|
}
|
|
|
</View>
|
|
</View>
|
|
|
- <View className={selIndex == 1 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e,1) }}>
|
|
|
|
|
|
|
+ <View className={selIndex == 1 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e, 1) }}>
|
|
|
<Text className={selIndex == 1 ? "single_check_text_sel" : "single_check_text_nor"}>睡眠中断食</Text>
|
|
<Text className={selIndex == 1 ? "single_check_text_sel" : "single_check_text_nor"}>睡眠中断食</Text>
|
|
|
{
|
|
{
|
|
|
selIndex == 1 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
|
|
selIndex == 1 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
|
|
|
}
|
|
}
|
|
|
</View>
|
|
</View>
|
|
|
- <View className={selIndex == 2 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e,2) }}>
|
|
|
|
|
|
|
+ <View className={selIndex == 2 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e, 2) }}>
|
|
|
<Text className={selIndex == 2 ? "single_check_text_sel" : "single_check_text_nor"}>起床后断食</Text>
|
|
<Text className={selIndex == 2 ? "single_check_text_sel" : "single_check_text_nor"}>起床后断食</Text>
|
|
|
{
|
|
{
|
|
|
selIndex == 2 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
|
|
selIndex == 2 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
|
|
@@ -434,15 +516,15 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
|
|
|
|
|
|
|
|
</View>
|
|
</View>
|
|
|
{
|
|
{
|
|
|
- (props.type == 'record' || props.type == 'latest') && record.scenario == 'FAST_SLEEP' &&
|
|
|
|
|
|
|
+ (props.type == 'record' || props.type == 'latest') &&
|
|
|
|
|
+ record.scenario == 'FAST_SLEEP' &&
|
|
|
|
|
+ record.sleep.status == 'COMPLETED' &&
|
|
|
<Text style={{ color: '#fff', marginTop: 20 }} onClick={(e) => {
|
|
<Text style={{ color: '#fff', marginTop: 20 }} onClick={(e) => {
|
|
|
e.stopPropagation()
|
|
e.stopPropagation()
|
|
|
- setShowMore(!showMore)
|
|
|
|
|
|
|
+ setShowMoreModal(true)
|
|
|
|
|
+ // setShowMore(!showMore)
|
|
|
}}>{showMore ? '隐藏更多' : '显示更多'}</Text>
|
|
}}>{showMore ? '隐藏更多' : '显示更多'}</Text>
|
|
|
}
|
|
}
|
|
|
- {
|
|
|
|
|
- showMore && moreCircle()
|
|
|
|
|
- }
|
|
|
|
|
</View>
|
|
</View>
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -459,6 +541,12 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
|
|
|
dismiss={() => setShowDetailModal(false)}
|
|
dismiss={() => setShowDetailModal(false)}
|
|
|
confirm={() => { }} />
|
|
confirm={() => { }} />
|
|
|
}
|
|
}
|
|
|
|
|
+ {
|
|
|
|
|
+ showMoreModal && <Modal children={moreStage()}
|
|
|
|
|
+ modalType={ModalType.center}
|
|
|
|
|
+ dismiss={() => setShowMoreModal(false)}
|
|
|
|
|
+ confirm={() => { }} />
|
|
|
|
|
+ }
|
|
|
</View>
|
|
</View>
|
|
|
</View>
|
|
</View>
|
|
|
}
|
|
}
|