106 lines
5.3 KiB
HTML
106 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Sensor Konfiguration</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<div class="header-content">
|
||
<div class="logo">
|
||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<rect width="40" height="40" rx="8" fill="#667eea"/>
|
||
<path d="M12 20L18 26L28 14" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
<span class="logo-text">Sensor Manager</span>
|
||
</div>
|
||
<nav class="nav">
|
||
<a href="/table/modbus_input_register" class="nav-link {% if active_page == 'modbus_input_register' %}active{% endif %}">Input Register</a>
|
||
<a href="/table/modbus_holding_register" class="nav-link {% if active_page == 'modbus_holding_register' %}active{% endif %}">Holding Register</a>
|
||
<a href="/table/modbus_coils" class="nav-link {% if active_page == 'modbus_coils' %}active{% endif %}">Coils</a>
|
||
<a href="/settings" class="nav-link {% if active_page == 'settings' %}active{% endif %}">⚙️ Einstellungen</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="container">
|
||
<h1>🔧 Sensor Konfiguration - {{ table_id | upper }}</h1>
|
||
<div id="message" class="message"></div>
|
||
<div class="table-wrapper">
|
||
<table id="sensorTable">
|
||
<thead>
|
||
<tr>
|
||
<th>Bezeichnung</th>
|
||
<th>Wert</th>
|
||
<th>Adresse</th>
|
||
{% if table_id == "modbus_coils" %}
|
||
<th>Write</th>
|
||
{% else %}
|
||
<th>Type</th>
|
||
<th>Faktor</th>
|
||
{% endif %}
|
||
<th>MQTT</th>
|
||
<th>InfluxDB</th>
|
||
{% if table_id == "modbus_coils" %}
|
||
<th>Kommentar</th>
|
||
{% endif %}
|
||
<th>Aktionen</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tableBody">
|
||
{% for entry in rows %}
|
||
{% for key, row in entry %}
|
||
<tr data-row="{{ loop.index0 }}">
|
||
<td><input type='text' class='text-input' data-field='key' value='{{ key }}' /></td>
|
||
<td>{{ value_map[key] | default(value="-") }}</td>
|
||
<td><input type='number' class='text-input' data-field='addr' value='{{ row.addr }}' /></td>
|
||
{% if table_id == "modbus_coils" %}
|
||
<td>
|
||
<label class='switch'>
|
||
<input type='checkbox' class='bool-input' data-field='write' {% if row.write %}checked{% endif %} />
|
||
<span class='slider'></span>
|
||
</label>
|
||
</td>
|
||
{% else %}
|
||
<td><input type='text' class='text-input' data-field='type' value='{{ row.type | default(value="") }}' /></td>
|
||
<td><input type='text' class='text-input' data-field='factor' value='{{ row.factor | default(value="") }}' /></td>
|
||
{% endif %}
|
||
<td>
|
||
<label class='switch'>
|
||
<input type='checkbox' class='bool-input' data-field='mqtt' {% if row.mqtt %}checked{% endif %} />
|
||
<span class='slider'></span>
|
||
</label>
|
||
</td>
|
||
<td>
|
||
<label class='switch'>
|
||
<input type='checkbox' class='bool-input' data-field='influxdb' {% if row.influxdb %}checked{% endif %} />
|
||
<span class='slider'></span>
|
||
</label>
|
||
</td>
|
||
{% if table_id == "modbus_coils" %}
|
||
<td><input type='text' class='text-input' data-field='comment' value='{{ row.comment | default(value="") }}' /></td>
|
||
{% endif %}
|
||
<td>
|
||
<button class="delete-btn" onclick="deleteRow(this)">🗑️</button>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="button-group">
|
||
<button class="add-btn" onclick="addRow()">➕ Zeile hinzufügen</button>
|
||
<button class="save-btn" onclick="saveTable()">💾 Speichern</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const tableId = "{{ table_id }}";
|
||
</script>
|
||
<script src="/static/script.js"></script>
|
||
</body>
|
||
</html>
|