containerized
This commit is contained in:
182
src/templates/index.html
Normal file
182
src/templates/index.html
Normal file
@ -0,0 +1,182 @@
|
||||
<!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') }}">
|
||||
|
||||
<script>
|
||||
|
||||
// JavaScript-Funktion, um die Produkte beim Laden der Seite zu holen
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
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 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')) {
|
||||
table.deleteRow(row.rowIndex);
|
||||
}
|
||||
});
|
||||
updateRemoveButtonState();
|
||||
updateTotalNutrition();
|
||||
}
|
||||
|
||||
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();
|
||||
})
|
||||
.catch(error => console.error('Fehler:', error));
|
||||
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// Rufen Sie diese Funktion auf, wenn sich die Haupttabelle ändert
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Diese Funktion sollte aufgerufen werden, wenn ein Produkt hinzugefügt oder entfernt wird
|
||||
|
||||
|
||||
</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" 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>
|
||||
Reference in New Issue
Block a user