breadone/Recipie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pressing enter/return clears the fields and returns the cursor to the Qty input

Browse Source
This commit is contained in:
June 2025-08-14 18:48:03 +12:00
parent 89c04bb909
commit dce5ba8990
Signed by: breadone
GPG Key ID: FDC19FE143200483
1 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/recipe/new.astro
View File

@ -10,6 +10,7 @@ async function submitRecipe() {
---
<!-- INGREDIENT SCRIPT -->
<script>
let ingredientFields: HTMLInputElement[] = []
let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
@ -27,6 +28,8 @@ async function submitRecipe() {
ingredientFields.forEach(f => f.addEventListener('beforeinput', showAddIngredientButton))
// onclick for add button
document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
// for pressing enter to reset cursor
ingredientFields[2].addEventListener('keyup', e => clearInputFields(e))
});
let ingredients: {qty: string, unit: string, name: string}[] = []
@ -39,20 +42,28 @@ async function submitRecipe() {
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>
<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>
`
ingredientTable.appendChild(newRow)
ingredientFields.forEach(f => f.value = "")
ingredientFields.forEach(f => f.value = '')
ingredientAddButton.style.display = 'none'
}
function clearInputFields(e: KeyboardEvent) {
// clear input fields
if (e.key === 'Enter') {
addIngredient()
ingredientFields.forEach(f => f.value == '')
// move cursor to Qty field again
ingredientFields[0].focus()
}
}
function showAddIngredientButton() {
// only show if there is text in the field
@ -67,7 +78,7 @@ async function submitRecipe() {
<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">
<div class="w-full bg-white/10 rounded-lg h-50">
Image Upload
</div>
<!-- <ImageCarousel class="w-full" recipe={re} /> -->
@ -76,7 +87,7 @@ async function submitRecipe() {
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 -->
@ -99,14 +110,14 @@ async function submitRecipe() {
<tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-gray-600">
<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 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>