diff --git a/src/pages/recipe/new.astro b/src/pages/recipe/new.astro
index aa4f4bb..022f4fc 100644
--- a/src/pages/recipe/new.astro
+++ b/src/pages/recipe/new.astro
@@ -69,7 +69,7 @@ async function submitRecipe() {
-
+
@@ -84,7 +84,9 @@ async function submitRecipe() {
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
/>
-
+
+
+
\ No newline at end of file
diff --git a/src/script/newRecipe.ts b/src/script/newRecipe.ts
index 2bb7786..d305048 100644
--- a/src/script/newRecipe.ts
+++ b/src/script/newRecipe.ts
@@ -3,7 +3,7 @@ let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredie
let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
let stepInput: HTMLTextAreaElement = document.querySelector('#new-instruction')!
-let stepList: HTMLUListElement = document.querySelector('#step-list')
+let stepList: HTMLUListElement = document.querySelector('#step-list')!
let currentStepIndex = 0
// - VARS
@@ -67,20 +67,52 @@ function addStep() {
}
steps.push(step)
-
- const newStep = document.createElement('div')
- newStep.innerHTML = `
- Step ${step.index + 1}
-
-
- `
- newStep.className = "bg-[#2a2b2c] rounded-lg mb-2 p-3"
- stepList.appendChild(newStep)
-
+ renderSteps()
stepInput.value = ''
+}
+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 = `
+
+
+
Step ${displayIndex + 1}
+
+
+
+
+
+
+
+
+ `
+ 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
@@ -92,4 +124,25 @@ function showAddIngredientButton() {
} else {
ingredientAddButton.style.display = 'hidden'
}
+}
+
+// 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()
}
\ No newline at end of file