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

[PIE-13] New recipe page #11

Merged
breadone merged 26 commits from PIE-13 into main 2025-08-15 16:12:03 +12:00
Conversation 1 Commits 26 Files Changed 7 +25 -15
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 89c04bb909 - Show all commits

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

@ -1,10 +1,5 @@
---
import client from "@/data/pocketbase";
import SiteLayout from "@/layouts/base";
import ImageCarousel from "@/components/Detail/ImageCarousel";
import IngredientTableView from "@/components/Detail/IngredientTableView";
import StepView from "@/components/Detail/StepView";
import InfoView from "@/components/Detail/InfoView";
const { recipeid } = Astro.params;
@ -17,6 +12,8 @@ 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() {
@ -34,24 +31,36 @@ async function submitRecipe() {
let ingredients: {qty: string, unit: string, name: string}[] = []
function addIngredient() {
ingredients.push({
const ing = {
qty: ingredientFields[0].value,
unit: ingredientFields[1].value,
name: ingredientFields[2].value
})
console.log(ingredients)
}
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
console.log(ingredientFields[2].value === "")
if (ingredientFields[0].value && ingredientFields[2].value) {
(document.querySelector('#add-ingredient-btn') as HTMLButtonElement).style.display = 'block'
ingredientAddButton.style.display = 'block'
} else {
(document.querySelector('#add-ingredient-btn') as HTMLButtonElement).style.display = 'hidden'
ingredientAddButton.style.display = 'hidden'
}
}
</script>
@ -82,7 +91,7 @@ async function submitRecipe() {
<table class={`table-fixed text-left bg-[#2a2b2c] rounded-lg w-full`}>
<thead>
<tr>
<th class="px-4 py-2 w-25">Quantity</th>
<th class="px-4 py-2 w-18">Qty</th>
<th class="px-4 py-2 w-20">Unit</th>
<th class="px-4 py-2">Ingredient</th>
</tr>
@ -96,7 +105,8 @@ async function submitRecipe() {
<input id="ing-unit" class="w-full h-11 bg-white/20 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"/>
<!-- <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">
</td>
</tr>
</tbody>