|
|
@@ -6,6 +6,9 @@ import { setShowActionTip } from '@/store/health';
|
|
|
import { getScenario } from './hooks/health_hooks';
|
|
|
import dayjs from 'dayjs';
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
+import { rpxToPx } from '@/utils/tools';
|
|
|
+import { IconActive, IconDay, IconEat, IconFast, IconNight, IconSleep } from '@/components/basic/Icons';
|
|
|
+import { MainColorType } from '@/context/themes/color';
|
|
|
|
|
|
let lauchShow = false
|
|
|
let timer;
|
|
|
@@ -14,11 +17,14 @@ export default function HeaderCircadian() {
|
|
|
const dispatch = useDispatch()
|
|
|
const [showTip, setShowTip] = useState(false)
|
|
|
|
|
|
- const [icon, setIcon] = useState(require('@assets/_health/sun.png'))
|
|
|
+ const [icon, setIcon] = useState('DAY')
|
|
|
const [title, setTitle] = useState('')
|
|
|
const [desc, setDesc] = useState('')
|
|
|
const [lowLight, setLowLight] = useState(false)
|
|
|
- const {t} = useTranslation()
|
|
|
+ const [isOG, setIsOG] = useState(false)
|
|
|
+ const { t } = useTranslation()
|
|
|
+
|
|
|
+ const kWidth = global.language == 'en' ? rpxToPx(236) : rpxToPx(176)
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (health && health.windows && !lauchShow) {
|
|
|
@@ -37,6 +43,8 @@ export default function HeaderCircadian() {
|
|
|
// lauchShow = true
|
|
|
const scenario = getScenario(health.windows, health.mode)
|
|
|
if (scenario.real || scenario.status == 'OG') {
|
|
|
+ setIcon(scenario.window)
|
|
|
+ setIsOG(true)
|
|
|
dispatch(setShowActionTip({
|
|
|
isShow: false,
|
|
|
isCompleted: false
|
|
|
@@ -49,28 +57,27 @@ export default function HeaderCircadian() {
|
|
|
}))
|
|
|
}, 50)
|
|
|
|
|
|
- return;
|
|
|
- }
|
|
|
- else if (scenario.status == 'DONE') {
|
|
|
- dispatch(setShowActionTip({
|
|
|
- isShow: false,
|
|
|
- isCompleted: false
|
|
|
- }))
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- dispatch(setShowActionTip({
|
|
|
- isShow: true,
|
|
|
- isCompleted: true
|
|
|
- }))
|
|
|
- }, 50)
|
|
|
+ switch(health.mode){
|
|
|
+ case 'FAST':
|
|
|
+ setTitle(t('health.fasting_log'))
|
|
|
+ break
|
|
|
+ case 'EAT':
|
|
|
+ setTitle(t('health.meal_log'))
|
|
|
+ break
|
|
|
+ case 'SLEEP':
|
|
|
+ setTitle(t('health.sleep_log'))
|
|
|
+ break
|
|
|
+ case 'ACTIVE':
|
|
|
+ setTitle(t('health.active_log'))
|
|
|
+ break
|
|
|
+ }
|
|
|
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
else {
|
|
|
|
|
|
if (new Date().getTime() >= scenario.target.start_timestamp && new Date().getTime() < scenario.target.end_timestamp) {
|
|
|
- const scenario = getScenario(health.windows, health.mode)
|
|
|
- setDesc(scenario.status=='OG'?t('health.in_progress'):t('health.live_now'))
|
|
|
+ setDesc( t('health.live_now'))
|
|
|
setLowLight(false)
|
|
|
}
|
|
|
else {
|
|
|
@@ -81,48 +88,49 @@ export default function HeaderCircadian() {
|
|
|
switch (health.mode) {
|
|
|
case 'FAST':
|
|
|
{
|
|
|
- setIcon(require('@assets/_health/fast.png'))
|
|
|
- setTitle(t('health.fasting'))
|
|
|
+ setIcon('FAST')
|
|
|
+ setTitle(t('health.fasting_schedule'))
|
|
|
// setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
}
|
|
|
break;
|
|
|
case 'EAT':
|
|
|
{
|
|
|
- setIcon(require('@assets/_health/eat.png'))
|
|
|
- setTitle(t('health.eating'))
|
|
|
+ setIcon('EAT')
|
|
|
+ setTitle(t('health.eating_schedule'))
|
|
|
// setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
}
|
|
|
break;
|
|
|
case 'SLEEP':
|
|
|
{
|
|
|
- setIcon(require('@assets/_health/sleep.png'))
|
|
|
- setTitle(t('health.sleep'))
|
|
|
+ setIcon('SLEEP')
|
|
|
+ setTitle(t('health.sleep_schedule'))
|
|
|
// setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
}
|
|
|
break;
|
|
|
case 'ACTIVE':
|
|
|
{
|
|
|
- setIcon(require('@assets/_health/active.png'))
|
|
|
- setTitle(t('health.active'))
|
|
|
+ setIcon('ACTIVE')
|
|
|
+ setTitle(t('health.active_schedule'))
|
|
|
// setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
}
|
|
|
break;
|
|
|
case 'DAY':
|
|
|
{
|
|
|
- setIcon(require('@assets/_health/sun.png'))
|
|
|
+ setIcon('DAY')
|
|
|
setTitle(t('health.daytime'))
|
|
|
// setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
}
|
|
|
break;
|
|
|
case 'NIGHT':
|
|
|
{
|
|
|
- setIcon(require('@assets/_health/moon.png'))
|
|
|
+ setIcon('NIGHT')
|
|
|
setTitle(t('health.nighttime'))
|
|
|
// setDesc(health.isCompleted ? 'COMPLETED' : 'IN PROGRESS')
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
+ setIsOG(false)
|
|
|
setShowTip(true)
|
|
|
if (timer) {
|
|
|
clearTimeout(timer)
|
|
|
@@ -137,37 +145,39 @@ export default function HeaderCircadian() {
|
|
|
useEffect(() => {
|
|
|
if (health.showActionCircadian) {
|
|
|
setLowLight(false)
|
|
|
+ const scenario = getScenario(health.windows,health.mode)
|
|
|
switch (health.mode) {
|
|
|
case 'FAST':
|
|
|
{
|
|
|
- setIcon(require('@assets/_health/fast.png'))
|
|
|
- setTitle(t('health.fasting'))
|
|
|
+ setIcon('FAST')
|
|
|
+ setTitle(t('health.fasting_schedule'))
|
|
|
setDesc(health.isCompleted ? 'COMPLETED' : t('health.in_progress'))
|
|
|
}
|
|
|
break;
|
|
|
case 'EAT':
|
|
|
{
|
|
|
- setIcon(require('@assets/_health/eat.png'))
|
|
|
- setTitle(t('health.eating'))
|
|
|
+ setIcon('EAT')
|
|
|
+ setTitle(t('health.eating_schedule'))
|
|
|
setDesc(health.isCompleted ? 'COMPLETED' : t('health.in_progress'))
|
|
|
}
|
|
|
break;
|
|
|
case 'SLEEP':
|
|
|
{
|
|
|
- setIcon(require('@assets/_health/sleep.png'))
|
|
|
- setTitle(t('health.sleep'))
|
|
|
+ setIcon('SLEEP')
|
|
|
+ setTitle(t('health.sleep_schedule'))
|
|
|
setDesc(health.isCompleted ? 'COMPLETED' : t('health.in_progress'))
|
|
|
}
|
|
|
break;
|
|
|
case 'ACTIVE':
|
|
|
{
|
|
|
- setIcon(require('@assets/_health/active.png'))
|
|
|
- setTitle(t('health.active'))
|
|
|
+ setIcon('ACTIVE')
|
|
|
+ setTitle(t('health.active_schedule'))
|
|
|
setDesc(health.isCompleted ? 'COMPLETED' : t('health.in_progress'))
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
+ setIsOG(scenario.status == 'OG')
|
|
|
setShowTip(true)
|
|
|
if (timer) {
|
|
|
clearTimeout(timer)
|
|
|
@@ -196,33 +206,33 @@ export default function HeaderCircadian() {
|
|
|
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'))
|
|
|
+ setIcon('DAY')
|
|
|
setTitle(t('health.daytime'))
|
|
|
}
|
|
|
else if (dayjs(night.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
|
|
|
isShow = true;
|
|
|
- setIcon(require('@assets/_health/moon.png'))
|
|
|
+ setIcon('NIGHT')
|
|
|
setTitle(t('health.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(t('health.fasting'))
|
|
|
+ setIcon('FAST')
|
|
|
+ setTitle(t('health.fasting_schedule'))
|
|
|
}
|
|
|
else if (dayjs(eat.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
|
|
|
isShow = true;
|
|
|
- setIcon(require('@assets/_health/eat.png'))
|
|
|
- setTitle(t('health.eating'))
|
|
|
+ setIcon('EAT')
|
|
|
+ setTitle(t('health.eating_schedule'))
|
|
|
}
|
|
|
else if (dayjs(sleep.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
|
|
|
isShow = true;
|
|
|
- setIcon(require('@assets/_health/sleep.png'))
|
|
|
- setTitle(t('health.sleep'))
|
|
|
+ setIcon('SLEEP')
|
|
|
+ setTitle(t('health.sleep_schedule'))
|
|
|
}
|
|
|
else if (dayjs(active.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
|
|
|
isShow = true;
|
|
|
- setIcon(require('@assets/_health/active.png'))
|
|
|
- setTitle(t('health.active'))
|
|
|
+ setIcon('ACTIVE')
|
|
|
+ setTitle(t('health.active_schedule'))
|
|
|
}
|
|
|
if (isShow) {
|
|
|
setDesc(t('health.live_now'))
|
|
|
@@ -240,19 +250,76 @@ export default function HeaderCircadian() {
|
|
|
}))
|
|
|
}, 3000)
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
+ }, 1000)
|
|
|
+ }, [])
|
|
|
|
|
|
+ function leftIcon() {
|
|
|
+ var bgColor = 'transparent'
|
|
|
+ switch (icon) {
|
|
|
+ case 'FAST':
|
|
|
+ if (isOG) bgColor = MainColorType.fast
|
|
|
+ break
|
|
|
+ case 'EAT':
|
|
|
+ if (isOG) bgColor = MainColorType.eat
|
|
|
+ break
|
|
|
+ case 'SLEEP':
|
|
|
+ if (isOG) bgColor = MainColorType.sleep
|
|
|
+ break
|
|
|
+ case 'ACTIVE':
|
|
|
+ if (isOG) bgColor = MainColorType.active
|
|
|
+ break
|
|
|
+ }
|
|
|
|
|
|
+ return <View className='circadian_icon' style={{ backgroundColor: bgColor }}>
|
|
|
+ {
|
|
|
+ icon == 'DAY' && <IconDay width={rpxToPx(36)} color={MainColorType.day} />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ icon == 'NIGHT' && <IconNight width={rpxToPx(36)} color={MainColorType.night} />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ icon == 'FAST' && <IconFast width={rpxToPx(36)} color={isOG ? MainColorType.black : MainColorType.fast} />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ icon == 'SLEEP' && <IconSleep width={rpxToPx(36)} color={isOG ? MainColorType.black : MainColorType.sleep} />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ icon == 'EAT' && <IconEat width={rpxToPx(36)} color={isOG ? MainColorType.black : MainColorType.eat} />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ icon == 'ACTIVE' && <IconActive width={rpxToPx(36)} color={isOG ? MainColorType.black : MainColorType.active} />
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ }
|
|
|
|
|
|
- }, 1000)
|
|
|
- }, [])
|
|
|
+ function contentColor() {
|
|
|
+ switch (icon) {
|
|
|
+ case 'FAST':
|
|
|
+ if (isOG) return MainColorType.fast
|
|
|
+ break
|
|
|
+ case 'EAT':
|
|
|
+ if (isOG) return MainColorType.eat
|
|
|
+ break
|
|
|
+ case 'SLEEP':
|
|
|
+ if (isOG) return MainColorType.sleep
|
|
|
+ break
|
|
|
+ case 'ACTIVE':
|
|
|
+ if (isOG) return MainColorType.active
|
|
|
+ break
|
|
|
+ }
|
|
|
+ return MainColorType.g02
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
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'>
|
|
|
+ {
|
|
|
+ leftIcon()
|
|
|
+ }
|
|
|
+ {/* <Image src={icon} className='circadian_icon' style={{ opacity: lowLight ? 0.7 : 1.0 }} /> */}
|
|
|
+ <View className='circadian_content' style={{ width: kWidth }}>
|
|
|
<View className='circadian_name'>{title}</View>
|
|
|
- <View className='circadian_status'>{desc}</View>
|
|
|
+ <View className='circadian_status' style={{ color: contentColor() }}>{desc}</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
}
|