Skip to content

Commit 6e0e8d2

Browse files
JenniferFernandezMurgaJenniferFernandezMurga
authored
Merge pull request #11 from 4GeeksAcademy/ft004-vista-producto
Ft004 vista producto
2 parents 2c3ffad + 84d4be0 commit 6e0e8d2

File tree

4 files changed

+141
-0
lines changed

4 files changed

+141
-0
lines changed

‎migrations/versions/ba227b582218_.py

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
"""empty message
2+
3+
Revision ID: ba227b582218
4+
Revises:
5+
Create Date: 2025-03-01 09:14:08.397142
6+
7+
"""
8+
from alembic import op
9+
import sqlalchemy as sa
10+
11+
12+
# revision identifiers, used by Alembic.
13+
revision = 'ba227b582218'
14+
down_revision = None
15+
branch_labels = None
16+
depends_on = None
17+
18+
19+
def upgrade():
20+
# ### commands auto generated by Alembic - please adjust! ###
21+
op.create_table('user',
22+
sa.Column('id', sa.Integer(), nullable=False),
23+
sa.Column('email', sa.String(length=120), nullable=False),
24+
sa.Column('password', sa.String(length=80), nullable=False),
25+
sa.Column('is_active', sa.Boolean(), nullable=False),
26+
sa.PrimaryKeyConstraint('id'),
27+
sa.UniqueConstraint('email')
28+
)
29+
# ### end Alembic commands ###
30+
31+
32+
def downgrade():
33+
# ### commands auto generated by Alembic - please adjust! ###
34+
op.drop_table('user')
35+
# ### end Alembic commands ###

‎src/front/js/component/producto.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { Component, useState } from "react";
2+
3+
4+
export const Producto = () => {
5+
const [precio, setPrecio] = useState(29.99); // Precio inicial
6+
7+
const handleFormatoChange = (e) => {
8+
const selectedOption = e.target.options[e.target.selectedIndex];
9+
const nuevoPrecio = selectedOption.dataset.precio;
10+
11+
// Actualizar el precio si se seleccionó un formato
12+
if (nuevoPrecio) {
13+
setPrecio(nuevoPrecio);
14+
} else {
15+
setPrecio(29.99); // Precio por defecto
16+
}
17+
};
18+
return (
19+
20+
21+
<div className="container mt-5 text-center">
22+
<div className="row">
23+
<div className="col-md-8" style={{ width: "90%", height: "400px" }}>
24+
<div className="card mb-3 d-flex flex-column" style={{ height: "100%" }}>
25+
<div className="row g-0 flex-fill">
26+
<div className="col-md-4">
27+
<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" />
28+
</div>
29+
<div className="col-md-8">
30+
<div className="card-body d-flex flex-column flex-grow-1">
31+
<h5 className="card-title"><strong>Nombre del Producto</strong></h5>
32+
<hr />
33+
<div className="m-3 d-flex justify-content-around align-items-center">
34+
<h2 className="card-text text-xl-start">{precio}€</h2>
35+
<div>
36+
<label htmlFor="formatoProducto" className="form-label visually-hidden">Formato del Producto:</label>
37+
<select className="form-select form-select-sm" id="formatoProducto" onChange={handleFormatoChange}>
38+
<option value="">Seleccione un formato</option>
39+
<option value="1" data-precio="29.99">Formato 2Kg - 29.99€</option>
40+
<option value="2" data-precio="39.99">Formato 6Kg - 39.99€</option>
41+
<option value="3" data-precio="49.99">Formato 10Kg - 49.99€</option>
42+
</select>
43+
</div>
44+
</div>
45+
<p className="card-text m-3 p-3">Descripción breve del producto que está en venta. Aquí puedes incluir características y beneficios.
46+
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).
47+
</p>
48+
<div className="mt-auto text-center">
49+
<button className="btn btn-primary">Añadir carrito</button>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
59+
60+
61+
);
62+
}

‎src/front/js/layout.js

+10
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,20 @@ import ScrollToTop from "./component/scrollToTop";
44
import { BackendURL } from "./component/backendURL";
55

66
import { Home } from "./pages/home";
7+
78
import { Demo } from "./pages/demo";
89
import { Single } from "./pages/single";
910
import injectContext from "./store/appContext";
1011

1112
import { Navbar } from "./component/navbar";
1213
import { Footer } from "./component/footer";
14+
15+
import { VistaProducto } from "./pages/VistaProducto";
16+
1317
import { Login# } from "./pages/##";
1418

1519

20+
1621
//create your first component
1722
const Layout = () => {
1823
//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 = () => {
2833
<Navbar />
2934
<Routes>
3035
<Route element={<Home />} path="/" />
36+
37+
38+
<Route element={<VistaProducto />} path="/vista-producto" />
39+
3140
<Route element={<Login#/>} path="/##" />
3241

42+
3343
<Route element={<Demo />} path="/demo" />
3444
<Route element={<Single />} path="/single/:theid" />
3545
<Route element={<h1>Not found!</h1>} />

‎src/front/js/pages/VistaProducto.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { Component, useState } from "react";
2+
import { Producto } from "../component/producto";
3+
4+
5+
export const VistaProducto = () => {
6+
7+
return (
8+
9+
10+
<div className="flex-container mt-5 text-center">
11+
<Producto/>
12+
<hr className="mt-5" style={{width: "90%"}}></hr>
13+
<div className="sección similares my-5">
14+
<h3>Productos similares</h3>
15+
<div className="row justify-content-center my-5">
16+
{/* AQUI IRIAN LAS CARDS
17+
<Card className="col-md-3" />
18+
<Card className="col-md-3" />
19+
<Card className="col-md-3" />
20+
<Card className="col-md-3" /> */}
21+
22+
<div className="col-md-3 border m-2" style={{ width: "20%", height: "300px" }}></div>
23+
<div className="col-md-3 border m-2" style={{ width: "20%", height: "300px" }}></div>
24+
<div className="col-md-3 border m-2" style={{ width: "20%", height: "300px" }}></div>
25+
<div className="col-md-3 border m-2" style={{ width: "20%", height: "300px" }}></div>
26+
</div>
27+
</div>
28+
29+
</div>
30+
31+
32+
33+
);
34+
}

0 commit comments

Comments
 (0)