Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Valentin_Interfaz2 #206

Merged
merged 5 commits into from
May 1, 2022
Merged

Valentin_Interfaz2 #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0f84d64
Añadida imagen a producto
valydumitru01 May 1, 2022
e8b5948
Finalizada vista producto
valydumitru01 May 1, 2022
c70cd86
Ajuste theme
valydumitru01 May 1, 2022
eee22d3
Cambio estilo carrito + arreglo bug theme
valydumitru01 May 1, 2022
6e7d60d
Merge branch 'develop' into Valentin_Interfaz2
valydumitru01 May 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 74 additions & 50 deletions webapp/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,25 @@

//import { useQuery } from 'react-query';
//import Link from '@mui/material/Link';



import { Drawer } from '@mui/material';
import { useState, useEffect } from 'react';
import Welcome from './components/Welcome';
import './css/App.css';
import { Drawer } from "@mui/material";
import { useState, useEffect } from "react";
import Welcome from "./components/Welcome";
import "./css/App.css";
import { Route, Routes, Navigate, BrowserRouter } from "react-router-dom";
import {Rock} from './shared/shareddtypes';
import Catalog from './components/Catalog';
import { ThemeProvider } from '@emotion/react';
import { Rock } from "./shared/shareddtypes";
import Catalog from "./components/Catalog";
import { ThemeProvider } from "@emotion/react";
import { theme } from "./code/Theme";
import LogIn from "./components/Login";
import Register from "./components/Register";
import NavBar from "./components/NavigationBar";
import { Container } from "@mui/material";

import "./css/App.css"
import "./css/App.css";
import ShoppingCart from "./components/ShoppingCart";
import PaymentProcess from './components/payment/PaymentPage';
import OrderHistory from './components/Orders';
import ProductView from './components/ProductView';
import PaymentProcess from "./components/payment/PaymentPage";
import OrderHistory from "./components/Orders";
import ProductView from "./components/ProductView";
type Props = {
openCart: () => void;
};
Expand Down Expand Up @@ -60,13 +57,13 @@ function App(): JSX.Element {
const handleAddToCart = (selectedItem: Rock) => {
setCartContent((cart) => {
if (cart.find((rocaInCart) => rocaInCart.name === selectedItem.name)) {
return cart.map(Rock => (
Rock.name === selectedItem.name ?
{ ...Rock, quantityCart: Rock.quantityCart + 1 } :
Rock
));
return cart.map((Rock) =>
Rock.name === selectedItem.name
? { ...Rock, quantityCart: Rock.quantityCart + 1 }
: Rock
);
}
return [...cart, {...selectedItem, quantityCart: 1}];
return [...cart, { ...selectedItem, quantityCart: 1 }];
});
};

Expand All @@ -77,7 +74,7 @@ function App(): JSX.Element {
if (p.quantityCart === 1) {
return sum;
}
return [...sum, {...p, quantityCart: p.quantityCart - 1}];
return [...sum, { ...p, quantityCart: p.quantityCart - 1 }];
} else {
return [...sum, p];
}
Expand All @@ -86,35 +83,62 @@ function App(): JSX.Element {
};

return (
<ThemeProvider theme={theme}>
<Container maxWidth="xl" className="principal">
<NavBar openCart={() => setCartOpen(true)} />
<BrowserRouter>
<Routes>
<Route path="/home" element={<Welcome handleAddToCart={handleAddToCart} />} />
<Route path="/" element={<Navigate replace to="/home" />} />
<Route path="/catalog" element={ <Catalog handleAddToCart={handleAddToCart} /> } />
<Route path="/orders" element={ <OrderHistory email={"[email protected]"}/> } />
<Route path="/payment" element={ <PaymentProcess cartContent={cartContent} setNewCart={setNewCart} /> } />
<Route path="/login" element={<LogIn />} />
<Route path="/register" element={<Register />} />
<Route path="/logout" element ={<Welcome handleAddToCart={handleAddToCart} />}/>
<Route path="/product/:id" element={<ProductView handleAddToCart={handleAddToCart}></ProductView>}/>
</Routes>
</BrowserRouter>
<Drawer
anchor="right"
open={isCartOpen}
onClose={() => setCartOpen(false)}
>
<ShoppingCart
cartContent={cartContent}
handleAddToCart={handleAddToCart}
handleRemoveFromCart={handleRemoveFromCart}
/>
</Drawer>
</Container>
</ThemeProvider>
<>
<ThemeProvider theme={theme}>
<Container maxWidth="xl" className="principal">
<NavBar openCart={() => setCartOpen(true)} />
<BrowserRouter>
<Routes>
<Route
path="/home"
element={<Welcome handleAddToCart={handleAddToCart} />}
/>
<Route path="/" element={<Navigate replace to="/home" />} />
<Route
path="/catalog"
element={<Catalog handleAddToCart={handleAddToCart} />}
/>
<Route
path="/orders"
element={<OrderHistory email={"[email protected]"} />}
/>
<Route
path="/payment"
element={
<PaymentProcess
cartContent={cartContent}
setNewCart={setNewCart}
/>
}
/>
<Route path="/login" element={<LogIn />} />
<Route path="/register" element={<Register />} />
<Route
path="/logout"
element={<Welcome handleAddToCart={handleAddToCart} />}
/>
<Route
path="/product/:id"
element={
<ProductView handleAddToCart={handleAddToCart}></ProductView>
}
/>
</Routes>
</BrowserRouter>
<Drawer
anchor="right"
open={isCartOpen}
onClose={() => setCartOpen(false)}
>
<ShoppingCart
cartContent={cartContent}
handleAddToCart={handleAddToCart}
handleRemoveFromCart={handleRemoveFromCart}
/>
</Drawer>
</Container>
</ThemeProvider>
</>
);
}

Expand Down
10 changes: 5 additions & 5 deletions webapp/src/code/Theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import { createTheme } from "@mui/material";
export const theme = createTheme({
palette: {
primary: {
light: "#f3af2f",
light: "#FFC04A",
main: "#f3af2f",
dark: "#553311",
dark: "#A67110",
contrastText: "#111",
},
secondary: {
light: "#ff7961",
main: "#f44336",
dark: "#ba000d",
light: "#429AFF",
main: "#2787F5",
dark: "#0D56A8",
contrastText: "#000",
},
},
Expand Down
104 changes: 57 additions & 47 deletions webapp/src/components/CartItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,66 @@
import { Typography } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import { Card, CardContent, CardMedia } from '@mui/material';
import { Rock } from '../shared/shareddtypes';
import '../css/CartItem.css';
import { Grid, Typography } from "@mui/material";
import Button from '@mui/material/Button';
import { Card, CardContent, CardMedia } from "@mui/material";
import { Rock } from "../shared/shareddtypes";

type Props = {
item: Rock;
handleAddToCart: (selectedItem: Rock) => void;
handleRemoveFromCart: (id: string) => void;
}
type CartItemProps = {
item: Rock;
handleAddToCart: (selectedItem: Rock) => void;
handleRemoveFromCart: (id: string) => void;
};

const CartItem: React.FC<Props> = ({item, handleAddToCart, handleRemoveFromCart}) => {
return (
<Card className="cartItem-ci" >
<CardMedia
className = "img-ci"
component="img"
sx={{ width: 150, maxWidth: 150 }}
image={item.img}
alt={item.name}
/>
<CardContent>
<Typography className='name-ci' variant="h5"> {item.name} </Typography>
<div className="quantityController-ci">
function CartItem(props: CartItemProps): JSX.Element {
return (
<Card sx={{ height: "25vh",paddingY:"2vh" }}>
<CardMedia
component="img"
sx={{ height: "55%" }}
image={props.item.img}
alt={props.item.name}
/>
<CardContent>
<Typography variant="h5">{props.item.name}</Typography>
<Grid container spacing={3}>
<Grid item xs={6}>
<Grid container spacing={2}>
<Grid item>
<Button
size="small"
disableElevation
variant="contained"
color="primary"
onClick={() => handleRemoveFromCart(item.name)}
>-</Button>
<Typography id="quantity-ci" variant="h6">
{item.quantityCart + " uds" }
color="secondary"
size="small"
disableElevation
variant="contained"
onClick={() => props.handleRemoveFromCart(props.item.name)}
>
<Typography variant="h5">-</Typography>
</Button>
</Grid>
<Grid item>
<Typography variant="h5">
{props.item.quantityCart + " uds "}
</Typography>
</Grid>
<Grid item>
<Button
size="small"
disableElevation
variant="contained"
color="primary"
onClick={() => handleAddToCart(item)}
>+</Button>
</div>
<Typography id="quantity-ci" variant="h6">
{(item.price * item.quantityCart).toFixed(2) + " €"}
color="secondary"
size="small"
disableElevation
variant="contained"
onClick={() => props.handleAddToCart(props.item)}
>
<Typography variant="h5">+</Typography>
</Button>
</Grid>
</Grid>
</Grid>
<Grid item xs={4}>
<Typography variant="h4">
{(props.item.price * props.item.quantityCart).toFixed(2) + " €"}
</Typography>
</CardContent>

</Grid>
</Grid>
</CardContent>
</Card>

)
};

);
}

export default CartItem;

Loading