Skip to content

Commit

Permalink
Merge pull request #26 from WSU-4110/group_discussions
Browse files Browse the repository at this point in the history
Add discussion board functionality
  • Loading branch information
alkhafaji4 authored Oct 23, 2024
2 parents d510eeb + 8f179bb commit bb02926
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 6 deletions.
Binary file added .DS_Store
Binary file not shown.
12 changes: 6 additions & 6 deletions public/dashboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ <h4>We love books</h4>
<section class="trending-groups">
<div class="section-header">
<h3>Trending Group Discussions</h3>
<a href="#" class="browse-allbutton">Browse All</a>
<a href="discussion.html?id=1" class="joinbutton">Join</a>
</div>
<div class="trending-scroll">
<div class="trending-card">
Expand All @@ -254,7 +254,7 @@ <h3>Trending Group Discussions</h3>
<div class="trending-content">
<h4>Why do we read books?</h4>
<p>10 replies</p>
<a href="/register.html" class="joinbutton">Join</a>
<a href="discussion.html?id=2" class="joinbutton">Join</a>
</div>
</div>
<div class="trending-card">
Expand All @@ -265,7 +265,7 @@ <h4>Why do we read books?</h4>
<div class="trending-content">
<h4>We are all different</h4>
<p>5 replies</p>
<a href="#" class="join-button">Join</a>
<a href="discussion.html?id=3" class="joinbutton">Join</a>
</div>
</div>
<div class="trending-card">
Expand All @@ -276,7 +276,7 @@ <h4>We are all different</h4>
<div class="trending-content">
<h4>What did you learn from this book?</h4>
<p>8 replies</p>
<a href="#" class="joinbutton">Join</a>
<a href="discussion.html?id=4" class="joinbutton">Join</a>
</div>
</div>
<div class="trending-card">
Expand All @@ -287,7 +287,7 @@ <h4>What did you learn from this book?</h4>
<div class="trending-content">
<h4>Was Frankenstein book satisfying to read?</h4>
<p>5 replies</p>
<a href="#" class="joinbutton">Join</a>
<a href="discussion.html?id=5" class="joinbutton">Join</a>
</div>
</div>
<div class="trending-card">
Expand All @@ -301,7 +301,7 @@ <h4>
a book?
</h4>
<p>4 replies</p>
<a href="#" class="joinbutton">Join</a>
<a href="discussion.html?id=6" class="joinbutton">Join</a>
</div>
</div>
</div>
Expand Down
92 changes: 92 additions & 0 deletions public/discussion.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discussion Thread</title>
<link rel="stylesheet" href="loginreg.css">
</head>
<body>
<main>
<section class="discussion-thread">
<h2 id="discussion-title"></h2>
<div id="discussion-container"></div>

<!-- Form to submit a new reply -->
<form id="reply-form">
<input type="text" id="username" placeholder="Your Name" required>
<textarea id="reply-message" rows="4" placeholder="Write your reply here..." required></textarea>
<button type="submit">Post Reply</button>
</form>
</section>
</main>

<!-- Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js"></script>

<script>
// Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyAt-SInlPaL2FzwtXrRltIEiV5l8k5HMjg",
authDomain: "pageturners-a831a.firebaseapp.com",
projectId: "pageturners-a831a",
storageBucket: "pageturners-a831a.appspot.com",
messagingSenderId: "304224952392",
appId: "1:304224952392:web:f33dbc84b481e39a44787d",
measurementId: "G-C6DKQSJ1R8"
};
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

// Extract discussion ID from URL
const urlParams = new URLSearchParams(window.location.search);
const discussionId = urlParams.get('id');

// Fetch and display the discussion based on ID
const discussionTitle = document.getElementById('discussion-title');
const discussionContainer = document.getElementById('discussion-container');

db.collection('discussions').doc(discussionId).get().then(doc => {
if (doc.exists) {
const data = doc.data();
discussionTitle.textContent = data.title;

// Load replies
db.collection('discussions').doc(discussionId).collection('replies')
.orderBy('timestamp')
.onSnapshot(snapshot => {
discussionContainer.innerHTML = '';
snapshot.forEach(replyDoc => {
const replyData = replyDoc.data();
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.innerHTML = `<p><strong>${replyData.username}:</strong> ${replyData.message}</p>`;
discussionContainer.appendChild(messageElement);
});
});
} else {
discussionTitle.textContent = "Discussion not found.";
}
});

// Handle new reply submission
const form = document.getElementById('reply-form');
form.addEventListener('submit', function (event) {
event.preventDefault();

const username = document.getElementById('username').value;
const message = document.getElementById('reply-message').value;

// Add the reply to Firestore
db.collection('discussions').doc(discussionId).collection('replies').add({
username: username,
message: message,
timestamp: firebase.firestore.FieldValue.serverTimestamp()
}).then(() => {
form.reset();
});
});
</script>
</body>
</html>
66 changes: 66 additions & 0 deletions public/loginreg.css
Original file line number Diff line number Diff line change
Expand Up @@ -120,4 +120,70 @@
font-size: 14px;
}
}

body {
font-family: Arial, sans-serif;
background-color: #fffaf0; /* Light orange background */
margin: 20px;
}

.discussion-board {
max-width: 600px;
margin: 0 auto;
background-color: #fff2e6; /* Light orange board */
border: 1px solid #ffa07a; /* Light orange border */
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.discussion-board h2 {
text-align: center;
color: #ff4500;
}

.messages {
border-top: 1px solid #ffa07a;
margin-top: 20px;
padding-top: 10px;
}

.message {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #ffdab9;
}

.message strong {
color: #ff4500;
}

form {
display: flex;
flex-direction: column;
}

input[type="text"], textarea {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ffdab9;
border-radius: 5px;
font-size: 16px;
background-color: #fffaf0;
}

button {
padding: 10px;
background-color: #ff4500;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}

button:hover {
background-color: #e03e00;
}


0 comments on commit bb02926

Please sign in to comment.