273 lines
10 KiB
HTML
273 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Test Simplified UI</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 20px;
|
||
|
|
background: #f5f7fa;
|
||
|
|
}
|
||
|
|
.test-container {
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto;
|
||
|
|
background: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
.test-button {
|
||
|
|
background: #667eea;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 5px;
|
||
|
|
}
|
||
|
|
.test-button:hover {
|
||
|
|
background: #5a6fd8;
|
||
|
|
}
|
||
|
|
.test-result {
|
||
|
|
margin: 10px 0;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
background: #d4edda;
|
||
|
|
color: #155724;
|
||
|
|
border: 1px solid #c3e6cb;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
background: #f8d7da;
|
||
|
|
color: #721c24;
|
||
|
|
border: 1px solid #f5c6cb;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="test-container">
|
||
|
|
<h1>Simplified Protocol Signals UI Test</h1>
|
||
|
|
<p>This test verifies the simplified UI components work correctly.</p>
|
||
|
|
|
||
|
|
<div id="test-results"></div>
|
||
|
|
|
||
|
|
<h3>Test Actions:</h3>
|
||
|
|
<button class="test-button" onclick="testModal()">Test Modal Opening</button>
|
||
|
|
<button class="test-button" onclick="testFormPopulation()">Test Form Population</button>
|
||
|
|
<button class="test-button" onclick="testDiscoveryIntegration()">Test Discovery Integration</button>
|
||
|
|
<button class="test-button" onclick="testAll()">Run All Tests</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Simplified Modal for Testing -->
|
||
|
|
<div id="signal-modal" class="modal" style="display: none;">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h2 id="modal-title">Test Protocol Signal</h2>
|
||
|
|
<span class="close" onclick="closeSignalModal()">×</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form id="signal-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="signal_name">Signal Name *</label>
|
||
|
|
<input type="text" id="signal_name" name="signal_name" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="tags">Tags</label>
|
||
|
|
<input type="text" id="tags" name="tags" placeholder="equipment:pump, protocol:modbus_tcp">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="protocol_type">Protocol Type *</label>
|
||
|
|
<select id="protocol_type" name="protocol_type" required>
|
||
|
|
<option value="">Select Protocol Type</option>
|
||
|
|
<option value="modbus_tcp">Modbus TCP</option>
|
||
|
|
<option value="opcua">OPC UA</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="protocol_address">Protocol Address *</label>
|
||
|
|
<input type="text" id="protocol_address" name="protocol_address" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="db_source">Database Source *</label>
|
||
|
|
<input type="text" id="db_source" name="db_source" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-actions">
|
||
|
|
<button type="button" class="btn btn-secondary" onclick="closeSignalModal()">Cancel</button>
|
||
|
|
<button type="submit" class="btn btn-primary">Save Signal</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function logTest(message, type = 'success') {
|
||
|
|
const results = document.getElementById('test-results');
|
||
|
|
const resultDiv = document.createElement('div');
|
||
|
|
resultDiv.className = `test-result ${type}`;
|
||
|
|
resultDiv.textContent = message;
|
||
|
|
results.appendChild(resultDiv);
|
||
|
|
}
|
||
|
|
|
||
|
|
function showAddSignalModal() {
|
||
|
|
document.getElementById('signal-modal').style.display = 'block';
|
||
|
|
logTest('✓ Modal opened successfully');
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeSignalModal() {
|
||
|
|
document.getElementById('signal-modal').style.display = 'none';
|
||
|
|
logTest('✓ Modal closed successfully');
|
||
|
|
}
|
||
|
|
|
||
|
|
function autoPopulateSignalForm(discoveryData) {
|
||
|
|
console.log('Auto-populating signal form with:', discoveryData);
|
||
|
|
|
||
|
|
// First, open the modal
|
||
|
|
showAddSignalModal();
|
||
|
|
|
||
|
|
// Wait for modal to be fully loaded and visible
|
||
|
|
const waitForModal = setInterval(() => {
|
||
|
|
const modal = document.getElementById('signal-modal');
|
||
|
|
const isModalVisible = modal && modal.style.display !== 'none';
|
||
|
|
|
||
|
|
if (isModalVisible) {
|
||
|
|
clearInterval(waitForModal);
|
||
|
|
populateModalFields(discoveryData);
|
||
|
|
}
|
||
|
|
}, 50);
|
||
|
|
}
|
||
|
|
|
||
|
|
function populateModalFields(discoveryData) {
|
||
|
|
console.log('Populating modal fields with:', discoveryData);
|
||
|
|
|
||
|
|
// Populate signal name
|
||
|
|
const signalNameField = document.getElementById('signal_name');
|
||
|
|
if (signalNameField && discoveryData.signal_name) {
|
||
|
|
signalNameField.value = discoveryData.signal_name;
|
||
|
|
console.log('✓ Set signal_name to:', discoveryData.signal_name);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Populate tags
|
||
|
|
const tagsField = document.getElementById('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');
|
||
|
|
if (protocolTypeField && discoveryData.protocol_type) {
|
||
|
|
protocolTypeField.value = discoveryData.protocol_type;
|
||
|
|
console.log('✓ Set protocol_type to:', discoveryData.protocol_type);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Populate protocol address
|
||
|
|
const protocolAddressField = document.getElementById('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');
|
||
|
|
if (dbSourceField && discoveryData.db_source) {
|
||
|
|
dbSourceField.value = discoveryData.db_source;
|
||
|
|
console.log('✓ Set db_source to:', discoveryData.db_source);
|
||
|
|
}
|
||
|
|
|
||
|
|
logTest('✓ Form populated with discovery data successfully');
|
||
|
|
}
|
||
|
|
|
||
|
|
function testModal() {
|
||
|
|
logTest('Testing modal functionality...');
|
||
|
|
showAddSignalModal();
|
||
|
|
setTimeout(() => {
|
||
|
|
closeSignalModal();
|
||
|
|
}, 2000);
|
||
|
|
}
|
||
|
|
|
||
|
|
function testFormPopulation() {
|
||
|
|
logTest('Testing form population...');
|
||
|
|
|
||
|
|
const testData = {
|
||
|
|
signal_name: "Water Pump Controller Speed",
|
||
|
|
tags: ["equipment:pump", "protocol:modbus_tcp", "data_point:speed"],
|
||
|
|
protocol_type: "modbus_tcp",
|
||
|
|
protocol_address: "40001",
|
||
|
|
db_source: "measurements.water_pump_speed"
|
||
|
|
};
|
||
|
|
|
||
|
|
autoPopulateSignalForm(testData);
|
||
|
|
}
|
||
|
|
|
||
|
|
function testDiscoveryIntegration() {
|
||
|
|
logTest('Testing discovery integration...');
|
||
|
|
|
||
|
|
// Simulate discovery result
|
||
|
|
const discoveryResult = {
|
||
|
|
device_name: "Boiler Temperature Sensor",
|
||
|
|
protocol_type: "opcua",
|
||
|
|
protocol_address: "ns=2;s=Temperature",
|
||
|
|
data_point: "Temperature",
|
||
|
|
device_address: "192.168.1.100"
|
||
|
|
};
|
||
|
|
|
||
|
|
// Convert to signal format
|
||
|
|
const signalData = {
|
||
|
|
signal_name: `${discoveryResult.device_name} ${discoveryResult.data_point}`,
|
||
|
|
tags: [
|
||
|
|
`device:${discoveryResult.device_name.toLowerCase().replace(/[^a-z0-9]/g, '_')}`,
|
||
|
|
`protocol:${discoveryResult.protocol_type}`,
|
||
|
|
`data_point:${discoveryResult.data_point.toLowerCase().replace(/[^a-z0-9]/g, '_')}`,
|
||
|
|
'discovered:true'
|
||
|
|
],
|
||
|
|
protocol_type: discoveryResult.protocol_type,
|
||
|
|
protocol_address: discoveryResult.protocol_address,
|
||
|
|
db_source: `measurements.${discoveryResult.device_name.toLowerCase().replace(/[^a-z0-9]/g, '_')}_${discoveryResult.data_point.toLowerCase().replace(/[^a-z0-9]/g, '_')}`
|
||
|
|
};
|
||
|
|
|
||
|
|
autoPopulateSignalForm(signalData);
|
||
|
|
logTest('✓ Discovery integration test completed');
|
||
|
|
}
|
||
|
|
|
||
|
|
function testAll() {
|
||
|
|
logTest('Running all tests...');
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
testModal();
|
||
|
|
}, 500);
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
testFormPopulation();
|
||
|
|
}, 3000);
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
testDiscoveryIntegration();
|
||
|
|
}, 6000);
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
logTest('All tests completed successfully!', 'success');
|
||
|
|
}, 9000);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize form submission handler
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const signalForm = document.getElementById('signal-form');
|
||
|
|
if (signalForm) {
|
||
|
|
signalForm.addEventListener('submit', function(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
logTest('✓ Form submitted successfully');
|
||
|
|
closeSignalModal();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|