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-11-07 21:42:24 +01:00
|
|
|
<p id="hello">Hallo, {{ session.user.email }}!</p>
|
|
|
|
|
<h1>
|
2022-11-05 09:51:32 +01:00
|
|
|
{{ meet.title }}
|
2022-11-07 21:42:24 +01:00
|
|
|
</h1>
|
|
|
|
|
<h2 id="h-day">
|
2022-11-05 09:51:32 +01:00
|
|
|
An welchem Tag?
|
2022-11-07 21:42:24 +01:00
|
|
|
</h2>
|
|
|
|
|
<form id="v-day" class="sortable" hx-post="/vote/date" hx-trigger="end">
|
2022-11-05 09:51:32 +01:00
|
|
|
{% for d in dates %}
|
|
|
|
|
<div class="sort-item">
|
|
|
|
|
{{ d.display or d.date }}
|
|
|
|
|
<input type="hidden" name="date" value="{{d.id}}">
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</form>
|
2022-11-07 23:06:51 +01:00
|
|
|
<div id="r-day" hx-get="/result/{{meet.id}}/date" hx-trigger="load">
|
2022-11-07 21:42:24 +01:00
|
|
|
</div>
|
|
|
|
|
<h2 id="h-time">
|
2022-11-05 09:51:32 +01:00
|
|
|
Zu welcher Zeit?
|
2022-11-07 21:42:24 +01:00
|
|
|
</h2>
|
|
|
|
|
<form id="v-time" class="sortable" hx-post="/vote/time" hx-trigger="end">
|
2022-11-05 09:51:32 +01:00
|
|
|
{% for d in times %}
|
|
|
|
|
<div class="sort-item">
|
|
|
|
|
{{ d.display or d.time }}
|
|
|
|
|
<input type="hidden" name="time" value="{{d.id}}">
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</form>
|
2022-11-07 23:06:51 +01:00
|
|
|
<div id="r-time" hx-get="/result/{{meet.id}}/time" hx-trigger="load">
|
2022-11-07 21:42:24 +01:00
|
|
|
</div>
|
|
|
|
|
<h2 id="h-place">
|
2022-11-05 09:51:32 +01:00
|
|
|
An welchem Ort?
|
2022-11-07 21:42:24 +01:00
|
|
|
</h2>
|
|
|
|
|
<form id="v-place" class="sortable" hx-post="/vote/place" hx-trigger="end">
|
2022-11-05 09:51:32 +01:00
|
|
|
{% for d in places %}
|
|
|
|
|
<div class="sort-item">
|
|
|
|
|
{{ d.name }}
|
|
|
|
|
<input type="hidden" name="place" value="{{d.id}}">
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</form>
|
2022-11-07 23:06:51 +01:00
|
|
|
<div id="r-place" hx-get="/result/{{meet.id}}/place" hx-trigger="load">
|
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>
|
|
|
|
|
|
