95 lines
2.7 KiB
HTML
95 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Pool - {{ pool.name }} - {{ application_name }}</title>
|
|
{% include "fragments/common_headers.html" %}
|
|
<script src="/static/sortable.js"></script>
|
|
<meta property="og:title" content="{{ pool.name }}" />
|
|
<meta property="og:url" content="/pool/{{ pool.id }}" />
|
|
<meta property="twitter:title" content="{{ pool.name }}" />
|
|
<meta
|
|
property="og:description"
|
|
content="Pool with {{ posts.len() }} post(s)."
|
|
/>
|
|
{% if let Some(post) = posts.first() %}
|
|
<meta property="og:image" content="/files/{{ post.thumbnail }}" />
|
|
<meta property="twitter:image:src" content="/files/{{ post.thumbnail }}" />
|
|
{% endif %} {% if can_edit %}
|
|
<script>
|
|
htmx.onLoad(function (content) {
|
|
var sortables = content.querySelectorAll(".sortable");
|
|
for (var i = 0; i < sortables.length; i++) {
|
|
var sortable = sortables[i];
|
|
var sortableInstance = new Sortable(sortable, {
|
|
animation: 150,
|
|
ghostClass: "blue-background-class",
|
|
|
|
// Make the `.htmx-indicator` unsortable
|
|
filter: ".htmx-indicator",
|
|
onMove: function (evt) {
|
|
return evt.related.className.indexOf("htmx-indicator") === -1;
|
|
},
|
|
|
|
// Disable sorting on the `end` event
|
|
onEnd: function (evt) {
|
|
console.log(evt);
|
|
this.option("disabled", true);
|
|
},
|
|
});
|
|
|
|
// Re-enable sorting on the `htmx:afterSwap` event
|
|
sortable.addEventListener("htmx:afterSwap", function () {
|
|
sortableInstance.option("disabled", false);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
</head>
|
|
<body>
|
|
<div><a href="/">< To home</a></div>
|
|
<main>
|
|
<h1>Pool - {{ pool.name }}</h1>
|
|
</main>
|
|
<article>
|
|
<h2>Posts</h2>
|
|
{% include "fragments/pool_posts.html" %}
|
|
</article>
|
|
{% if can_edit %}
|
|
<article>
|
|
<form
|
|
hx-post="/pool/{{ pool.id }}/post"
|
|
hx-target="#pool-posts"
|
|
hx-swap="outerHTML"
|
|
>
|
|
<div>
|
|
<label>Add post</label>
|
|
<input
|
|
id="add-post-input"
|
|
type="text"
|
|
name="post_id"
|
|
placeholder="Post ID"
|
|
pattern="[0-9]*"
|
|
/>
|
|
<button>Add</button>
|
|
</div>
|
|
</form>
|
|
<div>
|
|
<label>Is public pool?</label>
|
|
<input
|
|
name="is_public"
|
|
type="checkbox"
|
|
hx-put="/pool/{{ pool.id }}/public"
|
|
{%
|
|
if
|
|
pool.is_public
|
|
%}checked{%
|
|
endif
|
|
%}
|
|
value="true"
|
|
/>
|
|
</div>
|
|
</article>
|
|
{% endif %}
|
|
</body>
|
|
</html>
|