aboutsummaryrefslogtreecommitdiff
path: root/tmpl/student.html
blob: 6f488678845284df6309831c2e9110df0a772a3c (plain) (blame)
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
{{- define "student" -}}
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>
			{{ .Name }} &ndash; CCA Selection System
		</title>
		<link rel="stylesheet" href="/static/style.css" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="description" content="YK Pao School CCA Selection System" />
	</head>
	<body>
		<div style="font-size: 150%; color: red; font-weight: bold;" class="broken-styling-warning">
			The fact that you see this message means that the CSS styling information for this site is not loading correctly, and usability would be severely impacted. Check your network connection, and if this issue persists, you should contact the system administrator.
		</div>
		<header>
			<div class="header-content">
				<div class="header-left">
					<h1><a id="site-title" href="./">CCA Selection System</a></h1>
				</div>
				<div class="header-middle">
					<nav>
						<ul>
							<li>
								<a href="./">Home</a>
							</li>
							<li>
								<a href="./docs/">Docs</a>
							</li>
							<li>
								<a href="./iadocs/">IA</a>
							</li>
							<li>
								<a href="./src/">Source</a>
							</li>
						</ul>
					</nav>
				</div>
				<div class="header-right">
					<p>{{- .Name }} ({{ .Department -}})</p>
				</div>
			</div>
		</header>
		<div class="reading-width" id="wip-notice">
			<p>
			This site is still a work in progress and may contain bugs! Please contact <a href="mailto:sj-cca@ykpaoschool.cn">the CCA department</a> for CCA selection issues or <a href="mailto:s22537@stu.ykpaoschool.cn">Runxi Yu</a> for website issues.
			</p>
		</div>
		<div class="script-unavailable message-box">
			<p>
			JavaScript is required to use this page. One of the following conditions are present:
			</p>
			<ul>
				<li>
					The JavaScript hasn&rsquo;t finished loading.
				</li>
				<li>
					JavaScript is not supported by your browser.
				</li>
				<li>
					JavaScript is disabled/blocked.
				</li>
			</ul>
			<p>
			All JavaScript hosted on this site are licensed under the GNU Affero General Public License, version 3.0 or any later version.
			</p>
		</div>
		<div class="script-required">
			<div class="before-connection message-box">
				<p>
				Attempting to establish an WebSocket connection.
				</p>
				<p>
				If this message does not disappear soon, it means that one of the following conditions are true:
				</p>
				<ul>
					<li>
						Your browser does not <a href="https://caniuse.com/websockets">support WebSocket</a>, or they are being blocked.
					</li>
					<li>
						The server is overloaded or encountered an error.
					</li>
					<li>
						The network is over-saturated, or you just have a bad network.
					</li>
				</ul>
			</div>
			<div class="broken-connection message-box">
				<p>
				Your WebSocket connection has been closed. This means that one of the following occurred:
				</p>
				<ul>
					<li>
						You logged in on another session.
					</li>
					<li>
						CCA staff disabled the student portal.
					</li>
					<li>
						The network is over-saturated and connections cannot be maintained.
					</li>
					<li>
						There was an internal server error that closed your connection.
					</li>
					<li>
						There was an error in the JavaScript running on your browser.
					</li>
				</ul>
				<p>
				If you believe that your networking is in good condition, you may wish to report this to the system administrator.
				</p>
				<p>
				<a href="javascript:window.location.reload(true)" class="btn btn-primary">Reconnect</a>
				<!-- TODO: Add a quicker reconnect -->
				</p>
			</div>
			<div class="need-connection">
				<div class="reading-width">
					<table class="table-of-courses">
						<thead>
							<tr>
								<th scope="col">Tick</th>
								<th scope="col">Selected</th>
								<th scope="col">Max</th>
								<th scope="col">Name</th>
								<th scope="col">Type</th>
								<th scope="col">Teacher</th>
								<th scope="col">Location</th>
							</tr>
							<tr>
								<th colspan="7" class="tdinput">
									<input type="text" id="search" placeholder="Search..." />
								</th>
							</tr>
						</thead>
						<tbody>
							{{- range .Groups }}
							<tr><th colspan="7">{{ .Name }}</th></tr>
							{{- range .Courses }}
							<tr class="courseitem" id="course{{.ID}}" data-group="{{.Group}}">
								<th style="font-weight: normal;" scope="row">
									<input aria-label="Enroll in course" class="coursecheckbox" type="checkbox" id="tick{{.ID}}" name="tick{{.ID}}" value="tick{{.ID}}" data-group="{{.Group}}" disabled ></input>
									<span id="coursestatus{{.ID}}"></span>
								</th>
								<td>
									<span class="selected-number" id="selected{{.ID}}">{{.Selected}}</span>
								</td>
								<td>
									<span class="max-number" id="max{{.ID}}">{{.Max}}</span>
								</td>
								<td>{{.Title}}</td>
								<td id="type{{.ID}}">{{.Type}}</td>
								<td>{{.Teacher}}</td>
								<td>{{.Location}}</td>
							</tr>
							{{- end }}
							{{- end }}
						</tbody>
						<tfoot>
							<tr>
								<td class="th-like" colspan="7">
									<div class="flex-justify">
										<div class="left">
											Course selections are <span id="stateindicator">disabled</span>
										</div>
										<div class="right">
											<button id="confirmbutton" class="btn-primary btn" disabled>Confirm</button>
										</div>
									</div>
								</td>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>
		<script src="static/student.js"></script>
		<script>
			document.addEventListener("DOMContentLoaded", () => {
				const search = document.getElementById("search")
				search.addEventListener("input", () => {
					const s = search.value.toLowerCase().trim().normalize('NFD')
					document.querySelectorAll(".courseitem").forEach(c => {
						c.hidden = (!c.textContent.toLowerCase().normalize('NFD').includes(s)) && (s.length > 0)
					})
				})
			})
		</script>
	</body>
</html>
{{- end -}}