64 lines
1.6 KiB
HTML
64 lines
1.6 KiB
HTML
|
<!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>
|
||
|
|
<p>Hallo, {{ session.user.email }}!</p>
|
||
|
|
<p>
|
||
|
|
{{ meet.title }}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
An welchem Tag?
|
||
|
|
</p>
|
||
|
|
<form class="sortable" hx-post="/vote/date" hx-trigger="end">
|
||
|
|
{% for d in dates %}
|
||
|
|
<div class="sort-item">
|
||
|
|
{{ d.display or d.date }}
|
||
|
|
<input type="hidden" name="date" value="{{d.id}}">
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</form>
|
||
|
|
<p>
|
||
|
|
Zu welcher Zeit?
|
||
|
|
</p>
|
||
|
|
<form class="sortable" hx-post="/vote/time" hx-trigger="end">
|
||
|
|
{% for d in times %}
|
||
|
|
<div class="sort-item">
|
||
|
|
{{ d.display or d.time }}
|
||
|
|
<input type="hidden" name="time" value="{{d.id}}">
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</form>
|
||
|
|
<p>
|
||
|
|
An welchem Ort?
|
||
|
|
</p>
|
||
|
|
<form class="sortable" hx-post="/vote/place" hx-trigger="end">
|
||
|
|
{% for d in places %}
|
||
|
|
<div class="sort-item">
|
||
|
|
{{ d.name }}
|
||
|
|
<input type="hidden" name="place" value="{{d.id}}">
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
htmx.onLoad(function(content) {
|
||
|
|
var sortables = document.querySelectorAll(".sortable");
|
||
|
|
for (const sortable of sortables) {
|
||
|
|
console.debug("making", sortable, "sortable")
|
||
|
|
new Sortable(sortable, {
|
||
|
|
animation: 150,
|
||
|
|
ghostClass: 'blue-background-class'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</html>
|
||
|
|
|