memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finitions pour components item

Browse Source
This commit is contained in:
Medenos 2022-10-16 20:21:49 -04:00
parent dbc1c78f07
commit 5cf47ecb12
8 changed files with 304 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
GrossesMitaines/grosses-mitaines-ui/public/images/chandailquetaine.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
GrossesMitaines/grosses-mitaines-ui/public/images/doudou.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
GrossesMitaines/grosses-mitaines-ui/public/images/kokin.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
GrossesMitaines/grosses-mitaines-ui/public/images/mitaines.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

114
GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
View File

@ -1,17 +1,105 @@
const Item = ({ imageUrl, name, price, status }) => {
import { Card } from "react-bootstrap";
// public enum States {
// Available,
// BackOrder,
// Unavailable,
// Clearance,
// Promotion,
// Discontinued
// }
function renderStatus(statusCode) {
switch (statusCode) {
case 0:
return (
<Card.Text className="item-status item-status-available">
Disponible
</Card.Text>
);
case 1:
return (
<Card.Text className="item-status item-status-backorder">
En commande
</Card.Text>
);
case 2:
return (
<Card.Text className="item-status item-status-unavailable">
Indisponible
</Card.Text>
);
case 3:
return (
<Card.Text className="item-status item-status-clearence">
Liquidation
</Card.Text>
);
case 4:
return (
<Card.Text className="item-status item-status-promotion">
Promotion
</Card.Text>
);
case 5:
return (
<Card.Text className="item-status item-status-discontinued">
Discontinué
</Card.Text>
);
default:
return (
<></>
);
}
}
function renderPrice(price, newPrice) {
if (newPrice < 0) {
return (
<Card.Text className="item-price-container">
<span className="item-price">
{price.toFixed(2).toString().replace(".", ",")} $ CA
</span>
</Card.Text>
);
}
else {
return (
<Card.Text className="item-price-container">
<span className="item-old-price">
{price.toFixed(2).toString().replace(".", ",")} $ CA
</span>
<span className="item-new-price">
{newPrice.toFixed(2).toString().replace(".", ",")} $ CA
</span>
</Card.Text>
);
}
}
const Item = ({ imageUrl, name, price, newPrice, status }) => {
return (
<div className="row item">
<div className="col-md-2">
<img src={imageUrl} alt={name} height="150" />
</div>
<div className="col-md-8 item-detail">
<h4>{name}</h4>
<div dangerouslySetInnerHTML={{ __html: status }}></div>
</div>
<div className="col-md-2 item-price">
{price}
</div>
</div>
<Card className="item">
<Card.Img className="item-img" variant="top" src={imageUrl} />
<Card.Body className="item-info">
<div className="item-name-container">
<Card.Title className="item-name">
{name}
</Card.Title>
</div>
<div className="item-status-container">
{renderStatus(status)}
</div>
<div>
{renderPrice(price, newPrice)}
</div>
</Card.Body>
</Card>
);
}

3
GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
View File

@ -3,12 +3,13 @@ import Item from './Item';
const ItemList = ({ items }) => {
return (
<div>
<div className='item-list'>
{items.map((item) =>
<Item imageUrl={item.imageUrl}
name={item.name}
price={item.price}
status={item.status}
newPrice={item.newPrice}
/>
)}
</div>

54
GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
View File

@ -3,24 +3,65 @@ import ItemList from "../components/ItemList";
const Morceaux = () => {
// public enum States {
// Available,
// BackOrder,
// Unavailable,
// Clearance,
// Promotion,
// Discontinued
// }
const products = [
{
"name": "Ceinture flèchée",
"status": "Disponible!",
"price": "85,86",
"status": 0,
"price": 85.86,
"newPrice": -1,
"imageUrl": "/images/ceintureflechee.jpg"
},
{
"name": "Chandail de nowel",
"status": 2,
"price": 69.50,
"newPrice": -1,
"imageUrl": "/images/chandailquetaine.jpg"
},
{
"name": "Pantoufles du Canadien en Phentex",
"status": "Non disponible...",
"price": "15,64",
"status": 5,
"price": 15.64,
"newPrice": -1,
"imageUrl": "/images/pantouflesCH.jpg"
},
{
"name": "Jean-Luc Mongrain",
"status": "Disponible!",
"price": "1453,12",
"status": 1,
"price": 1453.12,
"newPrice": -1,
"imageUrl": "/images/jeanlucmongrain.jpg"
},
{
"name": "Mitaines de laine",
"status": 4,
"price": 24.99,
"newPrice": 19.99,
"imageUrl": "/images/mitaines.jpg"
},
{
"name": "Sous-vêtements coquins",
"status": 3,
"price": 19.99,
"newPrice": 14.99,
"imageUrl": "/images/kokin.jpg"
},
{
"name": "Doudou douce et grise",
"status": 3,
"price": 99.99,
"newPrice": 89.99,
"imageUrl": "/images/doudou.jpg"
}
];
@ -30,7 +71,6 @@ const Morceaux = () => {
return (
<div className="morceaux-container">
<h3>QWERTY</h3>
<ItemList items={products} />
</div>
);

164
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

@ -200,20 +200,159 @@ html {
}
/* items */
.item-list {
text-align: center;
}
.item:hover{
box-shadow: 10px 10px;
top:-5px;
left:-5px;
background-color: beige;
}
.item {
border: 5px purple double;
border-radius: 5px;
padding: 1rem 0;
margin: 1rem 0;
border:purple double 3px;
margin-left: 1.25%;
margin-right: 1.25%;
margin-bottom: 10px;
background-color: rgba(245, 245, 220, 0.75);
display: inline-block;
height:300px;
width: 30%;
}
.item-detail {
padding: 0 2rem;
.item-img {
padding-top: 2%;
box-shadow: 5px 5px;
border-radius: 2px;
display:block;
margin-right: auto;
margin-left: auto;
height:50%;
width:auto;
}
.item-price {
.item-info{
height:50%;
padding-top: 10px;
padding-bottom: 10px;
}
.item-name-container{
height:45%;
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
}
.item-name {
margin:auto;
height: auto;
}
.item-status-container{
height:40px;
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
}
.item-status {
font-weight: normal;
font-family: 'Courier New', Courier, monospace;
width: fit-content;
height:fit-content;
margin-left: auto;
margin-right: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
display: block;
border-radius: 10px;
font-size: small;
}
.item-status-available{
color:green;
}
.item-status-backorder{
color:yellow;
background-color: black;
}
.item-status-unavailable{
color:red;
background-color: black;
}
.item-status-clearence{
color:blue;
background-color: aliceblue;
font-size: large;
border: yellow 2px groove;
}
.item-status-promotion{
color:purple;
font-size: medium;
background-color: aliceblue;
border: yellow 2px groove;
}
.item-status-discontinued{
color:white;
background-color: black;
}
.item-price-container{
height: fit-content;
width: auto;
margin: auto;
}
.item-price{
color:green;
font-weight: bold;
font-size: 140%;
font-size: large;
height:auto;
margin:auto;
}
.item-old-price{
position:relative;
color:black;
text-decoration: line-through;
font-weight: normal;
font-size: small;
height:auto;
width: fit-content;
}
.item-new-price{
font-size: large;
margin-left: 10px;
font-weight: bolder;
background-color: aliceblue;
color: purple;
}
/* -------------------------------------------------------- */
/* specification pour les moyennes écrans
/* -------------------------------------------------------- */
@media(max-width:900px){
.item{
width:45%;
}
}
@ -222,6 +361,11 @@ html {
/* -------------------------------------------------------- */
@media (max-width:450px) {
.item{
width:85%;
}
.featured-img {
border: 5px purple double;
width: 100%;
@ -255,8 +399,8 @@ html {
}
.contact-info-container{
padding-top:5%;
.contact-info-container {
padding-top: 5%;
}
.employee-text {