JavaScript Integration Example

// Example: Find all material IDs in an Arches page and check for containers
const archesIntegration = {
  // Extract material IDs from the page
  findMaterialIds: function() {
    const materialIds = [];
    // Look for patterns like tg:lhpr:9393:m1
    document.querySelectorAll('dd').forEach(dd => {
      const match = dd.textContent.match(/tg:lh[pb]r:\d+:m\d+/g);
      if (match) {
        materialIds.push(...match);
      }
    });
    return [...new Set(materialIds)]; // Remove duplicates
  },
  
  // Check which material IDs have containers
  checkContainers: async function(materialIds) {
    const response = await fetch('/integrations/arches/check-materials', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({materialIds: materialIds})
    });
    return await response.json();
  },
  
  // Inject container information after each material ID
  injectContainerInfo: async function() {
    const materialIds = this.findMaterialIds();
    const results = await this.checkContainers(materialIds);
    
    materialIds.forEach(materialId => {
      if (results[materialId]?.hasContainer) {
        // Find and update the element containing this material ID
        document.querySelectorAll('dd').forEach(dd => {
          if (dd.textContent === materialId) {
            // Add a container indicator or fetch full details
            const indicator = document.createElement('div');
            indicator.className = 'container-indicator';
            indicator.innerHTML = '📦 <a href="#">View Container</a>';
            dd.appendChild(indicator);
          }
        });
      }
    });
  }
};