179 lines
7.8 KiB
HTML
179 lines
7.8 KiB
HTML
|
<!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>
|