padding change

src/pages/recipe/new.astro

@@ -9,74 +9,30 @@ 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 = {
-            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>
+<script src="@/script/newRecipe.ts"/>
 
 <SiteLayout>
     <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
         <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
-            <div class="w-full bg-white/20 rounded-lg h-50">
-                Image Upload
+            <div class="relative">
+                <input 
+                    id="photo" 
+                    type="file" 
+                    accept="image/png,image/jpeg" 
+                    class="w-full bg-white/10 rounded-lg h-50
+                           file:mr-4 file:py-2 file:px-4 
+                           file:rounded-lg file:border-0 file:hidden
+                           before:content-['camera'] before:w-full before:h-full before:flex 
+                           before:items-center before:justify-center before:absolute
+                           relative cursor-pointer
+                           [&::-webkit-file-upload-button]:hidden"
+                >
             </div>
-            <!-- <ImageCarousel class="w-full" recipe={re} /> -->
             <textarea
                 id="rec-name"
-                name="name"
                 rows="1"
                 placeholder="Name"
-                class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/20 rounded-lg resize-none overflow-hidden"
+                class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
                 oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
             />
                 <!-- if it works :3  -->
@@ -86,7 +42,7 @@ 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>
+                <button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
             </div>
             <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
                 <thead>
@@ -96,28 +52,42 @@ 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-gray-600">
+                <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-white/10">
                     <tr id="ingredient-input" class="">
                         <td class="px-2 py-1">
-                            <input id="ing-qty" class="w-full h-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Qty">
+                            <input id="ing-qty" class="w-full h-9 my-1 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
                         </td>
                         <td class="px-2 py-1">
-                            <input id="ing-unit" class="w-full h-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Unit">
+                            <input id="ing-unit" class="w-full h-9 bg-white/10 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"/> -->
-                             <input id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
+                             <input id="ing-name" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
                         </td>
                     </tr>
                 </tbody>
             </table>
         </div>
         
-        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
             <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
 
             <!-- Steps -->
-            <!-- <StepView steps={steps} /> -->
+            <p class="text-[22pt] font-bold md:hidden">Steps</p>
+ 
+            <div class="bg-[#2a2b2c] rounded-lg mb-2 p-2">
+                <!-- <p class="text-bold text-[10pt]">Step</p> -->
+                <textarea
+                        id="new-instruction"
+                        class="block bg-white/10 w-full h-full rounded-lg resize-none px-3 py-1"
+                        placeholder="New Step"
+                        oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
+                    />
+            </div>
+
+            <button disabled class="disabled:text-white/20 ml-auto mb-2 transition-colors text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>
+
+            <ul id="step-list"></ul>
         </div>
 
     </div>

src/script/newRecipe.ts

@@ -0,0 +1,185 @@
+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 stepAddButton: HTMLButtonElement = document.querySelector('#add-step-btn')!
+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
+}[] = []
+
+// - INIT
+document.addEventListener('DOMContentLoaded', function() {
+    
+    ingredientFields.push(
+        document.querySelector('#ing-qty')!,
+        document.querySelector('#ing-unit')!,
+        document.querySelector('#ing-name')!
+    )
+
+    stepInput.addEventListener('input', showAddStepButton)
+    
+    // show plus button once the user types in the text fields
+    ingredientFields.forEach(f => {
+        f.addEventListener('input', showAddIngredientButton)
+        f.addEventListener('keydown', showAddIngredientButton)
+    })
+    // onclick for add button
+    document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
+
+    // Enter key navigation for ingredient fields
+    ingredientFields[0].addEventListener('keydown', e => {
+        if (e.key === 'Enter') {
+            ingredientFields[1].focus() // Move from qty to unit
+        }
+    })
+    
+    ingredientFields[1].addEventListener('keydown', e => {
+        if (e.key === 'Enter') {
+            ingredientFields[2].focus() // Move from unit to name
+        }
+    })
+    
+    // for pressing enter to add ingredient (on the last field)
+    ingredientFields[2].addEventListener('keydown', e => {if (e.key === 'Enter') addIngredient()} )
+    
+    // Initial check for button state
+    showAddIngredientButton()
+    showAddStepButton()
+
+    // Steps
+    stepInput.addEventListener('keyup', e => { if (e.key === 'Enter' && e.shiftKey) addStep()  } )
+    stepAddButton.addEventListener('click', addStep)
+});
+
+// - ADD
+function addIngredient() {
+    const ing = {
+        qty: ingredientFields[0].value,
+        unit: ingredientFields[1].value,
+        name: ingredientFields[2].value
+    }
+
+    ingredients.push(ing)
+    
+    const newRow = document.createElement('tr')
+    newRow.innerHTML = `
+        <td class="px-4 py-2 border-t border-white/10">${ing.qty}</td>
+        <td class="px-4 py-2 border-t border-white/10">${ing.unit}</td>
+        <td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
+    `
+    
+    // Add row to table and clear fields
+    ingredientTable.appendChild(newRow)
+    ingredientFields.forEach(f => f.value = '')
+    ingredientAddButton.disabled = true // Hide Add Ingredient button
+    // move cursor to Qty field again
+    ingredientFields[0].focus()
+}
+
+function addStep() {
+    const step = {
+        index: currentStepIndex++,
+        instruction: stepInput.value,
+        ingredients: []
+    }
+
+    steps.push(step)
+    renderSteps()
+    stepInput.value = ''
+    stepAddButton.disabled = true
+    stepInput.focus()
+}
+
+function renderSteps() {
+    // clear the step list
+    stepList.innerHTML = ''
+    
+    // re-render all steps in their current order
+    steps.forEach((step, displayIndex) => {
+        const newStep = document.createElement('div')
+        // times like this i regret using astro
+        newStep.innerHTML = `
+            <div class="flex justify-between items-start ">
+                <div class="flex flex-col">
+                    <p class="text-bold text-[10pt]">Step ${displayIndex + 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>
+                </div>
+
+                <div class="flex flex-col gap-1">
+                    <button id="move-up-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === 0 ? 'disabled' : ''}>↑</button>
+                    
+                    <button id="move-down-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === steps.length - 1 ? 'disabled' : ''}>↓</button>
+                </div>
+            </div>
+        `
+        newStep.id = `step-${step.index}`
+        newStep.className = "bg-[#2a2b2c] rounded-lg mb-2 p-3"
+        stepList.appendChild(newStep)
+    })
+    
+    // event listeners to reorder buttons
+    document.querySelectorAll('#move-up-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
+            moveStep(stepIndex, -1)
+        })
+    })
+    
+    document.querySelectorAll('#move-down-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
+            moveStep(stepIndex, 1)
+        })
+    })
+}
+
+// - UTILS
+function showAddIngredientButton() {
+    const hasQty = ingredientFields[0].value.trim().length > 0
+    const hasName = ingredientFields[2].value.trim().length > 0
+    
+    if (hasQty && hasName) {
+        ingredientAddButton.disabled = false
+    } else {
+        ingredientAddButton.disabled = true
+    }
+}
+
+function showAddStepButton() {
+    if (stepInput.value.trim().length > 0) {
+        stepAddButton.disabled = false
+    } else {
+        stepAddButton.disabled = true
+    }
+}
+
+// shift: the direction to move. should be +1 to move down or -1 to move up the list
+function moveStep(stepIndex: number, shift: number) {
+    // Find the step in the array
+    const currentStepArrayIndex = steps.findIndex(step => step.index === stepIndex)
+    
+    if (currentStepArrayIndex === -1) return // step not found
+    
+    const newIndex = currentStepArrayIndex + shift
+    
+    // check bounds
+    if (newIndex < 0 || newIndex >= steps.length) return
+    
+    // swap the steps in the array
+    const temp = steps[currentStepArrayIndex]
+    steps[currentStepArrayIndex] = steps[newIndex]
+    steps[newIndex] = temp
+    
+    // re-render the steps
+    renderSteps()
+}

tsconfig.json

@@ -7,6 +7,7 @@
     "paths": {
 			"@/components/*": ["src/components/*.astro"],
 			"@/layouts/*": ["src/layouts/*.astro"],
+			"@/script/*": ["src/script/*"],
 			"@/utils": ["src/utils/index.ts"],
 			"@/data/*": ["src/data/*"],
 			"@/site-config": ["src/site.config.ts"]