Skip to content

Commit

Permalink
View Description for Workout is added to training program.
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanazaq
hanazaq committed Dec 16, 2024
1 parent 8f66c29 commit f3fae7a
Show file tree
Hide file tree
Showing 2 changed files with 242 additions and 51 deletions.
167 changes: 167 additions & 0 deletions frontend/src/components/Detailed_Workout_Modal.component.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
import React from 'react';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
Button,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
UnorderedList,
ListItem,
VStack,
HStack,
Tag,
TagLabel
} from '@chakra-ui/react';

const Detailed_Workout_Modal = ({ isOpen, onClose, data, weekNumber, workoutNumber }) => {
// Fetch the workout details for the specified week and workout number
const getWorkoutByNumber = (weekNumber, workoutNumber) => {
const week = data?.weeks?.find(week => week.weekNumber === weekNumber);
return week?.workouts?.find(workout => workout.workoutNumber === workoutNumber);
};

const current_workout = getWorkoutByNumber(weekNumber, workoutNumber);

if (!current_workout) {
return (
<Modal isOpen={isOpen} onClose={onClose} size="full">
<ModalOverlay />
<ModalContent>
<ModalHeader>Workout Details Not Found</ModalHeader>
<ModalCloseButton />
<ModalBody>
<p>No data available for the selected workout.</p>
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
}

return (
<Modal isOpen={isOpen} onClose={onClose} size="full">
<ModalOverlay />
<ModalContent>
<ModalHeader>{data.title} | Week {weekNumber} | Workout {workoutNumber} Detailed Description</ModalHeader>
<ModalCloseButton />
<ModalBody overflowX="auto">
<Table variant="striped" size="lg" width="100%">
<Thead>
<Tr>
<Th>Exercise Name</Th>
<Th>Exercise Gif</Th>
<Th>Instructions</Th>
<Th>Exercise Tags</Th>
</Tr>
</Thead>
<Tbody>
{current_workout.workoutExercises.map((ex) => {
const exerciseDetails = ex.exercise;

return (
<Tr key={ex.exerciseNumber}>
{/* Exercise Name */}
<Td>
<VStack align="start">
<strong>{exerciseDetails?.name || 'N/A'}</strong>
<span>Sets: {ex.sets}</span>
<span>Reps: {ex.repetitions}</span>
</VStack>
</Td>

{/* Exercise Gif */}
<Td>
{exerciseDetails?.gifUrl ? (
<img
src={exerciseDetails.gifUrl}
alt={exerciseDetails.name || 'Exercise Gif'}
style={{
width: '200px',
height: '200px',
objectFit: 'cover'
}}
/>
) : (
'No Image Available'
)}
</Td>

{/* Instructions */}
<Td>
<UnorderedList spacing={2}>
{exerciseDetails?.instructions?.length ? (
exerciseDetails.instructions.map((instruction, index) => (
<ListItem key={index}>{instruction}</ListItem>
))
) : (
<ListItem>No Instructions Available</ListItem>
)}
</UnorderedList>
</Td>

{/* Exercise Tags */}
<Td>
<VStack align="start" spacing={2}>
{exerciseDetails?.bodyPart && (
<HStack>
<Tag colorScheme="blue">
<TagLabel>Body Part: {exerciseDetails.bodyPart}</TagLabel>
</Tag>
</HStack>
)}
{exerciseDetails?.targetMuscle && (
<HStack>
<Tag colorScheme="green">
<TagLabel>Target Muscle: {exerciseDetails.targetMuscle}</TagLabel>
</Tag>
</HStack>
)}
{exerciseDetails?.equipment && (
<HStack>
<Tag colorScheme="purple">
<TagLabel>Equipment: {exerciseDetails.equipment}</TagLabel>
</Tag>
</HStack>
)}
{exerciseDetails?.secondaryMuscles?.length > 0 && (
<HStack>
<Tag colorScheme="orange">
<TagLabel>
Secondary Muscles: {exerciseDetails.secondaryMuscles.join(', ')}
</TagLabel>
</Tag>
</HStack>
)}
</VStack>
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</ModalBody>

<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
};

export default Detailed_Workout_Modal;
126 changes: 75 additions & 51 deletions frontend/src/components/Training.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,12 @@ import { useSelector } from 'react-redux';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useParams } from 'react-router-dom';
import Detailed_Ex_Modal from './Detailed_Ex_Modal.component';
import Detailed_Workout_Modal from './Detailed_Workout_Modal.component';
import { userProfile, userSessionToken } from '../context/user';
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton } from '@chakra-ui/react';
import { Table, TableCaption, Thead, Tbody, Tfoot, Tr, Th, Td, UnorderedList, ListItem } from '@chakra-ui/react';
import PlusIcon from '../icons/PlusIcon';
import { ViewIcon } from '@chakra-ui/icons';
import {
Box,
Card,
Expand Down Expand Up @@ -90,9 +92,14 @@ const TrainingCard = () => {
const queryClient = useQueryClient();
const toast = useToast();

const weekColors = ['#f7f9fc', '#e3f2fd', '#e8f5e9', '#fff3e0', '#ede7f6'];
const { isOpen, onOpen, onClose } = useDisclosure();
const navigate = useNavigate();
const {
isOpen: isWorkoutOpen,
onOpen: onWorkoutOpen,
onClose: onWorkoutClose
} = useDisclosure();
const [weekNumber, setWeekNumber] = useState(null);
const [workoutNumber, setWorkoutNumber] = useState(null);
const [selectedExerciseId, setSelectedExerciseId] = useState(null);

// Join to a program Mutation
Expand Down Expand Up @@ -233,7 +240,11 @@ const TrainingCard = () => {
setSelectedExerciseId(exerciseId);
onOpen();
};

const handleViewWorkout = (week, workout) => {
setWeekNumber(week); // Set the week number dynamically
setWorkoutNumber(workout); // Set the workout number dynamically
onWorkoutOpen();
};

console.log(isUserJoined);

Expand Down Expand Up @@ -371,61 +382,74 @@ const TrainingCard = () => {
</Button>
</Tooltip>
</div>

{/* Weeks Table */}
<div className="bg-white shadow-md rounded-lg overflow-hidden mb-4">
<Table variant="simple" width="100%">
<Thead>
<Tr>
<Th>Week</Th>
<Th>Workout</Th>
<Th>Exercise</Th>
<Th></Th>
</Tr>
</Thead>
<Tbody>
{trainingProgram.weeks.map((week, weekIndex) => {
let displayedWeek = false; // Track if the week label has been displayed
return week.workouts.map((workout) => {
let displayedWorkout = false; // Track if the workout label has been displayed
return workout.workoutExercises.map((exerciseob, index) => (
<Tr key={exerciseob.id} bgColor={weekColors[weekIndex % weekColors.length]}>
<Td>
{!displayedWeek && `Week ${week.weekNumber}`}
{displayedWeek = true}
</Td>
<Td>
{!displayedWorkout && workout.name}
{displayedWorkout = true}
</Td>
<Td>{exerciseob.exercise.name} : {exerciseob.completedSets}</Td>
<Td>

{isUserJoined && user && (
<Button
onClick={() => handleStartSession(exerciseob.id)}
colorScheme="green"
variant="solid"
>
Start Session!
</Button>
)}
</Td>
</Tr>
));
});
})}
</Tbody>
<Tfoot></Tfoot>
</Table>
</div>
<Box bg="white" shadow="md" rounded="lg" overflow="hidden" mb={4}>
{trainingProgram.weeks.map((week, weekIndex) => (
<Box key={weekIndex} p={4} borderBottom="1px solid #e2e8f0">
<Text fontSize="xl" fontWeight="bold" mb={2}>
Week {week.weekNumber}
</Text>
<UnorderedList spacing={3} ml={6}>
{week.workouts.map((workout, workoutIndex) => (
<ListItem key={workoutIndex}>
<Flex align="center" gap={4}>
<Text fontSize="md" fontWeight="semibold" color="gray.700">
Workout {workout.workoutNumber}: {workout.name.split(":")[1]?.trim()}
</Text>
<Button
onClick={() => handleViewWorkout(week.weekNumber, workout.workoutNumber)}
colorScheme="gray"
variant="solid"
>
<ViewIcon className="w-4 h-4 mr-3" />
View Description
</Button>
</Flex>

<Table variant="simple" width="100%" mt={2}>
<Tbody>
{workout.workoutExercises.map((exerciseob) => (
<Tr key={exerciseob.id} bgColor="#f7f9fc">
<Td>
<Text>
{exerciseob.exercise.name}
</Text>
</Td>
<Td textAlign="right">
{isUserJoined && user && (
<Button
onClick={() => handleStartSession(exerciseob.id)}
colorScheme="green"
size="sm"
>
Start Session!
</Button>
)}
</Td>
</Tr>
))}
</Tbody>
</Table>
</ListItem>
))}
</UnorderedList>
</Box>
))}
</Box>

<Detailed_Ex_Modal
isOpen={isOpen}
onClose={onClose}
data={trainingProgram}
excersizeID={selectedExerciseId}
/>
<Detailed_Workout_Modal
isOpen={isWorkoutOpen}
onClose={onWorkoutClose}
data={trainingProgram}
weekNumber={weekNumber}
workoutNumber={workoutNumber}

/>
</div>
);
};
Expand Down

0 comments on commit f3fae7a

Please sign in to comment.