Updates and fixes
This commit is contained in:
Dayowe
parent
f781bbae74
commit
b552b5e88e
136
iframe.html
136
iframe.html
@ -1465,6 +1465,15 @@
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Warning styles for missing energy content */
|
||||
.dog-calculator-warning {
|
||||
color: #e11d48;
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
text-align: left;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.dog-calculator-total-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -1845,6 +1854,7 @@
|
||||
this.redistributePercentages();
|
||||
this.renderFoodSource(foodSource);
|
||||
this.updateAddButton();
|
||||
this.updateRemoveButtons();
|
||||
this.refreshAllPercentageUI();
|
||||
}
|
||||
|
||||
@ -1868,6 +1878,7 @@
|
||||
this.redistributePercentages();
|
||||
this.updateFoodSourceNames();
|
||||
this.updateAddButton();
|
||||
this.updateRemoveButtons();
|
||||
this.refreshAllPercentageUI();
|
||||
}
|
||||
|
||||
@ -2246,6 +2257,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
updateRemoveButtons() {
|
||||
// Show/hide remove buttons based on whether we have more than one source
|
||||
const hasMultipleSources = this.foodSources.length > 1;
|
||||
|
||||
this.foodSources.forEach(fs => {
|
||||
const removeBtn = document.getElementById(`remove-${fs.id}`);
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = hasMultipleSources ? 'block' : 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
renderFoodSource(foodSource) {
|
||||
const container = document.getElementById('foodSources');
|
||||
if (!container) return;
|
||||
@ -2254,14 +2277,13 @@
|
||||
<div class="dog-calculator-food-source-card" id="foodSource-${foodSource.id}">
|
||||
<div class="dog-calculator-food-source-header">
|
||||
<input type="text" class="dog-calculator-food-source-name-input" id="food-title-${foodSource.id}" value="${foodSource.name}" placeholder="Enter food name" maxlength="50" title="Click to edit food source name">
|
||||
${this.foodSources.length > 1 ? `<button class="dog-calculator-remove-food-btn" id="remove-${foodSource.id}" type="button" title="Remove this food source">×</button>` : ''}
|
||||
<button class="dog-calculator-remove-food-btn" id="remove-${foodSource.id}" type="button" title="Remove this food source" style="display: ${this.foodSources.length > 1 ? 'block' : 'none'}">×</button>
|
||||
</div>
|
||||
|
||||
<div class="dog-calculator-input-group">
|
||||
<div class="dog-calculator-form-group">
|
||||
<label for="energy-${foodSource.id}">Energy Content:</label>
|
||||
<input type="number" id="energy-${foodSource.id}" min="1" step="1" placeholder="Enter energy content" value="${foodSource.energy}">
|
||||
<div id="energy-error-${foodSource.id}" class="dog-calculator-error dog-calculator-hidden">Please enter a valid energy content</div>
|
||||
</div>
|
||||
<div class="dog-calculator-form-group">
|
||||
<label for="energy-unit-${foodSource.id}">Unit:</label>
|
||||
@ -2273,6 +2295,7 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="energy-error-${foodSource.id}" class="dog-calculator-error dog-calculator-hidden">Please enter a valid energy content</div>
|
||||
|
||||
<div class="dog-calculator-percentage-group">
|
||||
<label class="dog-calculator-percentage-label" for="percentage-slider-${foodSource.id}">
|
||||
@ -2796,11 +2819,22 @@
|
||||
percentage: fs.percentage,
|
||||
dailyGrams: dailyGramsForThisFood,
|
||||
calories: dailyCaloriesForThisFood,
|
||||
isLocked: fs.isLocked
|
||||
isLocked: fs.isLocked,
|
||||
hasEnergyContent: true
|
||||
});
|
||||
|
||||
totalDailyGrams += dailyGramsForThisFood;
|
||||
hasValidFoods = true;
|
||||
} else if (fs.percentage > 0) {
|
||||
// Include food sources without energy content but show them as needing energy content
|
||||
foodBreakdowns.push({
|
||||
name: fs.name,
|
||||
percentage: fs.percentage,
|
||||
dailyGrams: 0,
|
||||
calories: 0,
|
||||
isLocked: fs.isLocked,
|
||||
hasEnergyContent: false
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -2814,8 +2848,43 @@
|
||||
});
|
||||
|
||||
dailyFoodResults.style.display = 'none';
|
||||
foodAmountsSection.style.display = 'none';
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
|
||||
// If we have any food sources without energy content, still show the breakdown section
|
||||
if (foodBreakdowns.length > 0) {
|
||||
// Show food amounts section with warnings for missing energy content
|
||||
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
|
||||
|
||||
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
|
||||
const lockIndicator = breakdown.isLocked ? '<span class="dog-calculator-lock-indicator">🔒</span>' : '';
|
||||
|
||||
return `
|
||||
<div class="dog-calculator-food-amount-item">
|
||||
<div class="dog-calculator-food-amount-label">
|
||||
<span>${breakdown.name}</span>
|
||||
<span class="dog-calculator-food-percentage">${breakdown.percentage}%</span>
|
||||
${lockIndicator}
|
||||
</div>
|
||||
<div class="dog-calculator-food-amount-value dog-calculator-warning" title="Enter energy content to calculate amount">
|
||||
⚠️
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
if (foodAmountsList) {
|
||||
foodAmountsList.innerHTML = foodAmountsHTML;
|
||||
}
|
||||
|
||||
if (totalAmountDisplay) {
|
||||
totalAmountDisplay.textContent = "Enter energy content for all foods";
|
||||
}
|
||||
|
||||
foodAmountsSection.style.display = 'block';
|
||||
this.sendHeightToParent();
|
||||
} else {
|
||||
foodAmountsSection.style.display = 'none';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2825,12 +2894,18 @@
|
||||
|
||||
// Update per-food breakdown
|
||||
if (foodBreakdownList && foodBreakdowns.length > 1) {
|
||||
const breakdownHTML = foodBreakdowns.map(breakdown => `
|
||||
<div class="dog-calculator-food-result-item">
|
||||
<span class="dog-calculator-food-result-label">${breakdown.name} (${breakdown.percentage}%${breakdown.isLocked ? ' - locked' : ''}):</span>
|
||||
<span class="dog-calculator-food-result-value">${this.formatNumber(breakdown.dailyGrams, 1)} g/day</span>
|
||||
</div>
|
||||
`).join('');
|
||||
const breakdownHTML = foodBreakdowns.map(breakdown => {
|
||||
const valueContent = breakdown.hasEnergyContent
|
||||
? `${this.formatNumber(breakdown.dailyGrams, 1)} g/day`
|
||||
: `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||
|
||||
return `
|
||||
<div class="dog-calculator-food-result-item">
|
||||
<span class="dog-calculator-food-result-label">${breakdown.name} (${breakdown.percentage}%${breakdown.isLocked ? ' - locked' : ''}):</span>
|
||||
<span class="dog-calculator-food-result-value">${valueContent}</span>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
foodBreakdownList.innerHTML = breakdownHTML;
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'block';
|
||||
@ -2844,22 +2919,39 @@
|
||||
|
||||
// Build HTML for individual food amounts
|
||||
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
|
||||
const totalGramsForDays = breakdown.dailyGrams * numDays;
|
||||
const convertedAmount = this.convertUnits(totalGramsForDays, unit);
|
||||
const lockIndicator = breakdown.isLocked ? '<span class="dog-calculator-lock-indicator">🔒</span>' : '';
|
||||
|
||||
return `
|
||||
<div class="dog-calculator-food-amount-item">
|
||||
<div class="dog-calculator-food-amount-label">
|
||||
<span>${breakdown.name}</span>
|
||||
<span class="dog-calculator-food-percentage">${breakdown.percentage}%</span>
|
||||
${lockIndicator}
|
||||
if (!breakdown.hasEnergyContent) {
|
||||
// Show warning for food sources without energy content
|
||||
return `
|
||||
<div class="dog-calculator-food-amount-item">
|
||||
<div class="dog-calculator-food-amount-label">
|
||||
<span>${breakdown.name}</span>
|
||||
<span class="dog-calculator-food-percentage">${breakdown.percentage}%</span>
|
||||
${lockIndicator}
|
||||
</div>
|
||||
<div class="dog-calculator-food-amount-value dog-calculator-warning" title="Enter energy content to calculate amount">
|
||||
⚠️
|
||||
</div>
|
||||
</div>
|
||||
<div class="dog-calculator-food-amount-value">
|
||||
${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
|
||||
`;
|
||||
} else {
|
||||
const totalGramsForDays = breakdown.dailyGrams * numDays;
|
||||
const convertedAmount = this.convertUnits(totalGramsForDays, unit);
|
||||
|
||||
return `
|
||||
<div class="dog-calculator-food-amount-item">
|
||||
<div class="dog-calculator-food-amount-label">
|
||||
<span>${breakdown.name}</span>
|
||||
<span class="dog-calculator-food-percentage">${breakdown.percentage}%</span>
|
||||
${lockIndicator}
|
||||
</div>
|
||||
<div class="dog-calculator-food-amount-value">
|
||||
${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
}
|
||||
}).join('');
|
||||
|
||||
// Calculate and display total
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user