Popup Extension

app.py

@@ -9,11 +9,18 @@
 import os
 
 
+COURSE_QUERY = (
+    "SELECT c.quarter, d.code, c.course, c.credits, c.title, c.description, c.prerequisites, c.typically_offered, c.contact_hours "
+    "FROM courses c JOIN departments d ON c.department = d.id "
+    "WHERE d.code = ? AND c.course = ? ORDER BY c.quarter DESC LIMIT 1"
+)
+"""
 COURSE_QUERY = (
     "SELECT c.quarter, d.code, c.course, c.credits, c.title, c.description "
     "FROM courses c JOIN departments d ON c.department = d.id "
     "WHERE d.code = ? AND c.course = ? ORDER BY c.quarter DESC LIMIT 1"
 )
+"""
 pool = None
 
 # Startup code

css/main.css

@@ -62,9 +62,11 @@
     justify-content: center;    /* Centers horizontally */
     align-items: stretch;
     overflow-y: auto;
-    top: 25%;
+    top: 50%;
     left: 25%;
     width: 50vw;
+    max-height: 80vw;
+    transform: translateY(-50%);    /* Moves popup back up 50% of its height */
     border: 5px solid var(--text-color);
     border-radius: 5px;
     box-shadow: 5px 5px 15px var(--shadow-color);
@@ -96,11 +98,12 @@
     width: 15px;
     height: 15px;
     margin: 0px;
-    padding: 0;
-    border: 0;
+    padding: 0px;
+    border: 0px;
     border-radius: 3px;
     background-color: var(--background-color);
     color: var(--text-color);
+    font-size: 1.2rem;
     cursor: pointer;
     position: absolute;
     z-index: 4;

index.html

@@ -46,12 +46,15 @@ <h1 id="pageTitle">GCCIS Flowcharts</h1>
         <button id="coursePopupButton"><i class="fa-solid fa-xmark"></i></button>
         <div id="coursePopupTitle" class="coursePopupInformation"></div>
         <div id="coursePopupDescription" class="coursePopupInformation"></div>
-        <!--<div id="coursePopupPrerequisites" class="coursePopupInformation"> Database didn't contain this information.
-            <b>Prerequisites:</b>
-        </div>-->
-        <!-- <div id="coursePopupOffered" class="coursePopupInformation"> Database didn't contain this information.
-            <b>Typically Offered:</b>
-        </div>-->
+        <div id="coursePopupPrerequisites" class="coursePopupInformation">
+            <b>Prerequisites:&nbsp;</b><span id="coursePopupPrerequisitesContent"></span>
+        </div>
+        <div id="coursePopupOffered" class="coursePopupInformation">
+            <b>Typically Offered:&nbsp;</b><span id="coursePopupOfferedContent"></span>
+        </div>
+        <div id="coursePopupContact" class="coursePopupInformation">
+            <b>Contact Hours:&nbsp;</b><span id="coursePopupContactContent"></span>
+        </div>
     </div>
 
     <div id="flowchartBody">

js/load.js

@@ -26,8 +26,9 @@ const coursePopup = document.getElementById("coursePopup");
 const coursePopupButton = document.getElementById("coursePopupButton");
 const coursePopupTitle = document.getElementById("coursePopupTitle");
 const coursePopupDescription = document.getElementById("coursePopupDescription");
-// const coursePopupPrerequisites = document.getElementById("coursePopupPrerequisites"); // Database didn't contain this information
-// const coursePopupOffered = document.getElementById("coursePopupOffered"); // Database didn't contain this information
+const coursePopupPrerequisites = document.getElementById("coursePopupPrerequisitesContent");
+const coursePopupOffered = document.getElementById("coursePopupOfferedContent");
+const coursePopupContact = document.getElementById("coursePopupContactContent");
 
 let hyperDictionary = {}        // A mapping of hyperParentIds to hyperChildIds to their courseDivs
 let initialHyperChildIds = {}   // A mapping of hyperParentIds to the initial hyperChildIds
@@ -630,6 +631,9 @@ function displayCoursePopup(target) {
         coursePopup.style.borderColor = popupInformation.borderColor;
         coursePopupTitle.textContent = popupInformation.title;
         coursePopupDescription.textContent = popupInformation.description;
+        coursePopupPrerequisites.textContent = popupInformation.prerequisites;
+        coursePopupOffered.textContent = popupInformation.offered;
+        coursePopupContact.textContent = popupInformation.contact;
         revealCoursePopup();
         return;
     }
@@ -647,7 +651,10 @@ function displayCoursePopup(target) {
         courseInformationCache[courseKey] = {
             borderColor: courseColor,
             title: coursePopupTitle.textContent,
-            description: coursePopupDescription.textContent
+            description: coursePopupDescription.textContent,
+            prerequisites: courseDBInfo.prerequisites ?? "",
+            offered: courseDBInfo.offered ?? "",
+            contact: courseDBInfo.contact ?? ""
         }
         revealCoursePopup();
     });

js/main.js

@@ -14,7 +14,6 @@ let academicYearCount = 0;      // The numbers of years of school currently bein
 let transferSection = false;    // Whether or not the transfer section is visible.
 let uploadedFilename = null;    // The filename of the uploaded file.
 
-const body = document.body;
 const pageTitle = document.getElementById("pageTitle");
 const yearSelect = document.getElementById("yearSelect");
 const templateSelect = document.getElementById("templateSelect");
@@ -68,7 +67,6 @@ updateTemplateFlowcharts(yearSelect.value);
  * @param {string} year - the selected year to view templates form
  */
 async function updateTemplateFlowcharts(year) {
-    const pastOption = templateSelect.value;    // Gets the selected flowchart
     templateSelect.innerHTML = "";              // Clears the dropdown options
 
     // Adds back the empty option