траница курсы поправлено
This commit is contained in:
parent
4b38fa67b0
commit
c133acf150
@ -5,7 +5,7 @@ import Login from "./pages/Login";
|
||||
import Home from "./pages/Home";
|
||||
import ForgotPasword from "./pages/ForgotPassword";
|
||||
import { Courses } from "./pages/Courses";
|
||||
import CourseExercises from "./pages/CourseExercises";
|
||||
import { CourseExercises } from "./pages/CourseExercises";
|
||||
import { Exercise } from "./pages/Exercise";
|
||||
import Settings from "./pages/Settings";
|
||||
import CourseComplete from "./pages/CourseComplete";
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
import { useState } from "react"
|
||||
import { useHistory } from "react-router-dom"
|
||||
|
||||
@ -8,10 +7,10 @@ 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"
|
||||
|
||||
const CourseExercises: React.FC = () => {
|
||||
export const CourseExercises = () => {
|
||||
const history = useHistory()
|
||||
// const { id } = useParams<{ id: string }>();
|
||||
const [currentSlide, setCurrentSlide] = useState(0)
|
||||
@ -220,4 +219,4 @@ const course = {
|
||||
)
|
||||
}
|
||||
|
||||
export default CourseExercises
|
||||
|
||||
|
||||
@ -2,9 +2,10 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import BottomNavigation from "../components/BottomNavigation"
|
||||
import { useHistory } from "react-router-dom" // для v5
|
||||
import { useHistory } from "react-router-dom"
|
||||
import HeaderNav from "../components/HeaderNav"
|
||||
import { connect } from '../confconnect';
|
||||
import { getRouteCourseExercises } from '../shared/consts/router';
|
||||
|
||||
interface Course {
|
||||
ID: number;
|
||||
@ -13,6 +14,31 @@ interface Course {
|
||||
url_file_img: string;
|
||||
}
|
||||
|
||||
const ProgressLine = () => {
|
||||
return (
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-orange-300 to-orange-500 transition-all duration-500 absolute left-0 top-0 rounded-l-xl"
|
||||
style={{ width: '85%' }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const AnalitcsCards = () => {
|
||||
return (
|
||||
<div className="px-6 mb-8" >
|
||||
<div className="text-center relative ">
|
||||
<div className="w-full h-10 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl">
|
||||
{/* Прогрессная часть */}
|
||||
<ProgressLine />
|
||||
|
||||
{/* Текст поверх линии */}
|
||||
<div className="absolute text-white font-semibold text-base">Вы прошли реабилитацию на {85}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Courses = () => {
|
||||
const history = useHistory();
|
||||
|
||||
@ -21,6 +47,7 @@ export const Courses = () => {
|
||||
const token = localStorage.getItem('authToken');
|
||||
|
||||
useEffect(() => {
|
||||
console.log(token)
|
||||
if (!token) {
|
||||
setError('Токен не найден');
|
||||
return;
|
||||
@ -71,27 +98,111 @@ export const Courses = () => {
|
||||
});
|
||||
}, [token]);
|
||||
|
||||
// Генерируем случайный прогресс для каждого курса
|
||||
const getRandomProgress = () => Math.floor(Math.random() * 100);
|
||||
|
||||
// Цвета для прогресс-баров в оттенках cyan
|
||||
const progressColors = [
|
||||
"from-cyan-400 to-cyan-600",
|
||||
"from-cyan-500 to-cyan-700",
|
||||
"from-teal-400 to-cyan-500",
|
||||
"from-cyan-300 to-teal-600",
|
||||
"from-sky-400 to-cyan-600"
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="my-36 min-h-screen max-w-4xl mx-auto">
|
||||
<HeaderNav item='Курсы' text='все назначенные' />
|
||||
<AnalitcsCards />
|
||||
|
||||
{error && <p className="text-red-500">{error}</p>}
|
||||
|
||||
{/* Выводим список курсов */}
|
||||
<div>
|
||||
{courses.length > 0 ? (
|
||||
courses.map(course => (
|
||||
<div key={course.ID} className="border p-4 mb-4 rounded shadow">
|
||||
<h2 className="text-xl font-bold">{course.title}</h2>
|
||||
<p>{course.desc}</p>
|
||||
{course.url_file_img && (
|
||||
<img src={course.url_file_img} alt={course.title} className="mt-2 w-full h-auto" />
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
!error && <p>Нет назначенных курсов</p>
|
||||
<div className="px-6 mb-8">
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
||||
<p className="text-red-600 font-medium">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Заголовок секции */}
|
||||
<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">{courses.length} курсов</span>
|
||||
</div>
|
||||
|
||||
{/* Выводим список курсов */}
|
||||
<div className='space-y-4'>
|
||||
{courses.length > 0 ? (
|
||||
courses.map((course, index) => {
|
||||
const progress = getRandomProgress();
|
||||
const colorClass = progressColors[index % progressColors.length];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={course.ID}
|
||||
onClick={() => history.push(getRouteCourseExercises(course.ID.toString()))}
|
||||
className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]"
|
||||
>
|
||||
<div className="flex items-center space-x-5">
|
||||
{/* Изображение курса */}
|
||||
{course.url_file_img && (
|
||||
<div className="w-16 h-16 rounded-2xl overflow-hidden flex-shrink-0">
|
||||
<img
|
||||
src={course.url_file_img || "/placeholder.svg"}
|
||||
alt={course.title}
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
e.currentTarget.src = "/placeholder.svg?height=64&width=64&text=Course"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-[#5F5C5C] text-lg mb-2">{course.title}</h3>
|
||||
|
||||
{/* Описание курса */}
|
||||
{course.desc && (
|
||||
<p className="text-sm text-[#5F5C5C]/60 mb-3 line-clamp-2">{course.desc}</p>
|
||||
)}
|
||||
|
||||
{/* Индикатор прогресса */}
|
||||
<div className="bg-white/50 rounded-full h-3 mb-2 overflow-hidden">
|
||||
<div
|
||||
className={`bg-gradient-to-r ${colorClass} h-3 rounded-full transition-all duration-700 shadow-sm`}
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Информация о прогрессе */}
|
||||
<div className="flex justify-between items-center">
|
||||
<p className="text-sm text-[#5F5C5C]/70 font-semibold">{progress}% завершено</p>
|
||||
<p className="text-xs text-[#5F5C5C]/50">{Math.floor(Math.random() * 15) + 5} упражнений</p>
|
||||
</div>
|
||||
</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>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
!error && (
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-8 text-center">
|
||||
<p className="text-gray-600 mb-4">У вас пока нет назначенных курсов</p>
|
||||
<button
|
||||
onClick={() => history.push("/courses")}
|
||||
className="bg-[#2BACBE] text-white px-4 py-2 rounded-lg hover:bg-[#2A9FB8] transition-colors"
|
||||
>
|
||||
Просмотреть доступные курсы
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BottomNavigation />
|
||||
|
||||
@ -67,4 +67,9 @@ curl -H "Authorization: Bearer YOUR_TOKEN" http://localhost:8093/pacient/courses
|
||||
"Courses": []
|
||||
}
|
||||
],
|
||||
"sessionname": "krasnova@mail.ru"
|
||||
"sessionname": "krasnova@mail.ru"
|
||||
|
||||
|
||||
curl -X GET \
|
||||
-H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NTYxMTEyNDQsInVzZXJfZW1haWwiOiJrcmFzbm92YUBtYWlsLnJ1IiwidXNlcl9pZCI6MjUsInVzZXJfbmFtZSI6ImtyYXNub3ZhQG1haWwucnUiLCJ1c2VyX3JvbGUiOiIifQ.3UyamwJrLVkdjKgUG16lYyKm1jiZAv6MRQW0Tj2Z3Tc" \
|
||||
http://localhost:8093/pacient/courses/:course_id
|
||||
Loading…
x
Reference in New Issue
Block a user