From b0da71786a25137378e0712737d8243e19b8b806 Mon Sep 17 00:00:00 2001
From: Zach Florian <zachary.florian@uconn.edu>
Date: Wed, 15 Nov 2023 11:49:37 -0500
Subject: [PATCH] added in-line comments for readability

---
 class_registration_app/src/assets/main.css    |  1 +
 .../src/components/CourseSearch.vue           | 27 +++++++++++--------
 .../src/components/DashBoard.vue              | 19 +++++++------
 .../src/components/NotFound.vue               |  2 +-
 .../src/components/StartUp.vue                | 27 ++++++++++---------
 class_registration_app/tsconfig.node.json     |  3 ++-
 class_registration_app/vite.config.ts         |  3 ++-
 7 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/class_registration_app/src/assets/main.css b/class_registration_app/src/assets/main.css
index d5aaabe..ca09037 100644
--- a/class_registration_app/src/assets/main.css
+++ b/class_registration_app/src/assets/main.css
@@ -137,6 +137,7 @@ a,
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   transition: transform 1s, box-shadow 1s;
+  color:#000
 }
 
 .course-list-item:hover{
diff --git a/class_registration_app/src/components/CourseSearch.vue b/class_registration_app/src/components/CourseSearch.vue
index 6c9ac26..e80f0a4 100644
--- a/class_registration_app/src/components/CourseSearch.vue
+++ b/class_registration_app/src/components/CourseSearch.vue
@@ -4,7 +4,8 @@ const AsyncComponent = defineAsyncComponent(() =>
   import('./CourseSearch.vue')
 );
 
-interface CourseInfo {
+
+interface CourseInfo { //enter all course info parameters here to prevent TypeScript errors
   CourseId: string;
   CourseLocation: string;
   OpenStatus: boolean;
@@ -12,21 +13,21 @@ interface CourseInfo {
   MaxStudents: number;
   StudentsEnrolled: number;
   Prerequisites: string;
-  Section: string; // added for section
+  Section: string; 
 }
 
 function handleSearch() {
+  // for multiple searches... delete all previous results to populate new ones
   const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}`);
       elementsToRemove.forEach(element => {
         element.remove();
       });
 
-
-  console.log("button clicked");
   //arn:aws:execute-api:us-east-1:671289147354:5prodolbi7/*/GET/courses
+  //API Gateway link
   const apiUrl = 'https://5prodolbi7.execute-api.us-east-1.amazonaws.com/Beta';
 
-
+  //using fetch instead of axios
   let courseJson = fetch(`${apiUrl}/courses`)
     .then(response => {
       if (response.ok) {
@@ -35,13 +36,16 @@ function handleSearch() {
         throw "Error"
       }
     }).then(response => {
-      console.log(response.Items);
+      console.log(response.Items); //testing results
 
+      //must include type of element with typescript
       let searchbar = <HTMLInputElement>document.getElementById("search");
-
+      
+      //filter all courses retrieved from API with user input
       let filteredCourses = response.Items.filter(function (course: CourseInfo)
       { return course.CourseId.includes(searchbar.value.toUpperCase())} );
-
+      
+      //with every result, build a div that will display that information
       filteredCourses.forEach((Course: CourseInfo) => {
         let container = document.getElementById("container");
         let div = document.createElement("div");
@@ -64,7 +68,7 @@ function handleSearch() {
         course_location.textContent = Course.CourseLocation;
 
         course_status.className = "course-status";
-        if(Course.OpenStatus){
+        if(Course.OpenStatus){ //course_status returns a bool
           course_status.textContent = "Enroll Status: Open";
         }else{
           course_status.textContent = "Enroll Status: Closed";
@@ -81,9 +85,10 @@ function handleSearch() {
 
         course_section.className = "course-section";
         course_section.textContent = "Section: " + Course.Section;
+        //*****IMPORTANT - all classes are found in main.css under "assets" 
+        //classes under style scoped are not reactive for some reason
 
-
-        // Append the div to the container
+        // Append the divs to the container
         if (container != null){
           container.appendChild(div);
           div.appendChild(course_name);
diff --git a/class_registration_app/src/components/DashBoard.vue b/class_registration_app/src/components/DashBoard.vue
index e71cfab..7477a9a 100644
--- a/class_registration_app/src/components/DashBoard.vue
+++ b/class_registration_app/src/components/DashBoard.vue
@@ -2,6 +2,7 @@
 </script>
 
 <template>
+    <!-- top bar for dashboard with logos -->
     <div class="top">
         <img class="logos" src="../assets/currentLogo.png">
         <img class="logos" src="https://logos-world.net/wp-content/uploads/2022/01/UConn-Huskies-Logo-1970.png">
@@ -12,22 +13,24 @@
     <div class="dashboard">
         <div class="head2">
             Class Registration Dashboard
+            <!-- router link will bring back to home page -->
             <RouterLink to="./">
                 <div class="signout">Sign Out</div>
             </RouterLink>
         </div>
         <div class="button-container">
+            <!--wrap buttons within router links to navigate site-->
             <RouterLink to="./schedule_viewer">
-            <button class="uconn-button">
-                Schedule Viewer
-                <img src="../assets/calenderimage.png" class="icon">
-            </button>
+                <button class="uconn-button">
+                    Schedule Viewer
+                    <img src="../assets/calenderimage.png" class="icon">
+                </button>
             </RouterLink>
             <RouterLink to="./courses">
-            <button class="uconn-button">
-                Course Search
-                <img src="../assets/magimage.png" class="icon">
-            </button>
+                <button class="uconn-button">
+                    Course Search
+                    <img src="../assets/magimage.png" class="icon">
+                </button>
             </RouterLink>
             <RouterLink to="./my_courses">
                 <button class="uconn-button">
diff --git a/class_registration_app/src/components/NotFound.vue b/class_registration_app/src/components/NotFound.vue
index 4eeb69c..2a06721 100644
--- a/class_registration_app/src/components/NotFound.vue
+++ b/class_registration_app/src/components/NotFound.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-
+//this page is routed to whenever user puts in wrong path
 </script>
 
 <template>
diff --git a/class_registration_app/src/components/StartUp.vue b/class_registration_app/src/components/StartUp.vue
index 02e72e1..145c380 100644
--- a/class_registration_app/src/components/StartUp.vue
+++ b/class_registration_app/src/components/StartUp.vue
@@ -3,11 +3,12 @@
     import LoginPage from './LoginPage.vue';
     import { ref } from 'vue';
 
-    let isVisible = ref(false);
+    //ref is for variables used directly in DOM
+    let isVisible = ref(false); //boolean for visibility of login div
     
-    let loginType = ref("");
+    let loginType = ref(""); //specifiy login for student or faculty
 
-    function openCloseLogin(type: string){
+    function openCloseLogin(type: string){ //opens popup for login
         isVisible.value = !isVisible.value;
         loginType.value = type;
     }
@@ -16,13 +17,18 @@
 
 <template>
 
-<div class="backdrop">
-    
+<div class="backdrop"> 
+    <!-- v-if is controlled by isVisible. Login page will only render when isVisible is true -->
     <div v-if="isVisible" class="login-div">
         <label class="typeOfLogin">{{loginType}}</label>
+
+        <!-- v-on:click will call a function openCloseLogin **Very useful** -->
         <button v-on:click="openCloseLogin('Student Login')" style="float: right;" class="btn-97">X</button>
-        <LoginPage></LoginPage>
+        
+        <LoginPage></LoginPage><!-- example of nesting a component in another -->
     </div>
+
+    <!--This is the top bar of the page with logos and uconn font-->
     <div class="top">
         <img class="logos" src="https://logos-world.net/wp-content/uploads/2022/01/UConn-Huskies-Logo-1970.png">
         <div>
@@ -35,6 +41,7 @@
     
     <div class="login">
         
+        <!--Opens the login div, specifys student or faculty-->
         <button v-on:click="openCloseLogin('Student Login')" class="btn-97" style="position: absolute;top:40%;left:50%;transform:translate(-50%,-50%)">
             Login as student
         </button>
@@ -42,12 +49,10 @@
             Login as faculty
         </button>
         
-        
-
         <a class="forgot" style="">Forget your login?</a>
     </div>
 
-    <footer>
+    <footer> <!--bottom section of page-->
         <a href="https://uconn.edu/">Home Site</a>
         <a href="https://uconn.edu/about-us/">About Us</a>
         <a>Privacy Policy</a>
@@ -219,10 +224,6 @@ a{
           color:transparent;
         }
       }
-    
-    .logos {
-        
-    }
 
 }
 
diff --git a/class_registration_app/tsconfig.node.json b/class_registration_app/tsconfig.node.json
index 12bfe15..20a6db8 100644
--- a/class_registration_app/tsconfig.node.json
+++ b/class_registration_app/tsconfig.node.json
@@ -9,7 +9,8 @@
   ],
   "compilerOptions": {
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "Node",
     "types": ["node"]
+
   }
 }
diff --git a/class_registration_app/vite.config.ts b/class_registration_app/vite.config.ts
index c242959..7dbeee1 100644
--- a/class_registration_app/vite.config.ts
+++ b/class_registration_app/vite.config.ts
@@ -19,5 +19,6 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
-  }
+  },
+  base: ''
 })