Browse Source

Use v2 stock list in proximo and display information in modal on click

keplyx 2 years ago
parent
commit
5019377645
4 changed files with 83 additions and 18 deletions
  1. 22
    0
      package-lock.json
  2. 2
    0
      package.json
  3. 55
    6
      screens/Proximo/ProximoListScreen.js
  4. 4
    12
      screens/Proximo/ProximoMainScreen.js

+ 22
- 0
package-lock.json View File

@@ -6104,6 +6104,14 @@
6104 6104
         }
6105 6105
       }
6106 6106
     },
6107
+    "react-native-animatable": {
6108
+      "version": "1.3.2",
6109
+      "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.2.tgz",
6110
+      "integrity": "sha512-rmah3KQ63ft8DxkzFUwJSuZeq+oSYwldoGF4DTOR5WM2WR5wiWLgBAtrAHlI3Di3by323uOR21s+MlqPcHz2Kw==",
6111
+      "requires": {
6112
+        "prop-types": "^15.5.10"
6113
+      }
6114
+    },
6107 6115
     "react-native-app-intro-slider": {
6108 6116
       "version": "3.0.0",
6109 6117
       "resolved": "https://registry.npmjs.org/react-native-app-intro-slider/-/react-native-app-intro-slider-3.0.0.tgz",
@@ -6178,6 +6186,20 @@
6178 6186
         "prop-types": "^15.6.0"
6179 6187
       }
6180 6188
     },
6189
+    "react-native-modal": {
6190
+      "version": "11.3.1",
6191
+      "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-11.3.1.tgz",
6192
+      "integrity": "sha512-3rRuXwvObknVijVNS8iamjMXWLjlb9xK90o+WtEcJ3C7HKuR2SOH578SoltIC6ZmVjO3vZwOApGVdSfR3LtPQg==",
6193
+      "requires": {
6194
+        "prop-types": "^15.6.2",
6195
+        "react-native-animatable": "^1.3.1"
6196
+      }
6197
+    },
6198
+    "react-native-modalize": {
6199
+      "version": "1.2.1",
6200
+      "resolved": "https://registry.npmjs.org/react-native-modalize/-/react-native-modalize-1.2.1.tgz",
6201
+      "integrity": "sha512-j3+uJB0UtlSeQbwDZ+DEcvyUYN4vfZt4bczwPdG2NAoMbePSNV4iWcD6co0UonDuHZAcD0G9xZU6PU/wSGjGRQ=="
6202
+    },
6181 6203
     "react-native-paper": {
6182 6204
       "version": "2.16.0",
6183 6205
       "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-2.16.0.tgz",

+ 2
- 0
package.json View File

@@ -23,6 +23,8 @@
23 23
     "react-native": "^0.59.9",
24 24
     "react-native-app-intro-slider": "^3.0.0",
25 25
     "react-native-autolink": "^1.8.1",
26
+    "react-native-modal": "^11.3.1",
27
+    "react-native-modalize": "^1.2.1",
26 28
     "react-native-paper": "^2.16.0",
27 29
     "react-native-platform-touchable": "^1.1.1",
28 30
     "react-native-side-menu": "^1.1.3",

+ 55
- 6
screens/Proximo/ProximoListScreen.js View File

@@ -1,14 +1,15 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
4
+import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail, H1, H3} from 'native-base';
5 5
 import CustomHeader from "../../components/CustomHeader";
6
-import {FlatList, Platform} from "react-native";
6
+import {FlatList, Platform, View, Image} from "react-native";
7 7
 import Touchable from 'react-native-platform-touchable';
8 8
 import Menu, {MenuItem} from 'react-native-material-menu';
9 9
 import i18n from "i18n-js";
10 10
 import CustomMaterialIcon from "../../components/CustomMaterialIcon";
11 11
 import ThemeManager from "../../utils/ThemeManager";
12
+import Modalize from 'react-native-modalize';
12 13
 
13 14
 const sortMode = {
14 15
     price: "0",
@@ -49,6 +50,7 @@ type State = {
49 50
     isSortReversed: boolean,
50 51
     sortPriceIcon: React.Node,
51 52
     sortNameIcon: React.Node,
53
+    modalCurrentDisplayItem: Object,
52 54
 };
53 55
 
54 56
 /**
@@ -56,12 +58,15 @@ type State = {
56 58
  */
57 59
 export default class ProximoListScreen extends React.Component<Props, State> {
58 60
 
61
+    modalRef = React.createRef();
62
+
59 63
     state = {
60 64
         navData: this.props.navigation.getParam('data', []).sort(sortPrice),
61 65
         currentSortMode: sortMode.price,
62 66
         isSortReversed: false,
63 67
         sortPriceIcon: '',
64 68
         sortNameIcon: '',
69
+        modalCurrentDisplayItem: {}
65 70
     };
66 71
 
67 72
     _menu: Menu;
@@ -182,13 +187,57 @@ export default class ProximoListScreen extends React.Component<Props, State> {
182 187
         }
183 188
     }
184 189
 
190
+    getModalContent() {
191
+        return (
192
+            <View style={{
193
+                flex: 1,
194
+                padding: 20
195
+            }}>
196
+                <H1>{this.state.modalCurrentDisplayItem.name}</H1>
197
+                <View style={{
198
+                    flexDirection: 'row',
199
+                    width: '100%',
200
+                    marginTop: 10,
201
+                }}>
202
+                    <H3 style={{
203
+                        color: this.getStockColor(parseInt(this.state.modalCurrentDisplayItem.quantity)),
204
+                    }}>
205
+                        {this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')}
206
+                    </H3>
207
+                    <H3 style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</H3>
208
+                </View>
209
+
210
+                <Content>
211
+                    <View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
212
+                        <Image style={{flex: 1, resizeMode: "contain"}}
213
+                               source={{uri: this.state.modalCurrentDisplayItem.image}}/>
214
+                    </View>
215
+                    <Text>{this.state.modalCurrentDisplayItem.description}</Text>
216
+                </Content>
217
+            </View>
218
+        );
219
+    }
220
+
221
+    showItemDetails(item: Object) {
222
+        this.setState({
223
+            modalCurrentDisplayItem: item
224
+        });
225
+        if (this.modalRef.current) {
226
+            this.modalRef.current.open();
227
+        }
228
+    }
185 229
     render() {
186 230
         const nav = this.props.navigation;
187
-        const navType = nav.getParam('type', 'Empty');
231
+        const navType = nav.getParam('type', '{name: "Error"}');
188 232
 
189 233
         return (
190 234
             <Container>
191
-                <CustomHeader hasBackButton={true} navigation={nav} title={navType} rightButton={
235
+                <Modalize ref={this.modalRef}
236
+                          adjustToContentHeight
237
+                          modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
238
+                    {this.getModalContent()}
239
+                </Modalize>
240
+                <CustomHeader hasBackButton={true} navigation={nav} title={navType.name} rightButton={
192 241
                     <Menu
193 242
                         ref={this.setMenuRef}
194 243
                         button={
@@ -220,13 +269,13 @@ export default class ProximoListScreen extends React.Component<Props, State> {
220 269
                     <FlatList
221 270
                         data={this.state.navData}
222 271
                         extraData={this.state.navData}
223
-                        keyExtractor={(item, index) => item.name}
272
+                        keyExtractor={(item) => item.name}
224 273
                         style={{minHeight: 300, width: '100%'}}
225 274
                         renderItem={({item}) =>
226 275
                             <ListItem
227 276
                                 thumbnail
228 277
                                 onPress={() => {
229
-                                    console.log(item.image)
278
+                                    this.showItemDetails(item);
230 279
                                 }}
231 280
                             >
232 281
                                 <Left>

+ 4
- 12
screens/Proximo/ProximoMainScreen.js View File

@@ -9,15 +9,7 @@ import FetchedDataSectionList from "../../components/FetchedDataSectionList";
9 9
 import ThemeManager from "../../utils/ThemeManager";
10 10
 import Touchable from "react-native-platform-touchable";
11 11
 
12
-const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~proximo/data/stock.json";
13
-
14
-const typesIcons = {
15
-    Nouveau: "alert-decagram",
16
-    Alimentaire: "food",
17
-    Boissons: "bottle-wine",
18
-    Utilitaires: "notebook",
19
-    Default: "information-outline",
20
-};
12
+const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
21 13
 
22 14
 
23 15
 /**
@@ -71,7 +63,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
71 63
                     data: []
72 64
                 });
73 65
                 for (let k = 0; k < articles.length; k++) {
74
-                    if (articles[k]['type'].includes(types[i])) {
66
+                    if (articles[k]['type'].includes(types[i].id)) {
75 67
                         finalData[i].data.push(articles[k]);
76 68
                     }
77 69
                 }
@@ -104,13 +96,13 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
104 96
                 >
105 97
                     <Left>
106 98
                         <CustomMaterialIcon
107
-                            icon={typesIcons[item.type] ? typesIcons[item.type] : typesIcons.Default}
99
+                            icon={item.type.icon}
108 100
                             fontSize={30}
109 101
                         />
110 102
                     </Left>
111 103
                     <Body>
112 104
                         <Text>
113
-                            {item.type}
105
+                            {item.type.name}
114 106
                         </Text>
115 107
                         <Badge><Text>
116 108
                             {item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}

Loading…
Cancel
Save