убран код ИИ, вывод информации на страницу отдельного курса
This commit is contained in:
parent
c133acf150
commit
a2247dfd17
@ -16,7 +16,7 @@ import { getRouteHome } from "./shared/consts/router";
|
||||
import { getRouteForgotPassword } from "./shared/consts/router";
|
||||
import { getRouteCourses } from "./shared/consts/router";
|
||||
import { getRouteCourseExercises } from "./shared/consts/router";
|
||||
import { getRouteExercise } from "./shared/consts/router";
|
||||
// import { getRouteExercise } from "./shared/consts/router";
|
||||
import { getRouteSettings } from "./shared/consts/router";
|
||||
import { getRouteCourseComplete } from "./shared/consts/router";
|
||||
|
||||
@ -31,8 +31,14 @@ const AppRoutes = () => (
|
||||
<Route path={getRouteHome()} component={Home} />
|
||||
<Route path={getRouteForgotPassword()} component={ForgotPasword} />
|
||||
<Route path={getRouteCourses()} component={Courses} />
|
||||
|
||||
{/* <Route path="pacient/:id" component={CourseExercises} /> */}
|
||||
|
||||
<Route path={getRouteCourseExercises(':id')} component={CourseExercises} />
|
||||
<Route path={getRouteExercise(':id')} component={Exercise} />
|
||||
|
||||
<Route path="/pacient/:courseId/:exerciseId" component={Exercise} />
|
||||
{/* <Route path={getRouteExercise(courseId, exerciseId)} component={Exercise} /> */}
|
||||
|
||||
<Route path={getRouteSettings()} component={Settings} />
|
||||
<Route path={getRouteCourseComplete()} component={CourseComplete} />
|
||||
</Switch>
|
||||
|
||||
@ -1,221 +1,93 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useHistory } from "react-router-dom"
|
||||
import { useState, useEffect } from "react"
|
||||
import { useParams } from "react-router-dom"
|
||||
|
||||
import HeaderNav from "../components/HeaderNav"
|
||||
import BottomNavigation from "../components/BottomNavigation"
|
||||
import video from "../assets/img/video.mov"
|
||||
|
||||
|
||||
import { connect } from '../confconnect';
|
||||
import { getRouteExercise } from "../shared/consts/router"
|
||||
|
||||
|
||||
export const CourseExercises = () => {
|
||||
const history = useHistory()
|
||||
// const { id } = useParams<{ id: string }>();
|
||||
const [currentSlide, setCurrentSlide] = useState(0)
|
||||
|
||||
const { id } = useParams<{ id: string }>();
|
||||
|
||||
|
||||
// const id = useParams();
|
||||
|
||||
const course = {
|
||||
id: 2,
|
||||
description: 'Очень сильно',
|
||||
name: 'Качаем ноги',
|
||||
exercises: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Подъемы ног лежа",
|
||||
duration: "15 мин",
|
||||
sets: 3,
|
||||
reps: 12,
|
||||
image: "/placeholder.svg?height=200&width=300",
|
||||
difficulty: "Легкий",
|
||||
description: "Укрепление мышц бедра и улучшение подвижности коленного сустава",
|
||||
calories: 45,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Приседания у стены",
|
||||
duration: "10 мин",
|
||||
sets: 2,
|
||||
reps: 15,
|
||||
image: "/placeholder.svg?height=200&width=300",
|
||||
difficulty: "Средний",
|
||||
description: "Безопасные приседания для восстановления силы ног",
|
||||
calories: 60,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Растяжка квадрицепса",
|
||||
duration: "8 мин",
|
||||
sets: 1,
|
||||
reps: 30,
|
||||
image: "/placeholder.svg?height=200&width=300",
|
||||
difficulty: "Легкий",
|
||||
description: "Улучшение гибкости и снятие напряжения",
|
||||
calories: 25,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Укрепление икр",
|
||||
duration: "12 мин",
|
||||
sets: 3,
|
||||
reps: 20,
|
||||
image: "/placeholder.svg?height=200&width=300",
|
||||
difficulty: "Средний",
|
||||
description: "Развитие силы и выносливости икроножных мышц",
|
||||
calories: 40,
|
||||
},
|
||||
]}
|
||||
const [pacientData, setPacientData] = useState(null);
|
||||
const token = localStorage.getItem('authToken');
|
||||
|
||||
// Функции для переключения на следующее/предыдущее упражнение
|
||||
const nextExercise = () => {
|
||||
setCurrentSlide((prev) => (prev + 1) % course.exercises.length)
|
||||
useEffect(() => {
|
||||
console.log(token)
|
||||
if (!token) {
|
||||
console.log('Токен не найден');
|
||||
return;
|
||||
}
|
||||
|
||||
const prevExercise = () => {
|
||||
setCurrentSlide((prev) => (prev - 1 + course.exercises.length) % course.exercises.length)
|
||||
}
|
||||
const currentExercise = course.exercises[currentSlide]
|
||||
|
||||
// const getDifficultyColor = (difficulty: string) => {
|
||||
// switch (difficulty) {
|
||||
// case "Легкий":
|
||||
// return "bg-gradient-to-r from-emerald-400 to-green-500"
|
||||
// case "Средний":
|
||||
// return "bg-gradient-to-r from-amber-400 to-orange-500"
|
||||
// case "Сложный":
|
||||
// return "bg-gradient-to-r from-red-400 to-pink-500"
|
||||
// default:
|
||||
// return "bg-gradient-to-r from-gray-400 to-gray-500"
|
||||
// }
|
||||
// }
|
||||
|
||||
connect.get(`/pacient/${id}`, {
|
||||
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
})
|
||||
.then(response => {
|
||||
console.log('Response status:', response.status);
|
||||
console.log('Данные:', response.data);
|
||||
setPacientData(response.data);
|
||||
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.response) {
|
||||
console.error('Ошибка ответа сервера:', error.response.status, error.response.data);
|
||||
|
||||
} else if (error.request) {
|
||||
console.error('Нет ответа от сервера:', error.request);
|
||||
|
||||
} else {
|
||||
console.error('Ошибка при настройке запроса:', error.message);
|
||||
|
||||
}
|
||||
});
|
||||
}, [token]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="bg-gray-50 w-full h-full overflow-auto">
|
||||
<div className="my-36 min-h-screen max-w-4xl mx-auto">
|
||||
<HeaderNav item={course.name} text={course.description} />
|
||||
|
||||
<HeaderNav item={'Test'} text={'test_test'} />
|
||||
|
||||
|
||||
{/* Exercise Slider */}
|
||||
<div className="px-4 sm:px-6 mt-34 mb-10 ">
|
||||
<div className="glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative">
|
||||
{/* Exercise Image */}
|
||||
<div className="relative">
|
||||
<video
|
||||
src={video}
|
||||
className="w-full h-120 object-cover"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-black/10"></div>
|
||||
|
||||
{/* Difficulty Badge */}
|
||||
<div className="absolute top-4 right-4">
|
||||
{/* <div
|
||||
className={`px-4 py-2 rounded-full text-xs font-bold text-white shadow-lg backdrop-blur-sm ${getDifficultyColor(currentExercise.difficulty)}`}
|
||||
>
|
||||
{currentExercise.difficulty}
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* Navigation arrows */}
|
||||
|
||||
<button
|
||||
onClick={prevExercise}
|
||||
className="z-50 absolute left-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/20 backdrop-blur-xl rounded-full flex items-center justify-center text-white hover:bg-black/30 transition-all duration-300 shadow-lg border border-white/20"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={nextExercise}
|
||||
className="z-50 absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/20 backdrop-blur-xl rounded-full flex items-center justify-center text-white hover:bg-black/30 transition-all duration-300 shadow-lg border border-white/20"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Exercise Info */}
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-semibold text-gray-600 mb-3">{currentExercise.name}</h3>
|
||||
|
||||
|
||||
|
||||
<button
|
||||
onClick={() => history.push(getRouteExercise(currentExercise.id))}
|
||||
className="w-full bg-gradient-to-r bg-orange-400 text-white font-semibold py-4 px-6 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 shadow-lg backdrop-blur-sm"
|
||||
>
|
||||
Начать упражнение
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slide indicators */}
|
||||
<div className="flex justify-center mt-6 space-x-2">
|
||||
{course.exercises.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
className={`h-4 rounded-full transition-all duration-300 ${index === currentSlide
|
||||
? "bg-gradient-to-r from-[#2BACBE] to-cyan-600 w-8 shadow-lg"
|
||||
: "bg-gray-300 w-4 hover:bg-gray-400"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Exercise List */}
|
||||
<div className="px-4 sm:px-6 mb-50">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold text-gray-800 mb-6">Все упражнения курса</h2>
|
||||
<div className="space-y-4">
|
||||
{course.exercises.map((exercise, index) => (
|
||||
<div className="mb-20">
|
||||
<div
|
||||
key={exercise.id}
|
||||
onClick={() => history.push(getRouteExercise(currentExercise.id))}
|
||||
className={`glass-morphism rounded-2xl p-4 sm:p-6 border border-white/50 shadow-lg cursor-pointer transition-all duration-300 hover:shadow-2xl transform hover:scale-[1.02] backdrop-blur-xl ${index === currentSlide ? "ring-2 ring-[#2BACBE] bg-cyan-50/20" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative">
|
||||
<div className="w-14 h-14 sm:w-16 sm:h-16 border-2 border-cyan-500 rounded-2xl flex items-center justify-center text-cyan-500 font-semibold text-lg sm:text-xl shadow-xl">
|
||||
{index + 1}
|
||||
|
||||
className="bg-green-800 p-4 hover:scale-105 transition duration-300 text-white">Перейти на упражнение</div>
|
||||
<h1>выводим текст</h1>
|
||||
{/* Выводим данные пациента */}
|
||||
{pacientData ? (
|
||||
<pre>{JSON.stringify(pacientData, null, 2)}</pre>
|
||||
) : (
|
||||
<p>Нет данных</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-gray-800 text-lg sm:text-xl truncate">{exercise.name}</h3>
|
||||
<p className="text-gray-600 text-sm mb-2 line-clamp-2">{exercise.description}</p>
|
||||
|
||||
</div>
|
||||
<div className="text-[#2BACBE] transform transition-transform duration-300 hover:translate-x-1">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BottomNavigation />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -4,8 +4,13 @@ export const getRouteHome = () => `/home`;
|
||||
export const getRouteForgotPassword = () => `/forgot-password`;
|
||||
|
||||
export const getRouteCourses = () => `/courses`;
|
||||
export const getRouteCourseExercises = (id: number | string) => `/course/${id}/exercises`;
|
||||
export const getRouteExercise = (id: number | string) => `/exercise/${id}`;
|
||||
|
||||
|
||||
|
||||
export const getRouteCourseExercises = (id: number | string) => `/pacient/${id}`;
|
||||
|
||||
|
||||
export const getRouteExercise = (courseId: number | string, execiseId: number | string) => `/pacient/${courseId}/${execiseId}`;
|
||||
|
||||
export const getRouteSettings = () => `/settings`;
|
||||
export const getRouteCourseComplete = () => `/course-complete`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user