eneuber/paramod-rust
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

jetzt mit Header, 3 Tabellen

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/script.js
+59 -10
View File
@@ -1,14 +1,60 @@
function addRow() {
const tableBody = document.getElementById('tableBody');
const rowCount = tableBody.querySelectorAll('tr').length;
const newRow = document.createElement('tr');
newRow.setAttribute('data-row', rowCount);
newRow.innerHTML = `
<td><input type='text' class='text-input' data-field='bezeichnung' value='' /></td>
<td><input type='text' class='text-input' data-field='adresse' value='' /></td>
<td><input type='text' class='text-input' data-field='type' value='' /></td>
<td><input type='text' class='text-input' data-field='faktor' value='1.0' /></td>
<td>
<label class='switch'>
<input type='checkbox' class='bool-input' data-field='mqtt' />
<span class='slider'></span>
</label>
</td>
<td>
<label class='switch'>
<input type='checkbox' class='bool-input' data-field='influxdb' />
<span class='slider'></span>
</label>
</td>
<td>
<button class="delete-btn" onclick="deleteRow(this)">🗑️</button>
</td>
`;
tableBody.appendChild(newRow);
}
function deleteRow(button) {
const row = button.closest('tr');
if (confirm('Möchten Sie diese Zeile wirklich löschen?')) {
row.remove();
updateRowIndices();
}
}
function updateRowIndices() {
const rows = document.querySelectorAll('#tableBody tr');
rows.forEach((row, index) => {
row.setAttribute('data-row', index);
});
}
async function saveTable() {
const rows = [];
const rowCount = document.querySelectorAll('tbody tr').length;
const tableRows = document.querySelectorAll('#tableBody tr');
for (let i = 0; i < rowCount; i++) {
const bezeichnung = document.querySelector(`input[data-row='${i}'][data-field='bezeichnung']`).value;
const adresse = document.querySelector(`input[data-row='${i}'][data-field='adresse']`).value;
const type = document.querySelector(`input[data-row='${i}'][data-field='type']`).value;
const faktor = document.querySelector(`input[data-row='${i}'][data-field='faktor']`).value;
const mqtt = document.querySelector(`input[data-row='${i}'][data-field='mqtt']`).checked;
const influxdb = document.querySelector(`input[data-row='${i}'][data-field='influxdb']`).checked;
tableRows.forEach((row) => {
const bezeichnung = row.querySelector("input[data-field='bezeichnung']").value;
const adresse = row.querySelector("input[data-field='adresse']").value;
const type = row.querySelector("input[data-field='type']").value;
const faktor = row.querySelector("input[data-field='faktor']").value;
const mqtt = row.querySelector("input[data-field='mqtt']").checked;
const influxdb = row.querySelector("input[data-field='influxdb']").checked;
rows.push({
bezeichnung,
@@ -18,7 +64,7 @@ async function saveTable() {
mqtt,
influxdb
});
}
});
try {
const response = await fetch('/api/save', {
@@ -26,7 +72,10 @@ async function saveTable() {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ rows: rows })
body: JSON.stringify({
table_id: tableId,
rows: rows
})
});
const messageDiv = document.getElementById('message');
static/settings.js
+40
View File
@@ -0,0 +1,40 @@
async function saveSettings() {
const mqtt_broker = document.getElementById('mqtt_broker').value;
const mqtt_port = document.getElementById('mqtt_port').value;
const influxdb_url = document.getElementById('influxdb_url').value;
const influxdb_token = document.getElementById('influxdb_token').value;
const settings = {
mqtt_broker,
mqtt_port,
influxdb_url,
influxdb_token
};
try {
const response = await fetch('/api/save-settings', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(settings)
});
const messageDiv = document.getElementById('message');
if (response.ok) {
messageDiv.className = 'message success';
messageDiv.textContent = '✓ Einstellungen erfolgreich gespeichert!';
} else {
messageDiv.className = 'message error';
messageDiv.textContent = '✗ Fehler beim Speichern der Einstellungen!';
}
setTimeout(() => {
messageDiv.style.display = 'none';
}, 3000);
} catch (error) {
const messageDiv = document.getElementById('message');
messageDiv.className = 'message error';
messageDiv.textContent = '✗ Verbindungsfehler!';
}
}
static/style.css
+163 -16
View File
@@ -1,16 +1,79 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1200px;
margin: 30px auto;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding-top: 80px;
}
/* Header Styles */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 1000;
}
.header-content {
max-width: 1400px;
margin: 0 auto;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-text {
font-size: 20px;
font-weight: 700;
color: #333;
}
.nav {
display: flex;
gap: 5px;
}
.nav-link {
padding: 10px 20px;
text-decoration: none;
color: #666;
border-radius: 6px;
transition: all 0.3s;
font-weight: 500;
}
.nav-link:hover {
background-color: #f0f0f0;
color: #333;
}
.nav-link.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
/* Container */
.container {
max-width: 1400px;
margin: 30px auto;
padding: 30px;
background-color: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
@@ -21,8 +84,18 @@ h1 {
font-size: 28px;
}
h2 {
color: #333;
margin-bottom: 20px;
font-size: 20px;
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
}
/* Table Styles */
.table-wrapper {
overflow-x: auto;
margin-bottom: 20px;
}
table {
@@ -64,7 +137,7 @@ tr:hover {
border-color: #667eea;
}
/* Toggle Switch Styles */
/* Toggle Switch */
.switch {
position: relative;
display: inline-block;
@@ -114,11 +187,16 @@ input:checked + .slider:before {
transform: translateX(26px);
}
.save-btn {
display: block;
width: 200px;
margin: 30px auto 0;
padding: 14px;
/* Buttons */
.button-group {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 20px;
}
.save-btn, .add-btn {
padding: 14px 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
@@ -129,15 +207,35 @@ input:checked + .slider:before {
transition: transform 0.2s, box-shadow 0.2s;
}
.save-btn:hover {
.save-btn:hover, .add-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
.save-btn:active {
.save-btn:active, .add-btn:active {
transform: translateY(0);
}
.add-btn {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}
.delete-btn {
padding: 8px 12px;
background-color: #f44336;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.delete-btn:hover {
background-color: #da190b;
}
/* Messages */
.message {
text-align: center;
padding: 12px;
@@ -160,3 +258,52 @@ input:checked + .slider:before {
border: 1px solid #f5c6cb;
display: block;
}
/* Settings Page */
.settings-section {
margin-bottom: 40px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 500;
}
.form-group .text-input {
max-width: 600px;
}
/* Responsive */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 15px;
}
.nav {
flex-wrap: wrap;
justify-content: center;
}
.container {
padding: 15px;
margin: 15px;
}
.button-group {
flex-direction: column;
}
.save-btn, .add-btn {
width: 100%;
}
}