modified ingredient input field and getingredient function so it fits with the json the backend expects

This commit is contained in:
durn
2026-04-09 16:10:04 -06:00
parent 4cce9018f8
commit cfc414b0e7
@@ -110,7 +110,10 @@ function addIngredient() {
const row = document.createElement('div');
row.className = 'dynamic-row';
row.innerHTML = `
<input type="text" placeholder="e.g. 3 tbsp of sugar">
<input type="text" class="ing-name" placeholder="Ingredient (e.g. Sugar)">
<input type="text" class="ing-qty" placeholder="Qty (e.g. 3)">
<input type="text" class="ing-unit" placeholder="Unit (e.g. tbsp)">
<input type="text" class="ing-notes" placeholder="Notes (optional)">
<button class="btn-remove" title="Remove">✕</button>`;
row.querySelector('.btn-remove').addEventListener('click', () => {
row.remove();
@@ -148,11 +151,19 @@ function renumberSteps() {
// ---- Collecting on submit ----
// Call this wherever you build your POST payload:
function getIngredients() {
return [...ingredientContainer.querySelectorAll('input')]
.map((el, i) => ({ order: i + 1, name: el.value.trim() }))
.filter(item => item.name);
return [...ingredientContainer.querySelectorAll('.dynamic-row')].map(row => {
return {
ingredient: {
name: row.querySelector('.ing-name').value.trim()
},
quantity: row.querySelector('.ing-qty').value.trim(),
unit: row.querySelector('.ing-unit').value.trim(),
notes: row.querySelector('.ing-notes').value.trim()
};
}).filter(item => item.ingredient.name);
}
function getSteps() {
return [...stepsContainer.querySelectorAll('textarea')]
.map((el, i) => ({ step_number: i + 1, instruction: el.value.trim() }))