127 lines
5.6 KiB
HTML
127 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test Use Button Functionality</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
.endpoint { border: 1px solid #ccc; padding: 10px; margin: 10px 0; }
|
|
.use-btn { background: #007bff; color: white; border: none; padding: 5px 10px; cursor: pointer; }
|
|
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
|
|
.modal-content { background: white; margin: 100px auto; padding: 20px; width: 500px; }
|
|
.form-group { margin: 10px 0; }
|
|
label { display: block; margin-bottom: 5px; }
|
|
input, select { width: 100%; padding: 5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Test Use Button Functionality</h1>
|
|
|
|
<div class="endpoint">
|
|
<h3>Discovered Endpoint</h3>
|
|
<p><strong>Device:</strong> Modbus Controller</p>
|
|
<p><strong>Address:</strong> 192.168.1.100:502</p>
|
|
<p><strong>Protocol:</strong> modbus_tcp</p>
|
|
<p><strong>Node:</strong> 40001</p>
|
|
<button class="use-btn" onclick="useEndpoint('modbus_tcp', '40001', 'Modbus Controller', '192.168.1.100', '502')">Use</button>
|
|
</div>
|
|
|
|
<div class="endpoint">
|
|
<h3>Discovered Endpoint</h3>
|
|
<p><strong>Device:</strong> OPC UA Server</p>
|
|
<p><strong>Address:</strong> 192.168.1.101:4840</p>
|
|
<p><strong>Protocol:</strong> opcua</p>
|
|
<p><strong>Node:</strong> ns=2;s=Pressure</p>
|
|
<button class="use-btn" onclick="useEndpoint('opcua', 'ns=2;s=Pressure', 'OPC UA Server', '192.168.1.101', '4840')">Use</button>
|
|
</div>
|
|
|
|
<!-- Add New Mapping Modal -->
|
|
<div id="addMappingModal" class="modal">
|
|
<div class="modal-content">
|
|
<h2>Add New Protocol Mapping</h2>
|
|
<form id="protocolMappingForm">
|
|
<div class="form-group">
|
|
<label for="mapping-id">Mapping ID:</label>
|
|
<input type="text" id="mapping-id" name="mapping-id">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="protocol-type">Protocol Type:</label>
|
|
<select id="protocol-type" name="protocol-type">
|
|
<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">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="device-name">Device Name:</label>
|
|
<input type="text" id="device-name" name="device-name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="device-address">Device Address:</label>
|
|
<input type="text" id="device-address" name="device-address">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="device-port">Device Port:</label>
|
|
<input type="text" id="device-port" name="device-port">
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="button" onclick="closeModal()">Cancel</button>
|
|
<button type="submit">Save Mapping</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Function to open the Add New Mapping modal
|
|
function showAddMappingModal() {
|
|
document.getElementById('addMappingModal').style.display = 'block';
|
|
}
|
|
|
|
// Function to close the modal
|
|
function closeModal() {
|
|
document.getElementById('addMappingModal').style.display = 'none';
|
|
}
|
|
|
|
// Function to use an endpoint (simulates the Use button)
|
|
function useEndpoint(protocolType, protocolAddress, deviceName, deviceAddress, devicePort) {
|
|
// First, open the Add New Mapping modal
|
|
showAddMappingModal();
|
|
|
|
// Wait a moment for the modal to open, then populate fields
|
|
setTimeout(() => {
|
|
// Generate a mapping ID
|
|
const mappingId = `${protocolType}_${deviceName.replace(/\s+/g, '_').toLowerCase()}_${Date.now()}`;
|
|
|
|
// Populate form fields
|
|
document.getElementById('mapping-id').value = mappingId;
|
|
document.getElementById('protocol-type').value = protocolType;
|
|
document.getElementById('protocol-address').value = protocolAddress;
|
|
document.getElementById('device-name').value = deviceName;
|
|
document.getElementById('device-address').value = deviceAddress;
|
|
document.getElementById('device-port').value = devicePort;
|
|
|
|
// Show success message
|
|
alert(`Protocol form populated with ${deviceName}. Please complete station, equipment, and data type information.`);
|
|
}, 100);
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
window.onclick = function(event) {
|
|
const modal = document.getElementById('addMappingModal');
|
|
if (event.target === modal) {
|
|
closeModal();
|
|
}
|
|
}
|
|
|
|
// Handle form submission
|
|
document.getElementById('protocolMappingForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
alert('Protocol mapping would be saved here!');
|
|
closeModal();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |