Fix?
This commit is contained in:
@ -413,169 +413,170 @@ function createHamburgerMenu() {
|
||||
const hamburgerMenu = document.createElement('div');
|
||||
hamburgerMenu.className = 'hamburger-menu';
|
||||
|
||||
// Check if we're on a ticket page
|
||||
const isTicketPage = window.location.pathname.includes('ticket.php');
|
||||
// Check if we're on a ticket page
|
||||
const isTicketPage = window.location.pathname.includes('ticket.php');
|
||||
|
||||
if (isTicketPage) {
|
||||
const selects = document.querySelectorAll('select.editable');
|
||||
const values = {};
|
||||
selects.forEach(select => {
|
||||
values[select.dataset.field] = select.value;
|
||||
});
|
||||
if (isTicketPage) {
|
||||
// Get current values from existing select elements
|
||||
const selects = document.querySelectorAll('select.editable');
|
||||
const values = {};
|
||||
selects.forEach(select => {
|
||||
values[select.dataset.field] = select.value;
|
||||
});
|
||||
|
||||
hamburgerMenu.innerHTML = `
|
||||
<div class="hamburger-icon">☰</div>
|
||||
<div class="hamburger-content">
|
||||
<div class="close-hamburger">☰</div>
|
||||
<h3>Ticket Controls</h3>
|
||||
<div class="menu-group">
|
||||
<label>Status</label>
|
||||
<select class="editable" data-field="status">
|
||||
<option value="Open" ${currentStatus === 'Open' ? 'selected' : ''}>Open</option>
|
||||
<option value="Closed" ${currentStatus === 'Closed' ? 'selected' : ''}>Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<label>Priority</label>
|
||||
<select class="editable" data-field="priority">
|
||||
<option value="1" ${currentPriority === '1' ? 'selected' : ''}>P1 - Critical Impact</option>
|
||||
<option value="2" ${currentPriority === '2' ? 'selected' : ''}>P2 - High Impact</option>
|
||||
<option value="3" ${currentPriority === '3' ? 'selected' : ''}>P3 - Medium Impact</option>
|
||||
<option value="4" ${currentPriority === '4' ? 'selected' : ''}>P4 - Low Impact</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<label>Category</label>
|
||||
<select class="editable" data-field="category">
|
||||
<option value="Hardware" ${currentCategory === 'Hardware' ? 'selected' : ''}>Hardware</option>
|
||||
<option value="Software" ${currentCategory === 'Software' ? 'selected' : ''}>Software</option>
|
||||
<option value="Network" ${currentCategory === 'Network' ? 'selected' : ''}>Network</option>
|
||||
<option value="Security" ${currentCategory === 'Security' ? 'selected' : ''}>Security</option>
|
||||
<option value="Other" ${currentCategory === 'Other' ? 'selected' : ''}>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<label>Type</label>
|
||||
<select class="editable" data-field="type">
|
||||
<option value="Maintenance" ${currentType === 'Maintenance' ? 'selected' : ''}>Maintenance</option>
|
||||
<option value="Install" ${currentType === 'Install' ? 'selected' : ''}>Install</option>
|
||||
<option value="Task" ${currentType === 'Task' ? 'selected' : ''}>Task</option>
|
||||
<option value="Upgrade" ${currentType === 'Upgrade' ? 'selected' : ''}>Upgrade</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="menu-actions">
|
||||
<button onclick="saveTicket()" class="btn primary">Save Changes</button>
|
||||
</div>
|
||||
hamburgerMenu.innerHTML = `
|
||||
<div class="hamburger-icon">☰</div>
|
||||
<div class="hamburger-content">
|
||||
<div class="close-hamburger">☰</div>
|
||||
<h3>Ticket Controls</h3>
|
||||
<div class="menu-group">
|
||||
<label>Status</label>
|
||||
<select class="editable" data-field="status">
|
||||
<option value="Open" ${values.status === 'Open' ? 'selected' : ''}>Open</option>
|
||||
<option value="Closed" ${values.status === 'Closed' ? 'selected' : ''}>Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
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 class="menu-group">
|
||||
<label>Priority</label>
|
||||
<select class="editable" data-field="priority">
|
||||
<option value="1" ${values.priority === '1' ? 'selected' : ''}>P1 - Critical Impact</option>
|
||||
<option value="2" ${values.priority === '2' ? 'selected' : ''}>P2 - High Impact</option>
|
||||
<option value="3" ${values.priority === '3' ? 'selected' : ''}>P3 - Medium Impact</option>
|
||||
<option value="4" ${values.priority === '4' ? 'selected' : ''}>P4 - Low Impact</option>
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
<div class="menu-group">
|
||||
<label>Category</label>
|
||||
<select class="editable" data-field="category">
|
||||
<option value="Hardware" ${values.category === 'Hardware' ? 'selected' : ''}>Hardware</option>
|
||||
<option value="Software" ${values.category === 'Software' ? 'selected' : ''}>Software</option>
|
||||
<option value="Network" ${values.category === 'Network' ? 'selected' : ''}>Network</option>
|
||||
<option value="Security" ${values.category === 'Security' ? 'selected' : ''}>Security</option>
|
||||
<option value="Other" ${values.category === 'Other' ? 'selected' : ''}>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<label>Type</label>
|
||||
<select class="editable" data-field="type">
|
||||
<option value="Maintenance" ${values.type === 'Maintenance' ? 'selected' : ''}>Maintenance</option>
|
||||
<option value="Install" ${values.type === 'Install' ? 'selected' : ''}>Install</option>
|
||||
<option value="Task" ${values.type === 'Task' ? 'selected' : ''}>Task</option>
|
||||
<option value="Upgrade" ${values.type === 'Upgrade' ? 'selected' : ''}>Upgrade</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="menu-actions">
|
||||
<button onclick="saveTicket()" class="btn primary">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
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>
|
||||
`;
|
||||
|
||||
// Populate categories and types from data attributes
|
||||
const categoriesContainer = hamburgerMenu.querySelector('#category-filters');
|
||||
const typesContainer = hamburgerMenu.querySelector('#type-filters');
|
||||
// Populate categories and types from data attributes
|
||||
const categoriesContainer = hamburgerMenu.querySelector('#category-filters');
|
||||
const typesContainer = hamburgerMenu.querySelector('#type-filters');
|
||||
|
||||
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');
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.value = category;
|
||||
checkbox.name = 'category';
|
||||
label.appendChild(checkbox);
|
||||
label.appendChild(document.createTextNode(category));
|
||||
categoriesContainer.appendChild(label);
|
||||
});
|
||||
|
||||
// Create checkboxes for types
|
||||
types.forEach(type => {
|
||||
const label = document.createElement('label');
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.value = type;
|
||||
checkbox.name = 'type';
|
||||
label.appendChild(checkbox);
|
||||
label.appendChild(document.createTextNode(type));
|
||||
typesContainer.appendChild(label);
|
||||
});
|
||||
|
||||
// Apply filters
|
||||
const applyFiltersBtn = hamburgerMenu.querySelector('#apply-filters');
|
||||
applyFiltersBtn.addEventListener('click', () => {
|
||||
const selectedCategories = Array.from(
|
||||
categoriesContainer.querySelectorAll('input:checked')
|
||||
).map(cb => cb.value);
|
||||
|
||||
const categories = JSON.parse(document.body.dataset.categories || '[]');
|
||||
const types = JSON.parse(document.body.dataset.types || '[]');
|
||||
const selectedTypes = Array.from(
|
||||
typesContainer.querySelectorAll('input:checked')
|
||||
).map(cb => cb.value);
|
||||
|
||||
// Create checkboxes for categories
|
||||
categories.forEach(category => {
|
||||
const label = document.createElement('label');
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.value = category;
|
||||
checkbox.name = 'category';
|
||||
label.appendChild(checkbox);
|
||||
label.appendChild(document.createTextNode(category));
|
||||
categoriesContainer.appendChild(label);
|
||||
});
|
||||
|
||||
// Create checkboxes for types
|
||||
types.forEach(type => {
|
||||
const label = document.createElement('label');
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.value = type;
|
||||
checkbox.name = 'type';
|
||||
label.appendChild(checkbox);
|
||||
label.appendChild(document.createTextNode(type));
|
||||
typesContainer.appendChild(label);
|
||||
});
|
||||
|
||||
// Apply filters
|
||||
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);
|
||||
|
||||
// Construct URL with filters
|
||||
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');
|
||||
}
|
||||
|
||||
// Reload with new filters
|
||||
window.location.search = params.toString();
|
||||
});
|
||||
|
||||
// Clear filters
|
||||
const clearFiltersBtn = hamburgerMenu.querySelector('#clear-filters');
|
||||
clearFiltersBtn.addEventListener('click', () => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
// Construct URL with filters
|
||||
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');
|
||||
window.location.search = params.toString();
|
||||
});
|
||||
}
|
||||
// Add to body
|
||||
document.body.appendChild(hamburgerMenu);
|
||||
}
|
||||
|
||||
// Toggle hamburger menu
|
||||
const hamburgerIcon = hamburgerMenu.querySelector('.hamburger-icon');
|
||||
const hamburgerContent = hamburgerMenu.querySelector('.hamburger-content');
|
||||
hamburgerIcon.addEventListener('click', () => {
|
||||
hamburgerContent.classList.toggle('open');
|
||||
document.body.classList.toggle('menu-open');
|
||||
// Reload with new filters
|
||||
window.location.search = params.toString();
|
||||
});
|
||||
|
||||
// Close hamburger menu
|
||||
const closeButton = hamburgerMenu.querySelector('.close-hamburger');
|
||||
closeButton.addEventListener('click', () => {
|
||||
hamburgerContent.classList.remove('open');
|
||||
document.body.classList.remove('menu-open');
|
||||
// Clear filters
|
||||
const clearFiltersBtn = hamburgerMenu.querySelector('#clear-filters');
|
||||
clearFiltersBtn.addEventListener('click', () => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
params.delete('category');
|
||||
params.delete('type');
|
||||
window.location.search = params.toString();
|
||||
});
|
||||
}
|
||||
// Add to body
|
||||
document.body.appendChild(hamburgerMenu);
|
||||
|
||||
// Toggle hamburger menu
|
||||
const hamburgerIcon = hamburgerMenu.querySelector('.hamburger-icon');
|
||||
const hamburgerContent = hamburgerMenu.querySelector('.hamburger-content');
|
||||
hamburgerIcon.addEventListener('click', () => {
|
||||
hamburgerContent.classList.toggle('open');
|
||||
document.body.classList.toggle('menu-open');
|
||||
});
|
||||
|
||||
// Close hamburger menu
|
||||
const closeButton = hamburgerMenu.querySelector('.close-hamburger');
|
||||
closeButton.addEventListener('click', () => {
|
||||
hamburgerContent.classList.remove('open');
|
||||
document.body.classList.remove('menu-open');
|
||||
});
|
||||
}
|
||||
|
||||
// Add to DOMContentLoaded
|
||||
|
||||
Reference in New Issue
Block a user