|
|
@@ -1,1098 +0,0 @@
|
|
|
-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 { bigRingRadius, getBgRing, getCommon, getDot, ringWidth } from '../hooks/RingData';
|
|
|
-import { ColorType } from '@/context/themes/color';
|
|
|
-import { useTranslation } from 'react-i18next';
|
|
|
-import { TimeFormatter } from '@/utils/time_format';
|
|
|
-import { getTimezone, 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 { IconInfo, IconMinus, IconPlus } from '@/components/basic/Icons';
|
|
|
-import showAlert from '@/components/basic/Alert';
|
|
|
-import { getLocalPush } from '../actions/TrackTimeActions';
|
|
|
-
|
|
|
-
|
|
|
-let LinearGradient
|
|
|
-if (process.env.TARO_ENV == 'rn') {
|
|
|
- LinearGradient = require('react-native-linear-gradient').default
|
|
|
-}
|
|
|
-
|
|
|
-export default function CircadianDetailPopup(props: { record: any, schedule?: any, onClose: Function, stageIndex?: number, onlyStage?: boolean }) {
|
|
|
-
|
|
|
- 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 [schedule, setSchedule] = useState(props.schedule)
|
|
|
- const [isFast, setIsFast] = useState(true)
|
|
|
- const durationPickerRef = useRef(null)
|
|
|
- const common = useSelector((state: any) => state.common);
|
|
|
- const { t } = useTranslation()
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- if (props.record.status == 'COMPLETED') {
|
|
|
- if ((props.record.sleep && props.record.sleep.status == 'COMPLETED') &&
|
|
|
- props.record.scenario == 'FAST_SLEEP') {
|
|
|
- setTabIndex(1)
|
|
|
- }
|
|
|
- else {
|
|
|
- setTabIndex(2)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }, [])
|
|
|
-
|
|
|
- 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 currentTZ = getTimezone()
|
|
|
- var isDiff = false;
|
|
|
- var isMulti = false;
|
|
|
- var tempTZ = '';
|
|
|
- if (props.record.fast) {
|
|
|
- if (props.record.fast.real_start_timezone && props.record.fast.real_start_timezone.gmt) {
|
|
|
- tempTZ = props.record.fast.real_start_timezone.gmt
|
|
|
- if (props.record.fast.real_start_timezone.gmt != currentTZ) {
|
|
|
- isDiff = true
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (props.record.fast.real_end_timezone && props.record.fast.real_end_timezone.gmt) {
|
|
|
- if (tempTZ != props.record.fast.real_end_timezone.gmt) {
|
|
|
- isMulti = true
|
|
|
- }
|
|
|
- if (props.record.fast.real_end_timezone.gmt != currentTZ) {
|
|
|
- isDiff = true
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- if (props.record.sleep) {
|
|
|
- if (props.record.sleep.real_start_timezone && props.record.sleep.real_start_timezone.gmt) {
|
|
|
- if (tempTZ == '') {
|
|
|
- tempTZ = props.record.sleep.real_start_timezone.gmt
|
|
|
- }
|
|
|
- else if (tempTZ != props.record.sleep.real_start_timezone.gmt) {
|
|
|
- isMulti = true
|
|
|
- }
|
|
|
- if (props.record.sleep.real_start_timezone.gmt != currentTZ) {
|
|
|
- isDiff = true
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (props.record.sleep.real_end_timezone && props.record.sleep.real_end_timezone.gmt) {
|
|
|
- if (tempTZ != props.record.sleep.real_end_timezone.gmt) {
|
|
|
- isMulti = true
|
|
|
- }
|
|
|
- if (props.record.sleep.real_end_timezone.gmt != currentTZ) {
|
|
|
- isDiff = true
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- setDiffTimeZone(isDiff)
|
|
|
- setMultiTimeZone(isMulti)
|
|
|
- }
|
|
|
-
|
|
|
- function getTitle() {
|
|
|
- if (props.record.status == 'COMPLETED') {
|
|
|
- var timestamp = props.record.first_real_check_time
|
|
|
- if (props.record.first_timezone) {
|
|
|
- timestamp = TimeFormatter.transferTimestamp(timestamp, props.record.first_timezone.gmt)
|
|
|
- }
|
|
|
- return TimeFormatter.getDayOfWeek(new Date(timestamp).getDay(), true)
|
|
|
- }
|
|
|
- if (props.record.status == 'WAIT_FOR_START') {
|
|
|
- return t('feature.track_time_duration.common.schedule')
|
|
|
- }
|
|
|
- return t('feature.track_time_duration.common.current_schedule')
|
|
|
- }
|
|
|
-
|
|
|
- function getSubTitle() {
|
|
|
- if (props.record.status == 'COMPLETED') {
|
|
|
- var timestamp = props.record.first_real_check_time
|
|
|
- if (props.record.first_timezone) {
|
|
|
- timestamp = TimeFormatter.transferTimestamp(timestamp, props.record.first_timezone.gmt)
|
|
|
- }
|
|
|
- return TimeFormatter.dateDescription(timestamp, true)
|
|
|
- }
|
|
|
- return ''
|
|
|
- }
|
|
|
-
|
|
|
- function getBottomText() {
|
|
|
- if (props.record.status == 'WAIT_FOR_START') {
|
|
|
- return t('feature.track_time_duration.common.im_ready')
|
|
|
- }
|
|
|
- if (props.record.status == 'COMPLETED') {
|
|
|
- return t('feature.track_time_duration.common.got_it')
|
|
|
- }
|
|
|
- return t('feature.track_time_duration.common.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:
|
|
|
- if (props.record.status == 'WAIT_FOR_START') {
|
|
|
- start = props.record.fast.target_start_time
|
|
|
- end = props.record.sleep.target_start_time
|
|
|
- }
|
|
|
- else if (props.record.status == 'ONGOING1') {
|
|
|
- return TimeFormatter.countdown(props.record.fast.real_start_time)
|
|
|
- }
|
|
|
- else {
|
|
|
- start = props.record.fast.real_start_time
|
|
|
- end = props.record.sleep.real_start_time
|
|
|
- }
|
|
|
-
|
|
|
- break
|
|
|
- case 1:
|
|
|
- if (props.record.status == 'WAIT_FOR_START' ||
|
|
|
- props.record.status == 'ONGOING1') {
|
|
|
- start = props.record.sleep.target_start_time
|
|
|
- end = props.record.sleep.target_end_time
|
|
|
- }
|
|
|
- else if (props.record.status == 'ONGOING2') {
|
|
|
- return TimeFormatter.countdown(props.record.sleep.real_start_time)
|
|
|
- }
|
|
|
- else {
|
|
|
- start = props.record.sleep.real_start_time
|
|
|
- end = props.record.sleep.real_end_time
|
|
|
- }
|
|
|
- break
|
|
|
- case 2:
|
|
|
- if (props.record.status == 'WAIT_FOR_START' ||
|
|
|
- props.record.status == 'ONGOING1' ||
|
|
|
- props.record.status == 'ONGOING2') {
|
|
|
- start = props.record.sleep.target_end_time
|
|
|
- end = props.record.fast.target_end_time
|
|
|
- }
|
|
|
- else if (props.record.status == 'ONGOING3') {
|
|
|
- return TimeFormatter.countdown(props.record.sleep.real_end_time)
|
|
|
- }
|
|
|
- else {
|
|
|
- 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
|
|
|
- if (props.record.fast.status == 'NOT_COMPLETED') {
|
|
|
- return t('feature.track_time_duration.stage.not_completed')
|
|
|
- }
|
|
|
- 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;
|
|
|
- }
|
|
|
- if (start > end) {
|
|
|
- return t('feature.track_time_duration.console.no_duration_available')
|
|
|
- // return '-' + TimeFormatter.durationFormate2(start, end)
|
|
|
- }
|
|
|
- return TimeFormatter.durationFormate(start, end)
|
|
|
- // return TimeFormatter.calculateTimeDifference(start, end)
|
|
|
- }
|
|
|
-
|
|
|
- function completedOverView() {
|
|
|
- var bgRing = getBgRing()
|
|
|
- var common = getCommon(null, false)
|
|
|
- common.radius = bigRingRadius;
|
|
|
- common.lineWidth = ringWidth;
|
|
|
-
|
|
|
- var fastRing: RealRing = null
|
|
|
- if (props.record.fast) {
|
|
|
- var timestamp = TimeFormatter.transferTimestamp(props.record.fast.real_start_time, props.record.fast.real_end_timezone ? props.record.fast.real_end_timezone.gmt : '')
|
|
|
- fastRing = {
|
|
|
- color: global.fastColor ? global.fastColor : ColorType.fast,
|
|
|
- startArc: startArc(timestamp),//startArc(props.record.fast.real_start_time),
|
|
|
- durationArc: durationArc(props.record.fast.real_start_time, props.record.fast.real_end_time)
|
|
|
- }
|
|
|
- if (props.record.fast.status == 'NOT_COMPLETED') {
|
|
|
- fastRing.durationArc = 0.01
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- var sleepRing: RealRing = null
|
|
|
- if (props.record.sleep && props.record.sleep.status == 'COMPLETED') {
|
|
|
- var timestamp = TimeFormatter.transferTimestamp(props.record.sleep.real_start_time,
|
|
|
- props.record.fast ? props.record.fast.real_end_timezone.gmt : props.record.sleep.real_end_timezone.gmt)
|
|
|
- sleepRing = {
|
|
|
- color: global.sleepColor ? global.sleepColor : ColorType.sleep,
|
|
|
- startArc: startArc(timestamp),//startArc(props.record.sleep.real_start_time),
|
|
|
- durationArc: durationArc(props.record.sleep.real_start_time, props.record.sleep.real_end_time)
|
|
|
- }
|
|
|
- }
|
|
|
- if (props.record.sleep && props.record.sleep.status == 'NOT_COMPLETED') {
|
|
|
- var timestamp = TimeFormatter.transferTimestamp(props.record.sleep.real_start_time,
|
|
|
- props.record.fast ? props.record.fast.real_end_timezone.gmt : props.record.sleep.real_end_timezone.gmt)
|
|
|
- sleepRing = {
|
|
|
- color: global.sleepColor ? global.sleepColor : ColorType.sleep,
|
|
|
- startArc: startArc(timestamp),//startArc(props.record.sleep.real_start_time),
|
|
|
- durationArc: 0.01
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- 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)
|
|
|
- global.pauseIndexTimer = true
|
|
|
- if (props.record.status == 'WAIT_FOR_START') {
|
|
|
- setShowDurationPicker(true)
|
|
|
- }
|
|
|
- else {
|
|
|
- setShowEditPicker(true)
|
|
|
- }
|
|
|
- }
|
|
|
- else {
|
|
|
- setIsFast(false)
|
|
|
- if (props.record.status == 'WAIT_FOR_START' && props.record.scenario == 'FAST_SLEEP') {
|
|
|
- Taro.showToast({
|
|
|
- title: t('feature.track_time_duration.common.start_fasting_first'),
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return;
|
|
|
- }
|
|
|
- global.pauseIndexTimer = true
|
|
|
- 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))
|
|
|
-
|
|
|
- if (props.record.status == 'WAIT_FOR_START') {
|
|
|
- // var start = props.schedule.fast.start_time
|
|
|
- // var startCount = (parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])) * 60 * 1000
|
|
|
- // var endCount = startCount + count
|
|
|
- // if (endCount >= 24 * 3600 * 1000) {
|
|
|
- // endCount -= 24 * 3600 * 1000
|
|
|
- // }
|
|
|
- // endCount = endCount / 60000
|
|
|
- // var endHour = Math.floor(endCount / 60)
|
|
|
- // var endMinute = endCount % 60
|
|
|
- // var endTime = TimeFormatter.padZero(endHour) + ':' + TimeFormatter.padZero(endMinute)
|
|
|
- // console.log(endTime)
|
|
|
- changeSchedule(count)
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- else {
|
|
|
- if (props.record.status == 'WAIT_FOR_START' && props.record.scenario == 'FAST_SLEEP') {
|
|
|
- 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))
|
|
|
-
|
|
|
- if (props.record.status == 'WAIT_FOR_START') {
|
|
|
- changeSchedule(count)
|
|
|
- // var start = props.schedule.fast.start_time
|
|
|
- // var startCount = (parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])) * 60 * 1000
|
|
|
- // var endCount = startCount + count
|
|
|
- // if (endCount >= 24 * 3600 * 1000) {
|
|
|
- // endCount -= 24 * 3600 * 1000
|
|
|
- // }
|
|
|
- // endCount = endCount / 60000
|
|
|
- // var endHour = Math.floor(endCount / 60)
|
|
|
- // var endMinute = endCount % 60
|
|
|
- // var endTime = TimeFormatter.padZero(endHour) + ':' + TimeFormatter.padZero(endMinute)
|
|
|
- // console.log(endTime)
|
|
|
- }
|
|
|
- }
|
|
|
- else {
|
|
|
- if (props.record.status == 'WAIT_FOR_START' && props.record.scenario == 'FAST_SLEEP') {
|
|
|
- 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 changeSchedule(count: number) {
|
|
|
- if (!schedule) {
|
|
|
- return
|
|
|
- }
|
|
|
- var obj = JSON.parse(JSON.stringify(schedule))
|
|
|
- var start = schedule.fast.start_time
|
|
|
- var startCount = (parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])) * 60 * 1000
|
|
|
- var endCount = startCount + count
|
|
|
- if (endCount >= 24 * 3600 * 1000) {
|
|
|
- endCount -= 24 * 3600 * 1000
|
|
|
- }
|
|
|
- endCount = endCount / 60000
|
|
|
- var endHour = Math.floor(endCount / 60)
|
|
|
- var endMinute = endCount % 60
|
|
|
- var endTime = TimeFormatter.padZero(endHour) + ':' + TimeFormatter.padZero(endMinute)
|
|
|
- obj.fast.end_time = endTime
|
|
|
- setSchedule(obj)
|
|
|
- }
|
|
|
-
|
|
|
- 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 onClick={() => tapDuration(true)} style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
|
|
|
- <Text className='pop_duration_txt' style={{ color: ColorType.fast }}>{TimeFormatter.durationFormate(detail.fast.target_start_time, detail.fast.target_end_time)}</Text>
|
|
|
- <View onClick={(e) => {
|
|
|
- if (process.env.TARO_ENV == 'weapp') {
|
|
|
- e.stopPropagation()
|
|
|
- }
|
|
|
- tapMinus(true)
|
|
|
- }} className='minus' style={{ backgroundColor: ColorType.fast, opacity: 0.6 }}><IconMinus color='#090909' /></View>
|
|
|
- <View onClick={(e) => {
|
|
|
- if (process.env.TARO_ENV == 'weapp') {
|
|
|
- e.stopPropagation()
|
|
|
- }
|
|
|
- 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 onClick={() => tapDuration(true)} style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
|
|
|
- <Text 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' style={{ color: '#fff', opacity: 0.4 }}>{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' style={{ color: '#fff', opacity: 0.4 }}>{t('feature.track_time_duration.console.timeout')}</Text> :
|
|
|
- <Text className='title' style={{ color: '#fff', opacity: 0.4 }}>{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 onClick={() => tapDuration(false)} style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
|
|
|
- <Text className='pop_duration_txt' style={{ color: ColorType.sleep }}>{TimeFormatter.durationFormate(detail.sleep.target_start_time, detail.sleep.target_end_time)}</Text>
|
|
|
- <View onClick={(e) => {
|
|
|
- if (process.env.TARO_ENV == 'weapp') {
|
|
|
- e.stopPropagation()
|
|
|
- }
|
|
|
- tapMinus(false)
|
|
|
- }} className='minus' style={{ backgroundColor: ColorType.sleep, opacity: 0.6 }}><IconMinus color='#090909' /></View>
|
|
|
- <View onClick={(e) => {
|
|
|
- if (process.env.TARO_ENV == 'weapp') {
|
|
|
- e.stopPropagation()
|
|
|
- }
|
|
|
- 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 onClick={() => tapDuration(false)} style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
|
|
|
- <Text 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' style={{ color: '#fff', opacity: 0.4 }}>{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' style={{ color: '#fff', opacity: 0.4 }}>{t('feature.track_time_duration.console.timeout')}</Text> :
|
|
|
- <Text className='title' style={{ color: '#fff', opacity: 0.4 }}>{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 showPredictedAlert() {
|
|
|
- showAlert({
|
|
|
- title: t('feature.track_time_duration.console.predicted_alert_title'),
|
|
|
- content: t('feature.track_time_duration.console.predicted_alert_content'),
|
|
|
- showCancel: false,
|
|
|
- confirmText: t('feature.track_time_duration.console.predicted_alert_btn')
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- function stage() {
|
|
|
- var bgRing = getBgRing()
|
|
|
- var common = getCommon(null, false)
|
|
|
- common.radius = bigRingRadius;
|
|
|
- common.lineWidth = ringWidth;
|
|
|
- var timestamp, timestamp2, timestamp3
|
|
|
- var duration, duration2, duration3;
|
|
|
-
|
|
|
- var predicted2 = false; //预估
|
|
|
- var predicted3 = false;
|
|
|
- var currentDot = getDot(null, true)
|
|
|
- var currentDot2 = getDot(null, true)
|
|
|
- var currentDot3 = getDot(null, true)
|
|
|
- if (props.record.status == 'WAIT_FOR_START') {
|
|
|
- var date = new Date()
|
|
|
- date.setSeconds(0)
|
|
|
- date.setMilliseconds(0)
|
|
|
- var fastStart = props.schedule.fast.start_time
|
|
|
- var sleepStart = props.schedule.sleep.start_time
|
|
|
- var sleepEnd = props.schedule.sleep.end_time
|
|
|
- date.setHours(parseInt(fastStart.split(':')[0]))
|
|
|
- date.setMinutes(parseInt(fastStart.split(':')[1]))
|
|
|
-
|
|
|
- timestamp = date.getTime()
|
|
|
- date.setHours(parseInt(sleepStart.split(':')[0]))
|
|
|
- date.setMinutes(parseInt(sleepStart.split(':')[1]))
|
|
|
- timestamp2 = date.getTime()
|
|
|
- if (timestamp2 < timestamp) {
|
|
|
- timestamp2 += 24 * 3600 * 1000
|
|
|
- }
|
|
|
- date.setHours(parseInt(sleepEnd.split(':')[0]))
|
|
|
- date.setMinutes(parseInt(sleepEnd.split(':')[1]))
|
|
|
- timestamp3 = date.getTime()
|
|
|
- if (timestamp3 < timestamp2) {
|
|
|
- timestamp3 += 24 * 3600 * 1000
|
|
|
- }
|
|
|
-
|
|
|
- duration = durationArc(props.record.fast.target_start_time, props.record.sleep.target_start_time)
|
|
|
- duration2 = durationArc(props.record.sleep.target_start_time, props.record.sleep.target_end_time)
|
|
|
- duration3 = durationArc(props.record.sleep.target_end_time, props.record.fast.target_end_time)
|
|
|
-
|
|
|
- currentDot = null
|
|
|
- currentDot2 = null
|
|
|
- currentDot3 = null
|
|
|
- }
|
|
|
-
|
|
|
- else if (props.record.status == 'ONGOING1') {
|
|
|
- var date = new Date()
|
|
|
- timestamp = props.record.fast.real_start_time
|
|
|
- timestamp2 = props.record.sleep.target_start_time
|
|
|
- timestamp3 = props.record.sleep.target_end_time
|
|
|
- duration = durationArc(props.record.fast.real_start_time, date.getTime())
|
|
|
- duration2 = durationArc(props.record.sleep.target_start_time, props.record.sleep.target_end_time)
|
|
|
- duration3 = durationArc(props.record.sleep.target_end_time, props.record.fast.target_end_time)
|
|
|
-
|
|
|
- predicted2 = true
|
|
|
- predicted3 = true
|
|
|
-
|
|
|
- currentDot.color = ColorType.fast
|
|
|
- currentDot2 = null
|
|
|
- currentDot3 = null
|
|
|
- }
|
|
|
- else if (props.record.status == 'ONGOING2') {
|
|
|
- var date = new Date()
|
|
|
- timestamp = props.record.fast.real_start_time
|
|
|
- timestamp2 = props.record.sleep.real_start_time
|
|
|
- timestamp3 = props.record.sleep.target_end_time
|
|
|
- duration = durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
|
|
|
- duration2 = durationArc(props.record.sleep.real_start_time, date.getTime())
|
|
|
- duration3 = durationArc(props.record.sleep.target_end_time, props.record.fast.target_end_time)
|
|
|
-
|
|
|
- predicted2 = false
|
|
|
- predicted3 = true
|
|
|
-
|
|
|
- currentDot = null
|
|
|
- currentDot2.color = ColorType.sleep
|
|
|
- currentDot3 = null
|
|
|
- }
|
|
|
- else if (props.record.status == 'ONGOING3') {
|
|
|
- var date = new Date()
|
|
|
- timestamp = props.record.fast.real_start_time
|
|
|
- timestamp2 = props.record.sleep.real_start_time
|
|
|
- timestamp3 = props.record.sleep.real_end_time
|
|
|
- duration = durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
|
|
|
- duration2 = durationArc(props.record.sleep.real_start_time, props.record.sleep.real_end_time)
|
|
|
- duration3 = durationArc(props.record.sleep.real_end_time, date.getTime())
|
|
|
-
|
|
|
- currentDot = null
|
|
|
- currentDot2 = null
|
|
|
- currentDot3.color = ColorType.fast
|
|
|
- }
|
|
|
- else {
|
|
|
- timestamp = TimeFormatter.transferTimestamp(props.record.fast.real_start_time, props.record.fast.real_end_timezone.gmt)
|
|
|
- timestamp2 = TimeFormatter.transferTimestamp(props.record.sleep.real_start_time, props.record.fast.real_end_timezone.gmt)
|
|
|
- timestamp3 = TimeFormatter.transferTimestamp(props.record.sleep.real_end_time, props.record.fast.real_end_timezone.gmt)
|
|
|
- duration = durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
|
|
|
- duration2 = durationArc(props.record.sleep.real_start_time, props.record.sleep.real_end_time)
|
|
|
- duration3 = durationArc(props.record.sleep.real_end_time, props.record.fast.real_end_time)
|
|
|
- currentDot = null
|
|
|
- currentDot2 = null
|
|
|
- currentDot3 = null
|
|
|
- }
|
|
|
-
|
|
|
- const preRing: RealRing = {
|
|
|
- color: global.fastColor ? global.fastColor : ColorType.fast,
|
|
|
- startArc: startArc(timestamp),
|
|
|
- durationArc: duration
|
|
|
- }
|
|
|
- let sleepRing: RealRing = {
|
|
|
- color: global.sleepColor ? global.sleepColor : ColorType.sleep,
|
|
|
- startArc: startArc(timestamp2),
|
|
|
- durationArc: duration2
|
|
|
- }
|
|
|
- let wakeRing: RealRing = {
|
|
|
- color: global.fastColor ? global.fastColor : ColorType.fast,
|
|
|
- startArc: startArc(timestamp3),
|
|
|
- durationArc: duration3
|
|
|
- }
|
|
|
-
|
|
|
- if (duration2 < 0) {
|
|
|
- sleepRing = null
|
|
|
- }
|
|
|
- if (duration3 < 0) {
|
|
|
- wakeRing = null
|
|
|
- }
|
|
|
- return <View>
|
|
|
- <View className='pop_ring_bg'>
|
|
|
- <Rings common={common} bgRing={bgRing} canvasId={'pre_sleep_ring'} realRing={preRing} currentDot={currentDot} />
|
|
|
- <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} currentDot={currentDot2} />
|
|
|
- <View className="pop_duration_bg">
|
|
|
- <Text className="pop_duration_title">{t('feature.track_time_duration.stage.b')}</Text>
|
|
|
- <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
|
|
- <Text className="pop_duration_value" style={{ color: ColorType.sleep, marginBottom: 0 }}>{getStageDuration(1)}</Text>
|
|
|
- {
|
|
|
- predicted2 ? !sleepRing ? <View style={{ marginLeft: 5 }} onClick={showPredictedAlert}><IconInfo width={20} color={ColorType.sleep} /></View> : <View className='free' style={{ backgroundColor: ColorType.sleep, color: '#fff' }}>{t('feature.track_time_duration.console.predicted')}</View> : null
|
|
|
- }
|
|
|
- </View>
|
|
|
-
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- <View className='pop_ring_bg'>
|
|
|
- <Rings common={common} bgRing={bgRing} canvasId={'later_sleep_ring'} realRing={wakeRing} currentDot={currentDot3} />
|
|
|
- <View className="pop_duration_bg">
|
|
|
- <Text className="pop_duration_title">{t('feature.track_time_duration.stage.c')}</Text>
|
|
|
- <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
|
|
- <Text className="pop_duration_value" style={{ color: ColorType.fast, marginBottom: 0 }}>{getStageDuration(2)}</Text>
|
|
|
- {
|
|
|
- predicted3 ? !wakeRing ? <View style={{ marginLeft: 5 }} onClick={showPredictedAlert}><IconInfo width={20} color={ColorType.fast} /></View> : <View className='free' style={{ backgroundColor: ColorType.fast, color: '#fff' }}>{t('feature.track_time_duration.console.predicted')}</View> : null
|
|
|
- }
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- }
|
|
|
-
|
|
|
- function events() {
|
|
|
- return <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
|
|
|
- <TimelineFastSleep
|
|
|
- data={props.record}
|
|
|
- first_real_check_time={props.record.first_real_check_time ? props.record.first_real_check_time : 0}
|
|
|
- scenario={schedule ? { schedule: schedule } : null}
|
|
|
- diffTimeZone={diffTimeZone} multiTimeZone={multiTimeZone} />
|
|
|
- </View>
|
|
|
- }
|
|
|
-
|
|
|
- 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)
|
|
|
- global.pauseIndexTimer = 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)
|
|
|
- global.pauseIndexTimer = false
|
|
|
- }} />
|
|
|
- </View>
|
|
|
- }
|
|
|
-
|
|
|
- function durationChange(e) {
|
|
|
- global.pauseIndexTimer = false
|
|
|
- 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
|
|
|
- if (props.record.status == 'WAIT_FOR_START') {
|
|
|
- changeSchedule(count * 1000 * 60)
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- 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 => {
|
|
|
- //刷新本地推送schedule
|
|
|
- getLocalPush()
|
|
|
- //刷新首页数据
|
|
|
- global.indexPageRefresh()
|
|
|
- }).catch(e => {
|
|
|
-
|
|
|
- })
|
|
|
- }
|
|
|
- setShowDurationPicker(false)
|
|
|
- setShowEditPicker(false)
|
|
|
- }
|
|
|
-
|
|
|
- function modalContent() {
|
|
|
- if (showDurationPicker || showEditPicker) {
|
|
|
- return <Modal
|
|
|
- testInfo={null}
|
|
|
- dismiss={() => {
|
|
|
- setShowDurationPicker(false)
|
|
|
- setShowEditPicker(false)
|
|
|
- global.pauseIndexTimer = false
|
|
|
- }}
|
|
|
- confirm={() => { }}>
|
|
|
- {
|
|
|
- showDurationPicker ? durationPickerContent() : editPickerContent()
|
|
|
- }
|
|
|
- </Modal>
|
|
|
-
|
|
|
- }
|
|
|
- return <View />
|
|
|
- }
|
|
|
-
|
|
|
- function onlyStageContent() {
|
|
|
- var bgRing = getBgRing()
|
|
|
- var common = getCommon(null, false)
|
|
|
- common.radius = bigRingRadius;
|
|
|
- common.lineWidth = ringWidth;
|
|
|
-
|
|
|
- var timestamp, timestamp2, timestamp3
|
|
|
- var duration, duration2, duration3;
|
|
|
-
|
|
|
- var currentDot = getDot(null, true)
|
|
|
- if (props.record.status == 'WAIT_FOR_START') {
|
|
|
- var date = new Date()
|
|
|
- date.setSeconds(0)
|
|
|
- date.setMilliseconds(0)
|
|
|
- var fastStart = props.schedule.fast.start_time
|
|
|
- var sleepStart = props.schedule.sleep.start_time
|
|
|
- var sleepEnd = props.schedule.sleep.end_time
|
|
|
- date.setHours(parseInt(fastStart.split(':')[0]))
|
|
|
- date.setMinutes(parseInt(fastStart.split(':')[1]))
|
|
|
-
|
|
|
- timestamp = date.getTime()
|
|
|
- date.setHours(parseInt(sleepStart.split(':')[0]))
|
|
|
- date.setMinutes(parseInt(sleepStart.split(':')[1]))
|
|
|
- timestamp2 = date.getTime()
|
|
|
- if (timestamp2 < timestamp) {
|
|
|
- timestamp2 += 24 * 3600 * 1000
|
|
|
- }
|
|
|
- date.setHours(parseInt(sleepEnd.split(':')[0]))
|
|
|
- date.setMinutes(parseInt(sleepEnd.split(':')[1]))
|
|
|
- timestamp3 = date.getTime()
|
|
|
- if (timestamp3 < timestamp2) {
|
|
|
- timestamp3 += 24 * 3600 * 1000
|
|
|
- }
|
|
|
-
|
|
|
- duration = durationArc(props.record.fast.target_start_time, props.record.sleep.target_start_time)
|
|
|
- duration2 = durationArc(props.record.sleep.target_start_time, props.record.sleep.target_end_time)
|
|
|
- duration3 = durationArc(props.record.sleep.target_end_time, props.record.fast.target_end_time)
|
|
|
-
|
|
|
- currentDot = null;
|
|
|
- }
|
|
|
- else if (props.record.status == 'ONGOING1') {
|
|
|
- var date = new Date()
|
|
|
- timestamp = props.record.fast.real_start_time
|
|
|
- timestamp2 = props.record.sleep.target_start_time
|
|
|
- timestamp3 = props.record.sleep.target_end_time
|
|
|
- duration = durationArc(props.record.fast.real_start_time, date.getTime())
|
|
|
- duration2 = durationArc(props.record.sleep.target_start_time, props.record.sleep.target_end_time)
|
|
|
- duration3 = durationArc(props.record.sleep.target_end_time, props.record.fast.target_end_time)
|
|
|
-
|
|
|
- if (props.stageIndex == 0) {
|
|
|
- currentDot.color = ColorType.fast
|
|
|
- }
|
|
|
- else {
|
|
|
- currentDot = null
|
|
|
- }
|
|
|
- }
|
|
|
- else if (props.record.status == 'ONGOING2') {
|
|
|
- var date = new Date()
|
|
|
- timestamp = props.record.fast.real_start_time
|
|
|
- timestamp2 = props.record.sleep.real_start_time
|
|
|
- timestamp3 = props.record.sleep.target_end_time
|
|
|
- duration = durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
|
|
|
- duration2 = durationArc(props.record.sleep.real_start_time, date.getTime())
|
|
|
- duration3 = durationArc(props.record.sleep.target_end_time, props.record.fast.target_end_time)
|
|
|
- if (props.stageIndex == 1) {
|
|
|
- currentDot.color = ColorType.sleep
|
|
|
- }
|
|
|
- else {
|
|
|
- currentDot = null
|
|
|
- }
|
|
|
- }
|
|
|
- else if (props.record.status == 'ONGOING3') {
|
|
|
- var date = new Date()
|
|
|
- timestamp = props.record.fast.real_start_time
|
|
|
- timestamp2 = props.record.sleep.real_start_time
|
|
|
- timestamp3 = props.record.sleep.real_end_time
|
|
|
- duration = durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
|
|
|
- duration2 = durationArc(props.record.sleep.real_start_time, props.record.sleep.real_end_time)
|
|
|
- duration3 = durationArc(props.record.sleep.real_end_time, date.getTime())
|
|
|
- if (props.stageIndex == 2) {
|
|
|
- currentDot.color = ColorType.fast
|
|
|
- }
|
|
|
- else {
|
|
|
- currentDot = null
|
|
|
- }
|
|
|
- }
|
|
|
- else {
|
|
|
- timestamp = TimeFormatter.transferTimestamp(props.record.fast.real_start_time, props.record.fast.real_end_timezone.gmt)
|
|
|
- timestamp2 = TimeFormatter.transferTimestamp(props.record.sleep.real_start_time, props.record.fast.real_end_timezone.gmt)
|
|
|
- timestamp3 = TimeFormatter.transferTimestamp(props.record.sleep.real_end_time, props.record.fast.real_end_timezone.gmt)
|
|
|
- duration = durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
|
|
|
- duration2 = durationArc(props.record.sleep.real_start_time, props.record.sleep.real_end_time)
|
|
|
- duration3 = durationArc(props.record.sleep.real_end_time, props.record.fast.real_end_time)
|
|
|
- currentDot = null
|
|
|
- }
|
|
|
-
|
|
|
- const preRing: RealRing = {
|
|
|
- color: global.fastColor ? global.fastColor : ColorType.fast,
|
|
|
- startArc: startArc(timestamp),
|
|
|
- durationArc: duration
|
|
|
- }
|
|
|
- const sleepRing: RealRing = {
|
|
|
- color: global.sleepColor ? global.sleepColor : ColorType.sleep,
|
|
|
- startArc: startArc(timestamp2),
|
|
|
- durationArc: duration2
|
|
|
- }
|
|
|
- const wakeRing: RealRing = {
|
|
|
- color: global.fastColor ? global.fastColor : ColorType.fast,
|
|
|
- startArc: startArc(timestamp3),
|
|
|
- durationArc: duration3
|
|
|
- }
|
|
|
-
|
|
|
- return <View className='detail_container'>
|
|
|
- {/* <Text className='detail_popup_title'>{getTitle()}<Text className='detail_popup_subttitle'> {getSubTitle()}</Text></Text> */}
|
|
|
- <View style={{ marginTop: rpxToPx(0) }}>
|
|
|
- {
|
|
|
- props.stageIndex == 0 && <View className='pop_ring_bg' style={{ borderTopColor: 'transparent' }}>
|
|
|
- <Rings common={common} bgRing={bgRing} canvasId={'pre_sleep_ring'} realRing={preRing} currentDot={currentDot} />
|
|
|
- <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>
|
|
|
- }
|
|
|
- {
|
|
|
- props.stageIndex == 1 && <View className='pop_ring_bg' style={{ borderTopColor: 'transparent' }}>
|
|
|
- <Rings common={common} bgRing={bgRing} canvasId={'sleeping_ring'} realRing={sleepRing} currentDot={currentDot} />
|
|
|
- <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>
|
|
|
- }
|
|
|
- {
|
|
|
- props.stageIndex == 2 && <View className='pop_ring_bg' style={{ borderTopColor: 'transparent' }}>
|
|
|
- <Rings common={common} bgRing={bgRing} canvasId={'later_sleep_ring'} realRing={wakeRing} currentDot={currentDot} />
|
|
|
- <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>
|
|
|
- </View>
|
|
|
- }
|
|
|
-
|
|
|
- if (props.onlyStage) {
|
|
|
- return onlyStageContent()
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- return <View className='detail_container'>
|
|
|
- <View style={{display:'flex',flexDirection:'row',alignItems:'flex-end'}}>
|
|
|
- <Text className='detail_popup_title'>{getTitle()}</Text>
|
|
|
- <Text className='detail_popup_subttitle'> {getSubTitle()}</Text>
|
|
|
- </View>
|
|
|
-
|
|
|
- {/* <Text className='detail_popup_title'>{getTitle()}<Text className='detail_popup_subttitle'> {getSubTitle()}</Text></Text> */}
|
|
|
- <View className='detail_tabbar'>
|
|
|
- <View onClick={() => { setTabIndex(0) }} className={tabIndex == 0 ? 'detail_tabitem_sel' : 'detail_tabitem_nor'}>{t('feature.day_night.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'}>{t('feature.day_night.stages')}</View>
|
|
|
- }
|
|
|
- <View onClick={() => { setTabIndex(2) }} className={tabIndex == 2 ? 'detail_tabitem_sel' : 'detail_tabitem_nor'}>{t('feature.day_night.events')}</View>
|
|
|
- </View>
|
|
|
- <View className='detail_content'>
|
|
|
- {
|
|
|
- tabIndex == 0 ? overview() : tabIndex == 1 ? stage() : events()
|
|
|
- }
|
|
|
- </View>
|
|
|
- <View className='detail_bottom'>
|
|
|
- {
|
|
|
- process.env.TARO_ENV == 'weapp' ?
|
|
|
- <View className='detail_bottom_btn' onClick={(e) => {
|
|
|
- if (process.env.TARO_ENV == 'weapp') {
|
|
|
- e.stopPropagation()
|
|
|
- }
|
|
|
- global.updateFastSleepData(detail, schedule)
|
|
|
- props.onClose();
|
|
|
- }}>{getBottomText()}</View> :
|
|
|
- <View onClick={(e) => {
|
|
|
- global.updateFastSleepData(detail, schedule)
|
|
|
- props.onClose();
|
|
|
- }}>
|
|
|
- <LinearGradient
|
|
|
- style={{
|
|
|
- width: 300,
|
|
|
- height: 50,
|
|
|
- borderRadius: 25,
|
|
|
- alignItems: 'center',
|
|
|
- justifyContent: 'center',
|
|
|
- }}
|
|
|
- colors={[ColorType.fast, ColorType.sleep]}
|
|
|
- start={{ x: 0, y: 0 }}
|
|
|
- end={{ x: 1, y: 0 }}
|
|
|
-
|
|
|
- >
|
|
|
- <Text style={{ fontWeight: 'bold', fontSize: 20,color:ColorType.black }}>{getBottomText()}</Text>
|
|
|
- </LinearGradient>
|
|
|
- </View>
|
|
|
- // <View className='detail_bottom_btn' onClick={(e) => {
|
|
|
- // global.updateFastSleepData(detail, schedule)
|
|
|
- // props.onClose();
|
|
|
- // }}>{getBottomText()}</View>
|
|
|
- }
|
|
|
-
|
|
|
- </View>
|
|
|
- {
|
|
|
- modalContent()
|
|
|
- }
|
|
|
- </View>
|
|
|
-}
|