i finally committed i guess
Signed-off-by: boris <boris@borishub.co.uk>
This commit is contained in:
boris
471
public/js/comments.js
Normal file
471
public/js/comments.js
Normal file
@@ -0,0 +1,471 @@
|
||||
/**
|
||||
* Comments functionality for facility management
|
||||
*/
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('Comments.js loaded');
|
||||
|
||||
// Initialize comment modal handlers
|
||||
initializeCommentModals();
|
||||
|
||||
// Set up form handlers
|
||||
setupCommentFormHandlers();
|
||||
});
|
||||
|
||||
/**
|
||||
* Initialize comment modals
|
||||
*/
|
||||
function initializeCommentModals() {
|
||||
// Status modal (comments view)
|
||||
const statusModal = document.getElementById('statusModal');
|
||||
if (statusModal) {
|
||||
statusModal.addEventListener('show.bs.modal', function(event) {
|
||||
console.log('Comments modal is about to show');
|
||||
// Get the button that triggered the modal
|
||||
const button = event.relatedTarget;
|
||||
// Get the facility ID from the data attribute
|
||||
const facilityId = button.getAttribute('data-facility-id');
|
||||
console.log('Facility ID for comments:', facilityId);
|
||||
|
||||
if (!facilityId) {
|
||||
console.error('No facility ID found for comments');
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the facility ID in the comment form
|
||||
const commentForm = document.getElementById('commentForm');
|
||||
if (commentForm) {
|
||||
const facilityIdInput = commentForm.querySelector('#commentFacilityId');
|
||||
if (facilityIdInput) {
|
||||
facilityIdInput.value = facilityId;
|
||||
}
|
||||
}
|
||||
|
||||
// Load facility comments
|
||||
loadFacilityComments(facilityId);
|
||||
});
|
||||
}
|
||||
|
||||
// Edit comment modal
|
||||
const editCommentModal = document.getElementById('editCommentModal');
|
||||
if (editCommentModal) {
|
||||
editCommentModal.addEventListener('show.bs.modal', function(event) {
|
||||
console.log('Edit comment modal is about to show');
|
||||
// The button that triggered the modal will pass data via dataset
|
||||
const button = event.relatedTarget;
|
||||
const commentId = button.getAttribute('data-comment-id');
|
||||
const commentText = button.getAttribute('data-comment-text');
|
||||
|
||||
console.log('Comment ID:', commentId, 'Comment text:', commentText);
|
||||
|
||||
// Set the comment ID and text in the form
|
||||
const editForm = document.getElementById('editCommentForm');
|
||||
if (editForm) {
|
||||
const commentIdInput = editForm.querySelector('#editCommentId');
|
||||
const commentTextArea = editForm.querySelector('#editCommentText');
|
||||
|
||||
if (commentIdInput && commentTextArea) {
|
||||
commentIdInput.value = commentId;
|
||||
commentTextArea.value = commentText;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up comment form handlers
|
||||
*/
|
||||
function setupCommentFormHandlers() {
|
||||
// Comment form handler
|
||||
const commentForm = document.getElementById('commentForm');
|
||||
if (commentForm) {
|
||||
setupCommentFormHandler(commentForm);
|
||||
}
|
||||
|
||||
// Edit comment form handler
|
||||
const editCommentForm = document.getElementById('editCommentForm');
|
||||
if (editCommentForm) {
|
||||
setupEditCommentFormHandler(editCommentForm);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up a single comment form handler
|
||||
* @param {HTMLFormElement} commentForm - The comment form element
|
||||
*/
|
||||
function setupCommentFormHandler(commentForm) {
|
||||
commentForm.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Prevent duplicate submissions
|
||||
if (this.submitting) {
|
||||
return;
|
||||
}
|
||||
this.submitting = true;
|
||||
|
||||
// Check if user is authenticated
|
||||
if (!isAuthenticated()) {
|
||||
alert('You must be logged in to add comments');
|
||||
this.submitting = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(this);
|
||||
|
||||
// Get form data
|
||||
const commentText = formData.get('commentText');
|
||||
const facilityId = formData.get('facilityId');
|
||||
|
||||
console.log('Comment form data:', { facilityId, commentText });
|
||||
|
||||
try {
|
||||
console.log('Sending comment request...');
|
||||
// Use the API client to add a status comment
|
||||
const data = await window.api.addFacilityStatus(facilityId, commentText);
|
||||
|
||||
console.log('Comment response:', data);
|
||||
|
||||
if (data.success) {
|
||||
console.log('Comment added successfully');
|
||||
|
||||
// Reset the form
|
||||
this.reset();
|
||||
|
||||
// Reload comments to show the new one
|
||||
loadFacilityComments(facilityId);
|
||||
} else {
|
||||
console.error('Comment failed:', data.error);
|
||||
alert(data.error || 'Failed to add comment');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error adding comment:', error);
|
||||
alert('Failed to add comment: ' + error.message);
|
||||
} finally {
|
||||
this.submitting = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up a single edit comment form handler
|
||||
* @param {HTMLFormElement} editCommentForm - The edit comment form element
|
||||
*/
|
||||
function setupEditCommentFormHandler(editCommentForm) {
|
||||
editCommentForm.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Prevent duplicate submissions
|
||||
if (this.submitting) {
|
||||
return;
|
||||
}
|
||||
this.submitting = true;
|
||||
|
||||
// Check if user is authenticated
|
||||
if (!isAuthenticated()) {
|
||||
alert('You must be logged in to edit comments');
|
||||
this.submitting = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(this);
|
||||
|
||||
// Get form data
|
||||
const commentText = formData.get('editCommentText');
|
||||
const commentId = formData.get('commentId');
|
||||
const facilityId = document.getElementById('commentFacilityId').value;
|
||||
|
||||
console.log('Edit comment form data:', { commentId, facilityId, commentText });
|
||||
|
||||
try {
|
||||
console.log('Sending edit comment request...');
|
||||
// Use the API client to update a status comment
|
||||
const data = await window.api.updateFacilityStatus(commentId, commentText, facilityId);
|
||||
|
||||
console.log('Edit comment response:', data);
|
||||
|
||||
if (data.success) {
|
||||
console.log('Comment edited successfully');
|
||||
|
||||
// Close the edit modal
|
||||
const editModal = bootstrap.Modal.getInstance(document.getElementById('editCommentModal'));
|
||||
if (editModal) {
|
||||
editModal.hide();
|
||||
}
|
||||
|
||||
// Reload comments to show the updated one
|
||||
loadFacilityComments(facilityId);
|
||||
} else {
|
||||
console.error('Edit comment failed:', data.error);
|
||||
alert(data.error || 'Failed to edit comment');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error editing comment:', error);
|
||||
alert('Failed to edit comment: ' + error.message);
|
||||
} finally {
|
||||
this.submitting = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a comment form dynamically for authenticated users
|
||||
* @param {string} facilityId - The facility ID
|
||||
*/
|
||||
function createCommentFormForAuthenticatedUser(facilityId) {
|
||||
// Check if user is authenticated
|
||||
if (!isAuthenticated()) {
|
||||
return `
|
||||
<div class="alert alert-info mb-0">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
Please <a href="#" data-bs-toggle="modal" data-bs-target="#loginModal">login</a> to add comments.
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Create the comment form
|
||||
return `
|
||||
<form id="commentForm" class="mt-3">
|
||||
<input type="hidden" id="commentFacilityId" name="facilityId" value="${escapeHtml(facilityId)}">
|
||||
<div class="mb-3">
|
||||
<label for="commentText" class="form-label">Add a Comment</label>
|
||||
<textarea class="form-control" id="commentText" name="commentText" rows="3" required></textarea>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end">
|
||||
<button type="submit" class="btn btn-success">
|
||||
<i class="bi bi-chat-dots-fill me-1"></i>
|
||||
Add Comment
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the current user is authenticated
|
||||
* @returns {boolean} True if authenticated, false otherwise
|
||||
*/
|
||||
function isAuthenticated() {
|
||||
// Use the auth service to check authentication
|
||||
return window.auth.isAuthenticated();
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads facility comments from the server
|
||||
* @param {string} facilityId - The facility ID
|
||||
*/
|
||||
async function loadFacilityComments(facilityId) {
|
||||
try {
|
||||
console.log('Loading comments for facility:', facilityId);
|
||||
|
||||
// Show loading indicator
|
||||
const commentsContainer = document.getElementById('commentsContainer');
|
||||
if (commentsContainer) {
|
||||
commentsContainer.innerHTML = `
|
||||
<div class="text-center py-4">
|
||||
<div class="spinner-border text-success" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-2 text-muted">Loading comments...</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Use the API client to get facility statuses
|
||||
const data = await window.api.getFacilityStatuses(facilityId);
|
||||
|
||||
console.log('Comments loaded:', data);
|
||||
|
||||
if (data.success) {
|
||||
// Render the comments
|
||||
renderComments(data.statuses, facilityId);
|
||||
} else {
|
||||
console.error('Failed to load comments:', data.error);
|
||||
if (commentsContainer) {
|
||||
commentsContainer.innerHTML = `
|
||||
<div class="alert alert-danger">
|
||||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||||
Failed to load comments: ${data.error || 'Unknown error'}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading comments:', error);
|
||||
const commentsContainer = document.getElementById('commentsContainer');
|
||||
if (commentsContainer) {
|
||||
commentsContainer.innerHTML = `
|
||||
<div class="alert alert-danger">
|
||||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||||
Error loading comments: ${error.message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders comments in the comments container
|
||||
* @param {Array} comments - Array of comment objects
|
||||
* @param {string} facilityId - The facility ID
|
||||
*/
|
||||
function renderComments(comments, facilityId) {
|
||||
const commentsContainer = document.getElementById('commentsContainer');
|
||||
if (!commentsContainer) return;
|
||||
|
||||
// Clear the container
|
||||
commentsContainer.innerHTML = '';
|
||||
|
||||
// Add the comment form for authenticated users
|
||||
commentsContainer.innerHTML += createCommentFormForAuthenticatedUser(facilityId);
|
||||
|
||||
// If no comments, show a message
|
||||
if (!comments || comments.length === 0) {
|
||||
commentsContainer.innerHTML += `
|
||||
<div class="alert alert-light mt-3">
|
||||
<i class="bi bi-chat-dots me-2"></i>
|
||||
No comments yet. Be the first to add a comment!
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the comments list
|
||||
const commentsList = document.createElement('div');
|
||||
commentsList.className = 'comments-list mt-4';
|
||||
|
||||
// Add each comment
|
||||
comments.forEach(comment => {
|
||||
const commentElement = document.createElement('div');
|
||||
commentElement.className = 'comment-item card mb-3 border-0 shadow-sm';
|
||||
|
||||
// Format the date
|
||||
const date = new Date(comment.timestamp);
|
||||
const formattedDate = date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
// Check if the current user is the comment author or an admin
|
||||
const canEdit = isAdmin() || isCurrentUser(comment.username);
|
||||
|
||||
commentElement.innerHTML = `
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="comment-avatar bg-light rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 32px; height: 32px;">
|
||||
<i class="bi bi-person-fill text-secondary"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0 fw-bold">${escapeHtml(comment.username)}</h6>
|
||||
<small class="text-muted">${formattedDate}</small>
|
||||
</div>
|
||||
</div>
|
||||
${canEdit ? `
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="bi bi-three-dots-vertical"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#editCommentModal" data-comment-id="${comment.id}" data-comment-text="${escapeHtml(comment.comment)}">
|
||||
<i class="bi bi-pencil me-2"></i>Edit
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="dropdown-item text-danger" type="button" onclick="deleteComment('${comment.id}', '${facilityId}')">
|
||||
<i class="bi bi-trash me-2"></i>Delete
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<p class="mb-0">${escapeHtml(comment.comment)}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
commentsList.appendChild(commentElement);
|
||||
});
|
||||
|
||||
commentsContainer.appendChild(commentsList);
|
||||
|
||||
// Re-initialize the comment form handler
|
||||
const commentForm = document.getElementById('commentForm');
|
||||
if (commentForm) {
|
||||
setupCommentFormHandler(commentForm);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes a comment
|
||||
* @param {string} commentId - The comment ID
|
||||
* @param {string} facilityId - The facility ID
|
||||
*/
|
||||
async function deleteComment(commentId, facilityId) {
|
||||
// Confirm deletion
|
||||
if (!confirm('Are you sure you want to delete this comment?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('Deleting comment:', commentId, 'for facility:', facilityId);
|
||||
|
||||
// Use the API client to delete a status comment
|
||||
const data = await window.api.deleteFacilityStatus(commentId, facilityId);
|
||||
|
||||
console.log('Delete comment response:', data);
|
||||
|
||||
if (data.success) {
|
||||
console.log('Comment deleted successfully');
|
||||
|
||||
// Reload comments to reflect the deletion
|
||||
loadFacilityComments(facilityId);
|
||||
} else {
|
||||
console.error('Delete comment failed:', data.error);
|
||||
alert(data.error || 'Failed to delete comment');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting comment:', error);
|
||||
alert('Failed to delete comment: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the current user is an admin
|
||||
* @returns {boolean} True if admin, false otherwise
|
||||
*/
|
||||
function isAdmin() {
|
||||
// Use the auth service to check if user is admin
|
||||
return window.auth.isAdmin();
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the given username matches the current user
|
||||
* @param {string} username - The username to check
|
||||
* @returns {boolean} True if current user, false otherwise
|
||||
*/
|
||||
function isCurrentUser(username) {
|
||||
const user = window.auth.getUser();
|
||||
return user && user.username === username;
|
||||
}
|
||||
|
||||
/**
|
||||
* Safely escapes HTML special characters to prevent XSS attacks
|
||||
* @param {*} unsafe - The value to escape
|
||||
* @returns {string} The escaped string
|
||||
*/
|
||||
function escapeHtml(unsafe) {
|
||||
if (unsafe === null || unsafe === undefined) {
|
||||
return '';
|
||||
}
|
||||
return unsafe
|
||||
.toString()
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
Reference in New Issue
Block a user