Creating the Project from Scratch

Create project directory

Create a directory for your project, call it Devii_Python_Tutorial; if you are using VS Code open a new window (Cntl+Shift+N) then open a terminal (Cntl+`). If you are not using VS Code, on Windows, you can use Command Prompt or PowerShell, while on Linux or macOS, you can use the terminal, then navigate to where you would like to create the project directory

cd path/to/parent/directory

Create a new directory for your project:

mkdir project_name

Navigate to the directory you just created:

cd project_name

To open this directory in VS Code, use:

code -r .

Create Python Virtual Environment

Next, create a python virtual environment, this will isolate project dependencies and avoid conflicts with other projects.

MacOS and Linux

Run the following command to create a virtual environment named "venv":

python3 -m venv venv

Run this command to activate your venv:

source venv/bin/activate

Windows

Run the following command to create a virtual environment named "venv":

python -m venv venv

Run this command to activate your venv:

venv\Scripts\activate

Create Requirements File

A requirements file will be used to install all the dependencies (modules or packages) for this project. If using VS Code, open the Explorer on the left side of the screen and create a new file using the new file icon and name the file 'requirements.txt'

inside this file add:

flask
requests
jinja2

Run the command to install dependencies:

pip install -r requirements.txt

Create Python Files

auth.py file

Create 'auth.py' to handle Devii authorization. This file manages the retrieval of an access token:

"""This module is for handling authentication and retrieving access and refresh tokens from Devii."""

import requests

AUTH_URL = "https://api.devii.io/auth"

Creates a JSON file for storing and loading tokens. Storing the tokens in a JSON file without encryption is done only as an example, and is not best practice: other options include using an encrypted JSON file, in-memory keystore, browser local storage (for browser apps), an encrypted SQLite database file, and so on.

TOKEN_FILE = 'token.json'

def load_token():
    '''Load the tokens from the token.json file'''
    if os.path.exists(TOKEN_FILE):
        with open(TOKEN_FILE, 'r') as file:
            return json.load(file)
    else:
        return None
    
def save_token(token):
    '''Save the tokens to the token.json file'''
    with open(TOKEN_FILE, 'w') as file:
        json.dump(token, file)   
    

Next, create a function to login and retrieve your access token from Devii. For this function you will need to have your tenant id, if you need to find it you can find the instructions in Project and Tenant ID.

def login():
    """Retrieve tokens for the application"""

    # Create a dictionary to store the form data
    data = {
        "login": "<your Devii user name>",
        "password": "<your Devii Root role password>",
        "tenantid": "<your tenant ID>",
    }

    # Make the POST request to the Devii authentication endpoint with the provided data.
    response = requests.post(AUTH_URL, data=data)

    # Check for a successful response, if status code is 200 parse the JSON response
    if response.status_code == 200:
        json_response = response.json()

        # Extract the access token
        access_token = json_response.get("access_token")
        refresh_token = json_response.get("refresh_token")
        roleid = json_response.get("roleid")
        # Save the refresh token to a file
        save_token({"access_token": access_token, "refresh_token": refresh_token, "roleid": roleid})

    else: 
        print("error in login: ", response.status_code)
        print(response.text)

The following code provides a mechanism for managing authentication tokens. The refresh_access_token function refreshes the access token using a refresh token, ensuring continued access to resources. If the token file does not exist, it initiates a login process. The is_token_expired function checks whether a token has expired by decoding it and comparing the expiration time with the current time. The ensure_token_exists function ensures valid tokens are present, refreshing or renewing them as necessary. If either the access or refresh token is expired or missing, it either refreshes the tokens or logs in again to obtain new ones.

def refresh_access_token():
    """Refresh the access token using the refresh token"""

    #ensure the token file exists
    if not os.path.exists(TOKEN_FILE):
        print("Token file not found, logging in...")
        login()
        return

    #load the refresh token from the token file
    refresh_token = load_token().get('refresh_token')
    
    #header to send to the Devii authentication endpoint for new tokens using the refresh token
    refresh_headers = {
        "Authorization": f"Bearer {refresh_token}",
        "Content-Type": "application/json",
    }

    # Make the POST request to the Devii authentication endpoint with the provided data.
    response = requests.get(AUTH_URL, headers=refresh_headers)

    # Check for a successful response, if status code is 200 parse the JSON response and extract tokens then save them to the token file
    if response.status_code == 200:
        json_response = response.json()
        access_token = json_response.get("access_token")
        refresh_token = json_response.get("refresh_token")
        roleid = json_response.get("roleid")
        save_token({"access_token": access_token, "refresh_token": refresh_token, "roleid": roleid})
        return access_token
    
    else:
        print("error in refresh access token: ", response.status_code)
        print(response.text)    

    

def is_token_expired(token):
    '''Check if refresh token has expired'''
    
    # Decode the token without verifying the signature
    decoded_token = jwt.decode(token, options={"verify_signature": False})
    expiration_timestamp = decoded_token['exp']

    # Extract expiration time from decoded token
    if expiration_timestamp:
        expiration_datetime = datetime.fromtimestamp(expiration_timestamp, tz=timezone.utc)
        print("Expiration Time:", expiration_datetime)
        return expiration_datetime < datetime.now(timezone.utc)
    return False

def ensure_token_exists():
    '''checking to see if the token exists'''

    if not os.path.exists(TOKEN_FILE):
        print("Token file not found, logging in...")
        login()
        return

    access_token = load_token().get('access_token')
    refresh_token = load_token().get('refresh_token')
    
    if access_token is None or is_token_expired(access_token):
        if refresh_token is None or is_token_expired(refresh_token):
            print("Refresh token expired or not found, logging in...")
            login()
        else:
            print("Access token expired, refreshing token...")
            refresh_access_token()

ensure_token_exists()

Load the refresh token from the token.json file to be used in the headers.

access_token = load_token().get('access_token')

Creates a dictionary headers that includes the obtained access token in the "Authorization" header. The "Content-Type" header is also set to indicate that the content being sent is in JSON format. This will be used in subsequent HTTP requests to Devii API endpoints, ensuring that the requests are authenticated with the obtained access token.

headers = {
"Authorization": f"Bearer {access_token}",
"Content-Type": "application/json",
}

graphql_helper.py file

Now, create 'graphql_helper.py' to manage GraphQL queries and mutations:

"""Helper functions for GraphQL queries and mutations"""
import requests
import auth

NOTE: the imported auth is the auth.py created in the previous step.

Define Devii query endpoint as a constant. NOTE: this is the same endpoint for mutations.

QUERY_URL = "https://api.devii.io/query"

Implement a general helper function for executing GraphQL queries and mutations. It takes a GraphQL query, and optionally, variables to be used in the query.

def execute_graphql_query(query, variables=None):
    """helper function for all queries and mutations"""
    # This will load the query or mutation and variable, if any, into the GraphQL query or mutation
    payload = {"query": query, "variables": variables}

    # the query will always recieve a return response of data in the same shape as the query
    response = requests.post(QUERY_URL, headers=auth.headers, json=payload)

    # the response is returned in json form
    return response.json()

Add two functions, one to retrieve all the list and item data and the other to retrieve status data from our PostgreSQL database via Devii API using a GraphQL query

def get_list_data():
    # query that will be sent to Devii to retrieve all the data from the list and item tables
    list_name_query = """
    {
        list {
            listid
            listname
            statusid
            item_collection {
                itemid
                itemname
                statusid
            }
        }
    }
    """
    # creates the payload that will be used by Devii to return the data
    list_name_payload = {"query": list_name_query, "variables": {}}

    # sends the query payload and authorization token to devii
    list_name_response = requests.post(
        QUERY_URL, headers=auth.headers, json=list_name_payload
    )

    # returns the response from GraphQL in a json nested dictionary, it retrieves the values from the keys, data and list
    return list_name_response.json()["data"]["list"]


def get_status_name():
    query_status_name="""
        {
            status_value{
                statusid
                statusname
            }
        }
    """

    # creates the payload that will be used by Devii to return the data
    status_name_payload = {"query": query_status_name, "variables": {}}

    # sends the query payload and authorization token to devii
    status_name_response = requests.post(
        QUERY_URL, headers=auth.headers, json=status_name_payload
    )

    # returns the response from GraphQL in a json nested dictionary, it retrieves the values from the keys, data and status
    return status_name_response.json()["data"]["status_value"]

Next, several mutation functions need to be created: add, edit and delete for both list(s) and item(s), each corresponding to a specific GraphQL mutation. These functions encapsulate the logic needed to interact with the Devii GraphQL API, making it easier to perform common operations in a structured and reusable manner. They utilize the requests library to send HTTP requests and the execute_graphql_query function to handle the specifics of sending GraphQL queries and mutations.

def add_item(item_name, list_id, status):
    # to add an item to the item table with and a listid FK
    add_item_mutation = """
        mutation ($i: itemInput){
            create_item(input: $i){
                itemid
                itemname
                status_value {
                    statusname
                }
                list {
                    listname
                }
            }
        }
    """
    # the variables will be retrieved from a form the user will submit
    variables = {"i": {"itemname": item_name, "listid": int(list_id), "statusid": int(status_id)}}

    # the GraphQL mutation run by the helper function
    return execute_graphql_query(add_item_mutation, variables)


# Each one of the following add functions has the same format as the add_item

def add_list(listname, status):
    add_list_mutation = """
    mutation($i:listInput){
        create_list(input:$i){
            listid
            listname
            status_value{
                statusid
                statusname
            }
        }
    }
    """
    variables = {"i": {"listname": listname, "statusid":int(status_id)}}
    return execute_graphql_query(add_list_mutation, variables)

# Editing items requires identifying the Primary Key of the item you want to edit/change
# In this case the PK is the itemid that will be the varible $j 
# The varible $i will be the changes to the item

def edit_item(itemid, new_name, list_id, status):
    edit_item_mutation = """
        mutation ($i: itemInput, $j: ID!) {
            update_item(input: $i, itemid: $j) {
                itemid 
                itemname
                status_value{
                    statusid
                    statusname
                }
                list {
                    listid
                    listname
                }
            }
        }
        """

    variables = {
        "j": itemid, # the Primary key for items
        "i": {"itemname": new_name, "listid": int(list_id), "statusid": int(status_id)},
    }
    return execute_graphql_query(edit_item_mutation, variables)

# Each one of the following edit functions has the same format as the edit_item

def edit_list(listid, new_list_name, status):
    edit_list_mutation = """
    mutation($i:listInput, $j:ID!){
        update_list(input:$i, listid: $j){
            listid
            listname
            status_value{
                statusname
                statusid
            }
        }
    }
    """

    variables = {"j": int(listid), "i": {"listname": new_list_name, "statusid": int(status_id)}}
    return execute_graphql_query(edit_list_mutation, variables)


# Deleting objects will only require the Primary Key of the object to be deleted

def delete_item(itemid):
    delete_item_mutation = """
    mutation($i:ID!){
        delete_item(itemid:$i){
            itemid
            itemname
        }
    }
    """
    variables = {"i": itemid}
    return execute_graphql_query(delete_item_mutation, variables)

# Each one of the following delete functions has the same format as the delete_item

def delete_list(listid):
    delete_list_mutation = """
    mutation($i:ID!){
        delete_list(listid:$i){
            listid
            listname
        }
    }
    """
    variables = {"i": listid}
    return execute_graphql_query(delete_list_mutation, variables)

app.py

Create a new file called app.py, this will be a flask application.

If you would like more information about Flask please refer to documentation at Flask.

Add the following packages:

from flask import Flask, render_template, request, redirect, url_for
import graphql_helper
import json

app = Flask(__name__)


@app.route("/")
#The index page acting as the home page for the app
def index():
    #this will get all the data from your database via Devii
    list_data = graphql_helper.get_list_data()
    status_data = graphql_helper.get_status_name()

    # sorts list by list id then item id so it will render the same way
    list_data.sort(key=lambda x: x["listid"])
    for item in list_data:
        item["item_collection"].sort(key=lambda x: x["itemid"])

    # this returns the index.html template with the list data
    return render_template("index.html", list_data=list_data, status_data=status_data)


@app.route("/add_item", methods=["POST"])
# this will be the Add Item route
def add_item():
    # items will be added via a form made in the index.html
    item_name = request.form["itemname"]
    list_id = request.form["listid"]
    status_id = request.form["statusid"]

    # The response will add the item to your database and add the list_id and status_id as the FK for that item
    response = graphql_helper.add_item(item_name, list_id, status_id)

    # each GraphQL query or mutation will send a nested json response back, the first key
    # will be "data", if the response detects that key it will redirect to the index page and
    # refresh the list_data
    if response.get("data"):
        return redirect(url_for("index"))
    else:
        return "Error adding item."


@app.route("/add_list", methods=["POST"])
def add_list():
    list_name = request.form["listname"]
    status_id = request.form["statusid"]

    response = graphql_helper.add_list(list_name, status_id)

    if response.get("data"):
        return redirect(url_for("index"))
    else:
        return "Error adding catagory."


@app.route("/delete_item", methods=["POST"])
def delete_item():
    itemid = request.form["itemid"]

    response = graphql_helper.delete_item(itemid)

    if response.get("data"):
        return redirect(url_for("index"))
    else:
        return "Error deleting item."


@app.route("/edit_item", methods=["POST"])
def edit_item():  # rename edit_item
    item_id = request.form["itemid"]
    item_name = request.form["itemname"]
    list_id = request.form["listid"]
    status_id = request.form["statusid"]

    response = graphql_helper.edit_item(item_id, item_name, list_id, status_id)

    if response.get("data"):
        return redirect(url_for("index"))
    else:
        return "Error editing item."


@app.route("/edit_list", methods=["POST"])
def edit_list():
    listid = request.form["listid"]
    new_list_name = request.form["listname"]
    statusid = request.form["statusid"]

    response = graphql_helper.edit_list(listid, new_list_name, statusid)

    if response.get("data"):
        return redirect(url_for("index"))
    else:
        return "Error editing catagory."


@app.route("/delete_list", methods=["POST"])
def delete_list():
    list_id = request.form["listid"]

    response = graphql_helper.delete_list(list_id)

    if response.get("data"):
        return redirect(url_for("index"))
    else:
        return "Error editing catagory."

@app.route("/get_status", methods=["GET", "POST"])
def get_status():
    status_data = graphql_helper.get_status_name()

    return status_data


if __name__ == "__main__":
    app.run(debug=True)

Create Template and Static Files

Create a folder called 'templates', then a file named index.html inside the template folder. Create another folder named 'static', then create 3 files: css_reset.css, script.js and style.css inside the static folder. Your file structure should look like this:

  |--templates
  | |--index.html
  |--static
  | |--css_reset.css
  | |--script.js
  | |--style.css

Template file

Open the index.html file. You will need to have a HTML preamble; if you are using VS Code you can type '!' and hit enter and it will be automatically added for you, else copy the code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>

  </body>
</html>

Change the title to ToDo App, this will be shown on your browser's title bar.

After the </title> and up to the </head> we will need to add a few statements:

    <script type="text/javascript"
        src="{{ url_for('static', filename='script.js') }}">
    </script>
    <script type="text/javascript">
        let listData = JSON.parse('{{ list_data | tojson | safe }}');
        let statusData = JSON.parse('{{ status_data | tojson | safe }}');
    </script>
    <link rel="stylesheet" type="text/css" href="../static/css_reset.css" />
    <link rel="stylesheet" type="text/css" href="../static/style.css" />

The rest of the code will be between <body> </body>.

    <h1>ToDo App</h1></br>
    <!-- Button to trigger the add item modal -->
    <div class="add-item-button">  
      <button id="openAddItemModalBtn" class="openAddItemModalBtn btn">Add Item</button> 
    </div>
        <!-- Add New Item Modal -->
    <div id="addItemModal" class="modal"> 
      <div class="modal-content">
        <a href="#close" class="close">&times;</a>
        <h2 class="modal-heading">Add New Item</h2>
        <form action="/add_item" method="post"> 
          <label for="itemname">Item Name:</label>
          <input type="text" id="itemname" name="itemname" required /><br />
          <label for="listid">Select List:</label>
          <select id="listid" name="listid" required>
            {% for list_item in list_data %}
            <option value="{{ list_item.listid }}">
              {{ list_item.listname }}
            </option>
            {% endfor %}</select><br />
            <label for="statusid">Select Status:</label>
            <select id="statusid" name="statusid" required>
            {% for status_item in status_data %}
            <option value="{{status_item.statusid}}">
              {{ status_item.statusname}}
            </option>
            {%endfor %}
          </select></br>
          <input type="submit" class="btn" value="Save Item" />
          <button type="button" class="cancel-btn btn">Cancel</button>
        </form>
      </div>
    </div>

    <!-- Button to trigger add new list modal -->
    <div class="add-list-button">
      <button id="openNewListModalBtn" class="openAddListModalBtn btn">Add List</button> 
    </div>
    <!-- Add New List Modal -->
    <div id="newListModal" class="modal">
      <div class="modal-content">
        <a href="#close" class="close">&times;</a>
        <h2 class="modal-heading">Add New List</h2>
        <form action="/add_list" method="post">
          <label for="listname">List Name:</label>
          <input type="text" id="listname" name="listname" required /><br />
          <label for="statusid">Select Status:</label>
            <select id="statusid" name="statusid" required>
            {% for item in status_data %}
              <option value="{{item.statusid}}">
                {{ item.statusname}}
              </option>
            {%endfor %}
          </select></br>
          <input type="submit" class="btn" value="Save List" />
          <button type="button" class="cancel-btn btn">Cancel</button>
        </form>
      </div>
    </div>
    <div class="lists-wrapper">
      {% for item in list_data %}
      <div class="list-container">
        <ul class="items-collection-header">
          <li class="list-header">
            <div class="list-id">  {{ item.listid }} </div>
            <div class="list-name"> {{ item.listname }} </div>
            <div class="list-status">
                {% for status_item in status_data %}
                {% if status_item.statusid|int == item.statusid|int %}
                  {{ status_item.statusname }}
                {% endif %}
              {% endfor %}
            </div>
              <div class="list-buttons">
                <div class="list-button">
                  <button class="openEditListModalBtn btn" 
                  data-listid="{{ item.listid }}"
                  data-listname="{{ item.listname }}"
                  data-statusid="{{ item.statusid }}" >Edit List</button>
                </div>
                <div class="list-button">
                  <form action="/delete_list" method="post">
                    <input type="hidden" name="listid" value="{{ item.listid }}">
                    <button type="submit" class="list-delete-btn btn">Delete List</button>
                  </form>
                </div>
              </div>
          </li>
        </ul>
            <ul class="items-collection">
              {% for list_item in item.item_collection %}
              <li class="item">
                  <div class="item-id">{{ list_item.itemid }}</div>
                  <div class="item-name">{{ list_item.itemname }}</div>
                  <div class="item-status"> 
                    {% for status_item in status_data %}
                      {% if status_item.statusid|int == list_item.statusid|int %}
                        {{ status_item.statusname }}
                      {% endif %}
                    {% endfor %}
                  </div>
                  <div class="item-buttons">
                    <div class="item-button">
                    <button class="openEditItemModalBtn btn" 
                      data-itemid="{{ list_item.itemid }}"
                      data-itemname="{{ list_item.itemname }}"
                      data-listid="{{ item.listid }}"
                      data-listname="{{ item.listname }}"
                      data-itemstatusid="{{ list_item.statusid }}" 
                      data-statusname="{{ item.statusname }}">Edit Item</button>
                    </div>
                    <div class="item-button">
                    <form action="/delete_item" method="post">
                      <input type="hidden" name="itemid" value="{{ list_item.itemid }}">
                      <button type="submit" class="item-delete-btn btn">Delete Item</button> 
                    </form>
                  </div>
                </div>
            </li>
            {% endfor %}
          </ul>
      </div>  
      {% endfor %} 
    </div>

Static Files

css_reset.css

This code removes all of the default styling of your browser's CSS engine, so you can start fresh making your own. If you would like more information, please visit the website in the code.

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video
{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section
{
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

style.css

This file stores all of the CSS styles applied to the app interface.

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #daebf2;
}

h1 {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
}

.add-item-button,
.add-list-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* Modal styles */

.modal-heading {
  font-size: 30px;
  font-weight: bold;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  text-align: center;
}

/* Close button styles */
.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  text-decoration: none;
  color: #000;
}

/* List styles */

.list-container {
  display: flex;
  flex-direction: column;
  background: #63adca;
  max-width: 560px;
  margin: 20px auto;
}

.list-header {
  border-bottom: 1px solid black;
  font-weight: bold;
}

.list-header,
.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.list-id,
.item-id {
  width: 60px;
  border-right: 1px solid black;
}

.list-name,
.item-name,
.item-status,
.list-status {
  width: calc(100% - 260px);
}

.list-buttons,
.item-buttons {
  display: flex;
  flex-direction: row;
  width: 200px;
  border-left: 1px solid black;
}

.btn {
  background: #327893;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  font-size: 14px;
  margin: 2px;
  cursor: pointer;
  border-radius: 8px;
}

script.js

Our last file will be the JavaScript file.

document.addEventListener("DOMContentLoaded", () => {
  const openAddItemModalBtn = document.getElementById("openAddItemModalBtn");
  const openNewListModalBtn = document.getElementById("openNewListModalBtn");
  const openEditItemModalBtns = document.querySelectorAll(".openEditItemModalBtn");
  const openEditListModalBtns = document.querySelectorAll(".openEditListModalBtn");
  const addItemModal = document.getElementById("addItemModal");
  const newListModal = document.getElementById("newListModal");
  const closeModalBtns = document.querySelectorAll(".modal .close");
  const cancelBtns = document.querySelectorAll(".modal .cancel-btn");
  const itemDeleteButton = document.querySelectorAll(".item-delete-btn");
  const listDeleteButton = document.querySelectorAll(".list-delete-btn");
  const introspectionBtn = document.getElementById("introspectionBtn");

  openAddItemModalBtn.addEventListener("click", () => {
    addItemModal.style.display = "block";
  });

  openNewListModalBtn.addEventListener("click", () => {
    newListModal.style.display = "block";
  });

  openEditItemModalBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
      let itemId = btn.getAttribute("data-itemid");
      let itemName = btn.getAttribute("data-itemname");
      let currentListId = btn.getAttribute("data-listid");
      let currentStatusId = btn.getAttribute("data-itemstatusid");

      let listDropdown = '<select id="editListId" name="listid" required>'; //resets list
      let statusDropdown = '<select id="editStatusID" name="statusid" required>';
      

      listData.forEach( (list_item) => {
        listDropdown += '<option value="' + list_item.listid + '"';
        if (list_item.listid === currentListId) {
          listDropdown += " selected";
        }
        listDropdown += ">" + list_item.listname + "</option>";
      });

      listDropdown += "</select>";

      

      statusData.forEach( ( status_item) => {
        statusDropdown += '<option value="' + status_item.statusid + '"';
        if (status_item.statusid === currentStatusId) {
          statusDropdown += " selected";
        }
        statusDropdown += ">" + status_item.statusname + "</option>"
      });

      statusDropdown += "</select>";

      let editItemModalHtml = ` 
      <div id="editItemModal-${itemId}" class="method modal">
        <div class="modal-content">
          <a href="#close" class="close">&times;</a>
          <h2 class="modal-heading">Edit Item</h2>
          <form action="/edit_item" method="post">
            <input type="hidden" name="itemid" value="${itemId}">
            <label for="itemname">New Item Name:</label>
            <input type="text" id="itemname" name="itemname" value="${itemName}" required /><br />
            <label for="listid">Select List:</label>
            ${listDropdown}<br />
            <label for="statusid">Select Status:</label>
            ${statusDropdown}<br />
            <input type="submit" class="btn" value="Save Changes" />
            <button type="button" class="cancel-btn btn">Cancel</button>
          </form>
        </div>
      </div>
    `;

      let editItemModalContainer = document.createElement("div");
      editItemModalContainer.innerHTML = editItemModalHtml;
      document.body.appendChild(editItemModalContainer);

      // Get the dynamically created edit item modal
      let editItemModal = document.getElementById("editItemModal-" + itemId);

      // Close modal functionality
      let closeModalBtn = editItemModal.querySelector(".close");
      let cancelBtn = editItemModal.querySelector(".cancel-btn");

      closeModalBtn.addEventListener("click", (event) => {
        event.preventDefault();
        editItemModal.style.display = "none";
        editItemModal.remove(); // Remove the modal from the DOM
      });

      cancelBtn.addEventListener("click", (event) => {
        event.preventDefault();
        editItemModal.style.display = "none";
        editItemModal.remove(); // Remove the modal from the DOM
      });

      // Display the dynamically created edit item modal
      editItemModal.style.display = "block";
    });
  });

  openEditListModalBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
      let listId = btn.getAttribute("data-listid");
      let listName = btn.getAttribute("data-listname");
      let currentStatusId = btn.getAttribute("data-statusid");

      let statusDropdown = '<select id="editStatusID" name="statusid" required>';

      statusData.forEach( (status_item) => {
        statusDropdown += '<option value="' + status_item.statusid + '"';
        if (status_item.statusid === currentStatusId) {
          statusDropdown += " selected";
        }
        statusDropdown += ">" + status_item.statusname + "</option>"
      });

      statusDropdown += "</select>";

      let editListModalHTML = `
      <div id="editListModal-${listId}" class="method modal">
        <div class="modal-content">
          <a href="#close" class="close">&times;</a>
          <h2 class="modal-heading">Edit List</h2>
          <form action="/edit_list" method="post">
            <input type="hidden" name="listid" value="${listId}">
            <label for="listname">New List Name:</label>
            <input type="text" id="listname" name="listname" value="${listName}" required /><br />
            <!-- Add hidden input for listId and updated listName -->
            <input type="hidden" name="original_listid" value="${listId}">
            <input type="hidden" name="updated_listname" value="${listName}">
            <label for="statusid">Select Status:</label>
            ${statusDropdown}<br />
            <input type="submit" class="btn" value="Save Changes" />
            <button type="button" class="cancel-btn btn">Cancel</button>
          </form>
        </div>
      </div>
      `;

      let listEditModalContainer = document.createElement("div");
      listEditModalContainer.innerHTML = editListModalHTML;
      document.body.appendChild(listEditModalContainer);

      let editListModal = document.getElementById("editListModal-" + listId);

      let listNameInput = editListModal.querySelector("#listname");
      listNameInput.value = listName;

      let closeModalBtn = editListModal.querySelector(".close");
      let cancelBtn = editListModal.querySelector(".cancel-btn");

      closeModalBtn.addEventListener("click", (event) => {
        event.preventDefault();
        editListModal.style.display = "none";
        editListModal.remove(); // Remove the modal from the DOM
      });

      cancelBtn.addEventListener("click", (event) => {
        event.preventDefault();
        editListModal.style.display = "none";
        editListModal.remove(); // Remove the modal from the DOM
      });

      editListModal.style.display = "block";
    });
  });

  closeModalBtns.forEach( (btn) => {
    btn.addEventListener("click", (event) => {
      event.preventDefault(); // Prevent the default anchor behavior
      btn.closest(".modal").style.display = "none";
    });
  });

  cancelBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
      btn.closest(".modal").style.display = "none";
    });
  });

  itemDeleteButton.forEach( (button) => {
    button.addEventListener("click", (event) => {
      event.preventDefault(); // Prevent the form submission

      let confirmDelete = confirm("Are you sure you want to delete this item?");
      if (confirmDelete) {
        // If user confirms, submit the form
        button.closest("form").submit();
      }
    });
  });

  listDeleteButton.forEach((button) => {
    button.addEventListener("click", (event) => {
      event.preventDefault(); // Prevent the form submission

      let confirmDelete = confirm(
        "Are you sure you want to delete this list? \n All items associated with this list will also be deleted!"
      );
      if (confirmDelete) {
        // If user confirms, submit the form
        button.closest("form").submit();
      }
    });
  });
});

Finally, we can run the project.

For windows:

python app.py 

For Mac/Linux:

flask run

The app should be running on your local server http://127.0.0.1:5000

If you close your code base you will need to reactivate your virtual environment.