Remove courses seamlessly

erlhol · Aug 26, 2023 · 28a7007 · 28a7007
1 parent de3a539
commit 28a7007
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 24 deletions.
diff --git a/javascripts/controller.js b/javascripts/controller.js
@@ -11,27 +11,17 @@ export default class CourseController {
         const allCourses = await this.model.allCourses;
 
         Array.from(this.view.courseContainer.children).forEach((courseDiv, i) => {
-            const courseOject = allCourses[i];
+            const courseObject = allCourses[i];
+            this.view.renderSelectedCourseInit(courseObject);
             courseDiv.addEventListener("click", () => {
                 if (courseDiv.classList.contains("chosen")) {
-                    this.model.removeItemFromSelected();
-                    this.model.decrementTotalCredits(courseOject);
-
-                    this.view.renderNotChosen(courseDiv);
-                    this.view.renderRemoveFromSelectedCourses(courseOject);
-                    this.view.renderRemoveActivites(courseOject);
-                    this.view.renderSetTotalCredits(this.model.total_credits);
+                    this.removeAction(courseObject,courseDiv);
                 } else {
-                    this.model.addToSelected(courseOject);
-                    this.model.incrementTotalCredits(courseOject); 
-
-                    this.view.renderChosen(courseDiv);
-                    this.view.renderSelectedCourse(courseOject);
-                    this.view.renderAddCourseActivites(courseOject);
-                    this.view.renderSetTotalCredits(this.model.total_credits);
+                    this.addAction(courseObject,courseDiv)
                 }
             });
         });
+        this.addRemoveActionToSelected(allCourses);
         this.addSearchEvent();
     }
 
@@ -42,6 +32,36 @@ export default class CourseController {
             this.view.renderSearchedCourses(await this.model.searchForCourses(inputValue)); // Use the stored value
         }.bind(this)); // Bind the current context to the event listener function
     }
+
+    async addRemoveActionToSelected(allCourses) {
+        const selectedItems = await this.view.selectedItems;
+        Array.from(selectedItems.children).forEach( (div, i) => {
+            const courseObject = allCourses[i];
+            const deleteButton = div.querySelector('button:last-child');
+            const courseDiv = document.getElementById((div.id).slice(0, -1)+"r");
+            deleteButton.addEventListener("click", () => this.removeAction(courseObject,courseDiv) );
+        });
+    }
+
+    removeAction(courseObject,courseDiv) {
+        this.model.removeItemFromSelected();
+        this.model.decrementTotalCredits(courseObject);
+
+        this.view.renderNotChosen(courseDiv);
+        this.view.renderRemoveFromSelectedCourses(courseObject);
+        this.view.renderRemoveActivites(courseObject);
+        this.view.renderSetTotalCredits(this.model.total_credits);
+    }
+
+    addAction(courseObject,courseDiv) {
+        this.model.addToSelected(courseObject);
+        this.model.incrementTotalCredits(courseObject); 
+
+        this.view.renderChosen(courseDiv);
+        this.view.renderSelectedCourse(courseObject);
+        this.view.renderAddCourseActivites(courseObject);
+        this.view.renderSetTotalCredits(this.model.total_credits);
+    }
 
 
 }
diff --git a/javascripts/data/model.js b/javascripts/data/model.js
@@ -3,7 +3,6 @@ export default class CourseModel {
     constructor() {
         this.selectedCourses = [];
         this.allCourses = this.fetchCourses();
-        /*this.currentShownCourses = [...this.allCourses]; */
         this.total_credits = 0;
     }
 

diff --git a/javascripts/view/view.js b/javascripts/view/view.js
@@ -52,10 +52,11 @@ export default class CourseView {
         this.courseContainer.appendChild(newCourseDiv);
     }
 
-    renderSelectedCourse(courseObject) {
+    renderSelectedCourseInit(courseObject) {
         /*Adds the subject to the list of chosen subjects */
         var subject = document.createElement("div");
-        subject.classList.add("shown_subject");
+        subject.style.display = 'none';
+        subject.classList.add("shown_subject"); // Add styling
         subject.innerHTML = `
             <h3>${courseObject.code}</h3>
         `;
@@ -71,13 +72,12 @@ export default class CourseView {
         /* Add delete button */
         const deleteButton = document.createElement("button");
         deleteButton.textContent = "X";
-        deleteButton.addEventListener("click", () => this.renderRemoveFromSelectedCourses(courseObject) );
         subject.appendChild(deleteButton);
+
         this.selectedItems.appendChild(subject);
     }
 
     async renderSearchedCourses(searched) {
-
         /* First set all courses to invisible */
         Array.from(this.courseContainer.children).forEach(element => {
             element.style.display = 'none';
@@ -100,10 +100,12 @@ export default class CourseView {
     renderRemoveFromSelectedCourses(courseObject) {
         /* Removes the subject from the list of chosen subjects */
         const elementToRemove = document.getElementById(courseObject.code+"s");
-        elementToRemove.remove();
-        /* Make this more seamless
-        When this procedure is called, should also remove the highlighting 
-        Find the correct div, and remove the highlighting*/
+        elementToRemove.style.display = 'none';
+    }
+
+    renderSelectedCourse(courseObject) {
+        const elementToShow = document.getElementById(courseObject.code+"s");
+        elementToShow.style.display = 'block';
     }
 
     renderRemoveActivites(courseObject) {

diff --git a/stylesheets/main.css b/stylesheets/main.css
@@ -115,6 +115,7 @@ th {
 }
 
 .shown_subject {
+    /* TODO: fix this styling! */
     border: 1px solid #ccc;
     padding: 10px;
     margin-bottom: 10px;