introduce table as layout
This commit is contained in:
Timon Ringwald
parent
805f316310
commit
c76b1f523c
46
index.html
46
index.html
@ -30,19 +30,41 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="food-menu">
|
||||
<table id="menu-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Lebensmittel</th>
|
||||
<th>Kalorien</th>
|
||||
<th>Bewertung</th>
|
||||
<th>Menge</th>
|
||||
<th>Energie</th>
|
||||
<th>Fett</th>
|
||||
<th>Kohlenhydrate</th>
|
||||
<th>Eiweiß</th>
|
||||
<th></th>
|
||||
</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">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="summary">
|
||||
<span class="summary-name">Gesamt</span>
|
||||
|
||||
<a class="summary-delete-icon"><span class="material-icons">delete</span></a>
|
||||
<div class="summary-amount-container">
|
||||
<div class="summary-kcal">123</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</body>
|
||||
|
||||
|
||||
70
main.js
70
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) {
|
||||
|
||||
144
style.css
144
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;
|
||||
|
||||
67
table-test.html
Normal file
67
table-test.html
Normal 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>
|
||||
@ -1,46 +1,23 @@
|
||||
<template>
|
||||
<div class="menu-item">
|
||||
<span class="menu-item-name"></span>
|
||||
<span class="menu-item-kcal"></span>
|
||||
<tr class="menu-item">
|
||||
<td class="menu-item-name"></td>
|
||||
|
||||
<a class="delete-menu-item"><span class="material-icons">delete</span></a>
|
||||
<td class="menu-item-kcal"></td>
|
||||
|
||||
<div class="menu-item-amount-container">
|
||||
<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>
|
||||
<td><span class="menu-item-score"></span></td>
|
||||
|
||||
<span class="menu-item-info-container">
|
||||
<span class="menu-item-info-hover-button">Nährwerte</span>
|
||||
<div class="menu-item-info">
|
||||
<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>
|
||||
<td class="menu-item-amount-container">
|
||||
<input class="menu-item-amount" type="text" pattern="[0-9]+"><span class="menu-item-unit"></span>
|
||||
</td>
|
||||
|
||||
<span class="menu-item-score" title="Bewertung"></span>
|
||||
</div>
|
||||
<td class="menu-item-energy"></td>
|
||||
|
||||
<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>
|
||||
Loading…
Reference in New Issue
Block a user