Allow the user to import transcripts into the Roadmap Planner

site/package.json

@@ -10,6 +10,7 @@
     "@reduxjs/toolkit": "^2.0.1",
     "axios": "^1.6.1",
     "bootstrap": "^4.6.0",
+    "node-html-parser": "^6.1.12",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-bootstrap": "^1.5.1",

site/src/App.scss

@@ -21,3 +21,130 @@ button {
   background-color: var(--background);
   box-sizing: border-box;
 }
+
+.ppc-btn {
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  margin: 4px;
+
+  &.btn-primary {
+    color: var(--ring-road-white);
+    border-color: var(--peterportal-primary-color-1);
+    background-color: var(--peterportal-primary-color-1);
+    &:hover,
+    &:focus {
+      background-color: var(--peterportal-primary-color-1);
+    }
+  }
+}
+
+.ppc-modal {
+  font-size: 18px;
+
+  .modal-header {
+    align-items: center;
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+  .modal-content {
+    border: none;
+    background-color: var(--overlay2);
+    padding: 4px 8px 8px;
+  }
+  .modal-dialog {
+    max-width: 400px;
+  }
+  h2 {
+    margin-bottom: 0;
+    font-size: 1.8rem;
+    font-weight: 600;
+  }
+  button.close {
+    margin: -4px -4px;
+    padding: 4px 8px;
+    font-size: 32px;
+    overflow: hidden;
+  }
+
+  .form-group {
+    > label {
+      font-size: 18px;
+      font-weight: 600;
+    }
+    input.form-group-input {
+      font-size: 16px;
+      padding: 4px 12px;
+    }
+    input.form-check-input {
+      width: 1.2em;
+      height: 1.2em;
+      margin-top: 0.15em;
+      transition: background-color 0.2s;
+    }
+    .form-check {
+      padding-block: 2px;
+      align-items: center;
+      .form-check-label {
+        margin-left: 12px;
+      }
+    }
+    input[type='file'] {
+      font-size: 16px;
+    }
+  }
+
+  a {
+    color: #1b76b4;
+  }
+  button.btn-primary {
+    border-color: var(--peterportal-primary-color-1);
+    background-color: var(--peterportal-primary-color-1);
+  }
+}
+
+[data-theme='dark'] .ppc-modal a {
+  color: var(--peterportal-primary-color-2);
+}
+
+[data-theme='dark'] {
+  .ppc-modal-form {
+    .form-control,
+    .form-control:focus {
+      background-color: var(--overlay1);
+    }
+  }
+}
+
+.ppc-modal-form-label {
+  font-weight: bold;
+}
+
+.form-check-input {
+  --bs-form-check-bg: var(--overlay1);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: var(--bs-form-check-bg);
+  background-image: var(--bs-form-check-bg-image);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border: 1px solid #8888;
+  border-radius: 0.25rem;
+  width: 1em;
+  height: 1em;
+  margin-top: 0.25em;
+  transition: box-shadow 0.2s;
+  &:focus {
+    border-color: #86b7fe;
+    box-shadow: 0 0 0 0.25rem #0d6efd40;
+    outline: 0;
+  }
+  &:checked {
+    background-color: var(--peterportal-primary-color-1);
+    border-color: var(--peterportal-primary-color-1);
+    &[type='checkbox'] {
+      --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
+    }
+  }
+}

site/src/App.tsx

@@ -7,7 +7,7 @@ import './style/theme.scss';
 import './App.scss';
 
 import AppHeader from './component/AppHeader/AppHeader';
-// import ChangelogModal from './component/ChangelogModal/ChangelogModal';
+import ChangelogModal from './component/ChangelogModal/ChangelogModal';
 import SearchPage from './pages/SearchPage';
 import CoursePage from './pages/CoursePage';
 import ProfessorPage from './pages/ProfessorPage';
@@ -107,7 +107,7 @@ export default function App() {
               <Route path="*" element={<ErrorPage />} />
             </Routes>
           </div>
-          {/* <div className="changelog-modal">{<ChangelogModal />}</div> */}
+          <div className="changelog-modal">{<ChangelogModal />}</div>
         </div>
       </ThemeContext.Provider>
     </Router>

site/src/component/ChangelogModal/ChangelogModal.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useState } from 'react';
 import './ChangelogModal.scss';
 import Modal from 'react-bootstrap/Modal';
+import changelogImage from '../../asset/transcript.jpg';
 
-const DESCRIPTION = 'You can now view recently added features to the PeterPortal website, listed in this modal.';
-const IMAGE_URL =
-  'https://media.tenor.com/ufm_0t3ACEAAAAAM/ginger-cat-ginger-cat-eating-then-staring-at-the-camera.gif';
-const LAST_UPDATED = '02/27/2024';
+const DESCRIPTION = 'You can now import an HTML copy of your unofficial transcript to your roadmap!';
+const LAST_UPDATED = '03/08/2024';
 
 const ChangelogModal = () => {
   const [showModal, setShowModal] = useState(false);
@@ -29,11 +28,13 @@ const ChangelogModal = () => {
   return (
     <Modal className="changelog-modal" show={showModal} centered onHide={closeModal}>
       <Modal.Header closeButton>
-        <h2>What's New - {new Date(LAST_UPDATED).toLocaleString('default', { month: 'long', year: 'numeric' })}</h2>
+        <h2>
+          What's New &ndash; {new Date(LAST_UPDATED).toLocaleString('default', { month: 'long', year: 'numeric' })}
+        </h2>
       </Modal.Header>
 
       <p className="modal-body">{DESCRIPTION}</p>
-      <img className="modal-img" src={IMAGE_URL} alt="Screenshot or gif of new changes" />
+      <img className="modal-img" src={changelogImage} alt="Screenshot or gif of new changes" />
     </Modal>
   );
 };

site/src/component/GradeDist/GradeDist.tsx

@@ -5,7 +5,7 @@
 import './GradeDist.scss';
 import axios from 'axios';
 
-import { CourseGQLData, ProfessorGQLData } from '../../types/types';
+import { CourseGQLData, ProfessorGQLData, QuarterName } from '../../types/types';
 import { GradesRaw } from 'peterportal-api-next-types';
 
 interface GradeDistProps {
@@ -22,7 +22,7 @@
 type ChartTypes = 'bar' | 'pie';
 
 const GradeDist: FC<GradeDistProps> = (props) => {
-  const quarterOrder = ['Winter', 'Spring', 'Summer1', 'Summer10wk', 'Summer2', 'Fall'];
+  const quarterOrder: QuarterName[] = ['Winter', 'Spring', 'Summer1', 'Summer10wk', 'Summer2', 'Fall'];
   /*
    * Initialize a GradeDist block on the webpage.
    * @param props attributes received from the parent element
@@ -67,7 +67,7 @@
   useEffect(() => {
     setGradeDistData(null!);
     fetchGradeDistData();
   }, [props.course?.id, props.professor?.ucinetid]);
 
   // update list of professors/courses when new course/professor is detected
   useEffect(() => {
@@ -78,14 +78,14 @@
         createCourseEntries();
       }
     }
   }, [gradeDistData]);
 
   // update list of quarters when new professor/course is chosen
   useEffect(() => {
     if ((currentProf || currentCourse) && gradeDistData.length !== 0) {
       createQuarterEntries();
     }
   }, [currentProf, currentCourse]);
 
   /*
    * Create an array of objects to feed into the quarter dropdown menu.
@@ -116,8 +116,8 @@
         if (b.value === 'ALL') {
           return 1;
         }
-        const [thisQuarter, thisYear] = a.value.split(' ');
-        const [thatQuarter, thatYear] = b.value.split(' ');
+        const [thisQuarter, thisYear] = a.value.split(' ') as [QuarterName, string];
+        const [thatQuarter, thatYear] = b.value.split(' ') as [QuarterName, string];
         if (thisYear === thatYear) {
           return quarterOrder.indexOf(thatQuarter) - quarterOrder.indexOf(thisQuarter);
         } else {