add color
This commit is contained in:
Kongzibapt
parent
be3b7b8230
commit
7b8f9c68d0
4 changed files with 111 additions and 104 deletions
|
|
@ -21,6 +21,9 @@ class ArticleDetails extends React.Component {
|
|||
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
}
|
||||
|
||||
handleDesc = () => {
|
||||
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.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){
|
||||
this.setState({quantity:this.state.quantity-1},()=>{
|
||||
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) => {
|
||||
console.log(e.target.id)
|
||||
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 currentElement = e.target;
|
||||
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},()=>{
|
||||
console.log(this.state.selected)
|
||||
if (this.state.selected){
|
||||
this.props.select(this.props.id)
|
||||
if (this.state.quantity === 0){
|
||||
this.props.colorArticle("red&white",currentElement)
|
||||
} else {
|
||||
this.props.colorArticle("white",currentElement)
|
||||
}
|
||||
} else {
|
||||
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
|
||||
|
||||
this.state.selected ?
|
||||
|
||||
// SELECTED
|
||||
|
||||
<div onClick={this.selectArticles} id="bulleSelect" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
|
||||
<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>
|
||||
|
|
@ -119,102 +162,45 @@ class ArticleDetails extends React.Component {
|
|||
</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 id="bulleContainer">
|
||||
<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>
|
||||
<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'}} />
|
||||
<h1 id="name">{this.props.name}</h1>
|
||||
<div id="count">
|
||||
<Icon id="minusIcon" 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'}} />
|
||||
<Icon id="plusIcon" icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
|
||||
</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>
|
||||
</div>
|
||||
|
||||
:
|
||||
|
||||
// INLINE
|
||||
|
||||
this.state.selected ?
|
||||
|
||||
// SELECTED
|
||||
|
||||
<div>Ok</div>
|
||||
|
||||
:
|
||||
|
||||
// NOT SELECTED
|
||||
|
||||
<div id="line">
|
||||
|
|
|
|||
|
|
@ -11,9 +11,34 @@ class Articles extends React.Component {
|
|||
}
|
||||
|
||||
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() {
|
||||
return (
|
||||
|
|
@ -21,7 +46,7 @@ class Articles extends React.Component {
|
|||
<div id="articles">
|
||||
{
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ class Sort extends Component {
|
|||
}
|
||||
|
||||
changeArrowDirection = () => {
|
||||
console.log('ok');
|
||||
this.setState({unwound:!this.state.unwound})
|
||||
}
|
||||
|
||||
|
|
@ -62,9 +61,9 @@ class Sort extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
console.log(this.state.orderText)
|
||||
console.log(this.state.orderText.split(""))
|
||||
console.log(document.getElementById("sortOrder"))
|
||||
// console.log(this.state.orderText)
|
||||
// console.log(this.state.orderText.split(""))
|
||||
// console.log(document.getElementById("sortOrder"))
|
||||
return (
|
||||
<div id="sortBox">
|
||||
<div id="sortTxt">
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
handleChangeSortType = (type) => {
|
||||
console.log(type)
|
||||
this.setState({sortType: type}, () => {
|
||||
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
|
||||
handleChangeSortOrder = e => {
|
||||
this.setState({lowToHigh: !this.state.lowToHigh},() => {
|
||||
console.log(this.state.sortType)
|
||||
this.sortArticles(this.state.sortType);
|
||||
});
|
||||
}
|
||||
|
|
@ -264,7 +262,6 @@ export default class Stock extends React.Component {
|
|||
|
||||
|
||||
render() {
|
||||
console.log("rendered");
|
||||
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>)
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Reference in a new issue