Add ingredients as rows to the column, and reset the form

src/pages/recipe/new.astro

@@ -1,20 +1,66 @@
 ---
-import client from "@/data/pocketbase";
 import SiteLayout from "@/layouts/base";
-import ImageCarousel from "@/components/Detail/ImageCarousel";
-import IngredientTableView from "@/components/Detail/IngredientTableView";
-import StepView from "@/components/Detail/StepView";
-import InfoView from "@/components/Detail/InfoView";
 
 const { recipeid } = Astro.params;
 
+// Actually post the recipe with the stored variables
+async function submitRecipe() {
+    
+}
+
 ---
 
 <script>
-    let ingredients: {qty: string, unit: string, name: string}[] = []
+    let ingredientFields: HTMLInputElement[] = []
+    let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
+    let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
     
-    function addIngredient(q: string, u: string, n: string) {
-        ingredients.push({qty: q, unit: u, name: n})
+    document.addEventListener('DOMContentLoaded', function() {
+        
+        ingredientFields.push(
+            document.querySelector('#ing-qty')!,
+            document.querySelector('#ing-unit')!,
+            document.querySelector('#ing-name')!
+        )
+        
+        // show plus button once the user clicks off one of the text fields
+        ingredientFields.forEach(f => f.addEventListener('beforeinput', showAddIngredientButton))
+        // onclick for add button
+        document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
+    });
+    
+    let ingredients: {qty: string, unit: string, name: string}[] = []
+    function addIngredient() {
+        const ing = {
+            qty: ingredientFields[0].value,
+            unit: ingredientFields[1].value,
+            name: ingredientFields[2].value
+        }
+
+        ingredients.push(ing)
+        
+        // Create the table row HTML directly
+        const newRow = document.createElement('tr')
+        newRow.innerHTML = `
+            <td class="px-2 py-1 border-t border-white/10">${ing.qty}</td>
+            <td class="px-2 py-1 border-t border-white/10">${ing.unit}</td>
+            <td class="px-2 py-1 border-t border-white/10">${ing.name}</td>
+        `
+        
+        ingredientTable.appendChild(newRow)
+
+        ingredientFields.forEach(f => f.value = "")
+        ingredientAddButton.style.display = 'none'
+    }
+
+    function showAddIngredientButton() {
+        // only show if there is text in the field
+
+        if (ingredientFields[0].value && ingredientFields[2].value) {
+            ingredientAddButton.style.display = 'block'
+        } else {
+            ingredientAddButton.style.display = 'hidden'
+        }
     }
 </script>
 
@@ -40,11 +86,12 @@ const { recipeid } = Astro.params;
 
             <div class="flex flex-row align-middle items-center">
                 <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
+                <button class="hidden" id="add-ingredient-btn">add</button>
             </div>
             <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
                 <thead>
                     <tr>
-                        <th class="px-4 py-2 w-25">Quantity</th>
+                        <th class="px-4 py-2 w-18">Qty</th>
                         <th class="px-4 py-2 w-20">Unit</th>
                         <th class="px-4 py-2">Ingredient</th>
                     </tr>
@@ -58,7 +105,8 @@ const { recipeid } = Astro.params;
                             <input id="ing-unit" class="w-full h-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Unit">
                         </td>
                         <td class="px-2 py-1">
-                            <textarea id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-3 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/>
+                            <!-- <textarea id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-3 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/> -->
+                             <input id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
                         </td>
                     </tr>
                 </tbody>