-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* refactor: score to reflect volume by name and calculation. * bugFix: empty exercise list is handled and a tooltip is added to aid users with adding new exercises. * feat: basic setup for new workout history tab * bugFix: fetching associated exercises for a given workout and adding fresh exercises to log workout. * feat: fetching from backend configured and stored. * feat: added muiMaterial icons to dependencies + developing front-end for workout history. * refactor: reduced nesting in mui components. Split UI into display table + content (rows) * refactor: changed accordion format for better usability. * feat: CSS coloring applied for the MUI components. * refactor: adjusted font size * refactor: to also show time. * comments
- Loading branch information
Showing
11 changed files
with
673 additions
and
318 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,112 @@ | ||
| import React, { useState } from 'react'; | ||
| import buttons from '../module_CSS/buttons.module.css' | ||
| import styles from '../module_CSS/ExerciseLogger.module.css' | ||
| import { MenuItem, Select } from '@mui/material'; | ||
| import buttons from '../module_CSS/buttons.module.css'; | ||
| import styles from '../module_CSS/ExerciseLogger.module.css'; | ||
| import { MenuItem, Select, Tooltip } from '@mui/material'; | ||
|
|
||
| const ExerciseAdder = ({exerciseList, addExercise, cancelAddExercise }) => { | ||
| const [selectedExercise, setSelectedExercise] = useState(exerciseList[0]) | ||
| const ExerciseAdder = ({ exerciseList, addExercise, cancelAddExercise }) => { | ||
| const [selectedExercise, setSelectedExercise] = useState(exerciseList.length > 0 ? exerciseList[0] : { name: "No exercises added" }); | ||
|
|
||
|
|
||
| return ( | ||
| <tr> | ||
| <td> | ||
| <Select | ||
| value={selectedExercise.name} | ||
| sx={{ | ||
| width: "100%", | ||
| color: "white", | ||
| border: "1px solid white", | ||
| '& .MuiOutlinedInput-notchedOutline': { | ||
| borderColor: 'white', | ||
| }, | ||
| '&:hover .MuiOutlinedInput-notchedOutline': { | ||
| borderColor: 'white', | ||
| }, | ||
| '& .MuiSvgIcon-root': { | ||
| color: 'white', | ||
| } | ||
| }} | ||
| onChange={e => { | ||
| setSelectedExercise(exerciseList.find(exercise => exercise.name === e.target.value)) | ||
| }} | ||
| > | ||
| {exerciseList.map((exercise) => ( | ||
| <MenuItem | ||
| key={exercise.id} | ||
| value={exercise.name} | ||
| {exerciseList.length === 0 ? ( | ||
| // Show Tooltip when no exercises are listed | ||
| <Tooltip title="No exercises recorded. Add an exercise by creating and submitting a routine." arrow> | ||
| <Select | ||
| value="No exercises added" // Default value | ||
| sx={{ | ||
| color: "black", | ||
| backgroundColor: "white", | ||
| '&:hover': { | ||
| backgroundColor: "#f0f0f0", | ||
| width: "100%", | ||
| color: "white", | ||
| border: "1px solid white", | ||
| '& .MuiOutlinedInput-notchedOutline': { | ||
| borderColor: 'white', | ||
| }, | ||
| '&:hover .MuiOutlinedInput-notchedOutline': { | ||
| borderColor: 'white', | ||
| }, | ||
| '& .MuiSvgIcon-root': { | ||
| color: 'white', | ||
| } | ||
| }} | ||
| }} | ||
| readOnly // Disable dropdown functionality when no exercises | ||
| > | ||
| {exercise.name} | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| <MenuItem value="No exercises added"> | ||
| No Exercises Recorded | ||
| </MenuItem> | ||
| </Select> | ||
| </Tooltip> | ||
| ) : ( | ||
| <Select | ||
| value={selectedExercise.name} // Selected exercise name | ||
| displayEmpty // Placeholder for exercises | ||
| sx={{ | ||
| width: "100%", | ||
| color: "white", | ||
| border: "1px solid white", | ||
| '& .MuiOutlinedInput-notchedOutline': { | ||
| borderColor: 'white', | ||
| }, | ||
| '&:hover .MuiOutlinedInput-notchedOutline': { | ||
| borderColor: 'white', | ||
| }, | ||
| '& .MuiSvgIcon-root': { | ||
| color: 'white', | ||
| } | ||
| }} | ||
| onChange={e => { | ||
| setSelectedExercise(exerciseList.find(exercise => exercise.name === e.target.value)); | ||
| }} | ||
| > | ||
| {exerciseList.map((exercise) => ( | ||
| <MenuItem | ||
| key={exercise.id} | ||
| value={exercise.name} | ||
| sx={{ | ||
| color: "black", // Set text color to black for exercises | ||
| backgroundColor: "white", | ||
| '&:hover': { | ||
| backgroundColor: "#f0f0f0", | ||
| } | ||
| }} | ||
| > | ||
| {exercise.name} | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| )} | ||
| </td> | ||
| <td> | ||
| {selectedExercise.weight} | ||
| {selectedExercise.weight || 0} | ||
| </td> | ||
| <td> | ||
| {selectedExercise.reps} | ||
| {selectedExercise.reps || 0} | ||
| </td> | ||
| <td> | ||
| {selectedExercise.setsGoal} | ||
| {selectedExercise.setsGoal || 0} | ||
| </td> | ||
| <td> | ||
| 0 | ||
| </td> | ||
|
|
||
| <td><button className={`${buttons.button} ${buttons.editButton}`} onClick={cancelAddExercise}>Remove</button></td> | ||
| <td><button className={`${buttons.button} ${styles.addButton}`} onClick={() => addExercise(selectedExercise)}>Add</button></td> | ||
| <td> | ||
| <button | ||
| className={`${buttons.button} ${buttons.editButton}`} | ||
| onClick={cancelAddExercise} | ||
| > | ||
| Remove | ||
| </button> | ||
| </td> | ||
| <td> | ||
| <button | ||
| className={`${buttons.button} ${styles.addButton}`} | ||
| onClick={() => addExercise(selectedExercise)} | ||
| disabled={exerciseList.length === 0 || selectedExercise.name === "No exercises added"} | ||
| > | ||
| Add | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| ) | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| export default ExerciseAdder; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.