From c1eee4227eb521888016a9d1db6f3fefb84021c6 Mon Sep 17 00:00:00 2001
From: Flo E <ehr@etud.insa-toulouse.fr>
Date: Tue, 16 Feb 2021 10:39:58 +0100
Subject: [PATCH] calcul du rendu de monnaie OK

---
 src/css/Components/money.css | 63 ++++++++++++++++++++++++++++++++++++
 src/js/Components/Money.js   | 37 +++++++++++++++++----
 src/js/Views/Ticket.js       |  2 +-
 3 files changed, 95 insertions(+), 7 deletions(-)

diff --git a/src/css/Components/money.css b/src/css/Components/money.css
index e69de29..0c60e80 100644
--- a/src/css/Components/money.css
+++ b/src/css/Components/money.css
@@ -0,0 +1,63 @@
+#back {
+    margin: 5.5% auto auto auto;
+}
+
+#warningBlock {
+    background-color: black;
+    border-radius: 20px;
+}
+
+#moneyBlock {
+    margin-top: 20vh;
+    background-color: black;
+    border-radius: 20px;
+    height: 30vh;
+    width: 40vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+    #recuBlock {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+        #textBlock {
+            font-size: 1.5vw;
+            color: white;
+        }
+
+        #inputsBlock {
+            display: flex;
+            justify-content: center;
+        }
+
+            #inputsBlock input {
+                max-width: 10vw;
+                background: rgba(84, 84, 84, 0.65);
+                border-radius:2vw;
+                padding:0.4vw 1vw 0.4vw 3.2vw;
+                font-size: 1.5vw;
+                border: 0.2vw solid black;
+                box-shadow: 0.4vw 0.8vw 0.4vw rgba(0, 0, 0, 0.82);
+                font-family: 'Wellfleet', cursive;
+            }
+
+            #inputsBlock input:focus{
+                max-width: 15vw;
+                outline:none;
+                background: rgba(84, 84, 84, 1);
+                border-radius:2vw;
+                padding:0.4vw 1vw 0.4vw 3.2vw;
+                font-size: 1.5vw;
+                border-color: white;
+                color:white
+            }
+
+    #renduBlock {
+        font-size: 1.8vw;
+        color: red;
+    }
\ No newline at end of file
diff --git a/src/js/Components/Money.js b/src/js/Components/Money.js
index fd2d8cb..6a49029 100644
--- a/src/js/Components/Money.js
+++ b/src/js/Components/Money.js
@@ -6,22 +6,35 @@ class Money extends Component {
     constructor(props){
         super(props)
         this.state = {
-          
+            renduTxt: "Rendu"
         }
        
+        this.handleMoneyChange = this.handleMoneyChange.bind(this);
     }
 
     componentDidMount() {
         
     }
 
-   
+    is
+
+    handleMoneyChange() {
+        let eurosInput = document.getElementById("euros");
+        let centsInput = document.getElementById("centimes");
+        let regex = /^[0-9]+$/; //1 ou plusieurs chiffres à la suite
+        let lengthCents = centsInput.value.length;
+        let lengthEuros = eurosInput.value.length;
+        let result = parseInt(eurosInput.value) + parseInt(centsInput.value)*10**-lengthCents;
+        if (centsInput.value.match(regex) && eurosInput.value.match(regex)) {
+            this.setState({renduTxt: (this.props.totalPrice - result).toPrecision(lengthEuros + lengthCents)});
+        }
+    }
 
     render() {
        
         return (
             <div id="transp">
-                <div id="formBody">
+                <div id="back">
                     {this.props.empty ? 
                     <div id="warningBlock">
                         <div id="warningBox">
@@ -35,10 +48,22 @@ class Money extends Component {
                         </div>
                     </div>
                     :
-                        // A faire : input pour rentrer la somme en espèce + Affichage de la différence avec le prix
+                    // A faire : input pour rentrer la somme en espèce + Affichage de la différence avec le prix
+                    <div id="moneyBlock">
+                        <div id="recuBlock">
+                            <div id="textBlock">
+                                Monnaie Reçue :
+                            </div>
+                            <div id="inputsBlock">
+                                <input id="euros" placeholder='€' onChange={this.handleMoneyChange}/>
+                                <input id="centimes" placeholder='cents' onChange={this.handleMoneyChange}/>
+                            </div>
+                        </div>
+                        <div id="renduBlock">
+                            <p id="renduText">{this.state.renduTxt}</p>
+                        </div>
+                    </div>
 
-                    <>
-                    </>
                     }
                 </div>
             </div>
diff --git a/src/js/Views/Ticket.js b/src/js/Views/Ticket.js
index bc7f8e5..1e58274 100644
--- a/src/js/Views/Ticket.js
+++ b/src/js/Views/Ticket.js
@@ -195,7 +195,7 @@ export default class Stock extends React.Component {
             <BarcodeReader onScan={this.handleScan}/>
             <SearchBar/>
             {this.state.onMoney &&
-              <Money empty={this.state.empty} handleCloseAbove={this.handleCloseMoney}/>
+              <Money empty={this.state.empty} handleCloseAbove={this.handleCloseMoney} totalPrice={this.state.totalPrice}/>
             }
             {this.state.onNotInBdd && 
             <NotInBdd handleCloseAbove={this.closeNotInBdd}/>