Responsive filtering good filters merge 2 (#100)

* applied filters into the search function using flags in the model, will have to refine more in the filters, but this is great for the demo

* wrote departments filter option

* added check to make sure to not recommend courses the client has taken before

* initial state good

* departments go to model

* trying to add filtering out courses with NULL fields as an implementable filter option, merging with main start as per teams request

* merging into brain?

* some ?. properties check, because skill issue

* more course?. things

* finished the noNull feature, essentially fixed typos

* null course checkbox

* null check linked

* Null field toggle works

* nice and beutiful

* removed the explicit null string checks, hopefully doesnt break, also wrote logic for Period filtering

* period filter

* a bit polishing, touching on the period presenter since i thought its broken, but it was the database dropping all course.period data >:(

* fixed some filters logic (level filter, period filter), added descriptions to most filters tooltips, fixed About us button, touched Tab title to current working title, fixed some other things

* visually persistent filters

* now fixed

* once again

---------

Co-authored-by: benedekboldizsar <bb.boldizsarbenedek@gmail.com>

Author: kexana

my-app/index.html

@@ -8,7 +8,8 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />		<title>Find my course</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Course Compass</title>
 	</head>
 	<div id="root"></div>
 	<script type="module" src="/src/index.jsx"></script>

my-app/src/assets/project_icon.png

@@ -5,16 +5,27 @@ export const model = {
     user: undefined,
     //add searchChange: false,   //this is for reworking the searchbar presenter, so that it triggers as a model, 
     //instead of passing searchcouses lambda function down into the searchbarview.
+    /* courses returned from SearchbarPresenter (search is applied on top of filteredCourses[]) to be shown in the ListView */
     currentSearch: [],
+    /* current query text */
     currentSearchText: "",
     scrollPosition: 0,
+    /* list of all course objects downloaded from the Firebase realtime database and stored locally as JSON object in this array */
     courses: [],
+    /* courses the user selected as their favourite */
     favourites: [],
     isReady: false,
-    filtersChange: false,
+    /* this is a boolean flag showing that filtering options in the UI have changed, triggering the FilterPresenter to recalculate the filteredCourses[] */
+    filtersChange: false, 
+    /* this is a flag showing if the filteredCourses[] has changed (since FilterPresenter recalculated it), so now SearchBarPresenter needs to 
+    recalculate currentSearch[] depending this updated list of courses */
     filtersCalculated: false,
-    filteredCourses: [],
+    /* this is the array that FilterPresenter fills up with course objects, filtered from the model.courses[] */
+    filteredCourses: [], 
+    /* JSON object containing all important parameters the FilterPresenter needs to calculate the filtered list of courses */
     filterOptions: {
+        //apply-X-Filter boolean triggering flag wether corresponding filtering functions should run or not
+        //different arrays require different data, some uses string arrays, some boolean values, and so on
         applyTranscriptFilter: true,
         eligibility: "weak",  //the possible values for the string are: "weak"/"moderate"/"strong"
         applyLevelFilter: true,
@@ -31,7 +42,9 @@ export const model = {
         "ITM/Learning in Engineering Sciences", "ITM/Industrial Economics and Management", "ITM/Energy Systems", "ITM/Integrated Product Development and Design", "ITM/SKD GRU",
         "SCI/Mathematics", "SCI/Applied Physics", "SCI/Mechanics", "SCI/Aeronautical and Vehicle Engineering", 
         "ABE/Sustainability and Environmental Engineering", "ABE/Concrete Structures", "ABE/Structural Design & Bridges", "ABE/History of Science, Technology and Environment", ],
-        applyRemoveNullCourses: false
+        applyRemoveNullCourses: false,
+        period: [true, true, true, true],
+        applyPeriodFilter: true
     },
 
     setUser(user) {
@@ -150,6 +163,11 @@ export const model = {
         this.setFiltersChange();
     },
 
+    setApplyRemoveNullCourses() {
+        this.filterOptions.applyRemoveNullCourses = !this.filterOptions.applyRemoveNullCourses;
+        this.setFiltersChange();
+    },
+
     updateLevelFilter(level) {
         this.filterOptions.level = level;
     },
@@ -172,6 +190,13 @@ export const model = {
         this.filterOptions.eligibility = eligibility;
     },
 
+    updateDepartmentFilter(department) {
+        this.filterOptions.department = department;
+    },
+
+    updatePeriodFilter(period) {
+        this.filterOptions.period = period;
+    },
 
     setApplyTranscriptFilter(transcriptFilterState) {
         this.filterOptions.applyTranscriptFilter = transcriptFilterState;
@@ -191,6 +216,9 @@ export const model = {
     setApplyDepartmentFilter(departmentFilterState) {
         this.filterOptions.applyDepartmentFilter = departmentFilterState;
     },
+    setApplyPeriodFilter(periodfilterState) {
+        this.filterOptions.applyPeriodFilter = periodfilterState;
+    },
     async getAverageRating(courseCode) {
         const reviews = await getReviewsForCourse(courseCode);
         if (!reviews || reviews.length === 0) return null;

my-app/src/assets/project_icon1.png

@@ -3,14 +3,17 @@ import { observer } from "mobx-react-lite";
 import eligibility from "../scripts/eligibility_refined.js";
 import { SearchbarPresenter } from './SearchbarPresenter.jsx';
 
+/* FilterPresenter is responsible for applying the logic necessary to filter out the courses from the overall list */
 const FilterPresenter = observer(({ model }) => {
+    /* global variable for the scope of this presenter, all the smaller functions depend on it instead of passing it back and forth as params */
     var localFilteredCourses = []; //might need to declare out of scope. idk js
 
 
     function applyTranscriptEligibility() {
         if (localFilteredCourses.length == 0)
             return;
-        /* this elias thing  */
+
+        /*  */
         const eligibilitytype = model.filterOptions.eligibility;
 
         let strongcourses = [];
@@ -25,8 +28,6 @@ const FilterPresenter = observer(({ model }) => {
 
 
         localFilteredCourses.forEach(course => {
-            //console.log(storedFinishedCourses);
-            //console.log(course?.prerequisites);
             if (storedFinishedCourses.includes(course?.code))
                 return;
             if (course?.prerequisites && (course?.prerequisites !== "null"))
@@ -72,13 +73,51 @@ const FilterPresenter = observer(({ model }) => {
                 }
             default:
                 {
-                    console.log("Error: somehow we got into a state where model.eligibility is no \"strong\"/\"moderat\"/\"weak\".");
+                    console.log("Error: somehow we got into a state where model.eligibility is no \"strong\"/\"moderate\"/\"weak\".");
                     localFilteredCourses = [];
                     break;
                 }
         }
 
 
+    }
+
+    function updatePeriods(){
+        
+        if (localFilteredCourses.length == 0)
+            return;
+        
+        const periodArr = [...model.filterOptions.period]; //has 4 boolean values one for each period
+        //  [true, false, false, false] means we are only looking for P1 courses.
+        let bestcourses = [];
+        let worstcourses = [];
+        bestcourses = localFilteredCourses.filter(function (course){
+            try {
+                if(course?.periods === undefined)
+                    return false;
+                if((course?.periods?.P1 == true) && (periodArr[0] == true))
+                    return true;
+                if((course?.periods?.P2 == true) && (periodArr[1] == true))
+                    return true;
+                if((course?.periods?.P3 == true) && (periodArr[2] == true))
+                    return true;
+                if((course?.periods?.P4 == true) && (periodArr[3] == true))
+                    return true;
+                return false;
+            } catch (error) {
+                console.log("for some reason course?.periods is weird: ", course?.periods, error);
+                return false; 
+            }
+            
+        })
+
+        worstcourses = localFilteredCourses.filter(function (course){
+            return (course?.periods === undefined);
+        })
+
+        localFilteredCourses = [...bestcourses, ...worstcourses];
+
+
     }
 
     function updateCredits() {
@@ -117,7 +156,7 @@ const FilterPresenter = observer(({ model }) => {
         });
         worstCourses = localFilteredCourses.filter(function (course) {
             try {
-                return ((course?.location === undefined) || (course?.location === "null"));
+                return (course?.location === undefined);
             } catch (error) {
                 console.log("BIG ERROR", error);
                 return false;
@@ -140,8 +179,8 @@ const FilterPresenter = observer(({ model }) => {
         let worstCourses = [];
 
         //in the database a course can have
-        //course?.language.english (true/false/"null")
-        //course?.language.swedish (true/false/"null")
+        //course?.language.english (true/false/undefined)
+        //course?.language.swedish (true/false/undefined)
 
         //console.log(data);
 
@@ -166,7 +205,7 @@ const FilterPresenter = observer(({ model }) => {
                     );
                     worstCourses = data.filter(function (course) {
                         try {
-                            return ((course?.language === undefined) || course?.language?.english === "null");
+                            return (course?.language === undefined);
                         } catch (error) {
                             console.log(course);
                             console.log("BIG ERROR");
@@ -191,7 +230,7 @@ const FilterPresenter = observer(({ model }) => {
                     );
                     worstCourses = data.filter(function (course) {
                         try {
-                            return ((course?.language === undefined) || course?.language?.swedish === "null");
+                            return (course?.language === undefined);
                         } catch (error) {
                             console.log(course);
                             console.log("BIG ERROR");
@@ -228,7 +267,7 @@ const FilterPresenter = observer(({ model }) => {
                     );
                     worstCourses = data.filter(function (course) {
                         try {
-                            return ((course?.language === undefined) || course?.language?.english === "null");
+                            return (course?.language === undefined);
                         } catch (error) {
                             console.log(course);
                             console.log("BIG ERROR");
@@ -287,7 +326,7 @@ const FilterPresenter = observer(({ model }) => {
         });
         worstCourses = localFilteredCourses.filter(function (course) {
             try {
-                return ((course?.department === undefined) || (course?.deparment === "null"));
+                return (course?.department === undefined);
             } catch (error) {
                 console.log("BIG ERROR", error);
                 return false;
@@ -301,44 +340,42 @@ const FilterPresenter = observer(({ model }) => {
     function updateNoNullcourses(){
         let local = [...localFilteredCourses];
 
-        console.log("miauuuuu:",local.length);
 
+        if(model.filterOptions.applyPeriodFilter){
+            local = local.filter(function(course){
+                return (course?.periods && (course?.periods !== "null"));
+            })
+        }
         if(model.filterOptions.applyTranscriptFilter){
             local = local.filter(function(course){
                 return (course?.prerequisites && (course?.prerequisites !== "null"));
             })
         }
-        console.log("miauuuuu:",local.length);
         if(model.filterOptions.applyLevelFilter){
             local = local.filter(function(course){
-                return (course?.prerequisites && (course?.prerequisites !== "null"));
+                return (course?.academicLevel && (course?.academicLevel !== "null"));
             })
         }
-        console.log("miauuuuu:",local.length);
         if(model.filterOptions.applyLanguageFilter){
             local = local.filter(function(course){
                 return ((course?.language) && ((course?.language?.swedish !== "null") && (course?.language?.english !== "null")));
             })
         }
-        console.log("miauuuuu:",local.length);
-        /*if(model.filterOptions.applyLocationFilter){
+        if(model.filterOptions.applyLocationFilter){
             local = local.filter(function(course){
                 return ((course?.location) && (course?.location !== "null"));
             })
-        }*/
-        console.log("miauuuuu:",local.length);
+        }
         if(model.filterOptions.applyCreditsFilter){
             local = local.filter(function(course){
                 return ((course?.credits) && (course?.credits !== "null"));
             })
         }
-        console.log("miauuuuu:",local.length);
         if(model.filterOptions.applyDepartmentFilter){
             local = local.filter(function(course){
                 return ((course?.department) && (course?.department !== "null"));
             })
         }
-        console.log("miauuuuu:",local.length);
 
         localFilteredCourses = [...local];
     }
@@ -353,6 +390,9 @@ const FilterPresenter = observer(({ model }) => {
             if (model.filterOptions.applyRemoveNullCourses) {
                 updateNoNullcourses();
             }
+            if(model.filterOptions.applyPeriodFilter){
+                updatePeriods();
+            }
             if (model.filterOptions.applyLocationFilter) {
                 //after deo finishes locations, until then dont
 
@@ -379,7 +419,7 @@ const FilterPresenter = observer(({ model }) => {
             model.filteredCourses = [...localFilteredCourses];
             model.filtersChange = false;
             model.setFiltersCalculated();
-            console.log("filtered objects number of elements: ", model.filteredCourses.length);
+            //console.log("filtered objects number of elements: ", model.filteredCourses.length);
         }
     }