/** * GLPI SOC Case Management Plugin JavaScript */ document.addEventListener('DOMContentLoaded', function() { // Initialize SOC plugin components initializeSocPlugin(); }); /** * Initialize SOC plugin components */ function initializeSocPlugin() { // Initialize case creation form initializeCaseForm(); // Initialize timeline initializeTimeline(); // Initialize KPI dashboard initializeKpiDashboard(); // Initialize related items tabs initializeRelatedItemsTabs(); } /** * Initialize case creation/edit form */ function initializeCaseForm() { const severityField = document.querySelector('select[name="severity"]'); if (severityField) { // Update visual indicators when severity changes severityField.addEventListener('change', function() { updateSeverityIndicator(this.value); }); // Initialize with current value updateSeverityIndicator(severityField.value); } // Handle case creation button const createCaseButton = document.querySelector('.js-soc-create-case'); if (createCaseButton) { createCaseButton.addEventListener('click', function(e) { // Show creation form if not visible const caseForm = document.querySelector('.js-soc-case-form'); if (caseForm && caseForm.classList.contains('d-none')) { e.preventDefault(); caseForm.classList.remove('d-none'); this.textContent = 'Cancel'; } }); } } /** * Update severity visual indicator * @param {string} severity - Severity value */ function updateSeverityIndicator(severity) { const indicator = document.querySelector('.js-soc-severity-indicator'); if (!indicator) return; // Remove existing classes indicator.classList.remove( 'soc-severity-critical', 'soc-severity-high', 'soc-severity-medium', 'soc-severity-low' ); // Add appropriate class indicator.classList.add(`soc-severity-${severity}`); // Update text const severityText = { 'critical': 'Critical', 'high': 'High', 'medium': 'Medium', 'low': 'Low' }; indicator.textContent = severityText[severity] || 'Unknown'; } /** * Initialize timeline visualization */ function initializeTimeline() { // Animate timeline items when they enter viewport const timelineItems = document.querySelectorAll('.soc-timeline-item'); if (timelineItems.length === 0) return; // Simple animation for timeline items timelineItems.forEach(function(item, index) { // Stagger the animation setTimeout(function() { item.style.opacity = '1'; item.style.transform = 'translateY(0)'; }, index * 100); }); } /** * Initialize KPI dashboard */ function initializeKpiDashboard() { const kpiCards = document.querySelectorAll('.soc-kpi-card'); if (kpiCards.length === 0) return; // Add animation to KPI numbers kpiCards.forEach(function(card) { const valueEl = card.querySelector('.soc-kpi-value'); if (valueEl) { const finalValue = parseInt(valueEl.getAttribute('data-value'), 10); let currentValue = 0; // Simple animation const interval = setInterval(function() { currentValue += Math.ceil(finalValue / 20); if (currentValue >= finalValue) { clearInterval(interval); currentValue = finalValue; } valueEl.textContent = currentValue; }, 50); } }); } /** * Initialize related items tabs (tickets, changes) */ function initializeRelatedItemsTabs() { const tabLinks = document.querySelectorAll('.js-soc-tab'); if (tabLinks.length === 0) return; tabLinks.forEach(function(link) { link.addEventListener('click', function(e) { e.preventDefault(); // Remove active class from all tabs tabLinks.forEach(tab => tab.classList.remove('active')); // Add active class to clicked tab this.classList.add('active'); // Hide all tab contents const tabContents = document.querySelectorAll('.js-soc-tab-content'); tabContents.forEach(content => content.classList.add('d-none')); // Show the target tab content const targetId = this.getAttribute('data-target'); const targetContent = document.getElementById(targetId); if (targetContent) { targetContent.classList.remove('d-none'); } }); }); } /** * Create ticket from case * @param {number} caseId - Case ID */ function createTicketFromCase(caseId) { // Show confirmation dialog if (confirm('Create a new ticket from this case?')) { const form = document.createElement('form'); form.method = 'POST'; form.action = 'case.form.php'; const caseIdInput = document.createElement('input'); caseIdInput.type = 'hidden'; caseIdInput.name = 'plugin_soc_cases_id'; caseIdInput.value = caseId; const submitInput = document.createElement('input'); submitInput.type = 'hidden'; submitInput.name = 'add_ticket'; submitInput.value = '1'; form.appendChild(caseIdInput); form.appendChild(submitInput); document.body.appendChild(form); form.submit(); } } /** * Create change from case * @param {number} caseId - Case ID */ function createChangeFromCase(caseId) { // Show confirmation dialog if (confirm('Create a new change from this case?')) { const form = document.createElement('form'); form.method = 'POST'; form.action = 'case.form.php'; const caseIdInput = document.createElement('input'); caseIdInput.type = 'hidden'; caseIdInput.name = 'plugin_soc_cases_id'; caseIdInput.value = caseId; const submitInput = document.createElement('input'); submitInput.type = 'hidden'; submitInput.name = 'add_change'; submitInput.value = '1'; form.appendChild(caseIdInput); form.appendChild(submitInput); document.body.appendChild(form); form.submit(); } }