Add per-meal feeding frequency feature
- Added feeding configuration section with daily/per-meal toggle - Implemented meals per day selector (1-10 meals) - Updated all calculations to support per-meal division - Dynamic unit labels change from "/day" to "/meal" - Added helpful meal count display for multi-day calculations - Proper dark theme support for new UI elements - Mobile responsive design for feeding controls - Centered meal input group for better UX This feature allows users to easily switch between viewing daily food amounts and per-meal portions, making feeding schedules more practical to follow.
This commit is contained in:
Dayowe
parent
c7a4aa01ba
commit
8758ac1dbc
300
iframe.html
300
iframe.html
@ -447,14 +447,117 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Feeding Configuration Styles */
|
||||
.dog-calculator-container .dog-calculator-feeding-config {
|
||||
margin-top: 20px;
|
||||
padding: 16px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-frequency-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-frequency-row > label {
|
||||
font-weight: 500;
|
||||
color: var(--text-label);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group input[type="radio"] {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group input[type="radio"]:checked + span {
|
||||
font-weight: 600;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input span {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input input[type="number"] {
|
||||
width: 50px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input input[type="number"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.1);
|
||||
}
|
||||
|
||||
/* Update meal note styling */
|
||||
.dog-calculator-container #mealNote {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments for feeding config */
|
||||
@media (max-width: 480px) {
|
||||
.dog-calculator-meal-input {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.dog-calculator-frequency-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark theme - manual override */
|
||||
|
||||
.dog-calculator-container.theme-dark {
|
||||
--bg-primary: #24202d;
|
||||
--bg-secondary: #312b3b;
|
||||
--bg-tertiary: #1f1b26;
|
||||
--border-color: #433c4f;
|
||||
--text-primary: #f5f3f7;
|
||||
--text-secondary: #b8b0c2;
|
||||
--text-label: #9f94ae;
|
||||
--success-color: #7fa464;
|
||||
--error-color: #e87159;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@ -599,14 +702,55 @@
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
/* Dark theme feeding configuration styles */
|
||||
.dog-calculator-container.theme-dark .dog-calculator-feeding-config {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-frequency-row > label {
|
||||
color: var(--text-label);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-radio-group label {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-radio-group input[type="radio"]:checked + span {
|
||||
color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-meal-input span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"] {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"]:focus {
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark #mealNote {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* System theme - follows user's OS preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dog-calculator-container.theme-system {
|
||||
--bg-primary: #24202d;
|
||||
--bg-secondary: #312b3b;
|
||||
--bg-tertiary: #1f1b26;
|
||||
--border-color: #433c4f;
|
||||
--text-primary: #f5f3f7;
|
||||
--text-secondary: #b8b0c2;
|
||||
--text-label: #9f94ae;
|
||||
--success-color: #7fa464;
|
||||
--error-color: #e87159;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@ -750,6 +894,43 @@
|
||||
border-color: var(--success-color);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
/* System theme feeding configuration styles in dark mode */
|
||||
.dog-calculator-container.theme-system .dog-calculator-feeding-config {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-frequency-row > label {
|
||||
color: var(--text-label);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-radio-group label {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-radio-group input[type="radio"]:checked + span {
|
||||
color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-meal-input span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"] {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"]:focus {
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system #mealNote {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
@ -1901,6 +2082,28 @@
|
||||
<span>Add another food source</span>
|
||||
</button>
|
||||
|
||||
<!-- Feeding Configuration -->
|
||||
<div class="dog-calculator-feeding-config" id="feedingConfig" style="display: none;">
|
||||
<div class="dog-calculator-frequency-row">
|
||||
<label>Show amounts:</label>
|
||||
<div class="dog-calculator-radio-group">
|
||||
<label>
|
||||
<input type="radio" name="showAs" value="daily" id="showDaily" checked>
|
||||
<span>Per day</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="showAs" value="meal" id="showPerMeal">
|
||||
<span>Per meal</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="dog-calculator-meal-input" id="mealInputGroup" style="display: none;">
|
||||
<span>×</span>
|
||||
<input type="number" id="mealsPerDay" value="2" min="1" max="10">
|
||||
<span>meals/day</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Per-Food Results -->
|
||||
<div class="dog-calculator-food-results" id="foodBreakdownResults" style="display: none;">
|
||||
<div id="foodBreakdownList">
|
||||
@ -1936,7 +2139,7 @@
|
||||
<h4 class="dog-calculator-section-title">
|
||||
Calculate amounts for
|
||||
<input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days">
|
||||
<span id="dayLabel">day</span>:
|
||||
<span id="dayLabel">day</span><span id="mealNote" style="display: none;"></span>:
|
||||
</h4>
|
||||
<div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
|
||||
<div id="foodAmountsList" class="dog-calculator-food-amounts-list">
|
||||
@ -2049,6 +2252,8 @@ const CALCULATOR_CONFIG = {
|
||||
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
|
||||
this.foodSources = [];
|
||||
this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
|
||||
this.mealsPerDay = 2;
|
||||
this.showPerMeal = false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
@ -2803,6 +3008,58 @@ const CALCULATOR_CONFIG = {
|
||||
|
||||
if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());
|
||||
|
||||
// Feeding configuration event listeners
|
||||
const showDaily = document.getElementById('showDaily');
|
||||
const showPerMeal = document.getElementById('showPerMeal');
|
||||
const mealsPerDayInput = document.getElementById('mealsPerDay');
|
||||
const mealInputGroup = document.getElementById('mealInputGroup');
|
||||
|
||||
if (showDaily) {
|
||||
showDaily.addEventListener('change', () => {
|
||||
if (showDaily.checked) {
|
||||
this.showPerMeal = false;
|
||||
if (mealInputGroup) mealInputGroup.style.display = 'none';
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (showPerMeal) {
|
||||
showPerMeal.addEventListener('change', () => {
|
||||
if (showPerMeal.checked) {
|
||||
this.showPerMeal = true;
|
||||
if (mealInputGroup) mealInputGroup.style.display = 'inline-flex';
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (mealsPerDayInput) {
|
||||
mealsPerDayInput.addEventListener('input', () => {
|
||||
const meals = parseInt(mealsPerDayInput.value);
|
||||
if (meals && meals >= 1 && meals <= 10) {
|
||||
this.mealsPerDay = meals;
|
||||
if (this.showPerMeal) {
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
mealsPerDayInput.addEventListener('blur', () => {
|
||||
if (!mealsPerDayInput.value || parseInt(mealsPerDayInput.value) < 1) {
|
||||
mealsPerDayInput.value = 2;
|
||||
this.mealsPerDay = 2;
|
||||
if (this.showPerMeal) {
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Modal event listeners
|
||||
const shareBtn = document.getElementById('shareBtn');
|
||||
const embedBtn = document.getElementById('embedBtn');
|
||||
@ -3021,10 +3278,21 @@ const CALCULATOR_CONFIG = {
|
||||
updateDayLabel() {
|
||||
const days = document.getElementById('days')?.value;
|
||||
const dayLabel = document.getElementById('dayLabel');
|
||||
const mealNote = document.getElementById('mealNote');
|
||||
if (dayLabel && days) {
|
||||
const numDays = parseInt(days);
|
||||
dayLabel.textContent = numDays === 1 ? 'day' : 'days';
|
||||
}
|
||||
if (mealNote) {
|
||||
if (this.showPerMeal && days) {
|
||||
const numDays = parseInt(days);
|
||||
const totalMeals = numDays * this.mealsPerDay;
|
||||
mealNote.textContent = ` (${totalMeals} meal${totalMeals === 1 ? '' : 's'} total)`;
|
||||
mealNote.style.display = 'inline';
|
||||
} else {
|
||||
mealNote.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setActiveUnitButton(unit) {
|
||||
@ -3091,6 +3359,7 @@ const CALCULATOR_CONFIG = {
|
||||
const totalAmountDisplay = document.getElementById('totalAmountDisplay');
|
||||
const foodBreakdownResults = document.getElementById('foodBreakdownResults');
|
||||
const foodBreakdownList = document.getElementById('foodBreakdownList');
|
||||
const feedingConfig = document.getElementById('feedingConfig');
|
||||
|
||||
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
|
||||
return;
|
||||
@ -3101,6 +3370,9 @@ const CALCULATOR_CONFIG = {
|
||||
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
|
||||
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
|
||||
|
||||
// Determine frequency suffix for display
|
||||
const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
|
||||
|
||||
// Clear all food source errors first
|
||||
this.foodSources.forEach(fs => {
|
||||
this.showError(`energy-error-${fs.id}`, false);
|
||||
@ -3113,6 +3385,7 @@ const CALCULATOR_CONFIG = {
|
||||
foodAmountsSection.style.display = 'none';
|
||||
dailyFoodResults.style.display = 'none';
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
if (feedingConfig) feedingConfig.style.display = 'none';
|
||||
|
||||
// Hide unit buttons when validation fails
|
||||
const unitButtons = document.getElementById('unitButtons');
|
||||
@ -3134,11 +3407,17 @@ const CALCULATOR_CONFIG = {
|
||||
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
|
||||
const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
|
||||
|
||||
// Calculate per-meal amounts if needed
|
||||
const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
|
||||
const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
|
||||
|
||||
foodBreakdowns.push({
|
||||
name: fs.name,
|
||||
percentage: fs.percentage,
|
||||
dailyGrams: dailyGramsForThisFood,
|
||||
displayGrams: displayGrams,
|
||||
calories: dailyCaloriesForThisFood,
|
||||
displayCalories: displayCalories,
|
||||
isLocked: fs.isLocked,
|
||||
hasEnergyContent: true
|
||||
});
|
||||
@ -3151,7 +3430,9 @@ const CALCULATOR_CONFIG = {
|
||||
name: fs.name,
|
||||
percentage: fs.percentage,
|
||||
dailyGrams: 0,
|
||||
displayGrams: 0,
|
||||
calories: 0,
|
||||
displayCalories: 0,
|
||||
isLocked: fs.isLocked,
|
||||
hasEnergyContent: false
|
||||
});
|
||||
@ -3169,6 +3450,7 @@ const CALCULATOR_CONFIG = {
|
||||
|
||||
dailyFoodResults.style.display = 'none';
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
if (feedingConfig) feedingConfig.style.display = 'none';
|
||||
|
||||
// Hide unit buttons when no valid foods
|
||||
const unitButtons = document.getElementById('unitButtons');
|
||||
@ -3215,6 +3497,9 @@ const CALCULATOR_CONFIG = {
|
||||
// Update daily food results (total) - will be updated with proper units later
|
||||
dailyFoodResults.style.display = 'block';
|
||||
|
||||
// Show feeding configuration when we have valid foods
|
||||
if (feedingConfig) feedingConfig.style.display = 'block';
|
||||
|
||||
// Show unit buttons when daily results are shown
|
||||
const unitButtons = document.getElementById('unitButtons');
|
||||
if (unitButtons) unitButtons.style.display = 'flex';
|
||||
@ -3223,7 +3508,7 @@ const CALCULATOR_CONFIG = {
|
||||
if (foodBreakdownList && foodBreakdowns.length > 1) {
|
||||
const breakdownHTML = foodBreakdowns.map(breakdown => {
|
||||
const valueContent = breakdown.hasEnergyContent
|
||||
? `${this.formatNumber(this.convertUnits(breakdown.dailyGrams, unit), decimals)} ${unitLabel}/day`
|
||||
? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
|
||||
: `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||
|
||||
return `
|
||||
@ -3243,8 +3528,9 @@ const CALCULATOR_CONFIG = {
|
||||
// Generate individual food amount breakdown
|
||||
|
||||
// Update daily food value with correct units
|
||||
const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
|
||||
dailyFoodValue.textContent = this.formatNumber(convertedDailyTotal, decimals) + ` ${unitLabel}/day`;
|
||||
const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
|
||||
const convertedTotal = this.convertUnits(displayTotal, unit);
|
||||
dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
|
||||
|
||||
// Build HTML for individual food amounts
|
||||
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
|
||||
@ -3265,7 +3551,11 @@ const CALCULATOR_CONFIG = {
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
const totalGramsForDays = breakdown.dailyGrams * numDays;
|
||||
// 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);
|
||||
|
||||
return `
|
||||
|
||||
@ -437,4 +437,102 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Feeding Configuration Styles */
|
||||
.dog-calculator-container .dog-calculator-feeding-config {
|
||||
margin-top: 20px;
|
||||
padding: 16px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-frequency-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-frequency-row > label {
|
||||
font-weight: 500;
|
||||
color: var(--text-label);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group input[type="radio"] {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group input[type="radio"]:checked + span {
|
||||
font-weight: 600;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input span {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input input[type="number"] {
|
||||
width: 50px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input input[type="number"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.1);
|
||||
}
|
||||
|
||||
/* Update meal note styling */
|
||||
.dog-calculator-container #mealNote {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments for feeding config */
|
||||
@media (max-width: 480px) {
|
||||
.dog-calculator-meal-input {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.dog-calculator-frequency-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark theme - manual override */
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
.dog-calculator-container.theme-dark {
|
||||
--bg-primary: #24202d;
|
||||
--bg-secondary: #312b3b;
|
||||
--bg-tertiary: #1f1b26;
|
||||
--border-color: #433c4f;
|
||||
--text-primary: #f5f3f7;
|
||||
--text-secondary: #b8b0c2;
|
||||
--text-label: #9f94ae;
|
||||
--success-color: #7fa464;
|
||||
--error-color: #e87159;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@ -148,14 +152,55 @@
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
/* Dark theme feeding configuration styles */
|
||||
.dog-calculator-container.theme-dark .dog-calculator-feeding-config {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-frequency-row > label {
|
||||
color: var(--text-label);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-radio-group label {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-radio-group input[type="radio"]:checked + span {
|
||||
color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-meal-input span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"] {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"]:focus {
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark #mealNote {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* System theme - follows user's OS preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dog-calculator-container.theme-system {
|
||||
--bg-primary: #24202d;
|
||||
--bg-secondary: #312b3b;
|
||||
--bg-tertiary: #1f1b26;
|
||||
--border-color: #433c4f;
|
||||
--text-primary: #f5f3f7;
|
||||
--text-secondary: #b8b0c2;
|
||||
--text-label: #9f94ae;
|
||||
--success-color: #7fa464;
|
||||
--error-color: #e87159;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@ -299,6 +344,43 @@
|
||||
border-color: var(--success-color);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
/* System theme feeding configuration styles in dark mode */
|
||||
.dog-calculator-container.theme-system .dog-calculator-feeding-config {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-frequency-row > label {
|
||||
color: var(--text-label);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-radio-group label {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-radio-group input[type="radio"]:checked + span {
|
||||
color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-meal-input span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"] {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"]:focus {
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system #mealNote {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
|
||||
@ -65,6 +65,28 @@
|
||||
<span>Add another food source</span>
|
||||
</button>
|
||||
|
||||
<!-- Feeding Configuration -->
|
||||
<div class="dog-calculator-feeding-config" id="feedingConfig" style="display: none;">
|
||||
<div class="dog-calculator-frequency-row">
|
||||
<label>Show amounts:</label>
|
||||
<div class="dog-calculator-radio-group">
|
||||
<label>
|
||||
<input type="radio" name="showAs" value="daily" id="showDaily" checked>
|
||||
<span>Per day</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="showAs" value="meal" id="showPerMeal">
|
||||
<span>Per meal</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="dog-calculator-meal-input" id="mealInputGroup" style="display: none;">
|
||||
<span>×</span>
|
||||
<input type="number" id="mealsPerDay" value="2" min="1" max="10">
|
||||
<span>meals/day</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Per-Food Results -->
|
||||
<div class="dog-calculator-food-results" id="foodBreakdownResults" style="display: none;">
|
||||
<div id="foodBreakdownList">
|
||||
@ -100,7 +122,7 @@
|
||||
<h4 class="dog-calculator-section-title">
|
||||
Calculate amounts for
|
||||
<input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days">
|
||||
<span id="dayLabel">day</span>:
|
||||
<span id="dayLabel">day</span><span id="mealNote" style="display: none;"></span>:
|
||||
</h4>
|
||||
<div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
|
||||
<div id="foodAmountsList" class="dog-calculator-food-amounts-list">
|
||||
|
||||
@ -11,6 +11,8 @@
|
||||
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
|
||||
this.foodSources = [];
|
||||
this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
|
||||
this.mealsPerDay = 2;
|
||||
this.showPerMeal = false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
@ -765,6 +767,58 @@
|
||||
|
||||
if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());
|
||||
|
||||
// Feeding configuration event listeners
|
||||
const showDaily = document.getElementById('showDaily');
|
||||
const showPerMeal = document.getElementById('showPerMeal');
|
||||
const mealsPerDayInput = document.getElementById('mealsPerDay');
|
||||
const mealInputGroup = document.getElementById('mealInputGroup');
|
||||
|
||||
if (showDaily) {
|
||||
showDaily.addEventListener('change', () => {
|
||||
if (showDaily.checked) {
|
||||
this.showPerMeal = false;
|
||||
if (mealInputGroup) mealInputGroup.style.display = 'none';
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (showPerMeal) {
|
||||
showPerMeal.addEventListener('change', () => {
|
||||
if (showPerMeal.checked) {
|
||||
this.showPerMeal = true;
|
||||
if (mealInputGroup) mealInputGroup.style.display = 'inline-flex';
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (mealsPerDayInput) {
|
||||
mealsPerDayInput.addEventListener('input', () => {
|
||||
const meals = parseInt(mealsPerDayInput.value);
|
||||
if (meals && meals >= 1 && meals <= 10) {
|
||||
this.mealsPerDay = meals;
|
||||
if (this.showPerMeal) {
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
mealsPerDayInput.addEventListener('blur', () => {
|
||||
if (!mealsPerDayInput.value || parseInt(mealsPerDayInput.value) < 1) {
|
||||
mealsPerDayInput.value = 2;
|
||||
this.mealsPerDay = 2;
|
||||
if (this.showPerMeal) {
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Modal event listeners
|
||||
const shareBtn = document.getElementById('shareBtn');
|
||||
const embedBtn = document.getElementById('embedBtn');
|
||||
@ -983,10 +1037,21 @@
|
||||
updateDayLabel() {
|
||||
const days = document.getElementById('days')?.value;
|
||||
const dayLabel = document.getElementById('dayLabel');
|
||||
const mealNote = document.getElementById('mealNote');
|
||||
if (dayLabel && days) {
|
||||
const numDays = parseInt(days);
|
||||
dayLabel.textContent = numDays === 1 ? 'day' : 'days';
|
||||
}
|
||||
if (mealNote) {
|
||||
if (this.showPerMeal && days) {
|
||||
const numDays = parseInt(days);
|
||||
const totalMeals = numDays * this.mealsPerDay;
|
||||
mealNote.textContent = ` (${totalMeals} meal${totalMeals === 1 ? '' : 's'} total)`;
|
||||
mealNote.style.display = 'inline';
|
||||
} else {
|
||||
mealNote.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setActiveUnitButton(unit) {
|
||||
@ -1053,6 +1118,7 @@
|
||||
const totalAmountDisplay = document.getElementById('totalAmountDisplay');
|
||||
const foodBreakdownResults = document.getElementById('foodBreakdownResults');
|
||||
const foodBreakdownList = document.getElementById('foodBreakdownList');
|
||||
const feedingConfig = document.getElementById('feedingConfig');
|
||||
|
||||
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
|
||||
return;
|
||||
@ -1063,6 +1129,9 @@
|
||||
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
|
||||
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
|
||||
|
||||
// Determine frequency suffix for display
|
||||
const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
|
||||
|
||||
// Clear all food source errors first
|
||||
this.foodSources.forEach(fs => {
|
||||
this.showError(`energy-error-${fs.id}`, false);
|
||||
@ -1075,6 +1144,7 @@
|
||||
foodAmountsSection.style.display = 'none';
|
||||
dailyFoodResults.style.display = 'none';
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
if (feedingConfig) feedingConfig.style.display = 'none';
|
||||
|
||||
// Hide unit buttons when validation fails
|
||||
const unitButtons = document.getElementById('unitButtons');
|
||||
@ -1096,11 +1166,17 @@
|
||||
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
|
||||
const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
|
||||
|
||||
// Calculate per-meal amounts if needed
|
||||
const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
|
||||
const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
|
||||
|
||||
foodBreakdowns.push({
|
||||
name: fs.name,
|
||||
percentage: fs.percentage,
|
||||
dailyGrams: dailyGramsForThisFood,
|
||||
displayGrams: displayGrams,
|
||||
calories: dailyCaloriesForThisFood,
|
||||
displayCalories: displayCalories,
|
||||
isLocked: fs.isLocked,
|
||||
hasEnergyContent: true
|
||||
});
|
||||
@ -1113,7 +1189,9 @@
|
||||
name: fs.name,
|
||||
percentage: fs.percentage,
|
||||
dailyGrams: 0,
|
||||
displayGrams: 0,
|
||||
calories: 0,
|
||||
displayCalories: 0,
|
||||
isLocked: fs.isLocked,
|
||||
hasEnergyContent: false
|
||||
});
|
||||
@ -1131,6 +1209,7 @@
|
||||
|
||||
dailyFoodResults.style.display = 'none';
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
if (feedingConfig) feedingConfig.style.display = 'none';
|
||||
|
||||
// Hide unit buttons when no valid foods
|
||||
const unitButtons = document.getElementById('unitButtons');
|
||||
@ -1177,6 +1256,9 @@
|
||||
// Update daily food results (total) - will be updated with proper units later
|
||||
dailyFoodResults.style.display = 'block';
|
||||
|
||||
// Show feeding configuration when we have valid foods
|
||||
if (feedingConfig) feedingConfig.style.display = 'block';
|
||||
|
||||
// Show unit buttons when daily results are shown
|
||||
const unitButtons = document.getElementById('unitButtons');
|
||||
if (unitButtons) unitButtons.style.display = 'flex';
|
||||
@ -1185,7 +1267,7 @@
|
||||
if (foodBreakdownList && foodBreakdowns.length > 1) {
|
||||
const breakdownHTML = foodBreakdowns.map(breakdown => {
|
||||
const valueContent = breakdown.hasEnergyContent
|
||||
? `${this.formatNumber(this.convertUnits(breakdown.dailyGrams, unit), decimals)} ${unitLabel}/day`
|
||||
? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
|
||||
: `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||
|
||||
return `
|
||||
@ -1205,8 +1287,9 @@
|
||||
// Generate individual food amount breakdown
|
||||
|
||||
// Update daily food value with correct units
|
||||
const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
|
||||
dailyFoodValue.textContent = this.formatNumber(convertedDailyTotal, decimals) + ` ${unitLabel}/day`;
|
||||
const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
|
||||
const convertedTotal = this.convertUnits(displayTotal, unit);
|
||||
dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
|
||||
|
||||
// Build HTML for individual food amounts
|
||||
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
|
||||
@ -1227,7 +1310,11 @@
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
const totalGramsForDays = breakdown.dailyGrams * numDays;
|
||||
// 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);
|
||||
|
||||
return `
|
||||
|
||||
@ -462,14 +462,117 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Feeding Configuration Styles */
|
||||
.dog-calculator-container .dog-calculator-feeding-config {
|
||||
margin-top: 20px;
|
||||
padding: 16px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-frequency-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-frequency-row > label {
|
||||
font-weight: 500;
|
||||
color: var(--text-label);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group input[type="radio"] {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-radio-group input[type="radio"]:checked + span {
|
||||
font-weight: 600;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input span {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input input[type="number"] {
|
||||
width: 50px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dog-calculator-container .dog-calculator-meal-input input[type="number"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.1);
|
||||
}
|
||||
|
||||
/* Update meal note styling */
|
||||
.dog-calculator-container #mealNote {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments for feeding config */
|
||||
@media (max-width: 480px) {
|
||||
.dog-calculator-meal-input {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.dog-calculator-frequency-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark theme - manual override */
|
||||
|
||||
.dog-calculator-container.theme-dark {
|
||||
--bg-primary: #24202d;
|
||||
--bg-secondary: #312b3b;
|
||||
--bg-tertiary: #1f1b26;
|
||||
--border-color: #433c4f;
|
||||
--text-primary: #f5f3f7;
|
||||
--text-secondary: #b8b0c2;
|
||||
--text-label: #9f94ae;
|
||||
--success-color: #7fa464;
|
||||
--error-color: #e87159;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@ -614,14 +717,55 @@
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
/* Dark theme feeding configuration styles */
|
||||
.dog-calculator-container.theme-dark .dog-calculator-feeding-config {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-frequency-row > label {
|
||||
color: var(--text-label);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-radio-group label {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-radio-group input[type="radio"]:checked + span {
|
||||
color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-meal-input span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"] {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"]:focus {
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark #mealNote {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* System theme - follows user's OS preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dog-calculator-container.theme-system {
|
||||
--bg-primary: #24202d;
|
||||
--bg-secondary: #312b3b;
|
||||
--bg-tertiary: #1f1b26;
|
||||
--border-color: #433c4f;
|
||||
--text-primary: #f5f3f7;
|
||||
--text-secondary: #b8b0c2;
|
||||
--text-label: #9f94ae;
|
||||
--success-color: #7fa464;
|
||||
--error-color: #e87159;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@ -765,6 +909,43 @@
|
||||
border-color: var(--success-color);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
/* System theme feeding configuration styles in dark mode */
|
||||
.dog-calculator-container.theme-system .dog-calculator-feeding-config {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-frequency-row > label {
|
||||
color: var(--text-label);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-radio-group label {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-radio-group input[type="radio"]:checked + span {
|
||||
color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-meal-input span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"] {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"]:focus {
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system #mealNote {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
@ -1890,6 +2071,8 @@ const CALCULATOR_CONFIG = {
|
||||
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
|
||||
this.foodSources = [];
|
||||
this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
|
||||
this.mealsPerDay = 2;
|
||||
this.showPerMeal = false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
@ -1962,6 +2145,28 @@ const CALCULATOR_CONFIG = {
|
||||
<span>Add another food source</span>
|
||||
</button>
|
||||
|
||||
<!-- Feeding Configuration -->
|
||||
<div class="dog-calculator-feeding-config" id="feedingConfig" style="display: none;">
|
||||
<div class="dog-calculator-frequency-row">
|
||||
<label>Show amounts:</label>
|
||||
<div class="dog-calculator-radio-group">
|
||||
<label>
|
||||
<input type="radio" name="showAs" value="daily" id="showDaily" checked>
|
||||
<span>Per day</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="showAs" value="meal" id="showPerMeal">
|
||||
<span>Per meal</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="dog-calculator-meal-input" id="mealInputGroup" style="display: none;">
|
||||
<span>×</span>
|
||||
<input type="number" id="mealsPerDay" value="2" min="1" max="10">
|
||||
<span>meals/day</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Per-Food Results -->
|
||||
<div class="dog-calculator-food-results" id="foodBreakdownResults" style="display: none;">
|
||||
<div id="foodBreakdownList">
|
||||
@ -1997,7 +2202,7 @@ const CALCULATOR_CONFIG = {
|
||||
<h4 class="dog-calculator-section-title">
|
||||
Calculate amounts for
|
||||
<input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days">
|
||||
<span id="dayLabel">day</span>:
|
||||
<span id="dayLabel">day</span><span id="mealNote" style="display: none;"></span>:
|
||||
</h4>
|
||||
<div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
|
||||
<div id="foodAmountsList" class="dog-calculator-food-amounts-list">
|
||||
@ -2840,6 +3045,58 @@ const CALCULATOR_CONFIG = {
|
||||
|
||||
if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());
|
||||
|
||||
// Feeding configuration event listeners
|
||||
const showDaily = this.container.querySelector('#showDaily');
|
||||
const showPerMeal = this.container.querySelector('#showPerMeal');
|
||||
const mealsPerDayInput = this.container.querySelector('#mealsPerDay');
|
||||
const mealInputGroup = this.container.querySelector('#mealInputGroup');
|
||||
|
||||
if (showDaily) {
|
||||
showDaily.addEventListener('change', () => {
|
||||
if (showDaily.checked) {
|
||||
this.showPerMeal = false;
|
||||
if (mealInputGroup) mealInputGroup.style.display = 'none';
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (showPerMeal) {
|
||||
showPerMeal.addEventListener('change', () => {
|
||||
if (showPerMeal.checked) {
|
||||
this.showPerMeal = true;
|
||||
if (mealInputGroup) mealInputGroup.style.display = 'inline-flex';
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (mealsPerDayInput) {
|
||||
mealsPerDayInput.addEventListener('input', () => {
|
||||
const meals = parseInt(mealsPerDayInput.value);
|
||||
if (meals && meals >= 1 && meals <= 10) {
|
||||
this.mealsPerDay = meals;
|
||||
if (this.showPerMeal) {
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
mealsPerDayInput.addEventListener('blur', () => {
|
||||
if (!mealsPerDayInput.value || parseInt(mealsPerDayInput.value) < 1) {
|
||||
mealsPerDayInput.value = 2;
|
||||
this.mealsPerDay = 2;
|
||||
if (this.showPerMeal) {
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Modal event listeners
|
||||
const shareBtn = this.container.querySelector('#shareBtn');
|
||||
const embedBtn = this.container.querySelector('#embedBtn');
|
||||
@ -3058,10 +3315,21 @@ const CALCULATOR_CONFIG = {
|
||||
updateDayLabel() {
|
||||
const days = this.container.querySelector('#days')?.value;
|
||||
const dayLabel = this.container.querySelector('#dayLabel');
|
||||
const mealNote = this.container.querySelector('#mealNote');
|
||||
if (dayLabel && days) {
|
||||
const numDays = parseInt(days);
|
||||
dayLabel.textContent = numDays === 1 ? 'day' : 'days';
|
||||
}
|
||||
if (mealNote) {
|
||||
if (this.showPerMeal && days) {
|
||||
const numDays = parseInt(days);
|
||||
const totalMeals = numDays * this.mealsPerDay;
|
||||
mealNote.textContent = ` (${totalMeals} meal${totalMeals === 1 ? '' : 's'} total)`;
|
||||
mealNote.style.display = 'inline';
|
||||
} else {
|
||||
mealNote.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setActiveUnitButton(unit) {
|
||||
@ -3128,6 +3396,7 @@ const CALCULATOR_CONFIG = {
|
||||
const totalAmountDisplay = this.container.querySelector('#totalAmountDisplay');
|
||||
const foodBreakdownResults = this.container.querySelector('#foodBreakdownResults');
|
||||
const foodBreakdownList = this.container.querySelector('#foodBreakdownList');
|
||||
const feedingConfig = this.container.querySelector('#feedingConfig');
|
||||
|
||||
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
|
||||
return;
|
||||
@ -3138,6 +3407,9 @@ const CALCULATOR_CONFIG = {
|
||||
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
|
||||
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
|
||||
|
||||
// Determine frequency suffix for display
|
||||
const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
|
||||
|
||||
// Clear all food source errors first
|
||||
this.foodSources.forEach(fs => {
|
||||
this.showError(`energy-error-${fs.id}`, false);
|
||||
@ -3150,6 +3422,7 @@ const CALCULATOR_CONFIG = {
|
||||
foodAmountsSection.style.display = 'none';
|
||||
dailyFoodResults.style.display = 'none';
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
if (feedingConfig) feedingConfig.style.display = 'none';
|
||||
|
||||
// Hide unit buttons when validation fails
|
||||
const unitButtons = this.container.querySelector('#unitButtons');
|
||||
@ -3171,11 +3444,17 @@ const CALCULATOR_CONFIG = {
|
||||
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
|
||||
const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
|
||||
|
||||
// Calculate per-meal amounts if needed
|
||||
const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
|
||||
const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
|
||||
|
||||
foodBreakdowns.push({
|
||||
name: fs.name,
|
||||
percentage: fs.percentage,
|
||||
dailyGrams: dailyGramsForThisFood,
|
||||
displayGrams: displayGrams,
|
||||
calories: dailyCaloriesForThisFood,
|
||||
displayCalories: displayCalories,
|
||||
isLocked: fs.isLocked,
|
||||
hasEnergyContent: true
|
||||
});
|
||||
@ -3188,7 +3467,9 @@ const CALCULATOR_CONFIG = {
|
||||
name: fs.name,
|
||||
percentage: fs.percentage,
|
||||
dailyGrams: 0,
|
||||
displayGrams: 0,
|
||||
calories: 0,
|
||||
displayCalories: 0,
|
||||
isLocked: fs.isLocked,
|
||||
hasEnergyContent: false
|
||||
});
|
||||
@ -3206,6 +3487,7 @@ const CALCULATOR_CONFIG = {
|
||||
|
||||
dailyFoodResults.style.display = 'none';
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
if (feedingConfig) feedingConfig.style.display = 'none';
|
||||
|
||||
// Hide unit buttons when no valid foods
|
||||
const unitButtons = this.container.querySelector('#unitButtons');
|
||||
@ -3252,6 +3534,9 @@ const CALCULATOR_CONFIG = {
|
||||
// Update daily food results (total) - will be updated with proper units later
|
||||
dailyFoodResults.style.display = 'block';
|
||||
|
||||
// Show feeding configuration when we have valid foods
|
||||
if (feedingConfig) feedingConfig.style.display = 'block';
|
||||
|
||||
// Show unit buttons when daily results are shown
|
||||
const unitButtons = this.container.querySelector('#unitButtons');
|
||||
if (unitButtons) unitButtons.style.display = 'flex';
|
||||
@ -3260,7 +3545,7 @@ const CALCULATOR_CONFIG = {
|
||||
if (foodBreakdownList && foodBreakdowns.length > 1) {
|
||||
const breakdownHTML = foodBreakdowns.map(breakdown => {
|
||||
const valueContent = breakdown.hasEnergyContent
|
||||
? `${this.formatNumber(this.convertUnits(breakdown.dailyGrams, unit), decimals)} ${unitLabel}/day`
|
||||
? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
|
||||
: `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||
|
||||
return `
|
||||
@ -3280,8 +3565,9 @@ const CALCULATOR_CONFIG = {
|
||||
// Generate individual food amount breakdown
|
||||
|
||||
// Update daily food value with correct units
|
||||
const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
|
||||
dailyFoodValue.textContent = this.formatNumber(convertedDailyTotal, decimals) + ` ${unitLabel}/day`;
|
||||
const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
|
||||
const convertedTotal = this.convertUnits(displayTotal, unit);
|
||||
dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
|
||||
|
||||
// Build HTML for individual food amounts
|
||||
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
|
||||
@ -3302,7 +3588,11 @@ const CALCULATOR_CONFIG = {
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
const totalGramsForDays = breakdown.dailyGrams * numDays;
|
||||
// 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);
|
||||
|
||||
return `
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user