Merge pull request #96 from Arquisoft/Add-new-products

Add new products

webapp/src/components/cart/CartItem.tsx

@@ -31,17 +31,20 @@ function CartItem(props: CartItemProps) {
         setQuantity(props.item.quantity);
     }, [props.item.quantity]);
 
+    const imgPath = "cars/" + props.item.product.image + "/" + props.item.product.image + " (1).jpg"
+
     return (
+
         <Card variant="elevation" sx={{ display: 'flex', marginBottom: 5 }}>
             <CardMedia
                 component="img"
 
                 //set max image to fill the card
                 //sx={{ maxWidth: '100', maxHeight: '110', width: '100', height: '110' }}
-                image={props.item.product.image}
+                image={imgPath}
                 //image={require("path/to/image.jpg")} FOR TESTING
                 //set max height to 100px
-                sx={{ height: 110, width: 100, margin: 3 }}
+                sx={{ height: 200, width: 100, margin: 3 }}
                 style={{ flex: 2 }} />
             <Box style={{ flex: 3, display: 'flex', flexDirection: 'column' }}
                 justifyContent='space-between'>

webapp/src/components/checkout-shipping/CheckoutItem.tsx

@@ -9,12 +9,13 @@ type CheckoutItemProps = {
 
 function CheckoutItem(props: CheckoutItemProps) {
 
+    const imgPath = "cars/" + props.item.product.image + "/" + props.item.product.image + " (1).jpg"
+
     return (
         <Card variant="elevation" sx={{ display: 'flex', marginBottom: 5 }}>
             <CardMedia
                 component="img"
-
-                image={props.item.product.image}
+                image={imgPath}
                 sx={{ height: 260, width: 100, margin: 3 }}
                 style={{ flex: 2 }} />
             <Box style={{ flex: 3, display: 'flex', flexDirection: 'column' }}

webapp/src/components/products/ProductCard.tsx

@@ -7,7 +7,7 @@ import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
 import { Button, CardActionArea, CardActions } from '@mui/material';
 import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
-import { styled } from '@mui/system';
+import { padding, styled, width } from '@mui/system';
 
 import { useNavigate } from "react-router-dom";
 const DivBtonStyle = styled('div')({
@@ -43,19 +43,20 @@ function addProduct(product: Product): void {
 const ProductCard = ( prod: ProductCardProps): JSX.Element => {
 
 
-
+  const imgPath = "/cars/" + prod.product.image + "/" + prod.product.image + " (1).jpg"
 
   const navigate = useNavigate();
 
   return (
 
-    <Card >
+    <Card 
+    >
 
     <CardActionArea  onClick={()=>navigate("products/"+prod.product.id)}>
 
         <CardMedia
           component="img"
-          image={prod.product.image}
+          image={imgPath}
           alt={prod.product.name}
         />
         <CardContent>

webapp/src/components/products/ProductPage.css

@@ -1,5 +1,5 @@
-.image-gallery-slide img {
-    width: 30px;
-    height:50px;
+.MuiButtonBase-root img {
+    max-width: 60%;
+    height:100%;
     margin:auto;
   }

webapp/src/components/products/ProductPage.tsx

@@ -1,14 +1,14 @@
-import { useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import { Product } from '../../shared/shareddtypes';
-import {getProductById} from '../../api/api';
+import { getProductById } from '../../api/api';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
 import { useParams } from "react-router-dom";
 import './ProductPage.css';
-import  Grid  from "@mui/material/Grid";
-import {Button} from '@mui/material';
+import Grid from "@mui/material/Grid";
+import { Button } from '@mui/material';
 import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 import { styled } from '@mui/system';
 
@@ -19,97 +19,101 @@ type ProductPageProps = {
 }
 
 const DivBtonStyle = styled('div')({
-    backgroundColor: '#7c4dff',
-    color: '#ffff',
-    padding: 8,
-    borderRadius: 4,
-    position: 'relative',
-    width:'100%',
-
-  });
-
-  const BuyBtton = styled(Button)({
-    size:'large', 
-    position: 'relative',
-    width:'100%',
-
-  });
-
-
-  function addProduct(product: Product): void {
-    addToCart({ product: product, quantity: 1 });
+  backgroundColor: '#7c4dff',
+  color: '#ffff',
+  padding: 8,
+  borderRadius: 4,
+  position: 'relative',
+  width: '100%',
+
+});
+
+const BuyBtton = styled(Button)({
+  size: 'large',
+  position: 'relative',
+  width: '100%',
+
+});
+
+
+function addProduct(product: Product): void {
+  addToCart({ product: product, quantity: 1 });
+
+}
+
+function ProductPage(prop: ProductPageProps): JSX.Element {
+  const { id } = useParams();
+  const [product, setProduct] = useState<Product>(); //default empty product
+  const getProduct = async () => {
+    await setProduct(await getProductById(id));
+  };
+  useEffect(() => {
+    getProduct();
+  }, []);
 
-  }
 
-function ProductPage(prop : ProductPageProps) : JSX.Element {
-    const {id} = useParams();
-    const [product, setProduct] = useState<Product>(); //default empty product
-    const getProduct = async () => {
-        await setProduct(await getProductById(id));    
-    };
-    useEffect(()=>{
-        getProduct();
-    }, []);
-
-
-  if(product){
+  if (product) {
+
+    const imgPath = "/cars/" + product?.image + "/" + product?.image + " (1).jpg"
+
     return (
       <Grid container
         direction="row"
         justifyContent="left"
         alignItems="center"
         spacing={{ xs: 2, md: 3 }} columns={{ xs: 6, sm: 12, md: 15 }}
         rowSpacing={5}
-        
-        > 
-          
-        <Grid  item xs={2} sm={5} md={6} >
-      <Card sx={{ maxWidth: 345 }} style={{height:"100%"}}>
-      
-          <CardMedia
+
+      >
+
+        <Grid item xs={2} sm={5} md={6} >
+          <Card sx={{ maxWidth: 345 }} style={{ height: "100%" }}>
+
+            <CardMedia
               component="img"
-              image={product?.image}
+              image={imgPath}
               alt={product.name}
-
-          />
-          <CardContent>
+            />
+            <CardContent>
               <Typography gutterBottom variant="h3" component="div">
-               {product?.name}
+                {product?.name}
               </Typography>
               <Typography gutterBottom variant="h5" component="div">
-               {product?.price}€
+                {product?.price}€
               </Typography>
               <Typography gutterBottom variant="body1" component="div">
-               {product?.description}
+                {product?.description}
               </Typography>
-          </CardContent>
-      
-      
-  </Card>
-  </Grid>
-  <Grid  item xs={2} sm={5} md={6} >
+            </CardContent>
+
+
+          </Card>
+        </Grid>
+        <Grid item xs={2} sm={5} md={6} >
           <DivBtonStyle>
-          <BuyBtton startIcon={<AddShoppingCartIcon />} onClick={()=>{addProduct(product);
-            prop.refreshCartList();}} >
+            <BuyBtton startIcon={<AddShoppingCartIcon />} onClick={() => {
+              addProduct(product);
+              prop.refreshCartList();
+            }} >
               Add to Cart
-          </BuyBtton> 
+            </BuyBtton>
           </DivBtonStyle>
-  </Grid>
-  
-  </Grid>
-   
-          
-    // the button is contained because it has actions that are primary to our app( add an Item to the cart)
-          
-  
+        </Grid>
+
+      </Grid>
+
+
+      // the button is contained because it has actions that are primary to our app( add an Item to the cart)
+
+
     );
-  }else{
+  } else {
     return (<Typography gutterBottom variant="body1" component="div">
-    No product found
-   </Typography>);
+      No product found
+    </Typography>);
   }
-  }
-  
+}
+
 
 
 export default ProductPage;