|
|
@@ -0,0 +1,232 @@
|
|
|
+import { View, Image, Text } from '@tarojs/components'
|
|
|
+import './HeaderCircadian.scss'
|
|
|
+import { useDispatch, useSelector } from 'react-redux';
|
|
|
+import { useEffect, useState } from 'react';
|
|
|
+import { setShowActionTip } from '@/store/health';
|
|
|
+import { getScenario } from './hooks/health_hooks';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+
|
|
|
+let lauchShow = false
|
|
|
+let timer;
|
|
|
+export default function HeaderCircadian() {
|
|
|
+ const health = useSelector((state: any) => state.health);
|
|
|
+ const dispatch = useDispatch()
|
|
|
+ const [showTip, setShowTip] = useState(false)
|
|
|
+
|
|
|
+ const [icon, setIcon] = useState(require('@assets/_health/sun.png'))
|
|
|
+ const [title, setTitle] = useState('')
|
|
|
+ const [desc, setDesc] = useState('')
|
|
|
+ const [lowLight, setLowLight] = useState(false)
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (health && health.windows && !lauchShow) {
|
|
|
+ lauchShow = true
|
|
|
+ checkTip()
|
|
|
+ }
|
|
|
+ }, [health])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ checkTip()
|
|
|
+ }, [health.mode])
|
|
|
+
|
|
|
+ function checkTip() {
|
|
|
+ //启动时toast
|
|
|
+ if (health && health.windows) {
|
|
|
+ // lauchShow = true
|
|
|
+ const scenario = getScenario(health.windows, health.mode)
|
|
|
+ if (scenario.real) {
|
|
|
+ dispatch(setShowActionTip({
|
|
|
+ isShow: true,
|
|
|
+ isCompleted: false
|
|
|
+ }))
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (new Date().getTime() >= scenario.target.start_timestamp && new Date().getTime() < scenario.target.end_timestamp) {
|
|
|
+ setDesc('ON')
|
|
|
+ setLowLight(false)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ setDesc('UPCOMING')
|
|
|
+ setLowLight(true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ switch (health.mode) {
|
|
|
+ case 'FAST':
|
|
|
+ {
|
|
|
+ setIcon(require('@assets/_health/fast.png'))
|
|
|
+ setTitle('Fast time')
|
|
|
+ // setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'EAT':
|
|
|
+ {
|
|
|
+ setIcon(require('@assets/_health/eat.png'))
|
|
|
+ setTitle('Eat time')
|
|
|
+ // setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'SLEEP':
|
|
|
+ {
|
|
|
+ setIcon(require('@assets/_health/sleep.png'))
|
|
|
+ setTitle('Sleep time')
|
|
|
+ // setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'ACTIVE':
|
|
|
+ {
|
|
|
+ setIcon(require('@assets/_health/active.png'))
|
|
|
+ setTitle('Active time')
|
|
|
+ // setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'DAY':
|
|
|
+ {
|
|
|
+ setIcon(require('@assets/_health/sun.png'))
|
|
|
+ setTitle('Daytime')
|
|
|
+ // setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'NIGHT':
|
|
|
+ {
|
|
|
+ setIcon(require('@assets/_health/moon.png'))
|
|
|
+ setTitle('Nighttime')
|
|
|
+ // setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ setShowTip(true)
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer)
|
|
|
+ timer = null
|
|
|
+ }
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ setShowTip(false)
|
|
|
+ }, 3000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (health.showActionCircadian) {
|
|
|
+ setLowLight(false)
|
|
|
+ switch (health.mode) {
|
|
|
+ case 'FAST':
|
|
|
+ {
|
|
|
+ setIcon(require('@assets/_health/fast.png'))
|
|
|
+ setTitle('Fast logging')
|
|
|
+ setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'EAT':
|
|
|
+ {
|
|
|
+ setIcon(require('@assets/_health/eat.png'))
|
|
|
+ setTitle('Meal logging')
|
|
|
+ setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'SLEEP':
|
|
|
+ {
|
|
|
+ setIcon(require('@assets/_health/sleep.png'))
|
|
|
+ setTitle('Sleep logging')
|
|
|
+ setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'ACTIVE':
|
|
|
+ {
|
|
|
+ setIcon(require('@assets/_health/active.png'))
|
|
|
+ setTitle('Activity logging')
|
|
|
+ setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ setShowTip(true)
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer)
|
|
|
+ timer = null
|
|
|
+ }
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ setShowTip(false)
|
|
|
+ dispatch(setShowActionTip({
|
|
|
+ isShow: false,
|
|
|
+ isCompleted: false
|
|
|
+ }))
|
|
|
+ }, 3000)
|
|
|
+ }
|
|
|
+
|
|
|
+ }, [health.showActionCircadian])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ setInterval(() => {
|
|
|
+ if (health.windows) {
|
|
|
+ const now = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ const day = getScenario(health.windows, 'DAY')
|
|
|
+ const night = getScenario(health.windows, 'NIGHT')
|
|
|
+ const fast = getScenario(health.windows, 'FAST')
|
|
|
+ const eat = getScenario(health.windows, 'EAT')
|
|
|
+ const sleep = getScenario(health.windows, 'SLEEP')
|
|
|
+ const active = getScenario(health.windows, 'ACTIVE')
|
|
|
+ var isShow = false
|
|
|
+ if (dayjs(day.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
|
|
|
+ isShow = true;
|
|
|
+ setIcon(require('@assets/_health/sun.png'))
|
|
|
+ setTitle('Daytime')
|
|
|
+ }
|
|
|
+ else if (dayjs(night.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
|
|
|
+ isShow = true;
|
|
|
+ setIcon(require('@assets/_health/moon.png'))
|
|
|
+ setTitle('Nighttime')
|
|
|
+ }
|
|
|
+ else if (dayjs(fast.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
|
|
|
+ isShow = true;
|
|
|
+ setIcon(require('@assets/_health/fast.png'))
|
|
|
+ setTitle('Fast time')
|
|
|
+ }
|
|
|
+ else if (dayjs(eat.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
|
|
|
+ isShow = true;
|
|
|
+ setIcon(require('@assets/_health/eat.png'))
|
|
|
+ setTitle('Eat time')
|
|
|
+ }
|
|
|
+ else if (dayjs(sleep.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
|
|
|
+ isShow = true;
|
|
|
+ setIcon(require('@assets/_health/sleep.png'))
|
|
|
+ setTitle('Sleep time')
|
|
|
+ }
|
|
|
+ else if (dayjs(active.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
|
|
|
+ isShow = true;
|
|
|
+ setIcon(require('@assets/_health/active.png'))
|
|
|
+ setTitle('Active time')
|
|
|
+ }
|
|
|
+ if (isShow) {
|
|
|
+ setDesc('ON')
|
|
|
+ setLowLight(false)
|
|
|
+ setShowTip(true)
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer)
|
|
|
+ timer = null
|
|
|
+ }
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ setShowTip(false)
|
|
|
+ dispatch(setShowActionTip({
|
|
|
+ isShow: false,
|
|
|
+ isCompleted: false
|
|
|
+ }))
|
|
|
+ }, 3000)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }, 1000)
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ return <View className='circadian_bg' style={{ opacity: showTip ? 1 : 0 }}>
|
|
|
+ <Image src={icon} className='circadian_icon' style={{ opacity: lowLight ? 0.7 : 1.0 }} />
|
|
|
+ <View className='circadian_content'>
|
|
|
+ <View className='circadian_name'>{title}</View>
|
|
|
+ <View className='circadian_status'>{desc}</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+}
|