сделан фильтр упражнений по дням с навигацией
This commit is contained in:
parent
a2247dfd17
commit
f7843a09a7
@ -6,88 +6,170 @@ import { useParams } from "react-router-dom"
|
||||
import HeaderNav from "../components/HeaderNav"
|
||||
import BottomNavigation from "../components/BottomNavigation"
|
||||
|
||||
|
||||
import { connect } from '../confconnect';
|
||||
|
||||
|
||||
|
||||
interface CourseExercises {
|
||||
id_course: number;
|
||||
id_exercise: number;
|
||||
exercise: Exercise;
|
||||
day: number;
|
||||
position: number;
|
||||
repeats: number;
|
||||
}
|
||||
|
||||
interface Exercise {
|
||||
id: number;
|
||||
title: string;
|
||||
|
||||
}
|
||||
|
||||
|
||||
export const CourseExercises = () => {
|
||||
|
||||
const { id } = useParams<{ id: string }>();
|
||||
|
||||
// const [pacientData, setPacientData] = useState(null);
|
||||
|
||||
const [course_exercises, setExercises] = useState<CourseExercises[]>([]);
|
||||
const [selectedDay, setSelectedDay] = useState<number | null>(null);
|
||||
|
||||
|
||||
// const id = useParams();
|
||||
|
||||
const [pacientData, setPacientData] = useState(null);
|
||||
const token = localStorage.getItem('authToken');
|
||||
|
||||
useEffect(() => {
|
||||
console.log(token)
|
||||
if (!token) {
|
||||
console.log('Токен не найден');
|
||||
console.log('Токен не найден');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
connect.get(`/pacient/${id}`, {
|
||||
|
||||
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
|
||||
})
|
||||
.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]);
|
||||
.then(response => {
|
||||
console.log('Response status:', response.status);
|
||||
console.log('Данные:', response.data);
|
||||
// setPacientData(response.data);
|
||||
setExercises(response.data.course_exercises);
|
||||
|
||||
|
||||
|
||||
})
|
||||
.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);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (course_exercises.length > 0 && selectedDay === null) {
|
||||
setSelectedDay(course_exercises[0].day);
|
||||
}
|
||||
}, [course_exercises]);
|
||||
|
||||
|
||||
const days = Array.from(new Set(course_exercises.map(ex => ex.day))).sort((a, b) => a - b);
|
||||
|
||||
const filteredExercises = selectedDay !== null
|
||||
? course_exercises.filter(ex => ex.day === selectedDay)
|
||||
: course_exercises;
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="my-36 min-h-screen max-w-4xl mx-auto">
|
||||
|
||||
<HeaderNav item={'Test'} text={'test_test'} />
|
||||
|
||||
<div className="mb-20">
|
||||
<div
|
||||
|
||||
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>
|
||||
)}
|
||||
<HeaderNav item={'Курс' + ' ' + id} text={'список упражнений'} />
|
||||
|
||||
<div className="px-6 mb-8">
|
||||
|
||||
{/* Заголовок секции */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-black text-[#5F5C5C]">Список упражнений</h2>
|
||||
<span className="text-sm text-gray-500">{course_exercises.length} Упражнения</span>
|
||||
</div>
|
||||
|
||||
{/* Кнопки выбора дня */}
|
||||
{days.length > 1 && (
|
||||
<div className="px-4 sm:px-6 mb-6">
|
||||
<div className="flex space-x-2 overflow-x-auto pb-2">
|
||||
{days.map((day) => (
|
||||
<button
|
||||
key={day}
|
||||
onClick={() => {
|
||||
setSelectedDay(day);
|
||||
}}
|
||||
className={`flex-shrink-0 p-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 ${selectedDay === day
|
||||
? "bg-[#2BACBE] text-white shadow-lg"
|
||||
: "bg-white text-gray-600 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
День {day}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
<div className="exercise-list mb-20">
|
||||
{filteredExercises.length > 0 ? (
|
||||
filteredExercises.map((item) => (
|
||||
<div key={item.id_exercise} className="p-4 mb-4 hover:scale-105 transition duration-300 glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative">
|
||||
<h3 className="text-sm">Упражнение {item.id_exercise}</h3>
|
||||
<h3 className="text-xl font-semibold text-gray-600 mb-3">{item.exercise.title}</h3>
|
||||
|
||||
<div className="h-0.5 w-full bg-gray-200 my-5"></div>
|
||||
|
||||
<div className="flex gap-4 text-xs">
|
||||
<p>День: {item.day}</p>
|
||||
<span>·</span>
|
||||
<p>Позиция: {item.position}</p>
|
||||
<span>·</span>
|
||||
<p>Повторений: {item.repeats}</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p>Нет упражнений для отображения</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* <div className="mb-20">
|
||||
|
||||
{pacientData ? (
|
||||
<pre>{JSON.stringify(pacientData, null, 2)}</pre>
|
||||
) : (
|
||||
<p>Нет данных</p>
|
||||
)}
|
||||
</div> */}
|
||||
|
||||
|
||||
|
||||
<BottomNavigation />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -110,6 +110,9 @@ export const Courses = () => {
|
||||
"from-sky-400 to-cyan-600"
|
||||
];
|
||||
|
||||
//item.exercise.title
|
||||
|
||||
|
||||
return (
|
||||
<div className="my-36 min-h-screen max-w-4xl mx-auto">
|
||||
<HeaderNav item='Курсы' text='все назначенные' />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user