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

petit merge

Browse source
This commit is contained in:
Florian Ehr 2021-02-14 16:43:35 +01:00
commit fed2e84e4d
11 changed files with 295 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
src/css/Components/money.css Normal file
View file

36
src/css/Components/notinbdd.css Normal file
View file

@ -0,0 +1,36 @@
#warningBlock{
height:40vh;
display:flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
#warningBox{
color:white;
font-family: 'Wellfleet',cursive;
font-size:2vw;
padding : 1vw 1vw 0 1vw;
text-align: center;
}
#warningAdvice{
color:rgb(65, 65, 65);;
font-family: 'Wellfleet',cursive;
font-size:2vw
}
#returningButton{
font-family: 'Wellfleet', cursive;
display:block;
color:white;
font-size:2vw;
background-image:linear-gradient(#057B26,#044616);
border: 0.3vw solid black;
border-radius: 2.2vw;
padding:0.7vw 1.5vw 0.7vw 1.5vw;
cursor:pointer;
margin: 2vh 0 2vh 0;
}

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

@ -10,7 +10,7 @@
text-align: center; text-align: center;
font-family: 'Wellfleet', cursive; font-family: 'Wellfleet', cursive;
font-size:max(2.5vw,30px); font-size:max(2.5vw,30px);
width:25%; width:35%;
} }
#articlesInline{ #articlesInline{
@ -87,7 +87,6 @@
font-family: 'Wellfleet', cursive; font-family: 'Wellfleet', cursive;
display:block; display:block;
color:white; color:white;
font-family: 'Wellfleet', cursive;
font-size:2vw; font-size:2vw;
background-image:linear-gradient(#057B26,#044616); background-image:linear-gradient(#057B26,#044616);
border: 0.3vw solid black; border: 0.3vw solid black;

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

@ -21,6 +21,9 @@ class ArticleDetails extends React.Component {
} }
componentDidMount = () => {
}
handleDesc = () => { handleDesc = () => {
this.setState({currentArticle:this.props.id}) this.setState({currentArticle:this.props.id})
@ -68,31 +71,75 @@ class ArticleDetails extends React.Component {
}) })
} }
plusQuantity = () => { plusQuantity = (element) => {
this.setState({quantity:this.state.quantity+1},()=>{ this.setState({quantity:this.state.quantity+1},()=>{
this.updateArticle(); this.updateArticle();
if (this.state.quantity > 0 ){
if (this.state.selected){
this.props.colorArticle("white",element)
} else {
this.props.colorArticle("grey",element)
}
}
}) })
} }
minusQuantity = () => { minusQuantity = (element) => {
if(this.state.quantity > 0){ if(this.state.quantity > 0){
this.setState({quantity:this.state.quantity-1},()=>{ this.setState({quantity:this.state.quantity-1},()=>{
this.updateArticle(); this.updateArticle();
if (this.state.quantity === 0){
if (this.state.selected){
this.props.colorArticle("red&white",element)
} else {
this.props.colorArticle("red",element)
}
}
}) })
} }
} }
// OnClick : selon si on clique sur tel ou tel element : on va colorer en blanc et selectionner
// on va minus ou plus quantity et colorer en rouge
selectArticles = (e) => { selectArticles = (e) => {
console.log(e.target.id) let currentElement = e.target;
if ((e.target.id !== "categoryIcon") && (e.target.id !== "penblue") && (e.target.id !== "crossred") && (e.target.id !== "") && (e.target.id !== "bluepen") && (e.target.id !== "redcross") && (e.target.id !== "no")){ let iconElement;
if (e.target.tagName === "path"){
currentElement = e.target.parentElement
iconElement = currentElement
}
if ((e.target.id === "minusIcon") || (e.target.id === "plusIcon")){
iconElement = currentElement
}
while (currentElement.id !== "bulle"){
currentElement = currentElement.parentElement
}
console.log(currentElement);
if ((e.target.id !== "categoryIcon") && (e.target.id !== "penblue") && (e.target.id !== "crossred") && (e.target.id !== "") && (e.target.id !== "bluepen") && (e.target.id !== "redcross") && (e.target.id !== "no") && (e.target.id !== "minusIcon") && (e.target.id !== "plusIcon")){
this.setState({selected:!this.state.selected},()=>{ this.setState({selected:!this.state.selected},()=>{
console.log(this.state.selected) console.log(this.state.selected)
if (this.state.selected){ if (this.state.selected){
this.props.select(this.props.id) this.props.select(this.props.id)
if (this.state.quantity === 0){
this.props.colorArticle("red&white",currentElement)
} else {
this.props.colorArticle("white",currentElement)
}
} else { } else {
this.props.deselect(this.props.id) this.props.deselect(this.props.id)
if (this.state.quantity === 0){
this.props.colorArticle("red",currentElement)
} else {
this.props.colorArticle("grey",currentElement)
}
} }
}) })
} else if (iconElement.id === "minusIcon"){
this.minusQuantity(currentElement)
} else if (iconElement.id === "plusIcon"){
this.plusQuantity(currentElement)
} }
} }
@ -105,11 +152,7 @@ class ArticleDetails extends React.Component {
// SQUARE // SQUARE
this.state.selected ? <div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
// SELECTED
<div onClick={this.selectArticles} id="bulleSelect" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
{this.state.redcrossPressed ? {this.state.redcrossPressed ?
<div id="confirmation"> <div id="confirmation">
<div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div> <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
@ -119,102 +162,45 @@ class ArticleDetails extends React.Component {
</div> </div>
</div> </div>
: :
<> <div id="bulleContainer">
<div id="imageordescblock"> <div id="imageordescblock">
{this.state.currentArticle === this.props.id ? {this.state.currentArticle === this.props.id ?
<> <>
<div id="icons"> <div id="icons">
<div id="bluepen" onClick={() => this.props.editArticle(this.props)}> <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
<Icon id="penblue" icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" /> <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> </div>
<div id="redcross" onClick={this.handleRedCross}> <h1 id="name">{this.props.name}</h1>
<Icon id="crossred" icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} /> <div id="count">
</div> <Icon id="minusIcon" icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
</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"> <div id="countNumber">
<p id="countNumberTxt">{this.state.quantity}</p> <p id="countNumberTxt">{this.state.quantity}</p>
</div> </div>
<Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} /> <Icon id="plusIcon" icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
</div> </div>
</> </div>
} }
</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 // INLINE
this.state.selected ?
// SELECTED
<div>Ok</div>
:
// NOT SELECTED // NOT SELECTED
<div id="line"> <div id="line">

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

@ -11,9 +11,34 @@ class Articles extends React.Component {
} }
componentDidMount(){ componentDidMount(){
let articles = document.getElementById("articles")
console.log(articles);
for (let i = 0; i<articles.childElementCount; i++){
if (this.props.articles[i].quantity === 0){
this.colorArticle("red",articles.children[i])
}
}
} }
colorArticle = (color,element) => {
switch (color) {
case "white":
element.style.cssText = "background-color:rgba(255, 255, 255, 0.75);"
break;
case "grey" :
element.style.cssText = "background-color:rgba(105, 105, 105, 0.28);"
break;
case "red" :
element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);"
break;
case "red&white" :
element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);"
break;
}
}
render() { render() {
return ( return (
@ -21,7 +46,7 @@ class Articles extends React.Component {
<div id="articles"> <div id="articles">
{ {
this.props.articles.map((article) => this.props.articles.map((article) =>
<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}/> <ArticleDetails colorArticle={this.colorArticle} 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>
</div> </div>

50
src/js/Components/Money.js Normal file
View file

@ -0,0 +1,50 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../../css/Components/money.css'
class Money extends Component {
constructor(props){
super(props)
this.state = {
}
}
componentDidMount() {
}
render() {
return (
<div id="transp">
<div id="formBody">
{this.props.empty ?
<div id="warningBlock">
<div id="warningBox">
Tu n'as pas encore rempli le ticket de caisse !
</div>
<div id="warningAdvice">
Scanne tes articles avec la Jamalette
</div>
<div id="returningButton" onClick={this.props.handleCloseAbove}>
Ok
</div>
</div>
:
// A faire : input pour rentrer la somme en espèce + Affichage de la différence avec le prix
<>
</>
}
</div>
</div>
);
}
}
export default Money;

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

@ -14,6 +14,9 @@ class Navbar extends React.Component {
handleDisplay = () =>{ handleDisplay = () =>{
this.setState({mouseOn:true}) this.setState({mouseOn:true})
if (this.props.handleMoney){
this.props.handleMoney()
}
} }
handleNormal = () => { handleNormal = () => {

43
src/js/Components/NotInBdd.js Normal file
View file

@ -0,0 +1,43 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../../css/Components/notinbdd.css'
class NotInBdd extends Component {
constructor(props){
super(props)
this.state = {
}
}
componentDidMount() {
}
render() {
return (
<div id="transp">
<div id="formBody">
<div id="warningBlock">
<div id="warningBox">
Cette article n'est pas dans le stock !
</div>
<div id="warningAdvice">
Ajoute le depuis la page <Link id="link" to='/stock'>Stock</Link> !
</div>
<div id="returningButton" onClick={this.props.handleCloseAbove}>
Ok
</div>
</div>
</div>
</div>
);
}
}
export default NotInBdd;

4
src/js/Components/Sort.js
View file

@ -15,7 +15,6 @@ class Sort extends Component {
} }
changeArrowDirection = () => { changeArrowDirection = () => {
console.log('ok');
this.setState({unwound:!this.state.unwound}) this.setState({unwound:!this.state.unwound})
} }
@ -83,6 +82,9 @@ class Sort extends Component {
} }
render() { render() {
// console.log(this.state.orderText)
// console.log(this.state.orderText.split(""))
// console.log(document.getElementById("sortOrder"))
return ( return (
<div id="sortBox"> <div id="sortBox">
<div id="sortTxt"> <div id="sortTxt">

3
src/js/Views/Stock.js
View file

@ -205,7 +205,6 @@ export default class Stock extends React.Component {
//ATTENTION ça a changé, on passe directement le string en argument (j'avais besoin d'utiliser cette fonction autrement, voir dans Sort.js) //ATTENTION ça a changé, on passe directement le string en argument (j'avais besoin d'utiliser cette fonction autrement, voir dans Sort.js)
handleChangeSortType = (type) => { handleChangeSortType = (type) => {
console.log(type)
this.setState({sortType: type}, () => { this.setState({sortType: type}, () => {
this.sortArticles(this.state.sortType) this.sortArticles(this.state.sortType)
}) })
@ -214,7 +213,6 @@ export default class Stock extends React.Component {
//Gère le choix de tri par ordre croissant ou décroissant quand c'est possible avec le tri actuel //Gère le choix de tri par ordre croissant ou décroissant quand c'est possible avec le tri actuel
handleChangeSortOrder = () => { handleChangeSortOrder = () => {
this.setState({lowToHigh: !this.state.lowToHigh},() => { this.setState({lowToHigh: !this.state.lowToHigh},() => {
console.log(this.state.sortType)
this.sortArticles(this.state.sortType); this.sortArticles(this.state.sortType);
}); });
} }
@ -264,7 +262,6 @@ export default class Stock extends React.Component {
render() { render() {
console.log("rendered");
if (!sessionStorage.getItem('token')){ if (!sessionStorage.getItem('token')){
return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>) return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
} else { } else {

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

@ -9,6 +9,8 @@ import BarcodeReader from 'react-barcode-reader';
import axios from 'axios'; import axios from 'axios';
import ArticleDetails from '../Components/ArticleDetails'; import ArticleDetails from '../Components/ArticleDetails';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import NotInBdd from '../Components/NotInBdd';
import Money from '../Components/Money';
export default class Stock extends React.Component { export default class Stock extends React.Component {
@ -21,7 +23,8 @@ export default class Stock extends React.Component {
empty:true, empty:true,
totalPrice:0, totalPrice:0,
totalQuantity:0, totalQuantity:0,
redirect:false redirect:false,
onNotInBdd:false
} }
this.handleScan = this.handleScan.bind(this); this.handleScan = this.handleScan.bind(this);
@ -49,14 +52,18 @@ export default class Stock extends React.Component {
let i=0; let i=0;
let current = this.state.articles[i]; let current = this.state.articles[i];
let trouve = current.code === code ? true : false; let trouve = current.code === code ? true : false;
while(!trouve) { while(!trouve && i < this.state.articles.length-1) {
i++; i++;
current = this.state.articles[i]; current = this.state.articles[i];
if (current.code === code) { if (current.code === code) {
trouve = !trouve; trouve = !trouve;
} }
} }
// current.quantity = 1
// Gestion d'erreur si le code n'est pas dans la BDD
if (!trouve){
this.setState({onNotInBdd:true})
} else {
console.log(current); console.log(current);
@ -96,7 +103,7 @@ export default class Stock extends React.Component {
this.calculateTotaux() this.calculateTotaux()
}) })
}
} }
calculateTotaux = () => { calculateTotaux = () => {
@ -116,6 +123,24 @@ export default class Stock extends React.Component {
this.getArticleByCode(code) this.getArticleByCode(code)
} }
colorArticle = (color,element) => {
switch (color) {
case "white":
element.style.cssText = "background-color:rgba(255, 255, 255, 0.75);"
break;
case "grey" :
element.style.cssText = "background-color:rgba(105, 105, 105, 0.28);"
break;
case "red" :
element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);"
break;
case "red&white" :
element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);"
break;
}
}
handleValidation = () => { handleValidation = () => {
for (let i = 0 ; i < this.state.articlesJamalette.length ; i++) { for (let i = 0 ; i < this.state.articlesJamalette.length ; i++) {
@ -141,6 +166,20 @@ export default class Stock extends React.Component {
} }
} }
closeNotInBdd = () => {
this.setState({onNotInBdd:false})
}
handleMoney = () => {
this.setState({onMoney:true})
}
handleCloseMoney = () => {
this.setState({onMoney:false})
}
render() { render() {
if (!sessionStorage.getItem('token')){ if (!sessionStorage.getItem('token')){
return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>) return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
@ -148,9 +187,15 @@ export default class Stock extends React.Component {
return ( return (
<div id="stock"> <div id="stock">
<Header title='Le Ticket de Caisse'/> <Header title='Le Ticket de Caisse'/>
<Navbar redirect="/stock" left="Monnaie" right="Le Stock"/> <Navbar redirect="/stock" left="Monnaie" right="Le Stock" handleMoney={this.handleMoney}/>
<BarcodeReader onScan={this.handleScan}/> <BarcodeReader onScan={this.handleScan}/>
<SearchBar/> <SearchBar/>
{this.state.onMoney &&
<Money empty={this.state.empty} handleCloseAbove={this.handleCloseMoney}/>
}
{this.state.onNotInBdd &&
<NotInBdd handleCloseAbove={this.closeNotInBdd}/>
}
{!this.state.empty ? {!this.state.empty ?
<div id="articlesInline"> <div id="articlesInline">
{this.state.articlesJamalette.map((article) => {this.state.articlesJamalette.map((article) =>
@ -177,7 +222,7 @@ export default class Stock extends React.Component {
</div> </div>
:<div id="emptyTicketBox"> :<div id="emptyTicketBox">
<p id="emptyTicket"> <p id="emptyTicket">
Scanne tes articles pour remplir le ticket de caisse ! Scanne tes articles avec la Jamalette pour remplir le ticket de caisse !
</p> </p>
</div> } </div> }
<Footer/> <Footer/>