завершение дня с упражнениями
This commit is contained in:
parent
28c7d6d0f8
commit
f8b33ddbd5
@ -77,14 +77,21 @@ export const CourseExercises = () => {
|
||||
}
|
||||
}, [course_exercises])
|
||||
|
||||
const uniqueDays = Array.from(new Set(course_exercises.map((ex) => ex.day))).sort((a, b) => a - b)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const uniqueDays = Array.from(new Set(course_exercises.map((ex) => ex.day))).sort((a, b) => a - b)
|
||||
const dayMap: { [key: number]: number } = {}
|
||||
|
||||
uniqueDays.forEach((day, index) => {
|
||||
dayMap[day] = index + 1
|
||||
})
|
||||
|
||||
console.log('Уникальные дни', uniqueDays)
|
||||
|
||||
const daysNav = uniqueDays.map((day) => dayMap[day])
|
||||
|
||||
const days = Array.from(new Set(course_exercises.map((ex) => ex.day))).sort((a, b) => a - b)
|
||||
|
||||
@ -10,6 +10,8 @@ import { RefreshIcon } from "../components/icons/RefreshIcon"
|
||||
import HeaderNav from "../components/HeaderNav"
|
||||
import BottomNavigation from "../components/BottomNavigation"
|
||||
|
||||
import type { CourseExercises } from "./CourseExercises"
|
||||
|
||||
// Импортируем функцию для связи с сервером (бэкендом)
|
||||
import { connect } from "../confconnect"
|
||||
|
||||
@ -39,7 +41,7 @@ export const Exercise = () => {
|
||||
const { courseId, exerciseId, exerciseIndex } = useParams<RouteParams>()
|
||||
const location = useLocation()
|
||||
|
||||
const [courseExercises, setCourseExercises] = useState<any[]>([])
|
||||
const [course_exercises, setCourseExercises] = useState<CourseExercises[]>([])
|
||||
const [actualExerciseId, setActualExerciseId] = useState<string>("")
|
||||
const [currentDay, setCurrentDay] = useState<number | null>(null)
|
||||
|
||||
@ -68,6 +70,10 @@ export const Exercise = () => {
|
||||
const [totalRestTime] = useState(60)
|
||||
const [isRestPaused, setIsRestPaused] = useState(false)
|
||||
|
||||
// ========== НОВЫЕ СОСТОЯНИЯ ДЛЯ ЗАВЕРШЕНИЯ ДНЯ ==========
|
||||
const [completedExercisesInDay, setCompletedExercisesInDay] = useState(0) // Сколько упражнений уже завершено в текущем дне
|
||||
const [totalExercisesInDay, setTotalExercisesInDay] = useState(0) // Общее количество упражнений в текущем дне
|
||||
|
||||
useEffect(() => {
|
||||
const loadCourseExercises = async () => {
|
||||
if (!courseId) return
|
||||
@ -114,6 +120,26 @@ export const Exercise = () => {
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
const exercisesForCurrentDay = exercises.filter((ex: any) => ex.day === fixedDay)
|
||||
setTotalExercisesInDay(exercisesForCurrentDay.length)
|
||||
|
||||
// Подсчитываем завершенные упражнения из localStorage
|
||||
let completedCount = 0
|
||||
exercisesForCurrentDay.forEach((ex: any) => {
|
||||
const storageKey = `exerciseProgress_${courseId}_${ex.id_exercise}_day_${fixedDay}`
|
||||
const savedProgress = localStorage.getItem(storageKey)
|
||||
if (savedProgress) {
|
||||
const progress = JSON.parse(savedProgress)
|
||||
if (progress.status === 1) {
|
||||
// 1 означает полностью завершено
|
||||
completedCount++
|
||||
}
|
||||
}
|
||||
})
|
||||
setCompletedExercisesInDay(completedCount)
|
||||
|
||||
console.log(`[v0] День ${fixedDay}: завершено ${completedCount} из ${exercisesForCurrentDay.length} упражнений`)
|
||||
} catch (error) {
|
||||
console.error("Ошибка при загрузке упражнений курса:", error)
|
||||
setError("Ошибка при загрузке упражнений")
|
||||
@ -124,7 +150,6 @@ export const Exercise = () => {
|
||||
loadCourseExercises()
|
||||
}, [courseId, exerciseId, exerciseIndex, location.search])
|
||||
|
||||
// ========== ЗАГРУЗКА ДАННЫХ УПРАЖНЕНИЯ С СЕРВЕРА ==========
|
||||
useEffect(() => {
|
||||
if (!actualExerciseId || !courseId) return
|
||||
|
||||
@ -181,7 +206,6 @@ export const Exercise = () => {
|
||||
})
|
||||
}, [courseId, actualExerciseId])
|
||||
|
||||
// ========== ФУНКЦИЯ ЗАГРУЗКИ ПРОГРЕССА С СЕРВЕРА ==========
|
||||
const loadProgressFromServer = async () => {
|
||||
try {
|
||||
console.log(`Загружаем прогресс для курса ${courseId}, упражнения ${actualExerciseId}, день ${currentDay}`)
|
||||
@ -273,7 +297,6 @@ export const Exercise = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// ========== ФУНКЦИЯ КОНВЕРТАЦИИ ВРЕМЕНИ ИЗ MM:SS В СЕКУНДЫ ==========
|
||||
const convertTimeToSeconds = (timeString: string): number => {
|
||||
try {
|
||||
const parts = timeString.split(":")
|
||||
@ -295,7 +318,6 @@ export const Exercise = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// ========== ФУНКЦИЯ СОХРАНЕНИЯ ПРОГРЕССА ПОДХОДА НА СЕРВЕР ==========
|
||||
const saveSetProgress = async (setNumber: number, timeString: string, status: number) => {
|
||||
try {
|
||||
const dayToSave = currentDay || 1
|
||||
@ -311,18 +333,20 @@ export const Exercise = () => {
|
||||
day: dayToSave,
|
||||
}
|
||||
|
||||
console.log("[v0] FINAL DATA TO SERVER:", progressData)
|
||||
console.log("FINAL DATA TO SERVER:", progressData)
|
||||
|
||||
const response = await connect.post(`pacient/${courseId}/${actualExerciseId}`, progressData)
|
||||
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
console.log("[v0] SUCCESS: Progress saved to server for day", dayToSave)
|
||||
console.log("SUCCESS: Progress saved to server for day", dayToSave)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Ошибка при сохранении прогресса на сервер:", error)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const goToNextExercise = () => {
|
||||
console.log("Переходим к следующему упражнению")
|
||||
|
||||
@ -340,7 +364,6 @@ export const Exercise = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// ========== ФУНКЦИЯ ЗАВЕРШЕНИЯ ТЕКУЩЕГО ПОДХОДА ==========
|
||||
const handleCompleteSet = async () => {
|
||||
console.log("Пользователь завершает подход", currentSet, "из", totalSets)
|
||||
|
||||
@ -365,7 +388,6 @@ export const Exercise = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// ========== ФУНКЦИЯ ПОЛНОГО ЗАВЕРШЕНИЯ УПРАЖНЕНИЯ ==========
|
||||
const handleComplete = async (completedSetsArray = completedSets) => {
|
||||
console.log("УПРАЖНЕНИЕ ПОЛНОСТЬЮ ЗАВЕРШЕНО! Все подходы выполнены.")
|
||||
|
||||
@ -381,13 +403,15 @@ export const Exercise = () => {
|
||||
day: currentDay,
|
||||
position: totalTime,
|
||||
set: totalSets,
|
||||
status: 1,
|
||||
status: 1, // 1 = полностью завершено
|
||||
totalTime: totalTime,
|
||||
completedSets: completedSetsArray,
|
||||
completedAt: new Date().toISOString(),
|
||||
}),
|
||||
)
|
||||
|
||||
setCompletedExercisesInDay((prev) => prev + 1)
|
||||
|
||||
setIsCompleted(true)
|
||||
setCurrentTime(totalTime)
|
||||
setIsPlaying(false)
|
||||
@ -397,7 +421,6 @@ export const Exercise = () => {
|
||||
setCompletedSets(completedSetsArray)
|
||||
}
|
||||
|
||||
// ========== ФУНКЦИЯ ПАУЗЫ И СОХРАНЕНИЯ ПРОГРЕССА ==========
|
||||
const handlePause = async (
|
||||
completedSetsArray = completedSets,
|
||||
setNumber = currentSet,
|
||||
@ -432,7 +455,6 @@ export const Exercise = () => {
|
||||
setHasSavedProgress(true)
|
||||
}
|
||||
|
||||
// ========== ВОССТАНОВЛЕНИЕ ПРОГРЕССА ПРИ ЗАГРУЗКЕ СТРАНИЦЫ ==========
|
||||
useEffect(() => {
|
||||
const loadProgress = async () => {
|
||||
if (!actualExerciseId) return
|
||||
@ -485,7 +507,6 @@ export const Exercise = () => {
|
||||
loadProgress()
|
||||
}, [courseId, actualExerciseId, currentDay, totalTime, totalSets])
|
||||
|
||||
// ========== ОСНОВНОЙ ТАЙМЕР ДЛЯ УПРАЖНЕНИЯ ==========
|
||||
useEffect(() => {
|
||||
let interval: NodeJS.Timeout | undefined
|
||||
|
||||
@ -519,7 +540,6 @@ export const Exercise = () => {
|
||||
}
|
||||
}, [isPlaying, totalTime, isCompleted, isResting, currentSet, completedSets])
|
||||
|
||||
// ========== ТАЙМЕР ДЛЯ ОТДЫХА МЕЖДУ ПОДХОДАМИ ==========
|
||||
useEffect(() => {
|
||||
let restInterval: NodeJS.Timeout | undefined
|
||||
|
||||
@ -553,7 +573,6 @@ export const Exercise = () => {
|
||||
}
|
||||
}, [isResting, restTime, isRestPaused, currentSet])
|
||||
|
||||
// ========== ФУНКЦИИ ДЛЯ АНИМАЦИИ КНОПКИ СБРОСА ==========
|
||||
const handleClick = () => {
|
||||
console.log("Запускаем анимацию кнопки сброса")
|
||||
setIsRotating(true)
|
||||
@ -564,17 +583,14 @@ export const Exercise = () => {
|
||||
setIsRotating(false)
|
||||
}
|
||||
|
||||
// ========== ФУНКЦИЯ ФОРМАТИРОВАНИЯ ВРЕМЕНИ ==========
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = seconds % 60
|
||||
return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
|
||||
}
|
||||
|
||||
// ========== РАСЧЕТ ПРОГРЕССА ДЛЯ ПОЛОСКИ ==========
|
||||
const progress = isResting ? ((totalRestTime - restTime) / totalRestTime) * 100 : (currentTime / totalTime) * 100
|
||||
|
||||
// ========== ИКОНКИ ДЛЯ КНОПОК ==========
|
||||
const PlayIcon = () => (
|
||||
<svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
@ -602,7 +618,6 @@ export const Exercise = () => {
|
||||
</svg>
|
||||
)
|
||||
|
||||
// ========== ИНФОРМАЦИЯ ОБ УПРАЖНЕНИИ ДЛЯ ОТОБРАЖЕНИЯ ==========
|
||||
const exerciseSteps = [
|
||||
{
|
||||
title: "Описание упражнения",
|
||||
@ -626,7 +641,7 @@ export const Exercise = () => {
|
||||
},
|
||||
]
|
||||
|
||||
// ========== ЭКРАНЫ ЗАГРУЗКИ И ОШИБОК ==========
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-gray-50 w-full h-full overflow-auto">
|
||||
@ -682,7 +697,6 @@ export const Exercise = () => {
|
||||
)
|
||||
}
|
||||
|
||||
// ========== ОСНОВНОЙ ИНТЕРФЕЙС УПРАЖНЕНИЯ ==========
|
||||
return (
|
||||
<div className="bg-gray-50 w-full h-full overflow-auto">
|
||||
<div className="mt-36 mb-90 min-h-screen max-w-4xl mx-auto">
|
||||
@ -715,8 +729,7 @@ export const Exercise = () => {
|
||||
<button
|
||||
onClick={() => !isCompleted && !isResting && setIsPlaying(!isPlaying)}
|
||||
disabled={isCompleted || isResting}
|
||||
className={`w-20 h-20 rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 transform hover:scale-110 ${
|
||||
isPlaying
|
||||
className={`w-20 h-20 rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 transform hover:scale-110 ${isPlaying
|
||||
? "bg-white/20 backdrop-blur-xl border border-white/30"
|
||||
: "bg-white/30 backdrop-blur-xl border border-white/50"
|
||||
} ${isCompleted || isResting ? "opacity-50 cursor-not-allowed" : ""}`}
|
||||
@ -774,8 +787,7 @@ export const Exercise = () => {
|
||||
return (
|
||||
<div key={setNumber} className="flex-1 text-center">
|
||||
<div
|
||||
className={`h-3 rounded-full transition-all duration-300 ${
|
||||
isSetCompleted ? "bg-cyan-500" : isCurrent ? "bg-cyan-500" : "bg-gray-200"
|
||||
className={`h-3 rounded-full transition-all duration-300 ${isSetCompleted ? "bg-cyan-500" : isCurrent ? "bg-cyan-500" : "bg-gray-200"
|
||||
}`}
|
||||
/>
|
||||
<div className="text-xs font-bold mt-1 text-gray-600">{setNumber}</div>
|
||||
@ -811,8 +823,7 @@ export const Exercise = () => {
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
isCompleted
|
||||
className={`w-2 h-2 rounded-full ${isCompleted
|
||||
? "bg-cyan-400"
|
||||
: isResting
|
||||
? `bg-cyan-400 ${!isRestPaused ? "animate-pulse" : ""}`
|
||||
@ -834,8 +845,7 @@ export const Exercise = () => {
|
||||
|
||||
<div className="bg-gray-200 rounded-full h-2 mb-4 overflow-hidden">
|
||||
<div
|
||||
className={`h-2 rounded-full transition-all duration-1000 shadow-sm ${
|
||||
isCompleted
|
||||
className={`h-2 rounded-full transition-all duration-1000 shadow-sm ${isCompleted
|
||||
? "bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600"
|
||||
: isResting
|
||||
? "bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600"
|
||||
@ -848,12 +858,25 @@ export const Exercise = () => {
|
||||
<div className="flex space-x-3">
|
||||
{isCompleted ? (
|
||||
<>
|
||||
{completedExercisesInDay + 1 >= totalExercisesInDay ? (
|
||||
<button
|
||||
className="flex-1 font-bold py-3 px-4 rounded-xl bg-green-500 hover:bg-green-600 text-white flex items-center justify-center space-x-2 transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<CheckIcon />
|
||||
<span>🎉 День завершен!</span>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={goToNextExercise}
|
||||
className="flex-1 font-bold py-3 px-4 rounded-xl bg-orange-400 hover:bg-yellow-500 hover:scale-105 text-white flex items-center justify-center space-x-2 transition-all duration-300"
|
||||
>
|
||||
<span>Следующее упражнение</span>
|
||||
<span className="text-xs">
|
||||
({completedExercisesInDay + 1}/{totalExercisesInDay})
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="px-4 py-3 bg-cyan-500 text-white font-bold rounded-xl flex items-center justify-center space-x-2">
|
||||
<CheckIcon />
|
||||
<span>Завершено</span>
|
||||
@ -866,8 +889,7 @@ export const Exercise = () => {
|
||||
setIsRestPaused(!isRestPaused)
|
||||
handlePause(completedSets, currentSet, true, restTime, !isRestPaused)
|
||||
}}
|
||||
className={`flex-1 font-bold py-3 px-4 rounded-xl transition-all duration-300 flex items-center justify-center space-x-2 ${
|
||||
isRestPaused
|
||||
className={`flex-1 font-bold py-3 px-4 rounded-xl transition-all duration-300 flex items-center justify-center space-x-2 ${isRestPaused
|
||||
? "bg-yellow-500 hover:bg-yellow-600 text-white"
|
||||
: "bg-[#2BACBE] hover:bg-[#2099A8] text-white"
|
||||
}`}
|
||||
@ -910,8 +932,7 @@ export const Exercise = () => {
|
||||
setIsPlaying(false)
|
||||
}
|
||||
}}
|
||||
className={`flex-1 font-bold py-3 px-4 rounded-xl transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2 cursor-pointer ${
|
||||
isPlaying
|
||||
className={`flex-1 font-bold py-3 px-4 rounded-xl transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2 cursor-pointer ${isPlaying
|
||||
? "bg-yellow-500 hover:bg-yellow-600 text-white shadow-lg"
|
||||
: "bg-[#2BACBE] hover:bg-[#2099A8] text-white shadow-lg"
|
||||
}`}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user