diff --git a/iframe.html b/iframe.html
index 624e892..983d804 100644
--- a/iframe.html
+++ b/iframe.html
@@ -497,9 +497,8 @@
.dog-calculator-container .dog-calculator-meal-input {
display: inline-flex;
align-items: center;
- justify-content: center;
gap: 6px;
- margin-left: auto;
+ margin: 0 auto;
}
.dog-calculator-container .dog-calculator-meal-input span {
@@ -660,6 +659,19 @@
background: #f19a5f;
color: white;
}
+
+ .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled:hover {
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ }
.dog-calculator-container.theme-dark .dog-calculator-results {
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
@@ -853,6 +865,19 @@
background: #f19a5f;
color: white;
}
+
+ .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled:hover {
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ }
.dog-calculator-container.theme-system .dog-calculator-results {
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
@@ -1840,6 +1865,20 @@
color: white;
}
+ .dog-calculator-unit-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-unit-btn:disabled:hover {
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ transform: none;
+ }
+
/* Hidden unit select for compatibility */
.dog-calculator-unit-select-hidden {
display: none;
@@ -2117,6 +2156,7 @@
+
@@ -2133,6 +2173,7 @@
+
@@ -2830,7 +2871,36 @@ const CALCULATOR_CONFIG = {
if (energyInput) {
energyInput.addEventListener('input', () => {
this.updateFoodSourceData(id, 'energy', energyInput.value);
- this.updateFoodCalculations();
+
+ // Auto-select cups when entering energy for kcal/cup
+ const foodSource = this.foodSources.find(fs => fs.id === id);
+ if (foodSource && foodSource.energyUnit === 'kcalcup' && parseFloat(energyInput.value) > 0) {
+ const unitSelect = document.getElementById('unit');
+ const cupsButton = document.getElementById('cupsButton');
+
+ // First check if cups button will be enabled after update
+ const willEnableCups = this.foodSources.some(fs =>
+ fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+ );
+
+ if (willEnableCups && unitSelect) {
+ // Set cups BEFORE updating calculations
+ unitSelect.value = 'cups';
+ unitSelect.setAttribute('value', 'cups');
+ this.setActiveUnitButton('cups');
+
+ // Enable the cups button manually since we know it will be valid
+ if (cupsButton) {
+ cupsButton.disabled = false;
+ cupsButton.title = 'Show amounts in cups';
+ }
+ }
+
+ // Now update calculations with cups already selected
+ this.updateFoodCalculations();
+ } else {
+ this.updateFoodCalculations();
+ }
});
energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
}
@@ -2838,7 +2908,54 @@ const CALCULATOR_CONFIG = {
if (energyUnitSelect) {
energyUnitSelect.addEventListener('change', () => {
this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
- this.updateFoodCalculations();
+
+ // Auto-select the most appropriate unit based on energy unit
+ const unitSelect = document.getElementById('unit');
+ const energyInput = document.getElementById(`energy-${id}`);
+
+ if (unitSelect) {
+ switch(energyUnitSelect.value) {
+ case 'kcalcup':
+ // Check if we have energy value to enable cups
+ const foodSource = this.foodSources.find(fs => fs.id === id);
+ if (foodSource && foodSource.energy && parseFloat(foodSource.energy) > 0) {
+ // Set cups BEFORE updating calculations
+ unitSelect.value = 'cups';
+ unitSelect.setAttribute('value', 'cups');
+ this.setActiveUnitButton('cups');
+
+ // Enable the cups button manually
+ const cupsButton = document.getElementById('cupsButton');
+ if (cupsButton) {
+ cupsButton.disabled = false;
+ cupsButton.title = 'Show amounts in cups';
+ }
+ }
+ this.updateFoodCalculations();
+ break;
+ case 'kcal100g':
+ // For kcal/100g, select grams
+ unitSelect.value = 'g';
+ this.setActiveUnitButton('g');
+ this.updateFoodCalculations();
+ break;
+ case 'kcalkg':
+ // For kcal/kg, also select grams (or could be kg)
+ unitSelect.value = 'g';
+ this.setActiveUnitButton('g');
+ this.updateFoodCalculations();
+ break;
+ case 'kcalcan':
+ // For kcal/can, use grams as default (or ounces in imperial)
+ unitSelect.value = this.isImperial ? 'oz' : 'g';
+ this.setActiveUnitButton(unitSelect.value);
+ this.updateFoodCalculations();
+ break;
+ }
+ } else {
+ // No unit select, just update calculations
+ this.updateFoodCalculations();
+ }
});
}
@@ -3236,7 +3353,7 @@ const CALCULATOR_CONFIG = {
}
}
- convertUnits(grams, unit) {
+ convertUnits(grams, unit, foodSource = null) {
switch (unit) {
case 'kg':
return grams / 1000;
@@ -3244,6 +3361,18 @@ const CALCULATOR_CONFIG = {
return grams / 28.3495;
case 'lb':
return grams / 453.592;
+ case 'cups':
+ // For cups, we need to convert from grams worth of calories to cups
+ if (foodSource && foodSource.energyUnit === 'kcalcup' && foodSource.energy) {
+ // Get calories per 100g for this food
+ const caloriesPerGram = this.getFoodSourceEnergyPer100g(foodSource) / 100;
+ // Calculate total calories represented by these grams
+ const totalCalories = grams * caloriesPerGram;
+ // Divide by calories per cup to get number of cups
+ const caloriesPerCup = parseFloat(foodSource.energy);
+ return totalCalories / caloriesPerCup;
+ }
+ return null; // Cannot convert to cups without kcal/cup
default:
return grams;
}
@@ -3347,6 +3476,31 @@ const CALCULATOR_CONFIG = {
this.sendHeightToParent();
}
+ updateCupsButtonState() {
+ const cupsButton = document.getElementById('cupsButton');
+ if (!cupsButton) return;
+
+ // Check if any food source has kcal/cup selected
+ const hasKcalCup = this.foodSources.some(fs =>
+ fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+ );
+
+ if (hasKcalCup) {
+ cupsButton.disabled = false;
+ cupsButton.title = 'Show amounts in cups';
+ } else {
+ cupsButton.disabled = true;
+ cupsButton.title = 'Available when using kcal/cup measurement';
+
+ // If cups was selected, switch back to grams
+ const unitSelect = document.getElementById('unit');
+ if (unitSelect && unitSelect.value === 'cups') {
+ unitSelect.value = 'g';
+ this.setActiveUnitButton('g');
+ }
+ }
+ }
+
updateFoodCalculations() {
if (this.currentMER === 0) return;
@@ -3360,15 +3514,32 @@ const CALCULATOR_CONFIG = {
const foodBreakdownResults = document.getElementById('foodBreakdownResults');
const foodBreakdownList = document.getElementById('foodBreakdownList');
const feedingConfig = document.getElementById('feedingConfig');
+
+ // Update cups button state
+ this.updateCupsButtonState();
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
return;
}
const days = daysInput.value;
- const unit = unitSelect.value;
- const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
- const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+ let unit = unitSelect.value;
+
+ // Failsafe: if unit is empty string but cups button is active, use 'cups'
+ if (!unit || unit === '') {
+ const activeButton = document.querySelector('.dog-calculator-unit-btn.active');
+ if (activeButton) {
+ unit = activeButton.dataset.unit || 'g';
+ } else {
+ unit = 'g'; // Default fallback
+ }
+ }
+
+ const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : unit === 'lb' ? 'lb' : 'cups';
+ const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : unit === 'cups' ? 1 : 1;
+
+ // Debug: log what unit is being used
+ console.log('UpdateFoodCalculations - unit:', unit, 'unitLabel:', unitLabel);
// Determine frequency suffix for display
const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
@@ -3405,10 +3576,30 @@ const CALCULATOR_CONFIG = {
if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
- const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ let dailyGramsForThisFood;
+ let dailyCupsForThisFood = null;
+
+ // For kcal/cup, calculate cups directly from calories
+ if (fs.energyUnit === 'kcalcup' && fs.energy) {
+ const caloriesPerCup = parseFloat(fs.energy);
+ dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
+ // We still need grams for total calculation, use approximation
+ dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ console.log('Cups calculation:', {
+ caloriesPerCup,
+ dailyCaloriesForThisFood,
+ dailyCupsForThisFood,
+ dailyGramsForThisFood
+ });
+ } else {
+ // For other units, calculate grams normally
+ dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ }
// Calculate per-meal amounts if needed
const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
+ const displayCups = dailyCupsForThisFood !== null ?
+ (this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
foodBreakdowns.push({
@@ -3416,10 +3607,13 @@ const CALCULATOR_CONFIG = {
percentage: fs.percentage,
dailyGrams: dailyGramsForThisFood,
displayGrams: displayGrams,
+ dailyCups: dailyCupsForThisFood,
+ displayCups: displayCups,
calories: dailyCaloriesForThisFood,
displayCalories: displayCalories,
isLocked: fs.isLocked,
- hasEnergyContent: true
+ hasEnergyContent: true,
+ foodSource: fs // Store reference for cups conversion
});
totalDailyGrams += dailyGramsForThisFood;
@@ -3431,10 +3625,13 @@ const CALCULATOR_CONFIG = {
percentage: fs.percentage,
dailyGrams: 0,
displayGrams: 0,
+ dailyCups: null,
+ displayCups: null,
calories: 0,
displayCalories: 0,
isLocked: fs.isLocked,
- hasEnergyContent: false
+ hasEnergyContent: false,
+ foodSource: fs // Store reference for cups conversion
});
}
});
@@ -3498,7 +3695,15 @@ const CALCULATOR_CONFIG = {
dailyFoodResults.style.display = 'block';
// Show feeding configuration when we have valid foods
- if (feedingConfig) feedingConfig.style.display = 'block';
+ if (feedingConfig) {
+ feedingConfig.style.display = 'block';
+
+ // Ensure "Per day" is checked when feeding config becomes visible
+ const showDaily = document.getElementById('showDaily');
+ if (showDaily && !showDaily.checked && !document.getElementById('showPerMeal').checked) {
+ showDaily.checked = true;
+ }
+ }
// Show unit buttons when daily results are shown
const unitButtons = document.getElementById('unitButtons');
@@ -3507,9 +3712,21 @@ const CALCULATOR_CONFIG = {
// Update per-food breakdown
if (foodBreakdownList && foodBreakdowns.length > 1) {
const breakdownHTML = foodBreakdowns.map(breakdown => {
- const valueContent = breakdown.hasEnergyContent
- ? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
- : `
⚠️`;
+ let valueContent;
+ if (breakdown.hasEnergyContent) {
+ if (unit === 'cups') {
+ // For cups, use the pre-calculated cups value if available
+ if (breakdown.displayCups !== null) {
+ valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
+ } else {
+ valueContent = `
N/A`;
+ }
+ } else {
+ valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
+ }
+ } else {
+ valueContent = `
⚠️`;
+ }
return `
@@ -3529,8 +3746,40 @@ const CALCULATOR_CONFIG = {
// Update daily food value with correct units
const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
- const convertedTotal = this.convertUnits(displayTotal, unit);
- dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+ let convertedTotal;
+ let totalDisplayText;
+
+ if (unit === 'cups') {
+ console.log('Unit is cups, checking validity...');
+ // For cups, we can only show total if all foods with percentage > 0 have kcal/cup
+ const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+ .every(b => b.displayCups !== null && b.displayCups !== undefined);
+
+ console.log('Valid for cups?', validForCups, 'Breakdowns:', foodBreakdowns);
+
+ if (validForCups) {
+ // Calculate total cups using pre-calculated values
+ let totalCups = 0;
+ foodBreakdowns.forEach(breakdown => {
+ if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
+ totalCups += breakdown.displayCups;
+ }
+ });
+ console.log('Total cups display:', {
+ totalCups,
+ displayTotal,
+ foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
+ });
+ totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
+ } else {
+ totalDisplayText = 'Mixed units - see breakdown';
+ }
+ } else {
+ convertedTotal = this.convertUnits(displayTotal, unit);
+ totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+ }
+
+ dailyFoodValue.textContent = totalDisplayText;
// Build HTML for individual food amounts
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
@@ -3552,11 +3801,23 @@ const CALCULATOR_CONFIG = {
`;
} else {
// For multi-day calculations: show total amount for all days
- // But if in per-meal mode, multiply by meals per day as well
- const totalGramsForDays = this.showPerMeal
- ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
- : breakdown.dailyGrams * numDays;
- const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+ let amountDisplay;
+ if (unit === 'cups') {
+ // For cups, use pre-calculated cups value
+ if (breakdown.dailyCups !== null) {
+ const totalCupsForDays = breakdown.dailyCups * numDays;
+ amountDisplay = `${this.formatNumber(totalCupsForDays, decimals)} ${unitLabel}`;
+ } else {
+ amountDisplay = `
N/A`;
+ }
+ } else {
+ // For other units, calculate from grams
+ const totalGramsForDays = this.showPerMeal
+ ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
+ : breakdown.dailyGrams * numDays;
+ const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+ amountDisplay = `${this.formatNumber(convertedAmount, decimals)} ${unitLabel}`;
+ }
return `
@@ -3566,7 +3827,7 @@ const CALCULATOR_CONFIG = {
${lockIndicator}
- ${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
+ ${amountDisplay}
`;
@@ -3575,7 +3836,6 @@ const CALCULATOR_CONFIG = {
// Calculate and display total
const totalFoodGrams = totalDailyGrams * numDays;
- const totalConverted = this.convertUnits(totalFoodGrams, unit);
// Update the display
if (foodAmountsList) {
@@ -3583,7 +3843,27 @@ const CALCULATOR_CONFIG = {
}
if (totalAmountDisplay) {
- totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+ if (unit === 'cups') {
+ // For cups total, check if all foods can be converted
+ const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+ .every(b => b.dailyCups !== null && b.dailyCups !== undefined);
+
+ if (validForCups) {
+ // Calculate total cups using pre-calculated values
+ let totalCups = 0;
+ foodBreakdowns.forEach(breakdown => {
+ if (breakdown.percentage > 0 && breakdown.dailyCups !== null) {
+ totalCups += breakdown.dailyCups * numDays;
+ }
+ });
+ totalAmountDisplay.textContent = `${this.formatNumber(totalCups, decimals)} ${unitLabel}`;
+ } else {
+ totalAmountDisplay.textContent = 'Mixed units - see individual amounts';
+ }
+ } else {
+ const totalConverted = this.convertUnits(totalFoodGrams, unit);
+ totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+ }
}
foodAmountsSection.style.display = 'block';
diff --git a/src/css/themes.css b/src/css/themes.css
index 588201e..5c81819 100644
--- a/src/css/themes.css
+++ b/src/css/themes.css
@@ -110,6 +110,19 @@
background: #f19a5f;
color: white;
}
+
+ .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled:hover {
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ }
.dog-calculator-container.theme-dark .dog-calculator-results {
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
@@ -303,6 +316,19 @@
background: #f19a5f;
color: white;
}
+
+ .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled:hover {
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ }
.dog-calculator-container.theme-system .dog-calculator-results {
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
@@ -1290,6 +1316,20 @@
color: white;
}
+ .dog-calculator-unit-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-unit-btn:disabled:hover {
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ transform: none;
+ }
+
/* Hidden unit select for compatibility */
.dog-calculator-unit-select-hidden {
display: none;
diff --git a/src/index.html b/src/index.html
index 77a5ebe..c515b13 100644
--- a/src/index.html
+++ b/src/index.html
@@ -100,6 +100,7 @@
+
diff --git a/src/js/calculator.js b/src/js/calculator.js
index e75ac69..5804985 100644
--- a/src/js/calculator.js
+++ b/src/js/calculator.js
@@ -589,7 +589,36 @@
if (energyInput) {
energyInput.addEventListener('input', () => {
this.updateFoodSourceData(id, 'energy', energyInput.value);
- this.updateFoodCalculations();
+
+ // Auto-select cups when entering energy for kcal/cup
+ const foodSource = this.foodSources.find(fs => fs.id === id);
+ if (foodSource && foodSource.energyUnit === 'kcalcup' && parseFloat(energyInput.value) > 0) {
+ const unitSelect = document.getElementById('unit');
+ const cupsButton = document.getElementById('cupsButton');
+
+ // First check if cups button will be enabled after update
+ const willEnableCups = this.foodSources.some(fs =>
+ fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+ );
+
+ if (willEnableCups && unitSelect) {
+ // Set cups BEFORE updating calculations
+ unitSelect.value = 'cups';
+ unitSelect.setAttribute('value', 'cups');
+ this.setActiveUnitButton('cups');
+
+ // Enable the cups button manually since we know it will be valid
+ if (cupsButton) {
+ cupsButton.disabled = false;
+ cupsButton.title = 'Show amounts in cups';
+ }
+ }
+
+ // Now update calculations with cups already selected
+ this.updateFoodCalculations();
+ } else {
+ this.updateFoodCalculations();
+ }
});
energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
}
@@ -597,7 +626,54 @@
if (energyUnitSelect) {
energyUnitSelect.addEventListener('change', () => {
this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
- this.updateFoodCalculations();
+
+ // Auto-select the most appropriate unit based on energy unit
+ const unitSelect = document.getElementById('unit');
+ const energyInput = document.getElementById(`energy-${id}`);
+
+ if (unitSelect) {
+ switch(energyUnitSelect.value) {
+ case 'kcalcup':
+ // Check if we have energy value to enable cups
+ const foodSource = this.foodSources.find(fs => fs.id === id);
+ if (foodSource && foodSource.energy && parseFloat(foodSource.energy) > 0) {
+ // Set cups BEFORE updating calculations
+ unitSelect.value = 'cups';
+ unitSelect.setAttribute('value', 'cups');
+ this.setActiveUnitButton('cups');
+
+ // Enable the cups button manually
+ const cupsButton = document.getElementById('cupsButton');
+ if (cupsButton) {
+ cupsButton.disabled = false;
+ cupsButton.title = 'Show amounts in cups';
+ }
+ }
+ this.updateFoodCalculations();
+ break;
+ case 'kcal100g':
+ // For kcal/100g, select grams
+ unitSelect.value = 'g';
+ this.setActiveUnitButton('g');
+ this.updateFoodCalculations();
+ break;
+ case 'kcalkg':
+ // For kcal/kg, also select grams (or could be kg)
+ unitSelect.value = 'g';
+ this.setActiveUnitButton('g');
+ this.updateFoodCalculations();
+ break;
+ case 'kcalcan':
+ // For kcal/can, use grams as default (or ounces in imperial)
+ unitSelect.value = this.isImperial ? 'oz' : 'g';
+ this.setActiveUnitButton(unitSelect.value);
+ this.updateFoodCalculations();
+ break;
+ }
+ } else {
+ // No unit select, just update calculations
+ this.updateFoodCalculations();
+ }
});
}
@@ -995,7 +1071,7 @@
}
}
- convertUnits(grams, unit) {
+ convertUnits(grams, unit, foodSource = null) {
switch (unit) {
case 'kg':
return grams / 1000;
@@ -1003,6 +1079,18 @@
return grams / 28.3495;
case 'lb':
return grams / 453.592;
+ case 'cups':
+ // For cups, we need to convert from grams worth of calories to cups
+ if (foodSource && foodSource.energyUnit === 'kcalcup' && foodSource.energy) {
+ // Get calories per 100g for this food
+ const caloriesPerGram = this.getFoodSourceEnergyPer100g(foodSource) / 100;
+ // Calculate total calories represented by these grams
+ const totalCalories = grams * caloriesPerGram;
+ // Divide by calories per cup to get number of cups
+ const caloriesPerCup = parseFloat(foodSource.energy);
+ return totalCalories / caloriesPerCup;
+ }
+ return null; // Cannot convert to cups without kcal/cup
default:
return grams;
}
@@ -1106,6 +1194,31 @@
this.sendHeightToParent();
}
+ updateCupsButtonState() {
+ const cupsButton = document.getElementById('cupsButton');
+ if (!cupsButton) return;
+
+ // Check if any food source has kcal/cup selected
+ const hasKcalCup = this.foodSources.some(fs =>
+ fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+ );
+
+ if (hasKcalCup) {
+ cupsButton.disabled = false;
+ cupsButton.title = 'Show amounts in cups';
+ } else {
+ cupsButton.disabled = true;
+ cupsButton.title = 'Available when using kcal/cup measurement';
+
+ // If cups was selected, switch back to grams
+ const unitSelect = document.getElementById('unit');
+ if (unitSelect && unitSelect.value === 'cups') {
+ unitSelect.value = 'g';
+ this.setActiveUnitButton('g');
+ }
+ }
+ }
+
updateFoodCalculations() {
if (this.currentMER === 0) return;
@@ -1119,15 +1232,32 @@
const foodBreakdownResults = document.getElementById('foodBreakdownResults');
const foodBreakdownList = document.getElementById('foodBreakdownList');
const feedingConfig = document.getElementById('feedingConfig');
+
+ // Update cups button state
+ this.updateCupsButtonState();
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
return;
}
const days = daysInput.value;
- const unit = unitSelect.value;
- const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
- const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+ let unit = unitSelect.value;
+
+ // Failsafe: if unit is empty string but cups button is active, use 'cups'
+ if (!unit || unit === '') {
+ const activeButton = document.querySelector('.dog-calculator-unit-btn.active');
+ if (activeButton) {
+ unit = activeButton.dataset.unit || 'g';
+ } else {
+ unit = 'g'; // Default fallback
+ }
+ }
+
+ const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : unit === 'lb' ? 'lb' : 'cups';
+ const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : unit === 'cups' ? 1 : 1;
+
+ // Debug: log what unit is being used
+ console.log('UpdateFoodCalculations - unit:', unit, 'unitLabel:', unitLabel);
// Determine frequency suffix for display
const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
@@ -1164,10 +1294,30 @@
if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
- const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ let dailyGramsForThisFood;
+ let dailyCupsForThisFood = null;
+
+ // For kcal/cup, calculate cups directly from calories
+ if (fs.energyUnit === 'kcalcup' && fs.energy) {
+ const caloriesPerCup = parseFloat(fs.energy);
+ dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
+ // We still need grams for total calculation, use approximation
+ dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ console.log('Cups calculation:', {
+ caloriesPerCup,
+ dailyCaloriesForThisFood,
+ dailyCupsForThisFood,
+ dailyGramsForThisFood
+ });
+ } else {
+ // For other units, calculate grams normally
+ dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ }
// Calculate per-meal amounts if needed
const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
+ const displayCups = dailyCupsForThisFood !== null ?
+ (this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
foodBreakdowns.push({
@@ -1175,10 +1325,13 @@
percentage: fs.percentage,
dailyGrams: dailyGramsForThisFood,
displayGrams: displayGrams,
+ dailyCups: dailyCupsForThisFood,
+ displayCups: displayCups,
calories: dailyCaloriesForThisFood,
displayCalories: displayCalories,
isLocked: fs.isLocked,
- hasEnergyContent: true
+ hasEnergyContent: true,
+ foodSource: fs // Store reference for cups conversion
});
totalDailyGrams += dailyGramsForThisFood;
@@ -1190,10 +1343,13 @@
percentage: fs.percentage,
dailyGrams: 0,
displayGrams: 0,
+ dailyCups: null,
+ displayCups: null,
calories: 0,
displayCalories: 0,
isLocked: fs.isLocked,
- hasEnergyContent: false
+ hasEnergyContent: false,
+ foodSource: fs // Store reference for cups conversion
});
}
});
@@ -1257,7 +1413,15 @@
dailyFoodResults.style.display = 'block';
// Show feeding configuration when we have valid foods
- if (feedingConfig) feedingConfig.style.display = 'block';
+ if (feedingConfig) {
+ feedingConfig.style.display = 'block';
+
+ // Ensure "Per day" is checked when feeding config becomes visible
+ const showDaily = document.getElementById('showDaily');
+ if (showDaily && !showDaily.checked && !document.getElementById('showPerMeal').checked) {
+ showDaily.checked = true;
+ }
+ }
// Show unit buttons when daily results are shown
const unitButtons = document.getElementById('unitButtons');
@@ -1266,9 +1430,21 @@
// Update per-food breakdown
if (foodBreakdownList && foodBreakdowns.length > 1) {
const breakdownHTML = foodBreakdowns.map(breakdown => {
- const valueContent = breakdown.hasEnergyContent
- ? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
- : `
⚠️`;
+ let valueContent;
+ if (breakdown.hasEnergyContent) {
+ if (unit === 'cups') {
+ // For cups, use the pre-calculated cups value if available
+ if (breakdown.displayCups !== null) {
+ valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
+ } else {
+ valueContent = `
N/A`;
+ }
+ } else {
+ valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
+ }
+ } else {
+ valueContent = `
⚠️`;
+ }
return `
@@ -1288,8 +1464,40 @@
// Update daily food value with correct units
const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
- const convertedTotal = this.convertUnits(displayTotal, unit);
- dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+ let convertedTotal;
+ let totalDisplayText;
+
+ if (unit === 'cups') {
+ console.log('Unit is cups, checking validity...');
+ // For cups, we can only show total if all foods with percentage > 0 have kcal/cup
+ const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+ .every(b => b.displayCups !== null && b.displayCups !== undefined);
+
+ console.log('Valid for cups?', validForCups, 'Breakdowns:', foodBreakdowns);
+
+ if (validForCups) {
+ // Calculate total cups using pre-calculated values
+ let totalCups = 0;
+ foodBreakdowns.forEach(breakdown => {
+ if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
+ totalCups += breakdown.displayCups;
+ }
+ });
+ console.log('Total cups display:', {
+ totalCups,
+ displayTotal,
+ foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
+ });
+ totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
+ } else {
+ totalDisplayText = 'Mixed units - see breakdown';
+ }
+ } else {
+ convertedTotal = this.convertUnits(displayTotal, unit);
+ totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+ }
+
+ dailyFoodValue.textContent = totalDisplayText;
// Build HTML for individual food amounts
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
@@ -1311,11 +1519,23 @@
`;
} else {
// For multi-day calculations: show total amount for all days
- // But if in per-meal mode, multiply by meals per day as well
- const totalGramsForDays = this.showPerMeal
- ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
- : breakdown.dailyGrams * numDays;
- const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+ let amountDisplay;
+ if (unit === 'cups') {
+ // For cups, use pre-calculated cups value
+ if (breakdown.dailyCups !== null) {
+ const totalCupsForDays = breakdown.dailyCups * numDays;
+ amountDisplay = `${this.formatNumber(totalCupsForDays, decimals)} ${unitLabel}`;
+ } else {
+ amountDisplay = `
N/A`;
+ }
+ } else {
+ // For other units, calculate from grams
+ const totalGramsForDays = this.showPerMeal
+ ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
+ : breakdown.dailyGrams * numDays;
+ const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+ amountDisplay = `${this.formatNumber(convertedAmount, decimals)} ${unitLabel}`;
+ }
return `
@@ -1325,7 +1545,7 @@
${lockIndicator}
- ${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
+ ${amountDisplay}
`;
@@ -1334,7 +1554,6 @@
// Calculate and display total
const totalFoodGrams = totalDailyGrams * numDays;
- const totalConverted = this.convertUnits(totalFoodGrams, unit);
// Update the display
if (foodAmountsList) {
@@ -1342,7 +1561,27 @@
}
if (totalAmountDisplay) {
- totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+ if (unit === 'cups') {
+ // For cups total, check if all foods can be converted
+ const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+ .every(b => b.dailyCups !== null && b.dailyCups !== undefined);
+
+ if (validForCups) {
+ // Calculate total cups using pre-calculated values
+ let totalCups = 0;
+ foodBreakdowns.forEach(breakdown => {
+ if (breakdown.percentage > 0 && breakdown.dailyCups !== null) {
+ totalCups += breakdown.dailyCups * numDays;
+ }
+ });
+ totalAmountDisplay.textContent = `${this.formatNumber(totalCups, decimals)} ${unitLabel}`;
+ } else {
+ totalAmountDisplay.textContent = 'Mixed units - see individual amounts';
+ }
+ } else {
+ const totalConverted = this.convertUnits(totalFoodGrams, unit);
+ totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+ }
}
foodAmountsSection.style.display = 'block';
diff --git a/sundog-dog-food-calculator.js b/sundog-dog-food-calculator.js
index e713eb5..291c924 100644
--- a/sundog-dog-food-calculator.js
+++ b/sundog-dog-food-calculator.js
@@ -512,9 +512,8 @@
.dog-calculator-container .dog-calculator-meal-input {
display: inline-flex;
align-items: center;
- justify-content: center;
gap: 6px;
- margin-left: auto;
+ margin: 0 auto;
}
.dog-calculator-container .dog-calculator-meal-input span {
@@ -675,6 +674,19 @@
background: #f19a5f;
color: white;
}
+
+ .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled:hover {
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ }
.dog-calculator-container.theme-dark .dog-calculator-results {
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
@@ -868,6 +880,19 @@
background: #f19a5f;
color: white;
}
+
+ .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled:hover {
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ }
.dog-calculator-container.theme-system .dog-calculator-results {
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
@@ -1855,6 +1880,20 @@
color: white;
}
+ .dog-calculator-unit-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-unit-btn:disabled:hover {
+ border-color: var(--border-color);
+ background: var(--bg-tertiary);
+ transform: none;
+ }
+
/* Hidden unit select for compatibility */
.dog-calculator-unit-select-hidden {
display: none;
@@ -2180,6 +2219,7 @@ const CALCULATOR_CONFIG = {
+
@@ -2867,7 +2908,36 @@ const CALCULATOR_CONFIG = {
if (energyInput) {
energyInput.addEventListener('input', () => {
this.updateFoodSourceData(id, 'energy', energyInput.value);
- this.updateFoodCalculations();
+
+ // Auto-select cups when entering energy for kcal/cup
+ const foodSource = this.foodSources.find(fs => fs.id === id);
+ if (foodSource && foodSource.energyUnit === 'kcalcup' && parseFloat(energyInput.value) > 0) {
+ const unitSelect = this.container.querySelector('#unit');
+ const cupsButton = this.container.querySelector('#cupsButton');
+
+ // First check if cups button will be enabled after update
+ const willEnableCups = this.foodSources.some(fs =>
+ fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+ );
+
+ if (willEnableCups && unitSelect) {
+ // Set cups BEFORE updating calculations
+ unitSelect.value = 'cups';
+ unitSelect.setAttribute('value', 'cups');
+ this.setActiveUnitButton('cups');
+
+ // Enable the cups button manually since we know it will be valid
+ if (cupsButton) {
+ cupsButton.disabled = false;
+ cupsButton.title = 'Show amounts in cups';
+ }
+ }
+
+ // Now update calculations with cups already selected
+ this.updateFoodCalculations();
+ } else {
+ this.updateFoodCalculations();
+ }
});
energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
}
@@ -2875,7 +2945,54 @@ const CALCULATOR_CONFIG = {
if (energyUnitSelect) {
energyUnitSelect.addEventListener('change', () => {
this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
- this.updateFoodCalculations();
+
+ // Auto-select the most appropriate unit based on energy unit
+ const unitSelect = this.container.querySelector('#unit');
+ const energyInput = document.getElementById(`energy-${id}`);
+
+ if (unitSelect) {
+ switch(energyUnitSelect.value) {
+ case 'kcalcup':
+ // Check if we have energy value to enable cups
+ const foodSource = this.foodSources.find(fs => fs.id === id);
+ if (foodSource && foodSource.energy && parseFloat(foodSource.energy) > 0) {
+ // Set cups BEFORE updating calculations
+ unitSelect.value = 'cups';
+ unitSelect.setAttribute('value', 'cups');
+ this.setActiveUnitButton('cups');
+
+ // Enable the cups button manually
+ const cupsButton = this.container.querySelector('#cupsButton');
+ if (cupsButton) {
+ cupsButton.disabled = false;
+ cupsButton.title = 'Show amounts in cups';
+ }
+ }
+ this.updateFoodCalculations();
+ break;
+ case 'kcal100g':
+ // For kcal/100g, select grams
+ unitSelect.value = 'g';
+ this.setActiveUnitButton('g');
+ this.updateFoodCalculations();
+ break;
+ case 'kcalkg':
+ // For kcal/kg, also select grams (or could be kg)
+ unitSelect.value = 'g';
+ this.setActiveUnitButton('g');
+ this.updateFoodCalculations();
+ break;
+ case 'kcalcan':
+ // For kcal/can, use grams as default (or ounces in imperial)
+ unitSelect.value = this.isImperial ? 'oz' : 'g';
+ this.setActiveUnitButton(unitSelect.value);
+ this.updateFoodCalculations();
+ break;
+ }
+ } else {
+ // No unit select, just update calculations
+ this.updateFoodCalculations();
+ }
});
}
@@ -3273,7 +3390,7 @@ const CALCULATOR_CONFIG = {
}
}
- convertUnits(grams, unit) {
+ convertUnits(grams, unit, foodSource = null) {
switch (unit) {
case 'kg':
return grams / 1000;
@@ -3281,6 +3398,18 @@ const CALCULATOR_CONFIG = {
return grams / 28.3495;
case 'lb':
return grams / 453.592;
+ case 'cups':
+ // For cups, we need to convert from grams worth of calories to cups
+ if (foodSource && foodSource.energyUnit === 'kcalcup' && foodSource.energy) {
+ // Get calories per 100g for this food
+ const caloriesPerGram = this.getFoodSourceEnergyPer100g(foodSource) / 100;
+ // Calculate total calories represented by these grams
+ const totalCalories = grams * caloriesPerGram;
+ // Divide by calories per cup to get number of cups
+ const caloriesPerCup = parseFloat(foodSource.energy);
+ return totalCalories / caloriesPerCup;
+ }
+ return null; // Cannot convert to cups without kcal/cup
default:
return grams;
}
@@ -3384,6 +3513,31 @@ const CALCULATOR_CONFIG = {
this.sendHeightToParent();
}
+ updateCupsButtonState() {
+ const cupsButton = this.container.querySelector('#cupsButton');
+ if (!cupsButton) return;
+
+ // Check if any food source has kcal/cup selected
+ const hasKcalCup = this.foodSources.some(fs =>
+ fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+ );
+
+ if (hasKcalCup) {
+ cupsButton.disabled = false;
+ cupsButton.title = 'Show amounts in cups';
+ } else {
+ cupsButton.disabled = true;
+ cupsButton.title = 'Available when using kcal/cup measurement';
+
+ // If cups was selected, switch back to grams
+ const unitSelect = this.container.querySelector('#unit');
+ if (unitSelect && unitSelect.value === 'cups') {
+ unitSelect.value = 'g';
+ this.setActiveUnitButton('g');
+ }
+ }
+ }
+
updateFoodCalculations() {
if (this.currentMER === 0) return;
@@ -3397,15 +3551,32 @@ const CALCULATOR_CONFIG = {
const foodBreakdownResults = this.container.querySelector('#foodBreakdownResults');
const foodBreakdownList = this.container.querySelector('#foodBreakdownList');
const feedingConfig = this.container.querySelector('#feedingConfig');
+
+ // Update cups button state
+ this.updateCupsButtonState();
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
return;
}
const days = daysInput.value;
- const unit = unitSelect.value;
- const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
- const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+ let unit = unitSelect.value;
+
+ // Failsafe: if unit is empty string but cups button is active, use 'cups'
+ if (!unit || unit === '') {
+ const activeButton = this.container.querySelector('.dog-calculator-unit-btn.active');
+ if (activeButton) {
+ unit = activeButton.dataset.unit || 'g';
+ } else {
+ unit = 'g'; // Default fallback
+ }
+ }
+
+ const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : unit === 'lb' ? 'lb' : 'cups';
+ const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : unit === 'cups' ? 1 : 1;
+
+ // Debug: log what unit is being used
+ console.log('UpdateFoodCalculations - unit:', unit, 'unitLabel:', unitLabel);
// Determine frequency suffix for display
const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
@@ -3442,10 +3613,30 @@ const CALCULATOR_CONFIG = {
if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
- const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ let dailyGramsForThisFood;
+ let dailyCupsForThisFood = null;
+
+ // For kcal/cup, calculate cups directly from calories
+ if (fs.energyUnit === 'kcalcup' && fs.energy) {
+ const caloriesPerCup = parseFloat(fs.energy);
+ dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
+ // We still need grams for total calculation, use approximation
+ dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ console.log('Cups calculation:', {
+ caloriesPerCup,
+ dailyCaloriesForThisFood,
+ dailyCupsForThisFood,
+ dailyGramsForThisFood
+ });
+ } else {
+ // For other units, calculate grams normally
+ dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ }
// Calculate per-meal amounts if needed
const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
+ const displayCups = dailyCupsForThisFood !== null ?
+ (this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
foodBreakdowns.push({
@@ -3453,10 +3644,13 @@ const CALCULATOR_CONFIG = {
percentage: fs.percentage,
dailyGrams: dailyGramsForThisFood,
displayGrams: displayGrams,
+ dailyCups: dailyCupsForThisFood,
+ displayCups: displayCups,
calories: dailyCaloriesForThisFood,
displayCalories: displayCalories,
isLocked: fs.isLocked,
- hasEnergyContent: true
+ hasEnergyContent: true,
+ foodSource: fs // Store reference for cups conversion
});
totalDailyGrams += dailyGramsForThisFood;
@@ -3468,10 +3662,13 @@ const CALCULATOR_CONFIG = {
percentage: fs.percentage,
dailyGrams: 0,
displayGrams: 0,
+ dailyCups: null,
+ displayCups: null,
calories: 0,
displayCalories: 0,
isLocked: fs.isLocked,
- hasEnergyContent: false
+ hasEnergyContent: false,
+ foodSource: fs // Store reference for cups conversion
});
}
});
@@ -3535,7 +3732,15 @@ const CALCULATOR_CONFIG = {
dailyFoodResults.style.display = 'block';
// Show feeding configuration when we have valid foods
- if (feedingConfig) feedingConfig.style.display = 'block';
+ if (feedingConfig) {
+ feedingConfig.style.display = 'block';
+
+ // Ensure "Per day" is checked when feeding config becomes visible
+ const showDaily = this.container.querySelector('#showDaily');
+ if (showDaily && !showDaily.checked && !this.container.querySelector('#showPerMeal').checked) {
+ showDaily.checked = true;
+ }
+ }
// Show unit buttons when daily results are shown
const unitButtons = this.container.querySelector('#unitButtons');
@@ -3544,9 +3749,21 @@ const CALCULATOR_CONFIG = {
// Update per-food breakdown
if (foodBreakdownList && foodBreakdowns.length > 1) {
const breakdownHTML = foodBreakdowns.map(breakdown => {
- const valueContent = breakdown.hasEnergyContent
- ? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
- : `
⚠️`;
+ let valueContent;
+ if (breakdown.hasEnergyContent) {
+ if (unit === 'cups') {
+ // For cups, use the pre-calculated cups value if available
+ if (breakdown.displayCups !== null) {
+ valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
+ } else {
+ valueContent = `
N/A`;
+ }
+ } else {
+ valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
+ }
+ } else {
+ valueContent = `
⚠️`;
+ }
return `
@@ -3566,8 +3783,40 @@ const CALCULATOR_CONFIG = {
// Update daily food value with correct units
const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
- const convertedTotal = this.convertUnits(displayTotal, unit);
- dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+ let convertedTotal;
+ let totalDisplayText;
+
+ if (unit === 'cups') {
+ console.log('Unit is cups, checking validity...');
+ // For cups, we can only show total if all foods with percentage > 0 have kcal/cup
+ const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+ .every(b => b.displayCups !== null && b.displayCups !== undefined);
+
+ console.log('Valid for cups?', validForCups, 'Breakdowns:', foodBreakdowns);
+
+ if (validForCups) {
+ // Calculate total cups using pre-calculated values
+ let totalCups = 0;
+ foodBreakdowns.forEach(breakdown => {
+ if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
+ totalCups += breakdown.displayCups;
+ }
+ });
+ console.log('Total cups display:', {
+ totalCups,
+ displayTotal,
+ foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
+ });
+ totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
+ } else {
+ totalDisplayText = 'Mixed units - see breakdown';
+ }
+ } else {
+ convertedTotal = this.convertUnits(displayTotal, unit);
+ totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+ }
+
+ dailyFoodValue.textContent = totalDisplayText;
// Build HTML for individual food amounts
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
@@ -3589,11 +3838,23 @@ const CALCULATOR_CONFIG = {
`;
} else {
// For multi-day calculations: show total amount for all days
- // But if in per-meal mode, multiply by meals per day as well
- const totalGramsForDays = this.showPerMeal
- ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
- : breakdown.dailyGrams * numDays;
- const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+ let amountDisplay;
+ if (unit === 'cups') {
+ // For cups, use pre-calculated cups value
+ if (breakdown.dailyCups !== null) {
+ const totalCupsForDays = breakdown.dailyCups * numDays;
+ amountDisplay = `${this.formatNumber(totalCupsForDays, decimals)} ${unitLabel}`;
+ } else {
+ amountDisplay = `
N/A`;
+ }
+ } else {
+ // For other units, calculate from grams
+ const totalGramsForDays = this.showPerMeal
+ ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
+ : breakdown.dailyGrams * numDays;
+ const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+ amountDisplay = `${this.formatNumber(convertedAmount, decimals)} ${unitLabel}`;
+ }
return `
@@ -3603,7 +3864,7 @@ const CALCULATOR_CONFIG = {
${lockIndicator}
- ${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
+ ${amountDisplay}
`;
@@ -3612,7 +3873,6 @@ const CALCULATOR_CONFIG = {
// Calculate and display total
const totalFoodGrams = totalDailyGrams * numDays;
- const totalConverted = this.convertUnits(totalFoodGrams, unit);
// Update the display
if (foodAmountsList) {
@@ -3620,7 +3880,27 @@ const CALCULATOR_CONFIG = {
}
if (totalAmountDisplay) {
- totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+ if (unit === 'cups') {
+ // For cups total, check if all foods can be converted
+ const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+ .every(b => b.dailyCups !== null && b.dailyCups !== undefined);
+
+ if (validForCups) {
+ // Calculate total cups using pre-calculated values
+ let totalCups = 0;
+ foodBreakdowns.forEach(breakdown => {
+ if (breakdown.percentage > 0 && breakdown.dailyCups !== null) {
+ totalCups += breakdown.dailyCups * numDays;
+ }
+ });
+ totalAmountDisplay.textContent = `${this.formatNumber(totalCups, decimals)} ${unitLabel}`;
+ } else {
+ totalAmountDisplay.textContent = 'Mixed units - see individual amounts';
+ }
+ } else {
+ const totalConverted = this.convertUnits(totalFoodGrams, unit);
+ totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+ }
}
foodAmountsSection.style.display = 'block';