Fix GPA Calc by adding IIFE. Add Webpack to bundle NPM Packages

.gitignore

@@ -141,3 +141,7 @@ GitHub.sublime-settings
 !.vscode/launch.json
 !.vscode/extensions.json
 *.code-workspace
+
+
+##Build Directory
+build/

README.md

@@ -4,9 +4,10 @@ The Google Chrome version of a cross-browser helper extension for the **AIMS Por
 
 ## Installation
 
-1. Clone the directory to your local machine. 
-2. Fire up **Google Chrome**, go to chrome://extensions and switch on **Developer Mode**. 
-3. Click on **Load Unpacked**, navigate to the cloned directory and select it. 
+1. Clone the directory to your local machine.
+2. `cd` into your local copy, and run `npm install`. 
+3. Fire up **Google Chrome**, go to chrome://extensions and switch on **Developer Mode**. 
+4. Click on **Load Unpacked**, navigate to the cloned directory and select it. 
 
 Google Chrome will now install the AIMS-Helper extension. 
 
@@ -16,6 +17,12 @@ Google Chrome will now install the AIMS-Helper extension.
 2. Click on **Download PDF** to download a PDF copy of your timetable. 
 3. Click on **Upload timetable** to upload a copy of your timetable, which can then be accessed with the IITH Dashboard app. 
 
+## Development 
+1. Install the extension locally as given in the installation instructions. 
+2. Whenever you make a change, please run `npx webpack` in the repostory's root directory to build the changes.
+3. Make sure you test your code prior to committing changes. 
+
+**Note:**  There are pre-commit hooks installed to auto-format and lint your code. If you want to test these pre-commit hooks, you can run them through the command: ` bash  .git/hooks/pre-commit`.
 ## Support
 
 Write to [email protected]. 

package.json

@@ -2,7 +2,9 @@
   "name": "aims-helper-chrome",
   "version": "1.0.0",
   "description": "The Google Chrome version of a cross-browser helper extension for the **AIMS Portal**, IIT Hyderabad. It is available at https://chrome.google.com/webstore/detail/aims-helper/njgpoifkefbbhjohcadcngdomfifcflj?hl=en.",
-  "scripts": {},
+  "scripts": {
+    "postinstall": "npx webpack"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/iith-dashboard/AIMS-Helper-Chrome.git"
@@ -19,11 +21,12 @@
     "eslint-plugin-import": "^2.22.1",
     "husky": "^4.3.0",
     "lint-staged": "^10.4.0",
-    "prettier": "^2.1.2"
+    "prettier": "^2.1.2",
+    "webpack-cli": "^4.2.0"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "lint-staged && npx webpack"
     }
   },
   "lint-staged": {
@@ -37,6 +40,7 @@
   },
   "dependencies": {
     "firebase": "^7.22.1",
-    "html2pdf.js": "^0.9.2"
+    "html2pdf.js": "^0.9.2",
+    "webpack": "^5.10.0"
   }
 }

src/gpa/activateGPA.js

@@ -2,127 +2,130 @@
 Source: https://github.com/IITH/aims-gpa-calculator
 */
 
-const excludeList = [
-  'Minor core',
-  'Honors core',
-  'Honours project',
-  'Honours coursework',
-  'FCC',
-  'Additional',
-];
-const gradeValues = {
-  'A+': 10,
-  A: 10,
-  'A-': 9,
-  B: 8,
-  'B-': 7,
-  C: 6,
-  'C-': 5,
-  D: 4,
-  FR: 0,
-  FS: 0,
-};
-// console.log(studentId);
-const appendCheckbox = (parent, isChecked) => {
-  const checkbox = document.createElement('input');
-  checkbox.className = 'cgpa_cal_check';
-  checkbox.type = 'checkbox';
-  if (isChecked === true) checkbox.checked = true;
-  else checkbox.checked = false;
-  parent.before(checkbox);
-};
+(function main() {
+  const appendCheckbox = (parent, isChecked) => {
+    const checkbox = document.createElement('input');
+    checkbox.className = 'cgpa_cal_check';
 
-const addCheckboxes = () => {
-  const coursesChecked = new Set();
-  const checkboxList = document.querySelectorAll('.cgpa_cal_check');
-  checkboxList.forEach((each) => {
-    each.remove();
-  });
-  const elems = document.querySelectorAll('.hierarchyLi.dataLi.tab_body_bg');
-  elems.forEach((eachCourse) => {
-    if (eachCourse.childNodes.length < 9) return;
+    checkbox.type = 'checkbox';
+    if (isChecked === true) checkbox.checked = true;
+    else checkbox.checked = false;
+    parent.before(checkbox);
+  };
+  const excludeList = [
+    'Minor core',
+    'Honors core',
+    'Honours project',
+    'Honours coursework',
+    'FCC',
+    'Additional',
+  ];
+  const gradeValues = {
+    'A+': 10,
+    A: 10,
+    'A-': 9,
+    B: 8,
+    'B-': 7,
+    C: 6,
+    'C-': 5,
+    D: 4,
+    FR: 0,
+    FS: 0,
+  };
 
-    const courseID = eachCourse.childNodes[0].innerText;
-    if (coursesChecked.has(courseID)) {
-      // incase the course has already been done before
-      // For example, Improvements, do not include it.
-      appendCheckbox(eachCourse.childNodes[0], false);
-      return;
-    }
-    let isChecked = true; // assume all courses to be valid
-    const type = eachCourse.childNodes[4].innerText.trim();
-    const grade = eachCourse.childNodes[7].innerText.trim();
-    // console.log(grade);
-    if (excludeList.indexOf(type) > -1 || grade === '' || grade === 'I') {
-      // If Course is incomplete, hasn't finished or is to be excluded
-      isChecked = false;
-    }
-    if (isChecked) {
-      coursesChecked.add(courseID);
-    }
-    appendCheckbox(eachCourse.childNodes[0], isChecked);
-  });
-};
+  const addCheckboxes = () => {
+    const coursesChecked = new Set();
+    const checkboxList = document.querySelectorAll('.cgpa_cal_check');
+    checkboxList.forEach((each) => {
+      each.remove();
+    });
+    const elems = document.querySelectorAll('.hierarchyLi.dataLi.tab_body_bg');
+    elems.forEach((eachCourse) => {
+      if (eachCourse.childNodes.length < 9) return;
 
-const showTotalGPA = () => {
-  const courses = [];
-  let totalGrades = 0;
-  let totalCredits = 0;
-  const gpaButton = document.querySelectorAll('#gpa_button');
-  gpaButton.innerHTML = 'Calculating';
-  const checkboxList = document.querySelectorAll('.cgpa_cal_check');
-  if (checkboxList.length === 0) {
-    // add checboxes in case they don't exist.
-    addCheckboxes();
-  }
-  const elems = document.querySelectorAll('.hierarchyLi.dataLi.tab_body_bg');
+      const courseID = eachCourse.childNodes[0].innerText;
+      if (coursesChecked.has(courseID)) {
+        // incase the course has already been done before
+        // For example, Improvements, do not include it.
+        appendCheckbox(eachCourse.childNodes[0], false);
+        return;
+      }
+      let isChecked = true; // assume all courses to be valid
+      const type = eachCourse.childNodes[4].innerText.trim();
+      const grade = eachCourse.childNodes[7].innerText.trim();
+      // console.log(grade);
+      if (excludeList.indexOf(type) > -1 || grade === '' || grade === 'I') {
+        // If Course is incomplete, hasn't finished or is to be excluded
+        isChecked = false;
+      }
+      if (isChecked) {
+        coursesChecked.add(courseID);
+      }
+      appendCheckbox(eachCourse.childNodes[0], isChecked);
+    });
+  };
 
-  const typeCreditsMap = new Map();
-  elems.forEach((eachCourse) => {
-    if (eachCourse.querySelectorAll('.cgpa_cal_check:checked').length === 0) {
-      return;
-    }
-    if (eachCourse.childNodes.length < 9) return;
-    const course = {};
-    course.code = eachCourse.childNodes[1].innerText.trim();
-    course.name = eachCourse.childNodes[2].innerText;
-    course.type = eachCourse.childNodes[5].innerText.trim();
-    course.grade = eachCourse.childNodes[8].innerText.trim();
-    course.credits = Number(eachCourse.childNodes[3].innerText.trim());
-    if (!(course.grade in gradeValues)) {
-      return;
+  const showTotalGPA = () => {
+    const courses = [];
+    let totalGrades = 0;
+    let totalCredits = 0;
+    const gpaButton = document.querySelectorAll('#gpa_button');
+    gpaButton.innerHTML = 'Calculating';
+    const checkboxList = document.querySelectorAll('.cgpa_cal_check');
+    if (checkboxList.length === 0) {
+      // add checboxes in case they don't exist.
+      addCheckboxes();
     }
+    const elems = document.querySelectorAll('.hierarchyLi.dataLi.tab_body_bg');
 
-    if (typeCreditsMap.has(course.type)) {
-      typeCreditsMap.set(
-        course.type,
-        typeCreditsMap.get(course.type) + course.credits,
-      );
-    } else {
-      typeCreditsMap.set(course.type, course.credits);
-    }
-    const gradeValue = gradeValues[course.grade];
-    const { credits } = course;
-    totalGrades += credits * gradeValue;
-    totalCredits += credits;
-    courses.push(course);
-  });
-  const gpa = (totalGrades / totalCredits).toFixed(2);
-  const studentDataDiv = document.querySelectorAll(
-    '.studentInfoDiv.inlineBlock',
-  )[0];
-  return {
-    name: studentDataDiv.childNodes[1].innerHTML,
-    rollno: studentDataDiv.childNodes[5].childNodes[3].innerHTML,
-    branch: studentDataDiv.childNodes[9].childNodes[1].childNodes[3].innerHTML,
-    studentType:
-      studentDataDiv.childNodes[9].childNodes[3].childNodes[3].innerText,
-    typeCreditsMap: JSON.stringify(Array.from(typeCreditsMap)),
-    courses: JSON.stringify(courses),
-    gpa,
+    const typeCreditsMap = new Map();
+    elems.forEach((eachCourse) => {
+      if (eachCourse.querySelectorAll('.cgpa_cal_check:checked').length === 0) {
+        return;
+      }
+      if (eachCourse.childNodes.length < 9) return;
+      const course = {};
+      course.code = eachCourse.childNodes[1].innerText.trim();
+      course.name = eachCourse.childNodes[2].innerText;
+      course.type = eachCourse.childNodes[5].innerText.trim();
+      course.grade = eachCourse.childNodes[8].innerText.trim();
+      course.credits = Number(eachCourse.childNodes[3].innerText.trim());
+      if (!(course.grade in gradeValues)) {
+        return;
+      }
+
+      if (typeCreditsMap.has(course.type)) {
+        typeCreditsMap.set(
+          course.type,
+          typeCreditsMap.get(course.type) + course.credits,
+        );
+      } else {
+        typeCreditsMap.set(course.type, course.credits);
+      }
+      const gradeValue = gradeValues[course.grade];
+      const { credits } = course;
+      totalGrades += credits * gradeValue;
+      totalCredits += credits;
+      courses.push(course);
+    });
+    const gpa = (totalGrades / totalCredits).toFixed(2);
+    const studentDataDiv = document.querySelectorAll(
+      '.studentInfoDiv.inlineBlock',
+    )[0];
+    return {
+      name: studentDataDiv.childNodes[1].innerHTML,
+      rollno: studentDataDiv.childNodes[5].childNodes[3].innerHTML,
+      branch:
+        studentDataDiv.childNodes[9].childNodes[1].childNodes[3].innerHTML,
+      studentType:
+        studentDataDiv.childNodes[9].childNodes[3].childNodes[3].innerText,
+      typeCreditsMap: JSON.stringify(Array.from(typeCreditsMap)),
+      courses: JSON.stringify(courses),
+      gpa,
+    };
   };
-};
-chrome.runtime.sendMessage({
-  action: 'parsedGPA',
-  data: showTotalGPA(),
-});
+  chrome.runtime.sendMessage({
+    action: 'parsedGPA',
+    data: showTotalGPA(),
+  });
+}());

src/gpa/gpa_report.html

@@ -129,6 +129,6 @@ <h1>Selected Courses</h1>
     <br />
     <button class="download-pdf">Download PDF</button>
     <script src="/js/html2pdf.bundle.min.js"></script>
-    <script src="gpa_report.js"></script>
+    <script src="/build/gpa_report.js"></script>
   </body>
 </html>

src/gpa/gpa_report.js

@@ -1,3 +1,5 @@
+import html2pdf from 'html2pdf.js';
+
 const data = JSON.parse(localStorage.getItem('courseGPA'));
 
 document.getElementsByClassName('value name')[0].innerText = data.name;

src/popup/popup.html

@@ -72,6 +72,6 @@
       <button class="calculate-gpa-button">Calculate GPA</button>
     </div>
     <img src="/res/spinner.gif" id="loading-image" />
-    <script src="popup.js"></script>
+    <script src="/build/popup.js"></script>
   </body>
 </html>

src/timetable/table.html

@@ -261,10 +261,10 @@
         <td class="5-3-8"></td>
       </tr>
     </table>
-    <table border=1 id="legend">
+    <table id="legend">
       <tr>
-          <td class="differentColor">Course Code</td>
-          <td class="differentColor">Course</td>
+        <td class="differentColor">Course Code</td>
+        <td class="differentColor">Course</td>
       </tr>
       <tbody></tbody>
     </table>
@@ -277,6 +277,6 @@
     <script src="/js/firebase-auth.js"></script>
     <script src="/js/firebase-firestore.js"></script>
     <script src="/js/html2pdf.bundle.min.js"></script>
-    <script src="table.js"></script>
+    <script src="/build/table.js"></script>
   </body>
 </html>