bvplan/bvplan/templates/bvplan.html
2023-02-27 14:34:17 +01:00

291 lines
8.7 KiB
HTML

<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BVplan | dergrimm.net</title>
<meta name="generator" content="BVplan" />
<script id="data-element-count" type="application/json">{{ data.substitutions.len()|json|safe }}</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<style>
html, body {
height: 100%;
margin: 0;
}
body {
min-height: 100%;
margin: 0 5vw;
overflow: hidden;
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
}
#info {
margin-top: 1vh;
display: flex;
justify-content: space-between;
}
#info > .column {
margin-top: auto;
}
#title-wrapper {
color: #ee7f00;
}
#title-wrapper > * {
margin: 0;
}
#title {
font-weight: bold;
}
#tenant-info {
text-align: right;
}
#plan {
width: 100%;
margin-top: 1%;
border-collapse: collapse;
text-align: center;
font-size: small;
}
#plan thead,
#plan tbody {
font-size: 0.9em;
}
#plan > caption {
font-weight: bold;
}
#plan th,
#plan td {
border: thin solid black;
}
#plan thead {
background-color: black;
color: white;
}
#plan th {
padding: 0.5rem 0.25rem;
}
#plan td {
padding: 0.25rem;
}
#plan tbody {
overflow: auto;
}
#plan tbody tr:not(:nth-child(even)) {
background-color: #fad3a6;
}
#plan tbody tr:nth-child(even) {
background-color: #fdecd9;
}
#footer {
margin: auto 0 1vh;
text-align: center;
}
#footer p {
margin: 0.25rem;
}
#footer > hr {
border: thin solid black;
margin: 1rem 0;
}
#footer .message,
#footer .powered-by {
margin: 0.5rem 0;
}
</style>
</head>
<body>
<header id="info">
<div id="title-wrapper" class="column">
<h1 id="title">BVplan</h1>
<span id="subtitle">dergrimm.net</span>
</div>
<div id="tenant-info" class="column">
<span>{{ data.tenant }}, {{ data.schoolyear }}</span>
<br />
<span>Stand: {{ data.queried_at }}</span>
<br />
<span>Untis: {{ data.last_import_time }}</span>
</div>
</header>
<main>
<table id="plan">
<caption>
{{ data.date }}, Woche {{ data.week_type }}
</caption>
<colgroup>
<col />
<col />
<col />
<col style="width: 30%" />
<col />
<col />
<col />
<col style="width: 20%" />
</colgroup>
<thead>
<tr>
<th>Stunde</th>
<th>Klasse(n)</th>
<th>(Fach)</th>
<th>Fach</th>
<th>Vertreter</th>
<th>(Raum)</th>
<th>Raum</th>
<th>Text</th>
</tr>
</thead>
<tbody>
{% for subst in data.substitutions %}
<tr>
<td>
{% match subst.time.1 %}
{% when Some with (x) %}
{{ subst.time.0 }} - {{ x }}
{% when None %}
{{ subst.time.0 }}
{% endmatch %}
</td>
<td>{{ subst.classes|join(", ") }}</td>
<td>{{ subst.prev_subject }}</td>
<td>
{% match subst.subject %}
{% when Some with (x) %}
{{ x }}
{% when None %}
---
{% endmatch %}
</td>
<td>{{ subst.teachers|join(", ") }}</td>
<td>
{% match subst.prev_room %}
{% when Some with (x) %}
{{ x }}
{% when None %}
---
{% endmatch %}
</td>
<td>
{% match subst.room %}
{% when Some with (x) %}
{{ x }}
{% when None %}
---
{% endmatch %}
</td>
<td>
{% match subst.text %}
{% when Some with (x) %}
{{ x }}
{% when None %}
{% endmatch %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</main>
<footer id="footer">
<div class="message">
<p>
BVplan - der bessre Vertretungsplan sogar mit UTF-8 Support!
Wow
</p>
<p>
<a href="https://git.dergrimm.net/dergrimm/bvplan">
https://git.dergrimm.net/dergrimm/bvplan
</a>
</p>
</div>
<hr />
<p class="powered-by">
<code>
Powered by Dominic Grimm &lt;<a
href="mailto:dominic@dergrimm.net"
>dominic@dergrimm.net</a
>&gt;
</code>
</p>
</footer>
<script>
window.onerror = function () {
console.log("js error detected");
setTimeout(function () {
console.log("reloading page because of error");
window.location.reload();
}, 30_000);
};
const elementCount = JSON.parse($("#data-element-count").text());
const waitDelay = 10_000;
const scrollDuration = elementCount * 200;
function reload() {
window.location.reload();
}
function scrollUp() {
$("html, body").animate(
{
scrollTop: 0,
},
scrollDuration,
"linear"
);
setTimeout(reload, scrollDuration);
}
function scrollDown() {
$("html, body").animate(
{
scrollTop: $(document).height() - $(window).height(),
},
scrollDuration,
"linear"
);
setTimeout(scrollUp, scrollDuration + waitDelay);
}
window.scrollTo(0, 0);
setTimeout($(window).height() > $(window).height() ? scrollDown : reload, waitDelay);
</script>
</body>
</html>