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

Compare commits

base: breadone:b1d95ea785af9fa08f5410633166f2228f1559d6
Branches Tags
breadone:main
breadone:PIE-13
breadone:PIE-9
...
compare: breadone:bfe9f12802a7511a26cfe6614e052cdbe4666208
Branches Tags
breadone:main
breadone:PIE-13
breadone:PIE-9

9 Commits
b1d95ea785 ... bfe9f12802

Author SHA1 Message Date
June
bfe9f12802
this is getting messy time for a rethink 2025-08-20 17:49:35 +12:00
June
600c7b6d25
button colour 2025-08-20 17:49:13 +12:00
June
38560f744d
proxy fwd all request attrs 2025-08-20 17:49:01 +12:00
June
7c1cee2f3a
use minutes for time instead of seconds 2025-08-20 17:48:38 +12:00
June
cd77cfdf66
i really hate cors 2025-08-20 17:48:26 +12:00
June
7b98506ad5
var rename 2025-08-20 10:49:42 +12:00
June
6d708d8fd4
padding changes 2025-08-19 18:54:30 +12:00
June
b3d36afdc7
Add universal bottom padding 2025-08-19 18:49:17 +12:00
June
12a02ef1f8
small design changes on /recipe/new 2025-08-19 18:49:04 +12:00
7 changed files with 85 additions and 24 deletions
Show Stats Expand all files Collapse all files

5
astro.config.mjs
View File

@ -7,8 +7,6 @@ import tailwindcss from '@tailwindcss/vite';
import { loadEnv } from "vite"; import { loadEnv } from "vite";
const { PUBLIC_PB_URL } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
output: 'server', output: 'server',
@ -19,5 +17,8 @@ export default defineConfig({
vite: { vite: {
plugins: [tailwindcss()], plugins: [tailwindcss()],
server: {
cors: false
}
} }
}); });

15
src/components/Detail/InfoView.astro
View File

@ -15,8 +15,19 @@ function formatTime(seconds) {
return result; return result;
} }
const workTime = formatTime(re.worktime) function formatTimeMin(minutes) {
const waitTime = formatTime(re.waittime) if (minutes === 0) return null
const h = Math.floor(minutes / 60);
const m = minutes % 60;
let result = "";
if (h > 0) result += `${h}h`;
if (m > 0) result += `${m}m`;
if (result === "") result = "0m";
return result;
}
const workTime = formatTimeMin(re.worktime)
const waitTime = formatTimeMin(re.waittime)
--- ---
<p class="text-white/60 text-sm mt-1 italic">{re.description}</p> <p class="text-white/60 text-sm mt-1 italic">{re.description}</p>

22
src/data/pocketbase.ts
View File

@ -8,29 +8,29 @@ import {
} from './schema' } from './schema'
class APIClient { class APIClient {
client: Pocketbase pb: Pocketbase
constructor() { constructor() {
this.client = new Pocketbase("http://localhost:4321") this.pb = new Pocketbase("http://localhost:4321")
this.client.autoCancellation(false) this.pb.autoCancellation(false)
} }
async getRecipesPage(page: number, perPage: number = 30, options: RecordListOptions) { async getRecipesPage(page: number, perPage: number = 30, options: RecordListOptions) {
return await this.client.collection<Recipe>(Collection.RECIPES).getList(page, perPage, options) return await this.pb.collection<Recipe>(Collection.RECIPES).getList(page, perPage, options)
} }
async getAllRecipes() { async getAllRecipes() {
return await this.client.collection<Recipe>(Collection.RECIPES).getFullList({ expand: 'ingredients,tags,steps,images,steps.ingredients' }) return await this.pb.collection<Recipe>(Collection.RECIPES).getFullList({ expand: 'ingredients,tags,steps,images,steps.ingredients' })
} }
async getRecipe(id: string) { async getRecipe(id: string) {
return await this.client.collection<Recipe>(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps,images,steps.ingredients' }) return await this.pb.collection<Recipe>(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps,images,steps.ingredients' })
} }
// IMAGE // IMAGE
async getImageURL(imgID: string, relative: boolean = true) { async getImageURL(imgID: string, relative: boolean = true) {
const record = await this.client.collection(Collection.IMAGES).getOne(imgID) const record = await this.pb.collection(Collection.IMAGES).getOne(imgID)
const res = this.client.files.getURL(record, record.image) const res = this.pb.files.getURL(record, record.image)
return relative ? res.substring(21) : res return relative ? res.substring(21) : res
} }
@ -45,11 +45,11 @@ class APIClient {
} }
async getAllTags() { async getAllTags() {
return await this.client.collection<Tag>(Collection.TAGS).getFullList() return await this.pb.collection<Tag>(Collection.TAGS).getFullList()
} }
async getTag(name: string) { async getTag(name: string) {
return await this.client.collection<Tag>(Collection.TAGS).getList(1, 50, { filter: `name = '${name}'` }) return await this.pb.collection<Tag>(Collection.TAGS).getList(1, 50, { filter: `name = '${name}'` })
} }
async getRecipesOfTag(tagName: string) { async getRecipesOfTag(tagName: string) {
@ -60,7 +60,7 @@ class APIClient {
} }
const tag = tagResult.items[0] const tag = tagResult.items[0]
return await this.client.collection<Recipe>(Collection.RECIPES).getFullList({ return await this.pb.collection<Recipe>(Collection.RECIPES).getFullList({
filter: `tags ~ '${tag.id}'`, filter: `tags ~ '${tag.id}'`,
expand: 'ingredients,tags,steps,images,steps.ingredients' expand: 'ingredients,tags,steps,images,steps.ingredients'
}) })

2
src/layouts/base.astro
View File

@ -10,7 +10,7 @@ import Header from "@/components/Header";
<body> <body>
<main id="main" class="flex-1"> <main id="main" class="flex-1">
<Header/> <Header/>
<div class="px-3 md:px-5 pt-2"> <div class="px-3 mb-5 md:px-5 pt-2">
<slot /> <slot />
</div> </div>
</main> </main>

6
src/pages/api/[...proxy].ts
View File

@ -11,5 +11,9 @@ const getProxyUrl = (request: Request) => {
export const ALL: APIRoute = async ({ request }) => { export const ALL: APIRoute = async ({ request }) => {
const proxyUrl = getProxyUrl(request); const proxyUrl = getProxyUrl(request);
const response = await fetch(proxyUrl.href, request); const response = await fetch(proxyUrl.href, request);
return new Response(response.body); return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: response.headers
});
}; };

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

@ -13,7 +13,18 @@ async function submitRecipe() {
<SiteLayout> <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 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="flex md:flex-1/3 flex-col sticky">
<div class="flex mb-2 items-center">
<p class="text-[28pt] mr-auto">New Recipe</p>
<button
id="btn-save"
class="px-1 w-15 h-9 bg-white/10 active:bg-white/20 transition-colors rounded-lg"
>
Save
</button>
</div>
<div class="relative"> <div class="relative">
<input <input
id="photo" id="photo"
@ -61,7 +72,7 @@ async function submitRecipe() {
placeholder="Work Time" placeholder="Work Time"
/> />
<input <input
id="rec-waititme" id="rec-waittime"
type="text" type="text"
class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden" class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
placeholder="Wait Time" placeholder="Wait Time"
@ -76,7 +87,7 @@ async function submitRecipe() {
<div class="flex flex-row align-middle items-center"> <div class="flex flex-row align-middle items-center">
<p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p> <p class="mt-4 text-[22pt] font-bold">Ingredients</p>
<button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button> <button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
</div> </div>
<table class={`table-fixed text-left bg-[#2a2b2c] rounded-lg w-full`}> <table class={`table-fixed text-left bg-[#2a2b2c] rounded-lg w-full`}>
@ -104,7 +115,7 @@ async function submitRecipe() {
</table> </table>
</div> </div>
<div class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3"> <div class="flex mt-4 md:mt-16 md:flex-2/3 w-full flex-col md:ml-3">
<!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> --> <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
<!-- Steps --> <!-- Steps -->

40
src/script/newRecipe.ts
View File

@ -1,3 +1,5 @@
import client from "@/data/pocketbase"
let ingredientFields: HTMLInputElement[] = [] let ingredientFields: HTMLInputElement[] = []
let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')! let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')! let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
@ -8,13 +10,26 @@ let stepList: HTMLUListElement = document.querySelector('#step-list')!
let currentStepIndex = 0 let currentStepIndex = 0
// - VARS // - VARS
let ingredients: {qty: string, unit: string, name: string}[] = [] let ingredients: {quantity: string, unit: string, name: string}[] = []
let steps: { let steps: {
index: number, index: number,
instruction: string, instruction: string,
ingredients: string[], // IDs of ingredient fields ingredients: string[], // IDs of ingredient fields
}[] = [] }[] = []
const formFields = () => {
return {
name: (document.querySelector("#rec-name") as HTMLTextAreaElement).value ?? "",
description: (document.querySelector("#rec-desc") as HTMLTextAreaElement).value ?? "",
servings: (document.querySelector("#rec-servings") as HTMLInputElement).value ?? "",
worktime: (document.querySelector("#rec-worktime") as HTMLInputElement).value ?? "",
waittime: (document.querySelector("#rec-waittime") as HTMLInputElement).value ?? "",
rating: (document.querySelector("#rec-rating") as HTMLInputElement).value ?? "",
ings: ingredients,
stepList: steps
}
}
// - INIT // - INIT
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
@ -25,6 +40,7 @@ document.addEventListener('DOMContentLoaded', function() {
) )
stepInput.addEventListener('input', showAddStepButton) stepInput.addEventListener('input', showAddStepButton)
document.querySelector('#btn-save')?.addEventListener('click', addRecipe)
// show plus button once the user types in the text fields // show plus button once the user types in the text fields
ingredientFields.forEach(f => { ingredientFields.forEach(f => {
@ -60,9 +76,27 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
// - ADD // - ADD
async function addRecipe() {
const comps = formFields()
console.log(comps.ings)
const ingredientIDs = await Promise.all(
comps.ings.map(async it => (await client.pb.collection('ingredients').create({
'quantity': it.quantity,
'name': it.name,
'unit': it.name
})).id) // get the id of the returned record
)
const stepIds = await Promise.all(
)
}
function addIngredient() { function addIngredient() {
const ing = { const ing = {
qty: ingredientFields[0].value, quantity: ingredientFields[0].value,
unit: ingredientFields[1].value, unit: ingredientFields[1].value,
name: ingredientFields[2].value name: ingredientFields[2].value
} }
@ -71,7 +105,7 @@ function addIngredient() {
const newRow = document.createElement('tr') const newRow = document.createElement('tr')
newRow.innerHTML = ` newRow.innerHTML = `
<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.quantity}</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.unit}</td>
<td class="px-4 py-2 border-t border-white/10">${ing.name}</td> <td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
` `