src/pages/recipe/new.astro

@@ -52,7 +52,7 @@ async function submitRecipe() {
                         <th class="px-4 py-2">Ingredient</th>
                     </tr>
                 </thead>
-                <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-white/10">
+                <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-gray-600">
                     <tr id="ingredient-input" class="">
                         <td class="px-2 py-1">
                             <input id="ing-qty" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
@@ -69,13 +69,13 @@ async function submitRecipe() {
             </table>
         </div>
         
-        <ul id="step-list" class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
+        <ul class="flex mt-4 md:flex-2/3 w-full flex-col">
             <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
 
             <!-- Steps -->
             <p class="text-[22pt] font-bold md:hidden">Steps</p>
  
-            <div class="bg-[#2a2b2c] rounded-lg mb-2 p-2">
+            <div class="bg-[#2a2b2c] md:ml-3 rounded-lg mb-2 p-2">
                 <!-- <p class="text-bold text-[10pt]">Step</p> -->
                 <textarea
                         id="new-instruction"

src/script/newRecipe.ts

@@ -2,16 +2,17 @@ let ingredientFields: HTMLInputElement[] = []
 let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
 let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
 
-let stepInput: HTMLTextAreaElement = document.querySelector('#new-instruction')!
-let stepList: HTMLUListElement = document.querySelector('#step-list')
-let currentStepIndex = 0
-
 // - VARS
 let ingredients: {qty: string, unit: string, name: string}[] = []
 let steps: {
-    index: number,
-    instruction: string,
-    ingredients: string[], // IDs of ingredient fields
+    name: string,
+    description: string,
+    servings: number,
+    rating: number,
+    worktime: number,
+    waittime: number,
+    images: string[], // record ID of uploaded image
+
 }[] = []
 
 // - INIT
@@ -29,9 +30,6 @@ document.addEventListener('DOMContentLoaded', function() {
     document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
     // for pressing enter to reset cursor
     ingredientFields[2].addEventListener('keyup', e => {if (e.key === 'Enter') addIngredient()} )
-
-    // Steps
-    stepInput.addEventListener('keyup', e => { if (e.key === 'Enter' && e.shiftKey) addStep()  } )
 });
 
 // - ADD
@@ -59,30 +57,6 @@ function addIngredient() {
     ingredientFields[0].focus()
 }
 
-function addStep() {
-    const step = {
-        index: currentStepIndex++,
-        instruction: stepInput.value,
-        ingredients: []
-    }
-
-    steps.push(step)
-
-    const newStep = document.createElement('div')
-    newStep.innerHTML = `
-        <p class="text-bold text-[10pt]">Step ${step.index + 1}</p>
-            
-        <div class="flex flex-col md:flex-row md:items-stretch">
-            <p class="w-full md:flex-2/3 pr-1 text-left">${step.instruction}</p>
-        </div>
-    `
-    newStep.className = "bg-[#2a2b2c] rounded-lg mb-2 p-3"
-    stepList.appendChild(newStep)
-
-    stepInput.value = ''
-
-}
-
 // - UTILS
 function showAddIngredientButton() {
     // only show if there is text in the field