src/pages/recipe/new.astro

@@ -1,66 +1,20 @@
 ---
+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 ingredientFields: HTMLInputElement[] = []
-    let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
-    let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
-    
-    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 = {
+    function addIngredient(q: string, u: string, n: string) {
-            qty: ingredientFields[0].value,
+        ingredients.push({qty: q, unit: u, name: n})
-            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>
 
@@ -86,12 +40,11 @@ async function submitRecipe() {
 
             <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-18">Qty</th>
+                        <th class="px-4 py-2 w-25">Quantity</th>
                         <th class="px-4 py-2 w-20">Unit</th>
                         <th class="px-4 py-2">Ingredient</th>
                     </tr>
@@ -105,8 +58,7 @@ async function submitRecipe() {
                             <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>