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

petits ajustements et début boutton cart

Browse Source
This commit is contained in:
Victor Turgeon 2022-11-06 14:49:53 -05:00
parent 5c789e2cc7
commit ed04dc8293
4 changed files with 160 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js Normal file
View File

@ -0,0 +1,15 @@
import { Button } from "react-bootstrap";
import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const CartButton = () =>{
return(
<Button id="cart-button">
<FontAwesomeIcon icon={faCartShopping}/>
<div id="cart-count">3</div>
</Button>
)
}
export default CartButton;

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

@ -10,7 +10,7 @@ const ItemList = ({ items }) => {
{items.map((item) => {items.map((item) =>
<Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}> <Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
<Item <Item
productId={item.id} productId={item.id}
name={item.title} name={item.title}
price={item.price} price={item.price}
status={item.status} status={item.status}

128
GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
View File

@ -6,6 +6,7 @@ import Button from 'react-bootstrap/Button';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Dropdown from "react-bootstrap/Dropdown"; import Dropdown from "react-bootstrap/Dropdown";
import { useCookies } from "react-cookie"; import { useCookies } from "react-cookie";
import CartButton from "./CartButton";
const Topbar = () => { const Topbar = () => {
const [cookies, setCookie, removeCookie] = useCookies(['name']); const [cookies, setCookie, removeCookie] = useCookies(['name']);
@ -15,14 +16,14 @@ const Topbar = () => {
async function reset() { async function reset() {
await setLogin(await cookies.GMGM ?? null); await setLogin(await cookies.GMGM ?? null);
} }
reset(); reset();
}); });
async function logOut() { async function logOut() {
const response = fetch(`https://localhost:7292/api/Logout`, { const response = fetch(`https://localhost:7292/api/Logout`, {
method: 'POST', method: 'POST',
credentials: 'include' credentials: 'include'
}) })
await removeCookie("GMGM"); await removeCookie("GMGM");
await setLogin(null); // Y U NO WORK?!? await setLogin(null); // Y U NO WORK?!?
} }
@ -52,73 +53,74 @@ const Topbar = () => {
Vie privée Vie privée
</Link> </Link>
{(user === null || user.LoggedIn === false) && {(user === null || user.LoggedIn === false) &&
<Link className="nav-link" to="/login" > <Link className="nav-link" to="/login" >
Connexion Connexion
</Link> </Link>
} }
{(user === null || user.LoggedIn === false) && {(user === null || user.LoggedIn === false) &&
<Link className="nav-link" to="/register"> <Link className="nav-link" to="/register">
S'inscrire S'inscrire
</Link> </Link>
} }
{user !== null && user.LoggedIn && {user !== null && user.LoggedIn &&
<Dropdown className="dropdown-gestion-container"> <Dropdown className="dropdown-gestion-container">
<Dropdown.Toggle className="dropdown-gestion" > <Dropdown.Toggle className="dropdown-gestion" >
Bonjour, {user.firstName} {user.lastName}! Bonjour, {user.firstName} {user.lastName}!
</Dropdown.Toggle> </Dropdown.Toggle>
<Dropdown.Menu className="dropdown-gestion-menu"> <Dropdown.Menu className="dropdown-gestion-menu">
<Dropdown.Item> <Dropdown.Item>
<Link className="nav-link" to="/myaccount" > <Link className="nav-link" to="/myaccount" >
Mon Compte Mon Compte
</Link> </Link>
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item> <Dropdown.Item>
<Link className="nav-link" to="/myaddresses" > <Link className="nav-link" to="/myaddresses" >
Mes Addresses Mes Addresses
</Link> </Link>
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item> <Dropdown.Item>
<Link className="nav-link" to="/myinvoices" > <Link className="nav-link" to="/myinvoices" >
Mes Commandes Mes Commandes
</Link> </Link>
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item> <Dropdown.Item>
<Button className="nav-link" onClick={() => logOut()}> <Button className="nav-link" onClick={() => logOut()}>
Déconnexion Déconnexion
</Button> </Button>
</Dropdown.Item> </Dropdown.Item>
{user.role === "Administrateur" && {user.role === "Administrateur" &&
<Container> <Container>
<Dropdown.Divider/> <Dropdown.Divider />
<Dropdown.ItemText> <Dropdown.ItemText>
Gestion Gestion
</Dropdown.ItemText> </Dropdown.ItemText>
<Dropdown.Item> <Dropdown.Item>
<Link className="nav-link" to="/inventaire" > <Link className="nav-link" to="/inventaire" >
Inventaire Inventaire
</Link> </Link>
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item> <Dropdown.Item>
<Link className="nav-link" to="/invoices" > <Link className="nav-link" to="/invoices" >
Commandes Commandes
</Link> </Link>
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item> <Dropdown.Item>
<Link className="nav-link" to="/clients" > <Link className="nav-link" to="/clients" >
Clients Clients
</Link> </Link>
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item> <Dropdown.Item>
<Link className="nav-link" to="/addresses" > <Link className="nav-link" to="/addresses" >
Adresses Adresses
</Link> </Link>
</Dropdown.Item> </Dropdown.Item>
</Container> </Container>
} }
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
} }
</Nav> </Nav>
<CartButton />
</Navbar.Collapse> </Navbar.Collapse>
</Container> </Container>
</Navbar> </Navbar>

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

@ -243,14 +243,13 @@ a {
margin-bottom: 10px; margin-bottom: 10px;
background-color: rgba(245, 245, 220, 0.75); background-color: rgba(245, 245, 220, 0.75);
display: inline-block; display: inline-block;
height: 300px; height: 375px;
width: 30%; width: 30%;
} }
.item-img { .item-img {
/* box-shadow: 2px 5px rgba(0, 0, 0, 0.608); */
border-radius: 2px; border-radius: 2px;
margin-top: 5px; margin-top: 15px;
display: block; display: block;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
@ -485,28 +484,28 @@ a {
} }
/* width */ /* width */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
} }
/* Track */ /* Track */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: beige; background: beige;
} }
/* Handle */ /* Handle */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: plum; background: plum;
} }
/* Handle on hover */ /* Handle on hover */
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: purple; background: purple;
} }
.morceaux-container{ .morceaux-container {
padding-top:10px; padding-top: 10px;
height: 620px; height: 620px;
overflow-y: scroll; overflow-y: scroll;
border: purple 2px solid; border: purple 2px solid;
@ -514,24 +513,24 @@ a {
background-color: rgba(245, 245, 220, 0.25); background-color: rgba(245, 245, 220, 0.25);
} }
.filters-btn-container{ .filters-btn-container {
width:100%; width: 100%;
display:flex; display: flex;
} }
.filters-btn{ .filters-btn {
margin:auto; margin: auto;
width:90% !important; width: 90% !important;
} }
.filters-dropdown button{ .filters-dropdown button {
width: 100%; width: 100%;
} }
.filters-menu{ .filters-menu {
width:fit-content; width: fit-content;
display:flex; display: flex;
margin:5px 15px 10px 15px; margin: 5px 15px 10px 15px;
} }
.filters-container { .filters-container {
@ -539,32 +538,32 @@ a {
margin-left: 25px; margin-left: 25px;
} }
.filters-price-container{ .filters-price-container {
white-space: nowrap; white-space: nowrap;
padding:0px 10px 0px 10px; padding: 0px 10px 0px 10px;
} }
.filters-state-container{ .filters-state-container {
white-space: nowrap; white-space: nowrap;
padding:0px 10px 0px 10px; padding: 0px 10px 0px 10px;
} }
.filters-info{ .filters-info {
width:fit-content; width: fit-content;
height:fit-content; height: fit-content;
background-color: beige; background-color: beige;
margin-top: 5px; margin-top: 5px;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
border-radius: 5px; border-radius: 5px;
} }
.img-preview-container{ .img-preview-container {
margin-top: 15px; margin-top: 15px;
display:flex; display: flex;
} }
.img-preview{ .img-preview {
margin:auto; margin: auto;
max-width: 90%; max-width: 90%;
max-height: 200px; max-height: 200px;
} }
@ -572,7 +571,7 @@ a {
.sorting-container { .sorting-container {
width: 20%; width: 20%;
height: fit-content; height: fit-content;
margin:auto; margin: auto;
margin-right: 25px; margin-right: 25px;
} }
@ -656,6 +655,17 @@ a {
} }
#cart-button {
background-color: transparent;
border: none;
color: purple;
}
#cart-count {
color:green;
}
/* -------------------------------------------------------- */ /* -------------------------------------------------------- */
/* specification pour les moyennes écrans /* specification pour les moyennes écrans
/* -------------------------------------------------------- */ /* -------------------------------------------------------- */
@ -720,7 +730,7 @@ a {
} }
.sorting-container { .sorting-container {
margin:auto; margin: auto;
width: 90%; width: 90%;
float: none; float: none;
} }
@ -736,43 +746,43 @@ a {
border: 2px white solid; border: 2px white solid;
} }
.filters-dropdown button{ .filters-dropdown button {
height:60px; height: 60px;
} }
.filters-container{ .filters-container {
width:90%; width: 90%;
margin:auto; margin: auto;
margin-bottom: 16px; margin-bottom: 16px;
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
border-radius: 10px; border-radius: 10px;
padding-bottom: 16px; padding-bottom: 16px;
} }
.filters-info{ .filters-info {
margin:auto; margin: auto;
margin-top:16px; margin-top: 16px;
} }
.filters-menu{ .filters-menu {
padding:0px; padding: 0px;
margin:10px; margin: 10px;
} }
.filters-menu .form-check-label{ .filters-menu .form-check-label {
margin-left:5px; margin-left: 5px;
} }
.filters-menu .form-check{ .filters-menu .form-check {
margin-bottom:20px; margin-bottom: 20px;
} }
.filters-menu input[type='radio']{ .filters-menu input[type='radio'] {
transform: scale(2); transform: scale(2);
} }
.morceaux-options-container{ .morceaux-options-container {
display:block; display: block;
} }
} }
@ -783,7 +793,7 @@ a {
@media (max-width:450px) { @media (max-width:450px) {
.morceaux-container{ .morceaux-container {
height: 450px; height: 450px;
} }