|
|
@@ -3,9 +3,222 @@ import './fast_sleep_card.scss'
|
|
|
import { rpxToPx } from '@/utils/tools'
|
|
|
import { MainColorType } from '@/context/themes/color';
|
|
|
import { TimeFormatter } from '@/utils/time_format';
|
|
|
+import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
|
|
|
+import { getDurationArc, getStartArc } from '@/features/health/hooks/health_hooks';
|
|
|
|
|
|
export default function FastSleepCard(props: { step: number, data: any }) {
|
|
|
|
|
|
+ const common: RingCommon = {
|
|
|
+ useCase: 'ChooseScenario',
|
|
|
+ radius: 37,
|
|
|
+ lineWidth: 14,
|
|
|
+ isFast: true,
|
|
|
+ status: 'WAIT_FOR_START'
|
|
|
+ }
|
|
|
+
|
|
|
+ const common2: RingCommon = {
|
|
|
+ useCase: 'ChooseScenario',
|
|
|
+ radius: 20,
|
|
|
+ lineWidth: 14,
|
|
|
+ isFast: true,
|
|
|
+ status: 'WAIT_FOR_START'
|
|
|
+ }
|
|
|
+
|
|
|
+ const bgRing: BgRing = {
|
|
|
+ color: MainColorType.ringBg
|
|
|
+ }
|
|
|
+
|
|
|
+ function target0BigRing() {
|
|
|
+ const { fast } = props.data
|
|
|
+ return {
|
|
|
+ color: MainColorType.fastLight,
|
|
|
+ startArc: getStartArc(fast.target.start_timestamp),
|
|
|
+ durationArc: getDurationArc(fast.target.start_timestamp, fast.target.end_timestamp)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function target0SmallRing() {
|
|
|
+ const { sleep } = props.data
|
|
|
+ return {
|
|
|
+ color: MainColorType.sleepLight,
|
|
|
+ startArc: getStartArc(sleep.target.start_timestamp),
|
|
|
+ durationArc: getDurationArc(sleep.target.start_timestamp, sleep.target.end_timestamp)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function target1BigRing() {
|
|
|
+ const { fast, sleep } = props.data
|
|
|
+ return {
|
|
|
+ color: MainColorType.fastLight,
|
|
|
+ startArc: getStartArc(fast.target.start_timestamp),
|
|
|
+ durationArc: getDurationArc(fast.target.start_timestamp, sleep.target.start_timestamp)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function target2BigRing() {
|
|
|
+ const { sleep } = props.data
|
|
|
+ return {
|
|
|
+ color: MainColorType.sleepLight,
|
|
|
+ startArc: getStartArc(sleep.target.start_timestamp),
|
|
|
+ durationArc: getDurationArc(sleep.target.start_timestamp, sleep.target.end_timestamp)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function target3BigRing() {
|
|
|
+ const { fast, sleep } = props.data
|
|
|
+ return {
|
|
|
+ color: MainColorType.fastLight,
|
|
|
+ startArc: getStartArc(sleep.target.end_timestamp),
|
|
|
+ durationArc: getDurationArc(sleep.target.end_timestamp, fast.target.end_timestamp)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function real0BigRing() {
|
|
|
+ const { fast, sleep, status } = props.data
|
|
|
+ if (status == 'WFS' || status == 'OG2_NO1') {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ color: MainColorType.fast,
|
|
|
+ startArc: getStartArc(fast.real.start_timestamp),
|
|
|
+ durationArc: getDurationArc(fast.real.start_timestamp, new Date().getTime())
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function real0SmallRing() {
|
|
|
+ const { sleep } = props.data
|
|
|
+ if (!sleep.real) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ color: MainColorType.sleep,
|
|
|
+ startArc: getStartArc(sleep.real.start_timestamp),
|
|
|
+ durationArc: getDurationArc(sleep.real.start_timestamp, new Date().getTime())
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function real1BigRing() {
|
|
|
+ const { fast, sleep, status } = props.data
|
|
|
+ if (fast.real) {
|
|
|
+ if (status == 'OG1') {
|
|
|
+ return {
|
|
|
+ color: MainColorType.fast,
|
|
|
+ startArc: getStartArc(fast.real.start_timestamp),
|
|
|
+ durationArc: getDurationArc(fast.real.start_timestamp, new Date().getTime())
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ color: MainColorType.fast,
|
|
|
+ startArc: getStartArc(fast.real.start_timestamp),
|
|
|
+ durationArc: getDurationArc(fast.real.start_timestamp, sleep.real.start_timestamp)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ function real2BigRing() {
|
|
|
+ const { sleep } = props.data
|
|
|
+ if (!sleep.real) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ color: MainColorType.sleep,
|
|
|
+ startArc: getStartArc(sleep.real.start_timestamp),
|
|
|
+ durationArc: getDurationArc(sleep.real.start_timestamp, sleep.real.end_timestamp ? sleep.real.end_timestamp : new Date().getTime())
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function real3BigRing() {
|
|
|
+ const { fast, sleep } = props.data
|
|
|
+ if (!sleep.real || !sleep.real.end_timestamp) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ color: MainColorType.fast,
|
|
|
+ startArc: getStartArc(sleep.real.end_timestamp),
|
|
|
+ durationArc: getDurationArc(sleep.real.end_timestamp, new Date().getTime())
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function circle0() {
|
|
|
+ return <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', position: 'relative' }}>
|
|
|
+ <Rings common={common}
|
|
|
+ bgRing={bgRing}
|
|
|
+ targetRing={target0BigRing()}
|
|
|
+ realRing={real0BigRing()}
|
|
|
+ canvasId={'circle0_big'}
|
|
|
+ // currentDot={currentDot()}
|
|
|
+ />
|
|
|
+
|
|
|
+ <View style={{
|
|
|
+ position: 'absolute',
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center',
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ top: 0,
|
|
|
+ bottom: 0
|
|
|
+ }}>
|
|
|
+ <Rings common={common2}
|
|
|
+ bgRing={bgRing}
|
|
|
+ targetRing={target0SmallRing()}
|
|
|
+ realRing={real0SmallRing()}
|
|
|
+ canvasId={'circle0_small'}
|
|
|
+ // currentDot={currentDot()}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function circle1() {
|
|
|
+ return <Rings common={common}
|
|
|
+ bgRing={bgRing}
|
|
|
+ targetRing={target1BigRing()}
|
|
|
+ realRing={real1BigRing()}
|
|
|
+ canvasId={'circle1_big'}
|
|
|
+ // currentDot={currentDot()}
|
|
|
+
|
|
|
+ />
|
|
|
+ }
|
|
|
+
|
|
|
+ function circle2() {
|
|
|
+ return <Rings common={common}
|
|
|
+ bgRing={bgRing}
|
|
|
+ targetRing={target2BigRing()}
|
|
|
+ realRing={real2BigRing()}
|
|
|
+ canvasId={'circle2_big'}
|
|
|
+ // currentDot={currentDot()}
|
|
|
+
|
|
|
+ />
|
|
|
+ }
|
|
|
+
|
|
|
+ function circle3() {
|
|
|
+ return <Rings common={common}
|
|
|
+ bgRing={bgRing}
|
|
|
+ targetRing={target3BigRing()}
|
|
|
+ realRing={real3BigRing()}
|
|
|
+ canvasId={'circle3_big'}
|
|
|
+ // currentDot={currentDot()}
|
|
|
+
|
|
|
+ />
|
|
|
+ }
|
|
|
+
|
|
|
+ function circleContent() {
|
|
|
+ switch (props.step) {
|
|
|
+ case 0:
|
|
|
+ return circle0()
|
|
|
+ case 1:
|
|
|
+ return circle1()
|
|
|
+ case 2:
|
|
|
+ return circle2()
|
|
|
+ case 3:
|
|
|
+ return circle3()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
function statusBar() {
|
|
|
var title = ''
|
|
|
var hide = false;
|
|
|
@@ -201,7 +414,11 @@ export default function FastSleepCard(props: { step: number, data: any }) {
|
|
|
{
|
|
|
statusBar()
|
|
|
}
|
|
|
- <View className='circle_content' />
|
|
|
+ <View className='circle_content'>
|
|
|
+ {
|
|
|
+ circleContent()
|
|
|
+ }
|
|
|
+ </View>
|
|
|
{
|
|
|
statusDetail()
|
|
|
}
|