Skip to content

Created course page off of template #1

Merged
merged 2 commits into from
Oct 16, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/components/AppHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
-->
<RouterLink :to="{ name: 'form' }">Form Example</RouterLink>
</li>
<li>
<RouterLink to="/admin/createcourse">Create Course</RouterLink>
</li>
</ul>
</nav>
</div>
Expand Down
6 changes: 6 additions & 0 deletions src/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -35,6 +36,11 @@ const router = createRouter({
name: "fetch",
component: FetchView,
},
{
path: "/admin/createcourse",
name: "admincreatecourse",
component: AdminCreateCourseView,
},
],
});

Expand Down
132 changes: 132 additions & 0 deletions src/views/AdminCreateCourseView.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<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>
</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>
</template>

<style>
.create-course {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ddd;
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;
}
.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 {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.create-course p {
margin-bottom: 10px;
}
.create-course input.invalid {
border: 5px solid red;
}
.create-course input {
width: 100%;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.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-course button[type="reset"] {
background-color: #ccc;
}
.create-course button[type="submit"] {
background-color: #28a745;
}
</style>