Gpa search

[brianlogic]

GitHub Issues addressed

• This PR closes

What I did

-Implemented minimum gpa input where users can enter value or user a slider

• 4 Files Changed:

1. context_processor.py now keeps min_gpa as a saved filter, single line change. Default value is 2.0.
2. models.py added method to query databased with filter based on the minimum gpa of a class using the CourseGrade average. Corrected to use inline filtering from Barrett.
3. searchbar.html, get ready.

HTML block

• Minimum GPA element has input and slider.
• Regex used to control inputs so that user cannot enter non numbers and they can only enter 1 decimal. Users can enter numbers greater than 4.0 since I thought it didn't feel good when it blocked an input greater than 4.
• Slider goes from 1.0 to 4.0 but values greater than 4.0 don't break the slider styling.

Desktop / Mobile Handling HTML

• Ok here's how we're handling mobile / desktop views for styling purposes:
• There is a desktop and mobile part of the HTML with mirror elements for the availability and slider/gpa input. Depending on screen size, one of them is hidden while the other appears
• When users resize or use a window less than 768 px width it uses the mobile view, otherwise desktop view shows.
• Mobile View:

-Desktop View:

Javascript block

• Some janky stuff happens here to handle the desktop and mobile views. Let me know if this is a good way to handle it.
• For gpa, desktop and mobile have separate input and sliders that share classes for styling but have different ids.
• In JS we have grab 5 elements: the min gpa input + slider from desktop and mobile a hidden input element.
• The purpose of using the unified hidden input element is to pass a single min_gpa to the get request so that only 1 min gpa pops up in url.
• We use a function to sync all the values whenever one of them gets updated. So you could resize your screen and it'll show mobile view but keep the same values.

4. search.py added min_gpa as filter for get request and results will now filter with minimum gpa taken into account

Screenshots

• Before
  Original:
  

With dropdown

• After

Testing

Tests show which filters are active and courses returned. Screenshot of course and average gpa provided.

• Filters Applied: Exclude Days, Open Sections, and Subjects

• Filters Applied: Open Sections, and Subjects

• Filters Applied: None (except GPA)

• Filters Applied: Time, Open Sections, Subject

• Filters Applied: Subject with Search Query

• Filters Applied: All

Questions/Discussions/Notes

• I think there is more work to be done on the mobile view, but I'm happy with how the desktop looks.
• The JavaScript is still a little strange. I'm not a Django/JS goat so idk if I could do this in a simpler way. LMK and I'll make changes. I have finals but I'll be done on May 3rd.

[barrett-ruth]

@brianlogic a slider is more intuitive.

[barrett-ruth]

thanks for the good commenting on the pr/in the code!

[Jay-Lalwani]

There should not be this much repeated logic for the desktop and mobile versions. I think it makes more sense to just hide filters on mobile view.

[Jay-Lalwani]

why are there 3 of the same thing