Skip to content

Commit

Permalink
Merge remote-tracking branch 'refs/remotes/origin/main'
Browse files Browse the repository at this point in the history
  • Loading branch information
@aadibhat09
aadibhat09 committed Nov 4, 2024
2 parents 13266a0 + f1922b1 commit 216d06a
Showing 1 changed file with 101 additions and 35 deletions.
136 changes: 101 additions & 35 deletions navigation/authentication/post.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,31 @@ search_exclude: true
}
</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>
<label for="comment">Comment:</label>
<textarea id="comment" name="comment" required></textarea>
<label for="channel_id">Channel:</label>
<select id="channel_id" name="channel_id" required>
<option value="">Select a channel</option>
</select>
<button type="submit">Add Post</button>
</form>
</div>
Expand All @@ -76,15 +89,50 @@ search_exclude: true
// Import server URI and standard fetch options
import { pythonURI, fetchOptions } from '{{ site.baseurl }}/assets/js/api/config.js';

// Fetch channels for dropdown selection
async function fetchChannels() {
// Fetch groups for dropdown selection
async function fetchGroups() {
try {
const response = await fetch(`${pythonURI}/api/channels`, fetchOptions);
const response = await fetch(`${pythonURI}/api/groups/filter`, {
...fetchOptions,
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ section_name: "Home Page" }) // 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
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;
Expand All @@ -96,21 +144,42 @@ search_exclude: true
}
}

// Handle form submission
// Handle group selection 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
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
document.getElementById('postForm').addEventListener('submit', async function(event) {
// Prevent default from submission
event.preventDefault();

// Extract data from form
const title = document.getElementById('title').value;
const comment = document.getElementById('comment').value;
const channel_id = document.getElementById('channel_id').value;
const channelId = document.getElementById('channel_id').value;

// Create API payload
const postData = {
title: title,
comment: comment,
channel_id: channel_id
channel_id: channelId
};

// Trap errors
Expand All @@ -129,47 +198,45 @@ search_exclude: true
throw new Error('Failed to add post: ' + response.statusText);
}

// Succesfull post
// Successful post
const result = await response.json();
alert('Post added successfully!');
document.getElementById('postForm').reset();
fetchData();
fetchData(channelId);
} catch (error) {
// Present alert on error from backend
console.error('Error adding post:', error);
alert('Error adding post: ' + error.message);
}
});

// URLs to fetch profile links, user data, and commits
const postApiUrl = `${pythonURI}/api/posts`;

async function fetchData() {
// Fetch posts based on selected channel
async function fetchData(channelId) {
try {
// Define the fetch requests
const postApiRequest = fetch(postApiUrl, fetchOptions);

// Run all fetch requests concurrently
const [postApiResponse] = await Promise.all([
postApiRequest
]);

// Check for errors in the responses
if (!postApiResponse.ok) {
throw new Error('Failed to fetch post API links: ' + postApiResponse.statusText);
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 postApiResponse.json();
const postData = await response.json();

// Extract commits count
// 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 => {
Expand All @@ -189,7 +256,6 @@ search_exclude: true
}
}

// Fetch when the page loads
fetchChannels();
fetchData();
</script>
// Fetch groups when the page loads
fetchGroups();
</script>

0 comments on commit 216d06a

Please sign in to comment.