basic page de détail
This commit is contained in:
Victor Turgeon
parent
0461823408
commit
5e19034e31
@ -54,9 +54,9 @@ function renderStatus(statusCode) {
|
||||
}
|
||||
}
|
||||
|
||||
function renderPrice(price, newPrice) {
|
||||
function renderPrice(price, newPrice, status) {
|
||||
|
||||
if (newPrice < 0) {
|
||||
if (status != 3 && status != 4) {
|
||||
return (
|
||||
<Card.Text className="item-price-container">
|
||||
<span className="item-price">
|
||||
@ -95,7 +95,7 @@ const Item = ({ imageUrl, name, price, newPrice, status }) => {
|
||||
{renderStatus(status)}
|
||||
</div>
|
||||
<div>
|
||||
{renderPrice(price, newPrice)}
|
||||
{renderPrice(price, newPrice, status)}
|
||||
</div>
|
||||
|
||||
</Card.Body>
|
||||
|
||||
@ -1,17 +1,121 @@
|
||||
import { useEffect } from "react";
|
||||
import {useParams} from "react-router-dom";
|
||||
import { json, useParams } from "react-router-dom";
|
||||
import { useState } from "react";
|
||||
|
||||
const MorceauDetail = () => {
|
||||
|
||||
const {id} = useParams();
|
||||
const { id } = useParams();
|
||||
const [item, setItem] = useState({});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = 'Morceaux';
|
||||
setIsLoading(true);
|
||||
async function fetchData() {
|
||||
const response = await fetch(`https://localhost:7292/api/Product?id=${id}`);
|
||||
const json = await response.json();
|
||||
setItem(json);
|
||||
}
|
||||
fetchData();
|
||||
setIsLoading(false);
|
||||
});
|
||||
|
||||
function renderPrice(price, newPrice, status) {
|
||||
if (price !== undefined) {
|
||||
if (status != 3 && status != 4) {
|
||||
return (
|
||||
<h3 className="detail-price">
|
||||
{price.toFixed(2).toString().replace(".", ",")} $ CA
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<>
|
||||
<h3 className="detail-old-price">
|
||||
{price.toFixed(2).toString().replace(".", ",")} $ CA
|
||||
</h3>
|
||||
<h3 className="detail-new-price">
|
||||
{newPrice.toFixed(2).toString().replace(".", ",")} $ CA
|
||||
</h3>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderStatus(statusCode) {
|
||||
if (statusCode !== undefined) {
|
||||
|
||||
switch (statusCode) {
|
||||
case 0:
|
||||
return (
|
||||
<h4 className="detail-status detail-status-available">
|
||||
Disponible
|
||||
</h4>
|
||||
);
|
||||
|
||||
case 1:
|
||||
return (
|
||||
<h4 className="detail-status detail-status-backorder">
|
||||
En commande
|
||||
</h4>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<h4 className="detail-status detail-status-unavailable">
|
||||
Indisponible
|
||||
</h4>
|
||||
);
|
||||
case 3:
|
||||
return (
|
||||
<h4 className="detail-status detail-status-clearence">
|
||||
Liquidation
|
||||
</h4>
|
||||
);
|
||||
case 4:
|
||||
return (
|
||||
<h4 className="detail-status detail-status-promotion">
|
||||
Promotion
|
||||
</h4>
|
||||
);
|
||||
case 5:
|
||||
return (
|
||||
<h4 className="detail-status detail-status-discontinued">
|
||||
Discontinué
|
||||
</h4>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<p>{id}</p>
|
||||
<div className={isLoading ? "cat-load" : "d-none cat-load"} />
|
||||
|
||||
<div className="detail-container">
|
||||
<div className="detail-container-left">
|
||||
<img className="detail-image" src={`/images/${item.imageName}.jpg`} />
|
||||
<p className="detail-description">{item.description}</p>
|
||||
</div>
|
||||
<div className="detail-container-right">
|
||||
<h1 className="detail-title">{item.title} (#{item.id})</h1>
|
||||
<h2 className="detail-category">{item.category}</h2>
|
||||
<div className="detail-price-container">
|
||||
{renderPrice(item.price, item.promoPrice, item.status)}
|
||||
</div>
|
||||
<div className="detail-status-container">
|
||||
{renderStatus(item.status)}
|
||||
</div>
|
||||
<h5>
|
||||
{item.quantity}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -206,22 +206,22 @@ html {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item:hover{
|
||||
.item:hover {
|
||||
box-shadow: 10px 10px;
|
||||
top:-5px;
|
||||
left:-5px;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
background-color: beige;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
border:purple double 3px;
|
||||
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;
|
||||
height: 300px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
@ -229,21 +229,21 @@ html {
|
||||
padding-top: 2%;
|
||||
box-shadow: 5px 5px;
|
||||
border-radius: 2px;
|
||||
display:block;
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
height:50%;
|
||||
width:auto;
|
||||
height: 50%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.item-info{
|
||||
height:50%;
|
||||
.item-info {
|
||||
height: 50%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.item-name-container{
|
||||
height:45%;
|
||||
.item-name-container {
|
||||
height: 45%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -251,12 +251,12 @@ html {
|
||||
}
|
||||
|
||||
.item-name {
|
||||
margin:auto;
|
||||
margin: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item-status-container{
|
||||
height:40px;
|
||||
.item-status-container {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -267,7 +267,7 @@ html {
|
||||
font-weight: normal;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
width: fit-content;
|
||||
height:fit-content;
|
||||
height: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 5px;
|
||||
@ -279,64 +279,64 @@ html {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.item-status-available{
|
||||
color:green;
|
||||
.item-status-available {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.item-status-backorder{
|
||||
color:yellow;
|
||||
.item-status-backorder {
|
||||
color: yellow;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.item-status-unavailable{
|
||||
color:red;
|
||||
.item-status-unavailable {
|
||||
color: red;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.item-status-clearence{
|
||||
color:blue;
|
||||
.item-status-clearence {
|
||||
color: blue;
|
||||
background-color: aliceblue;
|
||||
font-size: large;
|
||||
border: yellow 2px groove;
|
||||
}
|
||||
|
||||
.item-status-promotion{
|
||||
color:purple;
|
||||
.item-status-promotion {
|
||||
color: purple;
|
||||
font-size: medium;
|
||||
background-color: aliceblue;
|
||||
border: yellow 2px groove;
|
||||
}
|
||||
|
||||
.item-status-discontinued{
|
||||
color:white;
|
||||
.item-status-discontinued {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.item-price-container{
|
||||
.item-price-container {
|
||||
height: fit-content;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.item-price{
|
||||
color:green;
|
||||
.item-price {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
height:auto;
|
||||
margin:auto;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.item-old-price{
|
||||
position:relative;
|
||||
color:black;
|
||||
.item-old-price {
|
||||
position: relative;
|
||||
color: black;
|
||||
text-decoration: line-through;
|
||||
font-weight: normal;
|
||||
font-size: small;
|
||||
height:auto;
|
||||
height: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.item-new-price{
|
||||
.item-new-price {
|
||||
font-size: large;
|
||||
margin-left: 10px;
|
||||
font-weight: bolder;
|
||||
@ -345,90 +345,130 @@ html {
|
||||
|
||||
}
|
||||
|
||||
.item-link, .item-link:hover{
|
||||
.item-link,
|
||||
.item-link:hover {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.btn-primary{
|
||||
.btn-primary {
|
||||
background-color: purple;
|
||||
color:white;
|
||||
color: white;
|
||||
border-color: darkslateblue;
|
||||
}
|
||||
|
||||
.btn-primary:hover{
|
||||
.btn-primary:hover {
|
||||
background-color: plum !important;
|
||||
border-color: purple !important;
|
||||
color:darkslateblue !important;
|
||||
color: darkslateblue !important;
|
||||
}
|
||||
|
||||
.btn-load-more{
|
||||
.btn-load-more {
|
||||
display: block;
|
||||
margin-left:auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top:10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width:30%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.sorting-dropdown{
|
||||
width:fit-content;
|
||||
margin:auto;
|
||||
float:right;
|
||||
.sorting-dropdown {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sorting-container{
|
||||
width:100%;
|
||||
float:right;
|
||||
margin-right:5%;
|
||||
margin-left:5%;
|
||||
margin-top:15px;
|
||||
margin-bottom:15px;
|
||||
.sorting-container {
|
||||
width: 100%;
|
||||
float: right;
|
||||
margin-right: 5%;
|
||||
margin-left: 5%;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.cat-load{
|
||||
display:block;
|
||||
margin:auto;
|
||||
width:auto;
|
||||
.cat-load {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: auto;
|
||||
background-image: url("/public/images/cat-yarn.gif");
|
||||
background-repeat: no-repeat;
|
||||
background-color: white;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
mix-blend-mode: multiply;
|
||||
height:200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
display: flex;
|
||||
background-color: plum;
|
||||
padding:16px;
|
||||
}
|
||||
|
||||
.detail-container-left {
|
||||
margin:auto;
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.detail-container-right {
|
||||
margin:auto;
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* -------------------------------------------------------- */
|
||||
/* specification pour les moyennes écrans
|
||||
/* -------------------------------------------------------- */
|
||||
@media(max-width:900px){
|
||||
.item{
|
||||
width:45%;
|
||||
@media(max-width:900px) {
|
||||
|
||||
.detail-container{
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.btn-load-more{
|
||||
width:45%;
|
||||
.detail-container-left {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.sorting-dropdown{
|
||||
|
||||
width:100%;
|
||||
float:none;
|
||||
.detail-container-right {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.sorting-dropdown button{
|
||||
height:60px !important;
|
||||
.item {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.btn-load-more {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.sorting-dropdown {
|
||||
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.sorting-dropdown button {
|
||||
height: 60px !important;
|
||||
width: 100% !important;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.sorting-container{
|
||||
.sorting-container {
|
||||
width: 90%;
|
||||
float:none;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.sorting-menu{
|
||||
.sorting-menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -446,13 +486,12 @@ html {
|
||||
/* -------------------------------------------------------- */
|
||||
|
||||
@media (max-width:450px) {
|
||||
|
||||
.item{
|
||||
width:85%;
|
||||
.item {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.btn-load-more{
|
||||
width:85%;
|
||||
.btn-load-more {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.featured-img {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user