Re-did everything, Now is modulaar and better bro.

This commit is contained in:
2025-05-16 20:02:49 -04:00
parent 5b50964d06
commit f8ada1d6d1
16 changed files with 1234 additions and 187 deletions

View File

@ -446,9 +446,14 @@ function toggleHamburgerEditMode() {
const isEditing = editButton.classList.contains('editing');
if (!isEditing) {
// Switch to edit mode
editButton.textContent = 'Save Changes';
editButton.classList.add('editing');
editables.forEach(field => field.disabled = false);
editables.forEach(field => {
field.disabled = false;
// Store original values for potential cancel
field.dataset.originalValue = field.value;
});
// Create and append cancel button only if it doesn't exist
if (!cancelButton) {
@ -460,34 +465,46 @@ function toggleHamburgerEditMode() {
editButton.parentNode.appendChild(newCancelButton);
}
} else {
// Save changes
saveHamburgerChanges();
}
}
function saveHamburgerChanges() {
saveTicket();
resetHamburgerEditMode();
try {
saveTicket();
resetHamburgerEditMode();
} catch (error) {
console.error('Error saving changes:', error);
}
}
function cancelHamburgerEdit() {
resetHamburgerEditMode();
// Reload the selects to revert changes
const selects = document.querySelectorAll('.hamburger-content select');
selects.forEach(select => {
select.value = select.dataset.originalValue;
// Revert all fields to their original values
const editables = document.querySelectorAll('.hamburger-content .editable');
editables.forEach(field => {
if (field.dataset.originalValue) {
field.value = field.dataset.originalValue;
}
});
resetHamburgerEditMode();
}
function resetHamburgerEditMode() {
const editButton = document.getElementById('hamburgerEditButton');
const cancelButton = document.getElementById('hamburgerCancelButton');
const editables = document.querySelectorAll('.hamburger-content .editable');
// Reset button text and remove editing class
editButton.textContent = 'Edit Ticket';
editButton.onclick = toggleHamburgerEditMode; // Restore original onclick
editButton.classList.remove('active');
editButton.classList.remove('editing');
// Disable all editable fields
editables.forEach(field => field.disabled = true);
// Remove cancel button if it exists
if (cancelButton) cancelButton.remove();
}
@ -495,7 +512,8 @@ function createHamburgerMenu() {
const hamburgerMenu = document.createElement('div');
hamburgerMenu.className = 'hamburger-menu';
const isTicketPage = window.location.pathname.includes('ticket.php');
const isTicketPage = window.location.pathname.includes('ticket.php') ||
window.location.pathname.includes('/ticket/');
if (isTicketPage && window.ticketData) {
// Use the ticket data from the global variable

View File

@ -1,7 +1,20 @@
function saveTicket() {
const editables = document.querySelectorAll('.editable');
const data = {};
const ticketId = window.location.href.split('id=')[1];
// Extract ticket ID from URL (works with both old and new URL formats)
let ticketId;
if (window.location.href.includes('?id=')) {
ticketId = window.location.href.split('id=')[1];
} else {
const matches = window.location.pathname.match(/\/ticket\/(\d+)/);
ticketId = matches ? matches[1] : null;
}
if (!ticketId) {
console.error('Could not determine ticket ID');
return;
}
editables.forEach(field => {
if (field.dataset.field) {
@ -9,7 +22,16 @@ function saveTicket() {
}
});
fetch('update_ticket.php', {
// Use the correct API path
const apiUrl = '/api/update_ticket.php';
console.log('Sending request to:', apiUrl);
console.log('Sending data:', JSON.stringify({
ticket_id: ticketId,
...data
}));
fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
@ -19,13 +41,31 @@ function saveTicket() {
...data
})
})
.then(response => response.json())
.then(response => {
console.log('Response status:', response.status);
if (!response.ok) {
return response.text().then(text => {
console.error('Server response:', text);
throw new Error('Network response was not ok');
});
}
return response.json();
})
.then(data => {
console.log('Response data:', data);
if(data.success) {
const statusDisplay = document.getElementById('statusDisplay');
statusDisplay.className = `status-${data.status}`;
statusDisplay.textContent = data.status;
if (statusDisplay) {
statusDisplay.className = `status-${data.status}`;
statusDisplay.textContent = data.status;
}
console.log('Ticket updated successfully');
} else {
console.error('Error in API response:', data.error || 'Unknown error');
}
})
.catch(error => {
console.error('Error updating ticket:', error);
});
}
@ -55,19 +95,47 @@ function toggleEditMode() {
function addComment() {
const commentText = document.getElementById('newComment').value;
const ticketId = window.location.href.split('id=')[1];
if (!commentText.trim()) {
console.error('Comment text cannot be empty');
return;
}
// Extract ticket ID from URL (works with both old and new URL formats)
let ticketId;
if (window.location.href.includes('?id=')) {
ticketId = window.location.href.split('id=')[1];
} else {
const matches = window.location.pathname.match(/\/ticket\/(\d+)/);
ticketId = matches ? matches[1] : null;
}
if (!ticketId) {
console.error('Could not determine ticket ID');
return;
}
const isMarkdownEnabled = document.getElementById('markdownMaster').checked;
fetch('add_comment.php', {
fetch('/api/add_comment.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
ticket_id: ticketId,
comment_text: commentText
comment_text: commentText,
markdown_enabled: isMarkdownEnabled
})
})
.then(response => response.json())
.then(response => {
if (!response.ok) {
return response.text().then(text => {
console.error('Server response:', text);
throw new Error('Network response was not ok');
});
}
return response.json();
})
.then(data => {
if(data.success) {
// Clear the comment box
@ -81,11 +149,18 @@ function addComment() {
<span class="comment-user">${data.user_name}</span>
<span class="comment-date">${data.created_at}</span>
</div>
<div class="comment-text">${commentText}</div>
<div class="comment-text">
${isMarkdownEnabled ? marked.parse(commentText) : commentText}
</div>
</div>
`;
commentsList.insertAdjacentHTML('afterbegin', newComment);
} else {
console.error('Error adding comment:', data.error || 'Unknown error');
}
})
.catch(error => {
console.error('Error adding comment:', error);
});
}
@ -121,71 +196,25 @@ function toggleMarkdownMode() {
}
}
function addComment() {
const commentText = document.getElementById('newComment').value;
const isMarkdownEnabled = document.getElementById('markdownMaster').checked;
const ticketId = window.location.href.split('id=')[1];
fetch('add_comment.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
ticket_id: ticketId,
comment_text: commentText,
markdown_enabled: isMarkdownEnabled
})
})
.then(response => response.json())
.then(data => {
if(data.success) {
const commentsList = document.querySelector('.comments-list');
const newCommentHtml = `
<div class="comment">
<div class="comment-header">
<span class="comment-user">${data.user_name}</span>
<span class="comment-date">${data.created_at}</span>
</div>
<div class="comment-text">
${isMarkdownEnabled ? marked.parse(commentText) : commentText}
</div>
</div>
`;
commentsList.insertAdjacentHTML('afterbegin', newCommentHtml);
document.getElementById('newComment').value = '';
}
});
}
document.addEventListener('DOMContentLoaded', function() {
// Show description tab by default
showTab('description');
// Add the auto-resize functionality here
// Auto-resize the description textarea to fit content
const descriptionTextarea = document.querySelector('textarea[data-field="description"]');
function autoResizeTextarea() {
// Reset height to auto to get the correct scrollHeight
descriptionTextarea.style.height = 'auto';
// Set the height to match the scrollHeight
descriptionTextarea.style.height = descriptionTextarea.scrollHeight + 'px';
}
// Initial resize
autoResizeTextarea();
// Resize on input when in edit mode
descriptionTextarea.addEventListener('input', autoResizeTextarea);
// Also resize when edit mode is toggled
const originalToggleEditMode = window.toggleEditMode;
if (typeof originalToggleEditMode === 'function') {
window.toggleEditMode = function() {
originalToggleEditMode.apply(this, arguments);
setTimeout(autoResizeTextarea, 0);
};
if (descriptionTextarea) {
function autoResizeTextarea() {
// Reset height to auto to get the correct scrollHeight
descriptionTextarea.style.height = 'auto';
// Set the height to match the scrollHeight
descriptionTextarea.style.height = descriptionTextarea.scrollHeight + 'px';
}
// Initial resize
autoResizeTextarea();
// Resize on input when in edit mode
descriptionTextarea.addEventListener('input', autoResizeTextarea);
}
});
@ -194,6 +223,11 @@ function showTab(tabName) {
const descriptionTab = document.getElementById('description-tab');
const commentsTab = document.getElementById('comments-tab');
if (!descriptionTab || !commentsTab) {
console.error('Tab elements not found');
return;
}
// Hide both tabs
descriptionTab.style.display = 'none';
commentsTab.style.display = 'none';