tcp-serial-relay
Version:
Modular TCP to Serial relay service with comprehensive logging, monitoring and web dashboard
182 lines (171 loc) • 6.18 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TCP-Serial Relay Dashboard</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>TCP-Serial Relay Dashboard</h1>
<div id="status-indicator" class="status-unknown">Unknown</div>
</header>
<nav>
<ul>
<li><a href="#" data-tab="status" class="active">Status</a></li>
<li><a href="#" data-tab="config">Configuration</a></li>
<li><a href="#" data-tab="logs">Logs</a></li>
</ul>
</nav>
<main>
<!-- Status Tab -->
<section id="status-tab" class="tab-content active">
<h2>System Status</h2>
<div class="status-cards">
<div class="status-card">
<h3>TCP Connection</h3>
<div id="tcp-status" class="status-indicator">Unknown</div>
</div>
<div class="status-card">
<h3>Serial Connection</h3>
<div id="serial-status" class="status-indicator">Unknown</div>
</div>
</div>
<h2>System Metrics</h2>
<div class="metrics">
<div class="metric">
<h3>CPU Usage</h3>
<div id="cpu-usage">0%</div>
</div>
<div class="metric">
<h3>Memory Usage</h3>
<div id="memory-usage">0%</div>
</div>
<div class="metric">
<h3>Uptime</h3>
<div id="uptime">0s</div>
</div>
</div>
<h2>Service Control</h2>
<div class="service-control">
<button id="start-service">Start Service</button>
<button id="stop-service">Stop Service</button>
<button id="restart-service">Restart Service</button>
</div>
</section>
<!-- Configuration Tab -->
<section id="config-tab" class="tab-content">
<h2>Configuration</h2>
<form id="config-form">
<div class="config-section">
<h3>TCP Settings</h3>
<div class="form-group">
<label for="tcpIp">TCP IP Address</label>
<input type="text" id="tcpIp" name="tcpIp">
</div>
<div class="form-group">
<label for="tcpPort">TCP Port</label>
<input type="number" id="tcpPort" name="tcpPort">
</div>
</div>
<div class="config-section">
<h3>Serial Settings</h3>
<div class="form-group">
<label for="serialPath">Serial Path</label>
<input type="text" id="serialPath" name="serialPath">
</div>
<div class="form-group">
<label for="serialBaud">Baud Rate</label>
<input type="number" id="serialBaud" name="serialBaud">
</div>
<div class="form-group">
<label for="serialParity">Parity</label>
<select id="serialParity" name="serialParity">
<option value="none">None</option>
<option value="even">Even</option>
<option value="odd">Odd</option>
</select>
</div>
<div class="form-group">
<label for="serialDataBits">Data Bits</label>
<input type="number" id="serialDataBits" name="serialDataBits" min="5" max="8">
</div>
<div class="form-group">
<label for="serialStopBits">Stop Bits</label>
<input type="number" id="serialStopBits" name="serialStopBits" min="1" max="2">
</div>
</div>
<div class="config-section">
<h3>Advanced Settings</h3>
<div class="form-group">
<label for="maxRetries">Max Retries</label>
<input type="number" id="maxRetries" name="maxRetries">
</div>
<div class="form-group">
<label for="retryDelay">Retry Delay (ms)</label>
<input type="number" id="retryDelay" name="retryDelay">
</div>
<div class="form-group">
<label for="connectionTimeout">Connection Timeout (ms)</label>
<input type="number" id="connectionTimeout" name="connectionTimeout">
</div>
<div class="form-group">
<label for="relayTimeout">Relay Timeout (ms)</label>
<input type="number" id="relayTimeout" name="relayTimeout">
</div>
<div class="form-group">
<label for="logDataTransfers">Log Data Transfers</label>
<input type="checkbox" id="logDataTransfers" name="logDataTransfers">
</div>
<div class="form-group">
<label for="logLevel">Log Level</label>
<select id="logLevel" name="logLevel">
<option value="error">Error</option>
<option value="warn">Warning</option>
<option value="info">Info</option>
<option value="debug">Debug</option>
</select>
</div>
</div>
<div class="form-actions">
<button type="submit" id="save-config">Save Configuration</button>
<button type="button" id="reset-config">Reset</button>
</div>
</form>
</section>
<!-- Logs Tab -->
<section id="logs-tab" class="tab-content">
<h2>System Logs</h2>
<div class="log-controls">
<label for="log-lines">Lines to show:</label>
<select id="log-lines">
<option value="10">10</option>
<option value="50" selected>50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<button id="refresh-logs">Refresh</button>
</div>
<div class="log-container">
<table id="log-table">
<thead>
<tr>
<th>Timestamp</th>
<th>Level</th>
<th>Message</th>
</tr>
</thead>
<tbody id="log-entries">
<!-- Log entries will be added here dynamically -->
</tbody>
</table>
</div>
</section>
</main>
<footer>
<p>TCP-Serial Relay Dashboard © 2025</p>
</footer>
<script src="main.js"></script>
</body>
</html>