[PIE-13] New recipe page #11

Merged
breadone merged 26 commits from PIE-13 into main 2025-08-15 16:12:03 +12:00
2 changed files with 70 additions and 15 deletions
Showing only changes of commit c420a63a2c - Show all commits

View File

@ -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>

View File

@ -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()
}