PPR

Video Demo

PPR

A List being Created

def get(self):
    try:
        classes = Class.query.all()  # Creates a list of all stored classes
        return [class_item.read() for class_item in classes], 200  # Processes & responds with the list
    except Exception as e:
        return {"message": f"Error fetching classes: {str(e)}"}, 500  # Error response

“Class.query.all()” queries the database to create a list of all stored classes. The for loop converts those database objects or classes into JSON format so the frontend is able to display all of them.

A List being Processed

@token_required()
def post(self):
    current_user = g.current_user  
    data = request.get_json()  

    try:
        if 'pick' not in data:
            return {"message": "Invalid request. 'pick' is required."}, 400  

        user = User.query.filter_by(_uid=current_user.uid).first()  
        if user is None:
            return {"message": "User not found."}, 404  
        
        new_class = Class(data['pick'], current_user.name)  
        new_class.create()  

        return new_class.read(), 201  
    except Exception as e:
        return {"message": f"Error adding class: {str(e)}"}, 500  

This code here checks if the user contains the token that shows they are authenticated and retrieves the logged-in user. It then recieves JSON data input that the user has inputted from the frontend, or the name of the class. It then queries and filters to find that certain user in the database’s table called “users”, and creates a new class entry in the list of classes which contains the user’s name, and the name of the class they added. It then returns the new class in the shown in the list of classes using “read”.

A Function

function getClasses() {
  fetch(`${pythonURI}/api/class/add`, fetchOptions)
    .then((res) => res.json())
    .then((classes) => {
      let selectedClasses = {};
      document.querySelectorAll(".dropdown").forEach((button) => {
        button.addEventListener("click", function () {
          let period = button.dataset.period;
          let classListContainer = document.getElementById("class-list");
          classListContainer.innerHTML = `<h2 style="color:white; text-align:center;">Classes for Period ${period}</h2><div class="dropdown-menu show"></div>`;
          let dropdownMenu = classListContainer.querySelector(".dropdown-menu");

          classes.forEach((classObj) => {
            let card = document.createElement("div");
            card.classList.add("class-card");
            card.dataset.class = classObj.pick;
            card.textContent = `${classObj.pick} (Added by ${classObj.user})`;
            if (selectedClasses[period] === classObj.pick) card.classList.add("selected");

            card.addEventListener("click", function () {
              dropdownMenu.querySelectorAll(".class-card").forEach((c) => c.classList.remove("selected"));
              card.classList.add("selected");
              selectedClasses[period] = classObj.pick;
              updateBackend(period, classObj.pick);
            });

            dropdownMenu.appendChild(card);
          });
        });
      });
    });
}

ITERATION

• periodButtons.forEach((button) => { … }) loops through each period button to assign a click event listener so when the user selects a period, it will return a list of classes.

• classes.forEach((classObj) => { … }) the list of classes that is returned is from this for loop which iterates through all of the classes in the list of classes and creates a class card for each and every one labeled with the class name, and person who added the class

SELECTION

• Highlights the selected class by adding a class “selected” to that class

• If another class is selected, it removes all highlights and “selected” classes from every class and adds that “selected” class to the class that is selected by the user

SEQUENCING

1. Fetches class list from backend database
2. Loops through each period button and adds an event listener to detect when a user clicks on a period button
3. When a user clicks one of the buttons, it will show the dropdown menu, then the user will be allowed to select a class
4. Highlights the selected class and updates the backend accordingly
5. Finally, commits the change to the backend and saves the data to the database

A Call to that function

  getClasses();

Calls to getClasses() function whenever the page is opened and populates dropdowns with Class data from API.