Updates and fixes

iframe.html

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