Tyler branch

class_registration_app/src/assets/main.css

@@ -137,7 +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
+  color:#000;
 }
 
 .course-list-item:hover{
@@ -173,6 +173,11 @@ a,
   margin-left: 2vh;
 }
 
+.test2{
+  box-shadow: 5px black;
+}
+
+
 .advanced-search-container{
   min-width: 80vw;
   width: 600px; /* Adjust the width as needed */
@@ -186,3 +191,21 @@ a,
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   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;
+}

class_registration_app/src/components/CourseSearch.vue

@@ -77,23 +77,26 @@ function clearFilters() {
 function applySelectedFilters(courses: CourseInfo[]): CourseInfo[] {
   // Apply filters based on selectedFilters
   return courses.filter(course => {
-    const matchesLocation = !selectedFilters.courseLocation || course.CourseLocation.includes(selectedFilters.courseLocation);
+    const matchesLocation = !selectedFilters.courseLocation || course.CourseLocation.toLowerCase().includes(selectedFilters.courseLocation.toLowerCase());
     const matchesMeetingTimes = selectedFilters.meetingTimes.length === 0 || (course.CourseScheduledDays && selectedFilters.meetingTimes.some(day => course.CourseScheduledDays.includes(day)));
     const matchesCourseLevel = selectedFilters.courseLevel.length === 0 || selectedFilters.courseLevel.includes(course.Level.toString()); // DONE
     const matchesOpenStatus = selectedFilters.openStatus.length === 0 || selectedFilters.openStatus.includes(course.OpenStatus ? 'Open' : 'Closed');
-    const matchesProfessor = !selectedFilters.courseProfessor || course.Professor.includes(selectedFilters.courseProfessor);
+    const matchesProfessor = !selectedFilters.courseProfessor || course.Professor.toLowerCase().includes(selectedFilters.courseProfessor.toLowerCase());
 
     return matchesCourseLevel && matchesLocation && matchesOpenStatus && matchesProfessor && matchesMeetingTimes;
 
   });
 }
 
 function handleSearch() {
-  // for multiple searches... delete all previous results to populate new ones
-  const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}`);
+  const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}` );
+  const test = document.getElementById('noCourses')
       elementsToRemove.forEach(element => {
         element.remove();
       });
+      if(test!=null){
+        test.remove()
+      }
 
   //arn:aws:execute-api:us-east-1:671289147354:5prodolbi7/*/GET/courses
   //API Gateway link
@@ -108,7 +111,13 @@ function handleSearch() {
         throw "Error"
       }
     }).then(response => {
-      console.log(response.Items); //testing results
+      let test = document.getElementById("noCourses")
+      if(test!=null && test.parentNode!=null){
+        test.parentNode.removeChild(test);
+      }
+
+
+      console.log(response.Items);
 
       //must include type of element with typescript
       let searchbar = <HTMLInputElement>document.getElementById("search");
@@ -120,7 +129,18 @@ function handleSearch() {
 
       let newFilteredCourses = applySelectedFilters(filteredCourses);
       console.log(filteredCourses);
+      
+      if(newFilteredCourses.length == 0){
+        let container = document.getElementById("container");
+        let div = document.createElement('div');
+        div.id = ("noCourses");
 
+        div.innerHTML = "<h1>No courses were returned</h1>";
+        if(container!=null){
+          container.appendChild(div)
+        }
+      }
+    
       newFilteredCourses.forEach((Course: CourseInfo) => {
         let container = document.getElementById("container");
         let div = document.createElement("div");
@@ -226,7 +246,8 @@ document.addEventListener("click", function() {
         <label for="meetingTimes">Meeting Times:</label>
         <ul>
           <li><label><input type="checkbox" id="meetingSelection" value="Sunday" :checked="selectedFilters.meetingTimes.includes('Sunday')" @change="updateMeetingFilters('Sunday')">Sunday</label></li>
-          <li><label><input type="checkbox" id="meetingSelection" value="Monday" :checked="selectedFilters.meetingTimes.includes('Monday')" @change="updateMeetingFilters('Monday')">Monday</label></li>
+          <li><label><input type="checkbox" id="meetingSelection" value="
+            " :checked="selectedFilters.meetingTimes.includes('Monday')" @change="updateMeetingFilters('Monday')">Monday</label></li>
           <li><label><input type="checkbox" id="meetingSelection" value="Tuesday" :checked="selectedFilters.meetingTimes.includes('Tuesday')" @change="updateMeetingFilters('Tuesday')">Tuesday</label></li>
           <li><label><input type="checkbox" id="meetingSelection" value="Wednesday" :checked="selectedFilters.meetingTimes.includes('Wednesday')" @change="updateMeetingFilters('Wednesday')">Wednesday</label></li>
           <li><label><input type="checkbox" id="meetingSelection" value="Thursday" :checked="selectedFilters.meetingTimes.includes('Thursday')" @change="updateMeetingFilters('Thursday')">Thursday</label></li>

class_registration_app/src/components/EnrolledCourseList.vue

@@ -1,12 +1,180 @@
-<script setup lang="ts">
-</script>
-
 <template>
-    <div class="container">
-        <h1>My Classes</h1>
+    <div id="head">Uconn</div>
+     <RouterLink to="/dashboard">Back</RouterLink>
+     <h1 class=myclasses>My Classes</h1>
+    <div id="container">
+    <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"],
+    [[20,22,24],2,"MWF"],
+    [[30,32,34],2,"MWF"],
+    [[40,42,44],2,"MWF"],
+    [[50,52,54],2,"MWF"], //6
+    [[60,62,64],2,"MWF"],
+    [[70,72,74],2,"MWF"],
+    [[80,82,84],2,"MWF"],
+    [[1,3],3,"TTh"],
+    [[16,18],3,"TTh"], //11
+    [[31,33],3,"TTh"],
+    [[46,48],3,"TTh"],
+    [[61,63],3,"TTh"],
+    [[76,78],3,"TTh"],
+    [[0],4,"M"], //16
+    [[20],4,"M"],
+    [[40],4,"M"],
+    [[60],4,"M"],
+    [[2],4,"W"],
+    [[22],4,"W"], //21
+    [[42],4,"W"],
+    [[62],4,"W"],
+    [[4],4,"F"],
+    [[24],4,"F"],
+    [[44],4,"F"], //26
+    [[64],4,"F"]
+]
+    const classes = [
+    {
+        "period": "2",
+        "class_name": "CSE1010",
+        "prof": "John",
+        "description": "Intro CS",
+        "room": "McHugh 101",
+        "credits": "3"
+    },
+    {
+        "period": "4",
+        "class_name": "MATH1131" ,
+        "prof": "Bob",
+        "description": "Calc 1",
+        "room": "McHugh 101",
+        "credits": "3"
+    },
+    {
+        "period": "12",
+        "class_name": "ANTH1000" ,
+        "prof": "Joey",
+        "description": "Intro Anth",
+        "room": "McHugh 101",
+        "credits": "3"
+    },
+    {
+        "period": "13",
+        "class_name": "CHEM1127",
+        "prof": "Joe",
+        "description": "Intro Chem",
+        "room": "McHugh 101",
+        "credits": "3"
+    },
+    {
+        "period": "23",
+        "class_name": "MATH1071",
+        "prof": "Billy",
+        "description": "Business Calc",
+        "room": "McHugh 101",
+        "credits": "2"
+    }
+    ]
+    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.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)
+        let end = class_slots[period-1][0][0] + 5*class_slots[period-1][1]
+        let endtime = 8+.5*Math.floor(end/5)-.25
+        let timestring = toTime(starttime) + "-" + toTime(endtime) + " " + class_slots[period-1][2];
+
+        d.innerHTML += `<h1 style="color:#d18c0a">${classes[i].class_name}</h1>
+        <h3>${timestring}</h3>
+        <h4>${classes[i].credits}.00 Credits</h4>
+        <h4>Instructor: ${classes[i].prof}</h4>
+        `
+        /* <h4>Description: ${classes[i].description}</h4>*/
+
+        con.appendChild(d);
+    }
+    
+
+    }
+    setTimeout(do_all,0);
+
+    function toTime(time){
+    let timestring = ""
+    if(time%1==0){
+        timestring = (time-1)%12+1 + ":00"
+    }
+    else{
+        timestring = Math.floor((time-1)%12 + 1).toString() + ":" + 60*(time%1)
+    }
+
+    if (time<12){
+        timestring += "am"
+    }
+    else{
+        timestring += "pm"
+    }
+    return timestring
+}
+</script>
+
+
 <style scoped>
+.myclasses{
+    text-align: center;
+}
+
+#head{
+    margin: 0 auto 10px;
+    width: 90%;
+    height: auto;
+    font-size: 50px;
+    text-align: center;
+    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>

class_registration_app/src/components/ScheduleView.vue

@@ -1,6 +1,7 @@
 <template>
     <section>
       <div id="head">Uconn</div>
+      <RouterLink to="/dashboard">Back</RouterLink>
       <div id=week>
           <div id=time-column>Time</div>
           <div class="day">M</div>
@@ -136,6 +137,7 @@ for (var i = 0; i <18;i++){
     time.innerHTML = time_times[i];
     grid.appendChild(time);
 
+
     for (var j=0; j<5; j++){
         let child = document.createElement('div')
         child.style.backgroundColor = "#dfd"
@@ -310,7 +312,15 @@ function toTime(time){
 
 classes1.forEach((element) => {add_class_to_schedule(element)})
 }
-setTimeout(all,100) 
+setTimeout(all,100)
+
+const apiUrl = 'https://s9hc4htm53.execute-api.us-east-1.amazonaws.com/Beta';
+
+async function dataidk(){
+const response = await fetch(apiUrl+"/courses")
+console.log(response)
+}
+dataidk()
 </script>