CalejoControl/templates/simplified_protocol_signals...

159 lines
6.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calejo Control - Protocol Signals</title>
<link rel="stylesheet" href="/static/simplified_styles.css?v=2">
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<h1>Protocol Signals</h1>
<p>Manage your industrial protocol signals with human-readable names and flexible tags</p>
</div>
<!-- Alerts -->
<div id="simplified-alerts"></div>
<!-- Controls -->
<div class="controls">
<div class="filter-section">
<div class="filter-group">
<label for="name-filter">Signal Name</label>
<input type="text" id="name-filter" placeholder="Filter by signal name...">
</div>
<div class="filter-group">
<label for="tag-filter">Tags</label>
<input type="text" id="tag-filter" placeholder="Filter by tags...">
</div>
<div class="filter-group">
<label for="protocol-filter">Protocol Type</label>
<select id="protocol-filter">
<option value="all">All Protocols</option>
<option value="modbus_tcp">Modbus TCP</option>
<option value="modbus_rtu">Modbus RTU</option>
<option value="opcua">OPC UA</option>
<option value="rest_api">REST API</option>
</select>
</div>
<button class="btn btn-primary" onclick="applyFilters()">Apply Filters</button>
</div>
</div>
<!-- Discovery Results -->
<div class="discovery-section" style="margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background: #f8f9fa;">
<h3>Discovery Results</h3>
<p>Use discovered signals to quickly add them to your protocol mapping:</p>
<div style="margin-bottom: 15px;">
<button id="start-discovery-scan" class="btn btn-primary">
Start Discovery Scan
</button>
<button onclick="window.simplifiedDiscovery.clearAllSignals()" class="btn btn-danger" style="margin-left: 10px;">
Clear All Signals
</button>
</div>
<div id="discovery-results">
<!-- Discovery results will be populated by JavaScript -->
</div>
</div>
<!-- Tag Cloud -->
<div class="tag-cloud">
<h3>Popular Tags</h3>
<div id="tag-cloud">
<!-- Tags will be populated by JavaScript -->
</div>
</div>
<!-- Signals Table -->
<div class="signals-table">
<div class="table-header">
<h3>Protocol Signals</h3>
<button class="btn btn-primary" onclick="showAddSignalModal()">Add New Signal</button>
</div>
<table>
<thead>
<tr>
<th>Signal Name</th>
<th>Protocol Type</th>
<th>Tags</th>
<th>Protocol Address</th>
<th>Database Source</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="protocol-signals-body">
<!-- Signals will be populated by JavaScript -->
</tbody>
</table>
</div>
</div>
<!-- Add/Edit Signal Modal -->
<div id="signal-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="modal-title">Add Protocol Signal</h2>
<span class="close" onclick="closeSignalModal()">&times;</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 class="form-help">Human-readable name for this signal (e.g., "Main Pump Speed")</div>
</div>
<div class="form-group">
<label for="tags">Tags</label>
<input type="text" id="tags" name="tags" placeholder="equipment:pump, protocol:modbus_tcp, data_point:speed">
<div class="form-help">Comma-separated tags for categorization and filtering</div>
</div>
<div class="form-group">
<label for="protocol_type">Protocol Type *</label>
<select id="protocol_type" name="protocol_type" required onchange="updateProtocolFields()">
<option value="">Select Protocol Type</option>
<option value="modbus_tcp">Modbus TCP</option>
<option value="modbus_rtu">Modbus RTU</option>
<option value="opcua">OPC UA</option>
<option value="rest_api">REST API</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 class="form-help" id="protocol-address-help"></div>
</div>
<div class="form-group">
<label for="db_source">Database Source *</label>
<input type="text" id="db_source" name="db_source" required>
<div class="form-help">Database table and column name (e.g., measurements.pump_speed)</div>
</div>
<div class="form-group">
<label>
<input type="checkbox" id="preprocessing_enabled" name="preprocessing_enabled">
Enable Signal Preprocessing
</label>
</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>
<!-- JavaScript -->
<script src="/static/simplified_protocol_mapping.js?v=3"></script>
<script src="/static/discovery.js?v=29"></script>
</body>
</html>