871 lines
34 KiB
JavaScript
871 lines
34 KiB
JavaScript
// Main initialization
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
console.log('DOM loaded, initializing dashboard...');
|
||
|
||
// Check if we're on the dashboard page
|
||
const hasTable = document.querySelector('table');
|
||
const isTicketPage = window.location.pathname.includes('/ticket/') ||
|
||
window.location.href.includes('ticket.php') ||
|
||
document.querySelector('.ticket-details') !== null;
|
||
const isDashboard = hasTable && !isTicketPage;
|
||
|
||
console.log('Has table:', hasTable);
|
||
console.log('Is ticket page:', isTicketPage);
|
||
console.log('Is dashboard:', isDashboard);
|
||
|
||
if (isDashboard) {
|
||
// Dashboard-specific initialization
|
||
initSearch();
|
||
initStatusFilter();
|
||
initTableSorting();
|
||
|
||
console.log('Creating hamburger menu for dashboard...');
|
||
try {
|
||
createHamburgerMenu();
|
||
console.log('Hamburger menu created successfully');
|
||
} catch (error) {
|
||
console.error('Error creating hamburger menu:', error);
|
||
}
|
||
} else if (isTicketPage) {
|
||
// Ticket page initialization
|
||
console.log('Creating hamburger menu for ticket page...');
|
||
try {
|
||
createHamburgerMenu();
|
||
console.log('Hamburger menu created successfully');
|
||
} catch (error) {
|
||
console.error('Error creating hamburger menu:', error);
|
||
}
|
||
}
|
||
|
||
// Initialize for all pages
|
||
initThemeToggle();
|
||
initSettingsModal();
|
||
|
||
// Load saved theme preference
|
||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||
});
|
||
|
||
function initTableSorting() {
|
||
const tableHeaders = document.querySelectorAll('th');
|
||
tableHeaders.forEach((header, index) => {
|
||
header.style.cursor = 'pointer';
|
||
header.addEventListener('click', () => {
|
||
const table = header.closest('table');
|
||
sortTable(table, index);
|
||
});
|
||
});
|
||
}
|
||
|
||
function initSettingsModal() {
|
||
const settingsIcon = document.querySelector('.settings-icon');
|
||
if (settingsIcon) {
|
||
settingsIcon.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
createSettingsModal();
|
||
});
|
||
}
|
||
}
|
||
|
||
function sortTable(table, column) {
|
||
const headers = table.querySelectorAll('th');
|
||
headers.forEach(header => {
|
||
header.classList.remove('sort-asc', 'sort-desc');
|
||
});
|
||
|
||
const rows = Array.from(table.querySelectorAll('tbody tr'));
|
||
const currentDirection = table.dataset.sortColumn == column
|
||
? (table.dataset.sortDirection === 'asc' ? 'desc' : 'asc')
|
||
: 'asc';
|
||
|
||
table.dataset.sortColumn = column;
|
||
table.dataset.sortDirection = currentDirection;
|
||
|
||
rows.sort((a, b) => {
|
||
const aValue = a.children[column].textContent.trim();
|
||
const bValue = b.children[column].textContent.trim();
|
||
|
||
// Check if this is a date column
|
||
const headerText = headers[column].textContent.toLowerCase();
|
||
if (headerText === 'created' || headerText === 'updated') {
|
||
const dateA = new Date(aValue);
|
||
const dateB = new Date(bValue);
|
||
return currentDirection === 'asc' ? dateA - dateB : dateB - dateA;
|
||
}
|
||
|
||
// Numeric comparison
|
||
const numA = parseFloat(aValue);
|
||
const numB = parseFloat(bValue);
|
||
|
||
if (!isNaN(numA) && !isNaN(numB)) {
|
||
return currentDirection === 'asc' ? numA - numB : numB - numA;
|
||
}
|
||
|
||
// String comparison
|
||
return currentDirection === 'asc'
|
||
? aValue.localeCompare(bValue)
|
||
: bValue.localeCompare(aValue);
|
||
});
|
||
|
||
const currentHeader = headers[column];
|
||
currentHeader.classList.add(currentDirection === 'asc' ? 'sort-asc' : 'sort-desc');
|
||
|
||
const tbody = table.querySelector('tbody');
|
||
rows.forEach(row => tbody.appendChild(row));
|
||
}
|
||
|
||
function createSettingsModal() {
|
||
const backdrop = document.createElement('div');
|
||
backdrop.className = 'settings-modal-backdrop';
|
||
backdrop.innerHTML = `
|
||
<div class="settings-modal">
|
||
<div class="settings-modal-header">
|
||
<h2>Dashboard Settings</h2>
|
||
<button class="close-modal">×</button>
|
||
</div>
|
||
<div class="settings-modal-content">
|
||
<div class="setting-group">
|
||
<h3>Rows per Page</h3>
|
||
<select id="rows-per-page">
|
||
<option value="15">15</option>
|
||
<option value="25">25</option>
|
||
<option value="50">50</option>
|
||
<option value="100">100</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="settings-modal-footer">
|
||
<button class="save-settings">Save Settings</button>
|
||
<button class="cancel-settings">Cancel</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.body.appendChild(backdrop);
|
||
|
||
// Load saved rows per page setting
|
||
const savedRowsPerPage = localStorage.getItem('ticketsPerPage') || '15';
|
||
const rowsPerPageSelect = backdrop.querySelector('#rows-per-page');
|
||
rowsPerPageSelect.value = savedRowsPerPage;
|
||
|
||
// Event listeners
|
||
backdrop.querySelector('.close-modal').addEventListener('click', closeSettingsModal);
|
||
backdrop.querySelector('.cancel-settings').addEventListener('click', closeSettingsModal);
|
||
backdrop.querySelector('.save-settings').addEventListener('click', saveSettings);
|
||
|
||
backdrop.addEventListener('click', (e) => {
|
||
if (e.target === backdrop) {
|
||
closeSettingsModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
function closeSettingsModal() {
|
||
const backdrop = document.querySelector('.settings-modal-backdrop');
|
||
if (backdrop) {
|
||
backdrop.remove();
|
||
}
|
||
}
|
||
|
||
function saveSettings() {
|
||
// Save rows per page
|
||
const rowsPerPage = document.querySelector('#rows-per-page').value;
|
||
localStorage.setItem('ticketsPerPage', rowsPerPage);
|
||
|
||
// Set cookie for PHP to read
|
||
document.cookie = `ticketsPerPage=${rowsPerPage}; path=/`;
|
||
|
||
// Reload page to apply pagination changes
|
||
window.location.reload();
|
||
}
|
||
|
||
function initThemeToggle() {
|
||
const toggle = document.createElement('button');
|
||
toggle.className = 'theme-toggle';
|
||
toggle.innerHTML = '🌓';
|
||
toggle.onclick = () => {
|
||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||
document.documentElement.setAttribute('data-theme', newTheme);
|
||
localStorage.setItem('theme', newTheme);
|
||
};
|
||
document.body.appendChild(toggle);
|
||
}
|
||
|
||
function initSearch() {
|
||
const searchBox = document.createElement('input');
|
||
searchBox.type = 'text';
|
||
searchBox.placeholder = 'Search tickets...';
|
||
searchBox.className = 'search-box';
|
||
searchBox.oninput = (e) => {
|
||
const searchTerm = e.target.value.toLowerCase();
|
||
const rows = document.querySelectorAll('tbody tr');
|
||
rows.forEach(row => {
|
||
const text = row.textContent.toLowerCase();
|
||
row.style.display = text.includes(searchTerm) ? '' : 'none';
|
||
});
|
||
};
|
||
document.querySelector('h1').after(searchBox);
|
||
}
|
||
|
||
function initStatusFilter() {
|
||
const filterContainer = document.createElement('div');
|
||
filterContainer.className = 'status-filter-container';
|
||
|
||
const dropdown = document.createElement('div');
|
||
dropdown.className = 'status-dropdown';
|
||
|
||
const dropdownHeader = document.createElement('div');
|
||
dropdownHeader.className = 'dropdown-header';
|
||
dropdownHeader.textContent = 'Status Filter';
|
||
|
||
const dropdownContent = document.createElement('div');
|
||
dropdownContent.className = 'dropdown-content';
|
||
|
||
const statuses = ['Open', 'In Progress', 'Closed'];
|
||
statuses.forEach(status => {
|
||
const label = document.createElement('label');
|
||
const checkbox = document.createElement('input');
|
||
checkbox.type = 'checkbox';
|
||
checkbox.value = status;
|
||
checkbox.id = `status-${status.toLowerCase().replace(/\s+/g, '-')}`;
|
||
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const currentStatuses = urlParams.get('status') ? urlParams.get('status').split(',') : [];
|
||
const showAll = urlParams.get('show_all');
|
||
|
||
// FIXED LOGIC: Determine checkbox state
|
||
if (showAll === '1') {
|
||
// If show_all=1 parameter exists, all should be checked
|
||
checkbox.checked = true;
|
||
} else if (currentStatuses.length === 0) {
|
||
// No status parameter - default: Open and In Progress checked, Closed unchecked
|
||
checkbox.checked = status !== 'Closed';
|
||
} else {
|
||
// Status parameter exists - check if this status is in the list
|
||
checkbox.checked = currentStatuses.includes(status);
|
||
}
|
||
|
||
label.appendChild(checkbox);
|
||
label.appendChild(document.createTextNode(' ' + status));
|
||
dropdownContent.appendChild(label);
|
||
});
|
||
|
||
const saveButton = document.createElement('button');
|
||
saveButton.className = 'btn save-filter';
|
||
saveButton.textContent = 'Apply Filter';
|
||
|
||
saveButton.onclick = () => {
|
||
const checkedBoxes = dropdownContent.querySelectorAll('input:checked');
|
||
const selectedStatuses = Array.from(checkedBoxes).map(cb => cb.value);
|
||
|
||
const params = new URLSearchParams(window.location.search);
|
||
|
||
if (selectedStatuses.length === 0) {
|
||
// No statuses selected - show default (Open + In Progress)
|
||
params.delete('status');
|
||
params.delete('show_all');
|
||
} else if (selectedStatuses.length === 3) {
|
||
// All statuses selected - show all tickets
|
||
params.delete('status');
|
||
params.set('show_all', '1');
|
||
} else {
|
||
// Some statuses selected - set the parameter
|
||
params.set('status', selectedStatuses.join(','));
|
||
params.delete('show_all');
|
||
}
|
||
|
||
params.set('page', '1');
|
||
window.location.search = params.toString();
|
||
dropdown.classList.remove('active');
|
||
};
|
||
|
||
dropdownHeader.onclick = () => {
|
||
dropdown.classList.toggle('active');
|
||
};
|
||
|
||
dropdown.appendChild(dropdownHeader);
|
||
dropdown.appendChild(dropdownContent);
|
||
dropdownContent.appendChild(saveButton);
|
||
filterContainer.appendChild(dropdown);
|
||
|
||
const tableActions = document.querySelector('.table-controls .table-actions');
|
||
if (tableActions) {
|
||
tableActions.prepend(filterContainer);
|
||
}
|
||
}
|
||
|
||
function quickSave() {
|
||
if (!window.ticketData) {
|
||
console.error('No ticket data available');
|
||
return;
|
||
}
|
||
|
||
const statusSelect = document.getElementById('status-select');
|
||
const prioritySelect = document.getElementById('priority-select');
|
||
|
||
if (!statusSelect || !prioritySelect) {
|
||
console.error('Status or priority select not found');
|
||
return;
|
||
}
|
||
|
||
const data = {
|
||
ticket_id: parseInt(window.ticketData.id),
|
||
status: statusSelect.value,
|
||
priority: parseInt(prioritySelect.value)
|
||
};
|
||
|
||
console.log('Saving ticket data:', data);
|
||
|
||
fetch('/api/update_ticket.php', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(data)
|
||
})
|
||
.then(response => {
|
||
console.log('Response status:', response.status);
|
||
return response.text().then(text => {
|
||
console.log('Raw response:', text);
|
||
try {
|
||
return JSON.parse(text);
|
||
} catch (e) {
|
||
throw new Error('Invalid JSON response: ' + text);
|
||
}
|
||
});
|
||
})
|
||
.then(result => {
|
||
console.log('Update result:', result);
|
||
if (result.success) {
|
||
// Update the hamburger menu display
|
||
const hamburgerStatus = document.getElementById('hamburger-status');
|
||
const hamburgerPriority = document.getElementById('hamburger-priority');
|
||
|
||
if (hamburgerStatus) hamburgerStatus.textContent = statusSelect.value;
|
||
if (hamburgerPriority) hamburgerPriority.textContent = 'P' + prioritySelect.value;
|
||
|
||
// Update window.ticketData
|
||
window.ticketData.status = statusSelect.value;
|
||
window.ticketData.priority = parseInt(prioritySelect.value);
|
||
|
||
// Update main page elements if they exist
|
||
const statusDisplay = document.getElementById('statusDisplay');
|
||
if (statusDisplay) {
|
||
statusDisplay.className = `status-${statusSelect.value}`;
|
||
statusDisplay.textContent = statusSelect.value;
|
||
}
|
||
|
||
console.log('Ticket updated successfully');
|
||
|
||
// Close hamburger menu after successful save
|
||
const hamburgerContent = document.querySelector('.hamburger-content');
|
||
if (hamburgerContent) {
|
||
hamburgerContent.classList.remove('open');
|
||
document.body.classList.remove('menu-open');
|
||
}
|
||
|
||
} else {
|
||
console.error('Error updating ticket:', result.error || 'Unknown error');
|
||
alert('Error updating ticket: ' + (result.error || 'Unknown error'));
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error updating ticket:', error);
|
||
alert('Error updating ticket: ' + error.message);
|
||
});
|
||
}
|
||
|
||
function createHamburgerMenu() {
|
||
console.log('createHamburgerMenu called');
|
||
|
||
// Remove any existing hamburger menu first
|
||
const existingMenu = document.querySelector('.hamburger-menu');
|
||
if (existingMenu) {
|
||
console.log('Removing existing menu');
|
||
existingMenu.remove();
|
||
}
|
||
|
||
const hamburgerMenu = document.createElement('div');
|
||
hamburgerMenu.className = 'hamburger-menu';
|
||
|
||
// Better detection for ticket pages
|
||
const isTicketPage = window.location.pathname.includes('/ticket/') ||
|
||
window.location.href.includes('ticket.php') ||
|
||
document.querySelector('.ticket-details') !== null;
|
||
|
||
console.log('Is ticket page:', isTicketPage);
|
||
console.log('Has ticketData:', !!window.ticketData);
|
||
console.log('TicketData contents:', window.ticketData);
|
||
|
||
if (isTicketPage) {
|
||
// Wait for ticketData if it's not loaded yet
|
||
if (!window.ticketData) {
|
||
console.log('Waiting for ticket data...');
|
||
setTimeout(() => {
|
||
if (window.ticketData) {
|
||
console.log('Ticket data now available, recreating menu');
|
||
createHamburgerMenu();
|
||
}
|
||
}, 100);
|
||
return;
|
||
}
|
||
|
||
console.log('Creating ticket hamburger menu with data:', window.ticketData);
|
||
|
||
// Ticket page hamburger menu with inline editing
|
||
hamburgerMenu.innerHTML = `
|
||
<div class="hamburger-icon">☰</div>
|
||
<div class="hamburger-content">
|
||
<div class="close-hamburger">☰</div>
|
||
<h3>Ticket Actions</h3>
|
||
<div class="ticket-info-editable">
|
||
<div class="editable-field" data-field="status">
|
||
<label><strong>Status:</strong></label>
|
||
<span class="editable-value" data-current="${window.ticketData.status}">${window.ticketData.status}</span>
|
||
<div class="edit-dropdown" style="display: none;">
|
||
<select class="field-select">
|
||
<option value="Open" ${window.ticketData.status === 'Open' ? 'selected' : ''}>Open</option>
|
||
<option value="In Progress" ${window.ticketData.status === 'In Progress' ? 'selected' : ''}>In Progress</option>
|
||
<option value="Closed" ${window.ticketData.status === 'Closed' ? 'selected' : ''}>Closed</option>
|
||
</select>
|
||
<div class="edit-actions">
|
||
<button class="save-btn">✓</button>
|
||
<button class="cancel-btn">✗</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="editable-field" data-field="priority">
|
||
<label><strong>Priority:</strong></label>
|
||
<span class="editable-value" data-current="${window.ticketData.priority}">P${window.ticketData.priority}</span>
|
||
<div class="edit-dropdown" style="display: none;">
|
||
<select class="field-select">
|
||
<option value="1" ${String(window.ticketData.priority) === '1' ? 'selected' : ''}>P1 - Critical</option>
|
||
<option value="2" ${String(window.ticketData.priority) === '2' ? 'selected' : ''}>P2 - High</option>
|
||
<option value="3" ${String(window.ticketData.priority) === '3' ? 'selected' : ''}>P3 - Medium</option>
|
||
<option value="4" ${String(window.ticketData.priority) === '4' ? 'selected' : ''}>P4 - Low</option>
|
||
<option value="5" ${String(window.ticketData.priority) === '5' ? 'selected' : ''}>P5 - Lowest</option>
|
||
</select>
|
||
<div class="edit-actions">
|
||
<button class="save-btn">✓</button>
|
||
<button class="cancel-btn">✗</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="editable-field" data-field="category">
|
||
<label><strong>Category:</strong></label>
|
||
<span class="editable-value" data-current="${window.ticketData.category}">${window.ticketData.category}</span>
|
||
<div class="edit-dropdown" style="display: none;">
|
||
<select class="field-select">
|
||
<option value="Hardware" ${window.ticketData.category === 'Hardware' ? 'selected' : ''}>Hardware</option>
|
||
<option value="Software" ${window.ticketData.category === 'Software' ? 'selected' : ''}>Software</option>
|
||
</select>
|
||
<div class="edit-actions">
|
||
<button class="save-btn">✓</button>
|
||
<button class="cancel-btn">✗</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="editable-field" data-field="type">
|
||
<label><strong>Type:</strong></label>
|
||
<span class="editable-value" data-current="${window.ticketData.type}">${window.ticketData.type}</span>
|
||
<div class="edit-dropdown" style="display: none;">
|
||
<select class="field-select">
|
||
<option value="Install" ${window.ticketData.type === 'Install' ? 'selected' : ''}>Install</option>
|
||
<option value="Maintenance" ${window.ticketData.type === 'Maintenance' ? 'selected' : ''}>Maintenance</option>
|
||
<option value="Problem" ${window.ticketData.type === 'Problem' ? 'selected' : ''}>Problem</option>
|
||
<option value="Request" ${window.ticketData.type === 'Request' ? 'selected' : ''}>Request</option>
|
||
<option value="Task" ${window.ticketData.type === 'Task' ? 'selected' : ''}>Task</option>
|
||
<option value="Upgrade" ${window.ticketData.type === 'Upgrade' ? 'selected' : ''}>Upgrade</option>
|
||
</select>
|
||
<div class="edit-actions">
|
||
<button class="save-btn">✓</button>
|
||
<button class="cancel-btn">✗</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
console.log('Ticket hamburger menu HTML created');
|
||
|
||
// Add inline editing functionality
|
||
setupInlineEditing(hamburgerMenu);
|
||
} else {
|
||
console.log('Creating dashboard hamburger menu');
|
||
|
||
// Dashboard hamburger menu (your existing code)
|
||
hamburgerMenu.innerHTML = `
|
||
<div class="hamburger-icon">☰</div>
|
||
<div class="hamburger-content">
|
||
<div class="close-hamburger">☰</div>
|
||
<h3>Filters</h3>
|
||
<div class="filter-section">
|
||
<h4>Categories</h4>
|
||
<div id="category-filters"></div>
|
||
</div>
|
||
<div class="filter-section">
|
||
<h4>Types</h4>
|
||
<div id="type-filters"></div>
|
||
</div>
|
||
<div class="filter-actions">
|
||
<button id="apply-filters">Apply Filters</button>
|
||
<button id="clear-filters">Clear Filters</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// Get current URL parameters
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const currentCategories = urlParams.get('category') ? urlParams.get('category').split(',') : [];
|
||
const currentTypes = urlParams.get('type') ? urlParams.get('type').split(',') : [];
|
||
|
||
// Get containers
|
||
const categoriesContainer = hamburgerMenu.querySelector('#category-filters');
|
||
const typesContainer = hamburgerMenu.querySelector('#type-filters');
|
||
|
||
// Get data from body attributes
|
||
const categories = JSON.parse(document.body.dataset.categories || '[]');
|
||
const types = JSON.parse(document.body.dataset.types || '[]');
|
||
|
||
// Create checkboxes for categories
|
||
categories.forEach(category => {
|
||
const label = document.createElement('label');
|
||
label.style.display = 'block';
|
||
label.style.marginBottom = '5px';
|
||
|
||
const checkbox = document.createElement('input');
|
||
checkbox.type = 'checkbox';
|
||
checkbox.value = category;
|
||
checkbox.name = 'category';
|
||
|
||
const isChecked = currentCategories.includes(category);
|
||
|
||
label.appendChild(checkbox);
|
||
label.appendChild(document.createTextNode(' ' + category));
|
||
categoriesContainer.appendChild(label);
|
||
|
||
checkbox.checked = isChecked;
|
||
});
|
||
|
||
// Create checkboxes for types
|
||
types.forEach(type => {
|
||
const label = document.createElement('label');
|
||
label.style.display = 'block';
|
||
label.style.marginBottom = '5px';
|
||
|
||
const checkbox = document.createElement('input');
|
||
checkbox.type = 'checkbox';
|
||
checkbox.value = type;
|
||
checkbox.name = 'type';
|
||
|
||
const isChecked = currentTypes.includes(type);
|
||
|
||
label.appendChild(checkbox);
|
||
label.appendChild(document.createTextNode(' ' + type));
|
||
typesContainer.appendChild(label);
|
||
|
||
checkbox.checked = isChecked;
|
||
});
|
||
|
||
// Apply filters event
|
||
const applyFiltersBtn = hamburgerMenu.querySelector('#apply-filters');
|
||
applyFiltersBtn.addEventListener('click', () => {
|
||
const selectedCategories = Array.from(
|
||
categoriesContainer.querySelectorAll('input:checked')
|
||
).map(cb => cb.value);
|
||
|
||
const selectedTypes = Array.from(
|
||
typesContainer.querySelectorAll('input:checked')
|
||
).map(cb => cb.value);
|
||
|
||
const params = new URLSearchParams(window.location.search);
|
||
|
||
if (selectedCategories.length > 0) {
|
||
params.set('category', selectedCategories.join(','));
|
||
} else {
|
||
params.delete('category');
|
||
}
|
||
|
||
if (selectedTypes.length > 0) {
|
||
params.set('type', selectedTypes.join(','));
|
||
} else {
|
||
params.delete('type');
|
||
}
|
||
|
||
params.set('page', '1');
|
||
window.location.search = params.toString();
|
||
});
|
||
|
||
// Clear filters event
|
||
const clearFiltersBtn = hamburgerMenu.querySelector('#clear-filters');
|
||
clearFiltersBtn.addEventListener('click', () => {
|
||
const params = new URLSearchParams(window.location.search);
|
||
params.delete('category');
|
||
params.delete('type');
|
||
params.set('page', '1');
|
||
window.location.search = params.toString();
|
||
});
|
||
}
|
||
|
||
console.log('Adding hamburger menu to body');
|
||
|
||
// Add to body
|
||
document.body.appendChild(hamburgerMenu);
|
||
|
||
console.log('Hamburger menu added, setting up event listeners');
|
||
|
||
// Toggle hamburger menu
|
||
const hamburgerIcon = hamburgerMenu.querySelector('.hamburger-icon');
|
||
const hamburgerContent = hamburgerMenu.querySelector('.hamburger-content');
|
||
|
||
if (hamburgerIcon && hamburgerContent) {
|
||
hamburgerIcon.addEventListener('click', () => {
|
||
console.log('Hamburger icon clicked');
|
||
hamburgerContent.classList.toggle('open');
|
||
document.body.classList.toggle('menu-open');
|
||
});
|
||
|
||
// Close hamburger menu
|
||
const closeButton = hamburgerMenu.querySelector('.close-hamburger');
|
||
if (closeButton) {
|
||
closeButton.addEventListener('click', () => {
|
||
console.log('Close button clicked');
|
||
hamburgerContent.classList.remove('open');
|
||
document.body.classList.remove('menu-open');
|
||
});
|
||
}
|
||
|
||
console.log('Hamburger menu created successfully');
|
||
} else {
|
||
console.error('Failed to find hamburger icon or content');
|
||
}
|
||
}
|
||
|
||
function setupInlineEditing(hamburgerMenu) {
|
||
const editableFields = hamburgerMenu.querySelectorAll('.editable-field');
|
||
|
||
editableFields.forEach(field => {
|
||
const valueSpan = field.querySelector('.editable-value');
|
||
const dropdown = field.querySelector('.edit-dropdown');
|
||
const select = field.querySelector('.field-select');
|
||
const saveBtn = field.querySelector('.save-btn');
|
||
const cancelBtn = field.querySelector('.cancel-btn');
|
||
const fieldName = field.dataset.field;
|
||
|
||
// Make value span clickable
|
||
valueSpan.style.cursor = 'pointer';
|
||
valueSpan.style.padding = '4px 8px';
|
||
valueSpan.style.borderRadius = '4px';
|
||
valueSpan.style.transition = 'background-color 0.2s';
|
||
|
||
// Hover effect
|
||
valueSpan.addEventListener('mouseenter', () => {
|
||
valueSpan.style.backgroundColor = 'var(--hover-bg, #f0f0f0)';
|
||
});
|
||
|
||
valueSpan.addEventListener('mouseleave', () => {
|
||
if (dropdown.style.display === 'none') {
|
||
valueSpan.style.backgroundColor = 'transparent';
|
||
}
|
||
});
|
||
|
||
// Click to edit
|
||
valueSpan.addEventListener('click', () => {
|
||
dropdown.style.display = 'block';
|
||
valueSpan.style.backgroundColor = 'var(--hover-bg, #f0f0f0)';
|
||
select.focus();
|
||
});
|
||
|
||
// Save changes
|
||
saveBtn.addEventListener('click', () => {
|
||
const newValue = select.value;
|
||
const oldValue = valueSpan.dataset.current;
|
||
|
||
if (newValue !== oldValue) {
|
||
saveFieldChange(fieldName, newValue, valueSpan, dropdown);
|
||
} else {
|
||
cancelEdit(valueSpan, dropdown);
|
||
}
|
||
});
|
||
|
||
// Cancel changes
|
||
cancelBtn.addEventListener('click', () => {
|
||
select.value = valueSpan.dataset.current;
|
||
cancelEdit(valueSpan, dropdown);
|
||
});
|
||
|
||
// Cancel on escape key
|
||
select.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') {
|
||
select.value = valueSpan.dataset.current;
|
||
cancelEdit(valueSpan, dropdown);
|
||
} else if (e.key === 'Enter') {
|
||
saveBtn.click();
|
||
}
|
||
});
|
||
|
||
// Cancel when clicking outside
|
||
document.addEventListener('click', (e) => {
|
||
if (!field.contains(e.target) && dropdown.style.display === 'block') {
|
||
select.value = valueSpan.dataset.current;
|
||
cancelEdit(valueSpan, dropdown);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
function saveFieldChange(fieldName, newValue, valueSpan, dropdown) {
|
||
if (!window.ticketData) {
|
||
console.error('No ticket data available');
|
||
return;
|
||
}
|
||
|
||
const data = {
|
||
ticket_id: parseInt(window.ticketData.id),
|
||
[fieldName]: fieldName === 'priority' ? parseInt(newValue) : newValue
|
||
};
|
||
|
||
console.log('Saving field change:', data);
|
||
|
||
// Show loading state
|
||
valueSpan.style.opacity = '0.6';
|
||
|
||
fetch('/api/update_ticket.php', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(data)
|
||
})
|
||
.then(response => {
|
||
return response.text().then(text => {
|
||
try {
|
||
return JSON.parse(text);
|
||
} catch (e) {
|
||
throw new Error('Invalid JSON response: ' + text);
|
||
}
|
||
});
|
||
})
|
||
.then(result => {
|
||
console.log('Update result:', result);
|
||
if (result.success) {
|
||
// Update the hamburger menu display
|
||
if (fieldName === 'priority') {
|
||
valueSpan.textContent = 'P' + newValue;
|
||
} else {
|
||
valueSpan.textContent = newValue;
|
||
}
|
||
|
||
valueSpan.dataset.current = newValue;
|
||
|
||
// Update window.ticketData
|
||
window.ticketData[fieldName] = fieldName === 'priority' ? parseInt(newValue) : newValue;
|
||
|
||
// Update main page elements
|
||
if (fieldName === 'status') {
|
||
const statusDisplay = document.getElementById('statusDisplay');
|
||
if (statusDisplay) {
|
||
// Remove all existing status classes
|
||
statusDisplay.className = statusDisplay.className.replace(/status-\S+/g, '').trim();
|
||
|
||
// Create the correct CSS class name to match your CSS
|
||
// "Open" -> "status-Open"
|
||
// "In Progress" -> "status-In-Progress"
|
||
// "Closed" -> "status-Closed"
|
||
const cssClass = newValue.replace(/\s+/g, '-'); // "In Progress" -> "In-Progress"
|
||
const fullClassName = `status-${cssClass}`;
|
||
|
||
statusDisplay.className = fullClassName;
|
||
statusDisplay.textContent = newValue;
|
||
|
||
console.log('Updated status display class to:', fullClassName);
|
||
console.log('Status display element:', statusDisplay);
|
||
}
|
||
}
|
||
|
||
if (fieldName === 'priority') {
|
||
const priorityDisplay = document.querySelector('.priority-indicator');
|
||
if (priorityDisplay) {
|
||
// Remove all priority classes first
|
||
priorityDisplay.className = priorityDisplay.className.replace(/priority-\d+/g, '');
|
||
priorityDisplay.className = `priority-indicator priority-${newValue}`;
|
||
priorityDisplay.textContent = 'P' + newValue;
|
||
}
|
||
|
||
// Update the ticket container's data-priority attribute for styling
|
||
const ticketContainer = document.querySelector('.ticket-container');
|
||
if (ticketContainer) {
|
||
ticketContainer.setAttribute('data-priority', newValue);
|
||
}
|
||
}
|
||
|
||
console.log('Field updated successfully');
|
||
cancelEdit(valueSpan, dropdown);
|
||
|
||
} else {
|
||
console.error('Error updating field:', result.error || 'Unknown error');
|
||
alert('Error updating ' + fieldName + ': ' + (result.error || 'Unknown error'));
|
||
cancelEdit(valueSpan, dropdown);
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error updating field:', error);
|
||
alert('Error updating ' + fieldName + ': ' + error.message);
|
||
cancelEdit(valueSpan, dropdown);
|
||
})
|
||
.finally(() => {
|
||
valueSpan.style.opacity = '1';
|
||
});
|
||
}
|
||
|
||
function cancelEdit(valueSpan, dropdown) {
|
||
dropdown.style.display = 'none';
|
||
valueSpan.style.backgroundColor = 'transparent';
|
||
}
|
||
|
||
|
||
// Ticket page functions (if needed)
|
||
function saveTicket() {
|
||
const editables = document.querySelectorAll('.editable');
|
||
const data = {};
|
||
|
||
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;
|
||
}
|
||
|
||
editables.forEach(field => {
|
||
if (field.dataset.field) {
|
||
data[field.dataset.field] = field.value;
|
||
}
|
||
});
|
||
|
||
fetch('/api/update_ticket.php', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
ticket_id: ticketId,
|
||
...data
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if(data.success) {
|
||
const statusDisplay = document.getElementById('statusDisplay');
|
||
if (statusDisplay) {
|
||
statusDisplay.className = `status-${data.status}`;
|
||
statusDisplay.textContent = data.status;
|
||
}
|
||
}
|
||
});
|
||
} |