запрещен переход по клику на завершенное упражнение
This commit is contained in:
parent
6494bb7625
commit
1de8b09cce
@ -138,11 +138,10 @@ export const CourseExercises = () => {
|
||||
onClick={() => {
|
||||
setSelectedDay(day)
|
||||
}}
|
||||
className={`flex-shrink-0 px-4 py-2 rounded-full text-xs sm:text-sm font-semibold transition-all duration-300 inline-block ${
|
||||
selectedDay === day
|
||||
className={`flex-shrink-0 px-4 py-2 rounded-full text-xs sm:text-sm font-semibold transition-all duration-300 inline-block ${selectedDay === day
|
||||
? "bg-[#2BACBE] text-white shadow-lg"
|
||||
: "bg-white text-gray-600 hover:bg-gray-100"
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
День {daysNav[index]}
|
||||
</button>
|
||||
@ -161,11 +160,12 @@ export const CourseExercises = () => {
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => {
|
||||
history.push(getRouteExerciseByIndex(item.id_course.toString(), index, selectedDay || undefined))
|
||||
if (!isCompleted) {
|
||||
history.push(getRouteExerciseByIndex(item.id_course.toString(), index, selectedDay || undefined));
|
||||
}
|
||||
}}
|
||||
className={`p-4 mb-4 cursor-pointer hover:scale-105 transition duration-300 glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative ${
|
||||
isCompleted ? "opacity-60 bg-gray-100/50" : ""
|
||||
}`}
|
||||
className={`p-4 mb-4 cursor-pointer hover:scale-105 transition duration-300 glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative ${isCompleted ? "opacity-60 bg-gray-100/50 cursor-default" : "cursor-pointer"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
|
||||
@ -699,22 +699,32 @@ export const Exercise = () => {
|
||||
title: "Описание упражнения",
|
||||
description: exercise?.desc || "Выполните упражнение согласно инструкции.",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Продолжительность",
|
||||
description: `Время выполнения: ${exercise?.time || 15} минут`,
|
||||
},
|
||||
{
|
||||
title: "Подходы и повторения",
|
||||
title: "Подходы",
|
||||
description: `Выполните ${exercise?.count || 1} подход по ${exercise?.repeats || 12} повторений с отдыхом 60 секунд между подходами.`,
|
||||
},
|
||||
{
|
||||
title: "Позиция в программе",
|
||||
description: `Это упражнение №${exercise?.position || 1} в программе дня ${exercise?.day || 1}.`,
|
||||
title: "Динамика",
|
||||
description: "Добавить.",
|
||||
},
|
||||
{
|
||||
title: "Статика",
|
||||
description: "Добавить",
|
||||
},
|
||||
{
|
||||
title: "Отдых",
|
||||
description: "Добавить.",
|
||||
},
|
||||
{
|
||||
title: "Продолжительность",
|
||||
description: `Время выполнения: ${exercise?.time || 5} минут`,
|
||||
},
|
||||
{
|
||||
title: "Техника безопасности",
|
||||
description: "Следите за правильной техникой выполнения. При появлении боли немедленно прекратите упражнение.",
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
// ========== ЭКРАНЫ ЗАГРУЗКИ И ОШИБОК ==========
|
||||
@ -806,11 +816,10 @@ 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" : ""}`}
|
||||
} ${isCompleted || isResting ? "opacity-50 cursor-not-allowed" : ""}`}
|
||||
>
|
||||
{isPlaying ? <PauseIcon /> : <PlayIcon />}
|
||||
</button>
|
||||
@ -865,9 +874,8 @@ 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>
|
||||
</div>
|
||||
@ -881,34 +889,58 @@ export const Exercise = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 sm:px-6 space-y-4 mb-6">
|
||||
{exerciseSteps.map((step, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-2xl p-5 border border-gray-200 shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start space-x-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-black text-gray-800 mb-2">{step.title}</h3>
|
||||
<p className="text-gray-600 leading-relaxed text-sm sm:text-base">{step.description}</p>
|
||||
</div>
|
||||
<div className="px-4 sm:px-6 space-y-4 mb-6">
|
||||
{exerciseSteps.map((step, index) => {
|
||||
// Проверяем, если текущий элемент "Динамика", отрендерим карточку с двумя блоками ("Динамика" + "Статика")
|
||||
if (step.title === "Динамика" && exerciseSteps[index + 1]?.title === "Статика") {
|
||||
return (
|
||||
<div
|
||||
key={`${index}-dynamic-static`}
|
||||
className="bg-white rounded-2xl p-5 border border-gray-200 shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex space-x-6">
|
||||
{[step, exerciseSteps[index + 1]].map((subStep, subIndex) => (
|
||||
<div key={subIndex} className="flex-1">
|
||||
<h3 className="text-lg font-black text-gray-800 mb-2">{subStep.title}</h3>
|
||||
<p className="text-gray-600 leading-relaxed text-sm sm:text-base">{subStep.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// Пропускаем элемент "Статика", т.к. он уже отрендерен вместе с "Динамика"
|
||||
if (step.title === "Статика") {
|
||||
return null;
|
||||
}
|
||||
// Для остальных - рендер стандартный
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-2xl p-5 border border-gray-200 shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start space-x-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-black text-gray-800 mb-2">{step.title}</h3>
|
||||
<p className="text-gray-600 leading-relaxed text-sm sm:text-base">{step.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="fixed bottom-36 left-0 right-0 bg-white/95 backdrop-blur-sm border-t border-gray-200 px-4 sm:px-6 py-4 shadow-xl z-30">
|
||||
<div className="max-w-md mx-auto">
|
||||
<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" : ""}`
|
||||
: "bg-cyan-400 animate-pulse"
|
||||
}`}
|
||||
}`}
|
||||
></div>
|
||||
<span className="text-sm font-bold text-gray-700">
|
||||
{isCompleted
|
||||
@ -925,13 +957,12 @@ 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"
|
||||
: "bg-gradient-to-r from-[#2BACBE] via-cyan-500 to-cyan-700"
|
||||
}`}
|
||||
}`}
|
||||
style={{ width: `${progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
@ -958,11 +989,10 @@ 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"
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{isRestPaused ? (
|
||||
<>
|
||||
@ -990,11 +1020,10 @@ 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"
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{isPlaying ? (
|
||||
<>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user