123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- // @flow
-
- import * as React from 'react';
- import {Platform, View} from 'react-native'
- import {Body, Left, ListItem, Right, Text} from 'native-base';
- import i18n from "i18n-js";
- import CustomMaterialIcon from "../../components/CustomMaterialIcon";
- 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-v2.json";
-
-
- /**
- * Class defining the main proximo screen. This screen shows the different categories of articles
- * offered by proximo.
- */
- export default class ProximoMainScreen extends FetchedDataSectionList {
-
- onPressSearchBtn: Function;
- onPressAboutBtn: Function;
-
- constructor() {
- super(DATA_URL, 0);
- this.onPressSearchBtn = this.onPressSearchBtn.bind(this);
- this.onPressAboutBtn = this.onPressAboutBtn.bind(this);
- }
-
- static sortFinalData(a: Object, b: Object) {
- return a.type.id - b.type.id;
- }
-
- getHeaderTranslation() {
- return i18n.t("screens.proximo");
- }
-
- getUpdateToastTranslations() {
- return [i18n.t("proximoScreen.listUpdated"), i18n.t("proximoScreen.listUpdateFail")];
- }
-
- getKeyExtractor(item: Object) {
- return item !== undefined ? item.type['id'] : undefined;
- }
-
- createDataset(fetchedData: Object) {
- return [
- {
- title: '',
- data: this.generateData(fetchedData),
- extraData: super.state,
- keyExtractor: this.getKeyExtractor
- }
- ];
- }
-
- /**
- * Generate the data using types and FetchedData.
- * This will group items under the same type.
- *
- * @param fetchedData The array of articles represented by objects
- * @returns {Array} The formatted dataset
- */
- generateData(fetchedData: Object) {
- let finalData = [];
- if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
- let types = fetchedData.types;
- let articles = fetchedData.articles;
- finalData.push({
- type: {
- id: "0",
- name: i18n.t('proximoScreen.all'),
- icon: 'star'
- },
- data: this.getAvailableArticles(articles, undefined)
- });
- for (let i = 0; i < types.length; i++) {
- finalData.push({
- type: types[i],
- data: this.getAvailableArticles(articles, types[i])
- });
-
- }
- }
- finalData.sort(ProximoMainScreen.sortFinalData);
- return finalData;
- }
-
- /**
- * Get an array of available articles (in stock) of the given type
- *
- * @param articles The list of all articles
- * @param type The type of articles to find (undefined for any type)
- * @return {Array} The array of available articles
- */
- getAvailableArticles(articles: Array<Object>, type: ?Object) {
- let availableArticles = [];
- for (let k = 0; k < articles.length; k++) {
- if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id'])
- || type === undefined)
- && parseInt(articles[k]['quantity']) > 0) {
- availableArticles.push(articles[k]);
- }
- }
- return availableArticles;
- }
-
- onPressSearchBtn() {
- let searchScreenData = {
- shouldFocusSearchBar: true,
- data: {
- type: {
- id: "0",
- name: i18n.t('proximoScreen.all'),
- icon: 'star'
- },
- data: this.state.fetchedData.articles !== undefined ?
- this.getAvailableArticles(this.state.fetchedData.articles, undefined) : []
- },
- };
- this.props.navigation.navigate('ProximoListScreen', searchScreenData);
- }
-
- onPressAboutBtn() {
- this.props.navigation.navigate('ProximoAboutScreen');
- }
-
- getRightButton() {
- return (
- <View
- style={{
- flexDirection: 'row'
- }}>
- <Touchable
- style={{padding: 6}}
- onPress={this.onPressSearchBtn}>
- <CustomMaterialIcon
- color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
- icon="magnify"/>
- </Touchable>
- <Touchable
- style={{padding: 6}}
- onPress={this.onPressAboutBtn}>
- <CustomMaterialIcon
- color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
- icon="information"/>
- </Touchable>
- </View>
- );
- }
-
- getRenderItem(item: Object, section: Object) {
- let dataToSend = {
- shouldFocusSearchBar: false,
- data: item,
- };
- if (item.data.length > 0) {
- return (
- <ListItem
- button
- thumbnail
- onPress={() => {
- this.props.navigation.navigate('ProximoListScreen', dataToSend);
- }}
- >
- <Left>
- <CustomMaterialIcon
- icon={item.type.icon}
- fontSize={30}
- color={ThemeManager.getCurrentThemeVariables().brandPrimary}
- />
- </Left>
- <Body>
- <Text>
- {item.type.name}
- </Text>
- <Text note>
- {item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
- </Text>
- </Body>
- <Right>
- <CustomMaterialIcon icon="chevron-right"/>
- </Right>
- </ListItem>
- );
- } else {
- return <View/>;
- }
-
- }
- }
|