Merge pull request #27 from zjf19002/experimental

added rate prof feature

class_registration_app/src/components/DashBoard.vue

@@ -80,8 +80,8 @@
                 </button>
             </RouterLink>
             <br/><br/>
-            <RouterLink to="./courses">
-                <button id="profile" class="uconn-button">Profile
+            <RouterLink to="./rateprofessor">
+                <button id="profile" class="uconn-button">Rate a Professor
                     <img src="../assets/personimage.png" class="icon">
                 </button>
 

class_registration_app/src/components/RateProfessor.css

@@ -0,0 +1,4 @@
+.review{
+    background-color: white;
+    border: black solid
+}

class_registration_app/src/components/RateProfessor.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts" >
+    import axios from 'axios';
+    import { ref } from 'vue';
+    import './RateProfessor.css'
+import { AWSCloudWatchProvider } from 'aws-amplify';
+
+    interface Review{
+        className: string,
+        likes: string,
+        professor: string,
+        rating: string,
+        reviewID: string,
+        userID: string,
+        dislikes: string,
+        timestamp: string,
+        comment: string,
+    }
+
+    const professorName = ref("") //reactive var
+
+    async function pullReviews(){
+        let title = document.getElementById("title")
+        if(title){ //prevent empty search
+            if (professorName.value == ""){
+                title.textContent = "Search a professor - must enter a professor"
+                return
+            }else{
+                title.textContent = "Search a professor"
+            }
+        }   
+        const elementsToRemove = document.querySelectorAll(`.${"review"}` );
+        
+        elementsToRemove.forEach(element => { //removes all current elements when new search
+        element.remove();
+        })
+        
+
+
+        const apiUrl = `https://xv6tugqtw2.execute-api.us-east-1.amazonaws.com/beta/reviews?professor=${professorName.value}`
+
+        const response = await fetch(apiUrl, 
+        {method: 'GET'},) //pullReviews api
+        
+
+
+        if(response.ok){
+            let data = await response.json()
+
+            const container = document.getElementById('reviews-container'); //base div
+            if(container){
+                data.Items.forEach(function(review: Review){ //build reviews from search
+                let div = document.createElement("div");
+                div.className='review';
+
+                let comment = document.createElement('h2');
+                comment.textContent = review.comment;
+
+                let className = document.createElement("h2");
+                className.textContent = "Course: " + review.className;
+
+                let professor = document.createElement('h2');
+                professor.textContent = "Professor: " + review.professor;
+
+                let rating = document.createElement('h2');
+                rating.textContent = "Rating: " + review.rating;
+
+                let likes = document.createElement('h2');
+                likes.textContent = "Likes: " + review.likes.split(",").length.toString()
+
+                let dislikes = document.createElement('h2');
+                dislikes.textContent = "Dislikes: " + review.dislikes.split(",").length.toString()
+
+                let timestamp = document.createElement('h2');
+                var date = new Date(review.timestamp);
+                timestamp.textContent = date.toDateString()
+                
+                div.appendChild(professor)
+                div.appendChild(className)
+                div.appendChild(rating)
+                div.appendChild(likes)
+                div.appendChild(dislikes)
+                div.appendChild(comment)
+                div.appendChild(timestamp)
+
+                
+                container.appendChild(div);
+                container.appendChild
+            })
+            }
+        }
+
+    }
+    function onSearch(){
+        
+    }
+
+</script>
+
+<template>
+    <h1 id="title">Search a professor</h1>
+    <input v-model='professorName' type="text" list="listProf">
+    <datalist id="listProf">
+        <option value="ariana grande">Ariana Grande</option>
+        <option value="barack obama">Barack Obama</option>
+        <option value="gave vincent">Gave Vincent</option>
+        <option value="ghandi">Ghandi</option>
+        <option value="joe biden">Joe Biden</option>
+        <option value="kamala harris">Kamala Harris</option>
+        <option value="nicholas couillard">Nicholas Couillard</option>
+        <option value="samuel alito">Samuel Alito</option>
+        <option value="stephen curry">Stephen Curry</option>
+        <option value="greg jackson">Greg Jackson</option>
+        <option value="6ix9ine">6ix9ine</option>
+    </datalist>
+    <button id="search" v-on:click="pullReviews">search</button>
+    <RouterLink to="./WriteReview">
+        <button>Write Review</button>
+    </RouterLink>
+    <div id="reviews-container"></div>
+</template>
+
+<style scoped>
+</style>

class_registration_app/src/components/WriteReview.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const professor = ref('')
+const className = ref('')
+const comment = ref('')
+const rating = ref('')
+
+
+async function submitReview (){
+    const apiUrl = 
+    `https://xv6tugqtw2.execute-api.us-east-1.amazonaws.com/beta/reviews?professor=${professor.value}&className=${className.value}&comment=${comment.value}&rating=${rating.value}`
+
+    const response = await fetch(apiUrl, {method: 'POST'},)
+    if (response){
+        let container = document.getElementById("check")
+        let div = document.createElement("div")
+
+        div.textContent='success'
+        if(container){
+            container.appendChild(div)
+        }
+    }
+}
+</script>
+
+<template>
+    <label>Choose a professor:</label>
+    <input v-model="professor" name="professors" id="professors" list="listProf">
+
+    <datalist id="listProf">
+        <option value="ariana grande">Ariana Grande</option>
+        <option value="barack obama">Barack Obama</option>
+        <option value="gave vincent">Gave Vincent</option>
+        <option value="ghandi">Ghandi</option>
+        <option value="joe biden">Joe Biden</option>
+        <option value="kamala harris">Kamala Harris</option>
+        <option value="nicholas couillard">Nicholas Couillard</option>
+        <option value="samuel alito">Samuel Alito</option>
+        <option value="stephen curry">Stephen Curry</option>
+        <option value="greg jackson">Greg Jackson</option>
+        <option value="6ix9ine">6ix9ine</option>
+    </datalist>
+    <label>Course Name:</label>
+    <input v-model="className" name="className" id="className" type="text">
+
+
+    <label>Choose a rating:</label>
+    <select v-model="rating" name="rating" id="rating">
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+    </select>
+    <br><br>
+    <label>Write Comment:</label>
+    <br>
+    <textarea v-model="comment" style="height: 10rem;width:40rem"></textarea>
+    <br><br>
+    <button v-on:click="submitReview">Submit Review</button>
+    <div id="check"></div>
+</template>
+
+<style scoped>
+
+</style>

class_registration_app/src/router/index.ts

@@ -6,6 +6,8 @@ import CourseSearch from '../components/CourseSearch.vue'
 import ScheduleView from '../components/ScheduleView.vue'
 import DashBoard from '../components/DashBoard.vue'
 import EnrolledCourseList from '../components/EnrolledCourseList.vue'
+import RateProfessor from '../components/RateProfessor.vue'
+import WriteReview from '@/components/WriteReview.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -47,6 +49,16 @@ const router = createRouter({
       path: '/my_courses',
       name: 'My Courses',
       component: EnrolledCourseList, meta: { requiresAuth: true },
+    },
+    {
+      path: '/rateprofessor',
+      name: 'RateProfessor',
+      component: RateProfessor, meta: { requiresAuth: true },
+    },
+    {
+      path: '/writereview',
+      name: 'Write Review',
+      component: WriteReview, meta: { requiresAuth: true },
     }
 
   ]