chore: sync docker/index.html met glucose feature
This commit is contained in:
cas
parent
dbe39fded7
commit
cfcb77407f
1 changed files with 314 additions and 0 deletions
|
|
@ -465,6 +465,161 @@ body {
|
|||
background: var(--progress-red);
|
||||
}
|
||||
|
||||
/* ===== Glucose Section ===== */
|
||||
.glucose-section {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.glucose-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.glucose-icon {
|
||||
font-size: 1.1rem;
|
||||
color: var(--progress-red);
|
||||
}
|
||||
|
||||
.glucose-title {
|
||||
font-weight: 700;
|
||||
font-size: var(--font-md);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.glucose-unit-label {
|
||||
font-size: var(--font-xs);
|
||||
color: var(--text-muted);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* Grid: 4 columns on wide, 2×2 on narrow */
|
||||
.glucose-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.glucose-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.glucose-item {
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 8px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--border);
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.glucose-item.glucose-good {
|
||||
border-color: #28a745;
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.glucose-item.glucose-bad {
|
||||
border-color: var(--progress-red);
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.glucose-item.glucose-empty {
|
||||
border-color: var(--border);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.glucose-item-label {
|
||||
font-size: var(--font-xs);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.glucose-item-range {
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.glucose-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.glucose-input {
|
||||
width: 58px;
|
||||
padding: 4px 4px;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: var(--radius-xs);
|
||||
font-size: var(--font-md);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
background: var(--white);
|
||||
color: var(--text);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
outline: none;
|
||||
/* Hide spinners */
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.glucose-input::-webkit-outer-spin-button,
|
||||
.glucose-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.glucose-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(250,232,146,0.25);
|
||||
}
|
||||
|
||||
.glucose-unit {
|
||||
font-size: var(--font-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.glucose-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
font-size: var(--font-xs);
|
||||
line-height: 1.2;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.glucose-status-icon {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.glucose-status-text {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.glucose-good .glucose-status-text {
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.glucose-bad .glucose-status-text {
|
||||
color: var(--progress-red);
|
||||
}
|
||||
|
||||
.glucose-empty .glucose-status-text {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Warning text */
|
||||
.carb-warning {
|
||||
display: none;
|
||||
|
|
@ -2103,6 +2258,16 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
<div class="carb-warning" id="carbWarning"></div>
|
||||
</div>
|
||||
|
||||
<!-- Glucose Section -->
|
||||
<div class="glucose-section" id="glucoseSection">
|
||||
<div class="glucose-header">
|
||||
<span class="glucose-icon"><i class="fa-solid fa-droplet"></i></span>
|
||||
<span class="glucose-title">Glucose</span>
|
||||
<span class="glucose-unit-label">mmol/L</span>
|
||||
</div>
|
||||
<div class="glucose-grid" id="glucoseGrid"></div>
|
||||
</div>
|
||||
|
||||
<ul class="eetmoment-list" id="eetmomentList"></ul>
|
||||
|
||||
<div class="empty-state hidden" id="diaryEmpty">
|
||||
|
|
@ -2288,6 +2453,14 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
return CATEGORY_MAP[itemCat] || 'Overig';
|
||||
}
|
||||
|
||||
// ===== Prikmomenten voor glucose =====
|
||||
const PRICKMOMENTEN = [
|
||||
{ key: 'nuchter', label: 'Nuchter (voor ontbijt)', targetMin: 0, targetMax: 5.4 },
|
||||
{ key: 'naOntbijt', label: '2 uur na ontbijt', targetMin: 5.4, targetMax: 6.7 },
|
||||
{ key: 'naLunch', label: '2 uur na lunch', targetMin: 5.4, targetMax: 6.7 },
|
||||
{ key: 'naAvondeten', label: '2 uur na avondeten', targetMin: 5.4, targetMax: 6.7 }
|
||||
];
|
||||
|
||||
// ===== Standaard portiegroottes per categorie =====
|
||||
// Gebaseerd op Voedingscentrum / NEVO richtlijnen
|
||||
/** Drie praktische porties per categorie: een intuïtieve eenheid + 100g + 50g */
|
||||
|
|
@ -2369,6 +2542,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
let searchIndex = null; // Map<item, expanded search tokens string>
|
||||
let dataLoaded = false;
|
||||
let maaltijden = []; // [{ id, naam, items: [{item, portie}, ...], khTotaal }]
|
||||
let glucose = {}; // { '2026-07-24': { nuchter: 5.1, naOntbijt: 6.2, naLunch: null, naAvondeten: null } }
|
||||
const SEARCH_PAGE_SIZE = 50;
|
||||
let searchVisibleCount = SEARCH_PAGE_SIZE;
|
||||
let searchObserver = null;
|
||||
|
|
@ -2461,6 +2635,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
getOrCreateDay(activeDate);
|
||||
// Load maaltijden
|
||||
loadMaaltijdenFromStorage();
|
||||
// Load glucose data
|
||||
loadGlucoseFromStorage();
|
||||
}
|
||||
|
||||
function saveMaaltijden() {
|
||||
|
|
@ -2482,6 +2658,139 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
}
|
||||
}
|
||||
|
||||
// ===== Glucose =====
|
||||
function isGlucoseInRange(value, moment) {
|
||||
if (value === null || value === undefined || value === '') return null;
|
||||
const m = PRICKMOMENTEN.find(p => p.key === moment);
|
||||
if (!m) return null;
|
||||
// Nuchter (fasting): only upper bound — < targetMax is good
|
||||
if (moment === 'nuchter') {
|
||||
return value < m.targetMax ? 'good' : 'high';
|
||||
}
|
||||
// Post-meal: range 5.4 – 6.7 (inclusive)
|
||||
if (value < m.targetMin) return 'low';
|
||||
if (value > m.targetMax) return 'high';
|
||||
return 'good';
|
||||
}
|
||||
|
||||
function saveGlucoseToStorage() {
|
||||
try {
|
||||
localStorage.setItem('koolhydraat-glucose', JSON.stringify(glucose));
|
||||
} catch (e) {
|
||||
// Storage full — silently ignore
|
||||
}
|
||||
}
|
||||
|
||||
function loadGlucoseFromStorage() {
|
||||
try {
|
||||
const raw = localStorage.getItem('koolhydraat-glucose');
|
||||
if (raw) {
|
||||
glucose = JSON.parse(raw);
|
||||
}
|
||||
} catch (e) {
|
||||
glucose = {};
|
||||
}
|
||||
// Ensure today's entry exists
|
||||
if (!glucose[activeDate]) {
|
||||
glucose[activeDate] = {};
|
||||
PRICKMOMENTEN.forEach(m => { glucose[activeDate][m.key] = null; });
|
||||
}
|
||||
}
|
||||
|
||||
function ensureGlucoseDay(dateStr) {
|
||||
if (!glucose[dateStr]) {
|
||||
glucose[dateStr] = {};
|
||||
PRICKMOMENTEN.forEach(m => { glucose[dateStr][m.key] = null; });
|
||||
}
|
||||
}
|
||||
|
||||
function renderGlucoseSection() {
|
||||
const grid = document.getElementById('glucoseGrid');
|
||||
if (!grid) return;
|
||||
|
||||
ensureGlucoseDay(activeDate);
|
||||
|
||||
grid.innerHTML = PRICKMOMENTEN.map(m => {
|
||||
const value = glucose[activeDate][m.key];
|
||||
const status = isGlucoseInRange(value, m.key);
|
||||
|
||||
let statusIcon, statusClass, statusText;
|
||||
if (value === null || value === undefined || value === '') {
|
||||
statusIcon = '⏹️';
|
||||
statusClass = 'glucose-empty';
|
||||
statusText = 'Nog meten';
|
||||
} else if (status === 'good') {
|
||||
statusIcon = '✅';
|
||||
statusClass = 'glucose-good';
|
||||
statusText = 'Binnen range';
|
||||
} else if (status === 'high') {
|
||||
statusIcon = '🔴';
|
||||
statusClass = 'glucose-bad';
|
||||
statusText = 'Te hoog';
|
||||
} else {
|
||||
statusIcon = '🔴';
|
||||
statusClass = 'glucose-bad';
|
||||
statusText = 'Te laag';
|
||||
}
|
||||
|
||||
const displayValue = (value !== null && value !== undefined) ? value : '';
|
||||
|
||||
// Short label: remove parenthetical and "2 uur na" prefix
|
||||
let shortLabel = m.label;
|
||||
shortLabel = shortLabel.replace(/\([^)]*\)/g, '').trim();
|
||||
shortLabel = shortLabel.replace(/^2 uur na /i, '').trim();
|
||||
// Capitalize first letter
|
||||
shortLabel = shortLabel.charAt(0).toUpperCase() + shortLabel.slice(1);
|
||||
|
||||
return `
|
||||
<div class="glucose-item ${statusClass}">
|
||||
<div class="glucose-item-label">${shortLabel}</div>
|
||||
<div class="glucose-item-range">${m.key === 'nuchter' ? '< ' + m.targetMax : m.targetMin + '–' + m.targetMax}</div>
|
||||
<div class="glucose-input-wrapper">
|
||||
<input type="number" class="glucose-input"
|
||||
value="${displayValue}"
|
||||
data-moment="${m.key}"
|
||||
step="0.1" min="0" max="30"
|
||||
placeholder="—"
|
||||
inputmode="decimal">
|
||||
<span class="glucose-unit">mmol/L</span>
|
||||
</div>
|
||||
<div class="glucose-status ${statusClass}">
|
||||
<span class="glucose-status-icon">${statusIcon}</span>
|
||||
<span class="glucose-status-text">${statusText}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Attach save-on-blur handlers
|
||||
grid.querySelectorAll('.glucose-input').forEach(input => {
|
||||
input.addEventListener('blur', () => {
|
||||
const moment = input.dataset.moment;
|
||||
const val = input.value.trim() === '' ? null : parseFloat(input.value);
|
||||
|
||||
// Validate
|
||||
if (val !== null && (isNaN(val) || val < 0 || val > 30)) {
|
||||
input.value = glucose[activeDate][moment] !== null && glucose[activeDate][moment] !== undefined ? glucose[activeDate][moment] : '';
|
||||
return;
|
||||
}
|
||||
|
||||
if (glucose[activeDate][moment] !== val) {
|
||||
glucose[activeDate][moment] = val;
|
||||
saveGlucoseToStorage();
|
||||
renderGlucoseSection();
|
||||
}
|
||||
});
|
||||
|
||||
// Enter key also saves
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
input.blur();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ===== Daily Carb Limit =====
|
||||
const DEFAULT_CARB_LIMIT = 175; // grams per day
|
||||
|
||||
|
|
@ -2875,6 +3184,9 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
// Progress bar
|
||||
renderProgressBar(totaal);
|
||||
|
||||
// Glucose section
|
||||
renderGlucoseSection();
|
||||
|
||||
// Eating moments
|
||||
const listEl = document.getElementById('eetmomentList');
|
||||
listEl.innerHTML = EETMOMENTEN.map((moment, mi) => {
|
||||
|
|
@ -3664,12 +3976,14 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
current.setDate(current.getDate() + direction);
|
||||
activeDate = formatDate(current);
|
||||
getOrCreateDay(activeDate);
|
||||
ensureGlucoseDay(activeDate);
|
||||
renderDagboek();
|
||||
}
|
||||
|
||||
function goToToday() {
|
||||
activeDate = formatDate(new Date());
|
||||
getOrCreateDay(activeDate);
|
||||
ensureGlucoseDay(activeDate);
|
||||
renderDagboek();
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue