bamarty/Site-Proximo
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Ticket de Caisse fonctionnel

Browse source
This commit is contained in:
Kongzibapt 2021-02-08 18:06:57 +01:00
parent 4ce4abf8c1
commit 21d5ac5d2f
7 changed files with 343 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/css/Components/articledetails.css
View file

@ -10,6 +10,19 @@
flex-direction: column;
}
#line{
background-color: rgba(105, 105, 105, 0.28);
border-radius: 50px;
width:800px;
height:80px;
margin-top:30px;
margin-right:15px;
margin-left:15px;
display:flex;
flex-direction: row;
font-family: 'Wellfleet', cursive;
}
#bulleSelect{
background-color: rgba(255, 255, 255, 0.719);
border-radius: 30px;
@ -20,6 +33,8 @@
margin-left:15px;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#imageordescblock{
@ -31,6 +46,52 @@
align-items: center;
}
#imgLine{
display:flex;
flex:1;
justify-content: center;
align-items: center;
}
#nameLine{
display:flex;
flex:2;
justify-content: left;
align-items: center;
color:white;
font-size:30px;
}
#priceLine{
display:flex;
flex:3;
justify-content: center;
align-items: center;
color:#057B26;
font-size:30px;
}
#quantityLine{
display:flex;
flex:1.8;
justify-content: center;
align-items: center;
}
#quantityLineBox{
background-color: white;
border-radius: 10px;
margin-left:15px;
margin-right:15px;
padding-left:5%;
padding-right:5%;
padding-top:1%;
padding-bottom:1%;
font-size:25px;
color:black;
}
#icons{
flex:1;
display:flex;
@ -106,6 +167,11 @@
}
#imageLine{
height:60px;
width:auto;
}
#name{
color:white;
font-size:17.4px;

62
src/css/Views/ticket.css
View file

@ -12,3 +12,65 @@
font-size:max(2.5vw,30px);
width:25%;
}
#articlesInline{
min-height:50vh;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#total{
margin-top:3vh;
display:flex;
flex-direction:row;
width:800px;
justify-content: center;
align-items: center;
}
#totalTxt{
display:flex;
justify-content: left;
align-items: center;
flex:3;
font-family: 'Wellfleet', cursive;
font-size:max(3vw,30px);
color:white;
padding-left:50px
}
#totalPrice{
display:flex;
justify-content: center;
align-items: center;
flex:3;
font-family: 'Wellfleet', cursive;
font-size:max(3vw,30px);
color:#057B26;
}
#totalQuantity{
display:flex;
justify-content: center;
align-items: center;
flex:2;
display:flex;
justify-content: center;
align-items: center;
}
#totalQuantityBox{
font-family: 'Wellfleet', cursive;
background-color: white;
border-radius: 15px;
margin-left:15px;
margin-right:15px;
padding-left:6%;
padding-right:6%;
padding-top:1%;
padding-bottom:1%;
font-size:35px;
color:black;
}

214
src/js/Components/ArticleDetails.js
View file

@ -101,96 +101,138 @@ class ArticleDetails extends React.Component {
return (<Redirect to='/stock'/>)
}
return(
this.props.squaredBubble ?
// SQUARE
this.state.selected ?
<div onClick={this.selectArticles} id="bulleSelect" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
{this.state.redcrossPressed ?
<div id="confirmation">
<div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
<div id="choice">
<div id="yes" onClick={this.deleteArticle}>Oui</div>
<div id="no" onClick={this.handleNoDelete}>Non</div>
</div>
</div>
:
<>
<div id="imageordescblock">
{this.state.currentArticle === this.props.id ?
<>
<div id="icons">
<div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
<Icon id="penblue" icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
</div>
<div id="redcross" onClick={this.handleRedCross}>
<Icon id="crossred" icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
</div>
</div>
<div id="categoryDiv">
<img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
</div>
<div id="descandprice">
<h1 id="desc">{this.props.desc}</h1>
<p id ="price">{this.props.price} €</p>
</div>
</>
: <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
}
</div>
<h1 id="name">{this.props.name}</h1>
<div id="count">
<Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
<div id="countNumber">
<p id="countNumberTxt">{this.state.quantity}</p>
</div>
<Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
// SELECTED
<div onClick={this.selectArticles} id="bulleSelect" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
{this.state.redcrossPressed ?
<div id="confirmation">
<div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
<div id="choice">
<div id="yes" onClick={this.deleteArticle}>Oui</div>
<div id="no" onClick={this.handleNoDelete}>Non</div>
</div>
</>
}
</div>
:
<div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
{this.state.redcrossPressed ?
<div id="confirmation">
<div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
<div id="choice">
<div id="yes" onClick={this.deleteArticle}>Oui</div>
<div id="no" onClick={this.handleNoDelete}>Non</div>
</div>
</div>
:
<>
<div id="imageordescblock">
{this.state.currentArticle === this.props.id ?
<>
<div id="icons">
<div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
<Icon icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
</div>
<div id="redcross" onClick={this.handleRedCross}>
<Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
</div>
</div>
<div id="categoryDiv">
<img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
</div>
<div id="descandprice">
<h1 id="desc">{this.props.desc}</h1>
<p id ="price">{this.props.price} €</p>
</div>
</>
: <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
}
</div>
<h1 id="name">{this.props.name}</h1>
<div id="count">
<Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
<div id="countNumber">
<p id="countNumberTxt">{this.state.quantity}</p>
</div>
<Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
:
<>
<div id="imageordescblock">
{this.state.currentArticle === this.props.id ?
<>
<div id="icons">
<div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
<Icon id="penblue" icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
</div>
</>
}
</div>
<div id="redcross" onClick={this.handleRedCross}>
<Icon id="crossred" icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
</div>
</div>
<div id="categoryDiv">
<img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
</div>
<div id="descandprice">
<h1 id="desc">{this.props.desc}</h1>
<p id ="price">{this.props.price} €</p>
</div>
</>
: <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
}
</div>
<h1 id="name">{this.props.name}</h1>
<div id="count">
<Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
<div id="countNumber">
<p id="countNumberTxt">{this.state.quantity}</p>
</div>
<Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
</div>
</>
}
</div>
:
// NOT SELECTED
<div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
{this.state.redcrossPressed ?
<div id="confirmation">
<div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
<div id="choice">
<div id="yes" onClick={this.deleteArticle}>Oui</div>
<div id="no" onClick={this.handleNoDelete}>Non</div>
</div>
</div>
:
<>
<div id="imageordescblock">
{this.state.currentArticle === this.props.id ?
<>
<div id="icons">
<div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
<Icon icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
</div>
<div id="redcross" onClick={this.handleRedCross}>
<Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
</div>
</div>
<div id="categoryDiv">
<img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
</div>
<div id="descandprice">
<h1 id="desc">{this.props.desc}</h1>
<p id ="price">{this.props.price} €</p>
</div>
</>
: <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
}
</div>
<h1 id="name">{this.props.name}</h1>
<div id="count">
<Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
<div id="countNumber">
<p id="countNumberTxt">{this.state.quantity}</p>
</div>
<Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
</div>
</>
}
</div>
:
// INLINE
this.state.selected ?
// SELECTED
<div>Ok</div>
:
// NOT SELECTED
<div id="line">
<div id="imgLine">
<img id="imageLine" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
</div>
<div id="nameLine">
{this.props.name}
</div>
<div id="priceLine">
{this.props.price} €
</div>
<div id="quantityLine">
<div id="quantityLineBox">
{this.props.quantity}
</div>
</div>
</div>
)
}

2
src/js/Components/Articles.js
View file

@ -21,7 +21,7 @@ class Articles extends React.Component {
<div id="articles">
{
this.props.articles.map((article) =>
<ArticleDetails deselect={this.props.deselect} select={this.props.select} handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
<ArticleDetails squaredBubble={true} deselect={this.props.deselect} select={this.props.select} handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
)}
</div>
</div>

3
src/js/Components/ArticlesByCategory.js
View file

@ -6,7 +6,6 @@ class ArticlesByCategory extends React.Component {
constructor(props){
super(props)
this.state = {
mouseEnter:false,
articles:this.props.articles
}
}
@ -51,7 +50,7 @@ class ArticlesByCategory extends React.Component {
<div id="underlinment"></div>
<div id="bulles">
{divided.map((article) =>
<ArticleDetails handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
<ArticleDetails squaredBubble={true} handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
)}
</div>
</div>

2
src/js/Components/Footer.js
View file

@ -61,7 +61,7 @@ class Footer extends React.Component {
</div> : null }
</>
: <div onClick={this.handleDisplayMeans} id="contact">Contacter le développeur</div>
: <div onClick={this.handleDisplayMeans} id="contact">Contacter les développeurs</div>
}
</div>
<div id="copyright">Copyright © {date.getFullYear()} Baptiste MARTY & Florian EHR. Tous droits réservés</div>

92
src/js/Views/Ticket.js
View file

@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
import SearchBar from '../Components/SearchBar';
import BarcodeReader from 'react-barcode-reader';
import axios from 'axios';
import ArticleDetails from '../Components/ArticleDetails';
export default class Stock extends React.Component {
@ -15,7 +16,11 @@ export default class Stock extends React.Component {
super(props)
this.state = {
articles: [],
scannedCode: ''
scannedCode: '',
articlesJamalette:[],
empty:true,
totalPrice:0,
totalQuantity:0
}
this.handleScan = this.handleScan.bind(this);
@ -39,24 +44,73 @@ export default class Stock extends React.Component {
}
// RECHERCHE DE L'ARTICLE
getArticleByCode() {
getArticleByCode(code) {
let i=0;
let current = this.state.articles[i];
let trouve = current === this.state.scannedCode ? true : false;
let trouve = current.code === code ? true : false;
while(!trouve) {
i++;
current = this.state.articles[i];
if (current.scannedCode === this.state.scannedCode) {
if (current.code === code) {
trouve = !trouve;
}
}
// current.quantity = 1
console.log(current);
if (this.state.articlesJamalette.length !== 0){
console.log("test already");
let j = 0;
let aux = this.state.articlesJamalette[j];
let already = aux.id === current.id ? true : false;
console.log(already);
while(!already && j < this.state.articlesJamalette.length-1){
console.log("in while");
j++;
aux = this.state.articlesJamalette[j];
if (aux.id === current.id) {
already = !already;
}
}
if (already){
this.state.articlesJamalette[j].quantity++;
} else {
current.quantity = 1;
this.state.articlesJamalette.push(current);
}
} else {
current.quantity = 1;
this.state.articlesJamalette.push(current);
}
console.log(this.state.articlesJamalette);
this.setState({empty:false},()=>{
this.calculateTotaux()
})
}
calculateTotaux = () => {
let sumPrice = 0;
let sumQuantity = 0;
for (let i = 0 ; i<this.state.articlesJamalette.length;i++){
sumPrice += this.state.articlesJamalette[i].price*this.state.articlesJamalette[i].quantity;
sumQuantity += this.state.articlesJamalette[i].quantity;
}
this.setState({totalPrice:sumPrice.toFixed(2),totalQuantity:sumQuantity},()=>{
console.log(this.state.totalPrice);
})
}
handleScan(code) {
this.setState({result: code}, () => {
console.log(this.state.result);
});
this.getArticleByCode(code)
}
render() {
@ -69,11 +123,31 @@ export default class Stock extends React.Component {
<Navbar redirect="/stock" left="Monnaie" right="Le Stock"/>
<BarcodeReader onScan={this.handleScan}/>
<SearchBar/>
<div id="emptyTicketBox">
{!this.state.empty ?
<div id="articlesInline">
{this.state.articlesJamalette.map((article) =>
<ArticleDetails squaredBubble={false} deselect={this.props.deselect} select={this.props.select} handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
)}
<div id="total">
<div id="totalTxt">
Total
</div>
<div id="totalPrice">
{this.state.totalPrice} €
</div>
<div id="totalQuantity">
<div id="totalQuantityBox">
{this.state.totalQuantity}
</div>
</div>
</div>
</div>
:<div id="emptyTicketBox">
<p id="emptyTicket">
Scanne tes articles pour remplir le ticket de caisse !
</p>
</div>
</div> }
<Footer/>
</div>
)}