Fix duplicate HTML IDs causing protocol address auto-fill issues
This commit is contained in:
openhands
parent
5e6605f22f
commit
0b34be01b1
|
|
@ -800,13 +800,13 @@ DASHBOARD_HTML = """
|
|||
<small style="color: #666;">Data types will be loaded from tag metadata system</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="protocol_address">Protocol Address:</label>
|
||||
<input type="text" id="protocol_address" name="protocol_address" required>
|
||||
<small id="protocol_address_help" style="color: #666;"></small>
|
||||
<label for="mapping_protocol_address">Protocol Address:</label>
|
||||
<input type="text" id="mapping_protocol_address" name="protocol_address" required>
|
||||
<small id="mapping-protocol-address-help" style="color: #666;"></small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="db_source">Database Source:</label>
|
||||
<input type="text" id="db_source" name="db_source" required placeholder="table.column">
|
||||
<label for="mapping_db_source">Database Source:</label>
|
||||
<input type="text" id="mapping_db_source" name="db_source" required placeholder="table.column">
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<button type="button" onclick="validateMapping()">Validate</button>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Protocol Address Debug Test</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; margin: 20px; }
|
||||
.test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
|
||||
button { padding: 10px 15px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
|
||||
button:hover { background: #0056b3; }
|
||||
.debug-output { background: #f8f9fa; padding: 10px; border: 1px solid #dee2e6; margin: 10px 0; font-family: monospace; white-space: pre-wrap; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Protocol Address Auto-fill Debug Test</h1>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test 1: Direct Function Call</h2>
|
||||
<p>Test if autoPopulateSignalForm function works directly:</p>
|
||||
<button onclick="testDirectFunction()">Test Direct Function</button>
|
||||
<div id="test1-output" class="debug-output"></div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test 2: Simulate "Use This Signal" Button</h2>
|
||||
<p>Simulate clicking a "Use This Signal" button:</p>
|
||||
<button onclick="testUseSignalButton()">Simulate Use Signal Button</button>
|
||||
<div id="test2-output" class="debug-output"></div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test 3: Check Modal Elements</h2>
|
||||
<p>Check if modal form elements exist:</p>
|
||||
<button onclick="checkModalElements()">Check Modal Elements</button>
|
||||
<div id="test3-output" class="debug-output"></div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test 4: Manual Modal Population</h2>
|
||||
<p>Manually populate modal fields:</p>
|
||||
<button onclick="manualPopulateModal()">Manual Populate</button>
|
||||
<div id="test4-output" class="debug-output"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Test data
|
||||
const testSignalData = {
|
||||
signal_name: 'Test Booster Pump Flow Rate',
|
||||
tags: ['equipment:pump', 'protocol:modbus_tcp', 'data_point:flow_rate', 'discovered:true'],
|
||||
protocol_type: 'modbus_tcp',
|
||||
protocol_address: '30002',
|
||||
db_source: 'measurements.booster_pump_flow_rate'
|
||||
};
|
||||
|
||||
function logTest(testId, message) {
|
||||
const output = document.getElementById(testId + '-output');
|
||||
if (output) {
|
||||
output.textContent += message + '\n';
|
||||
}
|
||||
console.log(message);
|
||||
}
|
||||
|
||||
function testDirectFunction() {
|
||||
logTest('test1', 'Testing direct function call...');
|
||||
|
||||
if (typeof window.autoPopulateSignalForm === 'function') {
|
||||
logTest('test1', '✓ autoPopulateSignalForm function found');
|
||||
window.autoPopulateSignalForm(testSignalData);
|
||||
logTest('test1', '✓ Function called successfully');
|
||||
} else {
|
||||
logTest('test1', '✗ autoPopulateSignalForm function NOT found');
|
||||
}
|
||||
}
|
||||
|
||||
function testUseSignalButton() {
|
||||
logTest('test2', 'Simulating "Use This Signal" button click...');
|
||||
|
||||
if (window.simplifiedDiscovery && typeof window.simplifiedDiscovery.useDiscoveredEndpoint === 'function') {
|
||||
logTest('test2', '✓ simplifiedDiscovery.useDiscoveredEndpoint found');
|
||||
// Simulate clicking on the first signal (index 0)
|
||||
window.simplifiedDiscovery.useDiscoveredEndpoint(0);
|
||||
logTest('test2', '✓ Function called successfully');
|
||||
} else {
|
||||
logTest('test2', '✗ simplifiedDiscovery.useDiscoveredEndpoint NOT found');
|
||||
}
|
||||
}
|
||||
|
||||
function checkModalElements() {
|
||||
logTest('test3', 'Checking modal form elements...');
|
||||
|
||||
const elements = [
|
||||
'signal_name', 'tags', 'protocol_type', 'protocol_address', 'db_source',
|
||||
'signal-modal', 'modal-title'
|
||||
];
|
||||
|
||||
elements.forEach(id => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
logTest('test3', `✓ Element #${id} found`);
|
||||
} else {
|
||||
logTest('test3', `✗ Element #${id} NOT found`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function manualPopulateModal() {
|
||||
logTest('test4', 'Manually populating modal fields...');
|
||||
|
||||
// First, try to open the modal
|
||||
if (typeof window.showAddSignalModal === 'function') {
|
||||
window.showAddSignalModal();
|
||||
logTest('test4', '✓ Modal opened');
|
||||
} else {
|
||||
logTest('test4', '✗ showAddSignalModal function NOT found');
|
||||
}
|
||||
|
||||
// Wait a bit for modal to open, then populate
|
||||
setTimeout(() => {
|
||||
const fields = {
|
||||
'signal_name': testSignalData.signal_name,
|
||||
'tags': testSignalData.tags.join(', '),
|
||||
'protocol_type': testSignalData.protocol_type,
|
||||
'protocol_address': testSignalData.protocol_address,
|
||||
'db_source': testSignalData.db_source
|
||||
};
|
||||
|
||||
Object.entries(fields).forEach(([id, value]) => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.value = value;
|
||||
logTest('test4', `✓ Set #${id} to: ${value}`);
|
||||
} else {
|
||||
logTest('test4', `✗ Element #${id} NOT found`);
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Protocol Address Fix Test</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; margin: 20px; }
|
||||
.test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
|
||||
button { padding: 10px 15px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
|
||||
button:hover { background: #0056b3; }
|
||||
.debug-output { background: #f8f9fa; padding: 10px; border: 1px solid #dee2e6; margin: 10px 0; font-family: monospace; white-space: pre-wrap; }
|
||||
.success { color: green; }
|
||||
.error { color: red; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Protocol Address Auto-fill Fix Verification</h1>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test: Check for Duplicate IDs</h2>
|
||||
<p>Verify that there are no duplicate HTML IDs that could cause JavaScript issues:</p>
|
||||
<button onclick="checkDuplicateIds()">Check for Duplicate IDs</button>
|
||||
<div id="duplicate-check-output" class="debug-output"></div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test: Verify Modal Elements</h2>
|
||||
<p>Check if the signal modal elements exist with correct IDs:</p>
|
||||
<button onclick="verifyModalElements()">Verify Modal Elements</button>
|
||||
<div id="modal-check-output" class="debug-output"></div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test: Simulate Discovery Integration</h2>
|
||||
<p>Simulate the "Use This Signal" button functionality:</p>
|
||||
<button onclick="simulateUseSignal()">Simulate Use Signal</button>
|
||||
<div id="simulation-output" class="debug-output"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function logOutput(elementId, message, className = '') {
|
||||
const output = document.getElementById(elementId);
|
||||
if (output) {
|
||||
const line = document.createElement('div');
|
||||
line.textContent = message;
|
||||
if (className) line.className = className;
|
||||
output.appendChild(line);
|
||||
}
|
||||
console.log(message);
|
||||
}
|
||||
|
||||
function checkDuplicateIds() {
|
||||
const output = document.getElementById('duplicate-check-output');
|
||||
output.innerHTML = '';
|
||||
|
||||
logOutput('duplicate-check-output', 'Checking for duplicate HTML IDs...');
|
||||
|
||||
const allElements = document.querySelectorAll('[id]');
|
||||
const idCounts = {};
|
||||
|
||||
allElements.forEach(element => {
|
||||
const id = element.id;
|
||||
idCounts[id] = (idCounts[id] || 0) + 1;
|
||||
});
|
||||
|
||||
let hasDuplicates = false;
|
||||
Object.entries(idCounts).forEach(([id, count]) => {
|
||||
if (count > 1) {
|
||||
logOutput('duplicate-check-output', `❌ Duplicate ID: "${id}" found ${count} times`, 'error');
|
||||
hasDuplicates = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (!hasDuplicates) {
|
||||
logOutput('duplicate-check-output', '✅ No duplicate IDs found', 'success');
|
||||
}
|
||||
|
||||
// Check specific protocol-related IDs
|
||||
const protocolIds = ['protocol_address', 'protocol-address-help', 'mapping_protocol_address', 'mapping-protocol-address-help'];
|
||||
logOutput('duplicate-check-output', '\nChecking specific protocol-related IDs:');
|
||||
|
||||
protocolIds.forEach(id => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
logOutput('duplicate-check-output', `✅ Found element with ID: "${id}"`, 'success');
|
||||
} else {
|
||||
logOutput('duplicate-check-output', `❌ Element with ID "${id}" not found`, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function verifyModalElements() {
|
||||
const output = document.getElementById('modal-check-output');
|
||||
output.innerHTML = '';
|
||||
|
||||
logOutput('modal-check-output', 'Verifying signal modal elements...');
|
||||
|
||||
const requiredElements = [
|
||||
'signal-modal',
|
||||
'modal-title',
|
||||
'signal-form',
|
||||
'signal_name',
|
||||
'tags',
|
||||
'protocol_type',
|
||||
'protocol_address',
|
||||
'protocol-address-help',
|
||||
'db_source'
|
||||
];
|
||||
|
||||
let allFound = true;
|
||||
requiredElements.forEach(id => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
logOutput('modal-check-output', `✅ Found: #${id}`, 'success');
|
||||
} else {
|
||||
logOutput('modal-check-output', `❌ Missing: #${id}`, 'error');
|
||||
allFound = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (allFound) {
|
||||
logOutput('modal-check-output', '\n✅ All required modal elements found!', 'success');
|
||||
} else {
|
||||
logOutput('modal-check-output', '\n❌ Some modal elements are missing', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function simulateUseSignal() {
|
||||
const output = document.getElementById('simulation-output');
|
||||
output.innerHTML = '';
|
||||
|
||||
logOutput('simulation-output', 'Simulating "Use This Signal" functionality...');
|
||||
|
||||
// Test data that would come from discovery
|
||||
const testSignalData = {
|
||||
signal_name: 'Test Booster Pump Flow Rate',
|
||||
tags: ['equipment:pump', 'protocol:modbus_tcp', 'data_point:flow_rate', 'discovered:true'],
|
||||
protocol_type: 'modbus_tcp',
|
||||
protocol_address: '30002',
|
||||
db_source: 'measurements.booster_pump_flow_rate'
|
||||
};
|
||||
|
||||
logOutput('simulation-output', `Test data: ${JSON.stringify(testSignalData, null, 2)}`);
|
||||
|
||||
// Check if the auto-populate function exists
|
||||
if (typeof window.autoPopulateSignalForm === 'function') {
|
||||
logOutput('simulation-output', '✅ autoPopulateSignalForm function found', 'success');
|
||||
|
||||
// Call the function
|
||||
window.autoPopulateSignalForm(testSignalData);
|
||||
logOutput('simulation-output', '✅ Function called successfully', 'success');
|
||||
|
||||
// Check if modal opened and fields populated
|
||||
setTimeout(() => {
|
||||
const modal = document.getElementById('signal-modal');
|
||||
if (modal && modal.style.display !== 'none') {
|
||||
logOutput('simulation-output', '✅ Modal is open', 'success');
|
||||
|
||||
// Check if fields were populated
|
||||
const protocolAddressField = document.getElementById('protocol_address');
|
||||
if (protocolAddressField && protocolAddressField.value === '30002') {
|
||||
logOutput('simulation-output', '✅ Protocol Address field populated correctly: ' + protocolAddressField.value, 'success');
|
||||
} else {
|
||||
logOutput('simulation-output', '❌ Protocol Address field NOT populated correctly', 'error');
|
||||
if (protocolAddressField) {
|
||||
logOutput('simulation-output', ` Current value: "${protocolAddressField.value}"`, 'error');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
logOutput('simulation-output', '❌ Modal did not open', 'error');
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
} else {
|
||||
logOutput('simulation-output', '❌ autoPopulateSignalForm function NOT found', 'error');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue