From 2b5fac65b41945479b15d2aab001940de1ccd455 Mon Sep 17 00:00:00 2001
From: 65160268 <65160268@go.buu.ac.th>
Date: Fri, 28 Mar 2025 10:50:40 +0000
Subject: [PATCH] Update 3 files
- /server.js
- /views/thread-view.ejs
- /views/dashboard.ejs
---
server.js | 36 ++++++++-
views/dashboard.ejs | 184 +++++++++++++++++++++++++++++++-----------
views/thread-view.ejs | 8 +-
3 files changed, 173 insertions(+), 55 deletions(-)
diff --git a/server.js b/server.js
index 97a4f86..5556572 100644
--- a/server.js
+++ b/server.js
@@ -32,7 +32,7 @@ const connection = mysql.createConnection({
connection.connect(err => {
if (err) {
- console.error('เError connecting to MySQL:', err);
+ console.error('Error connecting to MySQL:', err);
process.exit(1);
}
console.log('Connected to MySQL Successfully');
@@ -195,17 +195,28 @@ app.get('/thread/delete/:id', isAuthenticated, (req, res) => {
// หน้าแสดง thread พร้อมคอมเมนต์
app.get('/thread/:id', (req, res) => {
const threadId = req.params.id;
+
connection.query(
- `SELECT threads.*, users.username AS ownerName FROM threads JOIN users ON threads.user_id = users.id WHERE threads.id = ?`,
+ `SELECT threads.*, users.username AS ownerName
+ FROM threads
+ JOIN users ON threads.user_id = users.id
+ WHERE threads.id = ?`,
[threadId],
(err, results) => {
if (err || results.length === 0) return res.send('ไม่พบ thread ที่ต้องการ');
+
const thread = results[0];
+
connection.query(
- `SELECT comments.*, users.username AS commentUser FROM comments JOIN users ON comments.user_id = users.id WHERE comments.thread_id = ? ORDER BY comments.id DESC`,
+ `SELECT comments.*, users.username AS commentUser, users.email
+ FROM comments
+ JOIN users ON comments.user_id = users.id
+ WHERE comments.thread_id = ?
+ ORDER BY comments.comment_id DESC`, // ชื่อคอลัมน์ถูกต้อง
[threadId],
(err2, comments) => {
if (err2) return res.send('เกิดข้อผิดพลาดในการดึงคอมเมนต์');
+
res.render('thread-view', {
username: req.session.username,
userId: req.session.userId,
@@ -249,6 +260,25 @@ app.get('/comment/delete/:id', isAuthenticated, (req, res) => {
);
});
+
+// ดึงคอมเมนต์ล่าสุดจากทุกกระทู้
+app.get('/api/comments/latest',isAuthenticated, (req, res) => {
+ const sql = `
+ SELECT c.comment, u.id AS user_id, u.email, u.username, c.created_at
+ FROM comments c
+ JOIN users u ON c.user_id = u.id
+ ORDER BY c.created_at DESC
+ LIMIT 10
+ `;
+ connection.query(sql, (err, results) => {
+ if (err) {
+ console.error('ดึงคอมเมนต์ล่าสุดล้มเหลว:', err);
+ return res.status(500).json({ error: 'ดึงคอมเมนต์ไม่สำเร็จ' });
+ }
+ res.json(results);
+ });
+});
+
// ออกจากระบบ
app.get('/logout', (req, res) => {
req.session.destroy();
diff --git a/views/dashboard.ejs b/views/dashboard.ejs
index abafe86..975f7fa 100644
--- a/views/dashboard.ejs
+++ b/views/dashboard.ejs
@@ -1,56 +1,144 @@
<%- include('partials/header', { username: username }) %>
-<!-- Background color -->
-<div class="container my-5" style="background-color: #a86dcff5; color: #333; border-radius: 0px; padding: 30px;">
- <!-- Header with Title -->
- <div class="d-flex justify-content-between align-items-center mb-4">
- <h2 class="mb-0" style="color: #000000; font-size: 30px; font-weight: 600;">THREAD TOPIC</h2>
- <a href="/thread/create" class="btn" style="background-color: #000000; color: #fff; font-weight: 600; border-radius: 20px; padding: 10px 20px;">
- Create New Thread Topic
- </a>
- </div>
+<div class="container my-5">
+ <div class="row">
+ <!-- LEFT: THREAD LIST -->
+ <div class="col-md-8" style="background-color: #a86dcff5; color: #333; border-radius: 0px; padding: 30px;">
+ <div class="d-flex justify-content-between align-items-center mb-4">
+ <h2 class="mb-0" style="color: #000000; font-size: 30px; font-weight: 600;">THREAD TOPIC</h2>
+ <a href="/thread/create" class="btn" style="background-color: #000000; color: #fff; font-weight: 600; border-radius: 20px; padding: 10px 20px;">
+ Create New Thread Topic
+ </a>
+ </div>
- <!-- List Group of Topics -->
- <div class="list-group">
- <% threads.forEach(thread => { %>
- <!-- Topic Item -->
- <div class="list-group-item mb-4" style="background-color: #FFF; color: #333; border: none; border-radius: 0px; padding: 20px;">
- <div class="d-flex justify-content-between">
- <!-- Thread Title -->
- <h5 class="mb-1" style="font-size: 20px; font-weight: 700;">
- <a href="/thread/<%= thread.id %>" style="color: #000000; text-decoration: none;">
- <%= thread.thread_name %>
- </a>
- </h5>
- <!-- Thread Owner -->
- <small style="color: #999; font-size: 16px;">
- <span style="color: black; font-weight: bold;">Owner: <%= thread.ownerName %> </span>
- </small>
- </div>
-
- <!-- Short Description -->
- <p class="mb-3" style="font-size: 15px; line-height: 1.5;">
- <%= thread.description.length > 100
- ? thread.description.substring(0, 100) + '...'
- : thread.description
- %>
- </p>
-
- <!-- Action Buttons (View/Edit/Delete) -->
- <div class="mt-3">
- <a href="/thread/<%= thread.id %>" class="btn btn-sm btn-outline-info" style="border-radius: 20px;">View</a>
- <% if (thread.user_id === userId) { %>
- <a href="/thread/edit/<%= thread.id %>" class="btn btn-sm btn-outline-warning" style="border-radius: 20px;">Edit</a>
- <a href="/thread/delete/<%= thread.id %>"
- class="btn btn-sm btn-outline-danger" style="border-radius: 20px;"
- onclick="return confirm('Are you sure you want to delete this thread?');">
- Delete
- </a>
- <% } %>
- </div>
+ <div class="list-group">
+ <% threads.forEach(thread => { %>
+ <div class="list-group-item mb-4" style="background-color: #FFF; color: #333; border: none; border-radius: 0px; padding: 20px;">
+ <div class="d-flex justify-content-between">
+ <h5 class="mb-1" style="font-size: 20px; font-weight: 700;">
+ <a href="#" onclick="loadComments"(<%= thread.id %>) style="color: #000000; text-decoration: none;">
+ <%= thread.thread_name %>
+ </a>
+ </h5>
+ <small style="color: #999; font-size: 16px;">
+ <span style="color: black; font-weight: bold;">Owner: <%= thread.ownerName %></span>
+ </small>
+ </div>
+ <p class="mb-3" style="font-size: 15px; line-height: 1.5;">
+ <%= thread.description.length > 100
+ ? thread.description.substring(0, 100) + '...'
+ : thread.description
+ %>
+ </p>
+
+ <div class="mt-3">
+ <a href="/thread/<%= thread.id %>" class="btn btn-sm btn-outline-info" style="border-radius: 20px;">View</a>
+ <% if (thread.user_id === userId) { %>
+ <a href="/thread/edit/<%= thread.id %>" class="btn btn-sm btn-outline-warning" style="border-radius: 20px;">Edit</a>
+ <a href="/thread/delete/<%= thread.id %>"
+ class="btn btn-sm btn-outline-danger" style="border-radius: 20px;"
+ onclick="return confirm('Are you sure you want to delete this thread?');">
+ Delete
+ </a>
+ <% } %>
+ </div>
+ </div>
+ <% }) %>
</div>
- <% }) %>
+ </div>
+
+ <style>
+ .col-md-4 {
+ display: flex;
+
+ }
+
+ #comment-box {
+ width: 300%;
+ text-align: center;
+ }
+ </style>
+ <!-- RIGHT: COMMENT BOX -->
+ <div class="col-md-4">
+ <div id="comment-box" style="background-color: #000000; color: White; padding: 20px; min-height: 700px;">
+ <h5 class="mb-3">Latest User's Comment</h5>
+ <div id="comment-list"></div>
+ </div>
+ </div>
</div>
</div>
+<script>
+function loadComments(threadId) {
+ fetch(`/api/thread/${threadId}/comments`)
+ .then(res => res.json())
+ .then(data => {
+ const list = document.getElementById('comment-list');
+ list.innerHTML = '';
+ if (data.length === 0) {
+ list.innerHTML = '<p>ยังไม่มีความคิดเห็น</p>';
+ } else {
+ data.forEach(comment => {
+ const item = document.createElement('div');
+ item.innerHTML = `
+ <p><strong>${comment.username}</strong> (${comment.email}, ID: ${comment.user_id})</p>
+ <p>${comment.content}</p>
+ <hr style="border-color: white;">
+ `;
+ list.appendChild(item);
+ });
+ }
+ })
+ .catch(err => {
+ document.getElementById('comment-list').innerHTML = '<p>เกิดข้อผิดพลาดในการโหลดคอมเมนต์</p>';
+ console.error(err);
+ });
+}
+
+// โหลดคอมเมนต์ล่าสุดและแสดงแบบมีลำดับ + เวลา
+document.addEventListener('DOMContentLoaded', function () {
+ fetch('/api/comments/latest')
+ .then(res => res.json())
+ .then(data => {
+ const list = document.getElementById('comment-list');
+ list.innerHTML = '';
+
+ if (data.length === 0) {
+ list.innerHTML = '<p>ยังไม่มีความคิดเห็น</p>';
+ } else {
+ data.forEach((comment, index) => {
+ const item = document.createElement('div');
+ item.style.textAlign = 'left';
+ item.style.marginBottom = '15px';
+
+ // แปลงวันที่ให้ดูง่ายขึ้น
+ const createdAt = new Date(comment.created_at).toLocaleString
+ ('th-TH', {
+ dateStyle: 'medium',
+ timeStyle: 'short'
+ });
+
+ item.innerHTML = `
+ <p><strong>--------------------------------------------------------------</strong></p>
+ <p><strong>#${index + 1}</strong></p>
+ <p><strong>Username : </strong> ${comment.username}</p>
+ <p><strong>User Email : </strong> ${comment.email}</p>
+ <p><strong>User ID : </strong> ${comment.user_id}</p>
+ <p><strong>Comment : </strong> ${comment.comment}</p>
+ <p><strong>Comment Since :</strong> ${createdAt}</p>
+ <p><strong>--------------------------------------------------------------</strong></p>
+ `;
+ list.appendChild(item);
+ });
+ }
+ })
+ .catch(err => {
+ document.getElementById('comment-list').innerHTML = '<p>โปรดเข้าสู่ระบบก่อนเพื่อดูประวัติการ Comment ล่าสุด</p>';
+ console.error(err);
+ });
+});
+
+
+</script>
+
<%- include('partials/footer') %>
diff --git a/views/thread-view.ejs b/views/thread-view.ejs
index fafee31..1157bad 100644
--- a/views/thread-view.ejs
+++ b/views/thread-view.ejs
@@ -54,10 +54,10 @@
<!-- แสดงชื่อผู้คอมเมนต์และข้อความ -->
<strong><%= c.commentUser %>:</strong> <%= c.comment %>
- <!-- แสดง Comment ID เล็ก ๆ -->
- <span class="text-muted" style="font-size: 0.8em;">
- (Comment ID: <%= c.id %>)
- </span>
+ <!-- แสดง Email -->
+ <span class="text-muted" style="font-size: 0.8em;">
+ <b>(<%= c.email %>)</b>
+ </span>
<!-- ปุ่มลบคอมเมนต์ (เฉพาะเจ้าของคอมเมนต์) -->
<% if (c.user_id === userId) { %>
--
GitLab