GLPI-Plugin-SOC-Case-Management/js/soc.js

/**
 * 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();
  }
}