|
|
@@ -24,7 +24,7 @@ if (process.env.TARO_ENV == 'rn') {
|
|
|
}
|
|
|
|
|
|
|
|
|
-const WeekCalendar = memo((props:{isFastSleep:boolean}) => {
|
|
|
+const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
|
|
|
const [calendars, setCalendars] = useState<any>([])
|
|
|
const [current, setCurrent] = useState(0)
|
|
|
const [summary, setSummary] = useState<any>(null)
|
|
|
@@ -55,6 +55,9 @@ const WeekCalendar = memo((props:{isFastSleep:boolean}) => {
|
|
|
}
|
|
|
var list: any = []
|
|
|
var offset = 12 * 3600 * 1000 + pageIndex * pageSize * 24 * 3600 * 1000
|
|
|
+ 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}`)
|
|
|
}
|
|
|
@@ -82,6 +85,9 @@ const WeekCalendar = memo((props:{isFastSleep:boolean}) => {
|
|
|
}
|
|
|
var list: any = []
|
|
|
var offset = 12 * 3600 * 1000 + pageIndex * pageSize * 24 * 3600 * 1000
|
|
|
+ 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}`)
|
|
|
}
|
|
|
@@ -177,8 +183,14 @@ 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.mon')}, ${getDate(calendarData.end)}`
|
|
|
+ }
|
|
|
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)} ${t('feature.common.day_of_week_full.mon')}`
|
|
|
+ }
|
|
|
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')}`
|
|
|
}
|
|
|
|
|
|
@@ -195,14 +207,14 @@ const WeekCalendar = memo((props:{isFastSleep:boolean}) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- function showWeeklyItem(index){
|
|
|
- if (process.env.TARO_ENV=='weapp'){
|
|
|
- if (index >= current - 1 && index <= current + 1){
|
|
|
+ function showWeeklyItem(index) {
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ if (index >= current - 1 && index <= current + 1) {
|
|
|
return true
|
|
|
}
|
|
|
return false
|
|
|
}
|
|
|
- if (index >= current - 2 && index <= current + 2){
|
|
|
+ if (index >= current - 2 && index <= current + 2) {
|
|
|
return true
|
|
|
}
|
|
|
return false
|
|
|
@@ -214,30 +226,30 @@ const WeekCalendar = memo((props:{isFastSleep:boolean}) => {
|
|
|
<View className="calendar_summary_top">
|
|
|
<View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', flex: 1 }}>
|
|
|
{
|
|
|
- !summary || summary.fast.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 }} />
|
|
|
+ !summary || summary.fast.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={lastFastValue > summary.fast.avg ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: props.isFastSleep?ColorType.fast:ColorType.food }}>
|
|
|
+ <View className={lastFastValue > summary.fast.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 || summary.fast.avg == 0 ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.fast.avg)}</Text>
|
|
|
+ <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 || summary.fast.avg == 0 ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.fast.avg)}</Text>
|
|
|
</View>
|
|
|
</View>
|
|
|
<View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', flex: 1 }}>
|
|
|
{
|
|
|
- !summary || summary.sleep.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 }} />
|
|
|
+ !summary || summary.sleep.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 > summary.sleep.avg ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: props.isFastSleep?ColorType.sleep:ColorType.activity }}>
|
|
|
+ <View className={lastSleepValue > summary.sleep.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 || summary.sleep.avg == 0 ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.sleep.avg)}</Text>
|
|
|
+ <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 || summary.sleep.avg == 0 ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.sleep.avg)}</Text>
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
@@ -289,52 +301,35 @@ const WeekCalendar = memo((props:{isFastSleep:boolean}) => {
|
|
|
return <SwiperItem key={index}>
|
|
|
{
|
|
|
showWeeklyItem(index) ?
|
|
|
- <WeekCalendarItem data={item} isCurrentWeek={index == calendars.length - 1} isFastSleep={props.isFastSleep}/> :
|
|
|
+ <WeekCalendarItem data={item} isCurrentWeek={index == calendars.length - 1} isFastSleep={props.isFastSleep} /> :
|
|
|
<View style={{ width: parseInt(rpxToPx(658) + ''), flexShrink: 0 }} />
|
|
|
}
|
|
|
</SwiperItem>
|
|
|
})
|
|
|
}
|
|
|
</Swiper>
|
|
|
- {/* <ScrollView
|
|
|
- style={{
|
|
|
- marginLeft: parseInt(rpxToPx(46) + ''),
|
|
|
- width: parseInt(rpxToPx(658) + ''),
|
|
|
- height: parseInt(rpxToPx(520) + ''),
|
|
|
- flexDirection: 'row', display: 'flex',
|
|
|
-
|
|
|
- }}
|
|
|
- ref={ref}
|
|
|
- showScrollbar={false}
|
|
|
- onScroll={onScroll}
|
|
|
- onDragEnd={dragEnd}
|
|
|
- onDragStart={dragStart}
|
|
|
- scrollLeft={left}
|
|
|
- scrollX pagingEnabled={true}
|
|
|
- showsHorizontalScrollIndicator={false}
|
|
|
- enableFlex enhanced>
|
|
|
- {
|
|
|
- calendars.map((item, index) => {
|
|
|
-
|
|
|
- if (index == current || index == current - 1 || index == current + 1)
|
|
|
- return <WeekCalendarItem data={item} key={index} isCurrentWeek={index == calendars.length - 1} />
|
|
|
- return <View key={index} style={{ width: parseInt(rpxToPx(658) + ''), flexShrink: 0 }} />
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- </ScrollView> */}
|
|
|
- </View>
|
|
|
- <View className="chart_times" style={{ marginTop: parseInt(rpxToPx(60) + ''), marginBottom: parseInt(rpxToPx(60) + '') }}>
|
|
|
- <Text className="chart_times_txt" style={{ left: 0, top: 0 }}>12:00</Text>
|
|
|
- <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(100 - 7) + '') }}>18:00</Text>
|
|
|
- <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(200 - 5) + '') }}>24:00</Text>
|
|
|
- <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(300 - 5) + '') }}>06:00</Text>
|
|
|
- <Text className="chart_times_txt" style={{ left: 0, bottom: 0 }}>12:00</Text>
|
|
|
</View>
|
|
|
+ {
|
|
|
+ props.isFastSleep ? <View className="chart_times" style={{ marginTop: parseInt(rpxToPx(60) + ''), marginBottom: parseInt(rpxToPx(60) + '') }}>
|
|
|
+ <Text className="chart_times_txt" style={{ left: 0, top: 0 }}>12:00</Text>
|
|
|
+ <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(100 - 7) + '') }}>18:00</Text>
|
|
|
+ <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(200 - 5) + '') }}>24:00</Text>
|
|
|
+ <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(300 - 5) + '') }}>06:00</Text>
|
|
|
+ <Text className="chart_times_txt" style={{ left: 0, bottom: 0 }}>12:00</Text>
|
|
|
+ </View> :
|
|
|
+ <View className="chart_times" style={{ marginTop: parseInt(rpxToPx(60) + ''), marginBottom: parseInt(rpxToPx(60) + '') }}>
|
|
|
+ <Text className="chart_times_txt" style={{ left: 0, top: 0 }}>00:00</Text>
|
|
|
+ <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(100 - 7) + '') }}>06:00</Text>
|
|
|
+ <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(200 - 5) + '') }}>12:00</Text>
|
|
|
+ <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(300 - 5) + '') }}>18:00</Text>
|
|
|
+ <Text className="chart_times_txt" style={{ left: 0, bottom: 0 }}>24:00</Text>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
</View>
|
|
|
|
|
|
</View>
|
|
|
-
|
|
|
+
|
|
|
</View>
|
|
|
})
|
|
|
|