[PIE-13] New recipe page #11
@ -69,7 +69,7 @@ async function submitRecipe() {
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<ul id="step-list" class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
|
||||
<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 -->
|
||||
@ -84,7 +84,9 @@ async function submitRecipe() {
|
||||
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
|
||||
/>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<ul id="step-list"></ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</SiteLayout>
|
@ -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)
|
||||
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 = `
|
||||
<p class="text-bold text-[10pt]">Step ${step.index + 1}</p>
|
||||
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<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)
|
||||
})
|
||||
|
||||
stepInput.value = ''
|
||||
// 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
|
||||
@ -93,3 +125,24 @@ function showAddIngredientButton() {
|
||||
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()
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user