|
|
@@ -0,0 +1,636 @@
|
|
|
+import { View, Text, PageContainer, Image } from '@tarojs/components'
|
|
|
+import './CircadianDetailPopup.scss'
|
|
|
+import { useEffect, useRef, useState } from 'react'
|
|
|
+import TimelineFastSleep from './TimelineFastSleep'
|
|
|
+import { RealRing } from "@/features/trackTimeDuration/components/Rings";
|
|
|
+import Rings from "./Rings";
|
|
|
+import { getBgRing, getCommon } from '../hooks/RingData';
|
|
|
+import { ColorType } from '@/context/themes/color';
|
|
|
+import { useTranslation } from 'react-i18next';
|
|
|
+import { TimeFormatter } from '@/utils/time_format';
|
|
|
+import { rpxToPx } from '@/utils/tools';
|
|
|
+import { useSelector } from 'react-redux';
|
|
|
+import { durationDatas, durationIndex, getColor, getDurationTitle } from '../hooks/Console';
|
|
|
+import Modal from '@/components/layout/Modal.weapp';
|
|
|
+import { updateRecord } from '@/services/trackTimeDuration';
|
|
|
+import PickerViews from '@/components/input/PickerViews';
|
|
|
+import Taro from '@tarojs/taro';
|
|
|
+import { IconMinus, IconPlus } from '@/components/basic/Icons';
|
|
|
+
|
|
|
+export default function CircadianDetailPopup(props: { record: any, schedule?: any, onClose: Function }) {
|
|
|
+ const [tabIndex, setTabIndex] = useState(0)
|
|
|
+ const [diffTimeZone, setDiffTimeZone] = useState(false)
|
|
|
+ const [multiTimeZone, setMultiTimeZone] = useState(false)
|
|
|
+ const [detail, setDetail] = useState(JSON.parse(JSON.stringify(props.record)))
|
|
|
+ const [showDurationPicker, setShowDurationPicker] = useState(false)
|
|
|
+ const [fastPickerValue, setFastPickerValue] = useState([0, 0])
|
|
|
+ const [sleepPickerValue, setSleepPickerValue] = useState([0, 0])
|
|
|
+ const [showEditPicker, setShowEditPicker] = useState(false)
|
|
|
+ const [isFast, setIsFast] = useState(true)
|
|
|
+ const durationPickerRef = useRef(null)
|
|
|
+ const common = useSelector((state: any) => state.common);
|
|
|
+ const { t } = useTranslation()
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ checkTimezone()
|
|
|
+ // var current_record = props.record
|
|
|
+ if (detail.fast)
|
|
|
+ setFastPickerValue(durationIndex(detail.fast.target_start_time, detail.fast.target_end_time, common))
|
|
|
+ if (detail.sleep)
|
|
|
+ setSleepPickerValue(durationIndex(detail.sleep.target_start_time, detail.sleep.target_end_time, common))
|
|
|
+
|
|
|
+ }, [detail])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ setDetail(JSON.parse(JSON.stringify(props.record)))
|
|
|
+ }, [props.record])
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function checkTimezone() {
|
|
|
+ var split = new Date().toString().split(' ');
|
|
|
+ var currentTZ = split[split.length - 2];
|
|
|
+ var isDiff = false;
|
|
|
+ var isMulti = false;
|
|
|
+ var tempTZ = '';
|
|
|
+ if (props.record.fast) {
|
|
|
+ if (props.record.fast.real_start_time_zone) {
|
|
|
+ tempTZ = props.record.fast.real_start_time_zone
|
|
|
+ if (props.record.fast.real_start_time_zone != currentTZ) {
|
|
|
+ isDiff = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (props.record.fast.real_end_time_zone) {
|
|
|
+ if (tempTZ != props.record.fast.real_end_time_zone) {
|
|
|
+ isMulti = true
|
|
|
+ }
|
|
|
+ if (props.record.fast.real_end_time_zone != currentTZ) {
|
|
|
+ isDiff = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if (props.record.sleep) {
|
|
|
+ if (props.record.sleep.real_start_time_zone) {
|
|
|
+ if (tempTZ == '') {
|
|
|
+ tempTZ = props.record.sleep.real_start_time_zone
|
|
|
+ }
|
|
|
+ else if (tempTZ != props.record.sleep.real_start_time_zone) {
|
|
|
+ isMulti = true
|
|
|
+ }
|
|
|
+ if (props.record.sleep.real_start_time_zone != currentTZ) {
|
|
|
+ isDiff = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (props.record.sleep.real_end_time_zone) {
|
|
|
+ if (tempTZ != props.record.sleep.real_end_time_zone) {
|
|
|
+ isMulti = true
|
|
|
+ }
|
|
|
+ if (props.record.sleep.real_end_time_zone != currentTZ) {
|
|
|
+ isDiff = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ setDiffTimeZone(isDiff)
|
|
|
+ setMultiTimeZone(isMulti)
|
|
|
+ }
|
|
|
+
|
|
|
+ function getTitle() {
|
|
|
+ if (props.record.status == 'COMPLETED') {
|
|
|
+ return 'Thursday'
|
|
|
+ }
|
|
|
+ return 'Schedule'
|
|
|
+ }
|
|
|
+
|
|
|
+ function getBottomText() {
|
|
|
+ if (props.record.status == 'WAIT_FOR_START') {
|
|
|
+ return 'I\'m ready'
|
|
|
+ }
|
|
|
+ if (props.record.status == 'COMPLETED') {
|
|
|
+ return 'Got it'
|
|
|
+ }
|
|
|
+ return 'Okay'
|
|
|
+ }
|
|
|
+ const startArc = (time: number) => {
|
|
|
+ var date = new Date(time);
|
|
|
+ var hour = date.getHours();
|
|
|
+ var minute = date.getMinutes();
|
|
|
+ var second = date.getSeconds();
|
|
|
+ return (hour * 3600 + minute * 60 + second) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
|
|
|
+ }
|
|
|
+
|
|
|
+ function durationArc(start_time: number, end_time: number) {
|
|
|
+ var duration = (end_time - start_time) / 1000;
|
|
|
+ return duration / (24 * 3600) * 2 * Math.PI;
|
|
|
+ }
|
|
|
+
|
|
|
+ function getStageDuration(index) {
|
|
|
+ var start, end;
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ start = props.record.fast.real_start_time
|
|
|
+ end = props.record.sleep.real_start_time
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ start = props.record.sleep.real_start_time
|
|
|
+ end = props.record.sleep.real_end_time
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ start = props.record.sleep.real_end_time
|
|
|
+ end = props.record.fast.real_end_time
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ start = props.record.fast.real_start_time
|
|
|
+ end = props.record.fast.real_end_time
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ if (props.record.sleep.status == 'NOT_STARTED') {
|
|
|
+ return t('feature.track_time_duration.stage.not_started')
|
|
|
+ }
|
|
|
+ else if (props.record.sleep.status == 'NOT_COMPLETED') {
|
|
|
+ return t('feature.track_time_duration.stage.not_completed')
|
|
|
+ }
|
|
|
+ start = props.record.sleep.real_start_time
|
|
|
+ end = props.record.sleep.real_end_time
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return TimeFormatter.durationFormate(start, end)
|
|
|
+ }
|
|
|
+
|
|
|
+ function completedOverView() {
|
|
|
+ var bgRing = getBgRing()
|
|
|
+ var common = getCommon(null, false)
|
|
|
+ common.radius = 42;
|
|
|
+ common.lineWidth = 9;
|
|
|
+
|
|
|
+ var fastRing: RealRing = null
|
|
|
+ if (props.record.fast) {
|
|
|
+ fastRing = {
|
|
|
+ color: global.fastColor ? global.fastColor : ColorType.fast,
|
|
|
+ startArc: startArc(props.record.fast.real_start_time),
|
|
|
+ durationArc: durationArc(props.record.fast.real_start_time, props.record.fast.real_end_time)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var sleepRing: RealRing = null
|
|
|
+ if (props.record.sleep && props.record.sleep.status == 'COMPLETED') {
|
|
|
+ sleepRing = {
|
|
|
+ color: global.sleepColor ? global.sleepColor : ColorType.sleep,
|
|
|
+ startArc: startArc(props.record.sleep.real_start_time),
|
|
|
+ durationArc: durationArc(props.record.sleep.real_start_time, props.record.sleep.real_end_time)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return <View>
|
|
|
+ {
|
|
|
+ props.record.fast && <View className='pop_ring_bg'>
|
|
|
+ <Rings common={common} bgRing={bgRing} canvasId={'pop_fast_ring'} realRing={fastRing} />
|
|
|
+ <View className="pop_duration_bg">
|
|
|
+ <Text className="pop_duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
|
|
|
+ <Text className="pop_duration_value" style={{ color: ColorType.fast }}>{getStageDuration(3)}</Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ props.record.sleep && <View className='pop_ring_bg'>
|
|
|
+ <Rings common={common} bgRing={bgRing} canvasId={'pop_sleep_ring'} realRing={sleepRing} />
|
|
|
+ <View className="pop_duration_bg">
|
|
|
+ <Text className="pop_duration_title">{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
|
|
|
+ <Text className="pop_duration_value" style={{ color: ColorType.sleep }}>{getStageDuration(4)}</Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ function tapDuration(isFast: boolean) {
|
|
|
+ if (isFast) {
|
|
|
+ setIsFast(true)
|
|
|
+ if (props.record.status == 'WAIT_FOR_START') {
|
|
|
+ setShowDurationPicker(true)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ setShowEditPicker(true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ setIsFast(false)
|
|
|
+ if (props.record.status == 'WAIT_FOR_START') {
|
|
|
+ Taro.showToast({
|
|
|
+ title: t('feature.track_time_duration.common.start_fasting_first'),
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (props.record.status == 'WAIT_FOR_START' || props.record.status == 'ONGOING1') {
|
|
|
+ setShowDurationPicker(true)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ setShowEditPicker(true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function tapMinus(isFast: boolean) {
|
|
|
+ if (isFast) {
|
|
|
+ var fastDuration = detail.fast.target_end_time - detail.fast.target_start_time
|
|
|
+ if (fastDuration == 3600000) {
|
|
|
+ Taro.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: 'feature.common.toast.min_value'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var count = fastDuration - common.duration.step * 60 * 1000
|
|
|
+ count = count < 3600000 ? 3600000 : count
|
|
|
+
|
|
|
+ detail.fast.target_end_time = detail.fast.target_start_time + count;
|
|
|
+
|
|
|
+ setFastPickerValue(durationIndex(detail.fast.target_start_time, detail.fast.target_end_time, common))
|
|
|
+
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (props.record.status == 'WAIT_FOR_START') {
|
|
|
+ Taro.showToast({
|
|
|
+ title: t('feature.track_time_duration.common.start_fasting_first'),
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var sleepDuration = detail.sleep.target_end_time - detail.sleep.target_start_time
|
|
|
+ if (sleepDuration == 3600000) {
|
|
|
+ Taro.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: 'feature.common.toast.min_value'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var count = sleepDuration - common.duration.step * 60 * 1000
|
|
|
+ count = count < 3600000 ? 3600000 : count
|
|
|
+
|
|
|
+ detail.sleep.target_end_time = detail.sleep.target_start_time + count;
|
|
|
+ setSleepPickerValue(durationIndex(detail.sleep.target_start_time, detail.sleep.target_end_time, common))
|
|
|
+ }
|
|
|
+ setDetail(JSON.parse(JSON.stringify(detail)))
|
|
|
+ }
|
|
|
+
|
|
|
+ function tapPlus(isFast: boolean) {
|
|
|
+ if (isFast) {
|
|
|
+ var fastDuration = detail.fast.target_end_time - detail.fast.target_start_time
|
|
|
+ if (fastDuration == 23 * 3600000) {
|
|
|
+ Taro.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: 'feature.common.toast.max_value'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var count = fastDuration + common.duration.step * 60 * 1000
|
|
|
+ count = count > 23 * 3600000 ? 23 * 3600000 : count
|
|
|
+
|
|
|
+ detail.fast.target_end_time = detail.fast.target_start_time + count;
|
|
|
+
|
|
|
+ setFastPickerValue(durationIndex(detail.fast.target_start_time, detail.fast.target_end_time, common))
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (props.record.status == 'WAIT_FOR_START') {
|
|
|
+ Taro.showToast({
|
|
|
+ title: t('feature.track_time_duration.common.start_fasting_first'),
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var sleepDuration = detail.sleep.target_end_time - detail.sleep.target_start_time
|
|
|
+ if (sleepDuration == 23 * 3600000) {
|
|
|
+ Taro.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: 'feature.common.toast.max_value'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var count = sleepDuration + common.duration.step * 60 * 1000
|
|
|
+
|
|
|
+ count = count > 23 * 3600000 ? 23 * 3600000 : count
|
|
|
+
|
|
|
+ detail.sleep.target_end_time = detail.sleep.target_start_time + count;
|
|
|
+ setSleepPickerValue(durationIndex(detail.sleep.target_start_time, detail.sleep.target_end_time, common))
|
|
|
+ }
|
|
|
+ setDetail(JSON.parse(JSON.stringify(detail)))
|
|
|
+ }
|
|
|
+
|
|
|
+ function sleepRealDuration() {
|
|
|
+ return getStageDuration(4)
|
|
|
+ }
|
|
|
+
|
|
|
+ function fastOverview() {
|
|
|
+ if (props.record.fast.status == 'WAIT_FOR_START') {
|
|
|
+ return <View className='pop_ring_bg pop_overview_bg'>
|
|
|
+ <Text className='pop_duration_title'>{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
|
|
|
+ <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
|
|
|
+ <Text onClick={() => tapDuration(true)} className='pop_duration_txt' style={{ color: ColorType.fast }}>{TimeFormatter.durationFormate(detail.fast.target_start_time, detail.fast.target_end_time)}</Text>
|
|
|
+ <View onClick={() => tapMinus(true)} className='minus' style={{ backgroundColor: ColorType.fast, opacity: 0.6 }}><IconMinus color='#090909'/></View>
|
|
|
+ <View onClick={() => tapPlus(true)} className='plus' style={{ backgroundColor: ColorType.fast }}><IconPlus color='#090909'/></View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ else if (props.record.status != 'COMPLETED') {
|
|
|
+ return <View className='pop_ring_bg pop_overview_bg'>
|
|
|
+ <Text className='pop_duration_title'>{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
|
|
|
+ <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
|
|
|
+ <Text onClick={() => tapDuration(true)} className='pop_duration_txt'>{TimeFormatter.durationFormate(detail.fast.target_start_time, detail.fast.target_end_time)}</Text>
|
|
|
+ <Image onClick={() => tapDuration(true)} className="arrow2" src={require('@/assets/images/arrow3.png')} />
|
|
|
+ </View>
|
|
|
+ <View style={{ marginTop: rpxToPx(20), display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
|
|
+ <View className='countdown_time_bg'>
|
|
|
+ <Text className='title'>{t('feature.track_time_duration.console.countup')}</Text>
|
|
|
+ <Text className='value' style={{ color: ColorType.fast }}>{TimeFormatter.formateTimeNow(props.record.fast.real_start_time)}</Text>
|
|
|
+ </View>
|
|
|
+ <View className='countdown_time_bg'>
|
|
|
+ {
|
|
|
+ props.record.fast.target_end_time < new Date().getTime() ? <Text className='title'>{t('feature.track_time_duration.console.timeout')}</Text> :
|
|
|
+ <Text className='title'>{t('feature.track_time_duration.console.countdown_not_due')}</Text>
|
|
|
+ }
|
|
|
+
|
|
|
+ {
|
|
|
+ props.record.fast.target_end_time < new Date().getTime() ?
|
|
|
+ <Text className='value' style={{ color: ColorType.alert }}>{TimeFormatter.countdown(props.record.fast.target_end_time)}</Text> :
|
|
|
+ <Text className='value' style={{ color: ColorType.fast, opacity: 0.6 }}>{TimeFormatter.countdown(props.record.fast.target_end_time)}</Text>
|
|
|
+ }
|
|
|
+
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function sleepOverview() {
|
|
|
+ if (props.record.sleep.status == 'WAIT_FOR_START') {
|
|
|
+ return <View className='pop_ring_bg pop_overview_bg'>
|
|
|
+ <Text className='pop_duration_title'>{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
|
|
|
+ <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
|
|
|
+ <Text onClick={() => tapDuration(false)} className='pop_duration_txt' style={{ color: ColorType.sleep }}>{TimeFormatter.durationFormate(detail.sleep.target_start_time, detail.sleep.target_end_time)}</Text>
|
|
|
+ <View onClick={() => tapMinus(false)} className='minus' style={{ backgroundColor: ColorType.sleep, opacity: 0.6 }}><IconMinus color='#090909'/></View>
|
|
|
+ <View onClick={() => tapPlus(false)} className='plus' style={{ backgroundColor: ColorType.sleep }}><IconPlus color='#090909'/></View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ else if (props.record.sleep.status == 'WAIT_FOR_END') {
|
|
|
+ return <View className='pop_ring_bg pop_overview_bg'>
|
|
|
+ <Text className='pop_duration_title'>{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
|
|
|
+ <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
|
|
|
+ <Text onClick={() => tapDuration(false)} className='pop_duration_txt'>{TimeFormatter.durationFormate(detail.sleep.target_start_time, detail.sleep.target_end_time)}</Text>
|
|
|
+ <Image onClick={() => tapDuration(false)} className="arrow2" src={require('@/assets/images/arrow3.png')} />
|
|
|
+ </View>
|
|
|
+ <View style={{ marginTop: rpxToPx(20), display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
|
|
+ <View className='countdown_time_bg'>
|
|
|
+ <Text className='title'>{t('feature.track_time_duration.console.countup')}</Text>
|
|
|
+ <Text className='value' style={{ color: ColorType.sleep }}>{TimeFormatter.formateTimeNow(props.record.sleep.real_start_time)}</Text>
|
|
|
+ </View>
|
|
|
+ <View className='countdown_time_bg'>
|
|
|
+ {
|
|
|
+ props.record.sleep.target_end_time < new Date().getTime() ? <Text className='title'>{t('feature.track_time_duration.console.timeout')}</Text> :
|
|
|
+ <Text className='title'>{t('feature.track_time_duration.console.countdown_not_due')}</Text>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ props.record.sleep.target_end_time < new Date().getTime() ?
|
|
|
+ <Text className='value' style={{ color: ColorType.alert }}>{TimeFormatter.countdown(props.record.sleep.target_end_time)}</Text> :
|
|
|
+ <Text className='value' style={{ color: ColorType.sleep, opacity: 0.6 }}>{TimeFormatter.countdown(props.record.sleep.target_end_time)}</Text>
|
|
|
+ }
|
|
|
+
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return <View className='pop_ring_bg pop_overview_bg'>
|
|
|
+ <Text className='pop_duration_title'>{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
|
|
|
+ <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
|
|
|
+ <Text className='pop_duration_txt' style={{ color: ColorType.sleep }}>{sleepRealDuration()}</Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function overview() {
|
|
|
+ if (props.record.status == 'COMPLETED') {
|
|
|
+ return completedOverView()
|
|
|
+ }
|
|
|
+ return <View>
|
|
|
+ {
|
|
|
+ props.record.fast && fastOverview()
|
|
|
+ }
|
|
|
+ {
|
|
|
+ props.record.sleep && sleepOverview()
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ function stage() {
|
|
|
+ var bgRing = getBgRing()
|
|
|
+ var common = getCommon(null, false)
|
|
|
+ common.radius = 42;
|
|
|
+ common.lineWidth = 9;
|
|
|
+
|
|
|
+ const preRing: RealRing = {
|
|
|
+ color: global.fastColor ? global.fastColor : ColorType.fast,
|
|
|
+ startArc: startArc(props.record.fast.real_start_time),
|
|
|
+ durationArc: durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
|
|
|
+ }
|
|
|
+ const sleepRing: RealRing = {
|
|
|
+ color: global.sleepColor ? global.sleepColor : ColorType.sleep,
|
|
|
+ startArc: startArc(props.record.sleep.real_start_time),
|
|
|
+ durationArc: durationArc(props.record.sleep.real_start_time, props.record.sleep.real_end_time)
|
|
|
+ }
|
|
|
+ const wakeRing: RealRing = {
|
|
|
+ color: global.fastColor ? global.fastColor : ColorType.fast,
|
|
|
+ startArc: startArc(props.record.sleep.real_end_time),
|
|
|
+ durationArc: durationArc(props.record.sleep.real_end_time, props.record.fast.real_end_time)
|
|
|
+ }
|
|
|
+ return <View>
|
|
|
+ <View className='pop_ring_bg'>
|
|
|
+ <Rings common={common} bgRing={bgRing} canvasId={'pre_sleep_ring'} realRing={preRing} />
|
|
|
+ <View className="pop_duration_bg">
|
|
|
+ <Text className="pop_duration_title">{t('feature.track_time_duration.stage.a')}</Text>
|
|
|
+ <Text className="pop_duration_value" style={{ color: ColorType.fast }}>{getStageDuration(0)}</Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className='pop_ring_bg'>
|
|
|
+ <Rings common={common} bgRing={bgRing} canvasId={'sleeping_ring'} realRing={sleepRing} />
|
|
|
+ <View className="pop_duration_bg">
|
|
|
+ <Text className="pop_duration_title">{t('feature.track_time_duration.stage.b')}</Text>
|
|
|
+ <Text className="pop_duration_value" style={{ color: ColorType.sleep }}>{getStageDuration(1)}</Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className='pop_ring_bg'>
|
|
|
+ <Rings common={common} bgRing={bgRing} canvasId={'later_sleep_ring'} realRing={wakeRing} />
|
|
|
+ <View className="pop_duration_bg">
|
|
|
+ <Text className="pop_duration_title">{t('feature.track_time_duration.stage.c')}</Text>
|
|
|
+ <Text className="pop_duration_value" style={{ color: ColorType.fast }}>{getStageDuration(2)}</Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ function events() {
|
|
|
+ return <TimelineFastSleep
|
|
|
+ data={props.record}
|
|
|
+ first_real_check_time={props.record.first_real_check_time ? props.record.first_real_check_time : 0}
|
|
|
+ diffTimeZone={diffTimeZone} multiTimeZone={multiTimeZone} />
|
|
|
+ }
|
|
|
+
|
|
|
+ function durationPickerContent() {
|
|
|
+ var color = getColor(props.record)
|
|
|
+ var title = getDurationTitle(props.record, t)
|
|
|
+ return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
|
|
|
+
|
|
|
+
|
|
|
+ <PickerViews ref={durationPickerRef}
|
|
|
+ onChange={durationChange}
|
|
|
+ items={durationDatas(common)}
|
|
|
+ value={isFast ? fastPickerValue : sleepPickerValue}
|
|
|
+ themeColor={color}
|
|
|
+ title={title}
|
|
|
+ showBtns={true}
|
|
|
+ onCancel={() => {
|
|
|
+ setShowDurationPicker(false)
|
|
|
+ }} />
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ function editPickerContent() {
|
|
|
+ return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
|
|
|
+ <PickerViews ref={durationPickerRef}
|
|
|
+ onChange={durationChange}
|
|
|
+ items={durationDatas(common)}
|
|
|
+ value={isFast ? fastPickerValue : sleepPickerValue}
|
|
|
+ themeColor={isFast ? ColorType.fast : ColorType.sleep}
|
|
|
+ title={isFast ? t('feature.track_time_duration.action_sheet.edit_fasting_goal') :
|
|
|
+ t('feature.track_time_duration.action_sheet.edit_sleeping_goal')}
|
|
|
+ showBtns={true}
|
|
|
+ onCancel={() => {
|
|
|
+ setShowEditPicker(false)
|
|
|
+ }} />
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ function durationChange(e) {
|
|
|
+ // debugger
|
|
|
+ var count = (e[0] + common.duration.min) * 60 + e[1] * common.duration.step
|
|
|
+ // var count = (e[0] + 1) * 60 + e[1] * 5
|
|
|
+ if (showDurationPicker) {
|
|
|
+ // global.changeTargetDuration(count, isFast)
|
|
|
+ if (isFast) {
|
|
|
+ detail.fast.target_end_time = detail.fast.target_start_time + count * 60 * 1000
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ detail.sleep.target_end_time = detail.sleep.target_start_time + count * 60 * 1000
|
|
|
+ }
|
|
|
+ setDetail(JSON.parse(JSON.stringify(detail)))
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ var params: any = {}
|
|
|
+ if (isFast) {
|
|
|
+ params = {
|
|
|
+ fast: {
|
|
|
+ target_duration: count * 60 * 1000
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ params = {
|
|
|
+ sleep: {
|
|
|
+ target_duration: count * 60 * 1000
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ updateRecord({
|
|
|
+ ...params
|
|
|
+ }, props.record.id).then(res => {
|
|
|
+ global.indexPageRefresh()
|
|
|
+ }).catch(e => {
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ setShowDurationPicker(false)
|
|
|
+ setShowEditPicker(false)
|
|
|
+ }
|
|
|
+
|
|
|
+ function modalContent() {
|
|
|
+ if (showDurationPicker || showEditPicker) {
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ return <Modal
|
|
|
+ testInfo={null}
|
|
|
+ dismiss={() => {
|
|
|
+ setShowDurationPicker(false)
|
|
|
+ setShowEditPicker(false)
|
|
|
+ }}
|
|
|
+ confirm={() => { }}>
|
|
|
+ {
|
|
|
+ showDurationPicker ? durationPickerContent() : editPickerContent()
|
|
|
+ }
|
|
|
+ </Modal>
|
|
|
+ }
|
|
|
+ else if (process.env.TARO_ENV == 'rn') {
|
|
|
+ return <PageContainer style={{ backgroundColor: '#1c1c1c' }}
|
|
|
+ // overlayStyle='background-color:rgba(0,0,0,0.9)'
|
|
|
+ // custom-style='background-color:#1c1c1c'
|
|
|
+ overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
|
|
|
+ customStyle={{ backgroundColor: '#1c1c1c' }}
|
|
|
+ closeOnSlideDown={false}
|
|
|
+ onBeforeEnter={() => {
|
|
|
+
|
|
|
+ }}
|
|
|
+ onBeforeLeave={() => {
|
|
|
+ }}
|
|
|
+ onClick={() => { alert('b') }}
|
|
|
+ onClickOverlay={() => { alert('a') }}
|
|
|
+ onAfterLeave={() => { setShowDurationPicker(false); setShowEditPicker(false) }}
|
|
|
+ show={showDurationPicker} round={true} overlay={true} position='bottom'
|
|
|
+ >
|
|
|
+ {
|
|
|
+ showDurationPicker ? durationPickerContent() : editPickerContent()
|
|
|
+ }
|
|
|
+ </PageContainer>
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return <View />
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ return <View className='detail_container'>
|
|
|
+ <Text className='detail_popup_title'>{getTitle()}<Text className='detail_popup_subttitle'> dddd</Text></Text>
|
|
|
+ <View className='detail_tabbar'>
|
|
|
+ <View onClick={() => { setTabIndex(0) }} className={tabIndex == 0 ? 'detail_tabitem_sel' : 'detail_tabitem_nor'}>Overview</View>
|
|
|
+ {
|
|
|
+ props.record.status == 'COMPLETED' &&
|
|
|
+ (props.record.sleep && props.record.sleep.status == 'COMPLETED') &&
|
|
|
+ props.record.scenario == 'FAST_SLEEP' &&
|
|
|
+ <View onClick={() => { setTabIndex(1) }} className={tabIndex == 1 ? 'detail_tabitem_sel' : 'detail_tabitem_nor'}>Stage</View>
|
|
|
+ }
|
|
|
+ <View onClick={() => { setTabIndex(2) }} className={tabIndex == 2 ? 'detail_tabitem_sel' : 'detail_tabitem_nor'}>Events</View>
|
|
|
+ </View>
|
|
|
+ <View className='detail_content'>
|
|
|
+ {
|
|
|
+ tabIndex == 0 ? overview() : tabIndex == 1 ? stage() : events()
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ <View className='detail_bottom'>
|
|
|
+ <View className='detail_bottom_btn' onClick={(e) => {
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ e.stopPropagation()
|
|
|
+ }
|
|
|
+ global.updateFastSleepData(detail)
|
|
|
+ props.onClose();
|
|
|
+ }}>{getBottomText()}</View>
|
|
|
+ </View>
|
|
|
+ {
|
|
|
+ modalContent()
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+}
|
