Webapps Comment Board

bysemicon -
0

 




index.html

     

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Comment Board</title>
  <!-- Bootstrap 5.3 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script>
    function postComment() {
      const name = document.getElementById("nameInput").value;
      const comment = document.getElementById("commentInput").value;
      google.script.run.saveComment(name, comment);
      alert("Comment added!");
      setTimeout(loadComments, 1000); 
    }

    function postReply(commentId) {
      const name = document.getElementById("replyName" + commentId).value;
      const replyText = document.getElementById("replyText" + commentId).value;
      google.script.run.saveReply(commentId, name, replyText);
      alert("Reply added!");
      loadComments()
    }

    function toggleReplyForm(commentId) {
      const form = document.getElementById("replyForm" + commentId);
      form.style.display = form.style.display === "none" ? "block" : "none";
    }

    function loadComments() {
      document.getElementById("nameInput").value = "";
      document.getElementById("commentInput").value = "";

      google.script.run.withSuccessHandler(function(data) {
        const comments = JSON.parse(data);
        const container = document.getElementById("commentsContainer");
        container.innerHTML = "";
        comments.forEach(function(comment) {
          console.log(comment.replies)
          let repliesHTML = ''
          if(Object.keys(comment.replies).length > 0){
          repliesHTML = `<div class="card bg-secondary bg-opacity-10 mt-3">`;
          for (const replyId in comment.replies) {
            repliesHTML += `
              <div class="ms-4 mb-2">
                <span class="text-secondary">↳ <b>${comment.replies[replyId].name}:</b> ${comment.replies[replyId].text}</span>
              </div>`;
          }
          repliesHTML += `</div>`;
          }
          container.innerHTML += `
            <div class="card mb-3">
              <div class="card-body">
                <p class="card-text"><b>${comment.name}:</b> ${comment.comment}</p>
                <button class="btn btn-sm btn-outline-primary" onclick="toggleReplyForm(${comment.id})">Reply</button>
                <div id="replyForm${comment.id}" class="mt-2 card p-3" style="display: none;">
                  <input type="text" id="replyName${comment.id}" class="form-control mb-2" placeholder="Your Name">
                  <input type="text" id="replyText${comment.id}" class="form-control mb-2" placeholder="Reply Here">
                  <button class="btn btn-sm btn-success" onclick="postReply(${comment.id})">Submit</button>
                </div>
                
                ${repliesHTML}
                
              </div>
            </div>`;
        });
      }).getComments();
    }
  </script>
</head>

<body onload="loadComments()">
  <div class="container mt-4" style="max-width:800px; min-width:400px">
    <div class="container">
    <h2 class="mb-4">Comment Board</h2>

    <div class="mb-3">
      <input type="text" id="nameInput" class="form-control mb-2" placeholder="Your Name">
      <input type="text" id="commentInput" class="form-control mb-2" placeholder="Write a comment">
      <button class="btn btn-primary" onclick="postComment()">Post Comment</button>
    </div>

    <hr>

    <div id="commentsContainer"></div>
    </div>
  </div>
</body>
</html>

code.gs

     

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
    .setTitle("Project Kru Chian")
    .setFaviconUrl("https://semicon.github.io/img/logo2small.png")
    .addMetaTag('viewport', 'width=device-width , initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
}

// บันทึกความคิดเห็นลง Google Sheet
function saveComment(name, comment) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("CommentsData");
  sheet.appendRow([sheet.getLastRow() + 1, name, comment, "{}"]); // ใช้ {} เพื่อเริ่มต้น Object ว่าง
  return "Comment saved!";
}

// บันทึกการตอบกลับ โดยเก็บในเซลเดียวกันเป็น JSON object
function saveReply(commentId, name, replyText) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("CommentsData");
  var data = sheet.getDataRange().getValues();

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] == commentId) {
      var replies = JSON.parse(data[i][3] || "{}"); // โหลดข้อมูลเดิม
      var replyId = Object.keys(replies).length + 1;
      replies[replyId] = { name: name, text: replyText };
      sheet.getRange(i + 1, 4).setValue(JSON.stringify(replies)); // อัพเดตข้อมูลตอบกลับ
      return "Reply saved!";
    }
  }
  return "Comment not found!";
}

// ดึงข้อมูลความคิดเห็นทั้งหมด
function getComments() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("CommentsData");
  var data = sheet.getDataRange().getValues();
  var comments = [];

  for (var i = 1; i < data.length; i++) {
    comments.push({
      id: data[i][0],
      name: data[i][1],
      comment: data[i][2],
      replies: JSON.parse(data[i][3] || "{}") // โหลดข้อมูลตอบกลับ
    });
  }
  return JSON.stringify(comments);
}


Download

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า