tetratto/crates/app/src/public/html/stacks/list.html

93 lines
2.8 KiB
HTML

{% extends "root.html" %} {% block head %}
<title>My stacks - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav() }}
<main class="flex flex-col gap-2">
{{ macros::timelines_nav(selected="stacks") }} {% if user -%}
<div class="card-nest">
<div class="card small">
<b>{{ text "stacks:label.create_new" }}</b>
</div>
<form
class="card flex flex-col gap-2"
onsubmit="create_stack_from_form(event)"
>
<div class="flex flex-col gap-1">
<label for="name">{{ text "communities:label.name" }}</label>
<input
type="text"
name="name"
id="name"
placeholder="name"
required
minlength="2"
maxlength="32"
/>
</div>
<button class="primary">
{{ text "communities:action.create" }}
</button>
</form>
</div>
{%- endif %}
<div class="card-nest w-full">
<div class="card small flex items-center justify-between gap-2">
<div class="flex items-center gap-2">
{{ icon "award" }}
<span>{{ text "stacks:label.my_stacks" }}</span>
</div>
</div>
<div class="card flex flex-col gap-2">
{% for item in list %}
<a
href="/stacks/{{ item.id }}"
class="card secondary flex flex-col gap-2"
>
<div class="flex items-center gap-2">
{{ icon "list" }}
<b>{{ item.name }}</b>
</div>
<span
>Created <span class="date">{{ item.created }}</span>; {{
item.privacy }}; {{ item.users|length }} users</span
>
</a>
{% endfor %}
</div>
</div>
</main>
<script>
async function create_stack_from_form(e) {
e.preventDefault();
await trigger("atto::debounce", ["stacks::create"]);
fetch("/api/v1/stacks", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: e.target.name.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
if (res.ok) {
setTimeout(() => {
window.location.href = `/stacks/${res.payload}`;
}, 100);
}
});
}
</script>
{% endblock %}