update

src/features/trackTimeDuration/components/WeekCalendar.tsx

@@ -53,23 +53,23 @@ const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
         }
         var list: any = []
         var offset = 12 * 3600 * 1000 + pageIndex * pageSize * 24 * 3600 * 1000
-        if (!props.isFastSleep){
+        if (!props.isFastSleep) {
             offset = pageIndex * pageSize * 24 * 3600 * 1000
         }
         for (var i = 0; i < pageSize; i++) {
             list.push(`${i + pageIndex * pageSize},${timestamp - 7 * 24 * 3600 * 1000 * i - offset},${timestamp - 7 * 24 * 3600 * 1000 * i + 7 * 24 * 3600 * 1000 - offset}`)
         }
-        if (props.isFastSleep){
+        if (props.isFastSleep) {
             clockSummaryStats({ times: list.join(';') }).then(res => {
                 var list = (res as any).data.reverse()
                 if (pageIndex == 0) {
                     setCalendars(list)
                     setSummary(list[current].summary_stats ? list[current].summary_stats : null)
                     setCalendarData(list[current])
-    
+
                     setIsLoading(false)
                 }
-    
+
             })
         }
         else {
@@ -79,13 +79,13 @@ const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
                     setCalendars(list)
                     setSummary(list[current].summary_stats ? list[current].summary_stats : null)
                     setCalendarData(list[current])
-    
+
                     setIsLoading(false)
                 }
-    
+
             })
         }
-        
+
     }
 
     function getRecords() {
@@ -99,21 +99,21 @@ const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
         }
         var list: any = []
         var offset = 12 * 3600 * 1000 + pageIndex * pageSize * 24 * 3600 * 1000
-        if (!props.isFastSleep){
+        if (!props.isFastSleep) {
             offset = pageIndex * pageSize * 24 * 3600 * 1000
         }
         for (var i = 0; i < pageSize; i++) {
             list.push(`${i + pageIndex * pageSize},${timestamp - 7 * 24 * 3600 * 1000 * i - offset},${timestamp - 7 * 24 * 3600 * 1000 * i + 7 * 24 * 3600 * 1000 - offset}`)
         }
 
-        if (props.isFastSleep){
+        if (props.isFastSleep) {
             clockSummaryStats({ times: list.join(';') }).then(res => {
                 var list = (res as any).data.reverse()
                 if (list.length > 1) {
                     lastFastValue = list[list.length - 2].summary_stats.fast.avg
                     lastSleepValue = list[list.length - 2].summary_stats.sleep.avg
                 }
-    
+
                 if (pageIndex == 0) {
                     setCalendars(list)
                     setCurrent(list.length - 1)
@@ -130,9 +130,9 @@ const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
                     }
                 }
                 else {
-    
+
                 }
-    
+
             })
         }
         else {
@@ -142,13 +142,16 @@ const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
                     lastFastValue = list[list.length - 2].summary_stats.eat.avg
                     lastSleepValue = list[list.length - 2].summary_stats.wake.avg
                 }
-    
+
                 if (pageIndex == 0) {
                     setCalendars(list)
                     setCurrent(list.length - 1)
                     setSummary(list[list.length - 1].summary_stats ? list[list.length - 1].summary_stats : null)
                     setCalendarData(list[list.length - 1])
-                    setMinTime((res as any).extra.real_start_time_min)
+                    if ((res as any).extra) {
+                        setMinTime((res as any).extra.real_start_time_min)
+                    }
+
                     setLeft((list.length - 1) * parseInt(rpxToPx(658) + ''))
                     setIsLoading(false);
                     if (ref.current) {
@@ -159,12 +162,12 @@ const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
                     }
                 }
                 else {
-    
+
                 }
-    
+
             })
         }
-        
+
         // clockSummaryStats({start:new Date().getTime()-7*24*3600*1000,end:new Date().getTime()}).then(res => { })
     }
 
@@ -212,8 +215,8 @@ const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
 
     function onChange(e) {
         var page = e.detail.current
-        lastFastValue = props.isFastSleep?calendars[current].summary_stats.fast.avg:calendars[current].summary_stats.eat.avg
-        lastSleepValue = props.isFastSleep?calendars[current].summary_stats.sleep.avg:calendars[current].summary_stats.wake.avg
+        lastFastValue = props.isFastSleep ? calendars[current].summary_stats.fast.avg : calendars[current].summary_stats.eat.avg
+        lastSleepValue = props.isFastSleep ? calendars[current].summary_stats.sleep.avg : calendars[current].summary_stats.wake.avg
         setCurrent(page)
         setSummary(calendars[page].summary_stats ? calendars[page].summary_stats : null)
         setCalendarData(calendars[page])
@@ -231,12 +234,12 @@ const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
     function getWeekDuration() {
         if (global.language == 'en') {
             if (!props.isFastSleep) {
-                return `${t('feature.common.day_of_week_full.mon')}, ${getDate(calendarData.start)} - ${t('feature.common.day_of_week_full.sun')}, ${getDate(calendarData.end-1)}`
+                return `${t('feature.common.day_of_week_full.mon')}, ${getDate(calendarData.start)} - ${t('feature.common.day_of_week_full.sun')}, ${getDate(calendarData.end - 1)}`
             }
             return `${t('feature.common.day_of_week_full.sun')} ${t('feature.common.time_desc.afternoon')}, ${getDate(calendarData.start)} - ${t('feature.common.day_of_week_full.sun')} ${t('feature.common.time_desc.morning')}, ${getDate(calendarData.end)}`
         }
         if (!props.isFastSleep) {
-            return `${getDate(calendarData.start)} ${t('feature.common.day_of_week_full.mon')} - ${getDate(calendarData.end-1)} ${t('feature.common.day_of_week_full.sun')}`
+            return `${getDate(calendarData.start)} ${t('feature.common.day_of_week_full.mon')} - ${getDate(calendarData.end - 1)} ${t('feature.common.day_of_week_full.sun')}`
         }
         return `${getDate(calendarData.start)} ${t('feature.common.day_of_week_full.sun')}${t('feature.common.time_desc.afternoon')} - ${getDate(calendarData.end)} ${t('feature.common.day_of_week_full.sun')}${t('feature.common.time_desc.morning')}`
     }
@@ -268,35 +271,35 @@ const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
     }
 
     if (!calendarData)
-        return <View style={{height:parseInt(rpxToPx(520) + '')+rpxToPx(16)+rpxToPx(32)+rpxToPx(20)+rpxToPx(72)}}/>
+        return <View style={{ height: parseInt(rpxToPx(520) + '') + rpxToPx(16) + rpxToPx(32) + rpxToPx(20) + rpxToPx(72) }} />
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
         <View className="calendar_summary_top">
             <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                 {
-                    !summary || (props.isFastSleep?summary.fast.avg == 0:summary.eat.avg == 0) ? <View className="calendar-empty-bg" style={{ borderColor: props.isFastSleep ? ColorType.fast : ColorType.food }}>
+                    !summary || (props.isFastSleep ? summary.fast.avg == 0 : summary.eat.avg == 0) ? <View className="calendar-empty-bg" style={{ borderColor: props.isFastSleep ? ColorType.fast : ColorType.food }}>
                         <View className="calendar-empty-line" style={{ backgroundColor: props.isFastSleep ? ColorType.fast : ColorType.food }} />
                     </View> :
-                        <View className={(props.isFastSleep?lastFastValue > summary.fast.avg:lastFastValue > summary.eat.avg) ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: props.isFastSleep ? ColorType.fast : ColorType.food }}>
+                        <View className={(props.isFastSleep ? lastFastValue > summary.fast.avg : lastFastValue > summary.eat.avg) ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: props.isFastSleep ? ColorType.fast : ColorType.food }}>
                             <IconBigArrow color="#fff" width={rpxToPx(32)} />
                         </View>
                 }
                 <View className="calendar_summary_item">
                     <Text className="calendar_summary_title">{props.isFastSleep ? t('feature.track_time_duration.weekly.fast_average') : t('feature.track_time_duration.weekly.eat_average')}</Text>
-                    <Text className="calendar_summary_value" style={{ color: props.isFastSleep ? ColorType.fast : ColorType.food }}>{!summary || (props.isFastSleep?summary.fast.avg == 0:summary.eat.avg == 0) ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + (props.isFastSleep?summary.fast.avg:summary.eat.avg))}</Text>
+                    <Text className="calendar_summary_value" style={{ color: props.isFastSleep ? ColorType.fast : ColorType.food }}>{!summary || (props.isFastSleep ? summary.fast.avg == 0 : summary.eat.avg == 0) ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + (props.isFastSleep ? summary.fast.avg : summary.eat.avg))}</Text>
                 </View>
             </View>
             <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                 {
-                    !summary || (props.isFastSleep?summary.sleep.avg == 0:summary.wake.avg == 0) ? <View className="calendar-empty-bg" style={{ borderColor: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>
+                    !summary || (props.isFastSleep ? summary.sleep.avg == 0 : summary.wake.avg == 0) ? <View className="calendar-empty-bg" style={{ borderColor: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>
                         <View className="calendar-empty-line" style={{ backgroundColor: props.isFastSleep ? ColorType.sleep : ColorType.activity }} />
                     </View> :
-                        <View className={lastSleepValue > (props.isFastSleep?summary.sleep.avg:summary.wake.avg) ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>
+                        <View className={lastSleepValue > (props.isFastSleep ? summary.sleep.avg : summary.wake.avg) ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>
                             <IconBigArrow color="#fff" width={rpxToPx(32)} />
                         </View>
                 }
                 <View className="calendar_summary_item">
                     <Text className="calendar_summary_title">{props.isFastSleep ? t('feature.track_time_duration.weekly.sleep_average') : t('feature.track_time_duration.weekly.wake_average')}</Text>
-                    <Text className="calendar_summary_value" style={{ color: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>{!summary || (props.isFastSleep?summary.sleep.avg == 0:summary.wake.avg == 0) ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + (props.isFastSleep?summary.sleep.avg:summary.wake.avg))}</Text>
+                    <Text className="calendar_summary_value" style={{ color: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>{!summary || (props.isFastSleep ? summary.sleep.avg == 0 : summary.wake.avg == 0) ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + (props.isFastSleep ? summary.sleep.avg : summary.wake.avg))}</Text>
                 </View>
             </View>
 

src/pages/clock/Clock.scss

@@ -43,6 +43,14 @@
     font-weight: bold;
 }
 
+.eat_calendar_text {
+    background: linear-gradient(90deg, $foodColor 0%, $activityColor 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-weight: bold;
+}
+
 /* #endif */
 
 .index_more {
@@ -64,7 +72,7 @@
     // background-color: pink;
 }
 
-.index_main_title{
+.index_main_title {
     color: #fff;
     font-size: 72px;
     line-height: 72px;
@@ -79,7 +87,7 @@
     font-weight: bold;
 }
 
-.vip_calendar{
+.vip_calendar {
     margin-top: 40px;
     margin-left: 46px;
     width: 658px;

src/pages/clock/ClockMain.tsx

@@ -893,7 +893,7 @@ export default function Page() {
                         </View>
                         <WeekCalendar isFastSleep={true} />
                         <View className="vip_calendar" onClick={() => setShowEatCalendar(true)}>
-                            <Text style={{ color: '#fff' }}>{t('feature.track_time_duration.weekly.show_eating_window')}</Text>
+                            <Text className="eat_calendar_text">{t('feature.track_time_duration.weekly.show_eating_window')}</Text>
                         </View>
                     </View>
                 }