How it works

The UI

Features

Accessible "Add Activity" button
Add or Subtract time from progress
Live progress bar and percentage reading
Easy to clear progress

The UI in the photo above is rendered with Bootstrap, an HTML and CSS oriented library used for designing websites and web applications. The Bootstrap web pages communicate with the database through the python script. Variables that the web page uses are passed through python and then read and formatted by the Bootstrap.

Some web pages, such as the sign up/ log in page and the add activity page, are forms. The information entered here is stored as variables and used in the overarching python script.

The Database

User Table

Activity Table

The database holds two tables, one for users and another for the activities. The users table is used to store login information while the activities table stores the activities. SQLAlchemy, an SQL toolkit for python, is used used to communicate between the database and the script.

The Users database stores names, emails, and the passwords of the users. This information is used when logging in to identify the person and bring up their personal activities. All the passwords stored are Hashed and Salted for added security.

The Activities database stores the activities for every individual. When the dashboard renders after logging in, the activities associated with the user are extracted from the Activity database and stored as a list. Every time a new activity is created or the information of an activity is updated, the activities get rewritten into the database.

Program Architecture

WebApp Flowchart

1. The user is greeted by the Welcome/Login page. Here they can put in their credentials if they are a returning user, or if they are new, there is a link to the sign up page.

2. If the user is new, the username, password, and email they enter get stored into the databased as a new entry. If the user is returning, the back end checks the username and the password combination. If there is matching information in the table, the user gets logged in with the help of the log_in function from Flask-Login.

3. Once a user is successfully logged in, they are directed the dashboard. This is the centralized page where all of the data is presented. From here, they are able to add an activity, delete an activity, and add, subtract or clear progress from an existing activity. A progress bars updates as the user interacts with the activity as well as the percentage marker on the right.

4. When the user adds an activity and goal time they enter gets added to the table. In addition, the current user gets logged as well which makes filtering through the table a lot easier when trying to isolate one user's information.

Flask and Flask-SQLAlchemy

Selected Code

def create_complete_list():

    """ Creates a list of all the activities. Each activity consits of the

    name, the goal time and the progress time. This data is retreived by

    quering the databse. There is also an additional element in the list,

    this just allows the progress bars to appear as different colors when

    the dashboard template is rendered"""

    activity = Activity.query.filter_by(user_id=str(current_user)).all()

Here, we are querying through the Activity table and filtering by the current user. activity is a list of the activity objects that belong to the current user.

    i = 0

    num_color = 4

    complete_list = []

    while i < len(activity):

        temp_list = []

        temp_list.append(activity[i].activity_name.capitalize())

        temp_list.append(activity[i].goal_time)

        temp_list.append(activity[i].progress)

Now we can loop through the activities one by one in a while loop and access their activity name, goal time, and progress time. As we go through each unique one, the information gets added to a temporary list that lives inside of the while loop.

        # Determines the color of the progress bar. Labels are assigned on a 4

        # color cycle and are used in the html

        color_determiner = i % num_color

        if color_determiner == 0:

            color_determiner = 'danger'

        if color_determiner == 1:

            color_determiner = 'warning'

        if color_determiner == 2:

            color_determiner = 'info'

        if color_determiner == 3:

            color_determiner = 'success'

        temp_list.append(color_determiner)

This section just added an additional element to each activity list so that the colors of the progress bar rotate through four different colors.

        complete_list.append(temp_list)

Once all of the elements are added to the temporary list for one activity, it added to the larger list, complete_list, which is a compilation of lists for each activity.

        i += 1

    return complete_list

Report abuse