diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js index e33d8ff..9c2cf44 100644 --- a/assets/js/dashboard.js +++ b/assets/js/dashboard.js @@ -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 = ` -
☰
-
-
☰
-

Ticket Controls

-
- - -
-
- - -
-
- - -
-
- - -
-
- -
+ hamburgerMenu.innerHTML = ` +
☰
+
+
☰
+

Ticket Controls

+
+ +
- `; - } else { - hamburgerMenu.innerHTML = ` -
☰
-
-
☰
-

Filters

-
-

Categories

-
-
-
-

Types

-
-
-
- - -
+
+ +
- `; +
+ + +
+
+ + +
+
+ +
+
+ `; + } else { + hamburgerMenu.innerHTML = ` +
☰
+
+
☰
+

Filters

+
+

Categories

+
+
+
+

Types

+
+
+
+ + +
+
+ `; - // 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