Initial implementation of adding new steps

src/script/newRecipe.ts

@@ -2,17 +2,16 @@ 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: {
-    name: string,
-    description: string,
-    servings: number,
-    rating: number,
-    worktime: number,
-    waittime: number,
-    images: string[], // record ID of uploaded image
-
+    index: number,
+    instruction: string,
+    ingredients: string[], // IDs of ingredient fields
 }[] = []
 
 // - INIT
@@ -30,6 +29,9 @@ 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('keydown', e => { if (e.key === 'Enter') addStep()  } )
 });
 
 // - ADD
@@ -57,6 +59,30 @@ 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