Add edit buttons to hamburger model
This commit is contained in:
@ -411,113 +411,165 @@ function createHamburgerMenu() {
|
||||
// Create hamburger menu container
|
||||
const hamburgerMenu = document.createElement('div');
|
||||
hamburgerMenu.className = 'hamburger-menu';
|
||||
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');
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
// 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');
|
||||
});
|
||||
|
||||
// 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(','));
|
||||
// Check if we're on a ticket page
|
||||
const isTicketPage = window.location.pathname.includes('ticket.php');
|
||||
|
||||
if (isTicketPage) {
|
||||
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">Open</option>
|
||||
<option value="Closed">Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<label>Priority</label>
|
||||
<select class="editable" data-field="priority">
|
||||
<option value="1">P1 - Critical Impact</option>
|
||||
<option value="2">P2 - High Impact</option>
|
||||
<option value="3">P3 - Medium Impact</option>
|
||||
<option value="4">P4 - Low Impact</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<label>Category</label>
|
||||
<select class="editable" data-field="category">
|
||||
<option value="Hardware">Hardware</option>
|
||||
<option value="Software">Software</option>
|
||||
<option value="Network">Network</option>
|
||||
<option value="Security">Security</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<label>Type</label>
|
||||
<select class="editable" data-field="type">
|
||||
<option value="Maintenance">Maintenance</option>
|
||||
<option value="Install">Install</option>
|
||||
<option value="Task">Task</option>
|
||||
<option value="Upgrade">Upgrade</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="menu-actions">
|
||||
<button onclick="saveTicket()" class="btn primary">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
params.delete('category');
|
||||
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');
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
// 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');
|
||||
});
|
||||
|
||||
// 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);
|
||||
params.delete('category');
|
||||
params.delete('type');
|
||||
window.location.search = params.toString();
|
||||
});
|
||||
|
||||
// Add to body
|
||||
document.body.appendChild(hamburgerMenu);
|
||||
|
||||
// Close hamburger menu
|
||||
const closeButton = hamburgerMenu.querySelector('.close-hamburger');
|
||||
closeButton.addEventListener('click', () => {
|
||||
hamburgerContent.classList.remove('open');
|
||||
document.body.classList.remove('menu-open');
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
params.delete('category');
|
||||
params.delete('type');
|
||||
window.location.search = params.toString();
|
||||
});
|
||||
|
||||
// Add to body
|
||||
document.body.appendChild(hamburgerMenu);
|
||||
|
||||
// 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