-
Notifications
You must be signed in to change notification settings - Fork 0
/
dashboard.html
144 lines (142 loc) · 6.39 KB
/
dashboard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<!-- -->
<!-- Custom classes use the Camel Case naming convention -->
<html>
<head>
<title> </title>
<link rel="stylesheet" href="styles.css">
<!-- BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!-- MODAL: Find Student to Register -->
<div class="modal" id="enterID" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Enter student ID to register:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="number" name="enterID" id="IDinput">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="register">Register</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- NAV TABS: Student/Class Table Selection -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="student-tab" data-bs-toggle="tab" data-bs-target="#student" type="button" role="tab" aria-controls="home" aria-selected="true">Student</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="class-tab" data-bs-toggle="tab" data-bs-target="#classes" type="button" role="tab" aria-controls="profile" aria-selected="false">Class</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="myTabContent">
<!-- STUDENT TAB -->
<div class="tab-pane fade show active" id="student" role="tabpanel" aria-labelledby="student-tab">
<table class="fold-table">
<tr>
<td>
<!-- Input Form -->
<form onsubmit="event.preventDefault();onStudentFormSubmit()" id="StudentForm" autocomplete="off">
<div>
<label>Student ID</label>
<label class="requiredInformationError hide" id="requiredInformationError">This field is required</label>
<input type="number" name="studentID" id="studentID">
</div>
<div>
<label>First Name</label>
<label class="requiredInformationError hide" id="requiredInformationError">This field is required</label>
<input type="text" name="firstName" id="firstName">
</div>
<div>
<label>Last Name</label>
<label class="requiredInformationError hide" id="requiredInformationError">This field is required</label>
<input type="text" name="lastName" id="lastName">
</div>
<div>
<label>GPA</label>
<input type="number" name="gpa" id="gpa" step=".01">
</div>
<div class="form-action-buttons">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
</td>
<td>
<table class="list" id="studentRecordsList">
<thead class="thead-dark">
<tr>
<th>Student ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>GPA</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- THIS IS WHERE THE TABLE LOADS STUDENT RECORDS THROUGH JAVASCRIPT -->
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!-- CLASSES TAB -->
<div class="tab-pane fade" id="classes" role="tabpanel" aria-labelledby="class-tab">
<table class="fold-table">
<tr>
<td>
<!-- Input Form -->
<form onsubmit="event.preventDefault();onClassFormSubmit()" id="ClassForm" autocomplete="off">
<div>
<label>Class ID</label>
<label class="requiredInformationError hide" id="requiredInformationError">This field is required</label>
<input type="text" name="classID" id="classID">
</div>
<div>
<label>Course ID</label>
<label class="requiredInformationError hide" id="requiredInformationError">This field is required</label>
<input type="text" name="courseID" id="courseID">
</div>
<div>
<label>Start Date</label>
<label class="requiredInformationError hide" id="requiredInformationError">This field is required</label>
<input type="date" name="startDate" id="startDate">
</div>
<div class="form-action-buttons">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
</td>
<td>
<table class="list" id="classRecordsList">
<thead>
<tr>
<th>Class ID</th>
<th>Course ID</th>
<th>Start Date</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- THIS IS WHERE THE TABLE LOADS CLASS RECORDS THROUGH JAVASCRIPT -->
</tbody>
</table>
</div>
</div>
<!-- BOOTSTRAP -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>