update

src/features/trackTimeDuration/components/MainCard.scss

@@ -8,4 +8,53 @@
     justify-content: center;
     display: flex;
     flex-direction: column;
+}
+
+.badge{
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    background-color: red;
+    position: absolute;
+    right: 20px;
+    top:10px;
+}
+
+.log_row{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 652px;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+    border-bottom: solid 2px #99999966;
+}
+
+.fast_log_btn{
+    display: flex;
+    height: 88px;
+    border-radius: 44px;
+    padding: 0 52px;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(2, 182, 253, 0.2);
+    color: #02B6FD;
+    position: relative;
+}
+
+.schedule{
+    display: flex;
+    flex-direction: column;
+}
+
+.schedule_name{
+    color: #CACACA;
+    font-size: 24px;
+}
+
+.schedule_time{
+    color: #818080;
+    font-weight: bold;
+    font-size: 40px;
 }

src/features/trackTimeDuration/components/MainDayNightCard.tsx

@@ -7,12 +7,18 @@ import dayjs from "dayjs";
 import 'dayjs/locale/zh-cn';
 import 'dayjs/locale/en';
 import momentT from 'moment';
-import moment from 'moment-timezone'
+// import moment from 'moment-timezone'
 import { MainColorType } from "@/context/themes/color";
+import { useSelector } from "react-redux";
 
 export default function MainDayNightCard(props: { count: number }) {
     const [isDay, setIsDay] = useState(true)
     const [isDayMode, setIsDayMode] = useState(true)
+    const user = useSelector((state: any) => state.user);
+
+    useEffect(()=>{
+        
+    },[user.isLogin])
 
     useEffect(() => {
         dayjs.locale(global.language == 'en' ? 'en' : 'zh-cn');
@@ -20,8 +26,8 @@ export default function MainDayNightCard(props: { count: number }) {
         require('moment/locale/zh-cn')
 
         momentT.locale(global.language == 'en' ? 'en-gb' : 'zh-cn')
-        moment.defineLocale(global.language == 'en' ? 'en-gb' : 'zh-cn', (momentT.localeData() as any)._config)
-        moment.locale(global.language == 'en' ? 'en-gb' : 'zh-cn')
+        // moment.defineLocale(global.language == 'en' ? 'en-gb' : 'zh-cn', (momentT.localeData() as any)._config)
+        // moment.locale(global.language == 'en' ? 'en-gb' : 'zh-cn')
 
 
         const dt = new Date()

src/features/trackTimeDuration/components/MainFastEatCard.tsx

@@ -1,12 +1,14 @@
 import { View, Text } from "@tarojs/components";
 import './MainCard.scss'
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Modal from "@/components/layout/Modal.weapp";
 import { rpxToPx } from "@/utils/tools";
 import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
 import dayjs from "dayjs";
 import moment from 'moment-timezone'
 import { MainColorType } from "@/context/themes/color";
+import { fastWindow } from "@/services/trackTimeDuration";
+import { useSelector } from "react-redux";
 
 export default function MainFastEatCard(props: { count: any }) {
     const [isFast, setIsFast] = useState(true)
@@ -14,10 +16,61 @@ export default function MainFastEatCard(props: { count: any }) {
 
     const [showModal, setShowModal] = useState(false)
 
-    const startScheduleTime = '22:00'
-    const endScheduleTime = '10:00'
-    const startTime = '17:15'
-    const endTime = '18:00'
+    const [startScheduleTime, setStartScheduleTime] = useState('00:00')
+    const [endScheduleTime, setEndScheduleTime] = useState('00:00')
+    const [eatData, setEatData] = useState(null)
+    const [fastData, setFastData] = useState<any>(null)
+    const [startTime, setStartTime] = useState<any>(null)
+    const [endTime, setEndTime] = useState<any>(null)
+    const [status, setStatus] = useState<any>('upcoming')
+
+    const [loaded, setLoaded] = useState(false)
+
+    const user = useSelector((state: any) => state.user);
+
+    useEffect(() => {
+        fastWindow().then(res => {
+            setLoaded(true)
+            const { eat_win, fast_win } = res
+            const fast = fast_win.fast
+            setEatData(eat_win)
+            setFastData(fast_win)
+            setStartScheduleTime(fast_win.fast.schedule_start_time)
+            setEndScheduleTime(fast_win.fast.schedule_end_time)
+
+            var now = new Date().getTime()
+            if ((fast.status == 'ONGOING' || fast.target_start_time <= now && fast.target_end_time >= now) ||
+                isCurrentTimeInRange(fast.schedule_start_time, fast.schedule_end_time)) {
+                setIsFastMode(true)
+            }
+            else {
+                setIsFastMode(false)
+            }
+
+            update(fast)
+        })
+    }, [user.isLogin])
+
+    useEffect(() => {
+        if (fastData) {
+            update(fastData.fast)
+        }
+    }, [props.count])
+
+    function update(fast) {
+        var now = new Date().getTime()
+
+        if (fast.status == 'ONGOING') {
+            setStatus('process')
+        }
+        else if ((fast.target_start_time <= now && fast.target_end_time >= now) || isCurrentTimeInRange(fast.schedule_start_time, fast.schedule_end_time)) {
+            setStartTime(fast.schedule_start_time)
+            setStatus('new')
+        }
+        else {
+            setStatus('upcoming')
+        }
+    }
 
     const common: RingCommon = {
         useCase: 'ChooseScenario',
@@ -56,17 +109,17 @@ export default function MainFastEatCard(props: { count: any }) {
         if (isFastMode) {
             if (isFast) {
                 var starts: any = startTime ? startTime.split(':') : startScheduleTime.split(':')
-                const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
+                const startSeconds = parseInt(starts[0] + '') * 3600 + parseInt(starts[1] + '') * 60
 
                 const color = MainColorType.fast
-                const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
-                var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()
+                const startArc = startSeconds / (1440 * 60) * 2 * Math.PI - Math.PI / 2
+                var endSeconds = new Date().getHours() * 3600 + new Date().getMinutes() * 60 + new Date().getSeconds()
                 if (endTime) {
                     var ends: any = endTime.split(':')
-                    endSeconds = parseInt(ends[0] + '') * 60 + parseInt(ends[1] + '')
+                    endSeconds = parseInt(ends[0] + '') * 3600 + parseInt(ends[1] + '') * 60
                 }
-                const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
-                const durationArc = fastCount / 1440 * 2 * Math.PI
+                const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440 * 60
+                const durationArc = fastCount / (1440 * 60) * 2 * Math.PI
 
                 return {
                     color,
@@ -76,7 +129,7 @@ export default function MainFastEatCard(props: { count: any }) {
             }
         }
         else {
-            if (isCurrentTimeInRange(endScheduleTime,startScheduleTime)){
+            if (isCurrentTimeInRange(endScheduleTime, startScheduleTime)) {
                 var starts: any = endScheduleTime.split(':')
                 const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
 
@@ -153,6 +206,44 @@ export default function MainFastEatCard(props: { count: any }) {
         setIsFastMode(!isFastMode)
     }
 
+    function getFastStatus() {
+        switch (status) {
+            case 'process':
+                return 'Process'
+            case 'new':
+                return 'New Open'
+            case 'upcoming':
+                return 'Upcoming'
+        }
+        return ''
+    }
+
+    function getFastTime() {
+        var milliSeconds = 0;
+
+        switch (status) {
+            case 'process':
+                milliSeconds = new Date().getTime() - fastData.fast.real_start_time
+                break;
+            case 'new':
+                milliSeconds = new Date().getTime() - fastData.fast.target_start_time
+                break;
+            case 'upcoming':
+                milliSeconds = fastData.fast.target_start_time - new Date().getTime()
+                break;
+
+        }
+        var seconds = Math.floor(milliSeconds / 1000)
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const remainingSeconds = seconds % 60;
+        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+    }
+
+    if (!loaded) {
+        return <View />
+    }
+
     return <View style={{ alignItems: 'center', display: 'flex', flexDirection: 'column' }}>
 
         <View style={{ width: rpxToPx(750), }} />
@@ -163,10 +254,42 @@ export default function MainFastEatCard(props: { count: any }) {
                 ring()
             }
             <View className="ring_center">
-                <Text className="time1">{formatTime('HH:mm:ss')}</Text>
+                {
+                    isFastMode && <Text>{getFastStatus()}</Text>
+                }
+                <Text className="time1">{getFastTime()}</Text>
                 <Text className="date1">{global.language == 'en' ? formatTime('dddd, MMM D') : formatTime('MMMD日 dddd')}</Text>
             </View>
         </View>
+        {
+            isFastMode && <View>
+                <View className="log_row">
+                    <View className="schedule">
+                        <Text className="schedule_name">
+                            Fast starts:
+                        </Text>
+                        <Text className="schedule_time">
+                            {startScheduleTime}
+                        </Text>
+                    </View>
+
+                    <View className="fast_log_btn">Log{status == 'new' && <View className="badge" />}</View>
+                </View>
+                <View className="log_row">
+                    <View className="schedule">
+                        <Text className="schedule_name">
+                            Fast starts:
+                        </Text>
+                        <Text className="schedule_time">
+                            {endScheduleTime}
+                        </Text>
+                    </View>
+                    <View className="fast_log_btn">Log</View>
+                </View>
+            </View>
+        }
+
+
 
         <Text onClick={switchMode}>Switch</Text>
         {

src/services/http/api.js

@@ -1,4 +1,4 @@
-const online = process.env.TARO_ENV == 'weapp' ? true : true;
+const online = process.env.TARO_ENV == 'weapp' ? false : true;
 
 import { WX_VERSION as _WX_VERSION, APP_VERSION as _APP_VERSION, ANDROID_VERSION as _ANDROID_VERSION } from "../../../config/env";
 
@@ -51,6 +51,7 @@ export const API_FAST_SCHEDULES = `${baseUrl}/api/fast/schedules`
 export const API_FAST_CALENDARS = `${baseUrl}/api/fast/calendars/`
 export const API_CLOCK_RECORD_UPDATE = `${baseUrl}/api/clock/records`
 export const API_CLOCK_STREAKS = `${baseUrl}/api/clock/streaks`
+export const API_FAST_WINDOW = `${baseUrl}/api/fast/fast-eat-windows`
 
 
 

src/services/trackTimeDuration.tsx

@@ -1,6 +1,6 @@
 
 
-import { API_FAST_PLANS, API_FAST_CHECKS, API_FAST_CLOCKS, API_CLOCK_RECORDS, API_CLOCK_HOME, API_CLOCK_STATS, API_CLOCK_SUMMARY_RECORDS, API_CLOCK_RECORD_UPDATE, API_CLOCK_STREAKS, API_EAT_WAKES } from './http/api'
+import { API_FAST_PLANS, API_FAST_CHECKS, API_FAST_CLOCKS, API_CLOCK_RECORDS, API_CLOCK_HOME, API_CLOCK_STATS, API_CLOCK_SUMMARY_RECORDS, API_CLOCK_RECORD_UPDATE, API_CLOCK_STREAKS, API_EAT_WAKES, API_FAST_WINDOW } from './http/api'
 import { request } from './http/request';
 import { getLocalPush } from '@/features/trackTimeDuration/actions/TrackTimeActions';
 
@@ -159,4 +159,14 @@ export const getStreaks = (params:any)=>{
             resolve(res);
         })
     })
+}
+
+export const fastWindow = ()=>{
+    return new Promise((resolve) => {
+        request({
+            url: API_FAST_WINDOW, method: 'GET', data: {}
+        }).then(res => {
+            resolve(res);
+        })
+    })
 }