Modified Lesson Page to Render Course Info Dynamically

[MithunPara]

Changes Made:

• Modified the HTML Lessons file so that courses along with their content can be dynamically retrieved from the database and then displayed on the lessons page (no longer using placeholders to demonstrate the functionality of the page).
• Edited the lessons page endpoint so that the desired course is queried from the database along with its modules, topics and lessons
• Set up a seeding script to populate the database with course content (used the placeholder content and populated the course, module, topic and lesson models with the necessary info). The script also creates directories within the application that can be used to store the video/thumbnail content for video panels and textbook PDFs for extra practice
• Made edits to certain models to facilitate the dynamic rendering of the lesson page and prevent errors that were occurring when populating the database
• Edited the Lesson button on the navbar so that the user's first course will be displayed when pressed
• Added command to run_app.py to allow for clearing existing database content using external terminal while Flask application is active (wipes the database completely, helps for testing whether the seeding script populates the relevant course models as intended)
• Added another method to allow for viewing the current database content (activate by entering "flask shell" into external terminal)
• Modified the lessons.js file so that the video/thumbnail path that is dynamically generated uses the actual video/thumbnail filenames (current placeholders are video.mp4 and thumbnail.png)

Future Changes/Things to Note:

• Used a seeding script as a temporary method of populating the database, it will be more practical in the future to assign courses (course, modules, topics, lessons, etc.) to users through the Admin/Teacher dashboard once it is set up. We can set up a route to retrieve the necessary information once set up and create the option to enroll specific users in the course. We can put the course details into the same format as the seeding script to ensure that it is correctly formatted for the lessons page.
• As of right now, I set up the seeding script to automatically load the course content once the Flask app is ran (for testing purposes). It also only loads one course (Pre-Algebra) and it will not continue to populate the database every time the Flask app is ran unless the Pre-Algebra course is not in the database. We might want to modify the script to allow for modifications like adding new courses by editing the flag, which determines whether the database will be populated or not. I also seen that Flask-Migrate/Alembic are commonly used for database migrations so we might want to look into this if we plan on making frequent additions/deletions to the database.
• I set up the script so that the most recently created user (on your local server) will be enrolled into the "Pre-Algebra" course to make it easier to view the functionality of the lessons page, we can change this after so that users are only enrolled into courses they are assigned to by an Admin.
• The seeding script creates the folders for the videos/thumbnails and the textbook PDFs, however they must be manually added into the created directories with the same filenames that were assigned when creating the lesson in the script, to view them on the lessons page. Can add the option to upload video/thumbnails once the Admin dashboard is set up.
• Add titles for lessons and quizzes (currently just labelled as lesson/quiz on the page)?
• I made it so that the Lessons navbar button will redirect the user to an empty lessons page if they are not enrolled in any course, do we want to display something different? Also, I have it set up currently so that if a user is enrolled into multiple courses, the Lessons button in the navbar will redirect them to their first course (by ID). We might want to make it a dropdown instead to allow the user to select a specific course they are enrolled in.
• Update Lessons endpoint with actual quizzes once set up
• May need to add extra commenting on specific sections of the code, feel free to let me know if any part seems confusing.

[MithunPara]

Primary reviewer: @alexchen2

[alexchen2]

On an unrelated topic, do you mind making a small change within the lesson.css file at line 193-194 (.tabs-unit-menu), replacing the border-right and border-bottom properties with this:

    ...
    filter: 
        drop-shadow(1.5px 0px 0px #c3c3c3)
        drop-shadow(0px 1px 0px #c3c3c3);
    ...

I noticed when looking over the placeholder tabs that with those border properties, the entire menu creates this ugly hanging line like this, if the bottom module tab is open:

I think stuff like borders and box-shadow use some sort of CSS "box model", which causes them to render in the element's rectangular area and disregard any sort of custom shapes. Using a filter drop shadow to emulate these borders should allow for wrapping around the submenu tabs, getting rid of that overextended line:

Sorry for asking you to do this—I just didn't want to create another separate PR and bother others with reviewing it, just to make such a small change.