新規コメント作成フォームを書き直して、ページ遷移に対応

jphacks · Oct 23, 2021 · 4b80722 · 4b80722
1 parent 4024ca3
commit 4b80722
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 26 deletions.
diff --git a/static/css/index.css b/static/css/index.css
@@ -0,0 +1,29 @@
+div.new-topic-form {
+  padding: 0 0.5rem;
+}
+
+form.new-topic-form input[type="text"] {
+  margin: 0.5rem 0 0;
+  padding: 0.5rem;
+  width: 100%;
+  border: 1px solid #000;
+}
+
+form.new-topic-form .position {
+  padding: 0.5rem 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+form.new-topic-form input[type="radio"].new-topic-form-position {
+  appearance: auto;
+}
+
+form.new-topic-form button.new-topic-form-submit-button {
+  margin: 0.5rem 0 0;
+  padding: 0.5rem;
+  width: 100%;
+  border: 1px solid #0004;
+  cursor: pointer;
+}
diff --git a/static/js/index.js b/static/js/index.js
@@ -1,21 +1,32 @@
-const form = document.getElementById("form");
-const button = document.getElementById("button");
+const newTopicFormSubmitButton = document.querySelector("button.new-topic-form-submit-button");
 
-button.addEventListener("click", (event) => {
-  const data = new FormData(form);
-  let obj = {};
-  obj.parent_comment_id = 0;
-  obj.title = data.get("title");
-  obj.text = data.get("text");
-  obj.attribute = Number(data.get("sanpi"));
+newTopicFormSubmitButton.addEventListener("click", () => {
+  const newTopicForm = document.querySelector("form.new-topic-form");
+  let formData = new FormData(newTopicForm);
+  let requestData = {};
+  requestData.parent_comment_id = 0;
+  requestData.title = formData.get("title");
+  requestData.text = formData.get("content");
+  if (formData.get("position") === "agree") {
+    requestData.attribute = 1;
+  }
+  if (formData.get("position") === "neutral") {
+    requestData.attribute = 0;
+  }
+  if (formData.get("position") === "disagree") {
+    requestData.attribute = -1;
+  }
   fetch("/comment", {
     method: "POST",
     headers: {
       "Content-Type": "application/json; charset=UTF-8"
     },
-    body: JSON.stringify(obj)
-  })
-    .then((res) => { return res.text(); })
-    .then((data) => { console.log(data) })
-    .catch((err) => { console.log(err); });
-}, false);
+    body: JSON.stringify(requestData)
+  }).then((response) => {
+    return response.json();
+  }).then((responseJSON) => {
+    location.pathname = `/comment/${responseJSON.comment_id}`;
+  }).catch((error) => {
+    console.error(error);
+  });
+});
diff --git a/templates/index.html b/templates/index.html
@@ -4,19 +4,39 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
+  <link rel="stylesheet" href="https://kakudo415.github.io/null.css/2.4.css">
+  <link rel="stylesheet" href="static/css/index.css">
   <script src="static/js/index.js" defer></script>
 </head>
 <body>
-  <form id="form">
-    <input type="text" name="title" id="title">
-    <input type="text" name="text" id="text">
-    <input type="radio" name="sanpi" id="sansei" value="1">
-    <label for="sansei">賛成</label>
-    <input type="radio" name="sanpi" id="churitsu" value="0">
-    <label for="churitsu">中立</label>
-    <input type="radio" name="sanpi" id="hantai" value="-1">
-    <label for="hantai">反対</label>
-    <button type="button" id="button">送信</button>
-  </form>
+  <header>
+
+  </header>
+  <main>
+    <div class="new-topic-form">
+      <form class="new-topic-form">
+        <input type="text" name="title" placeholder="議題">
+        <input type="text" name="content" placeholder="あなたの考えを共有してみてください！">
+        <div class="position">
+          <div>
+            <input type="radio" name="position" id="position-form-agree" class="new-topic-form-position" value="agree">
+            <label for="position-form-agree">賛成</label>
+          </div>
+          <div>
+            <input type="radio" name="position" id="position-form-neutral" class="new-topic-form-position" value="neutral">
+            <label for="position-form-neutral">中立</label>
+          </div>
+          <div>
+            <input type="radio" name="position" id="position-form-disagree" class="new-topic-form-position" value="disagree">
+            <label for="position-form-disagree">反対</label>
+          </div>
+        </div>
+        <button type="button" class="new-topic-form-submit-button">送信</button>
+      </form>
+    </div>
+    <div class="new-topics">
+
+    </div>
+  </main>
 </body>
 </html>