I am in the process of developing a cutting-edge Angular application to monitor my fitness workouts at the gym.
Enclosed within this array are the diverse exercise names, repetitions, sets, weights, and more that constitute each workout:
workoutExercises = [
{
id: 0,
name: "Close Grip Bench ",
setOne: [5, 18.5, false], // repetition, weight, setComplete
setTwo: [3, 18.5, false],
setThree: [2, 18.5, false],
setFour: [8, 18.5, false],
setFive: [8, 18.5, false],
currentExercise: true,
},
{
id: 1,
name: "Barbell Rows",
setOne: [5, 19, false],
setTwo: [3, 28.5, false],
setThree: [2, 38, false],
setFour: [8, 47.5, false],
setFive: [8, 47.5, false],
currentExercise: false,
},
{
id: 2,
name: "Pull Ups",
setOne: [6, 0, false],
setTwo: [6, 0, false],
currentExercise: false,
},
];
My objective is to exhibit information from the initial set setOne: [5, 18.5, false] on the user interface.
Afterward, upon the user clicking Done, I intend to advance to the subsequent set setTwo: [3, 18.5, false], and display relevant details sequentially.
My initial thought was incorporating a boolean variable like currentExercise on the first set, which would update once the set is concluded. However, I believe there might exist more optimal solutions.
Could someone kindly suggest the most effective approach for addressing this particular challenge?
Please keep in mind that once an entire exercise has been completed, I aim to transition to the primary set of the next exercise.