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
|
{{- define "index" -}}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Home – 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" />
</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">
</div>
<div class="header-right">
<p>{{- .user.Name }} ({{ .user.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>
Unfortunately, JavaScript is required to use this page.
</p>
<p>
I completely agree that ordinary websites that provide information should not require JavaScript. However, a CCA selection site is not a normal website. It needs to handle 600 people sending it requests at once; it needs to update the vacancy numbers live; it needs to responsively check for course consistencies; it needs to provide client-side search functionality; etc. These are better handled with client-side scripting, and we extensively use WebSocket for scalable communications (i.e. sending a few bytes as commands instead of a full-blown form or AJAX request).
</p>
<p>
The source code of this site is available in a repository on <a href="https://git.runxiyu.org/ykps/cca.git">git.rx</a>, <a href="https://git.sr.ht/~runxiyu/cca">SourceHut</a>, and <a href="https://github.com/runxiyu/cca">GitHub</a>. You could also read the JavaScript sent to your browser or something. You could also implement a custom client that speaks the WebSocket-based protocol if interested.
</p>
</div>
<div class="script-required">
<div class="before-connection message-box">
<p>
Attempting to establish 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 occured:
</p>
<ul>
<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>
</p>
</div>
<div class="need-connection">
<div id="alreadyopen" class="reading-width">
<table id="table-of-courses">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Tick</th>
<th scope="col"><abbr title="Used/Max"><i>n</i></abbr></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 .courses }}
<tr class="courseitem" id="course{{.ID}}">
<th scope="row">{{.ID}}</th>
{{ if lt .Selected .Max -}}
<td><input class="coursecheckbox" type="checkbox" id="tick{{.ID}}" name="tick{{.ID}}" value="tick{{.ID}}"></input><span id="coursestatus{{.ID}}"></span></td>
{{ else -}}
<td><input disabled class="coursecheckbox" type="checkbox" id="tick{{.ID}}" name="tick{{.ID}}" value="tick{{.ID}}"></input><span id="coursestatus{{.ID}}"></span></td>
{{ end -}}
<td><span id="selected{{.ID}}">{{.Selected}}</span>/<span id="max{{.ID}}">{{.Max}}</span></td>
<td>{{.Title}}</td>
<td id="type{{.ID}}">{{.Type}}</td>
<td>{{.Teacher}}</td>
<td>{{.Location}}</td>
</tr>
{{- end }}
</tbody>
<tfoot>
<tr>
<td class="th-like" colspan="7">
<div class="flex-justify">
<div class="left">
</div>
<div class="right">
<button id="confirmbutton" class="btn-primary btn">Confirm</button>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
<!--
This should be handled in the JavaScript sometime later.
<div id="notopenyet" class="message-box">
<p>
CCA selections are not currently open.
</p>
</div>
-->
</div>
</div>
<footer>
CCA Selection System, licensed under the GNU Affero General Public License, version 3.0 or any later version. Source code available at <a href="{{.source}}"><code>{{.source}}</code></a>.
</footer>
<script src="static/main.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 => {
const m = c.textContent.toLowerCase().normalize('NFD').includes(s)
c.hidden = (!m) && (s.length > 0)
})
})
})
</script>
</body>
</html>
{{- end -}}
|
