From d7883f938cc2a602c08798ca7a98e0ba4b1614af Mon Sep 17 00:00:00 2001
From: Mom5MoreMins <aranya0924@gmail.com>
Date: Wed, 20 Nov 2024 08:16:04 -0800
Subject: [PATCH] post fix

---
 .../cipher/cipherdiscussionforum.md           | 413 ++++++++----------
 1 file changed, 176 insertions(+), 237 deletions(-)
diff --git a/navigation/share_and_care/cipher/cipherdiscussionforum.md b/navigation/share_and_care/cipher/cipherdiscussionforum.md
index 4603835c..33f1bd18 100644
--- a/navigation/share_and_care/cipher/cipherdiscussionforum.md
+++ b/navigation/share_and_care/cipher/cipherdiscussionforum.md
@@ -4,275 +4,214 @@ title: CipherDiscussion
 search_exclude: true
 permalink: share_and_care/cipherdiscussion
 ---
-<style>
-    .container {
-        display: flex;
-        justify-content: center;
-        width: 100%;
-        max-width: 1200px;
-        padding: 20px;
-        box-sizing: border-box;
-    }
-    .form-container {
-        display: flex;
-        flex-direction: column;
-        max-width: 800px;
-        width: 100%;
-        background-color: #2c3e50;
-        padding: 20px;
-        border-radius: 10px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        color: #ecf0f1;
-    }
-    .form-container label {
-        margin-bottom: 5px;
-    }
-    .form-container input, .form-container textarea, .form-container select {
-        margin-bottom: 10px;
-        padding: 10px;
-        border-radius: 5px;
-        border: none;
-        width: 100%;
-    }
-    .form-container button {
-        padding: 10px;
-        border-radius: 5px;
-        border: none;
-        background-color: #34495e;
-        color: #ecf0f1;
-        cursor: pointer;
-    }
-</style>
-
-<div class="container">
-    <div class="form-container">
-        <h2>Select Group and Channel</h2>
-        <form id="selectionForm">
-            <label for="group_id">Group:</label>
-            <select id="group_id" name="group_id" required>
-                <option value="">Select a group</option>
-            </select>
-            <label for="channel_id">Channel:</label>
-            <select id="channel_id" name="channel_id" required>
-                <option value="">Select a channel</option>
-            </select>
-            <button type="submit">Select</button>
-        </form>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cipher Discussion</title>
+    <style>
+        /* General Styling */
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #121212;
+            color: #f0f0f0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        header { 
+            padding: 20px;
+            width: 100%;
+            max-width: 1000px;
+            background-color: #1a1a1a;
+            text-align: center;
+            border-bottom: 5px solid #d91e18;
+        }
+        header h1 { 
+            font-size: 2.8rem; 
+            color: #d91e18; 
+            text-shadow: 0px 2px 10px rgba(217, 30, 24, 0.7);
+        }
+        header p { 
+            color: #b0b0b0; 
+            font-size: 1rem; 
+        }
+        .main-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 30px;
+            margin-top: 20px;
+            width: 100%;
+            max-width: 1000px;
+        }
+        .content-section {
+            width: 100%;
+            background-color: #1f1f1f;
+            padding: 20px;
+            border: 3px solid #d91e18;
+        }
+        .content-section h2 {
+            color: #d91e18;
+            margin-bottom: 10px;
+            text-align: center;
+            text-shadow: 0px 2px 8px rgba(217, 30, 24, 0.7);
+        }
+        .content-section form input, .content-section form textarea, .content-section form button {
+            width: 100%;
+            margin-top: 10px;
+            padding: 10px;
+            border: none;
+            background-color: #2e2e2e;
+            color: #f0f0f0;
+        }
+        .content-section form button {
+            background-color: #d91e18;
+            color: #1a1a1a;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .posts-wrapper {
+            margin-bottom: 20px;
+        }
+        .chatroom-container .chat-area {
+            background-color: #2e2e2e;
+            padding: 15px;
+            height: 200px;
+            overflow-y: auto;
+            margin-bottom: 10px;
+        }
+        .chatroom-container form input, .chatroom-container form button {
+            padding: 10px;
+            border: none;
+            background-color: #2e2e2e;
+            color: #f0f0f0;
+            margin-top: 5px;
+        }
+        .chatroom-container form button {
+            background-color: #d91e18;
+            color: #1a1a1a;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .post {
+            background-color: #2e2e2e;
+            padding: 15px;
+            margin-bottom: 10px;
+        }
+        .post-header {
+            font-weight: bold;
+            margin-bottom: 5px;
+            color: #d91e18;
+        }
+    </style>
+</head>
+<body>
+
+<header>
+    <h1>Welcome to Cipher Discussion!</h1>
+    <p>Share ideas, solve ciphers, and connect with others!</p>
+</header>
+
+<div class="main-container">
+    <div class="content-section posts-wrapper" id="postsWrapper">
+        <h2>Community Posts</h2>
+        <!-- Posts will be dynamically loaded here -->
     </div>
-</div>
-
-<div class="container">
-    <div class="form-container">
-        <h2>Add New Post</h2>
+    <div class="content-section">
+        <h2>Add a New Post</h2>
         <form id="postForm">
-            <label for="title">Title:</label>
-            <input type="text" id="title" name="title" required>
-            <label for="comment">Comment:</label>
-            <textarea id="comment" name="comment" required></textarea>
-            <button type="submit">Add Post</button>
+            <input type="text" id="usernameInput" placeholder="Enter your username" required>
+            <textarea id="postInput" placeholder="What's on your mind?" required></textarea>
+            <button type="submit">Post</button>
         </form>
     </div>
 </div>
 
-<div class="container">
-    <div id="data" class="data">
-        <div class="left-side">
-            <p id="count"></p>
-        </div>
-        <div class="details" id="details">
-        </div>
+<div class="content-section chatroom-container">
+    <h2>Live Chatroom</h2>
+    <div class="chat-area" id="messages">
+        <!-- Messages will appear here -->
     </div>
+    <form id="chat-form">
+        <input type="text" id="username" placeholder="Your Name" required>
+        <input type="text" id="message" placeholder="Type a message..." maxlength="200" required>
+        <button type="submit">Send</button>
+    </form>
 </div>
 
 <script type="module">
-    // Import server URI and standard fetch options
-    import { pythonURI, fetchOptions } from '{{ site.baseurl }}/assets/js/api/config.js';
+    import { pythonURI, fetchOptions } from '../assets/js/api/config.js';
 
-    /**
-     * Fetch groups for dropdown selection
-     * User picks from dropdown
-     */
-    async function fetchGroups() {
+    async function fetchPosts() {
         try {
-            const response = await fetch(`${pythonURI}/api/groups/filter`, {
-                ...fetchOptions,
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ section_name: "Shared Interest" }) // Adjust the section name as needed
-            });
+            const response = await fetch(`${pythonURI}/api/posts`, fetchOptions);
             if (!response.ok) {
-                throw new Error('Failed to fetch groups: ' + response.statusText);
+                throw new Error("Failed to fetch posts from the backend.");
             }
-            const groups = await response.json();
-            const groupSelect = document.getElementById('group_id');
-            groups.forEach(group => {
-                const option = document.createElement('option');
-                option.value = group.name; // Use group name for payload
-                option.textContent = group.name;
-                groupSelect.appendChild(option);
-            });
+            const posts = await response.json();
+            renderPosts(posts);
         } catch (error) {
-            console.error('Error fetching groups:', error);
+            console.error("Error fetching posts:", error);
         }
     }
 
-    /**
-     * Fetch channels based on selected group
-     * User picks from dropdown
-     */
-    async function fetchChannels(groupName) {
-        try {
-            const response = await fetch(`${pythonURI}/api/channels/filter`, {
-                ...fetchOptions,
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ group_name: groupName })
-            });
-            if (!response.ok) {
-                throw new Error('Failed to fetch channels: ' + response.statusText);
-            }
-            const channels = await response.json();
-            const channelSelect = document.getElementById('channel_id');
-            channelSelect.innerHTML = '<option value="">Select a channel</option>'; // Reset channels
-            channels.forEach(channel => {
-                const option = document.createElement('option');
-                option.value = channel.id;
-                option.textContent = channel.name;
-                channelSelect.appendChild(option);
-            });
-        } catch (error) {
-            console.error('Error fetching channels:', error);
-        }
+    function renderPosts(posts) {
+        document.getElementById('postsWrapper').innerHTML = posts.map(post => {
+            const username = post.username || "Anonymous"; 
+            const content = typeof post.content === 'string' ? post.content : JSON.stringify(post.content);
+
+            return `
+                <div class="post" data-post-id="${post.id}">
+                    <div class="post-header">${username}</div>
+                    <p>${content}</p>
+                </div>`;
+        }).join('');
     }
 
-    /**
-      * Handle group selection change
-      * Channel Dropdown refresh to match group_id change
-      */
-    document.getElementById('group_id').addEventListener('change', function() {
-        const groupName = this.value;
-        if (groupName) {
-            fetchChannels(groupName);
-        } else {
-            document.getElementById('channel_id').innerHTML = '<option value="">Select a channel</option>'; // Reset channels
-        }
-    });
-
-    /**
-     * Handle form submission for selection
-     * Select Button: Computer fetches and displays posts
-     */
-    document.getElementById('selectionForm').addEventListener('submit', function(event) {
+    async function addPost(event) {
         event.preventDefault();
-        const groupId = document.getElementById('group_id').value;
-        const channelId = document.getElementById('channel_id').value;
-        if (groupId && channelId) {
-            fetchData(channelId);
-        } else {
-            alert('Please select both group and channel.');
-        }
-    });
+        const username = document.getElementById('usernameInput').value || "Anonymous";
+        const content = document.getElementById('postInput').value;
+        const postData = { username, content };
 
-    /**
-     * Handle form submission for adding a post
-     * Add Form Button: Computer handles form submission with request
-     */
-    document.getElementById('postForm').addEventListener('submit', async function(event) {
-        event.preventDefault();
-
-        // Extract data from form
-        const title = document.getElementById('title').value;
-        const comment = document.getElementById('comment').value;
-        const channelId = document.getElementById('channel_id').value;
-
-        // Create API payload
-        const postData = {
-            title: title,
-            comment: comment,
-            channel_id: channelId
-        };
-
-        // Trap errors
         try {
-            // Send POST request to backend, purpose is to write to database
-            const response = await fetch(`${pythonURI}/api/post`, {
+            const response = await fetch(`${pythonURI}/api/posts`, {
                 ...fetchOptions,
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(postData)
             });
-
             if (!response.ok) {
-                throw new Error('Failed to add post: ' + response.statusText);
+                throw new Error("Failed to add post to the backend.");
             }
-
-            // Successful post
-            const result = await response.json();
-            alert('Post added successfully!');
             document.getElementById('postForm').reset();
-            fetchData(channelId);
-        } catch (error) {
-            // Present alert on error from backend
-            console.error('Error adding post:', error);
-            alert('Error adding post: ' + error.message);
-        }
-    });
-
-    /**
-     * Fetch posts based on selected channel
-     * Handle response: Fetch and display posts
-     */
-    async function fetchData(channelId) {
-        try {
-            const response = await fetch(`${pythonURI}/api/posts/filter`, {
-                ...fetchOptions,
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ channel_id: channelId })
-            });
-            if (!response.ok) {
-                throw new Error('Failed to fetch posts: ' + response.statusText);
-            }
-
-            // Parse the JSON data
-            const postData = await response.json();
-
-            // Extract posts count
-            const postCount = postData.length || 0;
-
-            // Update the HTML elements with the data
-            document.getElementById('count').innerHTML = `<h2>Count ${postCount}</h2>`;
-
-            // Get the details div
-            const detailsDiv = document.getElementById('details');
-            detailsDiv.innerHTML = ''; // Clear previous posts
-
-            // Iterate over the postData and create HTML elements for each item
-            postData.forEach(postItem => {
-                const postElement = document.createElement('div');
-                postElement.className = 'post-item';
-                postElement.innerHTML = `
-                    <h3>${postItem.title}</h3>
-                    <p><strong>Channel:</strong> ${postItem.channel_name}</p>
-                    <p><strong>User:</strong> ${postItem.user_name}</p>
-                    <p>${postItem.comment}</p>
-                `;
-                detailsDiv.appendChild(postElement);
-            });
-
+            fetchPosts(); // Refresh posts after adding a new one
         } catch (error) {
-            console.error('Error fetching data:', error);
+            console.error("Error adding post:", error);
         }
     }
 
-    // Fetch groups when the page loads
-    fetchGroups();
+    document.addEventListener('DOMContentLoaded', () => {
+        fetchPosts();
+        
+        document.getElementById('postForm').addEventListener('submit', addPost);
+
+        document.getElementById('chat-form').addEventListener('submit', function(event) {
+            event.preventDefault();
+            const username = document.getElementById('username').value || "Anonymous";
+            const message = document.getElementById('message').value;
+            const timestamp = new Date().toLocaleTimeString();
+            const messageHtml = `<p><span class="username">${username}</span>: ${message} <span class="timestamp">[${timestamp}]</span></p>`;
+            document.getElementById("messages").innerHTML += messageHtml;
+            event.target.reset();
+        });
+    });
+
 </script>
+
+</body>
+</html>
