feat: post creation WIP

2026-08-19 11:43:22 +02:00 · 2024-05-16 19:30:33 +02:00
parent 29fce9a241
commit 24eefb743b
6 changed files with 182 additions and 11 deletions
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>GoCMS | Create post</title>
+    {{.Head}}
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <style>
+        form {
+            max-width: 24rem;
+        }
+    </style>
+</head>
+<body class="text-dark">
+{{.Navbar}}
+<div class="container mt-3 text-black-50">
+    <h1>Post - creation</h1>
+    <p>Create a new post</p>
+    <form action="create" method="post" class="d-flex align-items-center flex-column gap-3" id="createPostForm">
+        <div class="form-floating w-100">
+          <input type="text" class="form-control" id="name" name="name" placeholder="Chose the post name">
+          <label for="name">Name</label>
+        </div>
+        <button id="createPostButton" class="btn btn-primary w-100" disabled type="submit">
+						<span class="createPostFormButtonLoading visually-hidden spinner-border spinner-border-sm"
+                              role="status"></span>
+            <span class="createPostFormButtonDefault">Create</span>
+        </button>
+    </form>
+</div>
+
+<script>
+    const button = document.querySelector("#createPostButton")
+    const inputs = document.querySelectorAll('input')
+    const form = document.querySelector("#createPostForm")
+
+    function formFieldsEmpty() {
+        return Array.from(inputs).some((input) => input.value === "")
+    }
+
+    function setButtonDisabled() {
+        button.disabled = formFieldsEmpty() ? "disabled" : ""
+    }
+
+    function setButtonLoading() {
+        button.classList.add("disabled")
+        button.querySelector(".createPostFormButtonDefault").classList.add("visually-hidden")
+        button.querySelector(".createPostFormButtonLoading").classList.remove("visually-hidden")
+    }
+
+    function onCreatePostFormSubmit(event) {
+        setButtonLoading()
+        event.target.submit()
+    }
+
+    function onInput(event) {
+        if (event.target.tagName === "INPUT") setButtonDisabled()
+    }
+
+    form.addEventListener('submit', onCreatePostFormSubmit)
+    window.addEventListener('input', onInput)
+    setButtonDisabled()
+</script>
+
+</body>
+</html>
@@ -1,20 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<title>GoCMS | Posts</title>
-	{{.Head}}
+    <title>GoCMS | Posts</title>
+    {{.Head}}
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
 </head>
 <body class="text-dark">
 {{.Navbar}}
 <div class="container mt-3 text-black-50">
-	<h1>Posts</h1>
-	<p>List of your posts</p>
-	<table class="table table-striped">
-		<thead>
-		</thead>
-		<tbody>
-		</tbody>
-	</table>
+    <h1>Posts</h1>
+    <p>List of your posts</p>
+    <table class="table">
+        <thead>
+        <tr>
+            <th scope="col">Name</th>
+            <th scope="col">Creation Date</th>
+            <th scope="col">Edition Date</th>
+            <th scope="col">Actions</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td colspan="4" class="text-center">
+                <form action="post/create" method="get">
+                    <button class="btn btn-sm btn-link w-100 h-100" type="submit">Create a new post...</button>
+                </form>
+            </td>
+        </tr>
+        <tr>
+            <td>1</td>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+        </tr>
+        </tbody>
+    </table>
 </div>

 </body>