From aaa4f2a5f272d0d712d419d4c0efc1054e38fe75 Mon Sep 17 00:00:00 2001
From: ChrisTruedson <christopher.truedson@uconn.edu>
Date: Sun, 15 Oct 2023 22:37:07 -0400
Subject: [PATCH 1/2] Created another form page and template based on the
 template

---
 src/components/AppHeader.vue        |   3 +
 src/router/index.js                 |   6 ++
 src/views/AdminCreateCourseView.vue | 108 ++++++++++++++++++++++++++++
 3 files changed, 117 insertions(+)
 create mode 100644 src/views/AdminCreateCourseView.vue

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index f2d18a2..be86932 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -17,6 +17,9 @@
             -->
             <RouterLink :to="{ name: 'form' }">Form Example</RouterLink>
           </li>
+          <li>
+            <RouterLink to="/admin/createcourse">Create Course</RouterLink>
+          </li>
         </ul>
       </nav>
     </div>
diff --git a/src/router/index.js b/src/router/index.js
index b699737..9b37944 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import FormView from "../views/FormView.vue";
 import FetchView from "../views/FetchView.vue";
+import AdminCreateCourseView from "../views/AdminCreateCourseView.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -35,6 +36,11 @@ const router = createRouter({
       name: "fetch",
       component: FetchView,
     },
+    {
+      path: "/admin/createcourse",
+      name: "admincreatecourse",
+      component: AdminCreateCourseView,
+    },
   ],
 });
 
diff --git a/src/views/AdminCreateCourseView.vue b/src/views/AdminCreateCourseView.vue
new file mode 100644
index 0000000..d69658a
--- /dev/null
+++ b/src/views/AdminCreateCourseView.vue
@@ -0,0 +1,108 @@
+<template>
+  <main class="admincreatecourse">
+    <h2>Create Course</h2>
+    <p>
+      This page includes a simple todo list application, which showcases the
+      state management and form capabilities of vue.
+    </p>
+
+    <form @submit.prevent="createTodo" class="create-todo">
+      <label for="todo">New Todo</label>
+      <input type="text" id="todo" name="todo" v-model="newTodo" />
+      <button type="submit">Save</button>
+    </form>
+
+    <ul>
+      <!--
+        v-for requires a unique key for every element so that it can efficiently keep track
+        of each list item. it is possible for the user to type the same todo more than once,
+        so the todo itself isn't necessarily unique. the index on its own is of course unique,
+        it represents each unique place in the array. there are unfortunately edge case issues
+        with using the index alone that we don't need to get into, so we combine the todo and
+        the index into a unique key that will work in all situations
+      -->
+      <li v-for="(todo, index) in todos" :key="todo + index">
+        {{ todo }}
+        <button @click="deleteTodo(index)">Delete</button>
+      </li>
+
+      <!--
+        it is a good user experience practice to provide feedback when in an "emtpy state",
+        in this case, where there are no todos to show yet. this informs the user of
+        the current status of the system (working), and doesn't make them wonder if something
+        has gone wrong
+       -->
+      <li v-if="todos.length === 0">
+        <p>No Todos Yet, go ahead and create one!</p>
+      </li>
+    </ul>
+  </main>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const newTodo = ref("");
+
+const todos = ref([]);
+
+// function to run when the create todo form is submitted
+function createTodo() {
+  // sanitize the input by removing the whitespace from the beginning and end of newTodo.value
+  const todoToAdd = newTodo.value.trim();
+
+  // if the sanitized input is not an empty string (i.e., an actual todo), add it to the list and reset the form
+  if (todoToAdd !== "") {
+    todos.value.push(todoToAdd);
+    newTodo.value = "";
+  }
+}
+
+// when a todo's delete button is clicked, the index of that todo is passed to this function
+// Array.splice takes an index in the array and a number of items to delete after that
+function deleteTodo(index) {
+  todos.value.splice(index, 1);
+}
+</script>
+
+<style>
+.form {
+  padding: 1rem;
+}
+
+.form h2 {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.form p {
+  margin-bottom: 1rem;
+}
+
+/* flex layouts allow us to position elements next to each other that would otherwise have been on top of each other */
+.form ul {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+}
+.form li {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+/* create some space beneath the create todo form */
+.form form {
+  margin-bottom: 1rem;
+}
+
+/* set some default styling to buttons and inputs for borders, heights, and padding */
+.form :is(input, button) {
+  line-height: 2rem;
+  padding-inline: 0.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid #d9d9d9;
+  margin-left: 0.5rem;
+  color: #202020;
+}
+</style>

From 62cc76a6b623437c71c85ddabdb0c91d1dfc9376 Mon Sep 17 00:00:00 2001
From: ChrisTruedson <christopher.truedson@uconn.edu>
Date: Sun, 15 Oct 2023 23:51:11 -0400
Subject: [PATCH 2/2] Created a basic new course page with a basic HTML form
 setup and CSS

---
 src/views/AdminCreateCourseView.vue | 184 ++++++++++++++++------------
 1 file changed, 104 insertions(+), 80 deletions(-)

diff --git a/src/views/AdminCreateCourseView.vue b/src/views/AdminCreateCourseView.vue
index d69658a..a568171 100644
--- a/src/views/AdminCreateCourseView.vue
+++ b/src/views/AdminCreateCourseView.vue
@@ -2,107 +2,131 @@
   <main class="admincreatecourse">
     <h2>Create Course</h2>
     <p>
-      This page includes a simple todo list application, which showcases the
-      state management and form capabilities of vue.
+      Admin - Create Course Page
     </p>
 
-    <form @submit.prevent="createTodo" class="create-todo">
-      <label for="todo">New Todo</label>
-      <input type="text" id="todo" name="todo" v-model="newTodo" />
+    <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>
+      </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>
-
-    <ul>
-      <!--
-        v-for requires a unique key for every element so that it can efficiently keep track
-        of each list item. it is possible for the user to type the same todo more than once,
-        so the todo itself isn't necessarily unique. the index on its own is of course unique,
-        it represents each unique place in the array. there are unfortunately edge case issues
-        with using the index alone that we don't need to get into, so we combine the todo and
-        the index into a unique key that will work in all situations
-      -->
-      <li v-for="(todo, index) in todos" :key="todo + index">
-        {{ todo }}
-        <button @click="deleteTodo(index)">Delete</button>
-      </li>
-
-      <!--
-        it is a good user experience practice to provide feedback when in an "emtpy state",
-        in this case, where there are no todos to show yet. this informs the user of
-        the current status of the system (working), and doesn't make them wonder if something
-        has gone wrong
-       -->
-      <li v-if="todos.length === 0">
-        <p>No Todos Yet, go ahead and create one!</p>
-      </li>
-    </ul>
-  </main>
+  </main>  
 </template>
 
-<script setup>
-import { ref } from "vue";
-
-const newTodo = ref("");
-
-const todos = ref([]);
-
-// function to run when the create todo form is submitted
-function createTodo() {
-  // sanitize the input by removing the whitespace from the beginning and end of newTodo.value
-  const todoToAdd = newTodo.value.trim();
+<style>
+.create-course {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
 
-  // if the sanitized input is not an empty string (i.e., an actual todo), add it to the list and reset the form
-  if (todoToAdd !== "") {
-    todos.value.push(todoToAdd);
-    newTodo.value = "";
-  }
+.create-course select {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background-color: white;
+  color: #333;
 }
 
-// when a todo's delete button is clicked, the index of that todo is passed to this function
-// Array.splice takes an index in the array and a number of items to delete after that
-function deleteTodo(index) {
-  todos.value.splice(index, 1);
+.create-course textarea {
+  width: 100%;
+  height: 150px; /* Adjust the height as needed */
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
 }
-</script>
 
-<style>
-.form {
-  padding: 1rem;
+.create-course label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
 }
 
-.form h2 {
-  font-size: 1.5rem;
-  margin-bottom: 2rem;
+.create-course p {
+  margin-bottom: 10px;
 }
 
-.form p {
-  margin-bottom: 1rem;
+.create-course input.invalid {
+  border: 5px solid red;
 }
 
-/* flex layouts allow us to position elements next to each other that would otherwise have been on top of each other */
-.form ul {
-  display: flex;
-  gap: 1rem;
-  flex-direction: column;
+.create-course input {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
 }
-.form li {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
+
+.create-course button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #007BFF;
+  color: #fff;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-right: 10px;
 }
 
-/* create some space beneath the create todo form */
-.form form {
-  margin-bottom: 1rem;
+.create-course button[type="reset"] {
+  background-color: #ccc;
 }
 
-/* set some default styling to buttons and inputs for borders, heights, and padding */
-.form :is(input, button) {
-  line-height: 2rem;
-  padding-inline: 0.5rem;
-  border-radius: 0.375rem;
-  border: 1px solid #d9d9d9;
-  margin-left: 0.5rem;
-  color: #202020;
+.create-course button[type="submit"] {
+  background-color: #28a745;
 }
+
 </style>