Building a workout

The core functionality Personal Trainer provides centers around workout and exercise building. Everything is there to support these two functions. In this section, we focus on building and editing workouts using Angular.

The WorkoutPlan model has already been defined, so we are aware of the elements that constitute a workout. The Workout Builder page facilitates user input and lets us build/persist workout data.

Once complete, the Workout Builder page will look like this:

The page has a left navigation that lists all the exercises that can be added to the workout. Clicking on the arrow icon on the right adds the exercise to the end of the workout.

The center area is designated for workout building. It consists of exercise tiles laid out in order from top to bottom and a form that allows the user to provide other details about the workout such as name, title, description, and rest duration.

This page operates in two modes:

• Create/New: This mode is used for creating a new workout. The URL is #/ builder/workout/new.
• Edit: This mode is used for editing the existing workout. The URL is #/ builder/workout/:id, where :id maps to the name of the workout.

With this understanding of the page elements and layout, it's time to build each of these elements. We will start with left nav (navigation).