relatable-course-visualization / relatable Goto Github PK

Need to create the following functions and post/put functions:

1. Clean_Preq
2. Marked_Preq
3. Dependencies

It will likely be helpful (and necessary) to create helper get function from DB.

This should be based on the footer design

Create search bar for the home page. Leverage MUI for for easy styling. Make use of old logic as much as possible as that correct hit the endpoint for collecting all the courses and correctly maps them with searchability.

Update favicon

For @kyle-boughen and @Inioluwa21

Today or tomorrow I will create a text document that contains source prerequisite strings for us to manual convert to formatted test strings.
Here is an example of how the text will look initially:
Fraser
CMPT 145 or CMPT 115 or CMPT 117.
CMPT 214.3 and one of MATH 104.3, MATH 110.3, MATH 123.3, MATH 125.3, MATH 133.4, MATH 176.3, or STAT 245.3 (or equivalent).
...
Marmik
....
Kyle
...
Ini
...

Convert the strings under your name. See the document on one drive for the rules for this. Separate the original string from the converted string with a tab.

In #38, courses not in the catalogue were added to the CourseTable2023 table using a new column not_in_catalogue. 0 indicates that the course exists; 1 indicates that it does not.

The course card component should include conditional rendering to render a course not in catalogue UI if the given course is not in the catalogue.

The logic for this from the endpoint should be complete from #36 . This issue simply focuses on creating the conditional UI render.

Blocker: #36

Current the buttons rendered for prerequisites and dependencies are the default MUI buttons.

Improve the UI so that they

• Aren't too large like they are right now
• Match Relatable color scheme
• Look less like traditional buttons

Screenshots:

Blockers: #36

This will be a big feature to add and will involve a complicated web scrape of through paws.

Due to database refactoring, the Course table has changed and the Prerequisite and Dependency tables have deprecated. Update these tables in the documentation to reflect the current state. Wait until #38 is complete to add that change as well (if there is a change).

Maintain the current documentation as V1 and add new documentation at the top as V2.

Blockers: #38

This should be based on the about us page design

The parsing was incorrect with the "299"

We can either just change this manually, or create a more appropriate solution for this use case.

Create a contact us page.

Little bit more complex due to form submission (not just a UI ticket). If we want to spend time elsewhere and add this at a later sprint once deployed, we can definitely do that.

Use MUI for all components and styling--do not have an additional CSS page. Reference Marmik's new MUI code here: https://github.com/marmikpatel19/marmikpatel19.github.io/tree/version-2

Tasks

• Link the new page to the navbar
• Add a brief . Write whatever seems appropriate. Consider adding a point about reporting bugs through the form.
• Add a MUI form. Add whatever fields seem relevant.
• Add a place to store submission
  • Ideas:
    • New db table with new API endpoint
    • A google spreadsheet (example: https://github.com/Infokidz-Academy/Infokidz-Academy-Website/blob/main/client/src/components/contact/contactform.jsx)
• Add a way to notify team members about a new submission
  • Ideas:
    • Trigger email
    • Not do this and leave it for team members to manually check

• Finalize designs
• Upload them onto a "design" folder in the main root directory
• Create a .md file for typography & color: colors (primary and secondary), font-style, font-sizes (for headers, text, etc.)

Reference the discussion had here: meeting

add feature to be able to jump back to last search when you click on a course that is not in course catalogue

As we discussed on Wednesday, some preq strings reference courses that are no longer offered at USask. We would like to add these courses into DB, however, they must have a clear flag. The file 'postDependentCourses.py' has a notInCatalogue list
which stores all course codes that do not have a matching row entry in the db (and therefore are not in the course catalogue). We would like to add these to the db and create a flag for them. Create the flag as you see fit, however, if you add another column (which you likely will need to), you will have to edit models and all other post/put functions. Big picture:

1. Decide how to flag courses and make this update in all the affected files
2. In post dependency, post all courses not in catalogue to DB with the flag

404: NOT_FOUND
Code: NOT_FOUND
ID: cle1::lkxjr-1695705142303-ad45a5a52054

Consider move the deployment to other provider / ask Greg for hosting it somewhere in usask?

Use MUI for easy card styling.

Some complexity with hover; should be a common use case for expanding a card (probably tutorials online)

• Consider attaching an event handler on the component for hover which runs a function to display additional data
• Consider conditionally rendering two versions of the components (closed and expanded) because on event handler onHover

Once done, we can create a new branch to add this component inside the .map that renders from the search bar component.

There are a variety of subtasks needed to complete this including:

1. Decide on how we will store newly formatted strings
2. Parse formatted strings so that they are in a proper data structure to post
3. Refactor existing POST functions
4. Refactor dependencies to include string and weak
5. Rescrape AND retest form conversion as course catalogue has been updated

There is a "show more" button on the search component. The Search limits the number of shown courses to 10 and allows repeated display of 10 more every time the show more button is clicked. However, the footer seems to be hiding this button.

Screenshots

At the bottom of the page but the button is not visible.

Need to identify somewhere that the courses are for USask

For smaller mobile size, the vertical footer takes up too much space, leading to poor UX. Reduce the spacing between components to mitigate this issue.

For larger screen sizes, it is also too big. See second screenshot

Screenshots:

This should be based on the navbar design

About us needs header and footer, should be a quick fix.

The course card component is currently developed as an independent component. Integrate it within Search to render when the user search. Also, integrate logic to handle clickable-UI for courses. Checking for non_in_catalogue should be done, but the UI does not need to be; this is done in #43.

Blockers: #30

Apply sequence to sequence method to convert prerequisite strings into properly formatted strings.

• Clean up the read me to be human-readable and visually appealing
  • make Product Description easier to understand
  • Update preview photos
  • remove installation steps
• make GitHub About section easier to understand

You can use the 10+10 design method talked about in CMPT 381 (due Tuesday 1:00pm)

Currently, just at a research stage, but very soon we will want to put fully into action

Set up routing for the system using React Router

Address the comments made in #56

• Reduce the max-width of the navbar
• Fix the alignment on mobile screen