Browse Source

Ticket de Caisse fonctionnel

Kongzibapt 3 years ago
parent
commit
21d5ac5d2f

+ 66
- 0
src/css/Components/articledetails.css View File

@@ -10,6 +10,19 @@
10 10
     flex-direction: column;
11 11
 }
12 12
 
13
+#line{
14
+    background-color: rgba(105, 105, 105, 0.28);
15
+    border-radius: 50px;
16
+    width:800px;
17
+    height:80px;
18
+    margin-top:30px;
19
+    margin-right:15px;
20
+    margin-left:15px;
21
+    display:flex;
22
+    flex-direction: row;
23
+    font-family: 'Wellfleet', cursive;
24
+}
25
+
13 26
 #bulleSelect{
14 27
     background-color: rgba(255, 255, 255, 0.719);
15 28
     border-radius: 30px;
@@ -20,6 +33,8 @@
20 33
     margin-left:15px;
21 34
     display:flex;
22 35
     flex-direction: column;
36
+    justify-content: center;
37
+    align-items: center;
23 38
 }
24 39
 
25 40
     #imageordescblock{
@@ -31,6 +46,52 @@
31 46
         align-items: center;
32 47
     }
33 48
 
49
+    #imgLine{
50
+        display:flex;
51
+        flex:1;
52
+        justify-content: center;
53
+        align-items: center;
54
+    }
55
+
56
+    #nameLine{
57
+        display:flex;
58
+        flex:2;
59
+        justify-content: left;
60
+        align-items: center;
61
+        color:white;
62
+        font-size:30px;
63
+    }
64
+
65
+    #priceLine{
66
+        display:flex;
67
+        flex:3;
68
+        justify-content: center;
69
+        align-items: center;
70
+        color:#057B26;
71
+        font-size:30px;
72
+    }
73
+
74
+    #quantityLine{
75
+        display:flex;
76
+        flex:1.8;
77
+        justify-content: center;
78
+        align-items: center;
79
+    }
80
+
81
+    #quantityLineBox{
82
+            background-color: white;
83
+            border-radius: 10px;
84
+            margin-left:15px;
85
+            margin-right:15px;
86
+            padding-left:5%;
87
+            padding-right:5%;
88
+            padding-top:1%;
89
+            padding-bottom:1%;
90
+            font-size:25px;
91
+            color:black;
92
+    }
93
+    
94
+
34 95
         #icons{
35 96
             flex:1;
36 97
             display:flex;
@@ -106,6 +167,11 @@
106 167
             
107 168
         }
108 169
 
170
+        #imageLine{
171
+            height:60px;
172
+            width:auto;
173
+        }
174
+
109 175
     #name{
110 176
             color:white;
111 177
             font-size:17.4px;

+ 62
- 0
src/css/Views/ticket.css View File

@@ -11,4 +11,66 @@
11 11
     font-family: 'Wellfleet', cursive;
12 12
     font-size:max(2.5vw,30px);
13 13
     width:25%;
14
+}
15
+
16
+#articlesInline{
17
+    min-height:50vh;
18
+    display:flex;
19
+    flex-direction: column;
20
+    justify-content: center;
21
+    align-items: center;
22
+}
23
+
24
+#total{
25
+    margin-top:3vh;
26
+    display:flex;
27
+    flex-direction:row;
28
+    width:800px;
29
+    justify-content: center;
30
+    align-items: center;
31
+}
32
+
33
+#totalTxt{
34
+    display:flex;
35
+    justify-content: left;
36
+    align-items: center;
37
+    flex:3;
38
+    font-family: 'Wellfleet', cursive;
39
+    font-size:max(3vw,30px);
40
+    color:white;
41
+    padding-left:50px
42
+}
43
+
44
+#totalPrice{
45
+    display:flex;
46
+    justify-content: center;
47
+    align-items: center;
48
+    flex:3;
49
+    font-family: 'Wellfleet', cursive;
50
+    font-size:max(3vw,30px);
51
+    color:#057B26;
52
+}
53
+
54
+#totalQuantity{
55
+    display:flex;
56
+    justify-content: center;
57
+    align-items: center;
58
+    flex:2;
59
+    display:flex;
60
+    justify-content: center;
61
+    align-items: center;
62
+}
63
+
64
+#totalQuantityBox{
65
+        font-family: 'Wellfleet', cursive;
66
+        background-color: white;
67
+        border-radius: 15px;
68
+        margin-left:15px;
69
+        margin-right:15px;
70
+        padding-left:6%;
71
+        padding-right:6%;
72
+        padding-top:1%;
73
+        padding-bottom:1%;
74
+        font-size:35px;
75
+        color:black;
14 76
 }

+ 121
- 79
src/js/Components/ArticleDetails.js View File

@@ -101,96 +101,138 @@ class ArticleDetails extends React.Component {
101 101
             return (<Redirect to='/stock'/>)
102 102
         }
103 103
         return(
104
+        this.props.squaredBubble ?
105
+
106
+            // SQUARE
107
+
104 108
             this.state.selected ?
105
-            <div onClick={this.selectArticles} id="bulleSelect" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
106
-            {this.state.redcrossPressed ?
107
-            <div id="confirmation">
108
-                <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
109
-                <div id="choice">
110
-                    <div id="yes" onClick={this.deleteArticle}>Oui</div>
111
-                    <div id="no" onClick={this.handleNoDelete}>Non</div>
109
+
110
+                // SELECTED
111
+
112
+                <div onClick={this.selectArticles} id="bulleSelect" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
113
+                {this.state.redcrossPressed ?
114
+                <div id="confirmation">
115
+                    <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
116
+                    <div id="choice">
117
+                        <div id="yes" onClick={this.deleteArticle}>Oui</div>
118
+                        <div id="no" onClick={this.handleNoDelete}>Non</div>
119
+                    </div>
120
+                </div> 
121
+                : 
122
+                <>
123
+                <div id="imageordescblock">
124
+                {this.state.currentArticle === this.props.id ? 
125
+                <>
126
+                <div id="icons">
127
+                    <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
128
+                        <Icon id="penblue" icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
129
+                    </div>
130
+                    <div id="redcross" onClick={this.handleRedCross}>
131
+                        <Icon id="crossred" icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
132
+                    </div>
112 133
                 </div>
113
-            </div> 
114
-            : 
115
-            <>
116
-            <div id="imageordescblock">
117
-            {this.state.currentArticle === this.props.id ? 
118
-            <>
119
-            <div id="icons">
120
-                <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
121
-                    <Icon id="penblue" icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
134
+                <div id="categoryDiv">
135
+                    <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}`}/>
122 136
                 </div>
123
-                <div id="redcross" onClick={this.handleRedCross}>
124
-                    <Icon id="crossred" icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
137
+                <div id="descandprice">
138
+                    <h1 id="desc">{this.props.desc}</h1>
139
+                    <p id ="price">{this.props.price} €</p>
125 140
                 </div>
126
-            </div>
127
-            <div id="categoryDiv">
128
-                <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}`}/>
129
-            </div>
130
-            <div id="descandprice">
131
-                <h1 id="desc">{this.props.desc}</h1>
132
-                <p id ="price">{this.props.price} €</p>
133
-            </div>
134
-            </>
135
-            : <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
136
-            }
137
-            </div>
138
-                    <h1 id="name">{this.props.name}</h1>
139
-                    <div id="count">
140
-                        <Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
141
-                        <div id="countNumber">
142
-                            <p id="countNumberTxt">{this.state.quantity}</p>
141
+                </>
142
+                : <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
143
+                }
144
+                </div>
145
+                        <h1 id="name">{this.props.name}</h1>
146
+                        <div id="count">
147
+                            <Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
148
+                            <div id="countNumber">
149
+                                <p id="countNumberTxt">{this.state.quantity}</p>
150
+                            </div>
151
+                            <Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
143 152
                         </div>
144
-                        <Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
145
-                    </div>
146
-            </>        
147
-            }
148
-            </div>
149
-            : 
150
-            <div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
151
-            {this.state.redcrossPressed ?
152
-            <div id="confirmation">
153
-                <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
154
-                <div id="choice">
155
-                    <div id="yes" onClick={this.deleteArticle}>Oui</div>
156
-                    <div id="no" onClick={this.handleNoDelete}>Non</div>
153
+                </>        
154
+                }
157 155
                 </div>
158
-            </div> 
156
+
159 157
             : 
160
-            <>
161
-            <div id="imageordescblock">
162
-            {this.state.currentArticle === this.props.id ? 
163
-            <>
164
-            <div id="icons">
165
-                <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
166
-                    <Icon icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
158
+
159
+                // NOT SELECTED
160
+
161
+                <div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
162
+                {this.state.redcrossPressed ?
163
+                <div id="confirmation">
164
+                    <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
165
+                    <div id="choice">
166
+                        <div id="yes" onClick={this.deleteArticle}>Oui</div>
167
+                        <div id="no" onClick={this.handleNoDelete}>Non</div>
168
+                    </div>
169
+                </div> 
170
+                : 
171
+                <>
172
+                <div id="imageordescblock">
173
+                {this.state.currentArticle === this.props.id ? 
174
+                <>
175
+                <div id="icons">
176
+                    <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
177
+                        <Icon icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
178
+                    </div>
179
+                    <div id="redcross" onClick={this.handleRedCross}>
180
+                        <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
181
+                    </div>
167 182
                 </div>
168
-                <div id="redcross" onClick={this.handleRedCross}>
169
-                    <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
183
+                <div id="categoryDiv">
184
+                    <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}`}/>
170 185
                 </div>
171
-            </div>
172
-            <div id="categoryDiv">
173
-                <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}`}/>
174
-            </div>
175
-            <div id="descandprice">
176
-                <h1 id="desc">{this.props.desc}</h1>
177
-                <p id ="price">{this.props.price} €</p>
178
-            </div>
179
-            </>
180
-            : <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
181
-            }
182
-            </div>
183
-                    <h1 id="name">{this.props.name}</h1>
184
-                    <div id="count">
185
-                        <Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
186
-                        <div id="countNumber">
187
-                            <p id="countNumberTxt">{this.state.quantity}</p>
186
+                <div id="descandprice">
187
+                    <h1 id="desc">{this.props.desc}</h1>
188
+                    <p id ="price">{this.props.price} €</p>
189
+                </div>
190
+                </>
191
+                : <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
192
+                }
193
+                </div>
194
+                        <h1 id="name">{this.props.name}</h1>
195
+                        <div id="count">
196
+                            <Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
197
+                            <div id="countNumber">
198
+                                <p id="countNumberTxt">{this.state.quantity}</p>
199
+                            </div>
200
+                            <Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
188 201
                         </div>
189
-                        <Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
202
+                </>        
203
+                }
204
+                </div>
205
+            
206
+            :
207
+
208
+            // INLINE
209
+
210
+            this.state.selected ?
211
+
212
+                // SELECTED
213
+            
214
+                <div>Ok</div>
215
+
216
+            :
217
+
218
+                // NOT SELECTED
219
+                
220
+                <div id="line">
221
+                    <div id="imgLine">
222
+                        <img id="imageLine" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
190 223
                     </div>
191
-            </>        
192
-            }
193
-            </div>
224
+                    <div id="nameLine">
225
+                        {this.props.name}
226
+                    </div>
227
+                    <div id="priceLine">
228
+                        {this.props.price} €
229
+                    </div>
230
+                    <div id="quantityLine">
231
+                        <div id="quantityLineBox">
232
+                            {this.props.quantity}
233
+                        </div>
234
+                    </div>
235
+                </div>
194 236
         )
195 237
     }
196 238
 

+ 1
- 1
src/js/Components/Articles.js View File

@@ -21,7 +21,7 @@ class Articles extends React.Component {
21 21
             <div id="articles">
22 22
               {
23 23
                 this.props.articles.map((article) => 
24
-                <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}/>    
24
+                <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}/>    
25 25
             )}
26 26
             </div>
27 27
           </div>

+ 1
- 2
src/js/Components/ArticlesByCategory.js View File

@@ -6,7 +6,6 @@ class ArticlesByCategory extends React.Component {
6 6
     constructor(props){
7 7
         super(props)
8 8
         this.state = {
9
-            mouseEnter:false,
10 9
             articles:this.props.articles
11 10
         }
12 11
     }
@@ -51,7 +50,7 @@ class ArticlesByCategory extends React.Component {
51 50
                             <div id="underlinment"></div>
52 51
                             <div id="bulles">
53 52
                                 {divided.map((article) =>
54
-                                <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}/>
53
+                                <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}/>
55 54
                                 )}
56 55
                             </div>
57 56
                         </div>

+ 1
- 1
src/js/Components/Footer.js View File

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

+ 83
- 9
src/js/Views/Ticket.js View File

@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
8 8
 import SearchBar from '../Components/SearchBar';
9 9
 import BarcodeReader from 'react-barcode-reader';
10 10
 import axios from 'axios';
11
+import ArticleDetails from '../Components/ArticleDetails';
11 12
 
12 13
 export default class Stock extends React.Component {
13 14
 
@@ -15,7 +16,11 @@ export default class Stock extends React.Component {
15 16
     super(props)
16 17
     this.state = {
17 18
       articles: [],
18
-      scannedCode: ''
19
+      scannedCode: '',
20
+      articlesJamalette:[],
21
+      empty:true,
22
+      totalPrice:0,
23
+      totalQuantity:0
19 24
     }
20 25
 
21 26
     this.handleScan = this.handleScan.bind(this);
@@ -39,24 +44,73 @@ export default class Stock extends React.Component {
39 44
   }
40 45
   
41 46
   // RECHERCHE DE L'ARTICLE
42
-  getArticleByCode() {
47
+  getArticleByCode(code) {
43 48
     let i=0;
44 49
     let current = this.state.articles[i];
45
-    let trouve = current === this.state.scannedCode ? true : false;
50
+    let trouve = current.code === code ? true : false;
46 51
     while(!trouve) {
47 52
       i++;
48 53
       current = this.state.articles[i];
49
-      if (current.scannedCode === this.state.scannedCode) {
54
+      if (current.code === code) {
50 55
         trouve = !trouve;
51 56
       }
52 57
     }
58
+    // current.quantity = 1
59
+
53 60
     console.log(current);
61
+
62
+    if (this.state.articlesJamalette.length !== 0){
63
+      console.log("test already");
64
+      let j = 0;
65
+      let aux = this.state.articlesJamalette[j];
66
+      let already = aux.id === current.id ? true : false;
67
+      console.log(already);
68
+      while(!already && j < this.state.articlesJamalette.length-1){
69
+        console.log("in while");
70
+        j++;
71
+        aux = this.state.articlesJamalette[j];
72
+        if (aux.id === current.id) {
73
+          already = !already;
74
+        }
75
+      }
76
+      
77
+      if (already){
78
+        this.state.articlesJamalette[j].quantity++;
79
+      } else {
80
+        current.quantity = 1;
81
+        this.state.articlesJamalette.push(current);
82
+      }
83
+
84
+    } else {
85
+      current.quantity = 1;
86
+      this.state.articlesJamalette.push(current);
87
+    }
88
+
89
+    console.log(this.state.articlesJamalette);
90
+    
91
+
92
+    this.setState({empty:false},()=>{
93
+      this.calculateTotaux()
94
+    })
95
+    
96
+    
97
+  }
98
+
99
+  calculateTotaux = () => {
100
+    let sumPrice = 0;
101
+    let sumQuantity = 0;
102
+    for (let i = 0 ; i<this.state.articlesJamalette.length;i++){
103
+      sumPrice += this.state.articlesJamalette[i].price*this.state.articlesJamalette[i].quantity;
104
+      sumQuantity += this.state.articlesJamalette[i].quantity;
105
+    }
106
+    this.setState({totalPrice:sumPrice.toFixed(2),totalQuantity:sumQuantity},()=>{
107
+      console.log(this.state.totalPrice);
108
+    })
109
+
54 110
   }
55 111
 
56 112
   handleScan(code) {
57
-    this.setState({result: code}, () => {
58
-      console.log(this.state.result);
59
-    });
113
+      this.getArticleByCode(code)
60 114
   }
61 115
 
62 116
   render() {
@@ -69,11 +123,31 @@ export default class Stock extends React.Component {
69 123
             <Navbar redirect="/stock" left="Monnaie" right="Le Stock"/>
70 124
             <BarcodeReader onScan={this.handleScan}/>
71 125
             <SearchBar/>
72
-            <div id="emptyTicketBox">
126
+            {!this.state.empty ?
127
+                <div id="articlesInline">
128
+                  {this.state.articlesJamalette.map((article) =>
129
+                  <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}/>    
130
+              
131
+                  )}
132
+                  <div id="total">
133
+                    <div id="totalTxt">
134
+                      Total
135
+                    </div>
136
+                    <div id="totalPrice">
137
+                      {this.state.totalPrice} €
138
+                    </div>
139
+                    <div id="totalQuantity">
140
+                      <div id="totalQuantityBox">
141
+                        {this.state.totalQuantity}  
142
+                      </div>
143
+                    </div>
144
+                  </div>
145
+                </div>
146
+            :<div id="emptyTicketBox">
73 147
               <p id="emptyTicket">
74 148
                 Scanne tes articles pour remplir le ticket de caisse ! 
75 149
               </p>
76
-            </div>
150
+            </div> }
77 151
             <Footer/>
78 152
         </div>
79 153
     )}

Loading…
Cancel
Save