milarin/kcalculator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

introduce table as layout

Browse Source
This commit is contained in:
Timon Ringwald 2022-09-09 13:23:03 +02:00
parent 805f316310
commit c76b1f523c
5 changed files with 204 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@ -30,19 +30,41 @@
</div> </div>
</div> </div>
<div id="food-menu"> <table id="menu-table">
<thead>
</div> <tr>
<th>Lebensmittel</th>
<div id="summary"> <th>Kalorien</th>
<span class="summary-name">Gesamt</span> <th>Bewertung</th>
<th>Menge</th>
<a class="summary-delete-icon"><span class="material-icons">delete</span></a> <th>Energie</th>
<div class="summary-amount-container"> <th>Fett</th>
<div class="summary-kcal">123</div> <th>Kohlenhydrate</th>
<span class="summary-kcal-unit">kcal</span><span class="summary-kcal-unit-sep">/</span><input class="summary-amount" type="number" pattern="[0-9]+"><span class="summary-unit">g</span> <th>Eiweiß</th>
</div> <th></th>
</div> </tr>
<tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
<tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
</thead>
<tbody id="food-menu">
</tbody>
<tfoot>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td>Gesamt</td>
<td></td>
<td></td>
<td></td>
<td id="summary-energy"></td>
<td id="summary-fat"></td>
<td id="summary-carbs"></td>
<td id="summary-proteins"></td>
<td></td>
</tr>
</tfoot>
</table>
</main> </main>
</body> </body>

70
main.js
View File

@ -1,8 +1,13 @@
const foodSearch = document.querySelector("#food-search"); const foodSearch = document.querySelector("#food-search");
const searchEntries = document.querySelector("#search-entries"); const searchEntries = document.querySelector("#search-entries");
const foodMenu = document.querySelector("#food-menu"); const foodMenu = document.querySelector("#food-menu");
const summary = document.querySelector("#summary"); const menuTable = document.querySelector("#menu-table");
const summaryKcal = document.querySelector("#summary .summary-kcal");
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(); updateSummary();
initFoodList(); initFoodList();
@ -87,26 +92,31 @@ async function addMenuItem(food) {
} }
const node = await JST.load("menu-item"); const node = await JST.load("menu-item");
const nodeRoot = node.querySelector(".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 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"); const score = node.querySelector(".menu-item-score");
nodeRoot.setAttribute("data-food-name", food.name); 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}`; itemName.textContent = food.name;
node.querySelector(".menu-item-unit").textContent = food.unit; 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.textContent = food.density.toFixed(1);
score.classList.add(getScoreColor(food.density, food.unit)); 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", () => { node.querySelector(".delete-menu-item").addEventListener("click", () => {
foodMenu.removeChild(nodeRoot); foodMenu.removeChild(nodeRoot);
updateSummary(); updateSummary();
@ -118,7 +128,10 @@ async function addMenuItem(food) {
} }
const amount = parseInt(itemAmount.value); 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(); updateSummary();
}; };
@ -132,7 +145,10 @@ async function addMenuItem(food) {
evaluator.onmessage = e => { evaluator.onmessage = e => {
const amount = Math.max(parseInt(e.data), 0); const amount = Math.max(parseInt(e.data), 0);
itemAmount.value = amount; 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(); updateSummary();
}; };
} }
@ -147,15 +163,25 @@ async function addMenuItem(food) {
} }
function updateSummary() { function updateSummary() {
console.log("asd"); const menuItems = foodMenu.querySelectorAll(".menu-item");
let sum = 0; menuTable.style.display = menuItems.length > 0 ? "table" : "none";
for (let menuItem of foodMenu.querySelectorAll(".menu-item")) { let energy = 0;
sum += parseInt(menuItem.querySelector(".menu-item-kcal-for-amount").textContent); 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; summaryEnergy.textContent = `${energy}kcal`;
summary.style.display = sum > 0 ? "block" : "none"; summaryFat.textContent = `${fat}g`;
summaryCarbs.textContent = `${carbs}g`;
summaryProteins.textContent = `${proteins}g`;
} }
function getScoreColor(density, unit) { function getScoreColor(density, unit) {

144
style.css
View File

@ -62,7 +62,7 @@ header {
margin-bottom: 0.25em; margin-bottom: 0.25em;
border: 1px solid darkgray; border: 1px solid darkgray;
border-radius: 0.15em; border-radius: 0.15em;
padding: 0.25em; padding: 0.5em;
outline: 0; outline: 0;
box-sizing: border-box; box-sizing: border-box;
width: 20rem; width: 20rem;
@ -92,26 +92,51 @@ header {
transition: all 0.25s ease-in-out; 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 { #summary {
width: 60em; width: 60em;
max-width: 100%; max-width: calc(100% - 2em);
margin: 0 auto; margin: 0 auto;
} }
.menu-item { /* .menu-item:not(:last-child) {
padding: 0.5em;
box-sizing: border-box;
}
.menu-item:not(:last-child) {
border-bottom: 1px solid lightgray; border-bottom: 1px solid lightgray;
} } */
.delete-menu-item, .delete-menu-item,
.summary-delete-icon { .summary-delete-icon {
display: block;
float: right;
color: #cc3d3d; color: #cc3d3d;
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
@ -129,14 +154,6 @@ header {
.menu-item-kcal { .menu-item-kcal {
color: #333; color: #333;
font-size: 0.65em; 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, .menu-item-amount,
@ -147,16 +164,13 @@ header {
outline: 0; outline: 0;
width: 3em; width: 3em;
text-align: right; text-align: right;
margin-left: 0.3em;
border-radius: 0.2em; border-radius: 0.2em;
} }
.menu-item-unit, .menu-item-unit,
.summary-unit { .summary-unit {
display: inline-block; display: inline-block;
margin-left: 0.2em;
min-width: 1.5em; min-width: 1.5em;
transform: translateX(-0.1em);
} }
.menu-item-amount:hover, .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-for-amount,
.menu-item-kcal-unit { .menu-item-kcal-unit {
color: #555; 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 { .menu-item-kcal-for-amount {
text-align: right; text-align: right;
display: inline-block; display: inline-block;
min-width: 3em; 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 { .menu-item-score {
float: right;
margin-right: 1em;
font-size: 0.9rem; font-size: 0.9rem;
padding: 0em 0.5em; padding: 0em 0.5em;
border-radius: 0.25em; border-radius: 0.25em;

67
table-test.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin-top: 10em;
margin-left: 30em;
}
td, th {
padding: 0.25em;
}
table {
border-collapse: collapse;
}
tfoot tr:last-child {
border-top: 1px solid darkgray;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>

57
templates/menu-item.html
View File

@ -1,46 +1,23 @@
<template> <template>
<div class="menu-item"> <tr class="menu-item">
<span class="menu-item-name"></span> <td class="menu-item-name"></td>
<span class="menu-item-kcal"></span>
<a class="delete-menu-item"><span class="material-icons">delete</span></a> <td class="menu-item-kcal"></td>
<div class="menu-item-amount-container"> <td><span class="menu-item-score"></span></td>
<span class="menu-item-kcal-for-amount"></span>
<span class="menu-item-kcal-unit">kcal</span>/<input class="menu-item-amount" type="text" pattern="[0-9]+"><span class="menu-item-unit"></span>
</div>
<span class="menu-item-info-container"> <td class="menu-item-amount-container">
<span class="menu-item-info-hover-button">Nährwerte</span> <input class="menu-item-amount" type="text" pattern="[0-9]+"><span class="menu-item-unit"></span>
<div class="menu-item-info"> </td>
<div class="menu-item-info-unit"></div>
<div class="menu-item-info-energy">
<span class="name">Energie</span>
<span class="menu-item-info-energy-value"></span>
</div>
<div class="menu-item-info-fat">
<span class="name">Fett</span>
<span class="menu-item-info-fat-value"></span>
</div>
<div class="menu-item-info-carbs">
<span class="name">Kohlenhydrate</span>
<span class="menu-item-info-carbs-value"></span>
</div>
<div class="menu-item-info-sugar">
<span class="name">- davon Zucker</span>
<span class="menu-item-info-sugar-value"></span>
</div>
<div class="menu-item-info-proteins">
<span class="name">Eiweiß</span>
<span class="menu-item-info-proteins-value"></span>
</div>
<div class="menu-item-info-alc">
<span class="name">Alkohol</span>
<span class="menu-item-info-alc-value"></span>
</div>
</div>
</span>
<span class="menu-item-score" title="Bewertung"></span> <td class="menu-item-energy"></td>
</div>
<td class="menu-item-fat"></td>
<td class="menu-item-carbs"></td>
<td class="menu-item-proteins"></td>
<td class="delete-menu-item"><span class="material-icons">delete</span></td>
</tr>
</template> </template>