Add cups unit option for kcal/cup measurements
Features: - Add cups as a unit option that only works with kcal/cup energy measurements - Cups button is disabled with tooltip when kcal/cup is not selected - Auto-select cups when user selects kcal/cup as energy unit - Auto-switch to appropriate units when changing energy measurement types - Calculate cup amounts directly from calories without density assumptions Fixes: - Ensure cups display correct values immediately upon auto-selection - Fix "Per day" radio button to be pre-selected when feeding config becomes visible - Handle empty unit values with failsafe fallback to active button Technical details: - Direct calorie-to-cups conversion bypassing gram conversions - Pre-calculate cups values in food breakdown for efficient display - Set unit before updating calculations to avoid timing issues - Added CSS styling for disabled button state across all themes
This commit is contained in:
Dayowe
parent
8758ac1dbc
commit
4ec42fdbc0
330
iframe.html
330
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 @@
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="kg">kg</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="oz">oz</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="lb">lb</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</button>
|
||||
</div>
|
||||
|
||||
<!-- Daily Total Results -->
|
||||
@ -2133,6 +2173,7 @@
|
||||
<option value="kg">kilograms (kg)</option>
|
||||
<option value="oz">ounces (oz)</option>
|
||||
<option value="lb">pounds (lb)</option>
|
||||
<option value="cups">cups</option>
|
||||
</select>
|
||||
|
||||
<div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
|
||||
@ -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}`
|
||||
: `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||
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 = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
|
||||
}
|
||||
} else {
|
||||
valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
|
||||
}
|
||||
} else {
|
||||
valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="dog-calculator-food-result-item">
|
||||
@ -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 = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
|
||||
}
|
||||
} 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 `
|
||||
<div class="dog-calculator-food-amount-item">
|
||||
@ -3566,7 +3827,7 @@ const CALCULATOR_CONFIG = {
|
||||
${lockIndicator}
|
||||
</div>
|
||||
<div class="dog-calculator-food-amount-value">
|
||||
${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
|
||||
${amountDisplay}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -100,6 +100,7 @@
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="kg">kg</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="oz">oz</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="lb">lb</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</button>
|
||||
</div>
|
||||
|
||||
<!-- Daily Total Results -->
|
||||
@ -116,6 +117,7 @@
|
||||
<option value="kg">kilograms (kg)</option>
|
||||
<option value="oz">ounces (oz)</option>
|
||||
<option value="lb">pounds (lb)</option>
|
||||
<option value="cups">cups</option>
|
||||
</select>
|
||||
|
||||
<div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
|
||||
|
||||
@ -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}`
|
||||
: `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||
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 = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
|
||||
}
|
||||
} else {
|
||||
valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
|
||||
}
|
||||
} else {
|
||||
valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="dog-calculator-food-result-item">
|
||||
@ -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 = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
|
||||
}
|
||||
} 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 `
|
||||
<div class="dog-calculator-food-amount-item">
|
||||
@ -1325,7 +1545,7 @@
|
||||
${lockIndicator}
|
||||
</div>
|
||||
<div class="dog-calculator-food-amount-value">
|
||||
${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
|
||||
${amountDisplay}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -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';
|
||||
|
||||
@ -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 = {
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="kg">kg</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="oz">oz</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="lb">lb</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</button>
|
||||
</div>
|
||||
|
||||
<!-- Daily Total Results -->
|
||||
@ -2196,6 +2236,7 @@ const CALCULATOR_CONFIG = {
|
||||
<option value="kg">kilograms (kg)</option>
|
||||
<option value="oz">ounces (oz)</option>
|
||||
<option value="lb">pounds (lb)</option>
|
||||
<option value="cups">cups</option>
|
||||
</select>
|
||||
|
||||
<div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
|
||||
@ -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}`
|
||||
: `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||
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 = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
|
||||
}
|
||||
} else {
|
||||
valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
|
||||
}
|
||||
} else {
|
||||
valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="dog-calculator-food-result-item">
|
||||
@ -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 = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
|
||||
}
|
||||
} 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 `
|
||||
<div class="dog-calculator-food-amount-item">
|
||||
@ -3603,7 +3864,7 @@ const CALCULATOR_CONFIG = {
|
||||
${lockIndicator}
|
||||
</div>
|
||||
<div class="dog-calculator-food-amount-value">
|
||||
${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
|
||||
${amountDisplay}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -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';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user