2025-10-30 07:22:00 +00:00
|
|
|
"""
|
|
|
|
|
Dashboard HTML templates for Calejo Control Adapter
|
|
|
|
|
"""
|
|
|
|
|
|
|
|
|
|
DASHBOARD_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 Adapter - Dashboard</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
}
|
|
|
|
|
.container {
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
background: white;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
|
|
|
}
|
|
|
|
|
.header {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
border-bottom: 2px solid #007acc;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
.status-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
|
|
gap: 15px;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
.status-card {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: #f8f9fa;
|
|
|
|
|
border-left: 4px solid #007acc;
|
|
|
|
|
}
|
|
|
|
|
.status-card.running { border-left-color: #28a745; }
|
|
|
|
|
.status-card.error { border-left-color: #dc3545; }
|
|
|
|
|
.status-card.warning { border-left-color: #ffc107; }
|
|
|
|
|
.config-section {
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
.form-group {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
label {
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
input, select {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
button {
|
|
|
|
|
background: #007acc;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
button:hover {
|
|
|
|
|
background: #005a9e;
|
|
|
|
|
}
|
|
|
|
|
.alert {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
.alert.error {
|
|
|
|
|
background: #f8d7da;
|
|
|
|
|
color: #721c24;
|
|
|
|
|
border: 1px solid #f5c6cb;
|
|
|
|
|
}
|
|
|
|
|
.alert.warning {
|
|
|
|
|
background: #fff3cd;
|
|
|
|
|
color: #856404;
|
|
|
|
|
border: 1px solid #ffeaa7;
|
|
|
|
|
}
|
|
|
|
|
.alert.success {
|
|
|
|
|
background: #d4edda;
|
|
|
|
|
color: #155724;
|
|
|
|
|
border: 1px solid #c3e6cb;
|
|
|
|
|
}
|
|
|
|
|
.tab-container {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
.tab-buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
|
}
|
|
|
|
|
.tab-button {
|
|
|
|
|
padding: 10px 20px;
|
2025-11-01 11:12:12 +00:00
|
|
|
background: #f8f9fa;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-bottom: none;
|
2025-10-30 07:22:00 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
border-bottom: 3px solid transparent;
|
2025-11-01 11:12:12 +00:00
|
|
|
color: #333;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
border-radius: 4px 4px 0 0;
|
2025-10-30 07:22:00 +00:00
|
|
|
}
|
|
|
|
|
.tab-button.active {
|
|
|
|
|
border-bottom-color: #007acc;
|
|
|
|
|
font-weight: bold;
|
2025-11-01 11:12:12 +00:00
|
|
|
background: white;
|
|
|
|
|
border-color: #ddd;
|
|
|
|
|
border-bottom-color: white;
|
|
|
|
|
}
|
|
|
|
|
.tab-button:hover {
|
|
|
|
|
background: #e9ecef;
|
2025-10-30 07:22:00 +00:00
|
|
|
}
|
|
|
|
|
.tab-content {
|
|
|
|
|
display: none;
|
|
|
|
|
padding: 20px 0;
|
|
|
|
|
}
|
|
|
|
|
.tab-content.active {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.action-buttons {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.logs-container {
|
|
|
|
|
max-height: 400px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background: #f8f9fa;
|
|
|
|
|
}
|
|
|
|
|
.log-entry {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
border-bottom: 1px solid #eee;
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
.log-entry.error {
|
|
|
|
|
color: #dc3545;
|
|
|
|
|
}
|
|
|
|
|
.log-entry.warning {
|
|
|
|
|
color: #856404;
|
|
|
|
|
}
|
|
|
|
|
.log-entry.info {
|
|
|
|
|
color: #007acc;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<h1>Calejo Control Adapter Dashboard</h1>
|
|
|
|
|
<p>Configuration and Monitoring Interface</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="tab-container">
|
|
|
|
|
<div class="tab-buttons">
|
|
|
|
|
<button class="tab-button active" onclick="showTab('status')">Status</button>
|
|
|
|
|
<button class="tab-button" onclick="showTab('config')">Configuration</button>
|
2025-11-01 11:12:12 +00:00
|
|
|
<button class="tab-button" onclick="showTab('scada')">SCADA/Hardware</button>
|
2025-10-30 07:22:00 +00:00
|
|
|
<button class="tab-button" onclick="showTab('logs')">Logs</button>
|
|
|
|
|
<button class="tab-button" onclick="showTab('actions')">Actions</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Status Tab -->
|
|
|
|
|
<div id="status-tab" class="tab-content active">
|
|
|
|
|
<h2>System Status</h2>
|
|
|
|
|
<div class="status-grid" id="status-grid">
|
|
|
|
|
<!-- Status cards will be populated by JavaScript -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="action-buttons">
|
|
|
|
|
<button onclick="refreshStatus()">Refresh Status</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Configuration Tab -->
|
|
|
|
|
<div id="config-tab" class="tab-content">
|
|
|
|
|
<h2>Configuration</h2>
|
|
|
|
|
<div id="alerts"></div>
|
|
|
|
|
|
|
|
|
|
<form id="config-form">
|
|
|
|
|
<div class="config-section">
|
|
|
|
|
<h3>Database Configuration</h3>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="db_host">Host:</label>
|
|
|
|
|
<input type="text" id="db_host" name="db_host" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="db_port">Port:</label>
|
|
|
|
|
<input type="number" id="db_port" name="db_port" min="1" max="65535" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="db_name">Database Name:</label>
|
|
|
|
|
<input type="text" id="db_name" name="db_name" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="db_user">Username:</label>
|
|
|
|
|
<input type="text" id="db_user" name="db_user" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="db_password">Password:</label>
|
|
|
|
|
<input type="password" id="db_password" name="db_password">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="config-section">
|
|
|
|
|
<h3>Protocol Configuration</h3>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" id="opcua_enabled" name="opcua_enabled">
|
|
|
|
|
Enable OPC UA Server
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="opcua_port">OPC UA Port:</label>
|
|
|
|
|
<input type="number" id="opcua_port" name="opcua_port" min="1" max="65535">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" id="modbus_enabled" name="modbus_enabled">
|
|
|
|
|
Enable Modbus Server
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="modbus_port">Modbus Port:</label>
|
|
|
|
|
<input type="number" id="modbus_port" name="modbus_port" min="1" max="65535">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="config-section">
|
|
|
|
|
<h3>REST API Configuration</h3>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="rest_api_host">Host:</label>
|
|
|
|
|
<input type="text" id="rest_api_host" name="rest_api_host">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="rest_api_port">Port:</label>
|
|
|
|
|
<input type="number" id="rest_api_port" name="rest_api_port" min="1" max="65535">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" id="rest_api_cors_enabled" name="rest_api_cors_enabled">
|
|
|
|
|
Enable CORS
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="config-section">
|
|
|
|
|
<h3>Monitoring Configuration</h3>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="health_monitor_port">Health Monitor Port:</label>
|
|
|
|
|
<input type="number" id="health_monitor_port" name="health_monitor_port" min="1" max="65535">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="action-buttons">
|
|
|
|
|
<button type="button" onclick="loadConfiguration()">Load Current</button>
|
|
|
|
|
<button type="button" onclick="saveConfiguration()">Save Configuration</button>
|
|
|
|
|
<button type="button" onclick="validateConfiguration()">Validate</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-11-01 11:12:12 +00:00
|
|
|
<!-- SCADA/Hardware Tab -->
|
|
|
|
|
<div id="scada-tab" class="tab-content">
|
|
|
|
|
<h2>SCADA/Hardware Configuration</h2>
|
|
|
|
|
<div id="scada-alerts"></div>
|
|
|
|
|
|
|
|
|
|
<div class="config-section">
|
|
|
|
|
<h3>Modbus TCP Configuration</h3>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="modbus_enabled_scada">
|
|
|
|
|
<input type="checkbox" id="modbus_enabled_scada" name="modbus_enabled_scada">
|
|
|
|
|
Enable Modbus TCP Server
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="modbus_port_scada">Modbus Port:</label>
|
|
|
|
|
<input type="number" id="modbus_port_scada" name="modbus_port_scada" min="1" max="65535" value="502">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="modbus_slave_id">Slave ID:</label>
|
|
|
|
|
<input type="number" id="modbus_slave_id" name="modbus_slave_id" min="1" max="247" value="1">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="modbus_baud_rate">Baud Rate:</label>
|
|
|
|
|
<select id="modbus_baud_rate" name="modbus_baud_rate">
|
|
|
|
|
<option value="9600">9600</option>
|
|
|
|
|
<option value="19200">19200</option>
|
|
|
|
|
<option value="38400">38400</option>
|
|
|
|
|
<option value="57600">57600</option>
|
|
|
|
|
<option value="115200" selected>115200</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="config-section">
|
|
|
|
|
<h3>OPC UA Configuration</h3>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="opcua_enabled_scada">
|
|
|
|
|
<input type="checkbox" id="opcua_enabled_scada" name="opcua_enabled_scada">
|
|
|
|
|
Enable OPC UA Server
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="opcua_port_scada">OPC UA Port:</label>
|
|
|
|
|
<input type="number" id="opcua_port_scada" name="opcua_port_scada" min="1" max="65535" value="4840">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="opcua_security_mode">Security Mode:</label>
|
|
|
|
|
<select id="opcua_security_mode" name="opcua_security_mode">
|
|
|
|
|
<option value="None">None</option>
|
|
|
|
|
<option value="Sign">Sign</option>
|
|
|
|
|
<option value="SignAndEncrypt" selected>Sign and Encrypt</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="config-section">
|
|
|
|
|
<h3>Device Mapping</h3>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="device_mapping">Device Address Mapping:</label>
|
|
|
|
|
<textarea id="device_mapping" name="device_mapping" rows="8" placeholder="Device ID,Address,Type,Description
|
|
|
|
|
1,40001,Holding Register,Temperature Sensor
|
|
|
|
|
2,40002,Holding Register,Pressure Sensor
|
|
|
|
|
3,10001,Coil,Relay Output
|
|
|
|
|
4,10002,Coil,Valve Control"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="config-section">
|
|
|
|
|
<h3>Current SCADA Status</h3>
|
|
|
|
|
<div class="status-grid" id="scada-status-grid">
|
|
|
|
|
<!-- SCADA status will be populated by JavaScript -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="action-buttons">
|
|
|
|
|
<button type="button" onclick="loadSCADAConfig()">Load Current</button>
|
|
|
|
|
<button type="button" onclick="saveSCADAConfig()">Save Configuration</button>
|
|
|
|
|
<button type="button" onclick="testSCADAConnection()">Test Connection</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-10-30 07:22:00 +00:00
|
|
|
<!-- Logs Tab -->
|
|
|
|
|
<div id="logs-tab" class="tab-content">
|
|
|
|
|
<h2>System Logs</h2>
|
|
|
|
|
<div class="logs-container" id="logs-container">
|
|
|
|
|
<!-- Logs will be populated by JavaScript -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="action-buttons">
|
|
|
|
|
<button onclick="loadLogs()">Refresh Logs</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Actions Tab -->
|
|
|
|
|
<div id="actions-tab" class="tab-content">
|
|
|
|
|
<h2>System Actions</h2>
|
|
|
|
|
<div class="config-section">
|
|
|
|
|
<h3>System Operations</h3>
|
|
|
|
|
<div class="action-buttons">
|
|
|
|
|
<button onclick="restartSystem()" style="background: #dc3545;">Restart System</button>
|
|
|
|
|
<button onclick="createBackup()" style="background: #28a745;">Create Backup</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="config-section">
|
|
|
|
|
<h3>Health Checks</h3>
|
|
|
|
|
<div class="action-buttons">
|
|
|
|
|
<button onclick="runHealthCheck()">Run Health Check</button>
|
|
|
|
|
<button onclick="viewMetrics()">View Metrics</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="/static/dashboard.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
"""
|
