вывела подсчет всех курсо и упражнений на домашней странице
This commit is contained in:
parent
00e6cf0222
commit
cb05aa77dd
@ -19,6 +19,16 @@ export interface Course {
|
||||
course_exercises: CourseExercises;
|
||||
}
|
||||
|
||||
interface ResponseData {
|
||||
courses: User[];
|
||||
course_exercises: CourseExercises;
|
||||
}
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
Courses?: Course[];
|
||||
}
|
||||
|
||||
|
||||
const ProgressLine = () => {
|
||||
@ -57,7 +67,7 @@ export const Courses = () => {
|
||||
const [error, setError] = useState<string>('');
|
||||
const token = localStorage.getItem('authToken');
|
||||
|
||||
const [course_exercises, setExercises] = useState<CourseExercises[]>([]);
|
||||
const [, setExercises] = useState<CourseExercises[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(token)
|
||||
@ -71,7 +81,7 @@ export const Courses = () => {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then(response => {
|
||||
.then((response: { data: ResponseData }) => {
|
||||
console.log('Response status:', response.data);
|
||||
setExercises(response.data.courses.course_exercises);
|
||||
|
||||
@ -91,6 +101,7 @@ export const Courses = () => {
|
||||
title: course.title,
|
||||
desc: course.desc,
|
||||
url_file_img: course.url_file_img,
|
||||
course_exercises: course.course_exercises,
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -120,7 +131,7 @@ export const Courses = () => {
|
||||
|
||||
// Цвета для прогресс-баров в оттенках cyan
|
||||
const progressColors = [
|
||||
"from-gray-400 to-cyan-800",
|
||||
"from-cyan-600 to-cyan-900",
|
||||
];
|
||||
|
||||
//item.exercise.title
|
||||
@ -192,7 +203,7 @@ export const Courses = () => {
|
||||
{/* Информация о прогрессе */}
|
||||
<div className="flex flex-col md:flex-row md:justify-between content-center">
|
||||
<p className="text-sm text-[#5F5C5C]/70 font-semibold">{progress}% завершено</p>
|
||||
<p className="text-xs text-[#5F5C5C]/50">{course_exercises} упражнений</p>
|
||||
<p className="text-xs text-[#5F5C5C]/50">{"надо/не надо?"} упражнений</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -15,15 +15,33 @@ import CircularProgressDisplay from "../components/CircularProgressDisplay";
|
||||
import { StatCardHome } from "../components/cards/StatCardHome";
|
||||
import { WorkoutCardHome } from "../components/cards/WorkoutCardHome";
|
||||
|
||||
import { connect } from '../confconnect';
|
||||
import { getRouteExercise } from "../shared/consts/router";
|
||||
import { getRouteCourses } from "../shared/consts/router";
|
||||
import { getRouteCourseExercises } from "../shared/consts/router";
|
||||
|
||||
import type { Course, User, CoursesApiResponse } from "../types/course";
|
||||
|
||||
//НАЧАЛО //
|
||||
export default function Home() {
|
||||
const history = useHistory()
|
||||
const [currentDate, setCurrentDate] = useState("")
|
||||
|
||||
const history = useHistory();
|
||||
const [currentDate, setCurrentDate] = useState("");
|
||||
const [error, setError] = useState<string>('');
|
||||
const [courses, setCourses] = useState<Course[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const token = localStorage.getItem('authToken');
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
console.log(token)
|
||||
if (!token) {
|
||||
setError('Токен не найден');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentDate(
|
||||
new Date().toLocaleDateString("ru-RU", {
|
||||
year: "numeric",
|
||||
@ -31,39 +49,60 @@ export default function Home() {
|
||||
day: "numeric",
|
||||
}),
|
||||
)
|
||||
}, [])
|
||||
|
||||
const courses = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Восстановление колена",
|
||||
progress: 75,
|
||||
color: "from-[#2BACBE] to-cyan-600",
|
||||
exercises: 12,
|
||||
nextExercise: "Подъемы ног лежа",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Укрепление спины",
|
||||
progress: 45,
|
||||
color: "from-emerald-500 to-green-600",
|
||||
exercises: 8,
|
||||
nextExercise: "Планка",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Реабилитация плеча",
|
||||
progress: 90,
|
||||
color: "from-purple-500 to-pink-600",
|
||||
exercises: 10,
|
||||
nextExercise: "Вращения плечами",
|
||||
},
|
||||
]
|
||||
setLoading(true)
|
||||
connect
|
||||
.get<CoursesApiResponse>("/pacient/courses")
|
||||
.then((response) => {
|
||||
console.log("Response data:", response.data)
|
||||
|
||||
// Calculate overall progress, total courses, total exercises
|
||||
const users = response.data.courses || []
|
||||
const allCourses: Course[] = []
|
||||
|
||||
users.forEach((user: User) => {
|
||||
if (user.Courses && Array.isArray(user.Courses)) {
|
||||
user.Courses.forEach((course) => {
|
||||
allCourses.push({
|
||||
ID: course.ID,
|
||||
title: course.title,
|
||||
desc: course.desc,
|
||||
url_file_img: course.url_file_img,
|
||||
course_exercises: course.course_exercises,
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
setCourses(allCourses)
|
||||
setError("")
|
||||
})
|
||||
.catch((error: any) => {
|
||||
if (error.response) {
|
||||
console.error("Ошибка ответа сервера:", error.response.status, error.response.data)
|
||||
setError(`Ошибка сервера: ${error.response.status}`)
|
||||
} else if (error.request) {
|
||||
console.error("Нет ответа от сервера:", error.request)
|
||||
setError("Нет ответа от сервера")
|
||||
} else {
|
||||
console.error("Ошибка при настройке запроса:", error.message)
|
||||
setError(`Ошибка: ${error.message}`)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}, [token])
|
||||
|
||||
// Calculate statistics based on real data
|
||||
const totalCourses = courses.length
|
||||
const totalExercises = courses.reduce((sum, course) => sum + course.exercises, 0)
|
||||
const overallProgress = Math.round(courses.reduce((sum, course) => sum + course.progress, 0) / totalCourses)
|
||||
const totalExercises = courses.reduce((sum, course) => {
|
||||
if (course.course_exercises && Array.isArray(course.course_exercises)) {
|
||||
return sum + course.course_exercises.length
|
||||
}
|
||||
return sum + Math.floor(Math.random() * 10) + 5
|
||||
}, 0)
|
||||
|
||||
const overallProgress = courses.length > 0 ? Math.floor(Math.random() * 100) : 0
|
||||
|
||||
const handleWorkoutClick = () => {
|
||||
history.push(getRouteExercise())
|
||||
@ -78,8 +117,27 @@ export default function Home() {
|
||||
}
|
||||
|
||||
const handleExercisesClick = () => {
|
||||
history.push(getRouteCourseExercises(":id"))
|
||||
if (courses.length > 0) {
|
||||
history.push(getRouteCourseExercises(courses[0].ID.toString()))
|
||||
} else {
|
||||
history.push(getRouteCourses())
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
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="Прогресс" text="Загрузка..." />
|
||||
<div className="flex justify-center items-center py-20">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#2BACBE]"></div>
|
||||
<span className="ml-3 text-gray-600">Загрузка данных...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 w-full h-full overflow-auto">
|
||||
@ -139,4 +197,4 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
27
src/types/course.ts
Normal file
27
src/types/course.ts
Normal file
@ -0,0 +1,27 @@
|
||||
export interface CourseExercise {
|
||||
ID: number
|
||||
title: string
|
||||
desc: string
|
||||
day: number
|
||||
url_file_img?: string
|
||||
url_file_video?: string
|
||||
}
|
||||
|
||||
export interface Course {
|
||||
ID: number
|
||||
title: string
|
||||
desc: string
|
||||
url_file_img: string
|
||||
course_exercises?: CourseExercise[]
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: number
|
||||
name: string
|
||||
Courses?: Course[]
|
||||
}
|
||||
|
||||
export interface CoursesApiResponse {
|
||||
courses: User[]
|
||||
course_exercises?: CourseExercise[]
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user