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