Files
gateway_plc/gateway/templates/status.html

126 lines
5.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PLC Gateway Status</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
h1 { color: #2c3e50; }
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
.status-connected { color: green; font-weight: bold; }
.status-disconnected { color: red; }
.status-never-connected { color: orange; }
.plc-connected { background-color: #d4edda; }
.plc-disconnected { background-color: #f8d7da; }
.plc-never-connected { background-color: #fff3cd; }
.api-section { margin-top: 30px; }
.api-endpoint { background-color: #f9f9f9; padding: 10px; margin: 5px 0; border-radius: 4px; }
.config-link { margin-top: 20px; padding: 10px; background-color: #e9f7fe; border-radius: 4px; }
.footer { margin-top: 40px; padding-top: 10px; border-top: 1px solid #ddd; color: #777; }
.doc-link { margin-top: 10px; padding: 10px; background-color: #e9f7fe; border-radius: 4px; }
</style>
</head>
<body>
<h1>PLC Gateway Status</h1>
<p>Gateway running since: {{ start_time }}</p>
{% for plc_name, areas in summary.items() %}
{% set plc_status = plc_statuses.get(plc_name, "unknown") %}
{% set plc_class = {
'connected': 'plc-connected',
'disconnected': 'plc-disconnected'
}.get(plc_status, 'plc-never-connected') %}
<h2 class="{{plc_class}}">PLC:{{plc_name}} (Status: {{plc_status}})</h2>
<table>
<tr>
<th>Area Name</th>
<th>Type</th>
<th>Size (bytes)</th>
<th>Status</th>
<th>PLC Connection</th>
<th>Last Update</th>
</tr>
{% for area_name, area in areas.items() %}
{% set status_class = {
'connected': 'status-connected',
'disconnected': 'status-disconnected',
'never_connected': 'status-never-connected'
}.get(area.status, 'status-disconnected') %}
{% set status_text = {
'connected': 'Connected',
'disconnected': 'Disconnected',
'never_connected': 'Never connected'
}.get(area.status, area.status) %}
<tr>
<td>{{area_name}}</td>
<td>{{area['type']}}</td>
<td>{{area['size']}}</td>
<td class="{{status_class}}">{{status_text}}</td>
<td>{{area['plc_connection_status']}}</td>
<td>{{area['last_update']}}</td>
</tr>
{% endfor %}
</table>
{% endfor %}
<div class="api-section">
<h2>API Endpoints</h2>
<div class="api-endpoint">
<strong>Single Read:</strong> GET /api/read/&lt;plc_name&gt;/&lt;area_name&gt;/&lt;offset&gt;/&lt;length&gt;<br>
Example: /api/read/PLC1/DB100_Read/10/4
</div>
<div class="api-endpoint">
<strong>Single Write:</strong> POST /api/write/&lt;plc_name&gt;/&lt;area_name&gt;/&lt;offset&gt;<br>
Body: Raw binary data<br>
Example: POST /api/write/PLC1/DB100_Write/10 with 4 bytes of data
</div>
<div class="api-endpoint">
<strong>Single Read_Bool:</strong> GET /api/read_bool/&lt;plc_name&gt;/&lt;area_name&gt;/&lt;offset&gt;/&lt;length&gt;<br>
Example: /api/read_bool/PLC1/DB100_Read/0/2
</div>
<div class="api-endpoint">
<strong>Single Write_Bool:</strong> POST /api/write_bool/&lt;plc_name&gt;/&lt;area_name&gt;/&lt;offset&gt;<br>
Body: Raw binary data<br>
Example: POST /api/write_bool/PLC1/DB100_Write/0
</div>
<div class="api-endpoint">
<strong>Batch Read:</strong> POST /api/batch_read<br>
Body: JSON array of read requests<br>
Example: [{"plc_name":"PLC1", "area_name":"DB100_Read", "offset":0, "length":4}]
</div>
<div class="api-endpoint">
<strong>Batch Write:</strong> POST /api/batch_write<br>
Body: JSON array of write requests<br>
Example: [{"plc_name":"PLC1", "area_name":"DB100_Write", "offset":0, "data":[1,2,3,4]}]
</div>
<div class="api-endpoint">
<strong>Configuration:</strong> GET/POST /api/config<br>
Manage gateway configuration
</div>
</div>
<div class="doc-link">
<h2>API Documentation</h2>
<p><a href="/api/doc">View detailed API documentation</a> - Full description of all API endpoints</p>
</div>
<div class="config-link">
<h2>Configuration</h2>
<p><a href="/config">Edit configuration</a> - Modify PLC connections and data areas</p>
</div>
<div class="footer">
<p>PLC Gateway v1.0 | <a href="/api/status">System Status</a></p>
</div>
</body>
</html>