Add post voting

This commit is contained in:
2024-10-16 17:52:50 +02:00
parent df926c815e
commit ffbbc709ce
12 changed files with 4237 additions and 49 deletions
+5 -3
View File
@@ -3,7 +3,7 @@
<title>Log in</title>
<link rel="stylesheet" media="screen" href="/static/global.css" />
</head>
<body>
<body hx-boost="true">
<main>
<nav>
<table>
@@ -20,11 +20,13 @@
</table>
</nav>
<form method="POST" action="/action/login">
<script src="/static/htmx.js"></script>
<div id="login-error-message"></div>
<form hx-post="/action/login" hx-target="#login-error-message">
<input type="text" name="name" placeholder="name" />
<input type="password" name="pass" placeholder="pass" />
<input type="submit" value="login" />
</form>
</main>
</body>
</html>
</html>
+10 -9
View File
@@ -3,7 +3,7 @@
<title>{{title}}</title>
<link rel="stylesheet" media="screen" href="/static/global.css" />
</head>
<body>
<body hx-boost="true">
<main>
<nav>
<table>
@@ -26,8 +26,11 @@
</nav>
<article>
<h1>{{title}} (by {{author}})</h1>
<p>{{content}}</p>
<div class="post">
<h1>{{title}} (by {{author}})</h1>
<p>{{content}}</p>
</div>
{% if login %}
<form action="/posts/{{id}}/comments" method="POST">
@@ -36,14 +39,12 @@
</form>
{% end %}
<table>
{% for comment in comments %}
<tr>
<td>{{comment.author}}:</td>
<td>{{comment.content}}</td>
</tr>
<div class="comment">
<a href="/users/{{comment.author}}">{{comment.author}}</a>:
{{comment.content}}
</div>
{% end %}
</table>
</article>
</main>
</body>
+45 -10
View File
@@ -3,7 +3,7 @@
<title>Posts</title>
<link rel="stylesheet" media="screen" href="/static/global.css" />
</head>
<body>
<body hx-boost="true">
<main>
<nav>
<table>
@@ -15,6 +15,7 @@
<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 %}
@@ -25,19 +26,53 @@
</table>
</nav>
{% if login %}
<form action="/action/post" method="POST">
<input type="text" name="title" placeholder="title" />
<textarea name="content" placeholder="content"></textarea>
<input type="submit" value="publish" />
</form>
{% end %}
{% for post in posts %}
<div class="post-preview">
<a href="/posts/{{post.id}}">{{post.title}}</a> by <a href="/users/{{post.author}}">{{post.author}}</a>
<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}}</a>
</td>
<td>
<a hx-post="/posts/{{post.id}}/downvotes" hx-target='.post-preview-details' hx-swap='outerHTML'>{{post.downvotes}}</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>
+1 -1
View File
@@ -3,7 +3,7 @@
<title>Sign up</title>
<link rel="stylesheet" media="screen" href="/static/global.css" />
</head>
<body>
<body hx-boost="true">
<main>
<nav>
<table>
+1 -1
View File
@@ -3,7 +3,7 @@
<title>{{name}}'s profile</title>
<link rel="stylesheet" media="screen" href="/static/global.css" />
</head>
<body>
<body hx-boost="true">
<main>
<nav>
<table>
+1 -1
View File
@@ -3,7 +3,7 @@
<title>Users</title>
<link rel="stylesheet" media="screen" href="/static/global.css" />
</head>
<body>
<body hx-boost="true">
<main>
<nav>
<table>