course list changes

zjf19002 · Nov 15, 2023 · 84fb5b8 · 84fb5b8
2 parents dded76b + e8fb56d
commit 84fb5b8
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 46 deletions.
diff --git 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{
@@ -172,10 +173,6 @@ a,
   margin-left: 2vh;
 }
 
-.test{
-  background-color: #ccc;
-}
-
 .test2{
   box-shadow: 5px black;
 }
@@ -195,3 +192,20 @@ a,
   overflow-y: auto;
 }
 
+.enrolled-class-item{
+  padding: 20px;
+  display: block;
+  margin: 20px auto;
+  min-width: 80vw;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  transition: transform 1s, box-shadow 1s;
+  color:#000;
+}
+
+.enrolled-class-item:hover{
+  transform: scale(1.005); /* Scale to 1.2 times the original size */
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8); /* Shadow with increased blur and opacity */
+  height: 200px;
+}
diff --git a/class_registration_app/src/components/CourseSearch.vue b/class_registration_app/src/components/CourseSearch.vue
@@ -6,15 +6,16 @@ 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;
   Professor: string;
   MaxStudents: number;
   StudentsEnrolled: number;
   Prerequisites: string[];
-  Section: string; // added for section
+  Section: string; 
   CourseScheduledDays: string[];
   Level: string;
 }
@@ -97,12 +98,11 @@ function handleSearch() {
         test.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) {
@@ -119,8 +119,10 @@ function handleSearch() {
 
       console.log(response.Items);
 
+      //must include type of element with typescript
       let searchbar = <HTMLInputElement>document.getElementById("search");
-
+      
+      //filter all courses retrieved from API with user input
       console.log(response);
       let filteredCourses = response.Items.filter(function (course: CourseInfo)
       { return course.CourseId.includes(searchbar.value.toUpperCase())} );
@@ -161,7 +163,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";
@@ -178,9 +180,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
@@ -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/EnrolledCourseList.vue b/class_registration_app/src/components/EnrolledCourseList.vue
@@ -1,12 +1,14 @@
 <template>
     <div id="head">Uconn</div>
      <RouterLink to="/dashboard">Back</RouterLink>
+     <h1 class=myclasses>My Classes</h1>
     <div id="container">
-        <h1 class=myclasses>My Classes</h1>
+    <div id="poo">Will have more class information</div>
     </div>
 </template>
 
 <script setup lang="js">
+
 const class_slots = [
     [[0,2,4],2], //1
     [[10,12,14],2,"MWF"],
@@ -79,17 +81,30 @@ const class_slots = [
     }
     ]
     function do_all(){
+    
+    let toggle = 0
+    let popup = document.getElementById("poo")
+    document.addEventListener("click", ()=>{
+    console.log("dasd")
+    if(toggle==0){
+        popup.style.visibility="visible";
+        toggle=1;
+    }
+    else{
+        popup.style.visibility="hidden";
+        toggle=0;
+    }
+
+})
 
     for(let i=0;i<classes.length;i++){
         let con = document.getElementById('container')
 
         let c = classes[i]
 
         let d = document.createElement("div")
-        d.style.width = "85%";
-        d.style.height = "150px";
-        d.style.margin = "20px auto";
-        
+        d.className = "enrolled-class-item";
+
         let period = classes[i].period;
         let start = class_slots[period-1][0][0] 
         let starttime = 8+.5*Math.floor(start/5)
@@ -101,11 +116,9 @@ const class_slots = [
         <h3>${timestring}</h3>
         <h4>${classes[i].credits}.00 Credits</h4>
         <h4>Instructor: ${classes[i].prof}</h4>
-        <h4>Description: ${classes[i].description}</h4>`
+        `
+        /* <h4>Description: ${classes[i].description}</h4>*/
 
-
-
-        d.className = "test";
         con.appendChild(d);
     }
     
@@ -147,4 +160,21 @@ const class_slots = [
     background-color: #0f1938;
     color: #ffffff;
   }
+
+  #container{
+    padding: 0 50px;
+  }
+
+  #poo{
+    position: fixed;
+    background-color:grey;
+    height: 60vh;
+    width: 60vw;
+    margin: 0 auto;
+    z-index: 100;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border: 5px black;
+  }
 </style>
diff --git 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
@@ -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,19 +41,18 @@
 
     <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>
         <button v-on:click="openCloseLogin('Faculty Login')" class="btn-97" style="background-color:black;position: absolute;top:80%;left:50%;transform:translate(-50%,-50%)">
             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
@@ -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
@@ -19,5 +19,6 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
-  }
+  },
+  base: ''
 })