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

Compare commits

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

No commits in common. "bfe9f12802a7511a26cfe6614e052cdbe4666208" and "b1d95ea785af9fa08f5410633166f2228f1559d6" have entirely different histories.
bfe9f12802 ... b1d95ea785

7 changed files with 24 additions and 85 deletions
Show Stats Expand all files Collapse all files

5
astro.config.mjs
View File

@ -7,6 +7,8 @@ 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',
@ -17,8 +19,5 @@ export default defineConfig({
vite: { vite: {
plugins: [tailwindcss()], plugins: [tailwindcss()],
server: {
cors: false
}
} }
}); });

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

@ -15,19 +15,8 @@ function formatTime(seconds) {
return result; return result;
} }
function formatTimeMin(minutes) { const workTime = formatTime(re.worktime)
if (minutes === 0) return null const waitTime = formatTime(re.waittime)
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 {
pb: Pocketbase client: Pocketbase
constructor() { constructor() {
this.pb = new Pocketbase("http://localhost:4321") this.client = new Pocketbase("http://localhost:4321")
this.pb.autoCancellation(false) this.client.autoCancellation(false)
} }
async getRecipesPage(page: number, perPage: number = 30, options: RecordListOptions) { async getRecipesPage(page: number, perPage: number = 30, options: RecordListOptions) {
return await this.pb.collection<Recipe>(Collection.RECIPES).getList(page, perPage, options) return await this.client.collection<Recipe>(Collection.RECIPES).getList(page, perPage, options)
} }
async getAllRecipes() { async getAllRecipes() {
return await this.pb.collection<Recipe>(Collection.RECIPES).getFullList({ expand: 'ingredients,tags,steps,images,steps.ingredients' }) return await this.client.collection<Recipe>(Collection.RECIPES).getFullList({ expand: 'ingredients,tags,steps,images,steps.ingredients' })
} }
async getRecipe(id: string) { async getRecipe(id: string) {
return await this.pb.collection<Recipe>(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps,images,steps.ingredients' }) return await this.client.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.pb.collection(Collection.IMAGES).getOne(imgID) const record = await this.client.collection(Collection.IMAGES).getOne(imgID)
const res = this.pb.files.getURL(record, record.image) const res = this.client.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.pb.collection<Tag>(Collection.TAGS).getFullList() return await this.client.collection<Tag>(Collection.TAGS).getFullList()
} }
async getTag(name: string) { async getTag(name: string) {
return await this.pb.collection<Tag>(Collection.TAGS).getList(1, 50, { filter: `name = '${name}'` }) return await this.client.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.pb.collection<Recipe>(Collection.RECIPES).getFullList({ return await this.client.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 mb-5 md:px-5 pt-2"> <div class="px-3 md:px-5 pt-2">
<slot /> <slot />
</div> </div>
</main> </main>

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

@ -11,9 +11,5 @@ 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,18 +13,7 @@ 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 sticky"> <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 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"
@ -72,7 +61,7 @@ async function submitRecipe() {
placeholder="Work Time" placeholder="Work Time"
/> />
<input <input
id="rec-waittime" id="rec-waititme"
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"
@ -87,7 +76,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">Ingredients</p> <p class="mt-4 text-[22pt] font-bold 'mt-4'">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`}>
@ -115,7 +104,7 @@ async function submitRecipe() {
</table> </table>
</div> </div>
<div class="flex mt-4 md:mt-16 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> --> <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
<!-- Steps --> <!-- Steps -->

40
src/script/newRecipe.ts
View File

@ -1,5 +1,3 @@
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')!
@ -10,26 +8,13 @@ let stepList: HTMLUListElement = document.querySelector('#step-list')!
let currentStepIndex = 0 let currentStepIndex = 0
// - VARS // - VARS
let ingredients: {quantity: string, unit: string, name: string}[] = [] let ingredients: {qty: 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() {
@ -40,7 +25,6 @@ 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 => {
@ -76,27 +60,9 @@ 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 = {
quantity: ingredientFields[0].value, qty: ingredientFields[0].value,
unit: ingredientFields[1].value, unit: ingredientFields[1].value,
name: ingredientFields[2].value name: ingredientFields[2].value
} }
@ -105,7 +71,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.quantity}</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.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>
` `