diff --git a/astro.config.mjs b/astro.config.mjs index 58360f6..47cc0d6 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -7,8 +7,6 @@ import tailwindcss from '@tailwindcss/vite'; import { loadEnv } from "vite"; -const { PUBLIC_PB_URL } = loadEnv(process.env.NODE_ENV, process.cwd(), ""); - // https://astro.build/config export default defineConfig({ output: 'server', @@ -19,5 +17,8 @@ export default defineConfig({ vite: { plugins: [tailwindcss()], + server: { + cors: false + } } }); \ No newline at end of file diff --git a/src/components/Detail/InfoView.astro b/src/components/Detail/InfoView.astro index 4bde49e..5da41b8 100644 --- a/src/components/Detail/InfoView.astro +++ b/src/components/Detail/InfoView.astro @@ -15,8 +15,19 @@ function formatTime(seconds) { return result; } -const workTime = formatTime(re.worktime) -const waitTime = formatTime(re.waittime) +function formatTimeMin(minutes) { + 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) ---

{re.description}

diff --git a/src/data/pocketbase.ts b/src/data/pocketbase.ts index 8684c0a..7e68b9d 100644 --- a/src/data/pocketbase.ts +++ b/src/data/pocketbase.ts @@ -8,29 +8,29 @@ import { } from './schema' class APIClient { - client: Pocketbase + pb: Pocketbase constructor() { - this.client = new Pocketbase("http://localhost:4321") - this.client.autoCancellation(false) + this.pb = new Pocketbase("http://localhost:4321") + this.pb.autoCancellation(false) } async getRecipesPage(page: number, perPage: number = 30, options: RecordListOptions) { - return await this.client.collection(Collection.RECIPES).getList(page, perPage, options) + return await this.pb.collection(Collection.RECIPES).getList(page, perPage, options) } async getAllRecipes() { - return await this.client.collection(Collection.RECIPES).getFullList({ expand: 'ingredients,tags,steps,images,steps.ingredients' }) + return await this.pb.collection(Collection.RECIPES).getFullList({ expand: 'ingredients,tags,steps,images,steps.ingredients' }) } async getRecipe(id: string) { - return await this.client.collection(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps,images,steps.ingredients' }) + return await this.pb.collection(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps,images,steps.ingredients' }) } // IMAGE async getImageURL(imgID: string, relative: boolean = true) { - const record = await this.client.collection(Collection.IMAGES).getOne(imgID) - const res = this.client.files.getURL(record, record.image) + const record = await this.pb.collection(Collection.IMAGES).getOne(imgID) + const res = this.pb.files.getURL(record, record.image) return relative ? res.substring(21) : res } @@ -45,11 +45,11 @@ class APIClient { } async getAllTags() { - return await this.client.collection(Collection.TAGS).getFullList() + return await this.pb.collection(Collection.TAGS).getFullList() } async getTag(name: string) { - return await this.client.collection(Collection.TAGS).getList(1, 50, { filter: `name = '${name}'` }) + return await this.pb.collection(Collection.TAGS).getList(1, 50, { filter: `name = '${name}'` }) } async getRecipesOfTag(tagName: string) { @@ -60,7 +60,7 @@ class APIClient { } const tag = tagResult.items[0] - return await this.client.collection(Collection.RECIPES).getFullList({ + return await this.pb.collection(Collection.RECIPES).getFullList({ filter: `tags ~ '${tag.id}'`, expand: 'ingredients,tags,steps,images,steps.ingredients' }) diff --git a/src/layouts/base.astro b/src/layouts/base.astro index f738f0a..c31b2d3 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -10,7 +10,7 @@ import Header from "@/components/Header";
-
+
diff --git a/src/pages/api/[...proxy].ts b/src/pages/api/[...proxy].ts index 9574877..63b1d1a 100644 --- a/src/pages/api/[...proxy].ts +++ b/src/pages/api/[...proxy].ts @@ -11,5 +11,9 @@ const getProxyUrl = (request: Request) => { export const ALL: APIRoute = async ({ request }) => { const proxyUrl = getProxyUrl(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 + }); }; \ No newline at end of file diff --git a/src/pages/recipe/new.astro b/src/pages/recipe/new.astro index cf61601..9e2f890 100644 --- a/src/pages/recipe/new.astro +++ b/src/pages/recipe/new.astro @@ -13,7 +13,18 @@ async function submitRecipe() {
-
+
+ +
+

New Recipe

+ +
+
-

Ingredients

+

Ingredients

@@ -104,7 +115,7 @@ async function submitRecipe() {
-
+
diff --git a/src/script/newRecipe.ts b/src/script/newRecipe.ts index ae08d43..5b30a37 100644 --- a/src/script/newRecipe.ts +++ b/src/script/newRecipe.ts @@ -1,3 +1,5 @@ +import client from "@/data/pocketbase" + let ingredientFields: HTMLInputElement[] = [] let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')! let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')! @@ -8,13 +10,26 @@ let stepList: HTMLUListElement = document.querySelector('#step-list')! let currentStepIndex = 0 // - VARS -let ingredients: {qty: string, unit: string, name: string}[] = [] +let ingredients: {quantity: string, unit: string, name: string}[] = [] let steps: { index: number, instruction: string, 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 document.addEventListener('DOMContentLoaded', function() { @@ -25,6 +40,7 @@ document.addEventListener('DOMContentLoaded', function() { ) stepInput.addEventListener('input', showAddStepButton) + document.querySelector('#btn-save')?.addEventListener('click', addRecipe) // show plus button once the user types in the text fields ingredientFields.forEach(f => { @@ -60,9 +76,35 @@ document.addEventListener('DOMContentLoaded', function() { }); // - 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(it)).id) // get the id of the returned record + ) + + const stepIDs = await Promise.all( + comps.stepList.map(async it => (await client.pb.collection('steps').create(it)).id) + ) + + const recipe = await client.pb.collection('recipes').create({ + name: comps.name, + description: comps.description, + servings: comps.servings, + worktime: comps.worktime, + waittime: comps.waittime, + rating: comps.rating, + ingredients: ingredientIDs, + steps: stepIDs + }) + + console.log(recipe) +} + function addIngredient() { const ing = { - qty: ingredientFields[0].value, + quantity: ingredientFields[0].value, unit: ingredientFields[1].value, name: ingredientFields[2].value } @@ -71,7 +113,7 @@ function addIngredient() { const newRow = document.createElement('tr') newRow.innerHTML = ` - ${ing.qty} + ${ing.quantity} ${ing.unit} ${ing.name} `