List food sources separately in bottom section
This commit is contained in:
Dayowe
parent
0a7020cb88
commit
c7d4d8eb9e
167
iframe.html
167
iframe.html
@ -1379,6 +1379,105 @@
|
||||
color: #8a8a8a;
|
||||
}
|
||||
}
|
||||
|
||||
/* Food Amount Breakdown Styling */
|
||||
.dog-calculator-food-amounts-section {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-section-title {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-food-amounts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.dog-calculator-food-amount-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-food-amount-label {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.dog-calculator-food-percentage {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dog-calculator-lock-indicator {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dog-calculator-food-amount-value {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dog-calculator-total-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.dog-calculator-total-label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dog-calculator-total-value {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dog-calculator-full-width {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 576px) {
|
||||
.dog-calculator-food-amount-item {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dog-calculator-food-amount-label {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -1472,12 +1571,8 @@
|
||||
</div>
|
||||
|
||||
<div class="dog-calculator-input-group">
|
||||
<div class="dog-calculator-form-group">
|
||||
<label for="totalFoodDisplay">Total Food Amount:</label>
|
||||
<input type="text" id="totalFoodDisplay" readonly>
|
||||
</div>
|
||||
<div class="dog-calculator-form-group">
|
||||
<label for="unit">Unit:</label>
|
||||
<div class="dog-calculator-form-group dog-calculator-full-width">
|
||||
<label for="unit">Display Unit:</label>
|
||||
<select id="unit" class="dog-calculator-unit-select" aria-describedby="unitHelp">
|
||||
<option value="g">grams (g)</option>
|
||||
<option value="kg">kilograms (kg)</option>
|
||||
@ -1486,6 +1581,17 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
|
||||
<h4 class="dog-calculator-section-title">Food Amount Breakdown:</h4>
|
||||
<div id="foodAmountsList" class="dog-calculator-food-amounts-list">
|
||||
<!-- Individual food amounts will be populated here -->
|
||||
</div>
|
||||
<div class="dog-calculator-total-row" id="totalAmountRow">
|
||||
<span class="dog-calculator-total-label">Total Amount:</span>
|
||||
<span class="dog-calculator-total-value" id="totalAmountDisplay"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2532,11 +2638,13 @@
|
||||
const unitSelect = document.getElementById('unit');
|
||||
const dailyFoodResults = document.getElementById('dailyFoodResults');
|
||||
const dailyFoodValue = document.getElementById('dailyFoodValue');
|
||||
const totalFoodDisplay = document.getElementById('totalFoodDisplay');
|
||||
const foodAmountsSection = document.getElementById('foodAmountsSection');
|
||||
const foodAmountsList = document.getElementById('foodAmountsList');
|
||||
const totalAmountDisplay = document.getElementById('totalAmountDisplay');
|
||||
const foodBreakdownResults = document.getElementById('foodBreakdownResults');
|
||||
const foodBreakdownList = document.getElementById('foodBreakdownList');
|
||||
|
||||
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !totalFoodDisplay) {
|
||||
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2552,7 +2660,7 @@
|
||||
// Validate days input
|
||||
if (!days || !this.validateInput(days, 1, true)) {
|
||||
if (days) this.showError('daysError', true);
|
||||
totalFoodDisplay.value = '';
|
||||
foodAmountsSection.style.display = 'none';
|
||||
dailyFoodResults.style.display = 'none';
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
return;
|
||||
@ -2595,8 +2703,8 @@
|
||||
});
|
||||
|
||||
dailyFoodResults.style.display = 'none';
|
||||
foodAmountsSection.style.display = 'none';
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
totalFoodDisplay.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2619,13 +2727,44 @@
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
}
|
||||
|
||||
// Calculate total food amount for the specified days
|
||||
const totalFoodGrams = totalDailyGrams * numDays;
|
||||
const convertedAmount = this.convertUnits(totalFoodGrams, unit);
|
||||
// Generate individual food amount breakdown
|
||||
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
|
||||
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
|
||||
|
||||
totalFoodDisplay.value = this.formatNumber(convertedAmount, decimals) + ' ' + unitLabel;
|
||||
// Build HTML for individual food amounts
|
||||
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
|
||||
const totalGramsForDays = breakdown.dailyGrams * numDays;
|
||||
const convertedAmount = this.convertUnits(totalGramsForDays, unit);
|
||||
const lockIndicator = breakdown.isLocked ? '<span class="dog-calculator-lock-indicator">🔒</span>' : '';
|
||||
|
||||
return `
|
||||
<div class="dog-calculator-food-amount-item">
|
||||
<div class="dog-calculator-food-amount-label">
|
||||
<span>${breakdown.name}</span>
|
||||
<span class="dog-calculator-food-percentage">${breakdown.percentage}%</span>
|
||||
${lockIndicator}
|
||||
</div>
|
||||
<div class="dog-calculator-food-amount-value">
|
||||
${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Calculate and display total
|
||||
const totalFoodGrams = totalDailyGrams * numDays;
|
||||
const totalConverted = this.convertUnits(totalFoodGrams, unit);
|
||||
|
||||
// Update the display
|
||||
if (foodAmountsList) {
|
||||
foodAmountsList.innerHTML = foodAmountsHTML;
|
||||
}
|
||||
|
||||
if (totalAmountDisplay) {
|
||||
totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
|
||||
}
|
||||
|
||||
foodAmountsSection.style.display = 'block';
|
||||
|
||||
this.sendHeightToParent();
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user