update

src/_health/components/fast_sleep_card.tsx

@@ -140,14 +140,16 @@ export default function FastSleepCard(props: { step: number, data: any }) {
 
     function real0BigRing() {
         const { fast, sleep, status } = props.data
-        if (status == 'WFS'){
-            return {
-                color: MainColorType.fast,
-                startArc: getStartArc(fast.target.start_timestamp),
-                durationArc: getDurationArc(fast.target.start_timestamp, new Date().getTime())
-            }
+        if (status == 'WFS') {
+            if (fast.target.start_timestamp <= new Date().getTime() && new Date().getTime() < fast.target.end_timestamp)
+                return {
+                    color: MainColorType.fast,
+                    startArc: getStartArc(fast.target.start_timestamp),
+                    durationArc: getDurationArc(fast.target.start_timestamp, new Date().getTime())
+                }
+            return null
         }
-        if ( status == 'OG2_NO1') {
+        if (status == 'OG2_NO1') {
             return null;
         }
         return {
@@ -217,11 +219,9 @@ export default function FastSleepCard(props: { step: number, data: any }) {
         }
     }
 
-    function currentDot(mode) {
-
-
+    function currentDot(mode, outRange?: boolean) {
         return {
-            color: getThemeColor(mode),
+            color: outRange ? '#B2B2B2' : getThemeColor(mode),
             lineWidth: 4,
             borderColor: '#ffffff',
             offset: 0
@@ -231,6 +231,24 @@ export default function FastSleepCard(props: { step: number, data: any }) {
 
 
     function circle0() {
+        const { fast, sleep, status } = props.data
+        var outRange = true
+        var outRange2 = true
+        if (fast.status == 'OG') {
+            outRange = false
+        }
+        else if (fast.target.start_timestamp <= new Date().getTime() && new Date().getTime() < fast.target.end_timestamp) {
+            outRange = false
+        }
+
+        if (sleep.status == 'OG') {
+            outRange2 = false
+        }
+        else if (sleep.target.start_timestamp <= new Date().getTime() && new Date().getTime() < sleep.target.end_timestamp) {
+            outRange2 = false
+        }
+
+
         return <View style={{
             display: 'flex', alignItems: 'center', justifyContent: 'center', width: 114, height: 114,
             marginLeft: rpxToPx(50),
@@ -242,7 +260,7 @@ export default function FastSleepCard(props: { step: number, data: any }) {
                 targetRing={target0BigRing()}
                 realRing={real0BigRing()}
                 canvasId={'circle0_big'}
-                currentDot={currentDot('FAST')}
+                currentDot={currentDot('FAST', outRange)}
             />
 
             <View style={{
@@ -260,7 +278,7 @@ export default function FastSleepCard(props: { step: number, data: any }) {
                     targetRing={target0SmallRing()}
                     realRing={real0SmallRing()}
                     canvasId={'circle0_small'}
-                    currentDot={currentDot('SLEEP')}
+                    currentDot={currentDot('SLEEP', outRange2)}
                 />
             </View>
         </View>
@@ -268,33 +286,58 @@ export default function FastSleepCard(props: { step: number, data: any }) {
     }
 
     function circle1() {
+        const { fast, sleep, status } = props.data
+        var outRange = true
+        if (fast.status == 'OG') {
+            outRange = false
+        }
+        else if (fast.target.start_timestamp <= new Date().getTime() && new Date().getTime() < fast.target.end_timestamp) {
+            outRange = false
+        }
         return <View style={{ display: 'flex', marginTop: rpxToPx(100), marginLeft: rpxToPx(70), alignItems: 'center', justifyContent: 'center', width: 96, height: 96, position: 'relative' }}> <Rings common={common3}
             bgRing={bgRing}
             targetRing={target1BigRing()}
             realRing={real1BigRing()}
             canvasId={'circle1_big'}
-            currentDot={currentDot('FAST')}
+            currentDot={currentDot('FAST', outRange)}
         /></View>
     }
 
     function circle2() {
+        const { fast, sleep, status } = props.data
+        var outRange = true
+        if (sleep.status == 'OG') {
+            outRange = false
+        }
+        else if (sleep.target.start_timestamp <= new Date().getTime() && new Date().getTime() < sleep.target.end_timestamp) {
+            outRange = false
+        }
         return <View style={{ display: 'flex', marginTop: rpxToPx(100), marginLeft: rpxToPx(70), alignItems: 'center', justifyContent: 'center', width: 96, height: 96, position: 'relative' }}> <Rings common={common3}
             bgRing={bgRing}
             targetRing={target2BigRing()}
             realRing={real2BigRing()}
             canvasId={'circle2_big'}
-            currentDot={currentDot('SLEEP')}
+            currentDot={currentDot('SLEEP', outRange)}
 
         /></View>
     }
 
     function circle3() {
+        const { fast, sleep, status } = props.data
+        var outRange = true
+        if (fast.status == 'OG') {
+            outRange = false
+        }
+        else if (fast.target.start_timestamp <= new Date().getTime() && new Date().getTime() < fast.target.end_timestamp) {
+            outRange = false
+        }
+
         return <View style={{ display: 'flex', marginTop: rpxToPx(100), marginLeft: rpxToPx(70), alignItems: 'center', justifyContent: 'center', width: 96, height: 96, position: 'relative' }}> <Rings common={common3}
             bgRing={bgRing}
             targetRing={target3BigRing()}
             realRing={real3BigRing()}
             canvasId={'circle3_big'}
-            currentDot={currentDot('FAST')}
+            currentDot={currentDot('FAST',outRange)}
 
         /></View>
     }
@@ -611,27 +654,27 @@ export default function FastSleepCard(props: { step: number, data: any }) {
         switch (props.step) {
             case 0:
                 return <View className='right_content'>
-                    <View className='h34 ' style={{  lineHeight: rpxToPx(42) + 'px' }}>{t('health.fasting')}</View>
+                    <View className='h34 ' style={{ lineHeight: rpxToPx(42) + 'px' }}>{t('health.fasting')}</View>
                     <View className='h36 bold' style={{ color: MainColorType.fast, lineHeight: rpxToPx(52) + 'px' }}>{fastTime()}</View>
                     <View style={{ height: rpxToPx(24) }} />
-                    <View className='h34 ' style={{  lineHeight: rpxToPx(42) + 'px' }}>{t('health.sleep')}</View>
+                    <View className='h34 ' style={{ lineHeight: rpxToPx(42) + 'px' }}>{t('health.sleep')}</View>
                     <View className='h36 bold' style={{ color: MainColorType.sleep, lineHeight: rpxToPx(52) + 'px' }}>{sleepTime()}</View>
                 </View>
             case 1:
                 return <View className='right_content'>
-                    <View className='h34 ' style={{  lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_before_bed')}</View>
+                    <View className='h34 ' style={{ lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_before_bed')}</View>
                     <View style={{ height: rpxToPx(12) }} />
                     <View className='h36 bold' style={{ color: MainColorType.fast, lineHeight: rpxToPx(52) + 'px' }}>{step1()}</View>
                 </View>
             case 2:
                 return <View className='right_content'>
-                    <View className='h34 ' style={{  lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_while_sleep')}</View>
+                    <View className='h34 ' style={{ lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_while_sleep')}</View>
                     <View style={{ height: rpxToPx(12) }} />
                     <View className='h36 bold' style={{ color: MainColorType.sleep, lineHeight: rpxToPx(52) + 'px' }}>{step2()}</View>
                 </View>
             case 3:
                 return <View className='right_content'>
-                    <View className='h34 ' style={{  lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_after_sleep')}</View>
+                    <View className='h34 ' style={{ lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_after_sleep')}</View>
                     <View style={{ height: rpxToPx(12) }} />
                     <View className='h36 bold' style={{ color: MainColorType.fast, lineHeight: rpxToPx(52) + 'px' }}>{step3()}</View>
                 </View>

src/features/health/MainConsole.scss

@@ -227,6 +227,21 @@
   flex: 1;
 }
 
+.console_tag_bg{
+  width: 39px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+}
+
+.console_tag_img{
+  width: 39px;
+  height: 24px;
+}
+
 
 
 /*

src/features/health/MainConsole.tsx

@@ -797,21 +797,32 @@ export default function MainConsole(props: { type: WindowType }) {
         return '#000'
     }
 
+    function ogTime() {
+        return <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+            <View className="console_tag_bg" style={{backgroundColor:getThemeColor(health.mode)}}>
+                <Image src={global.language=='en'?require('@assets/_health/tag_log.png'):require('@assets/_health/tag_record.png')} className="console_tag_img"/>
+            </View>
+            {
+                getCountownTime(health.windows, health.mode)
+            }
+        </View>
+    }
+
     return <View className="main-console-bg">
         <Image className="main_arrow" src={require('@assets/images/center_arrow.png')} />
         <View className="main_summary">
             <View className="main_summary_time bold" style={{
                 marginTop: rpxToPx(14),
                 // color: getTitleColor()
-            }} >{getScenario(health.windows, health.mode).status == 'OG' ?getCountownTime(health.windows, health.mode):getDuration(health.windows, health.mode)}
+            }} >{getScenario(health.windows, health.mode).status == 'OG' ? ogTime() : getDuration(health.windows, health.mode)}
             </View>
             <Text className="main_summary_duration g01"
                 style={{
                     // color: getWindowStatus(health.windows, health.mode) == WindowStatusType.upcoming ? MainColorType.g02 : MainColorType.g01,
                     marginBottom: rpxToPx(30)
-                }}>{getScenario(health.windows, health.mode).status == 'OG' ?getDuration(health.windows, health.mode):getCountownTime(health.windows, health.mode)}
+                }}>{getScenario(health.windows, health.mode).status == 'OG' ? getDuration(health.windows, health.mode) : getCountownTime(health.windows, health.mode)}
                 {/* {getScenario(health.windows, health.mode).status == 'OG' ? ' (' + t('health.logging') + ')' : ''} */}
-                </Text>
+            </Text>
             <View className="border_footer_line" />
         </View>
         <View style={{ backgroundColor: '#fff', width: rpxToPx(750) }}>