diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/login.html | 63 | ||||
| -rw-r--r-- | templates/staff.html | 134 | ||||
| -rw-r--r-- | templates/student.html | 192 | ||||
| -rw-r--r-- | templates/student_disabled.html | 60 |
4 files changed, 449 insertions, 0 deletions
diff --git a/templates/login.html b/templates/login.html new file mode 100644 index 0000000..371d970 --- /dev/null +++ b/templates/login.html @@ -0,0 +1,63 @@ +{{- define "login" -}} +<!DOCTYPE html> +<html lang="en"> + <head> + <title> + Authentication required – 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="Authentication Page for the YK Pao School CCA Selection System" /> + <style> + #login-box { + margin: auto; + max-width: 30rem; + } + </style> + </head> + <body> + <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>Unauthenticated</p> + </div> + </div> + </header> + <main> + <div id="login-box"> + <p> + {{- if eq .Notes "" -}}{{- .Notes -}}{{- end -}} + </p> + <p> + You have not authenticated. You must sign in to use this service. + </p> + <p> + <a class="btn btn-primary" href="{{- .AuthURL -}}">Sign in with Microsoft</a> + </p> + </div> + </main> + </body> +</html> +{{- end -}} diff --git a/templates/staff.html b/templates/staff.html new file mode 100644 index 0000000..a8bab1a --- /dev/null +++ b/templates/staff.html @@ -0,0 +1,134 @@ +{{- define "staff" -}} +<!DOCTYPE html> +<html lang="en"> + <head> + <title> + Staff 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" /> + <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 }} (Staff)</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:s22537@stu.ykpaoschool.cn">Runxi Yu</a> for any issues. + </p> + </div> + <div class="reading-width"> + <p><a href="./export" class="btn-normal btn">Export all choices as a spreadsheet</a></p> + {{- if ge .State 1 }} + <p><a href="./state/0" class="btn-danger btn">Disable student access</a></p> + {{- if ge .State 2 }} + <p><a href="./state/1" class="btn-danger btn">Stop course selections</a></p> + {{- else }} + <p><a href="./state/2" class="btn-primary btn">Start course selections</a></p> + {{- end }} + {{- else }} + <p><a href="./state/1" class="btn-primary btn">Enable student access</a></p> + {{- end }} + <table class="table-of-courses"> + <thead> + <tr> + <th scope="col">ID</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 scope="row"> + {{.ID}} + </th> + <td> + <span id="selected{{.ID}}">{{.Selected}}</span> + </td> + <td> + <span 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> + {{- if eq .State 0 }} + <tfoot> + <tr> + <td class="th-like" colspan="7"> + <form method="POST" enctype="multipart/form-data" action="/newcourses"> + <div class="flex-justify"> + <div class="left"> + </div> + <div class="right"> + <input title="Upload course list (CSV)" type="file" id="coursecsv" name="coursecsv" accept=".csv" /> + <input type="submit" value="Delete all choices and reset courses" class="btn btn-danger" /> + </div> + </div> + </form> + </td> + </tr> + </tfoot> + {{- end }} + </table> + </div> + <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 -}} diff --git a/templates/student.html b/templates/student.html new file mode 100644 index 0000000..6f48867 --- /dev/null +++ b/templates/student.html @@ -0,0 +1,192 @@ +{{- define "student" -}} +<!DOCTYPE html> +<html lang="en"> + <head> + <title> + {{ .Name }} – 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’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 -}} diff --git a/templates/student_disabled.html b/templates/student_disabled.html new file mode 100644 index 0000000..fbd8844 --- /dev/null +++ b/templates/student_disabled.html @@ -0,0 +1,60 @@ +{{- define "student_disabled" -}} +<!DOCTYPE html> +<html lang="en"> + <head> + <title> + {{ .Name }} – 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:s22537@stu.ykpaoschool.cn">Runxi Yu</a> for any issues. + </p> + </div> + <div class="reading-width"> + <p> + Student access is currently disabled. + </p> + <p> + Please check back later. + </p> + </div> + </body> +</html> +{{- end -}} |