92 lines
2.7 KiB
HTML
92 lines
2.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>Posts</title>
|
|
<link rel="stylesheet" media="screen" href="/static/global.css" />
|
|
</head>
|
|
<body hx-boost="true">
|
|
<main>
|
|
<nav>
|
|
<table>
|
|
<tr>
|
|
<td><a href="/posts">Posts</a></td>
|
|
<td><a href="/users">Users</a></td>
|
|
</tr>
|
|
</table>
|
|
<table>
|
|
<tr>
|
|
{% if login %}
|
|
<td><a href="#" id="button-create-post">create post</a></td>
|
|
<td><a href="/users/{{login_username}}">{{login_username}}</a></td>
|
|
<td><a href="/action/logout">logout</a></td>
|
|
{% else %}
|
|
<td><a href="/login">login</a></td>
|
|
<td><a href="/signup">signup</a></td>
|
|
{% end %}
|
|
</tr>
|
|
</table>
|
|
</nav>
|
|
|
|
{% for post in posts %}
|
|
<div class="post-preview">
|
|
<div class="post-preview-title">
|
|
<a href="/posts/{{post.id}}">
|
|
{{post.title}}
|
|
</a>
|
|
</div>
|
|
<div class="post-preview-details">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<a hx-post="/posts/{{post.id}}/upvotes" hx-target='.post-preview-details' hx-swap='outerHTML'>
|
|
{{post.upvotes}}
|
|
{% if post.upvoted %}
|
|
<img src="/static/upvote_full.svg" />
|
|
{% else %}
|
|
<img src="/static/upvote_empty.svg" />
|
|
{% end %}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a hx-post="/posts/{{post.id}}/downvotes" hx-target='.post-preview-details' hx-swap='outerHTML'>
|
|
{{post.downvotes}}
|
|
{% if post.downvoted %}
|
|
<img src="/static/upvote_full.svg" class="rotate180" />
|
|
{% else %}
|
|
<img src="/static/upvote_empty.svg" class="rotate180" />
|
|
{% end %}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span>by <a href="/users/{{post.author}}">{{post.author}}</a> at {{post.created_}}</span>
|
|
</td>
|
|
<td>
|
|
<span>{{post.num_comments}} comments</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% end %}
|
|
</main>
|
|
|
|
{% if login %}
|
|
<dialog id="modal-create-post">
|
|
<form method="dialog" id="modal-create-post-close-dialog-form"></form>
|
|
<form action="/action/post" method="POST" id="modal-create-post-publish-form">
|
|
<input type="text" name="title" placeholder="title" />
|
|
<textarea name="content" placeholder="content"></textarea>
|
|
</form>
|
|
<button form="modal-create-post-close-dialog-form">cancel</button>
|
|
<input type="submit" value="publish" form="modal-create-post-publish-form" />
|
|
</dialog>
|
|
{% end %}
|
|
|
|
<script src="/static/htmx.js"></script>
|
|
<script>
|
|
const modal_create_post = document.querySelector("#modal-create-post");
|
|
const button_create_post = document.querySelector("#button-create-post")
|
|
|
|
button_create_post.onclick = function (event) { modal_create_post.showModal(); }
|
|
</script>
|
|
</body>
|
|
</html> |