renderizado terminado

migrations/versions/a08fba8a0180_.py → migrations/versions/a9b7f08f1a62_.py

@@ -1,16 +1,16 @@
 """empty message
 
-Revision ID: a08fba8a0180
+Revision ID: a9b7f08f1a62
 Revises: 
-Create Date: 2025-03-05 14:44:28.016416
+Create Date: 2025-03-06 10:20:42.876362
 
 """
 from alembic import op
 import sqlalchemy as sa
 
 
 # revision identifiers, used by Alembic.
-revision = 'a08fba8a0180'
+revision = 'a9b7f08f1a62'
 down_revision = None
 branch_labels = None
 depends_on = None

src/api/commands.py

@@ -41,7 +41,7 @@ def insert_data_catfood():
         catfood.ingredients = "ads"
         catfood.weight = 1.
         catfood.price = 1.
-        catfood.animal_type = "asd"
+        catfood.animal_type = "gato"
         catfood.age = "sd"
         catfood.pathologies = "asd"
         db.session.add(catfood)
@@ -91,7 +91,7 @@ def insert_data_exoticfood():
         exoticfood.ingredients = "ads"
         exoticfood.price = 1.
         exoticfood.pathologies = "asd"
-        exoticfood.animal_type = "asd"
+        exoticfood.animal_type = "exótico"
         exoticfood.age = "asd"
         exoticfood.weight = 1.
         db.session.add(exoticfood)

src/api/routes.py

@@ -101,6 +101,31 @@ def get_pet_suggestions(pet_id):
         return "no suggestions found", 404  
     return [food[0].serialize() for food in food_suggestions], 200
 
+# #obtener todos los alimentos según tipo de animal
+@api.route('/foods/cat', methods=['GET'])
+def get_all_cat_food():
+    food_cat = db.session.query(Food).filter(Food.animal_type.ilike("%gato%")).all()
+    print("Datos obtenidos:", food_cat)
+    if not food_cat:
+        return jsonify({"error": "No cat food found"}), 404
+    return jsonify([food.serialize() for food in food_cat]), 200
+
+@api.route('/foods/dog', methods=['GET'])
+def get_all_dog_food():
+    food_dog = db.session.query(Food).filter(Food.animal_type.ilike("%perro%")).all()
+    print("Datos obtenidos:", food_dog)
+    if not food_dog:
+        return jsonify({"error": "No dog food found"}), 404
+    return jsonify([food.serialize() for food in food_dog]), 200
+
+@api.route('/foods/exotic', methods=['GET'])
+def get_all_exotic_food():
+    food_exotic = db.session.query(Food).filter(Food.animal_type.ilike("%exótico%")).all()
+    print("Datos obtenidos:", food_exotic)
+    if not food_exotic:
+        return jsonify({"error": "No exotic food found"}), 404
+    return jsonify([food.serialize() for food in food_exotic]), 200
+
 # Obtener todos los accesorios
 @api.route('/accessories', methods=['GET'])
 def get_accessories():

src/front/js/component/card.js

@@ -1,17 +1,22 @@
 import React, { Component } from "react";
+import { useContext } from "react";
+import { Context } from "../store/appContext";
 
-export const Card = () => {
-    return (
+export const Card = ({name, id, description}) => {
+
+const { store, actions } = useContext(Context); 
+
+return (
 <div className="card m-2" style={{ width: "18rem" }}>
-  <img 
+  {/* <img 
     src="https://static.zoomalia.com/prod_img/46527/la_53533e8075e9970de0cfea955afd4644bb21537446021.jpg" 
     style={{ width: "150px", height: "200px" }} 
     className="card-img-top mx-auto d-block mt-2" 
     alt="..." 
-  />
+  /> */}
   <div className="card-body text-center">
-    <h5 className="card-title">Título</h5>
-    <p className="card-text">Some quick example text to build on the card.</p>
+    <h5 className="card-title">{name}</h5>
+    <p className="card-text">{description}</p>
   </div>
   <div className="mt-auto text-center">
      <button className="btn btn-primary m-2">Añadir carrito</button>

src/front/js/layout.js

@@ -4,13 +4,15 @@ import ScrollToTop from "./component/scrollToTop";
 import { BackendURL } from "./component/backendURL";
 
 import { Home } from "./pages/home";
+
 import { Demo } from "./pages/demo";
 import { Single } from "./pages/single";
 import injectContext from "./store/appContext";
 
 import { Navbar } from "./component/navbar";
 import { Footer } from "./component/footer";
 
+
 //create your first component
 const Layout = () => {
     //the basename is used when your project is published in a subdirectory and not in the root of the domain
@@ -26,6 +28,8 @@ const Layout = () => {
                     <Navbar />
                     <Routes>
                         <Route element={<Home />} path="/" />
+
+
                         <Route element={<Demo />} path="/demo" />
                         <Route element={<Single />} path="/single/:theid" />
                         <Route element={<h1>Not found!</h1>} />

src/front/js/pages/home.js

@@ -1,11 +1,25 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { Context } from "../store/appContext";
 import { Card } from "../component/card";
 import "../../styles/home.css";
 
 export const Home = () => {
+
 	const { store, actions } = useContext(Context);
 
+
+	useEffect(()=>{
+				actions.getDogFood()
+				},[])
+
+	useEffect(()=>{
+				actions.getCatFood()
+				},[])
+
+	useEffect(()=>{
+					actions.getExoticFood()
+					},[])
+
 	return (
 
 		<div className="container m-0"> 
@@ -16,35 +30,59 @@ export const Home = () => {
 					alt="Banner" 
 				/>
 			</div>
+
 			<div className="sección perros m-5">
+			{/* <div className="cards d-flex overflow-auto m-4"> */}
 				<h3>Productos top para perros</h3>
 				<div className="row">
-					<Card className="col-md-3" />
-					<Card className="col-md-3" />
-					<Card className="col-md-3" />
-					<Card className="col-md-3" />
-				</div>
+
+			{store.dogFood.map((dogFood, index) => {
+				return(
+				<Card 
+              	name={dogFood.name} 
+			  	category={"dogFood"} 
+             	id={dogFood.id} 
+				description={dogFood.description}
+             	key={index}/>
+        	);
+	  		})}</div>
 			</div>
 
+
 			<div className="sección gatos m-5">
 				<h3>Productos top para gatos</h3>
 				<div className="row">
-					<Card className="col-md-3" />
-					<Card className="col-md-3" />
-					<Card className="col-md-3" />
-					<Card className="col-md-3" />
-				</div>
+
+				{store.catFood.map((catFood, index) => {
+				return(
+				<Card 
+              	name={catFood.name} 
+			  	category={"catFood"} 
+             	id={catFood.id} 
+				description={catFood.description}
+             	key={index}/>
+        	);
+	  		})}</div>
 			</div>
 
+
 			<div className="sección exóticos m-5">
 				<h3>Productos top para animales exóticos</h3>
 				<div className="row">
-					<Card className="col-md-3" />
-					<Card className="col-md-3" />
-					<Card className="col-md-3" />
-					<Card className="col-md-3" />
-				</div>
+
+				{store.exoticFood.map((exoticFood, index) => {
+				return(
+				<Card 
+              	name={exoticFood.name} 
+			  	category={"exóticFood"} 
+             	id={exoticFood.id} 
+				description={exoticFood.description}
+             	key={index}/>
+				);
+				})}</div>
 			</div>
+
+
 		</div>
 	);
 };

src/front/js/store/flux.js

@@ -13,26 +13,114 @@ const getState = ({ getStore, getActions, setStore }) => {
 					background: "white",
 					initial: "white"
 				}
-			]
+			],
+			dogFood: [],
+			catFood: [] ,
+			exoticFood: []
 		},
 		actions: {
 			// Use getActions to call a function within a fuction
 			exampleFunction: () => {
 				getActions().changeColor(0, "green");
 			},
 
+			getDogFood: async () => {
+				const myHeaders = new Headers();
+				myHeaders.append("Cookie", ".Tunnels.Relay.WebForwarding.Cookies=CfDJ8Cs4yarcs6pKkdu0hlKHsZs0q_CxPIxRcsYOazLvQz4rP7s5FWFmvGJndFqy0N7fvoY5B6Jou5i4ZPgwsQZsEYGDV4DoaNhJP3xwIvv1aGmoRIVdScF1G2c_hWBWqeCTHFNCvGD1Dy0sm3kBmaNdXiMsSO0myHKUFvlWHCed2AdtyCiC6CHBqk9DHs32cYjJV4GQr4cxW2IXl6QDukWwCPSYuzTnP699Rz_4pCbB8OPOQNBDyDtdks_LUoMZR2Qt6IWKmUnLGt-n3JLFjeQMZiSeKEXKNTcJknrz4p25p9-5rh3BY2FBX_kg6MtH3cLbqOyS6yqrG4cjJPpyZbVfN3iEYSR6lzEGiGZDFPvokcj_PM8fq32HR1_olrhti8nYtDctNR_8YRewW5quhBNW6mtF_-SqGTbCQVH1CiLUF2UKK_H_nGmwvWAce2n4Cdw1BLUCZhlCr3GAKWJWHqLI1K5n9OekmI4zs0TI_60R6urTRxIQx2IgkRPYizg-AUdyr6bORhYr7s3c6oFBrdA4yBShqyJFOo4fuMkQuHflmg717cZeB1MDnWgSm9Xnl4qmOlcta0fCSq15GNUPvXhAwvclIoK9NTrmSSd1wvRhoqz7ypodxTSOafQx0ybhJZwTxDeS_gv-4KjbyFngwj7Bj1TluB2qE5Hijbi4uhZb2KILE9AGYHKWSW-IWoSmEXW71c7HhH8mBEbBxidpsSi_Rip3CdXL2oUO-8TGtLx2HgJtExj_7AyTD1trSanlKgDurPSEfDuXuwtqxawfWf0a1sbp9BGk0pRLOA-tVKrxmMiFAPiNCVC1W2EXb95TKydzKIwtbcC70YyDJ4dFwnHrQmgPYxzIz7PYzICzKqZ-VDpO4lf7C3jf4OBJ9ZMV4JRvPiR2kUwMNX_c5CuMLaKrZNzqCFwZBUa4N4AUyTT83mtzFQGAZjMXDeZNok7mjTYBp121qquiSKX8ft05b1MTsVtRfg3ETiFdOHmYQ2-1EcSwBY-VhjWIlkQiFr1yBWXk-g");
+
+				const requestOptions = {
+					method: "GET",
+					headers: myHeaders,
+					redirect: "follow"
+				};
+
+				try {
+					const response = await fetch("https://silver-meme-jj4x947jg76ghqjg9-3001.app.github.dev/api/foods/dog", requestOptions);
+
+					if (!response.ok) {
+						throw new Error('Network response was not ok');
+					}
+
+					const data = await response.json();
+					setStore({ dogFood: data }); // Asegúrate de que data.result sea la estructura correcta
+					console.log(data);
+				} catch (error) {
+					console.error('Error fetching dog food:', error);
+				}
+			}
+
+
+
+
+			,
+			getCatFood: async ()=>{
+
+			const myHeaders = new Headers();
+			myHeaders.append("Cookie", ".Tunnels.Relay.WebForwarding.Cookies=CfDJ8Cs4yarcs6pKkdu0hlKHsZsFuWJUB8pT978IgBH2YtuNtjrSfloWcBx8Cb4ny9waQSc6YIxDXdFsnq7Re1iGbqt37RMJ8vfb6ibKLFqvloDFsbiBuxDcqwi_MvYRhr2Z463usLkj3RbhHXQfm0TDnuAtNaE3deMSqRX9yv4T0Ui6indSlqpCNa-EX0tvUPEUYniNtvBPGilr_PC-U4inRAN5RaUZvcfD9vs4fenjYjUAaDpz49MnUZT8uGDozBeAZynLSYkXtpY9Rb2GuG-eOvk-8noe3tIekVKBOTjnaeis5QUJJpYcv73D6GOrYSIpavdb29mY6QWEsir-s4vxW2wE0dCb8n5g4MldUigDSxrKnndHoBleQih8VqWGo5AZKTYLT3Y735A7ZsmFGvFjRGrrGCPQ6YU28RddH4ieKxoVlTt2PG2uD17_QI5FmUNuvz3Z8YDAK878jEXK-_jXm5SIi4oLvfCr9sezmoc8NgcvJBAH0lVlJCf3kz9Z7_y_5wwU9a4Nk6-rH2p__Jb49iHxfOuRu0EzOLdNHiPfznR8iEp41VsK7ie7ECmM5Q6SANKFM9AtYkbXqCmn5tAdmrCFaGKNAu8w7gZ_r97mDMzcHVOwUktErNC1y2j6yUPv6SAU9hVk4_xFev-2wI7h5PEaPCY3khPgI6Z1UPNC_SkodFGHbEdRUSMc8ICYoAv4llTD8xtfOqzMDms4HG1xcbJrE1NTWh4rpfv7KiEIi6iqE6uizX7_CmWJkcA9SGig9hk9A9abtYb2Pg8Z8GG2cEan7FFpl7kbvTobFfSGn_N9ukSCqYuuoldgSno8yyH5P3E7oqqVnO1eT3kpRGZ9EdtmL5zXv8Fs-x3GDrQ2z1_V6sqMxy6LlXHXJ7m6MYUy4sET4nISyUJ1H2eBbC-Ttk7_7om7ByATu_oEZjPFefBf7sXaCZ2ng9ZBYYOOZHtbUEs2rrFAiL6dmrgjKVaXUyz3KiiP73Dy5OR7g9ccYBD5t74jdyVYPLmgoasQocdBEA");
+
+			const requestOptions = {
+			method: "GET",
+			headers: myHeaders,
+			redirect: "follow"
+			};
+
+			try {
+			const response = await fetch("https://silver-meme-jj4x947jg76ghqjg9-3001.app.github.dev/api/foods/cat", requestOptions);
+			if (!response.ok) {
+				throw new Error('Network response was not ok');
+			}
+
+			const data = await response.json();
+			setStore({ catFood: data });
+			console.log(data);
+		} catch (error) {
+			console.error('Error fetching cat food:', error);
+		}
+	}
+		,
+
+		getExoticFood: async ()=>{
+			const myHeaders = new Headers();
+			myHeaders.append("Cookie", ".Tunnels.Relay.WebForwarding.Cookies=CfDJ8Cs4yarcs6pKkdu0hlKHsZuqp5-e7T1vVCCdEQ0C1wStd1vPjajnZKjnPSA5Hq6rqD8KnBNHzrxCrSBqwnlunA0rkm36DsRzpvbpKLHVNklCfX8GBsMZKstrANOENBUzsSi1PBxW5_TibtPeRePzgNe5pBHuYx5F-1zm7-FoplLOZKZUFeRu1ua1DgiPeOiqvYSnKMQISiWoLb64DlQlSfXIGkFzVDFsFNPJ5lN-NHmI9dQ4O8b8EtoLAvXug1GQ5WkthHTcarTf_lXY5fcoEJbvhObGkUw7LC07jfKn2BTk27bZGx_F2kXNKq2N32CJ_46MMiulhV3sVpuuBUenZ-P7eLMcyMYuz6LcVrybPlrmHBiCnIbgcmgn-jnL-P3rcWL49L8RpPU84Ul4CaOZTFZ7eFCUqa1m1YKjX21YEdJlEm8fyYpFYcFp_9mGziKaxChcel7DevH4J4NV-E1mEUnQP-wDBMVq1IH0wdb4_HSnZ8aBhyyb8GvuEuLIhlH4soY8xtKNlaM73kynXCEhJ2OH-eKM6XIkWQHVIENwRoWzjj8G-8jQcJjz1Clyo9lMuFB98AWfsJgqe_PO7PgIw_Ms8_hRKyGG_aej9UuBo8rS-u4vTGaj5v_1vp6_PrZ-qEp8iyGGK_0OERl5OH0S3_mcXOd1wQcpFQ76RR6qtXqju2G8WkN9e3xC9XvP3SWVDIc5195fVj_1gRGLUCC20Uu5uPC0yzuE2X_TrcjKq0-SeWiyVIphc1T7AoJ2PvAu74js-66UPPcjXqoQvGXCzwrwhPdzXAp8n6sVwGcfRthrk2AOD4U8XJz68aBA5aRx77sqsMKKFIbCRXjRfOcAoa214qR5Oz7-nnKj1dII9Rx_g9ZD7SS_Mjm5Sk3M_Mr0zZNDzN7YWd_j3WhN9Gvr1MOeU6aFKssi2wzLgyNAVHNaXxjKms7cV1bDDwVzfYcHa6L-oLvvPk1FRmoRsD4J_3I7TgE1iO2LOtWD4ZLYilAcmmiHh3OPqNpQrKkl5uK2zg");
+
+			const requestOptions = {
+			method: "GET",
+			headers: myHeaders,
+			redirect: "follow"
+			};
+
+			try {
+			const response = await fetch("https://silver-meme-jj4x947jg76ghqjg9-3001.app.github.dev/api/foods/exotic", requestOptions);
+			if (!response.ok) {
+				throw new Error('Network response was not ok');
+			}
+
+			const data = await response.json();
+			setStore({ exoticFood: data });
+			console.log(data);
+		} catch (error) {
+			console.error('Error fetching cat food:', error);
+		}
+	}
+		,
+
+
+
+
 			getMessage: async () => {
 				try{
 					// fetching data from the backend
 					const resp = await fetch(process.env.BACKEND_URL + "/api/hello")
 					const data = await resp.json()
-					setStore({ message: data.message })
+					setStore({ exoticFood: data })
 					// don't forget to return something, that is how the async resolves
 					return data;
 				}catch(error){
 					console.log("Error loading message from backend", error)
 				}
 			},
+
+
 			changeColor: (index, color) => {
 				//get the store
 				const store = getStore();