prep/cook times and some fit and finish
This commit is contained in:
fred
parent
a3b0fffe45
commit
9656888cb7
14 changed files with 141 additions and 46 deletions
|
|
@ -49,7 +49,7 @@ app.get("/backend/recipe/:id", async (req, res) => {
|
|||
try {
|
||||
const recipeQuery = db("recipes")
|
||||
.where("id", "=", id)
|
||||
.select("id", "name", "author", "cuisine", "stars");
|
||||
.select("id", "name", "author", "cuisine", "stars", "prep_minutes", "cook_minutes");
|
||||
|
||||
const ingredientsQuery = db
|
||||
.from("recipe_ingredients")
|
||||
|
|
@ -81,13 +81,15 @@ app.get("/backend/recipe/:id", async (req, res) => {
|
|||
|
||||
// ### ADD RECIPE ###
|
||||
app.post("/backend/add-recipe", async (req, res) => {
|
||||
const { name, author, cuisine, stars, ingredients, steps } = req.body;
|
||||
const { name, author, cuisine, stars, ingredients, steps, prep_minutes, cook_minutes } = req.body;
|
||||
try {
|
||||
const [id] = await db("recipes").insert(
|
||||
{
|
||||
name: name,
|
||||
author: author,
|
||||
cuisine: cuisine,
|
||||
prep_minutes: prep_minutes,
|
||||
cook_minutes: cook_minutes,
|
||||
stars: stars,
|
||||
},
|
||||
["id"],
|
||||
|
|
|
|||
22
backend/migrations/20250728174922_add_times_recipes.js
Normal file
22
backend/migrations/20250728174922_add_times_recipes.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
/**
|
||||
* @param { import("knex").Knex } knex
|
||||
* @returns { Promise<void> }
|
||||
*/
|
||||
exports.up = function (knex) {
|
||||
|
||||
return knex.schema.table('recipes', table => {
|
||||
table.integer('prep_minutes');
|
||||
table.integer('cook_minutes');
|
||||
})
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { import("knex").Knex } knex
|
||||
* @returns { Promise<void> }
|
||||
*/
|
||||
exports.down = function (knex) {
|
||||
return knex.schema.table('recipes', table => {
|
||||
table.dropColumn('prep_minutes');
|
||||
table.dropColumn('cook_minutes')
|
||||
})
|
||||
};
|
||||
|
|
@ -2,9 +2,9 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Dev Recipe App</title>
|
||||
<title>Recipe App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
1
frontend/public/icon.svg
Normal file
1
frontend/public/icon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="800px" height="800px" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--noto" preserveAspectRatio="xMidYMid meet"><path d="M5.01 52.21c-1.14 2.55-2.24 27.27 12.35 44.04c10.89 12.51 25.62 17.63 45.02 18.36s38.13-5.78 47.13-16.09c16.25-18.63 14.55-41.06 13.7-44.4c-2.15-8.46-19.07-14.44-58.56-14.44c-36.72.02-56.72 6-59.64 12.53z" fill="#6bb8fe"></path><path d="M93.71 49.99c.41-.1 8.04.74 8.19.64s3.37-7.58 3.37-7.58s-2.87-.6-4.25-.86c-1.38-.24-7.31 7.8-7.31 7.8z" fill="#1d89fe"></path><path d="M33.39 100.91c-1.57 1.89-10.9-3.51-17.11-16.13c-5.44-11.05-5.3-17.05-4.28-18c1.34-1.25 5.26-.09 6.15 2.76c1.2 3.84 1.16 8.29 5.35 16.49c6.37 12.47 11.23 13.27 9.89 14.88z" fill="#e0ebf6"></path><path d="M12.27 54.07c.56 6.06 20.79 9.72 52.79 10.26c32 .54 52.25-3.92 52.25-9.59s-21.2-9.72-50.9-9.99s-54.68 3.52-54.14 9.32z" fill="#1d89fe"></path><path d="M96.29 62.95l6.93-15.18l-8.85-1.32l-11.22 1.73l-7.41 16.08s7.41-.11 11.82-.44c4.41-.34 8.73-.87 8.73-.87z" fill="#025abc"></path><path d="M82.64 64.11S98 47.63 106.71 38.61s16.4-15.86 16.55-18.52c.19-3.42-6.34-4.91-6.34-4.91L75.74 60.97l-1.09 3.27s2.96.08 4.43 0c1.49-.08 3.56-.13 3.56-.13z" fill="#9d9c9c"></path><path d="M116.78 15.12s4.79 1.05 4.58 2.87c-.27 2.36-2.18 4.35-4.52 6.76S79.08 64.23 79.08 64.23l-3.37.1l-.4-1.72l41.47-47.49z" fill="#e0e0e0"></path><path d="M68.18 64.36S80.91 48.5 92.04 35.27s16.53-20.44 18.09-20.91s9.33.99 9.61 1.98c.4 1.38-.12 2.77-4.17 6.97c-4.05 4.2-39.07 41-39.07 41s-1.81.06-3.58.07s-4.74-.02-4.74-.02z" fill="#c8c8c8"></path><path d="M110.57 16.88c-2.3.83-9.94 9.08-7.93 9.94c1.62.7 6.58-4.72 9.22-6.22c2.64-1.5 4.22-.79 4.5-2c.29-1.22-3.43-2.58-5.79-1.72z" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -3,7 +3,7 @@
|
|||
@tailwind utilities;
|
||||
|
||||
#root {
|
||||
@apply mx-auto text-center max-w-screen-lg;
|
||||
@apply mx-auto text-center max-w-screen-lg w-full;
|
||||
}
|
||||
|
||||
.page-outer {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
|
|||
|
||||
return (
|
||||
<div>
|
||||
<p>Please enter ingredients: Quantity, Unit, Name</p>
|
||||
<p>Please enter each ingredient on a new line:</p>
|
||||
<textarea
|
||||
rows={8}
|
||||
value={textValue}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<p>Please enter each step on a new line</p>
|
||||
<p>Please enter each step on a new line:</p>
|
||||
<textarea
|
||||
rows={8}
|
||||
value={textValue}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useState } from 'react';
|
||||
import { type RecipeSmall } from "../types/Recipe"
|
||||
import Modal from '../components/Modal.tsx'
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
interface CookbookRecipeTileProps {
|
||||
recipe: RecipeSmall;
|
||||
|
|
@ -21,7 +22,7 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
|
|||
return (
|
||||
<div className="recipe-card m-2 bg-amber-300 p-4 rounded shadow">
|
||||
<div className="flex justify-between items-center recipe-name">
|
||||
<h3 className="font-bold"><a href={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</a></h3>
|
||||
<h3 className="font-bold"><Link to={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</Link></h3>
|
||||
<button onClick={openModal} className="text-red-500 focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
|
|
|
|||
|
|
@ -1,23 +1,55 @@
|
|||
import React from 'react';
|
||||
import { useState, useEffect } from "react";
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { getRecipes } from "../services/frontendApi.js";
|
||||
|
||||
const RecipeBookTabs = () => {
|
||||
const location = useLocation();
|
||||
const [lastViewedRecipeId, setLastViewedRecipeId] = useState<number | null>(null);
|
||||
|
||||
const loadRandomRecipeId = async () => {
|
||||
try {
|
||||
const recipes = await getRecipes();
|
||||
if (recipes.length > 0) {
|
||||
const randomIndex = Math.floor(Math.random() * recipes.length);
|
||||
setLastViewedRecipeId(recipes[randomIndex].id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading recipes:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// update lastViewedRecipe id if we navigate to /recipe/${id}
|
||||
useEffect(() => {
|
||||
const match = /^\/recipe\/(\d+)$/.exec(location.pathname);
|
||||
if (match) {
|
||||
setLastViewedRecipeId(parseInt(match[1]));
|
||||
}
|
||||
}, [location.pathname, lastViewedRecipeId]);
|
||||
|
||||
// choose random recipe on first load
|
||||
useEffect(() => {
|
||||
if (!lastViewedRecipeId) {
|
||||
loadRandomRecipeId();
|
||||
} else {
|
||||
console.log('id found', lastViewedRecipeId)
|
||||
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
const tabs = [
|
||||
{ id: '/', label: 'All Recipes', icon: '📚' },
|
||||
{ id: '/recipe/', label: 'Recipe', icon: '🥗' },
|
||||
{ id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
|
||||
{ id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
|
||||
{ id: '/about', label: 'About', icon: '🍽️' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-b from-amber-50 to-orange-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
|
||||
{/* Navigation Tabs */}
|
||||
<div className="bg-amber-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
|
||||
<div className="relative h-full">
|
||||
{/* Tab Background Line */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
|
||||
|
||||
{/* Tabs Container */}
|
||||
<div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
|
||||
{tabs.map((tab) => {
|
||||
const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
|
||||
|
|
@ -41,13 +73,12 @@ const RecipeBookTabs = () => {
|
|||
<span>{tab.label}</span>
|
||||
</div>
|
||||
|
||||
{/* Tab Shadow Effect */}
|
||||
{isActive && (
|
||||
<>
|
||||
<div className="absolute -left-2 bottom-0 w-2 h-2 bg-white">
|
||||
<div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
|
||||
<div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
|
||||
</div>
|
||||
<div className="absolute -right-2 bottom-0 w-2 h-2 bg-white">
|
||||
<div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
|
||||
<div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,21 @@ function About() {
|
|||
return (
|
||||
<div className="about page-outer">
|
||||
<div>
|
||||
Hello World
|
||||
<h2 className="text-xl">Hi,</h2>
|
||||
<h2 className="text-xl">I am Fred.</h2>
|
||||
<h2 className="text-xl">I made this app using the following components:</h2>
|
||||
<h2 className="mt-4 font-bold text-xl">Frontend:</h2>
|
||||
<ul><li>React</li><li>TypeScript</li><li>Vite</li></ul>
|
||||
<h2 className="mt-4 font-bold text-xl">Backend:</h2>
|
||||
<ul><li>Node.js & Express</li><li>PostgreSQL</li></ul>
|
||||
<h2 className="mt-4 font-bold text-xl">Containerization:</h2>
|
||||
<ul><li>Docker</li></ul>
|
||||
<h2 className="mt-4 font-bold text-xl">Styling/UI:</h2>
|
||||
<ul><li>Tailwind CSS</li></ul>
|
||||
<p className="mt-4">More about me <a className="text-blue-600" target="_blank" href="https://fredzernia.com">here</a> |
|
||||
Code for this app <a className="text-blue-600" target="_blank" href="https://forgejo.fredzernia.com/fred/recipe_app">here</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ function AddRecipe() {
|
|||
const [recipeCuisine, setRecipeCuisine] = useState("");
|
||||
const [author, setAuthor] = useState("");
|
||||
const [stars, setStars] = useState(0);
|
||||
const [prepMinutes, setPrepMinutes] = useState(5);
|
||||
const [cookMinutes, setCookMinutes] = useState(5);
|
||||
|
||||
const addRecipeForm = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
|
|
@ -32,6 +34,8 @@ function AddRecipe() {
|
|||
name: recipeName,
|
||||
cuisine: recipeCuisine,
|
||||
author: author,
|
||||
prep_minutes: prepMinutes,
|
||||
cook_minutes: cookMinutes,
|
||||
stars: stars,
|
||||
ingredients: ingredients,
|
||||
steps: stepsHash
|
||||
|
|
@ -74,44 +78,67 @@ function AddRecipe() {
|
|||
value={author}
|
||||
onChange={(e) => setAuthor(e.target.value)}
|
||||
/>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<label htmlFor="prepTime" className="mr-2 font-bold">Prep Time:</label>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="prep time in minutes"
|
||||
className="recipe-cusine p-2 border border-gray-300 rounded w-24"
|
||||
value={prepMinutes}
|
||||
onChange={(e) => setPrepMinutes(e.target.value)}
|
||||
/>
|
||||
<span className="ml-2">minutes</span>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cookTime" className="mr-2 font-bold">Cook Time:</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="cook time in minutes"
|
||||
className="recipe-cusine p-2 border border-gray-300 rounded w-24"
|
||||
value={cookMinutes}
|
||||
onChange={(e) => setCookMinutes(e.target.value)}
|
||||
/>
|
||||
<span className="ml-2">minutes</span>
|
||||
</div>
|
||||
<div>
|
||||
<StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
|
||||
</div>
|
||||
</div>
|
||||
<label className="mb-4 flex items-center cursor-pointer">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showBulkForm}
|
||||
onChange={(e) => setShowBulkForm(e.target.checked)}
|
||||
className="sr-only"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<div>
|
||||
<StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
|
||||
<AddBulkIngredients ingredients={ingredients} onChange={setIngredients} />
|
||||
</div>
|
||||
<button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
|
||||
submit
|
||||
</button>
|
||||
</form>
|
||||
<label className="mb-4 flex items-center cursor-pointer">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showBulkForm}
|
||||
onChange={(e) => setShowBulkForm(e.target.checked)}
|
||||
className="sr-only"
|
||||
/>
|
||||
</div>
|
||||
<span className="ml-3 text-amber-800 font-medium">Bulk Entry</span>
|
||||
</label>
|
||||
<div>
|
||||
<AddBulkIngredients ingredients={ingredients} onChange={setIngredients} />
|
||||
</div>
|
||||
{/*<ul className="mb-4">
|
||||
{/*<ul className="mb-4">
|
||||
{ingredients.map((ing, index) => (
|
||||
<li key={index} className="text-gray-700 flex items-start mb-2">
|
||||
<span>{ing}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>*/}
|
||||
<div>
|
||||
<AddBulkSteps steps={steps} onChange={setSteps} />
|
||||
</div>
|
||||
{/*<ul className="mb-4">
|
||||
<div>
|
||||
<AddBulkSteps steps={steps} onChange={setSteps} />
|
||||
</div>
|
||||
{/*<ul className="mb-4">
|
||||
{steps.map((step) => (
|
||||
<li key={step.step_number} className="text-gray-700 flex items-start mb-2">
|
||||
<span>{`${step.step_number}. ${step.instruction}`}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>*/}
|
||||
<button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
|
||||
submit
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,9 +49,6 @@ function RecipePage() {
|
|||
|
||||
updateStarsInDB();
|
||||
}, [stars]);
|
||||
console.log(recipe)
|
||||
console.log(stars)
|
||||
console.log(initialStars)
|
||||
return (
|
||||
<div className="recipe page-outer">
|
||||
|
||||
|
|
@ -65,6 +62,7 @@ function RecipePage() {
|
|||
<div className="border-b-2 border-amber-300 pb-4 mb-6">
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
|
||||
<p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
|
||||
<p>prep: {recipe.details.prep_minutes} min | cook: {recipe.details.cook_minutes} min</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-6 mb-6">
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ interface Recipe {
|
|||
author?: string;
|
||||
stars?: number;
|
||||
cuisine?: string;
|
||||
prep_minutes?: number;
|
||||
cook_minutes?: number;
|
||||
},
|
||||
ingredients: Ingredient[],
|
||||
steps: Step[];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue