From 5596f6eaf1555f935f0d4b84dee5010a1837783d Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 11 Nov 2025 18:34:37 +0000
Subject: [PATCH] Fix duplicate ID issue and modal field population

- Fix duplicate protocol_type ID by renaming mapping-modal field to mapping_protocol_type
- Update populateModalFields to search for fields within modal context instead of globally
- Add debugging to show which fields are found in the modal
- Ensure protocol type and address fields are properly populated from discovery data
---
 src/dashboard/templates.py |  4 ++--
 static/protocol_mapping.js | 48 +++++++++++++++++++++-----------------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/dashboard/templates.py b/src/dashboard/templates.py
index 084d6b9..ebed653 100644
--- a/src/dashboard/templates.py
+++ b/src/dashboard/templates.py
@@ -695,8 +695,8 @@ DASHBOARD_HTML = """
                                 <input type="text" id="mapping_id" name="mapping_id" required>
                             </div>
                             <div class="form-group">
-                                <label for="protocol_type">Protocol Type:</label>
-                                <select id="protocol_type" name="protocol_type" required onchange="updateProtocolFields()">
+                                <label for="mapping_protocol_type">Protocol Type:</label>
+                                <select id="mapping_protocol_type" name="protocol_type" required onchange="updateProtocolFields()">
                                     <option value="">Select Protocol</option>
                                     <option value="modbus_tcp">Modbus TCP</option>
                                     <option value="opcua">OPC UA</option>
diff --git a/static/protocol_mapping.js b/static/protocol_mapping.js
index 676329c..0f0df50 100644
--- a/static/protocol_mapping.js
+++ b/static/protocol_mapping.js
@@ -300,50 +300,54 @@ function populateModalFields(discoveryData) {
     
     // Try to find the appropriate form
     let form = document.getElementById('signal-form');
-    if (!form) {
-        form = document.getElementById('mapping-form');
-    }
+    let modal = document.getElementById('signal-modal');
     
     if (!form) {
+        form = document.getElementById('mapping-form');
+        modal = document.getElementById('mapping-modal');
+    }
+    
+    if (!form || !modal) {
         console.warn('No signal or mapping form found - cannot auto-populate');
         showSimplifiedAlert('No signal form found - please open the add signal/mapping modal first', 'error');
         return;
     }
     
     // Show the modal if it's hidden
-    const signalModal = document.getElementById('signal-modal');
-    const mappingModal = document.getElementById('mapping-modal');
-    
-    if (signalModal && signalModal.style.display === 'none') {
-        signalModal.style.display = 'block';
-        console.log('✓ Opened signal modal');
-    } else if (mappingModal && mappingModal.style.display === 'none') {
-        mappingModal.style.display = 'block';
-        console.log('✓ Opened mapping modal');
+    if (modal.style.display === 'none') {
+        modal.style.display = 'block';
+        console.log('✓ Opened modal');
     }
 
+    // Find fields within the modal context to avoid duplicate ID issues
+    const modalContent = modal.querySelector('.modal-content');
+    
     // Debug: Check if fields exist
-    console.log('Available fields:');
-    console.log('- protocol_type:', document.getElementById('protocol_type'));
-    console.log('- protocol_address:', document.getElementById('protocol_address'));
-    console.log('- db_source:', document.getElementById('db_source'));
+    console.log('Available fields in modal:');
+    console.log('- protocol_type:', modalContent.querySelector('#protocol_type'));
+    console.log('- mapping_protocol_type:', modalContent.querySelector('#mapping_protocol_type'));
+    console.log('- protocol_address:', modalContent.querySelector('#protocol_address'));
+    console.log('- db_source:', modalContent.querySelector('#db_source'));
     
     // Populate signal name (try different field names)
-    const signalNameField = document.getElementById('signal_name') || document.getElementById('mapping_id');
+    const signalNameField = modalContent.querySelector('#signal_name') || modalContent.querySelector('#mapping_id');
     if (signalNameField && discoveryData.signal_name) {
         signalNameField.value = discoveryData.signal_name;
         console.log('✓ Set signal name to:', discoveryData.signal_name);
     }
     
     // Populate tags (only in simplified template)
-    const tagsField = document.getElementById('tags');
+    const tagsField = modalContent.querySelector('#tags');
     if (tagsField && discoveryData.tags) {
         tagsField.value = discoveryData.tags.join(', ');
         console.log('✓ Set tags to:', discoveryData.tags);
     }
     
-    // Populate protocol type
-    const protocolTypeField = document.getElementById('protocol_type');
+    // Populate protocol type - try both possible IDs
+    let protocolTypeField = modalContent.querySelector('#protocol_type');
+    if (!protocolTypeField) {
+        protocolTypeField = modalContent.querySelector('#mapping_protocol_type');
+    }
     if (protocolTypeField && discoveryData.protocol_type) {
         protocolTypeField.value = discoveryData.protocol_type;
         console.log('✓ Set protocol_type to:', discoveryData.protocol_type);
@@ -352,14 +356,14 @@ function populateModalFields(discoveryData) {
     }
     
     // Populate protocol address
-    const protocolAddressField = document.getElementById('protocol_address');
+    const protocolAddressField = modalContent.querySelector('#protocol_address');
     if (protocolAddressField && discoveryData.protocol_address) {
         protocolAddressField.value = discoveryData.protocol_address;
         console.log('✓ Set protocol_address to:', discoveryData.protocol_address);
     }
     
     // Populate database source
-    const dbSourceField = document.getElementById('db_source');
+    const dbSourceField = modalContent.querySelector('#db_source');
     if (dbSourceField && discoveryData.db_source) {
         dbSourceField.value = discoveryData.db_source;
         console.log('✓ Set db_source to:', discoveryData.db_source);