From 21d5ac5d2f86ffaccbf9ad8c005d2c8537a408b2 Mon Sep 17 00:00:00 2001 From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com> Date: Mon, 8 Feb 2021 18:06:57 +0100 Subject: [PATCH] Ticket de Caisse fonctionnel --- src/css/Components/articledetails.css | 66 ++++++++ src/css/Views/ticket.css | 62 +++++++ src/js/Components/ArticleDetails.js | 216 ++++++++++++++---------- src/js/Components/Articles.js | 2 +- src/js/Components/ArticlesByCategory.js | 3 +- src/js/Components/Footer.js | 2 +- src/js/Views/Ticket.js | 92 +++++++++- 7 files changed, 343 insertions(+), 100 deletions(-) diff --git a/src/css/Components/articledetails.css b/src/css/Components/articledetails.css index 15f0947..b94184c 100644 --- a/src/css/Components/articledetails.css +++ b/src/css/Components/articledetails.css @@ -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; diff --git a/src/css/Views/ticket.css b/src/css/Views/ticket.css index 1938140..06a7cb2 100644 --- a/src/css/Views/ticket.css +++ b/src/css/Views/ticket.css @@ -11,4 +11,66 @@ font-family: 'Wellfleet', cursive; 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; } \ No newline at end of file diff --git a/src/js/Components/ArticleDetails.js b/src/js/Components/ArticleDetails.js index f2dfceb..222fe77 100644 --- a/src/js/Components/ArticleDetails.js +++ b/src/js/Components/ArticleDetails.js @@ -101,96 +101,138 @@ class ArticleDetails extends React.Component { return () } return( + this.props.squaredBubble ? + + // SQUARE + this.state.selected ? -
- {this.state.redcrossPressed ? -
-
Tu veux vraiment supprimer cet article ?
-
-
Oui
-
Non
-
-
- : - <> -
- {this.state.currentArticle === this.props.id ? - <> -
-
this.props.editArticle(this.props)}> - -
-
- -
-
-
- 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}`}/> -
-
-

{this.props.desc}

-

{this.props.price} €

-
- - : bonjour - } -
-

{this.props.name}

-
- -
-

{this.state.quantity}

-
- + + // SELECTED + +
+ {this.state.redcrossPressed ? +
+
Tu veux vraiment supprimer cet article ?
+
+
Oui
+
Non
- - } -
- : -
- {this.state.redcrossPressed ? -
-
Tu veux vraiment supprimer cet article ?
-
-
Oui
-
Non
-
-
- : - <> -
- {this.state.currentArticle === this.props.id ? - <> -
-
this.props.editArticle(this.props)}> - -
-
- -
-
-
- 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}`}/> -
-
-

{this.props.desc}

-

{this.props.price} €

-
- - : bonjour - } -
-

{this.props.name}

-
- -
-

{this.state.quantity}

-
- +
+ : + <> +
+ {this.state.currentArticle === this.props.id ? + <> +
+
this.props.editArticle(this.props)}> +
- - } -
+
+ +
+
+
+ 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}`}/> +
+
+

{this.props.desc}

+

{this.props.price} €

+
+ + : bonjour + } +
+

{this.props.name}

+
+ +
+

{this.state.quantity}

+
+ +
+ + } +
+ + : + + // NOT SELECTED + +
+ {this.state.redcrossPressed ? +
+
Tu veux vraiment supprimer cet article ?
+
+
Oui
+
Non
+
+
+ : + <> +
+ {this.state.currentArticle === this.props.id ? + <> +
+
this.props.editArticle(this.props)}> + +
+
+ +
+
+
+ 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}`}/> +
+
+

{this.props.desc}

+

{this.props.price} €

+
+ + : bonjour + } +
+

{this.props.name}

+
+ +
+

{this.state.quantity}

+
+ +
+ + } +
+ + : + + // INLINE + + this.state.selected ? + + // SELECTED + +
Ok
+ + : + + // NOT SELECTED + +
+
+ bonjour +
+
+ {this.props.name} +
+
+ {this.props.price} € +
+
+
+ {this.props.quantity} +
+
+
) } diff --git a/src/js/Components/Articles.js b/src/js/Components/Articles.js index 88215ce..f894327 100644 --- a/src/js/Components/Articles.js +++ b/src/js/Components/Articles.js @@ -21,7 +21,7 @@ class Articles extends React.Component {
{ this.props.articles.map((article) => - + )}
diff --git a/src/js/Components/ArticlesByCategory.js b/src/js/Components/ArticlesByCategory.js index c353cfa..a18ca66 100644 --- a/src/js/Components/ArticlesByCategory.js +++ b/src/js/Components/ArticlesByCategory.js @@ -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 {
{divided.map((article) => - + )}
diff --git a/src/js/Components/Footer.js b/src/js/Components/Footer.js index 084517a..e41952c 100644 --- a/src/js/Components/Footer.js +++ b/src/js/Components/Footer.js @@ -61,7 +61,7 @@ class Footer extends React.Component { : null } - :
Contacter le développeur
+ :
Contacter les développeurs
} diff --git a/src/js/Views/Ticket.js b/src/js/Views/Ticket.js index c7a513f..626d20f 100644 --- a/src/js/Views/Ticket.js +++ b/src/js/Views/Ticket.js @@ -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{ + 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 { -
+ {!this.state.empty ? +
+ {this.state.articlesJamalette.map((article) => + + + )} +
+
+ Total +
+
+ {this.state.totalPrice} € +
+
+
+ {this.state.totalQuantity} +
+
+
+
+ :

Scanne tes articles pour remplir le ticket de caisse !

-
+
}