jetzt mit Header, 3 Tabellen

This commit is contained in:
Eric Neuber committed 2025-11-20 20:12:25 +01:00
1 parent f2417ec65d
commit 220161a70a
10 files changed
+636 -102

No files matched your search

+39 -11
View File
@@ -7,11 +7,29 @@
<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="/" class="nav-link {% if active_page == 'table1' %}active{% endif %}">Tabelle 1</a>
<a href="/table/table2" class="nav-link {% if active_page == 'table2' %}active{% endif %}">Tabelle 2</a>
<a href="/table/table3" class="nav-link {% if active_page == 'table3' %}active{% endif %}">Tabelle 3</a>
<a href="/settings" class="nav-link {% if active_page == 'settings' %}active{% endif %}">⚙️ Einstellungen</a>
</nav>
</div>
</header>
<div class="container">
<h1>🔧 Sensor Konfiguration</h1>
<h1>🔧 Sensor Konfiguration - {{ table_id | upper }}</h1>
<div id="message" class="message"></div>
<div class="table-wrapper">
<table>
<table id="sensorTable">
<thead>
<tr>
<th>Bezeichnung</th>
@@ -20,35 +38,45 @@
<th>Faktor</th>
<th>MQTT</th>
<th>InfluxDB</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
<tbody id="tableBody">
{% for row in rows %}
<tr>
<td><input type='text' class='text-input' data-row='{{ loop.index0 }}' data-field='bezeichnung' value='{{ row.bezeichnung }}' /></td>
<td><input type='text' class='text-input' data-row='{{ loop.index0 }}' data-field='adresse' value='{{ row.adresse }}' /></td>
<td><input type='text' class='text-input' data-row='{{ loop.index0 }}' data-field='type' value='{{ row.type }}' /></td>
<td><input type='text' class='text-input' data-row='{{ loop.index0 }}' data-field='faktor' value='{{ row.faktor }}' /></td>
<tr data-row="{{ loop.index0 }}">
<td><input type='text' class='text-input' data-field='bezeichnung' value='{{ row.bezeichnung }}' /></td>
<td><input type='text' class='text-input' data-field='adresse' value='{{ row.adresse }}' /></td>
<td><input type='text' class='text-input' data-field='type' value='{{ row.type }}' /></td>
<td><input type='text' class='text-input' data-field='faktor' value='{{ row.faktor }}' /></td>
<td>
<label class='switch'>
<input type='checkbox' class='bool-input' data-row='{{ loop.index0 }}' data-field='mqtt' {% if row.mqtt %}checked{% endif %} />
<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-row='{{ loop.index0 }}' data-field='influxdb' {% if row.influxdb %}checked{% endif %} />
<input type='checkbox' class='bool-input' data-field='influxdb' {% if row.influxdb %}checked{% endif %} />
<span class='slider'></span>
</label>
</td>
<td>
<button class="delete-btn" onclick="deleteRow(this)">🗑️</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<button class="save-btn" onclick="saveTable()">💾 Speichern</button>
<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>
+61
View File
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Einstellungen</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="/" class="nav-link {% if active_page == 'table1' %}active{% endif %}">Tabelle 1</a>
<a href="/table/table2" class="nav-link {% if active_page == 'table2' %}active{% endif %}">Tabelle 2</a>
<a href="/table/table3" class="nav-link {% if active_page == 'table3' %}active{% endif %}">Tabelle 3</a>
<a href="/settings" class="nav-link {% if active_page == 'settings' %}active{% endif %}">⚙️ Einstellungen</a>
</nav>
</div>
</header>
<div class="container">
<h1>⚙️ Einstellungen</h1>
<div id="message" class="message"></div>
<div class="settings-section">
<h2>MQTT Konfiguration</h2>
<div class="form-group">
<label for="mqtt_broker">MQTT Broker:</label>
<input type="text" id="mqtt_broker" class="text-input" value="{{ settings.mqtt_broker }}" />
</div>
<div class="form-group">
<label for="mqtt_port">MQTT Port:</label>
<input type="text" id="mqtt_port" class="text-input" value="{{ settings.mqtt_port }}" />
</div>
</div>
<div class="settings-section">
<h2>InfluxDB Konfiguration</h2>
<div class="form-group">
<label for="influxdb_url">InfluxDB URL:</label>
<input type="text" id="influxdb_url" class="text-input" value="{{ settings.influxdb_url }}" />
</div>
<div class="form-group">
<label for="influxdb_token">InfluxDB Token:</label>
<input type="password" id="influxdb_token" class="text-input" value="{{ settings.influxdb_token }}" />
</div>
</div>
<button class="save-btn" onclick="saveSettings()">💾 Einstellungen speichern</button>
</div>
<script src="/static/settings.js"></script>
</body>
</html>