Compare commits
9 Commits
b1d95ea785
...
bfe9f12802
| Author | SHA1 | Date | |
|---|---|---|---|
bfe9f12802
|
|||
|
600c7b6d25
|
|||
|
38560f744d
|
|||
|
7c1cee2f3a
|
|||
|
cd77cfdf66
|
|||
|
7b98506ad5
|
|||
|
6d708d8fd4
|
|||
|
b3d36afdc7
|
|||
|
12a02ef1f8
|
@ -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
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -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)
|
||||
---
|
||||
|
||||
<p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
|
||||
|
||||
@ -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<Recipe>(Collection.RECIPES).getList(page, perPage, options)
|
||||
return await this.pb.collection<Recipe>(Collection.RECIPES).getList(page, perPage, options)
|
||||
}
|
||||
|
||||
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) {
|
||||
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
|
||||
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<Tag>(Collection.TAGS).getFullList()
|
||||
return await this.pb.collection<Tag>(Collection.TAGS).getFullList()
|
||||
}
|
||||
|
||||
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) {
|
||||
@ -60,7 +60,7 @@ class APIClient {
|
||||
}
|
||||
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}'`,
|
||||
expand: 'ingredients,tags,steps,images,steps.ingredients'
|
||||
})
|
||||
|
||||
@ -10,7 +10,7 @@ import Header from "@/components/Header";
|
||||
<body>
|
||||
<main id="main" class="flex-1">
|
||||
<Header/>
|
||||
<div class="px-3 md:px-5 pt-2">
|
||||
<div class="px-3 mb-5 md:px-5 pt-2">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -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
|
||||
});
|
||||
};
|
||||
@ -13,7 +13,18 @@ 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="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">
|
||||
<input
|
||||
id="photo"
|
||||
@ -61,7 +72,7 @@ async function submitRecipe() {
|
||||
placeholder="Work Time"
|
||||
/>
|
||||
<input
|
||||
id="rec-waititme"
|
||||
id="rec-waittime"
|
||||
type="text"
|
||||
class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
|
||||
placeholder="Wait Time"
|
||||
@ -76,7 +87,7 @@ async function submitRecipe() {
|
||||
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<table class={`table-fixed text-left bg-[#2a2b2c] rounded-lg w-full`}>
|
||||
@ -104,7 +115,7 @@ async function submitRecipe() {
|
||||
</table>
|
||||
</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> -->
|
||||
|
||||
<!-- Steps -->
|
||||
|
||||
@ -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,27 @@ 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({
|
||||
'quantity': it.quantity,
|
||||
'name': it.name,
|
||||
'unit': it.name
|
||||
})).id) // get the id of the returned record
|
||||
)
|
||||
|
||||
const stepIds = await Promise.all(
|
||||
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
function addIngredient() {
|
||||
const ing = {
|
||||
qty: ingredientFields[0].value,
|
||||
quantity: ingredientFields[0].value,
|
||||
unit: ingredientFields[1].value,
|
||||
name: ingredientFields[2].value
|
||||
}
|
||||
@ -71,7 +105,7 @@ function addIngredient() {
|
||||
|
||||
const newRow = document.createElement('tr')
|
||||
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.name}</td>
|
||||
`
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user