diff --git a/index.html b/index.html index 1c1a996..c1d3baf 100644 --- a/index.html +++ b/index.html @@ -30,19 +30,41 @@ -
- -
- -
- Gesamt - - delete -
-
123
- kcal/g -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/main.js b/main.js index 50b3b3d..4a3ddc0 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,13 @@ const foodSearch = document.querySelector("#food-search"); const searchEntries = document.querySelector("#search-entries"); const foodMenu = document.querySelector("#food-menu"); -const summary = document.querySelector("#summary"); -const summaryKcal = document.querySelector("#summary .summary-kcal"); +const menuTable = document.querySelector("#menu-table"); + +const summaryEnergy = document.querySelector("#summary-energy"); +const summaryFat = document.querySelector("#summary-fat"); +const summaryCarbs = document.querySelector("#summary-carbs"); +const summaryProteins = document.querySelector("#summary-proteins"); + updateSummary(); initFoodList(); @@ -87,26 +92,31 @@ async function addMenuItem(food) { } const node = await JST.load("menu-item"); + const nodeRoot = node.querySelector(".menu-item"); + const itemName = node.querySelector(".menu-item-name"); + const itemKcal = node.querySelector(".menu-item-kcal"); + const itemUnit = node.querySelector(".menu-item-unit"); const itemAmount = node.querySelector(".menu-item-amount"); - const kcalAmount = node.querySelector(".menu-item-kcal-for-amount"); + const kcalAmount = node.querySelector(".menu-item-energy"); + const fatAmount = node.querySelector(".menu-item-fat"); + const carbsAmount = node.querySelector(".menu-item-carbs"); + const proteinsAmount = node.querySelector(".menu-item-proteins"); const score = node.querySelector(".menu-item-score"); + nodeRoot.setAttribute("data-food-name", food.name); - node.querySelector(".menu-item-name").textContent = food.name; - node.querySelector(".menu-item-kcal").textContent = `${food.kcal} kcal/100${food.unit}`; - node.querySelector(".menu-item-unit").textContent = food.unit; + + itemName.textContent = food.name; + itemKcal.textContent = `${food.kcal} kcal/100${food.unit}`; + itemUnit.textContent = food.unit; + + fatAmount.textContent = `${food.fat}g`; + carbsAmount.textContent = `${food.carbs}g`; + proteinsAmount.textContent = `${food.proteins}g`; score.textContent = food.density.toFixed(1); score.classList.add(getScoreColor(food.density, food.unit)); - node.querySelector(".menu-item-info-unit").textContent = `Nährwerte pro 100${food.unit}`; - node.querySelector(".menu-item-info-energy-value").textContent = `${food.kcal}kcal`; - node.querySelector(".menu-item-info-fat-value").textContent = `${food.fat}g`; - node.querySelector(".menu-item-info-carbs-value").textContent = `${food.carbs}g`; - node.querySelector(".menu-item-info-sugar-value").textContent = `${food.sugar}g`; - node.querySelector(".menu-item-info-proteins-value").textContent = `${food.proteins}g`; - node.querySelector(".menu-item-info-alc-value").textContent = `${food.alc}%`; - node.querySelector(".delete-menu-item").addEventListener("click", () => { foodMenu.removeChild(nodeRoot); updateSummary(); @@ -118,7 +128,10 @@ async function addMenuItem(food) { } const amount = parseInt(itemAmount.value); - kcalAmount.textContent = parseInt(Math.round(food.kcal / 100 * amount)); + kcalAmount.textContent = `${parseInt(Math.round(food.kcal / 100 * amount))}kcal`; + fatAmount.textContent = `${parseInt(Math.round(food.fat / 100 * amount))}g`; + carbsAmount.textContent = `${parseInt(Math.round(food.carbs / 100 * amount))}g`; + proteinsAmount.textContent = `${parseInt(Math.round(food.proteins / 100 * amount))}g`; updateSummary(); }; @@ -132,7 +145,10 @@ async function addMenuItem(food) { evaluator.onmessage = e => { const amount = Math.max(parseInt(e.data), 0); itemAmount.value = amount; - kcalAmount.textContent = parseInt(Math.round(food.kcal / 100 * amount)); + kcalAmount.textContent = `${parseInt(Math.round(food.kcal / 100 * amount))}kcal`; + fatAmount.textContent = `${parseInt(Math.round(food.fat / 100 * amount))}g`; + carbsAmount.textContent = `${parseInt(Math.round(food.carbs / 100 * amount))}g`; + proteinsAmount.textContent = `${parseInt(Math.round(food.proteins / 100 * amount))}g`; updateSummary(); }; } @@ -147,15 +163,25 @@ async function addMenuItem(food) { } function updateSummary() { - console.log("asd"); - let sum = 0; + const menuItems = foodMenu.querySelectorAll(".menu-item"); + menuTable.style.display = menuItems.length > 0 ? "table" : "none"; - for (let menuItem of foodMenu.querySelectorAll(".menu-item")) { - sum += parseInt(menuItem.querySelector(".menu-item-kcal-for-amount").textContent); + let energy = 0; + let fat = 0; + let carbs = 0; + let proteins = 0; + + for (let menuItem of menuItems) { + energy += parseInt(menuItem.querySelector(".menu-item-energy").textContent); + fat += parseInt(menuItem.querySelector(".menu-item-fat").textContent); + carbs += parseInt(menuItem.querySelector(".menu-item-carbs").textContent); + proteins += parseInt(menuItem.querySelector(".menu-item-proteins").textContent); } - summaryKcal.textContent = sum; - summary.style.display = sum > 0 ? "block" : "none"; + summaryEnergy.textContent = `${energy}kcal`; + summaryFat.textContent = `${fat}g`; + summaryCarbs.textContent = `${carbs}g`; + summaryProteins.textContent = `${proteins}g`; } function getScoreColor(density, unit) { diff --git a/style.css b/style.css index 1354087..12fd1b7 100644 --- a/style.css +++ b/style.css @@ -62,7 +62,7 @@ header { margin-bottom: 0.25em; border: 1px solid darkgray; border-radius: 0.15em; - padding: 0.25em; + padding: 0.5em; outline: 0; box-sizing: border-box; width: 20rem; @@ -92,26 +92,51 @@ header { transition: all 0.25s ease-in-out; } -#food-menu, +th:first-child { + text-align: left; +} + +td:not(:first-child) { + text-align: center; +} + +tbody tr { + height: 2em; +} + +table { + border-collapse: collapse; +} + +tfoot { + font-weight: bold; +} + +thead tr:nth-last-child(1) th, +thead tr:nth-last-child(2) th, +tfoot tr:nth-child(1) td, +tfoot tr:nth-child(2) td { + padding: 0.25em; +} + +thead tr:nth-last-child(1), +tfoot tr:nth-child(2) { + border-top: 1px solid black; +} + +#menu-table, #summary { width: 60em; - max-width: 100%; + max-width: calc(100% - 2em); margin: 0 auto; } -.menu-item { - padding: 0.5em; - box-sizing: border-box; -} - -.menu-item:not(:last-child) { +/* .menu-item:not(:last-child) { border-bottom: 1px solid lightgray; -} +} */ .delete-menu-item, .summary-delete-icon { - display: block; - float: right; color: #cc3d3d; width: 1.5em; height: 1.5em; @@ -129,14 +154,6 @@ header { .menu-item-kcal { color: #333; font-size: 0.65em; - transform: translateY(-0.15em); - display: inline-block; -} - -.menu-item-amount-container, -.summary-amount-container { - float: right; - margin-right: 0.2em; } .menu-item-amount, @@ -147,16 +164,13 @@ header { outline: 0; width: 3em; text-align: right; - margin-left: 0.3em; border-radius: 0.2em; } .menu-item-unit, .summary-unit { display: inline-block; - margin-left: 0.2em; min-width: 1.5em; - transform: translateX(-0.1em); } .menu-item-amount:hover, @@ -192,102 +206,18 @@ input[type=number] { } } -.menu-item-kcal-unit, -.summary-kcal-unit { - margin-right: 0.25em; -} - .menu-item-kcal-for-amount, .menu-item-kcal-unit { color: #555; } -#summary { - border-top: 1px solid black; - padding: 0.5em; - box-sizing: border-box; -} - -.summary-amount, -.summary-unit, -.summary-delete-icon, -.summary-kcal-unit-sep { - visibility: hidden; -} - -.summary-kcal, -.summary-kcal-unit, -.summary-name { - display: inline; - font-weight: bold; -} - -.menu-item-info-container { - margin-right: 1em; - position: relative; - float: right; -} - -.menu-item-info-hover-button { - color: #333; - font-size: 0.75em; - text-decoration: underline; -} - -.menu-item-info { - z-index: 1; - left: 0; - display: none; - width: 12em; - position: absolute; - background-color: #eee; - border: 1px solid darkgray; - box-sizing: border-box; - border-radius: 0.15em; - padding: 0.25em 0; -} - -.menu-item-info > div { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 0 0.25em; -} - -.menu-item-info-energy { - padding-top: 0.35em !important; -} - -.menu-item-info-hover-button { - cursor: pointer; - user-select: none; -} - -.menu-item-info-hover-button:hover + .menu-item-info { - display: block; -} - .menu-item-kcal-for-amount { text-align: right; display: inline-block; min-width: 3em; } -.menu-item-info-unit { - display: block !important; - padding-bottom: 0.35em !important; - text-align: center; - font-weight: bold; - border-bottom: 1px solid darkgray; -} - -.menu-item-info-sugar { - padding-left: 0.25em; -} - .menu-item-score { - float: right; - margin-right: 1em; font-size: 0.9rem; padding: 0em 0.5em; border-radius: 0.25em; diff --git a/table-test.html b/table-test.html new file mode 100644 index 0000000..6c4b843 --- /dev/null +++ b/table-test.html @@ -0,0 +1,67 @@ + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
123
1.11.21.3
2.12.22.3
3.13.23.3
123
+ + \ No newline at end of file diff --git a/templates/menu-item.html b/templates/menu-item.html index c977010..38bbaa2 100644 --- a/templates/menu-item.html +++ b/templates/menu-item.html @@ -1,46 +1,23 @@ \ No newline at end of file