373 lines
15 KiB
HTML
373 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Elo's Rezept Rechner</title>
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
|
|
<link rel="shortcut icon" href="../static/images/favicon.ico">
|
|
|
|
<script>
|
|
function updateSubmitButtonState() {
|
|
const inputs = document.querySelectorAll('#nutrition-form input');
|
|
const allFilled = Array.from(inputs).every(input => input.value.trim() !== '');
|
|
document.getElementById('submit-button').disabled = !allFilled;
|
|
}
|
|
|
|
function getBearerToken(callback) {
|
|
fetch('/get_token')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
callback(data.token);
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler beim Abrufen des Tokens:', error);
|
|
});
|
|
}
|
|
|
|
function addNutritionEntry() {
|
|
getBearerToken(token => {
|
|
const form = document.getElementById('nutrition-form');
|
|
const formData = new FormData(form);
|
|
|
|
fetch('/add_nutrition', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': 'Bearer ' + token
|
|
},
|
|
body: formData
|
|
}).then(response => {
|
|
// Behandlung der Serverantwort
|
|
// Beispielsweise das Formular zurücksetzen
|
|
form.reset();
|
|
updateSubmitButtonState();
|
|
loadDatabaseEntries();
|
|
}).catch(error => {
|
|
console.error('Fehler:', error);
|
|
});
|
|
// ... Code, um den Eintrag zur Datenbank hinzuzufügen
|
|
|
|
// Nach dem Hinzufügen, setze alle Eingabefelder zurück
|
|
document.querySelectorAll('#nutrition-form input').forEach(input => {
|
|
input.value = ''; // Setzt den Wert jedes Eingabefeldes zurück
|
|
});
|
|
|
|
// Deaktiviere den "Hinzufügen"-Button wieder
|
|
document.getElementById('submit-button').disabled = true;
|
|
});
|
|
}
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const table = document.getElementById('database-nutrition-table');
|
|
table.addEventListener('click', function(e) {
|
|
if (e.target.tagName === 'TD') {
|
|
e.target.parentNode.classList.toggle('selected');
|
|
updateDeleteButtonState();
|
|
}
|
|
});
|
|
updateDeleteButtonState();
|
|
});
|
|
|
|
function deleteSelectedRows() {
|
|
const table = document.getElementById('database-nutrition-table');
|
|
const selectedRows = Array.from(table.querySelectorAll('tr.selected'));
|
|
const foodNames = selectedRows.map(row => row.cells[0].innerText); // Annahme, der Name des Lebensmittels befindet sich in der ersten Zelle
|
|
|
|
if (foodNames.length > 0) {
|
|
// Holen des Tokens und Senden einer Anfrage an das Backend, um die Einträge zu löschen
|
|
getBearerToken(token => {
|
|
fetch('/delete_nutrition', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': 'Bearer ' + token
|
|
},
|
|
body: JSON.stringify({foodNames: foodNames})
|
|
}).then(response => {
|
|
if (response.ok) {
|
|
// Erfolgreich gelöscht, entferne Zeilen aus der Tabelle
|
|
selectedRows.forEach(row => {
|
|
table.deleteRow(row.rowIndex);
|
|
});
|
|
} else {
|
|
console.error('Fehler beim Löschen der Datenbank-Einträge');
|
|
}
|
|
}).catch(error => console.error('Fehler:', error));
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
function makeTableEditable() {
|
|
const table = document.getElementById('database-nutrition-table');
|
|
const rows = table.getElementsByTagName('tr');
|
|
for (let i = 1; i < rows.length; i++) {
|
|
const cells = rows[i].getElementsByTagName('td');
|
|
for (let j = 0; j < cells.length; j++) {
|
|
cells[j].contentEditable = "true";
|
|
}
|
|
}
|
|
}
|
|
|
|
function collectTableData() {
|
|
const table = document.getElementById('database-nutrition-table');
|
|
const rows = table.getElementsByTagName('tr');
|
|
let data = [];
|
|
for (let i = 1; i < rows.length; i++) {
|
|
const cells = rows[i].getElementsByTagName('td');
|
|
data.push({
|
|
food: cells[0].innerText,
|
|
kcal: cells[1].innerText,
|
|
ew: cells[2].innerText,
|
|
fett: cells[3].innerText,
|
|
kh: cells[4].innerText,
|
|
bst: cells[5].innerText,
|
|
ca: cells[6].innerText
|
|
});
|
|
}
|
|
return data;
|
|
}
|
|
|
|
function updateNutritionData() {
|
|
const updatedData = collectTableData();
|
|
getBearerToken(token => {
|
|
fetch('/update_nutrition', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': 'Bearer ' + token
|
|
},
|
|
body: JSON.stringify(updatedData)
|
|
}).then(response => {
|
|
if (response.ok) {
|
|
alert('Daten erfolgreich aktualisiert');
|
|
} else {
|
|
console.error('Fehler beim Aktualisieren der Daten');
|
|
}
|
|
}).catch(error => console.error('Fehler:', error));
|
|
});
|
|
}
|
|
|
|
|
|
|
|
let currentAction = '';
|
|
|
|
function showPasswordPrompt(action) {
|
|
console.log("hier")
|
|
console.log(action)
|
|
currentAction = action; // 'delete' oder 'edit'
|
|
document.getElementById('password-prompt').style.display = 'block';
|
|
document.getElementById('delete-row-button').style.display = action === 'edit' ? 'none' : 'block';
|
|
document.getElementById('edit-row-button').style.display = action === 'delete' ? 'none' : 'block';
|
|
if(action === 'edit') {
|
|
// Auswahl aufheben, falls der Bearbeiten-Button gedrückt wurde
|
|
document.querySelectorAll('#database-nutrition-table .selected').forEach(row => {
|
|
row.classList.remove('selected');
|
|
});
|
|
updateDeleteButtonState(); // Aktualisiert den Zustand des Löschen-Buttons basierend auf der aktuellen Auswahl
|
|
}
|
|
}
|
|
|
|
function hidePasswordPrompt() {
|
|
document.getElementById('password-prompt').style.display = 'none';
|
|
document.getElementById('delete-row-button').style.display = 'block';
|
|
document.getElementById('edit-row-button').style.display = 'block';
|
|
}
|
|
|
|
function toggleTableEditable(isEditable) {
|
|
const table = document.getElementById('database-nutrition-table');
|
|
const rows = table.getElementsByTagName('tr');
|
|
for (let i = 1; i < rows.length; i++) {
|
|
const cells = rows[i].getElementsByTagName('td');
|
|
for (let j = 0; j < cells.length; j++) {
|
|
cells[j].contentEditable = isEditable ? "true" : "false";
|
|
if(!isEditable) {
|
|
// Wieder Zellen auswählbar machen, wenn Bearbeitung beendet wird
|
|
cells[j].addEventListener('click', function(e) {
|
|
e.target.parentNode.classList.toggle('selected');
|
|
updateDeleteButtonState();
|
|
});
|
|
} else {
|
|
// Event-Listener entfernen, um Zellenauswahl während der Bearbeitung zu verhindern
|
|
cells[j].removeEventListener('click', function(e) {
|
|
e.target.parentNode.classList.toggle('selected');
|
|
updateDeleteButtonState();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function performActionIfPasswordCorrect() {
|
|
const password = document.getElementById('password-input').value;
|
|
if (password === 'geheim') {
|
|
hidePasswordPrompt();
|
|
if(currentAction === 'edit') {
|
|
toggleTableEditable(true); // Tabelle editierbar machen
|
|
} else if(currentAction === 'delete') {
|
|
deleteSelectedRows();
|
|
}
|
|
} else {
|
|
alert('Falsches Passwort!');
|
|
}
|
|
}
|
|
|
|
// Funktion zum Beenden der Bearbeitung und Wiederherstellen des ursprünglichen Zustands
|
|
function endEdit() {
|
|
toggleTableEditable(false); // Beendet den Bearbeitungsmodus
|
|
// Weitere Logik zum Speichern der Änderungen oder zum Verwerfen könnte hier hinzugefügt werden
|
|
}
|
|
|
|
|
|
// function showPasswordPrompt() {
|
|
// document.getElementById('delete-row-button').style.display = 'none';
|
|
// document.getElementById('password-prompt').style.display = 'block';
|
|
// }
|
|
|
|
// function hidePasswordPrompt() {
|
|
// document.getElementById('delete-row-button').style.display = 'block';
|
|
// document.getElementById('password-prompt').style.display = 'none';
|
|
// }
|
|
|
|
function deleteRowsIfPasswordCorrect() {
|
|
const password = document.getElementById('password-input').value;
|
|
if (password === 'geheim') {
|
|
deleteSelectedRows(); // Funktion, die die ausgewählten Zeilen löscht
|
|
hidePasswordPrompt();
|
|
} else {
|
|
alert('Falsches Passwort!');
|
|
}
|
|
}
|
|
|
|
function updateDeleteButtonState() {
|
|
const selectedRows = document.querySelectorAll('#database-nutrition-table .selected').length;
|
|
const deleteButton = document.getElementById('delete-row-button');
|
|
deleteButton.disabled = selectedRows === 0;
|
|
if (selectedRows === 0) {
|
|
hidePasswordPrompt(); // Versteckt die Passwort-Eingabe, falls keine Zeile ausgewählt ist
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function loadDatabaseEntries() {
|
|
fetch('/get_database_entries') // Pfad zur entsprechenden Flask-Route
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const tableBody = document.getElementById('database-nutrition-table').getElementsByTagName('tbody')[0];
|
|
tableBody.innerHTML = '';
|
|
data.forEach(entry => {
|
|
const row = tableBody.insertRow();
|
|
row.insertCell(0).innerText = entry.food;
|
|
row.insertCell(1).innerText = entry.kcal;
|
|
row.insertCell(2).innerText = entry.ew;
|
|
row.insertCell(3).innerText = entry.fett;
|
|
row.insertCell(4).innerText = entry.kh;
|
|
row.insertCell(5).innerText = entry.bst;
|
|
row.insertCell(6).innerText = entry.ca;
|
|
|
|
// ... Fügen Sie weitere Zellen für die anderen Werte hinzu ...
|
|
});
|
|
})
|
|
.catch(error => console.error('Fehler:', error));
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', loadDatabaseEntries);
|
|
|
|
function filterTable() {
|
|
const searchInput = document.getElementById('search-input');
|
|
const filterText = searchInput.value.toUpperCase();
|
|
const table = document.getElementById('database-nutrition-table');
|
|
const rows = table.getElementsByTagName('tr');
|
|
|
|
for (let i = 1; i < rows.length; i++) { // Beginnen bei 1, um die Kopfzeile auszulassen
|
|
const cell = rows[i].getElementsByTagName('td')[0]; // Angenommen, der zu suchende Text befindet sich in der ersten Spalte
|
|
if (cell) {
|
|
const textValue = cell.textContent || cell.innerText;
|
|
if (textValue.toUpperCase().indexOf(filterText) > -1) {
|
|
rows[i].style.display = ""; // Zeile anzeigen
|
|
} else {
|
|
rows[i].style.display = "none"; // Zeile verstecken
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<nav id="navbar">
|
|
<div class="navbar-header">
|
|
<h1>Elo's Rezept Rechner</h1>
|
|
<li class="versionid">VERSION_ID</li>
|
|
</div>
|
|
<ul>
|
|
<li><a href="/">Rechner</a></li>
|
|
<li><a href="/nutrition" class="active">Neue Lebensmittel</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
<div class="content">
|
|
<form onsubmit="event.preventDefault(); addNutritionEntry();" method="POST" id="nutrition-form">
|
|
<table id="nutrition-input-table">
|
|
<tr>
|
|
<th>Lebensmittel</th>
|
|
<th>kcal</th>
|
|
<th>EW</th>
|
|
<th>Fett</th>
|
|
<th>KH</th>
|
|
<th>BST</th>
|
|
<th>CA</th>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="text" name="food" placeholder="Lebensmittel" oninput="updateSubmitButtonState()"></td>
|
|
<td><input <input type="text" name="kcal" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
|
|
<td><input <input type="text" name="ew" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
|
|
<td><input <input type="text" name="fett" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
|
|
<td><input <input type="text" name="kh" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
|
|
<td><input <input type="text" name="bst" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
|
|
<td><input <input type="text" name="ca" pattern="\d+([.,]\d{1,2})?" placeholder="mg" oninput="updateSubmitButtonState()"></td>
|
|
</tr>
|
|
</table>
|
|
<button type="submit" id="submit-button" disabled>Hinzufügen</button>
|
|
</form>
|
|
|
|
<div class="search-container">
|
|
<input type="text" id="search-input" placeholder="Lebensmittel suchen..." oninput="filterTable()">
|
|
</div>
|
|
|
|
|
|
<div class="table-container">
|
|
<table id="database-nutrition-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Lebensmittel</th>
|
|
<th>kcal</th>
|
|
<th>EW</th>
|
|
<th>Fett</th>
|
|
<th>KH</th>
|
|
<th>BST</th>
|
|
<th>CA</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Die Zeilen werden dynamisch aus der Datenbank geladen -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<button id="delete-row-button" onclick="showPasswordPrompt('delete')">Zeilen löschen</button>
|
|
<button id="edit-row-button" onclick="showPasswordPrompt('edit')">Bearbeiten</button>
|
|
|
|
<div id="password-prompt" style="display: none;">
|
|
<input type="password" id="password-input" placeholder="Passwort">
|
|
<button id="ok-button" onclick="performActionIfPasswordCorrect()">OK</button>
|
|
<button id="cancel-button" onclick="hidePasswordPrompt()">Abbrechen</button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|