From 50193776459c5c6410ef0eeb2702b1c6425a3ad4 Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 12 Sep 2019 12:01:01 +0200 Subject: [PATCH] Use v2 stock list in proximo and display information in modal on click --- package-lock.json | 22 ++++++++++ package.json | 2 + screens/Proximo/ProximoListScreen.js | 61 +++++++++++++++++++++++++--- screens/Proximo/ProximoMainScreen.js | 16 ++------ 4 files changed, 83 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index d282018..1b5c1e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6104,6 +6104,14 @@ } } }, + "react-native-animatable": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.2.tgz", + "integrity": "sha512-rmah3KQ63ft8DxkzFUwJSuZeq+oSYwldoGF4DTOR5WM2WR5wiWLgBAtrAHlI3Di3by323uOR21s+MlqPcHz2Kw==", + "requires": { + "prop-types": "^15.5.10" + } + }, "react-native-app-intro-slider": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/react-native-app-intro-slider/-/react-native-app-intro-slider-3.0.0.tgz", @@ -6178,6 +6186,20 @@ "prop-types": "^15.6.0" } }, + "react-native-modal": { + "version": "11.3.1", + "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-11.3.1.tgz", + "integrity": "sha512-3rRuXwvObknVijVNS8iamjMXWLjlb9xK90o+WtEcJ3C7HKuR2SOH578SoltIC6ZmVjO3vZwOApGVdSfR3LtPQg==", + "requires": { + "prop-types": "^15.6.2", + "react-native-animatable": "^1.3.1" + } + }, + "react-native-modalize": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/react-native-modalize/-/react-native-modalize-1.2.1.tgz", + "integrity": "sha512-j3+uJB0UtlSeQbwDZ+DEcvyUYN4vfZt4bczwPdG2NAoMbePSNV4iWcD6co0UonDuHZAcD0G9xZU6PU/wSGjGRQ==" + }, "react-native-paper": { "version": "2.16.0", "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-2.16.0.tgz", diff --git a/package.json b/package.json index 07c125d..d7b7f4b 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,8 @@ "react-native": "^0.59.9", "react-native-app-intro-slider": "^3.0.0", "react-native-autolink": "^1.8.1", + "react-native-modal": "^11.3.1", + "react-native-modalize": "^1.2.1", "react-native-paper": "^2.16.0", "react-native-platform-touchable": "^1.1.1", "react-native-side-menu": "^1.1.3", diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 61f5299..816d30b 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -1,14 +1,15 @@ // @flow import * as React from 'react'; -import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail} from 'native-base'; +import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail, H1, H3} from 'native-base'; import CustomHeader from "../../components/CustomHeader"; -import {FlatList, Platform} from "react-native"; +import {FlatList, Platform, View, Image} from "react-native"; import Touchable from 'react-native-platform-touchable'; import Menu, {MenuItem} from 'react-native-material-menu'; import i18n from "i18n-js"; import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import ThemeManager from "../../utils/ThemeManager"; +import Modalize from 'react-native-modalize'; const sortMode = { price: "0", @@ -49,6 +50,7 @@ type State = { isSortReversed: boolean, sortPriceIcon: React.Node, sortNameIcon: React.Node, + modalCurrentDisplayItem: Object, }; /** @@ -56,12 +58,15 @@ type State = { */ export default class ProximoListScreen extends React.Component { + modalRef = React.createRef(); + state = { navData: this.props.navigation.getParam('data', []).sort(sortPrice), currentSortMode: sortMode.price, isSortReversed: false, sortPriceIcon: '', sortNameIcon: '', + modalCurrentDisplayItem: {} }; _menu: Menu; @@ -182,13 +187,57 @@ export default class ProximoListScreen extends React.Component { } } + getModalContent() { + return ( + +

{this.state.modalCurrentDisplayItem.name}

+ +

+ {this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')} +

+

{this.state.modalCurrentDisplayItem.price}€

+ + + + + + + {this.state.modalCurrentDisplayItem.description} + + + ); + } + + showItemDetails(item: Object) { + this.setState({ + modalCurrentDisplayItem: item + }); + if (this.modalRef.current) { + this.modalRef.current.open(); + } + } render() { const nav = this.props.navigation; - const navType = nav.getParam('type', 'Empty'); + const navType = nav.getParam('type', '{name: "Error"}'); return ( - + {this.getModalContent()} + + { item.name} + keyExtractor={(item) => item.name} style={{minHeight: 300, width: '100%'}} renderItem={({item}) => { - console.log(item.image) + this.showItemDetails(item); }} > diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index 178a87a..5ce2f07 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -9,15 +9,7 @@ import FetchedDataSectionList from "../../components/FetchedDataSectionList"; import ThemeManager from "../../utils/ThemeManager"; import Touchable from "react-native-platform-touchable"; -const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~proximo/data/stock.json"; - -const typesIcons = { - Nouveau: "alert-decagram", - Alimentaire: "food", - Boissons: "bottle-wine", - Utilitaires: "notebook", - Default: "information-outline", -}; +const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~proximo/data/stock-v2.json"; /** @@ -71,7 +63,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList { data: [] }); for (let k = 0; k < articles.length; k++) { - if (articles[k]['type'].includes(types[i])) { + if (articles[k]['type'].includes(types[i].id)) { finalData[i].data.push(articles[k]); } } @@ -104,13 +96,13 @@ export default class ProximoMainScreen extends FetchedDataSectionList { > - {item.type} + {item.type.name} {item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}