From 9da30d5516ac24016d292f286ec786b3e430ac9c Mon Sep 17 00:00:00 2001
From: BaileyLeeder <baileyleeder7@gmail.com>
Date: Thu, 7 Nov 2024 18:13:04 -0800
Subject: [PATCH 1/7] Small cleanup on satire page

---
 navigation/shared_interests/satire.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/navigation/shared_interests/satire.md b/navigation/shared_interests/satire.md
index 45d45708..ad18c016 100644
--- a/navigation/shared_interests/satire.md
+++ b/navigation/shared_interests/satire.md
@@ -24,8 +24,6 @@ author: Bailey, Travis, Leon, Anyi
 </table>
 <!-- END OF NAV MENU -->
 
-DNHS Satire Home Page
-
 <style>
   /* Reset */
   * {
@@ -313,7 +311,6 @@ DNHS Satire Home Page
     <!-- Add more hashtags as needed -->
   </div>
 </div>
-</div>
 
 <script>
   function togglePostForm() {

From a735fca2bdec554932af0c56460529b99d7d925e Mon Sep 17 00:00:00 2001
From: GyutaeKim1 <gyutae513@gmail.com>
Date: Fri, 8 Nov 2024 08:42:59 -0800
Subject: [PATCH 2/7] erase space

---
 navigation/shared_interests/football.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/navigation/shared_interests/football.md b/navigation/shared_interests/football.md
index a5b1d2d5..ea092ce9 100644
--- a/navigation/shared_interests/football.md
+++ b/navigation/shared_interests/football.md
@@ -173,7 +173,6 @@ menu: nav/shared_interests.html
     <div class="posts-wrapper" id="postsWrapper">
         <!-- Posts will be dynamically loaded here -->
     </div>
-
     <!-- Chatroom Section on the Right -->
     <div class="chatroom-container">
         <header class="chatroom-header">

From 7df2f2dedaa1e307a670abb237fc47f55c5689e5 Mon Sep 17 00:00:00 2001
From: aadibhat09 <aadibhat09@gmail.com>
Date: Mon, 11 Nov 2024 11:26:52 -0800
Subject: [PATCH 3/7] testing out POST request

---
 .../rate_and_relate/instabox/instabox.md      | 55 +++++++++++++------
 1 file changed, 39 insertions(+), 16 deletions(-)

diff --git a/navigation/rate_and_relate/instabox/instabox.md b/navigation/rate_and_relate/instabox/instabox.md
index fad6baf9..9a6decbf 100644
--- a/navigation/rate_and_relate/instabox/instabox.md
+++ b/navigation/rate_and_relate/instabox/instabox.md
@@ -211,25 +211,26 @@ author: Aadi, Aaditya, Aditya, Kanhay
                 e.preventDefault();
                 // Get the current text content of the chat input
                 const newMessage = chatInput.textContent.trim();
-                if (localStorage.getItem("messageCount")) {
-                    localStorage.setItem("messageCount", parseInt(localStorage.getItem("messageCount")) + 1);
-                } else {
-                    localStorage.setItem("messageCount", 1);
-                }
+                // if (localStorage.getItem("messageCount")) {
+                //     localStorage.setItem("messageCount", parseInt(localStorage.getItem("messageCount")) + 1);
+                // } else {
+                //     localStorage.setItem("messageCount", 1);
+                // }
                 localStorage.setItem("message" + localStorage.getItem("messageCount"), newMessage);
                 // Create a new paragraph element for the message
                 if (newMessage != "") {
-                    const messageElement = document.createElement("p");
-                    messageElement.innerHTML = `<strong>Me:</strong> ${newMessage}`;
-                    // Append the new message to the instabox
-                    instabox.appendChild(messageElement);
-                    // Clear the chat input
-                    chatInput.textContent = "";
-                    // Scroll to the latest message
-                    instabox.scrollTop = instabox.scrollHeight;
-                    // Reset character count to 100
-                    charCount.textContent = "100";
-                    charCount.style.color = "#aaa";
+                    // const messageElement = document.createElement("p");
+                    // messageElement.innerHTML = `<strong>Me:</strong> ${newMessage}`;
+                    // // Append the new message to the instabox
+                    // instabox.appendChild(messageElement);
+                    // // Clear the chat input
+                    // chatInput.textContent = "";
+                    // // Scroll to the latest message
+                    // instabox.scrollTop = instabox.scrollHeight;
+                    // // Reset character count to 100
+                    // charCount.textContent = "100";
+                    // charCount.style.color = "#aaa";
+                    postMessage(newMessage);
                 }
             }
         });
@@ -261,6 +262,28 @@ author: Aadi, Aaditya, Aditya, Kanhay
                 });
             });
     }
+    // Add new message
+    function postMessage(newMessage) {
+        fetch(`${pythonURI}/api/messages`, {
+            ...fetchOptions,
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ message: newMessage }) // send the new message as payload
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                fetchMessages(); // refresh messages to include the new message
+            } else {
+                console.error("Error posting message:", data.error);
+            }
+        })
+        .catch(error => {
+            console.error("Error in postMessage:", error);
+        });
+    }
 
 
     window.onload = fetchMessages; // use and run the script

From fcd354fcc79a16a2ea8a05e7c37c63c71affd3c1 Mon Sep 17 00:00:00 2001
From: kchen8478 <kchen.usa@outlook.com>
Date: Tue, 12 Nov 2024 08:54:41 -0800
Subject: [PATCH 4/7] post

---
 navigation/shared_interests/limitconnect.md | 157 +++++++++++++++++++-
 1 file changed, 156 insertions(+), 1 deletion(-)

diff --git a/navigation/shared_interests/limitconnect.md b/navigation/shared_interests/limitconnect.md
index 368f7ec1..864f2ded 100644
--- a/navigation/shared_interests/limitconnect.md
+++ b/navigation/shared_interests/limitconnect.md
@@ -63,4 +63,159 @@ menu: nav/shared_interests.html
            <p>Make connections</p>
            <button onclick="location.href='{{site.baseurl}}/navigation/shared_interests/overall'">Connect</button>
        </div>
-</div>
\ No newline at end of file
+</div>
+<style>
+    .post-form-container {
+        border: 2px solid pink;
+        border-radius: 8px;
+        background-color: skyblue;
+        padding: 15px;
+        margin-top: 20px;
+    }
+    #roleSelect {
+        width: 100%;
+        padding: 10px;
+        border: 2px solid pink;
+        border-radius: 5px;
+        margin-bottom: 10px;
+    }
+    #postInput {
+        width: 100%;
+        height: 100px;
+        padding: 10px;
+        border: 2px solid pink;
+        border-radius: 5px;
+        margin-bottom: 10px;
+        resize: none;
+    }
+</style>
+<!-- Post Submission Form -->
+<div class="post-form-container">
+    <h3>Add a New Post</h3>
+    <form id="postForm">
+        <select id="roleSelect" required>
+            <option value="" disabled selected>Select your role</option>
+            <option value="Student">Student</option>
+            <option value="Admin">Admin</option>
+        </select>
+        <textarea id="postInput" placeholder="What's on your mind?" required></textarea>
+        <button type="submit">Post</button>
+    </form>
+</div>
+
+<script>
+    function getReactions() {
+        const reactions = localStorage.getItem('reactions');
+        return reactions ? JSON.parse(reactions) : {};
+    }
+
+    function saveReactions(reactions) {
+        localStorage.setItem('reactions', JSON.stringify(reactions));
+    }
+
+    function getPosts() {
+        const posts = localStorage.getItem('posts');
+        return posts ? JSON.parse(posts) : [];
+    }
+
+    function savePosts(posts) {
+        localStorage.setItem('posts', JSON.stringify(posts));
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const reactions = getReactions();
+        const posts = getPosts();
+
+        // Load posts from localStorage
+        posts.forEach(post => {
+            createPostElement(post.username, post.content, post.id);
+        });
+
+        document.querySelectorAll('.post').forEach(postElement => {
+            const postId = postElement.getAttribute('data-post-id');
+            const postReactions = reactions[postId] || { thumbsUp: 0, heart: 0, fire: 0 };
+
+            postElement.querySelector('.thumbsUp-count').textContent = postReactions.thumbsUp;
+            postElement.querySelector('.heart-count').textContent = postReactions.heart;
+            postElement.querySelector('.fire-count').textContent = postReactions.fire;
+        });
+    });
+
+    function addReaction(postId, reactionType) {
+        const reactions = getReactions();
+
+        if (!reactions[postId]) {
+            reactions[postId] = { thumbsUp: 0, heart: 0, fire: 0 };
+        }
+
+        reactions[postId][reactionType]++;
+        saveReactions(reactions);
+
+        const postElement = document.querySelector(`[data-post-id="${postId}"]`);
+        const countElement = postElement.querySelector(`.${reactionType}-count`);
+        countElement.textContent = reactions[postId][reactionType];
+    }
+
+    function createPostElement(username, content, postId) {
+        // Create a new post element
+        const newPost = document.createElement('div');
+        newPost.className = 'post';
+        newPost.setAttribute('data-post-id', postId);
+        newPost.innerHTML = `
+            <div class="post-header">
+                <div class="post-icon"></div>
+                <span class="post-username">${username}</span>
+            </div>
+            <p>${content}</p>
+            <div class="reaction-icons">
+                <span class="emoji" onclick="addReaction('${postId}', 'thumbsUp')">👍 <span class="thumbsUp-count">0</span></span>
+                <span class="emoji" onclick="addReaction('${postId}', 'heart')">❤️ <span class="heart-count">0</span></span>
+                <span class="emoji" onclick="addReaction('${postId}', 'fire')">🔥 <span class="fire-count">0</span></span>
+            </div>
+        `;
+
+        // Append the new post to the posts wrapper
+        document.getElementById('postsWrapper').prepend(newPost); // Add to the top
+    }
+
+    // Handle post submission
+    document.getElementById('postForm').addEventListener('submit', function(event) {
+        event.preventDefault(); // Prevent page refresh
+
+        const roleSelect = document.getElementById('roleSelect');
+        const postInput = document.getElementById('postInput');
+        const selectedRole = roleSelect.value; // Get selected role
+        const newPostContent = postInput.value;
+
+        // Create a unique ID based on timestamp
+        const newPostId = Date.now();
+
+        // Save the new post to localStorage
+        const posts = getPosts();
+        posts.push({ id: newPostId, username: selectedRole, content: newPostContent });
+        savePosts(posts);
+
+        // Create and display the new post
+        createPostElement(selectedRole, newPostContent, newPostId);
+
+        // Clear the input
+        // Clear the input fields
+        postInput.value = '';
+        roleSelect.selectedIndex = 0; // Reset to default
+    });
+
+    // Handle message submission
+    document.getElementById('messageForm').addEventListener('submit', function(event) {
+        event.preventDefault();
+        const messageInput = document.getElementById('messageInput');
+        const messageContent = messageInput.value;
+
+        // Create a new message element
+        const newMessage = document.createElement('div');
+        newMessage.textContent = messageContent;
+        document.getElementById('chatArea').appendChild(newMessage);
+
+        // Clear the input field
+        messageInput.value = '';
+    });
+</script>
\ No newline at end of file

From d3875662eaba61b04ee49a08f116c5f4ed99371b Mon Sep 17 00:00:00 2001
From: BaileyLeeder <baileyleeder7@gmail.com>
Date: Tue, 12 Nov 2024 08:56:07 -0800
Subject: [PATCH 5/7] Adding backend to satire

---
 navigation/shared_interests/satire.md | 273 ++++++++++++++++++++++++++
 1 file changed, 273 insertions(+)

diff --git a/navigation/shared_interests/satire.md b/navigation/shared_interests/satire.md
index ad18c016..e58260d6 100644
--- a/navigation/shared_interests/satire.md
+++ b/navigation/shared_interests/satire.md
@@ -447,3 +447,276 @@ author: Bailey, Travis, Leon, Anyi
     togglePostForm();
   }
 </script>
+
+<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>
+    </div>
+</div>
+
+<div class="container">
+    <div class="form-container">
+        <h2>Add 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>
+        </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>
+</div>
+
+<script type="module">
+    // Import server URI and standard fetch options
+    import { pythonURI, fetchOptions } from '{{ site.baseurl }}/assets/js/api/config.js';
+
+    /**
+     * Fetch groups for dropdown selection
+     * User picks from dropdown
+     */
+    async function fetchGroups() {
+        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
+            });
+            if (!response.ok) {
+                throw new Error('Failed to fetch groups: ' + response.statusText);
+            }
+            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);
+            });
+        } catch (error) {
+            console.error('Error fetching groups:', 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);
+        }
+    }
+
+    /**
+      * 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) {
+        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.');
+        }
+    });
+
+    /**
+     * 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`, {
+                ...fetchOptions,
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(postData)
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to add post: ' + response.statusText);
+            }
+
+            // 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);
+            });
+
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    }
+
+    // Fetch groups when the page loads
+    fetchGroups();
+</script>

From 799db003afc96490a83598b413b5f92b3838f027 Mon Sep 17 00:00:00 2001
From: kchen8478 <kchen.usa@outlook.com>
Date: Tue, 12 Nov 2024 09:28:16 -0800
Subject: [PATCH 6/7] post

---
 navigation/shared_interests/limitconnect.md | 361 +++++++++++++-------
 1 file changed, 240 insertions(+), 121 deletions(-)

diff --git a/navigation/shared_interests/limitconnect.md b/navigation/shared_interests/limitconnect.md
index 864f2ded..bc204340 100644
--- a/navigation/shared_interests/limitconnect.md
+++ b/navigation/shared_interests/limitconnect.md
@@ -65,157 +65,276 @@ menu: nav/shared_interests.html
        </div>
 </div>
 <style>
-    .post-form-container {
-        border: 2px solid pink;
-        border-radius: 8px;
-        background-color: skyblue;
-        padding: 15px;
-        margin-top: 20px;
+    .container {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        max-width: 1200px;
+        padding: 20px;
+        box-sizing: border-box;
     }
-    #roleSelect {
+    .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: 2px solid pink;
         border-radius: 5px;
-        margin-bottom: 10px;
-    }
-    #postInput {
+        border: none;
         width: 100%;
-        height: 100px;
+    }
+    .form-container button {
         padding: 10px;
-        border: 2px solid pink;
         border-radius: 5px;
-        margin-bottom: 10px;
-        resize: none;
+        border: none;
+        background-color: #34495e;
+        color: #ecf0f1;
+        cursor: pointer;
     }
 </style>
-<!-- Post Submission Form -->
-<div class="post-form-container">
-    <h3>Add a New Post</h3>
-    <form id="postForm">
-        <select id="roleSelect" required>
-            <option value="" disabled selected>Select your role</option>
-            <option value="Student">Student</option>
-            <option value="Admin">Admin</option>
-        </select>
-        <textarea id="postInput" placeholder="What's on your mind?" required></textarea>
-        <button type="submit">Post</button>
-    </form>
+
+<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>
+                <option value="Captain">Admin</option>
+                <option value="Player">Student</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>
+    </div>
 </div>
 
-<script>
-    function getReactions() {
-        const reactions = localStorage.getItem('reactions');
-        return reactions ? JSON.parse(reactions) : {};
-    }
+<div class="container">
+    <div class="form-container">
+        <h2>Add 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>
+        </form>
+    </div>
+</div>
 
-    function saveReactions(reactions) {
-        localStorage.setItem('reactions', JSON.stringify(reactions));
-    }
+<div class="container">
+    <div id="data" class="data">
+        <div class="left-side">
+            <p id="count"></p>
+        </div>
+        <div class="details" id="details">
+        </div>
+    </div>
+</div>
 
-    function getPosts() {
-        const posts = localStorage.getItem('posts');
-        return posts ? JSON.parse(posts) : [];
-    }
+<script type="module">
+    // Import server URI and standard fetch options
+    import { pythonURI, fetchOptions } from '{{ site.baseurl }}/assets/js/api/config.js';
 
-    function savePosts(posts) {
-        localStorage.setItem('posts', JSON.stringify(posts));
+    /**
+     * Fetch groups for dropdown selection
+     * User picks from dropdown
+     */
+    async function fetchGroups() {
+        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
+            });
+            if (!response.ok) {
+                throw new Error('Failed to fetch groups: ' + response.statusText);
+            }
+            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);
+            });
+        } catch (error) {
+            console.error('Error fetching groups:', error);
+        }
     }
 
-    document.addEventListener('DOMContentLoaded', () => {
-        const reactions = getReactions();
-        const posts = getPosts();
-
-        // Load posts from localStorage
-        posts.forEach(post => {
-            createPostElement(post.username, post.content, post.id);
-        });
+    /**
+     * 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);
+        }
+    }
 
-        document.querySelectorAll('.post').forEach(postElement => {
-            const postId = postElement.getAttribute('data-post-id');
-            const postReactions = reactions[postId] || { thumbsUp: 0, heart: 0, fire: 0 };
+    /**
+      * 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
+        }
+    });
 
-            postElement.querySelector('.thumbsUp-count').textContent = postReactions.thumbsUp;
-            postElement.querySelector('.heart-count').textContent = postReactions.heart;
-            postElement.querySelector('.fire-count').textContent = postReactions.fire;
-        });
+    /**
+     * Handle form submission for selection
+     * Select Button: Computer fetches and displays posts
+     */
+    document.getElementById('selectionForm').addEventListener('submit', function(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.');
+        }
     });
 
-    function addReaction(postId, reactionType) {
-        const reactions = getReactions();
+    /**
+     * 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();
 
-        if (!reactions[postId]) {
-            reactions[postId] = { thumbsUp: 0, heart: 0, fire: 0 };
-        }
+        // Extract data from form
+        const title = document.getElementById('title').value;
+        const comment = document.getElementById('comment').value;
+        const channelId = document.getElementById('channel_id').value;
 
-        reactions[postId][reactionType]++;
-        saveReactions(reactions);
+        // Create API payload
+        const postData = {
+            title: title,
+            comment: comment,
+            channel_id: channelId
+        };
 
-        const postElement = document.querySelector(`[data-post-id="${postId}"]`);
-        const countElement = postElement.querySelector(`.${reactionType}-count`);
-        countElement.textContent = reactions[postId][reactionType];
-    }
+        // Trap errors
+        try {
+            // Send POST request to backend, purpose is to write to database
+            const response = await fetch(`${pythonURI}/api/post`, {
+                ...fetchOptions,
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(postData)
+            });
 
-    function createPostElement(username, content, postId) {
-        // Create a new post element
-        const newPost = document.createElement('div');
-        newPost.className = 'post';
-        newPost.setAttribute('data-post-id', postId);
-        newPost.innerHTML = `
-            <div class="post-header">
-                <div class="post-icon"></div>
-                <span class="post-username">${username}</span>
-            </div>
-            <p>${content}</p>
-            <div class="reaction-icons">
-                <span class="emoji" onclick="addReaction('${postId}', 'thumbsUp')">👍 <span class="thumbsUp-count">0</span></span>
-                <span class="emoji" onclick="addReaction('${postId}', 'heart')">❤️ <span class="heart-count">0</span></span>
-                <span class="emoji" onclick="addReaction('${postId}', 'fire')">🔥 <span class="fire-count">0</span></span>
-            </div>
-        `;
-
-        // Append the new post to the posts wrapper
-        document.getElementById('postsWrapper').prepend(newPost); // Add to the top
-    }
+            if (!response.ok) {
+                throw new Error('Failed to add post: ' + response.statusText);
+            }
 
-    // Handle post submission
-    document.getElementById('postForm').addEventListener('submit', function(event) {
-        event.preventDefault(); // Prevent page refresh
+            // 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);
+        }
+    });
 
-        const roleSelect = document.getElementById('roleSelect');
-        const postInput = document.getElementById('postInput');
-        const selectedRole = roleSelect.value; // Get selected role
-        const newPostContent = postInput.value;
+    /**
+     * 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);
+            }
 
-        // Create a unique ID based on timestamp
-        const newPostId = Date.now();
+            // Parse the JSON data
+            const postData = await response.json();
 
-        // Save the new post to localStorage
-        const posts = getPosts();
-        posts.push({ id: newPostId, username: selectedRole, content: newPostContent });
-        savePosts(posts);
+            // Extract posts count
+            const postCount = postData.length || 0;
 
-        // Create and display the new post
-        createPostElement(selectedRole, newPostContent, newPostId);
+            // Update the HTML elements with the data
+            document.getElementById('count').innerHTML = `<h2>Count ${postCount}</h2>`;
 
-        // Clear the input
-        // Clear the input fields
-        postInput.value = '';
-        roleSelect.selectedIndex = 0; // Reset to default
-    });
+            // Get the details div
+            const detailsDiv = document.getElementById('details');
+            detailsDiv.innerHTML = ''; // Clear previous posts
 
-    // Handle message submission
-    document.getElementById('messageForm').addEventListener('submit', function(event) {
-        event.preventDefault();
-        const messageInput = document.getElementById('messageInput');
-        const messageContent = messageInput.value;
+            // 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);
+            });
 
-        // Create a new message element
-        const newMessage = document.createElement('div');
-        newMessage.textContent = messageContent;
-        document.getElementById('chatArea').appendChild(newMessage);
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    }
 
-        // Clear the input field
-        messageInput.value = '';
-    });
-</script>
\ No newline at end of file
+    // Fetch groups when the page loads
+    fetchGroups();
+</script>

From c01fa6aff1548c269263346d418d63ed681a687c Mon Sep 17 00:00:00 2001
From: GavinCopley <gbcopley@gmail.com>
Date: Tue, 12 Nov 2024 09:33:59 -0800
Subject: [PATCH 7/7] posts onto DNHS football

---
 navigation/shared_interests/football.md | 367 +++++++++++++++++-------
 1 file changed, 259 insertions(+), 108 deletions(-)

diff --git a/navigation/shared_interests/football.md b/navigation/shared_interests/football.md
index ea092ce9..82c59b8f 100644
--- a/navigation/shared_interests/football.md
+++ b/navigation/shared_interests/football.md
@@ -188,134 +188,285 @@ menu: nav/shared_interests.html
     </div>
 </div>
 
-<!-- Post Submission Form -->
-<div class="post-form-container">
-    <h3>Add a New Post</h3>
-    <form id="postForm">
-        <select id="roleSelect" required>
-            <option value="" disabled selected>Select your role</option>
-            <option value="Captain">Captain</option>
-            <option value="Player">Player</option>
-            <option value="Coach">Coach</option>
-        </select>
-        <textarea id="postInput" placeholder="What's on your mind?" required></textarea>
-        <button type="submit">Post</button>
-    </form>
-</div>
-
-<script>
-    function getReactions() {
-        const reactions = localStorage.getItem('reactions');
-        return reactions ? JSON.parse(reactions) : {};
-    }
-
-    function saveReactions(reactions) {
-        localStorage.setItem('reactions', JSON.stringify(reactions));
-    }
-
-    function getPosts() {
-        const posts = localStorage.getItem('posts');
-        return posts ? JSON.parse(posts) : [];
-    }
 
-    function savePosts(posts) {
-        localStorage.setItem('posts', JSON.stringify(posts));
-    }
 
-    document.addEventListener('DOMContentLoaded', () => {
-        const reactions = getReactions();
-        const posts = getPosts();
 
-        // Load posts from localStorage
-        posts.forEach(post => {
-            createPostElement(post.username, post.content, post.id);
-        });
 
-        document.querySelectorAll('.post').forEach(postElement => {
-            const postId = postElement.getAttribute('data-post-id');
-            const postReactions = reactions[postId] || { thumbsUp: 0, heart: 0, fire: 0 };
+<!-- POST -->
 
-            postElement.querySelector('.thumbsUp-count').textContent = postReactions.thumbsUp;
-            postElement.querySelector('.heart-count').textContent = postReactions.heart;
-            postElement.querySelector('.fire-count').textContent = postReactions.fire;
-        });
-    });
 
-    function addReaction(postId, reactionType) {
-        const reactions = getReactions();
 
-        if (!reactions[postId]) {
-            reactions[postId] = { thumbsUp: 0, heart: 0, fire: 0 };
-        }
 
-        reactions[postId][reactionType]++;
-        saveReactions(reactions);
 
-        const postElement = document.querySelector(`[data-post-id="${postId}"]`);
-        const countElement = postElement.querySelector(`.${reactionType}-count`);
-        countElement.textContent = reactions[postId][reactionType];
+<style>
+    .container {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        max-width: 1200px;
+        padding: 20px;
+        box-sizing: border-box;
     }
-
-    function createPostElement(username, content, postId) {
-        // Create a new post element
-        const newPost = document.createElement('div');
-        newPost.className = 'post';
-        newPost.setAttribute('data-post-id', postId);
-        newPost.innerHTML = `
-            <div class="post-header">
-                <div class="post-icon"></div>
-                <span class="post-username">${username}</span>
-            </div>
-            <p>${content}</p>
-            <div class="reaction-icons">
-                <span class="emoji" onclick="addReaction('${postId}', 'thumbsUp')">👍 <span class="thumbsUp-count">0</span></span>
-                <span class="emoji" onclick="addReaction('${postId}', 'heart')">❤️ <span class="heart-count">0</span></span>
-                <span class="emoji" onclick="addReaction('${postId}', 'fire')">🔥 <span class="fire-count">0</span></span>
-            </div>
-        `;
-
-        // Append the new post to the posts wrapper
-        document.getElementById('postsWrapper').prepend(newPost); // Add to the top
+    .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>
 
-    // Handle post submission
-    document.getElementById('postForm').addEventListener('submit', function(event) {
-        event.preventDefault(); // Prevent page refresh
+<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>
+    </div>
+</div>
 
-        const roleSelect = document.getElementById('roleSelect');
-        const postInput = document.getElementById('postInput');
-        const selectedRole = roleSelect.value; // Get selected role
-        const newPostContent = postInput.value;
+<div class="container">
+    <div class="form-container">
+        <h2>Add 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>
+        </form>
+    </div>
+</div>
 
-        // Create a unique ID based on timestamp
-        const newPostId = Date.now();
+<div class="container">
+    <div id="data" class="data">
+        <div class="left-side">
+            <p id="count"></p>
+        </div>
+        <div class="details" id="details">
+        </div>
+    </div>
+</div>
 
-        // Save the new post to localStorage
-        const posts = getPosts();
-        posts.push({ id: newPostId, username: selectedRole, content: newPostContent });
-        savePosts(posts);
+<script type="module">
+    // Import server URI and standard fetch options
+    import { pythonURI, fetchOptions } from '{{ site.baseurl }}/assets/js/api/config.js';
+
+    /**
+     * Fetch groups for dropdown selection
+     * User picks from dropdown
+     */
+    async function fetchGroups() {
+        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
+            });
+            if (!response.ok) {
+                throw new Error('Failed to fetch groups: ' + response.statusText);
+            }
+            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);
+            });
+        } catch (error) {
+            console.error('Error fetching groups:', error);
+        }
+    }
 
-        // Create and display the new post
-        createPostElement(selectedRole, newPostContent, newPostId);
+    /**
+     * 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);
+        }
+    }
 
-        // Clear the input
-        // Clear the input fields
-        postInput.value = '';
-        roleSelect.selectedIndex = 0; // Reset to default
+    /**
+      * 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 message submission
-    document.getElementById('messageForm').addEventListener('submit', function(event) {
+    /**
+     * Handle form submission for selection
+     * Select Button: Computer fetches and displays posts
+     */
+    document.getElementById('selectionForm').addEventListener('submit', function(event) {
         event.preventDefault();
-        const messageInput = document.getElementById('messageInput');
-        const messageContent = messageInput.value;
+        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.');
+        }
+    });
 
-        // Create a new message element
-        const newMessage = document.createElement('div');
-        newMessage.textContent = messageContent;
-        document.getElementById('chatArea').appendChild(newMessage);
+    /**
+     * 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();
 
-        // Clear the input field
-        messageInput.value = '';
+        // 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`, {
+                ...fetchOptions,
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(postData)
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to add post: ' + response.statusText);
+            }
+
+            // 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);
+        }
     });
-</script>
\ No newline at end of file
+
+    /**
+     * 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);
+            });
+
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    }
+
+    // Fetch groups when the page loads
+    fetchGroups();
+</script>