UX: Glucose inline per eetmoment — nuchter card + inline postprandiale metingen
This commit is contained in:
cas
parent
cfcb77407f
commit
2309cf22ad
3 changed files with 519 additions and 340 deletions
|
|
@ -465,96 +465,111 @@ body {
|
|||
background: var(--progress-red);
|
||||
}
|
||||
|
||||
/* ===== Glucose Section ===== */
|
||||
.glucose-section {
|
||||
/* ===== Nuchter card — compact glucose card vóór Ontbijt ===== */
|
||||
.nuchter-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 14px 16px;
|
||||
overflow: hidden;
|
||||
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;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.glucose-item.glucose-good {
|
||||
.nuchter-card.glucose-good {
|
||||
border-color: #28a745;
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.glucose-item.glucose-bad {
|
||||
.nuchter-card.glucose-bad {
|
||||
border-color: var(--progress-red);
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.glucose-item.glucose-empty {
|
||||
.nuchter-card.glucose-empty {
|
||||
border-color: var(--border);
|
||||
background: var(--bg);
|
||||
background: var(--white);
|
||||
}
|
||||
.nuchter-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: var(--primary-lighter);
|
||||
}
|
||||
.nuchter-card-icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.nuchter-card-label {
|
||||
font-weight: 600;
|
||||
font-size: var(--font-sm);
|
||||
color: var(--text);
|
||||
}
|
||||
.nuchter-card-range {
|
||||
font-size: var(--font-xs);
|
||||
color: var(--text-muted);
|
||||
margin-left: auto;
|
||||
}
|
||||
.nuchter-card-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
gap: 12px;
|
||||
}
|
||||
.nuchter-card-body .glucose-input-wrapper {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.glucose-item-label {
|
||||
/* ===== Inline glucose in eetmoment card ===== */
|
||||
.glucose-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 14px;
|
||||
border-top: 1px solid #F0F0F0;
|
||||
gap: 8px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.glucose-inline.glucose-good {
|
||||
background: #f0fdf4;
|
||||
}
|
||||
.glucose-inline.glucose-bad {
|
||||
background: #fef2f2;
|
||||
}
|
||||
.glucose-inline.glucose-empty {
|
||||
background: transparent;
|
||||
}
|
||||
.glucose-inline-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
.glucose-inline-icon {
|
||||
font-size: 0.9rem;
|
||||
color: var(--progress-red);
|
||||
}
|
||||
.glucose-inline-label {
|
||||
font-size: var(--font-xs);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.glucose-item-range {
|
||||
.glucose-inline-range {
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.glucose-inline-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ===== Shared glucose input styles ===== */
|
||||
|
||||
.glucose-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.glucose-input {
|
||||
|
|
@ -2258,15 +2273,7 @@ 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>
|
||||
<!-- Glucose Section removed — inline in eetmoment cards -->
|
||||
|
||||
<ul class="eetmoment-list" id="eetmomentList"></ul>
|
||||
|
||||
|
|
@ -2455,10 +2462,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
|
||||
// ===== 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 }
|
||||
{ key: 'nuchter', label: 'Nuchter (voor ontbijt)', targetMin: 0, targetMax: 5.4, momentId: null },
|
||||
{ key: 'naOntbijt', label: '2 uur na ontbijt', targetMin: 5.4, targetMax: 6.7, momentId: 'Ontbijt' },
|
||||
{ key: 'naLunch', label: '2 uur na lunch', targetMin: 5.4, targetMax: 6.7, momentId: 'Lunch' },
|
||||
{ key: 'naAvondeten', label: '2 uur na avondeten', targetMin: 5.4, targetMax: 6.7, momentId: 'Avondeten' }
|
||||
];
|
||||
|
||||
// ===== Standaard portiegroottes per categorie =====
|
||||
|
|
@ -2704,48 +2711,102 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
}
|
||||
}
|
||||
|
||||
function renderGlucoseSection() {
|
||||
const grid = document.getElementById('glucoseGrid');
|
||||
if (!grid) return;
|
||||
// ===== Glucose — Inline per eetmoment =====
|
||||
|
||||
function renderNuchterCard() {
|
||||
const m = PRICKMOMENTEN.find(p => p.key === 'nuchter');
|
||||
if (!m) return '';
|
||||
ensureGlucoseDay(activeDate);
|
||||
const value = glucose[activeDate]?.['nuchter'] ?? null;
|
||||
const status = isGlucoseInRange(value, 'nuchter');
|
||||
|
||||
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';
|
||||
}
|
||||
|
||||
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 : '';
|
||||
|
||||
const displayValue = (value !== null && value !== undefined) ? value : '';
|
||||
return `
|
||||
<li class="nuchter-card ${statusClass}">
|
||||
<div class="nuchter-card-header">
|
||||
<span class="nuchter-card-icon">🩸</span>
|
||||
<span class="nuchter-card-label">Nuchter (voor ontbijt)</span>
|
||||
<span class="nuchter-card-range">< ${m.targetMax}</span>
|
||||
</div>
|
||||
<div class="nuchter-card-body">
|
||||
<div class="glucose-input-wrapper">
|
||||
<input type="number" class="glucose-input"
|
||||
value="${displayValue}"
|
||||
data-moment="nuchter"
|
||||
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>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
// 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);
|
||||
function renderInlineGlucoseItem(m) {
|
||||
ensureGlucoseDay(activeDate);
|
||||
const value = glucose[activeDate]?.[m.key] ?? null;
|
||||
const status = isGlucoseInRange(value, m.key);
|
||||
|
||||
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>
|
||||
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();
|
||||
shortLabel = shortLabel.charAt(0).toUpperCase() + shortLabel.slice(1);
|
||||
|
||||
return `
|
||||
<div class="glucose-inline ${statusClass}" data-moment-key="${m.key}">
|
||||
<div class="glucose-inline-left">
|
||||
<span class="glucose-inline-icon">🩸</span>
|
||||
<span class="glucose-inline-label">${shortLabel}</span>
|
||||
<span class="glucose-inline-range">${m.targetMin}–${m.targetMax}</span>
|
||||
</div>
|
||||
<div class="glucose-inline-right">
|
||||
<div class="glucose-input-wrapper">
|
||||
<input type="number" class="glucose-input"
|
||||
value="${displayValue}"
|
||||
|
|
@ -2760,11 +2821,16 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
<span class="glucose-status-text">${statusText}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function attachGlucoseInputHandlers() {
|
||||
document.querySelectorAll('.glucose-input').forEach(input => {
|
||||
// Avoid double-binding
|
||||
if (input.dataset.glucoseBound) return;
|
||||
input.dataset.glucoseBound = 'true';
|
||||
|
||||
// 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);
|
||||
|
|
@ -2778,11 +2844,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
if (glucose[activeDate][moment] !== val) {
|
||||
glucose[activeDate][moment] = val;
|
||||
saveGlucoseToStorage();
|
||||
renderGlucoseSection();
|
||||
updateGlucoseUI(moment);
|
||||
}
|
||||
});
|
||||
|
||||
// Enter key also saves
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
input.blur();
|
||||
|
|
@ -2791,6 +2856,28 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
});
|
||||
}
|
||||
|
||||
function updateGlucoseUI(momentKey) {
|
||||
const m = PRICKMOMENTEN.find(p => p.key === momentKey);
|
||||
if (!m) return;
|
||||
|
||||
if (m.momentId === null) {
|
||||
// Update nuchter card
|
||||
const card = document.querySelector('.nuchter-card');
|
||||
if (card) {
|
||||
card.outerHTML = renderNuchterCard();
|
||||
}
|
||||
} else {
|
||||
// Update inline glucose in eetmoment card
|
||||
const el = document.querySelector(`.glucose-inline[data-moment-key="${momentKey}"]`);
|
||||
if (el) {
|
||||
el.outerHTML = renderInlineGlucoseItem(m);
|
||||
}
|
||||
}
|
||||
|
||||
// Re-attach handlers on replaced elements
|
||||
attachGlucoseInputHandlers();
|
||||
}
|
||||
|
||||
// ===== Daily Carb Limit =====
|
||||
const DEFAULT_CARB_LIMIT = 175; // grams per day
|
||||
|
||||
|
|
@ -3184,12 +3271,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
// Progress bar
|
||||
renderProgressBar(totaal);
|
||||
|
||||
// Glucose section
|
||||
renderGlucoseSection();
|
||||
|
||||
// Eating moments
|
||||
// Eating moments — prepend nuchter card, then eetmoment cards with inline glucose
|
||||
const listEl = document.getElementById('eetmomentList');
|
||||
listEl.innerHTML = EETMOMENTEN.map((moment, mi) => {
|
||||
const nuchterHtml = renderNuchterCard();
|
||||
listEl.innerHTML = nuchterHtml + EETMOMENTEN.map((moment, mi) => {
|
||||
const items = dayData[moment.id] || [];
|
||||
const momentKh = berekenEetmomentKh(activeDate, moment.id);
|
||||
const roundedKh = Math.round(momentKh);
|
||||
|
|
@ -3275,6 +3360,9 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
}).join('');
|
||||
|
||||
const cardOverLimit = overLimit && momentKh > 0;
|
||||
// Check if this eetmoment has a matching glucose moment
|
||||
const glucoseMoment = PRICKMOMENTEN.find(p => p.momentId === moment.id);
|
||||
const inlineGlucoseHtml = glucoseMoment ? renderInlineGlucoseItem(glucoseMoment) : '';
|
||||
|
||||
return `
|
||||
<li class="eetmoment-card${cardOverLimit ? ' over-limit' : ''}" style="--i:${mi}">
|
||||
|
|
@ -3284,9 +3372,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
<span class="eetmoment-name">${moment.name}</span>
|
||||
</div>
|
||||
<span class="eetmoment-kh">${roundedKh > 0 ? formatKh(roundedKh) + ' g' : '—'}</span>
|
||||
<span style="font-size:0.8rem;color:var(--text-muted)">${items.length > 0 ? '<i class="fas fa-chevron-down"></i>' : ''}</span>
|
||||
<span style="font-size:0.8rem;color:var(--text-muted)">${items.length > 0 ? '<i class=\"fas fa-chevron-down\"></i>' : ''}</span>
|
||||
</div>
|
||||
${items.length > 0 ? `<ul class="eetmoment-items">${itemsHtml}</ul>` : ''}
|
||||
${inlineGlucoseHtml}
|
||||
<div class="eetmoment-add-btn" data-moment="${moment.id}">
|
||||
<span>+</span> Voedingsmiddel toevoegen
|
||||
</div>
|
||||
|
|
@ -3379,6 +3468,9 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
// Empty state
|
||||
const hasItems = EETMOMENTEN.some(m => (dayData[m.id] || []).length > 0);
|
||||
document.getElementById('diaryEmpty').classList.toggle('hidden', hasItems);
|
||||
|
||||
// Attach glucose input handlers (nuchter card + inline glucose)
|
||||
attachGlucoseInputHandlers();
|
||||
}
|
||||
|
||||
function showDetail(item) {
|
||||
|
|
|
|||
334
index.html
334
index.html
|
|
@ -465,96 +465,111 @@ body {
|
|||
background: var(--progress-red);
|
||||
}
|
||||
|
||||
/* ===== Glucose Section ===== */
|
||||
.glucose-section {
|
||||
/* ===== Nuchter card — compact glucose card vóór Ontbijt ===== */
|
||||
.nuchter-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 14px 16px;
|
||||
overflow: hidden;
|
||||
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;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.glucose-item.glucose-good {
|
||||
.nuchter-card.glucose-good {
|
||||
border-color: #28a745;
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.glucose-item.glucose-bad {
|
||||
.nuchter-card.glucose-bad {
|
||||
border-color: var(--progress-red);
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.glucose-item.glucose-empty {
|
||||
.nuchter-card.glucose-empty {
|
||||
border-color: var(--border);
|
||||
background: var(--bg);
|
||||
background: var(--white);
|
||||
}
|
||||
.nuchter-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: var(--primary-lighter);
|
||||
}
|
||||
.nuchter-card-icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.nuchter-card-label {
|
||||
font-weight: 600;
|
||||
font-size: var(--font-sm);
|
||||
color: var(--text);
|
||||
}
|
||||
.nuchter-card-range {
|
||||
font-size: var(--font-xs);
|
||||
color: var(--text-muted);
|
||||
margin-left: auto;
|
||||
}
|
||||
.nuchter-card-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
gap: 12px;
|
||||
}
|
||||
.nuchter-card-body .glucose-input-wrapper {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.glucose-item-label {
|
||||
/* ===== Inline glucose in eetmoment card ===== */
|
||||
.glucose-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 14px;
|
||||
border-top: 1px solid #F0F0F0;
|
||||
gap: 8px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.glucose-inline.glucose-good {
|
||||
background: #f0fdf4;
|
||||
}
|
||||
.glucose-inline.glucose-bad {
|
||||
background: #fef2f2;
|
||||
}
|
||||
.glucose-inline.glucose-empty {
|
||||
background: transparent;
|
||||
}
|
||||
.glucose-inline-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
.glucose-inline-icon {
|
||||
font-size: 0.9rem;
|
||||
color: var(--progress-red);
|
||||
}
|
||||
.glucose-inline-label {
|
||||
font-size: var(--font-xs);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.glucose-item-range {
|
||||
.glucose-inline-range {
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.glucose-inline-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ===== Shared glucose input styles ===== */
|
||||
|
||||
.glucose-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.glucose-input {
|
||||
|
|
@ -2258,15 +2273,7 @@ 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>
|
||||
<!-- Glucose Section removed — inline in eetmoment cards -->
|
||||
|
||||
<ul class="eetmoment-list" id="eetmomentList"></ul>
|
||||
|
||||
|
|
@ -2455,10 +2462,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
|
||||
// ===== 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 }
|
||||
{ key: 'nuchter', label: 'Nuchter (voor ontbijt)', targetMin: 0, targetMax: 5.4, momentId: null },
|
||||
{ key: 'naOntbijt', label: '2 uur na ontbijt', targetMin: 5.4, targetMax: 6.7, momentId: 'Ontbijt' },
|
||||
{ key: 'naLunch', label: '2 uur na lunch', targetMin: 5.4, targetMax: 6.7, momentId: 'Lunch' },
|
||||
{ key: 'naAvondeten', label: '2 uur na avondeten', targetMin: 5.4, targetMax: 6.7, momentId: 'Avondeten' }
|
||||
];
|
||||
|
||||
// ===== Standaard portiegroottes per categorie =====
|
||||
|
|
@ -2704,48 +2711,102 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
}
|
||||
}
|
||||
|
||||
function renderGlucoseSection() {
|
||||
const grid = document.getElementById('glucoseGrid');
|
||||
if (!grid) return;
|
||||
// ===== Glucose — Inline per eetmoment =====
|
||||
|
||||
function renderNuchterCard() {
|
||||
const m = PRICKMOMENTEN.find(p => p.key === 'nuchter');
|
||||
if (!m) return '';
|
||||
ensureGlucoseDay(activeDate);
|
||||
const value = glucose[activeDate]?.['nuchter'] ?? null;
|
||||
const status = isGlucoseInRange(value, 'nuchter');
|
||||
|
||||
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';
|
||||
}
|
||||
|
||||
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 : '';
|
||||
|
||||
const displayValue = (value !== null && value !== undefined) ? value : '';
|
||||
return `
|
||||
<li class="nuchter-card ${statusClass}">
|
||||
<div class="nuchter-card-header">
|
||||
<span class="nuchter-card-icon">🩸</span>
|
||||
<span class="nuchter-card-label">Nuchter (voor ontbijt)</span>
|
||||
<span class="nuchter-card-range">< ${m.targetMax}</span>
|
||||
</div>
|
||||
<div class="nuchter-card-body">
|
||||
<div class="glucose-input-wrapper">
|
||||
<input type="number" class="glucose-input"
|
||||
value="${displayValue}"
|
||||
data-moment="nuchter"
|
||||
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>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
// 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);
|
||||
function renderInlineGlucoseItem(m) {
|
||||
ensureGlucoseDay(activeDate);
|
||||
const value = glucose[activeDate]?.[m.key] ?? null;
|
||||
const status = isGlucoseInRange(value, m.key);
|
||||
|
||||
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>
|
||||
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();
|
||||
shortLabel = shortLabel.charAt(0).toUpperCase() + shortLabel.slice(1);
|
||||
|
||||
return `
|
||||
<div class="glucose-inline ${statusClass}" data-moment-key="${m.key}">
|
||||
<div class="glucose-inline-left">
|
||||
<span class="glucose-inline-icon">🩸</span>
|
||||
<span class="glucose-inline-label">${shortLabel}</span>
|
||||
<span class="glucose-inline-range">${m.targetMin}–${m.targetMax}</span>
|
||||
</div>
|
||||
<div class="glucose-inline-right">
|
||||
<div class="glucose-input-wrapper">
|
||||
<input type="number" class="glucose-input"
|
||||
value="${displayValue}"
|
||||
|
|
@ -2760,11 +2821,16 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
<span class="glucose-status-text">${statusText}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function attachGlucoseInputHandlers() {
|
||||
document.querySelectorAll('.glucose-input').forEach(input => {
|
||||
// Avoid double-binding
|
||||
if (input.dataset.glucoseBound) return;
|
||||
input.dataset.glucoseBound = 'true';
|
||||
|
||||
// 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);
|
||||
|
|
@ -2778,11 +2844,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
if (glucose[activeDate][moment] !== val) {
|
||||
glucose[activeDate][moment] = val;
|
||||
saveGlucoseToStorage();
|
||||
renderGlucoseSection();
|
||||
updateGlucoseUI(moment);
|
||||
}
|
||||
});
|
||||
|
||||
// Enter key also saves
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
input.blur();
|
||||
|
|
@ -2791,6 +2856,28 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
});
|
||||
}
|
||||
|
||||
function updateGlucoseUI(momentKey) {
|
||||
const m = PRICKMOMENTEN.find(p => p.key === momentKey);
|
||||
if (!m) return;
|
||||
|
||||
if (m.momentId === null) {
|
||||
// Update nuchter card
|
||||
const card = document.querySelector('.nuchter-card');
|
||||
if (card) {
|
||||
card.outerHTML = renderNuchterCard();
|
||||
}
|
||||
} else {
|
||||
// Update inline glucose in eetmoment card
|
||||
const el = document.querySelector(`.glucose-inline[data-moment-key="${momentKey}"]`);
|
||||
if (el) {
|
||||
el.outerHTML = renderInlineGlucoseItem(m);
|
||||
}
|
||||
}
|
||||
|
||||
// Re-attach handlers on replaced elements
|
||||
attachGlucoseInputHandlers();
|
||||
}
|
||||
|
||||
// ===== Daily Carb Limit =====
|
||||
const DEFAULT_CARB_LIMIT = 175; // grams per day
|
||||
|
||||
|
|
@ -3184,12 +3271,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
// Progress bar
|
||||
renderProgressBar(totaal);
|
||||
|
||||
// Glucose section
|
||||
renderGlucoseSection();
|
||||
|
||||
// Eating moments
|
||||
// Eating moments — prepend nuchter card, then eetmoment cards with inline glucose
|
||||
const listEl = document.getElementById('eetmomentList');
|
||||
listEl.innerHTML = EETMOMENTEN.map((moment, mi) => {
|
||||
const nuchterHtml = renderNuchterCard();
|
||||
listEl.innerHTML = nuchterHtml + EETMOMENTEN.map((moment, mi) => {
|
||||
const items = dayData[moment.id] || [];
|
||||
const momentKh = berekenEetmomentKh(activeDate, moment.id);
|
||||
const roundedKh = Math.round(momentKh);
|
||||
|
|
@ -3275,6 +3360,9 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
}).join('');
|
||||
|
||||
const cardOverLimit = overLimit && momentKh > 0;
|
||||
// Check if this eetmoment has a matching glucose moment
|
||||
const glucoseMoment = PRICKMOMENTEN.find(p => p.momentId === moment.id);
|
||||
const inlineGlucoseHtml = glucoseMoment ? renderInlineGlucoseItem(glucoseMoment) : '';
|
||||
|
||||
return `
|
||||
<li class="eetmoment-card${cardOverLimit ? ' over-limit' : ''}" style="--i:${mi}">
|
||||
|
|
@ -3284,9 +3372,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
<span class="eetmoment-name">${moment.name}</span>
|
||||
</div>
|
||||
<span class="eetmoment-kh">${roundedKh > 0 ? formatKh(roundedKh) + ' g' : '—'}</span>
|
||||
<span style="font-size:0.8rem;color:var(--text-muted)">${items.length > 0 ? '<i class="fas fa-chevron-down"></i>' : ''}</span>
|
||||
<span style="font-size:0.8rem;color:var(--text-muted)">${items.length > 0 ? '<i class=\"fas fa-chevron-down\"></i>' : ''}</span>
|
||||
</div>
|
||||
${items.length > 0 ? `<ul class="eetmoment-items">${itemsHtml}</ul>` : ''}
|
||||
${inlineGlucoseHtml}
|
||||
<div class="eetmoment-add-btn" data-moment="${moment.id}">
|
||||
<span>+</span> Voedingsmiddel toevoegen
|
||||
</div>
|
||||
|
|
@ -3379,6 +3468,9 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
// Empty state
|
||||
const hasItems = EETMOMENTEN.some(m => (dayData[m.id] || []).length > 0);
|
||||
document.getElementById('diaryEmpty').classList.toggle('hidden', hasItems);
|
||||
|
||||
// Attach glucose input handlers (nuchter card + inline glucose)
|
||||
attachGlucoseInputHandlers();
|
||||
}
|
||||
|
||||
function showDetail(item) {
|
||||
|
|
|
|||
|
|
@ -3,38 +3,41 @@ const { test, expect } = require('@playwright/test');
|
|||
const BASE = 'https://eetdagboek.vantwout.dev';
|
||||
|
||||
/**
|
||||
* Helpers for glucose tests
|
||||
* Helpers for glucose tests — inline per eetmoment
|
||||
*/
|
||||
|
||||
/** Navigate to diary tab and wait for render */
|
||||
async function openDiary(page) {
|
||||
await page.locator('#navDagboek').click();
|
||||
await page.waitForTimeout(600);
|
||||
// Wait for glucose section to render
|
||||
await expect(page.locator('.glucose-section')).toBeVisible({ timeout: 5000 });
|
||||
// Wait for nuchter card to render
|
||||
await expect(page.locator('.nuchter-card')).toBeVisible({ timeout: 5000 });
|
||||
}
|
||||
|
||||
/** Fill a glucose input and trigger save-on-blur */
|
||||
async function setGlucoseValue(page, momentKey, value) {
|
||||
const input = page.locator(`input.glucose-input[data-moment="${momentKey}"]`);
|
||||
await input.fill(String(value));
|
||||
// Trigger blur — saves to localStorage and re-renders the grid
|
||||
// Trigger blur — saves to localStorage and re-renders just the glucose UI
|
||||
await input.evaluate(el => el.blur());
|
||||
// Wait for re-render to complete
|
||||
await page.waitForTimeout(400);
|
||||
}
|
||||
|
||||
/** Get the parent .glucose-item for a given moment */
|
||||
function glucoseItem(page, momentKey) {
|
||||
return page.locator(`input.glucose-input[data-moment="${momentKey}"]`).locator('..').locator('..');
|
||||
/** Get the parent glucose container for a given moment */
|
||||
function glucoseContainer(page, momentKey) {
|
||||
if (momentKey === 'nuchter') {
|
||||
return page.locator('.nuchter-card');
|
||||
}
|
||||
return page.locator(`.glucose-inline[data-moment-key="${momentKey}"]`);
|
||||
}
|
||||
|
||||
/** Get status text element for a given moment */
|
||||
function statusText(page, momentKey) {
|
||||
return page.locator(`input.glucose-input[data-moment="${momentKey}"]`)
|
||||
.locator('..') // .glucose-input-wrapper
|
||||
.locator('..') // .glucose-item
|
||||
.locator('.glucose-status-text');
|
||||
if (momentKey === 'nuchter') {
|
||||
return page.locator('.nuchter-card .glucose-status-text');
|
||||
}
|
||||
return page.locator(`.glucose-inline[data-moment-key="${momentKey}"] .glucose-status-text`);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
|
|
@ -47,33 +50,33 @@ test.describe('Glucose-metingen — invoer, validatie, kleurcodering, persistent
|
|||
await page.goto(BASE);
|
||||
await openDiary(page);
|
||||
|
||||
// Section structure
|
||||
await expect(page.locator('.glucose-section')).toBeVisible();
|
||||
await expect(page.locator('.glucose-title')).toHaveText('Glucose');
|
||||
await expect(page.locator('.glucose-unit-label')).toHaveText('mmol/L');
|
||||
await expect(page.locator('.glucose-header .glucose-icon i')).toBeVisible();
|
||||
// Nuchter card structure
|
||||
await expect(page.locator('.nuchter-card')).toBeVisible();
|
||||
await expect(page.locator('.nuchter-card-label')).toHaveText('Nuchter (voor ontbijt)');
|
||||
await expect(page.locator('.nuchter-card-range')).toHaveText('< 5.4');
|
||||
|
||||
// 4 grid items
|
||||
const items = page.locator('.glucose-item');
|
||||
await expect(items).toHaveCount(4);
|
||||
// Inline glucose in eetmoment cards (Ontbijt, Lunch, Avondeten)
|
||||
const moments = [
|
||||
{ key: 'naOntbijt', label: 'Ontbijt', range: '5.4\u20136.7' },
|
||||
{ key: 'naLunch', label: 'Lunch', range: '5.4\u20136.7' },
|
||||
{ key: 'naAvondeten', label: 'Avondeten', range: '5.4\u20136.7' },
|
||||
];
|
||||
|
||||
// Labels
|
||||
await expect(items.nth(0).locator('.glucose-item-label')).toHaveText('Nuchter');
|
||||
await expect(items.nth(1).locator('.glucose-item-label')).toHaveText('Ontbijt');
|
||||
await expect(items.nth(2).locator('.glucose-item-label')).toHaveText('Lunch');
|
||||
await expect(items.nth(3).locator('.glucose-item-label')).toHaveText('Avondeten');
|
||||
// 3 inline glucose items should exist
|
||||
const inlineItems = page.locator('.glucose-inline');
|
||||
await expect(inlineItems).toHaveCount(3);
|
||||
|
||||
// Target ranges
|
||||
await expect(items.nth(0).locator('.glucose-item-range')).toHaveText('< 5.4');
|
||||
await expect(items.nth(1).locator('.glucose-item-range')).toHaveText('5.4\u20136.7');
|
||||
await expect(items.nth(2).locator('.glucose-item-range')).toHaveText('5.4\u20136.7');
|
||||
await expect(items.nth(3).locator('.glucose-item-range')).toHaveText('5.4\u20136.7');
|
||||
for (let i = 0; i < moments.length; i++) {
|
||||
const m = moments[i];
|
||||
const container = page.locator(`.glucose-inline[data-moment-key="${m.key}"]`);
|
||||
await expect(container.locator('.glucose-inline-label')).toHaveText(m.label);
|
||||
await expect(container.locator('.glucose-inline-range')).toHaveText(m.range);
|
||||
}
|
||||
|
||||
// Input attributes
|
||||
const moments = ['nuchter', 'naOntbijt', 'naLunch', 'naAvondeten'];
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const input = items.nth(i).locator('.glucose-input');
|
||||
await expect(input).toHaveAttribute('data-moment', moments[i]);
|
||||
// Input attributes — check 4 inputs
|
||||
const inputMoments = ['nuchter', 'naOntbijt', 'naLunch', 'naAvondeten'];
|
||||
for (const moment of inputMoments) {
|
||||
const input = page.locator(`input.glucose-input[data-moment="${moment}"]`);
|
||||
await expect(input).toHaveAttribute('step', '0.1');
|
||||
await expect(input).toHaveAttribute('min', '0');
|
||||
await expect(input).toHaveAttribute('max', '30');
|
||||
|
|
@ -90,11 +93,10 @@ test.describe('Glucose-metingen — invoer, validatie, kleurcodering, persistent
|
|||
|
||||
await setGlucoseValue(page, 'nuchter', 5.1);
|
||||
|
||||
// Check the item class and status
|
||||
const item = glucoseItem(page, 'nuchter');
|
||||
await expect(item).toHaveClass(/glucose-good/);
|
||||
await expect(item.locator('.glucose-status-icon')).toContainText('\u2705'); // ✅
|
||||
await expect(item.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
const container = glucoseContainer(page, 'nuchter');
|
||||
await expect(container).toHaveClass(/glucose-good/);
|
||||
await expect(container.locator('.glucose-status-icon')).toContainText('\u2705'); // ✅
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
});
|
||||
|
||||
// ---- 3. Nuchter ≥ 5.4 (rood) ----
|
||||
|
|
@ -105,9 +107,9 @@ test.describe('Glucose-metingen — invoer, validatie, kleurcodering, persistent
|
|||
|
||||
await setGlucoseValue(page, 'nuchter', 5.4);
|
||||
|
||||
const item = glucoseItem(page, 'nuchter');
|
||||
await expect(item).toHaveClass(/glucose-bad/);
|
||||
await expect(item.locator('.glucose-status-text')).toHaveText('Te hoog');
|
||||
const container = glucoseContainer(page, 'nuchter');
|
||||
await expect(container).toHaveClass(/glucose-bad/);
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Te hoog');
|
||||
});
|
||||
|
||||
// ---- 4. Postprandiaal < 5.4 (rood/te laag) ----
|
||||
|
|
@ -118,9 +120,9 @@ test.describe('Glucose-metingen — invoer, validatie, kleurcodering, persistent
|
|||
|
||||
await setGlucoseValue(page, 'naOntbijt', 5.3);
|
||||
|
||||
const item = glucoseItem(page, 'naOntbijt');
|
||||
await expect(item).toHaveClass(/glucose-bad/);
|
||||
await expect(item.locator('.glucose-status-text')).toHaveText('Te laag');
|
||||
const container = glucoseContainer(page, 'naOntbijt');
|
||||
await expect(container).toHaveClass(/glucose-bad/);
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Te laag');
|
||||
});
|
||||
|
||||
// ---- 5. Postprandiaal binnen range (groen) ----
|
||||
|
|
@ -131,9 +133,9 @@ test.describe('Glucose-metingen — invoer, validatie, kleurcodering, persistent
|
|||
|
||||
await setGlucoseValue(page, 'naOntbijt', 6.0);
|
||||
|
||||
const item = glucoseItem(page, 'naOntbijt');
|
||||
await expect(item).toHaveClass(/glucose-good/);
|
||||
await expect(item.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
const container = glucoseContainer(page, 'naOntbijt');
|
||||
await expect(container).toHaveClass(/glucose-good/);
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
});
|
||||
|
||||
// ---- 6. Postprandiaal > 6.7 (rood/te hoog) ----
|
||||
|
|
@ -144,9 +146,9 @@ test.describe('Glucose-metingen — invoer, validatie, kleurcodering, persistent
|
|||
|
||||
await setGlucoseValue(page, 'naLunch', 6.8);
|
||||
|
||||
const item = glucoseItem(page, 'naLunch');
|
||||
await expect(item).toHaveClass(/glucose-bad/);
|
||||
await expect(item.locator('.glucose-status-text')).toHaveText('Te hoog');
|
||||
const container = glucoseContainer(page, 'naLunch');
|
||||
await expect(container).toHaveClass(/glucose-bad/);
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Te hoog');
|
||||
});
|
||||
|
||||
// ---- 7. Leeg veld — grijze 'nog meten' indicator ----
|
||||
|
|
@ -155,31 +157,24 @@ test.describe('Glucose-metingen — invoer, validatie, kleurcodering, persistent
|
|||
await page.goto(BASE);
|
||||
await openDiary(page);
|
||||
|
||||
// All 4 items should start empty
|
||||
const items = page.locator('.glucose-item');
|
||||
const count = await items.count();
|
||||
expect(count).toBe(4);
|
||||
// Nuchter card should start empty
|
||||
const nuchter = glucoseContainer(page, 'nuchter');
|
||||
await expect(nuchter).toHaveClass(/glucose-empty/);
|
||||
await expect(nuchter.locator('.glucose-status-text')).toHaveText('Nog meten');
|
||||
await expect(nuchter.locator('.glucose-status-icon')).toContainText('\u23F9');
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
await expect(items.nth(i)).toHaveClass(/glucose-empty/);
|
||||
}
|
||||
|
||||
const statusTexts = page.locator('.glucose-status-text');
|
||||
const texts = await statusTexts.allTextContents();
|
||||
for (const t of texts) {
|
||||
expect(t).toBe('Nog meten');
|
||||
}
|
||||
|
||||
// Status icons should be ⏹️
|
||||
const icons = page.locator('.glucose-status-icon');
|
||||
const iconTexts = await icons.allTextContents();
|
||||
for (const icon of iconTexts) {
|
||||
expect(icon.includes('\u23F9\uFE0F') || icon.includes('\u23F9')).toBeTruthy();
|
||||
// Inline items should start empty
|
||||
const inlineMoments = ['naOntbijt', 'naLunch', 'naAvondeten'];
|
||||
for (const moment of inlineMoments) {
|
||||
const container = glucoseContainer(page, moment);
|
||||
await expect(container).toHaveClass(/glucose-empty/);
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Nog meten');
|
||||
}
|
||||
|
||||
// All inputs should have empty value
|
||||
const inputs = page.locator('.glucose-input');
|
||||
const inputCount = await inputs.count();
|
||||
expect(inputCount).toBe(4);
|
||||
for (let i = 0; i < inputCount; i++) {
|
||||
await expect(inputs.nth(i)).toHaveValue('');
|
||||
}
|
||||
|
|
@ -195,20 +190,20 @@ test.describe('Glucose-metingen — invoer, validatie, kleurcodering, persistent
|
|||
await setGlucoseValue(page, 'nuchter', 5.1);
|
||||
|
||||
// Verify it's shown correctly
|
||||
let item = glucoseItem(page, 'nuchter');
|
||||
await expect(item).toHaveClass(/glucose-good/);
|
||||
await expect(item.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
await expect(item.locator('.glucose-input')).toHaveValue('5.1');
|
||||
let container = glucoseContainer(page, 'nuchter');
|
||||
await expect(container).toHaveClass(/glucose-good/);
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
await expect(container.locator('.glucose-input')).toHaveValue('5.1');
|
||||
|
||||
// Reload the page
|
||||
await page.goto(BASE);
|
||||
await openDiary(page);
|
||||
|
||||
// Value should still be there
|
||||
item = glucoseItem(page, 'nuchter');
|
||||
await expect(item).toHaveClass(/glucose-good/);
|
||||
await expect(item.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
await expect(item.locator('.glucose-input')).toHaveValue('5.1');
|
||||
container = glucoseContainer(page, 'nuchter');
|
||||
await expect(container).toHaveClass(/glucose-good/);
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
await expect(container.locator('.glucose-input')).toHaveValue('5.1');
|
||||
});
|
||||
|
||||
// ---- 9. Datum-navigatie — andere datum andere waarden ----
|
||||
|
|
@ -221,23 +216,23 @@ test.describe('Glucose-metingen — invoer, validatie, kleurcodering, persistent
|
|||
await setGlucoseValue(page, 'nuchter', 5.1);
|
||||
|
||||
// Verify today shows the value
|
||||
let item = glucoseItem(page, 'nuchter');
|
||||
await expect(item).toHaveClass(/glucose-good/);
|
||||
let container = glucoseContainer(page, 'nuchter');
|
||||
await expect(container).toHaveClass(/glucose-good/);
|
||||
|
||||
// Navigate to tomorrow
|
||||
await page.locator('#dayNext').click();
|
||||
await page.waitForTimeout(600);
|
||||
|
||||
// Tomorrow should have all empty glucose fields
|
||||
item = glucoseItem(page, 'nuchter');
|
||||
await expect(item).toHaveClass(/glucose-empty/);
|
||||
await expect(item.locator('.glucose-status-text')).toHaveText('Nog meten');
|
||||
await expect(item.locator('.glucose-input')).toHaveValue('');
|
||||
container = glucoseContainer(page, 'nuchter');
|
||||
await expect(container).toHaveClass(/glucose-empty/);
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Nog meten');
|
||||
await expect(container.locator('.glucose-input')).toHaveValue('');
|
||||
|
||||
// Also check the other moments are empty too
|
||||
for (const moment of ['naOntbijt', 'naLunch', 'naAvondeten']) {
|
||||
const otherItem = glucoseItem(page, moment);
|
||||
await expect(otherItem).toHaveClass(/glucose-empty/);
|
||||
const otherContainer = glucoseContainer(page, moment);
|
||||
await expect(otherContainer).toHaveClass(/glucose-empty/);
|
||||
}
|
||||
|
||||
// Navigate back to today
|
||||
|
|
@ -245,10 +240,10 @@ test.describe('Glucose-metingen — invoer, validatie, kleurcodering, persistent
|
|||
await page.waitForTimeout(600);
|
||||
|
||||
// Today's value should still be there
|
||||
item = glucoseItem(page, 'nuchter');
|
||||
await expect(item).toHaveClass(/glucose-good/);
|
||||
await expect(item.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
await expect(item.locator('.glucose-input')).toHaveValue('5.1');
|
||||
container = glucoseContainer(page, 'nuchter');
|
||||
await expect(container).toHaveClass(/glucose-good/);
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
await expect(container.locator('.glucose-input')).toHaveValue('5.1');
|
||||
});
|
||||
|
||||
// ---- 10. Decimale invoer — step 0.1 ----
|
||||
|
|
@ -263,18 +258,18 @@ test.describe('Glucose-metingen — invoer, validatie, kleurcodering, persistent
|
|||
|
||||
// Enter 5.5 (decimal)
|
||||
await setGlucoseValue(page, 'nuchter', 5.5);
|
||||
let item = glucoseItem(page, 'nuchter');
|
||||
await expect(item.locator('.glucose-input')).toHaveValue('5.5');
|
||||
let container = glucoseContainer(page, 'nuchter');
|
||||
await expect(container.locator('.glucose-input')).toHaveValue('5.5');
|
||||
// 5.5 ≥ 5.4 for nuchter → should be bad/Te hoog
|
||||
await expect(item).toHaveClass(/glucose-bad/);
|
||||
await expect(item.locator('.glucose-status-text')).toHaveText('Te hoog');
|
||||
await expect(container).toHaveClass(/glucose-bad/);
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Te hoog');
|
||||
|
||||
// Now test a postprandial decimal value
|
||||
await setGlucoseValue(page, 'naOntbijt', 6.2);
|
||||
item = glucoseItem(page, 'naOntbijt');
|
||||
await expect(item.locator('.glucose-input')).toHaveValue('6.2');
|
||||
await expect(item).toHaveClass(/glucose-good/);
|
||||
await expect(item.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
container = glucoseContainer(page, 'naOntbijt');
|
||||
await expect(container.locator('.glucose-input')).toHaveValue('6.2');
|
||||
await expect(container).toHaveClass(/glucose-good/);
|
||||
await expect(container.locator('.glucose-status-text')).toHaveText('Binnen range');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue