Merge pull request #11 from 4GeeksAcademy/ft004-vista-producto

Ft004 vista producto

Author: JenniferFernandezMurga

Diff for: migrations/versions/ba227b582218_.py

@@ -0,0 +1,35 @@
+"""empty message
+
+Revision ID: ba227b582218
+Revises: 
+Create Date: 2025-03-01 09:14:08.397142
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = 'ba227b582218'
+down_revision = None
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table('user',
+    sa.Column('id', sa.Integer(), nullable=False),
+    sa.Column('email', sa.String(length=120), nullable=False),
+    sa.Column('password', sa.String(length=80), nullable=False),
+    sa.Column('is_active', sa.Boolean(), nullable=False),
+    sa.PrimaryKeyConstraint('id'),
+    sa.UniqueConstraint('email')
+    )
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_table('user')
+    # ### end Alembic commands ###

Diff for: src/front/js/component/producto.js

@@ -0,0 +1,62 @@
+import React, { Component, useState } from "react";
+
+
+export const Producto = () => {
+    const [precio, setPrecio] = useState(29.99); // Precio inicial
+
+    const handleFormatoChange = (e) => {
+        const selectedOption = e.target.options[e.target.selectedIndex];
+        const nuevoPrecio = selectedOption.dataset.precio;
+
+        // Actualizar el precio si se seleccionó un formato
+        if (nuevoPrecio) {
+            setPrecio(nuevoPrecio);
+        } else {
+            setPrecio(29.99); // Precio por defecto
+        }
+    };
+    return (
+
+  
+<div className="container mt-5 text-center">
+    <div className="row">
+        <div className="col-md-8" style={{ width: "90%", height: "400px" }}>
+            <div className="card mb-3 d-flex flex-column" style={{ height: "100%" }}>
+                <div className="row g-0 flex-fill">
+                    <div className="col-md-4">
+                        <img src="https://era2vrmzk5n.exactdn.com/wp-content/uploads/2022/06/Pienso-Ayurveda-gato-kasaludintegral-1080x1080pix.jpg" className="img-fluid rounded-start m-1" alt="Producto" />
+                    </div>
+                    <div className="col-md-8">
+                        <div className="card-body d-flex flex-column flex-grow-1">
+                            <h5 className="card-title"><strong>Nombre del Producto</strong></h5>
+                            <hr />
+                            <div className="m-3 d-flex justify-content-around align-items-center">
+                                <h2 className="card-text text-xl-start">{precio}€</h2>
+                                <div>
+                                    <label htmlFor="formatoProducto" className="form-label visually-hidden">Formato del Producto:</label>
+                                    <select className="form-select form-select-sm" id="formatoProducto" onChange={handleFormatoChange}>
+                                        <option value="">Seleccione un formato</option>
+                                        <option value="1" data-precio="29.99">Formato 2Kg - 29.99€</option>
+                                        <option value="2" data-precio="39.99">Formato 6Kg - 39.99€</option>
+                                        <option value="3" data-precio="49.99">Formato 10Kg - 49.99€</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <p className="card-text m-3 p-3">Descripción breve del producto que está en venta. Aquí puedes incluir características y beneficios.
+                                Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta).
+                            </p>
+                            <div className="mt-auto text-center">
+                                <button className="btn btn-primary">Añadir carrito</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+    );
+}

Diff for: src/front/js/layout.js

@@ -4,15 +4,20 @@ 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";
+
+import { VistaProducto } from "./pages/VistaProducto";
+
 import { LoginSignup } from "./pages/loginSignup";
 
 
+
 //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
@@ -28,8 +33,13 @@ const Layout = () => {
                     <Navbar />
                     <Routes>
                         <Route element={<Home />} path="/" />
+
+
+                        <Route element={<VistaProducto />} path="/vista-producto" />
+
                         <Route element={<LoginSignup/>} path="/loginSignup" />
 
+
                         <Route element={<Demo />} path="/demo" />
                         <Route element={<Single />} path="/single/:theid" />
                         <Route element={<h1>Not found!</h1>} />

Diff for: src/front/js/pages/VistaProducto.js

@@ -0,0 +1,34 @@
+import React, { Component, useState } from "react";
+import { Producto } from "../component/producto";
+
+
+export const VistaProducto = () => {
+  
+    return (
+
+  
+<div className="flex-container mt-5 text-center">
+        <Producto/>
+    <hr className="mt-5" style={{width: "90%"}}></hr>
+    <div className="sección similares my-5">
+				<h3>Productos similares</h3>
+				<div className="row justify-content-center my-5">
+					{/* AQUI IRIAN LAS CARDS
+                    <Card className="col-md-3" />
+					<Card className="col-md-3" />
+					<Card className="col-md-3" />
+					<Card className="col-md-3" /> */}
+    
+            <div className="col-md-3 border m-2" style={{ width: "20%", height: "300px" }}></div>
+            <div className="col-md-3 border m-2" style={{ width: "20%", height: "300px" }}></div>
+            <div className="col-md-3 border m-2" style={{ width: "20%", height: "300px" }}></div>
+            <div className="col-md-3 border m-2" style={{ width: "20%", height: "300px" }}></div>
+				</div>
+			</div>
+
+</div>
+
+
+
+    );
+}