233 lines
9.7 KiB
HTML
233 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Nährwertberechnungs-App</title>
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
|
|
<link rel="shortcut icon" href="../static/images/favicon.ico">
|
|
|
|
<script>
|
|
|
|
// JavaScript-Funktion, um die Produkte beim Laden der Seite zu holen
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
cleanUpLocalStorage();
|
|
restoreTableFromLocalStorage();
|
|
updateTotalNutrition();
|
|
fetch('/get_products')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const productList = document.getElementById('products');
|
|
data.products.forEach(product => {
|
|
const option = document.createElement('option');
|
|
option.value = product;
|
|
productList.appendChild(option);
|
|
});
|
|
});
|
|
|
|
const table = document.getElementById('nutrition-table');
|
|
table.addEventListener('click', function(e) {
|
|
if (e.target.tagName === 'TD') {
|
|
// Toggle der Auswahlklasse
|
|
e.target.parentNode.classList.toggle('selected');
|
|
updateRemoveButtonState();
|
|
}
|
|
});
|
|
});
|
|
|
|
function restoreTableFromLocalStorage() {
|
|
let entries = JSON.parse(localStorage.getItem('nutritionEntries')) || [];
|
|
let oneHourAgo = new Date().getTime() - (60 * 60 * 1000);
|
|
|
|
entries = entries.filter(entry => entry.timestamp > oneHourAgo); // Entfernen alter Einträge
|
|
entries.forEach(entry => {
|
|
addToTable(entry.food, entry.weight, entry.nutritionData);
|
|
});
|
|
|
|
localStorage.setItem('nutritionEntries', JSON.stringify(entries)); // Aktualisiere localStorage
|
|
}
|
|
|
|
|
|
function addToTable(food, weight, nutritionData) {
|
|
const table = document.getElementById('nutrition-table');
|
|
const row = table.insertRow();
|
|
|
|
row.insertCell(0).innerHTML = food;
|
|
row.insertCell(1).innerHTML = weight;
|
|
row.insertCell(2).innerHTML = nutritionData.kcal;
|
|
row.insertCell(3).innerHTML = nutritionData.ew;
|
|
row.insertCell(4).innerHTML = nutritionData.fett;
|
|
row.insertCell(5).innerHTML = nutritionData.kh;
|
|
row.insertCell(6).innerHTML = nutritionData.bst;
|
|
row.insertCell(7).innerHTML = nutritionData.ca;
|
|
}
|
|
|
|
|
|
function cleanUpLocalStorage() {
|
|
let entries = JSON.parse(localStorage.getItem('nutritionEntries')) || [];
|
|
let oneHourAgo = new Date().getTime() - (60 * 60 * 1000);
|
|
entries = entries.filter(entry => entry.timestamp > oneHourAgo);
|
|
localStorage.setItem('nutritionEntries', JSON.stringify(entries));
|
|
}
|
|
|
|
|
|
function updateRemoveButtonState() {
|
|
const selectedRows = document.querySelectorAll('#nutrition-table .selected').length;
|
|
document.getElementById('remove-button').disabled = selectedRows === 0;
|
|
}
|
|
|
|
function removeSelectedRow() {
|
|
const table = document.getElementById('nutrition-table');
|
|
Array.from(table.rows).forEach(row => {
|
|
if (row.classList.contains('selected')) {
|
|
let rowData = {
|
|
food: row.cells[0].innerText,
|
|
weight: row.cells[1].innerText,
|
|
// Weitere Daten bei Bedarf
|
|
};
|
|
|
|
// Entfernen des Eintrags aus dem lokalen Speicher
|
|
removeEntryFromLocalStorage(rowData);
|
|
|
|
table.deleteRow(row.rowIndex);
|
|
}
|
|
});
|
|
updateRemoveButtonState();
|
|
updateTotalNutrition();
|
|
}
|
|
|
|
function removeEntryFromLocalStorage(rowData) {
|
|
let entries = JSON.parse(localStorage.getItem('nutritionEntries')) || [];
|
|
entries = entries.filter(entry => entry.food !== rowData.food || entry.weight !== rowData.weight);
|
|
localStorage.setItem('nutritionEntries', JSON.stringify(entries));
|
|
}
|
|
|
|
function updateRemoveButtonState() {
|
|
const selectedRows = document.querySelectorAll('#nutrition-table .selected').length;
|
|
document.getElementById('remove-button').disabled = selectedRows === 0;
|
|
}
|
|
|
|
// JavaScript-Funktionen
|
|
function updateButtonState() {
|
|
const food = document.getElementById('my_combobox').value;
|
|
const weight = document.getElementById('weight').value;
|
|
document.getElementById('submit-button').disabled = !(food && weight);
|
|
}
|
|
|
|
function addProduct() {
|
|
const foodInput = document.getElementById('my_combobox');
|
|
const weightInput = document.getElementById('weight');
|
|
const food = foodInput.value;
|
|
const weight = weightInput.value;
|
|
|
|
|
|
fetch(`/add_lm?food=${encodeURIComponent(food)}&weight=${encodeURIComponent(weight)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const table = document.getElementById('nutrition-table');
|
|
const row = table.insertRow();
|
|
// Fügt die einzelnen Nährwerte zur neuen Zeile hinzu
|
|
row.insertCell(0).innerHTML = food;
|
|
row.insertCell(1).innerHTML = weight;
|
|
row.insertCell(2).innerHTML = data.kcal;
|
|
row.insertCell(3).innerHTML = data.ew;
|
|
row.insertCell(4).innerHTML = data.fett;
|
|
row.insertCell(5).innerHTML = data.kh;
|
|
row.insertCell(6).innerHTML = data.bst;
|
|
row.insertCell(7).innerHTML = data.ca;
|
|
|
|
foodInput.value = ''; // Zurücksetzen des Lebensmittel-Eingabefeldes
|
|
weightInput.value = ''; // Zurücksetzen des Gewicht-Eingabefeldes
|
|
document.getElementById('submit-button').disabled = true; // Deaktivieren des Hinzufügen-Buttons
|
|
|
|
updateTotalNutrition();
|
|
saveToLocalStorage(food, weight, data);
|
|
})
|
|
.catch(error => console.error('Fehler:', error));
|
|
}
|
|
|
|
function saveToLocalStorage(food, weight, nutritionData) {
|
|
let entries = JSON.parse(localStorage.getItem('nutritionEntries')) || [];
|
|
entries.push({ food, weight, nutritionData, timestamp: new Date().getTime() });
|
|
localStorage.setItem('nutritionEntries', JSON.stringify(entries));
|
|
}
|
|
|
|
function updateTotalNutrition() {
|
|
let totalWeight = 0, totalKcal = 0, totalEw = 0, totalFett = 0, totalKh = 0, totalBst = 0, totalCa = 0;
|
|
|
|
// Durchlaufen aller Zeilen in der Haupttabelle und Addition der Werte
|
|
Array.from(document.getElementById('nutrition-table').rows).slice(1).forEach(row => {
|
|
totalKcal += parseFloat(row.cells[2].innerText);
|
|
totalEw += parseFloat(row.cells[3].innerText);
|
|
totalFett += parseFloat(row.cells[4].innerText);
|
|
totalKh += parseFloat(row.cells[5].innerText);
|
|
totalBst += parseFloat(row.cells[6].innerText);
|
|
totalCa += parseFloat(row.cells[7].innerText);
|
|
});
|
|
|
|
// Rundung und Aktualisierung der Gesamtwerte
|
|
document.getElementById('total-kcal').innerText = Math.round(totalKcal);
|
|
document.getElementById('total-ew').innerText = totalEw.toFixed(1);
|
|
document.getElementById('total-fett').innerText = totalFett.toFixed(1);
|
|
document.getElementById('total-kh').innerText = totalKh.toFixed(1);
|
|
document.getElementById('total-bst').innerText = totalBst.toFixed(1);
|
|
document.getElementById('total-ca').innerText = Math.round(totalCa);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<nav id="navbar">
|
|
<h1>Elos Rezept Rechner</h1>
|
|
<ul>
|
|
<li><a href="/" class="active">Rechner</a></li>
|
|
<li><a href="/nutrition">Neue Lebensmittel</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
<div class="content">
|
|
<form onsubmit="event.preventDefault(); addProduct();" id="product-form">
|
|
<label for="my_combobox">Wählen Sie ein Lebensmittel</label>
|
|
<input list="products" name="my_combobox" id="my_combobox" placeholder="Lebensmittel" oninput="updateButtonState()" autocomplete="off">
|
|
<datalist id="products">
|
|
<!-- Produkte werden hier dynamisch eingefügt -->
|
|
</datalist>
|
|
<input type="number" id="weight" name="weight" placeholder="Gramm" oninput="updateButtonState()">
|
|
<button type="submit" id="submit-button" disabled>Hinzufügen</button>
|
|
</form>
|
|
|
|
<table id="nutrition-table">
|
|
<tr>
|
|
<th>Lebensmittel</th>
|
|
<th>Gewicht (g)</th>
|
|
<th>kcal</th>
|
|
<th>EW</th>
|
|
<th>Fett</th>
|
|
<th>KH</th>
|
|
<th>BST</th>
|
|
<th>CA</th>
|
|
</tr>
|
|
<!-- Zeilen werden hier dynamisch hinzugefügt -->
|
|
</table>
|
|
<button id="remove-button" onclick="removeSelectedRow()" disabled>Entfernen</button>
|
|
<table id="total-nutrition-table">
|
|
<tr>
|
|
<th>kcal</th>
|
|
<th>EW</th>
|
|
<th>Fett</th>
|
|
<th>KH</th>
|
|
<th>BST</th>
|
|
<th>CA</th>
|
|
</tr>
|
|
<tr>
|
|
<td id="total-kcal">0</td>
|
|
<td id="total-ew">0</td>
|
|
<td id="total-fett">0</td>
|
|
<td id="total-kh">0</td>
|
|
<td id="total-bst">0</td>
|
|
<td id="total-ca">0</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html> |