2022-11-05 09:51:32 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<script src="/static/htmx.min.js"></script>
|
|
|
|
|
<script src="/static/Sortable.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2022-12-08 14:12:52 +01:00
|
|
|
<header>
|
|
|
|
|
<img src="/static/meat.svg" class="logo logo-1">
|
|
|
|
|
<img src="/static/meet.svg" class="logo logo-2">
|
|
|
|
|
<h1> {{ meet.title }} </h1>
|
|
|
|
|
</header>
|
2022-11-13 21:37:54 +01:00
|
|
|
<div class="voteform">
|
|
|
|
|
<p id="hello">Hallo, {{ session.user.email }}!</p>
|
|
|
|
|
<p id="voters">
|
|
|
|
|
Bisher haben abgestimmt:
|
|
|
|
|
{% for voter in voters %}
|
|
|
|
|
{{ voter.email }}{% if not loop.last %},{% endif %}
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</p>
|
|
|
|
|
<h2 id="h-day">
|
|
|
|
|
An welchem Tag?
|
|
|
|
|
<a href="/result/{{meet.id}}/date/ballot">[details]</a>
|
|
|
|
|
</h2>
|
2022-12-08 14:12:52 +01:00
|
|
|
<div>
|
|
|
|
|
Ordne die Optionen nach Präferenz:
|
|
|
|
|
<form id="v-day" class="sortable" hx-post="/vote/date" hx-trigger="end">
|
|
|
|
|
{% for d in dates %}
|
|
|
|
|
<div class="sort-item">
|
|
|
|
|
{{ loop.index }}. {{ d.display or d.date }}
|
|
|
|
|
<input type="hidden" name="date" value="{{d.id}}">
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2022-11-13 21:37:54 +01:00
|
|
|
<div id="r-day" hx-get="/result/{{meet.id}}/date" hx-trigger="load">
|
2022-11-05 09:51:32 +01:00
|
|
|
</div>
|
2022-11-13 21:37:54 +01:00
|
|
|
<h2 id="h-time">
|
|
|
|
|
Zu welcher Zeit?
|
|
|
|
|
<a href="/result/{{meet.id}}/time/ballot">[details]</a>
|
|
|
|
|
</h2>
|
2022-12-08 14:12:52 +01:00
|
|
|
<div>
|
|
|
|
|
Ordne die Optionen nach Präferenz:
|
|
|
|
|
<form id="v-time" class="sortable" hx-post="/vote/time" hx-trigger="end">
|
|
|
|
|
{% for d in times %}
|
|
|
|
|
<div class="sort-item">
|
|
|
|
|
{{ loop.index }}. {{ d.display or d.time }}
|
|
|
|
|
<input type="hidden" name="time" value="{{d.id}}">
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2022-11-13 21:37:54 +01:00
|
|
|
<div id="r-time" hx-get="/result/{{meet.id}}/time" hx-trigger="load">
|
2022-11-05 09:51:32 +01:00
|
|
|
</div>
|
2022-11-13 21:37:54 +01:00
|
|
|
<h2 id="h-place">
|
|
|
|
|
An welchem Ort?
|
|
|
|
|
<a href="/result/{{meet.id}}/place/ballot">[details]</a>
|
|
|
|
|
</h2>
|
2022-12-08 14:12:52 +01:00
|
|
|
<div>
|
|
|
|
|
Ordne die Optionen nach Präferenz:
|
|
|
|
|
<form id="v-place" class="sortable" hx-post="/vote/place" hx-trigger="end">
|
|
|
|
|
{% for d in places %}
|
|
|
|
|
<div class="sort-item">
|
|
|
|
|
{{ loop.index }}. {{ d.name }}
|
|
|
|
|
<input type="hidden" name="place" value="{{d.id}}">
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2022-11-13 21:37:54 +01:00
|
|
|
<div id="r-place" hx-get="/result/{{meet.id}}/place" hx-trigger="load">
|
2022-11-05 09:51:32 +01:00
|
|
|
</div>
|
2022-11-07 21:42:24 +01:00
|
|
|
</div>
|
2022-11-05 09:51:32 +01:00
|
|
|
</body>
|
|
|
|
|
<script>
|
2022-11-07 21:41:17 +01:00
|
|
|
function activateSortables(element) {
|
2022-11-05 09:51:32 +01:00
|
|
|
var sortables = document.querySelectorAll(".sortable");
|
|
|
|
|
for (const sortable of sortables) {
|
|
|
|
|
console.debug("making", sortable, "sortable")
|
|
|
|
|
new Sortable(sortable, {
|
|
|
|
|
animation: 150,
|
|
|
|
|
ghostClass: 'blue-background-class'
|
|
|
|
|
});
|
|
|
|
|
}
|
2022-11-07 21:41:17 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
activateSortables(document)
|
|
|
|
|
//htmx.onLoad(function(content) { activateSortables(content) }
|
2022-11-05 09:51:32 +01:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
|
|
|
|
|
