241 lines
7.5 KiB
Plaintext
241 lines
7.5 KiB
Plaintext
|
package components
|
|||
|
|
|
|||
|
|
import (
|
|||
|
|
"time"
|
|||
|
|
"strconv"
|
|||
|
|
"math/rand/v2"
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
func getCurrentTime() string {
|
|||
|
|
loc, err := time.LoadLocation("Europe/Berlin")
|
|||
|
|
|
|||
|
|
if err != nil {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
t := time.Now().In(loc)
|
|||
|
|
layout := "02.01.2006 15:04"
|
|||
|
|
return t.Format(layout)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
func genRandomData(count int) []float64 {
|
|||
|
|
data := make([]float64, count)
|
|||
|
|
for i := 0; i < count; i++ {
|
|||
|
|
data[i] = rand.NormFloat64() * 30 + 50
|
|||
|
|
}
|
|||
|
|
return data
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
templ base(title string) {
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en" data-theme="dark">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8"/>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|||
|
|
<meta
|
|||
|
|
name="description"
|
|||
|
|
content="Learnlytics: WebApp to manage classrooms"
|
|||
|
|
/>
|
|||
|
|
<meta name="google" content="notranslate"/>
|
|||
|
|
|
|||
|
|
<link rel="icon" href="assets/img/icon/favicon.ico" type="image/x-icon"/>
|
|||
|
|
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/icon/apple-touch-icon.png">
|
|||
|
|
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/icon/favicon-32x32.png">
|
|||
|
|
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/icon/favicon-16x16.png">
|
|||
|
|
<link rel="manifest" href="/site.webmanifest">
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="assets/css/colors.css" />
|
|||
|
|
<link rel="stylesheet" href="assets/css/style.css" />
|
|||
|
|
<link rel="stylesheet" href="assets/css/grid_layout.css" />
|
|||
|
|
|
|||
|
|
<title>Learnlytics - { title }</title>
|
|||
|
|
|
|||
|
|
<script src="assets/js/utils.js"></script>
|
|||
|
|
<script src="assets/js/chartUtils.js"></script>
|
|||
|
|
<script src="assets/js/htmx.min.js"></script>
|
|||
|
|
<script src="assets/js/chart.js"></script>
|
|||
|
|
<script>
|
|||
|
|
Chart.defaults.color = "#E0E1DD";
|
|||
|
|
Chart.defaults.backgroundColor = "#2ec4b6";
|
|||
|
|
Chart.defaults.borderColor = "#00000000";
|
|||
|
|
Chart.defaults.font.family = "'lato-regular', sans-serif";
|
|||
|
|
|
|||
|
|
Chart.defaults.plugins.align = 'center';
|
|||
|
|
Chart.defaults.plugins.display = true;
|
|||
|
|
Chart.defaults.plugins.padding = 10;
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
@navbar()
|
|||
|
|
<div class="content_container">
|
|||
|
|
{ children... }
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
templ footer() {
|
|||
|
|
<footer>
|
|||
|
|
<p>Author: @DerGrumpf</p>
|
|||
|
|
</footer>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
templ navbar() {
|
|||
|
|
<div class="navbar">
|
|||
|
|
<ul>
|
|||
|
|
<li><img src="assets/img/learnlytics.svg" alt="Learnlytics Logo"></li>
|
|||
|
|
<li><a href="/">Dashboard</a></li>
|
|||
|
|
<li><a href="/">Dashboard</a></li>
|
|||
|
|
<li><a href="/">Dashboard</a></li>
|
|||
|
|
<li><a href="/">Dashboard</a></li>
|
|||
|
|
<li><a href="/">About</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
templ selectList(labels []string) {
|
|||
|
|
<div class="select_list">
|
|||
|
|
<form>
|
|||
|
|
<fieldset>
|
|||
|
|
<legend>Students:</legend>
|
|||
|
|
for index, label := range labels {
|
|||
|
|
<label for={ strconv.Itoa(index) }>{ label }</label>
|
|||
|
|
<input type="radio" id={ strconv.Itoa(index) }><br><br>
|
|||
|
|
}
|
|||
|
|
</fieldset>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
templ usercard(username string) {
|
|||
|
|
<div class="usercard">
|
|||
|
|
<img src="assets/img/user.jpeg" alt="Avatar">
|
|||
|
|
<h1>{ username }</h1>
|
|||
|
|
<div class="two-split">
|
|||
|
|
<div class="grid-item-left">
|
|||
|
|
<p>Insitution:</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="grid-item-left">
|
|||
|
|
<p>IFN @ TU BS</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-item-left">
|
|||
|
|
<p>Mail:</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="grid-item-left">
|
|||
|
|
<p>p.keier@beyerstedt-it.de</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-item-left">
|
|||
|
|
<p>Created:</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="grid-item-left">
|
|||
|
|
<p>{ getCurrentTime() }</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
templ NotFound() {
|
|||
|
|
@base("Error") {
|
|||
|
|
<div class="error">
|
|||
|
|
<h1>404 - Not Found</h1>
|
|||
|
|
<div class="side_by_side">
|
|||
|
|
<img src="assets/img/smiley-x.svg" alt="Dead Smiley">
|
|||
|
|
<img src="assets/img/failed-exam.svg" alt="Failed Exam">
|
|||
|
|
</div>
|
|||
|
|
<h2>This Page Didn't Pass the Exam</h2>
|
|||
|
|
<p>It tried, but it didn’t make the cut.</p>
|
|||
|
|
<p>Better check the <a href="/">Dashboard</a> instead!</p>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
templ Test() {
|
|||
|
|
@base("Test") {
|
|||
|
|
<div class="two-split two-row">
|
|||
|
|
<div class="grid-item-center">
|
|||
|
|
Test
|
|||
|
|
</div>
|
|||
|
|
<div class="grid-item-center">
|
|||
|
|
@polarChart(
|
|||
|
|
"1",
|
|||
|
|
genRandomData(6),
|
|||
|
|
[]string{"Klasse 8a", "Klasse 5b", "Klasse 6c", "Klasse 10d", "Englisch LK 12", "Geschickte GK 11"},
|
|||
|
|
"Points scored",
|
|||
|
|
"Classes",
|
|||
|
|
"Classes",
|
|||
|
|
"",
|
|||
|
|
)
|
|||
|
|
</div>
|
|||
|
|
<div class="grid-item-center">
|
|||
|
|
Test
|
|||
|
|
</div>
|
|||
|
|
<div class="grid-item-center">
|
|||
|
|
@doughnutChart(
|
|||
|
|
"1",
|
|||
|
|
genRandomData(6),
|
|||
|
|
[]string{"Klasse 8a", "Klasse 5b", "Klasse 6c", "Klasse 10d", "Englisch LK 12", "Geschickte GK 11"},
|
|||
|
|
"Points scored",
|
|||
|
|
"Classes",
|
|||
|
|
"Classes",
|
|||
|
|
"",
|
|||
|
|
)
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
templ Dashboard(username string) {
|
|||
|
|
@base("Dashboard") {
|
|||
|
|
<div class="two-split three-row">
|
|||
|
|
<div class="grid-item-center">
|
|||
|
|
@usercard(username)
|
|||
|
|
</div>
|
|||
|
|
<div class="grid-item-center">
|
|||
|
|
@barChart(
|
|||
|
|
"2",
|
|||
|
|
genRandomData(6),
|
|||
|
|
[]string{"Klasse 8a", "Klasse 5b", "Klasse 6c", "Klasse 10d", "Englisch LK 12", "Geschickte GK 11"},
|
|||
|
|
"Points scored",
|
|||
|
|
"Classes",
|
|||
|
|
"Classes",
|
|||
|
|
"",
|
|||
|
|
)
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-item-center">
|
|||
|
|
@selectList([]string{"Phil Keier", "Calvin Brandt", "Nova Eib"})
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-item-center">
|
|||
|
|
@barLineChart(
|
|||
|
|
"1",
|
|||
|
|
[]float64{31, 15, 18, 35, 20, 20, 22, 27, 24, 30},
|
|||
|
|
[]string{"Tutorial 1", "Tutorial 2", "Extended Applications", "Numpy & MatPlotLib", "SciPy", "MonteCarlo", "Pandas & Seaborn", "Folium", "Statistical Test Methods", "Data Analysis"},
|
|||
|
|
"Points scored",
|
|||
|
|
"Lectures",
|
|||
|
|
"Lectures",
|
|||
|
|
"Points",
|
|||
|
|
)
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
templ Login() {
|
|||
|
|
@base("Login") {
|
|||
|
|
<div class="login">
|
|||
|
|
<img src="assets/img/learnlytics.svg" alt="Learnlytics Logo">
|
|||
|
|
<h1>Learnlytics</h1>
|
|||
|
|
<form action="/" method="POST">
|
|||
|
|
<input type="text" id="username" name="username" placeholder="Username" required><br><br>
|
|||
|
|
|
|||
|
|
<input type="password" id="password" name="password" placeholder="Password" required><br><br>
|
|||
|
|
|
|||
|
|
<input type="submit" value="Login">
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
}
|