From 1fa4eec4e2f0542dfe30815484709918f34072e9 Mon Sep 17 00:00:00 2001
From: Jack Psaras <jack.psaras@uconn.edu>
Date: Tue, 24 Oct 2023 16:54:35 -0400
Subject: [PATCH] connected the api and database to course create page

---
 package-lock.json                   |  91 +++++++++++
 package.json                        |   1 +
 src/views/AdminCreateCourseView.vue | 226 ++++++++++++++++------------
 3 files changed, 223 insertions(+), 95 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 71e15d0..24923c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@unocss/reset": "^0.56.5",
+        "axios": "^1.5.1",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
       },
@@ -513,11 +514,45 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
+      "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -560,6 +595,38 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -585,6 +652,25 @@
         "node": ">=12"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -634,6 +720,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/rollup": {
       "version": "3.29.4",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
diff --git a/package.json b/package.json
index 4442805..a1953b4 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@unocss/reset": "^0.56.5",
+    "axios": "^1.5.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },
diff --git a/src/views/AdminCreateCourseView.vue b/src/views/AdminCreateCourseView.vue
index a568171..6893436 100644
--- a/src/views/AdminCreateCourseView.vue
+++ b/src/views/AdminCreateCourseView.vue
@@ -1,65 +1,116 @@
 <template>
   <main class="admincreatecourse">
     <h2>Create Course</h2>
-    <p>
-      Admin - Create Course Page
-    </p>
-
-    <form class="create-course">
-      <label for="todo">New Course</label>
-      <label for="department">Department</label>
-      <input type="text" id="department" name="Department" v-model="department" pattern="[A-Z]{4}" required />
-      <p> Required: Should consist of 4 letters A-Z </p>
-      <label for="coursenumber">Course Number</label>
-      <input type="text" id="coursenumber" name="CourseNumber" v-model="coursenumber" pattern="\d{4}" required />
-      <p> Required: Should consist of 4 numbers 0-9 </p>
-      <label for="coursename">Name</label>
-      <input type="text" id="coursename" name="Name" v-model="coursename" maxlength="250" required />
-      <p> Required: Should not be longer than 250 characters in length </p>
-      <label for="professor">Professor(s)</label>
-      <input type="text" id="professor" name="Professor" v-model="professor" required />
-      <p> Required </p>
-      <label for="starttime">Meeting Start Time</label>
-      <input type="time" id="starttime" name="Meeting Start Time" v-model="starttime" required/>
-      <p> Required </p>
-      <label for="endtime">Meeting End Time</label>
-      <input type="time" id="endtime" name="Meeting End Time" v-model="endtime" required />
-      <p> Required </p>
-      <label for="location">Meeting Location</label>
-      <input type="text" id="location" name="Meeting Location" v-model="location" required />
-      <p> Required </p>
-      <label for="credits">Credits</label>
-      <input type="number" id="credits" name="Credits" v-model="credits" min="1.00" max="15.00" step="1.00" required/>
-      <p> Required: Can be any whole credit amount from 1.00 - 15.00 </p>
-      <label for="capacity">Capacity</label>
-      <input type="text" id="capacity" name="Capacity" v-model="capacity" required/>
-      <p> Required </p>
-      <div class="waitlist">
-        <label for="waitlist">Waitlist Open</label>
-        <input type="checkbox" id="waitlist" name="WaitlistOpen" v-model="waitlist" required/>
-        <p> Required </p>
+    <p>Admin - Create Course Page</p>
+
+    <form class="create-course" @submit.prevent="submitForm">
+      <div class="form-group">
+        <label for="name">Course Name (e.g., Math 101)</label>
+        <input type="text" id="name" name="Name" v-model="name" required />
+        <p class="requirement-note">Required</p>
+      </div>
+
+      <div class="form-group">
+        <label for="days">Days (e.g., Mon, Wed, Fri)</label>
+        <input type="text" id="days" name="Days" v-model="days" required />
+        <p class="requirement-note">Required</p>
+      </div>
+
+      <div class="form-group">
+        <label for="location">Location (e.g., Room 101)</label>
+        <input type="text" id="location" name="Location" v-model="location" required />
+        <p class="requirement-note">Required</p>
+      </div>
+
+      <div class="form-group">
+        <label for="major">Major (e.g., Computer Science)</label>
+        <input type="text" id="major" name="Major" v-model="major" required />
+        <p class="requirement-note">Required</p>
+      </div>
+
+      <div class="form-group">
+        <label for="professor">Professor(s) (e.g., Dr. Smith)</label>
+        <input type="text" id="professor" name="Professor" v-model="professor" required />
+        <p class="requirement-note">Required</p>
+      </div>
+
+      <div class="form-group">
+        <label for="seats">Seats (e.g., 30)</label>
+        <input type="number" id="seats" name="Seats" v-model="seats" required />
+        <p class="requirement-note">Required</p>
+      </div>
+
+      <div class="form-group">
+        <label for="time">Time (e.g., 10:00 AM - 11:30 AM)</label>
+        <input type="text" id="time" name ="Time" v-model="time" required />
+        <p class="requirement-note">Required</p>
+      </div>
+
+      <div class="form-group">
+        <label for="type">Course Type</label>
+        <select id="type" name="Type" v-model="type" required>
+          <option value="lecture">Lecture</option>
+          <option value="discussion">Discussion</option>
+          <option value="lab">Lab</option>
+          <option value="seminar">Seminar</option>
+        </select>
+        <p class="requirement-note">Required</p>
+      </div>
+
+      <!-- Your other form inputs as needed -->
+
+      <div class="form-group">
+        <button type="reset" class="btn-clear">Clear</button>
+        <button type="submit" class="btn-save">Save</button>
       </div>
-      <label for="coursetype">Course Type</label>
-      <select id="coursetype" name="Course Type" v-model="coursetype" required>
-        <option value="lecture">Lecture</option>
-        <option value="discussion">Discussion</option>
-        <option value="lab">Lab</option>
-        <option value="seminar">Seminar</option>
-      </select>
-      <p> Required </p>
-      <label for="prereqs">Pre-requirements</label>
-      <input type="text" id="prereqs" name="Pre-requirements" v-model="prereqs" />
-      <p> Optional </p>
-      <label for="description">Description</label>
-      <textarea id="description" name="description" v-model="description" ></textarea>
-      <p> Optional </p>
-      <button type="reset">Clear</button>
-      <button type="submit">Save</button>
     </form>
-  </main>  
+  </main>
 </template>
 
-<style>
+<script>
+import axios from 'axios';
+
+export default {
+  data() {
+    return {
+      name: '',
+      days: '',
+      location: '',
+      major: '',
+      professor: '',
+      seats: '',
+      time: '',
+      type: 'lecture',
+      // Other data properties as needed
+    };
+  },
+  methods: {
+    submitForm() {
+      const courseData = {
+        name: this.name,
+        days: this.days,
+        location: this.location,
+        major: this.major,
+        professor: this.professor,
+        seats: this.seats,
+        time: this.time,
+        type: this.type,
+        // Other data properties as needed
+      };
+
+      axios.post('https://8dbuywnj95.execute-api.us-east-1.amazonaws.com/Final_stage_course/course', courseData)
+        .then(response => {
+          console.log(response.data);
+        })
+        .catch(error => {
+          console.error(error);
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
 .create-course {
   max-width: 400px;
   margin: 0 auto;
@@ -69,64 +120,49 @@
   border-radius: 5px;
 }
 
-.create-course select {
-  width: 100%;
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  background-color: white;
-  color: #333;
+.form-group {
+  margin-bottom: 20px;
 }
 
-.create-course textarea {
-  width: 100%;
-  height: 150px; /* Adjust the height as needed */
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-}
-
-.create-course label {
+label {
   display: block;
-  margin-bottom: 5px;
   font-weight: bold;
 }
 
-.create-course p {
-  margin-bottom: 10px;
-}
-
-.create-course input.invalid {
-  border: 5px solid red;
+input[type="text"],
+select {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
 }
 
-.create-course input {
+input[type="number"] {
   width: 100%;
   padding: 10px;
-  margin-bottom: 5px;
   border: 1px solid #ccc;
   border-radius: 3px;
 }
 
-.create-course button {
-  display: inline-block;
+.btn-clear {
+  background-color: #ccc;
+  color: #333;
+  border: none;
+  border-radius: 5px;
   padding: 10px 20px;
+  margin-right: 10px; /* Add margin between buttons */
+}
+
+.btn-save {
   background-color: #007BFF;
   color: #fff;
   border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  margin-right: 10px;
-}
-
-.create-course button[type="reset"] {
-  background-color: #ccc;
+  border-radius: 5px;
+  padding: 10px 20px;
 }
 
-.create-course button[type="submit"] {
-  background-color: #28a745;
+.requirement-note {
+  font-size: 12px;
+  color: #999;
 }
-
-</style>
+</style>
\ No newline at end of file