Use v2 stock list in proximo and display information in modal on click
This commit is contained in:
keplyx
parent
01a55c8b89
commit
5019377645
4 changed files with 83 additions and 18 deletions
22
package-lock.json
generated
22
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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<Props, State> {
|
||||
|
||||
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<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
getModalContent() {
|
||||
return (
|
||||
<View style={{
|
||||
flex: 1,
|
||||
padding: 20
|
||||
}}>
|
||||
<H1>{this.state.modalCurrentDisplayItem.name}</H1>
|
||||
<View style={{
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
marginTop: 10,
|
||||
}}>
|
||||
<H3 style={{
|
||||
color: this.getStockColor(parseInt(this.state.modalCurrentDisplayItem.quantity)),
|
||||
}}>
|
||||
{this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')}
|
||||
</H3>
|
||||
<H3 style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</H3>
|
||||
</View>
|
||||
|
||||
<Content>
|
||||
<View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
|
||||
<Image style={{flex: 1, resizeMode: "contain"}}
|
||||
source={{uri: this.state.modalCurrentDisplayItem.image}}/>
|
||||
</View>
|
||||
<Text>{this.state.modalCurrentDisplayItem.description}</Text>
|
||||
</Content>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<Container>
|
||||
<CustomHeader hasBackButton={true} navigation={nav} title={navType} rightButton={
|
||||
<Modalize ref={this.modalRef}
|
||||
adjustToContentHeight
|
||||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
||||
{this.getModalContent()}
|
||||
</Modalize>
|
||||
<CustomHeader hasBackButton={true} navigation={nav} title={navType.name} rightButton={
|
||||
<Menu
|
||||
ref={this.setMenuRef}
|
||||
button={
|
||||
|
|
@ -220,13 +269,13 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
<FlatList
|
||||
data={this.state.navData}
|
||||
extraData={this.state.navData}
|
||||
keyExtractor={(item, index) => item.name}
|
||||
keyExtractor={(item) => item.name}
|
||||
style={{minHeight: 300, width: '100%'}}
|
||||
renderItem={({item}) =>
|
||||
<ListItem
|
||||
thumbnail
|
||||
onPress={() => {
|
||||
console.log(item.image)
|
||||
this.showItemDetails(item);
|
||||
}}
|
||||
>
|
||||
<Left>
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
>
|
||||
<Left>
|
||||
<CustomMaterialIcon
|
||||
icon={typesIcons[item.type] ? typesIcons[item.type] : typesIcons.Default}
|
||||
icon={item.type.icon}
|
||||
fontSize={30}
|
||||
/>
|
||||
</Left>
|
||||
<Body>
|
||||
<Text>
|
||||
{item.type}
|
||||
{item.type.name}
|
||||
</Text>
|
||||
<Badge><Text>
|
||||
{item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
|
||||
|
|
|
|||
Loading…
Reference in a new issue